* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.qa-v2-page {
    --qa-ink: #5a4a6a;
    --qa-muted: #8a7a9a;
    --qa-surface: rgba(255, 249, 252, 0.94);
    --qa-border: rgba(255, 135, 178, 0.16);
    --qa-accent: #ff87b2;
    --qa-accent-strong: #ff6b9d;
    --qa-shadow: 0 18px 45px rgba(255, 182, 193, 0.2);
    background: radial-gradient(circle at top left, rgba(255, 179, 217, 0.78), transparent 32%),
    radial-gradient(circle at top right, rgba(179, 212, 255, 0.5), transparent 28%),
    linear-gradient(180deg, #fff5fb 0%, #ffeef8 52%, #f8f7ff 100%);
    color: var(--qa-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    line-height: 1.5;
    padding: 12px;
}

.qa-v2-page .qa-shell {
    width: min(100%, 1120px);
    margin: 0 auto;
    background: rgba(255, 249, 252, 0.76);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    box-shadow: var(--qa-shadow);
    overflow: hidden;
}

.qa-v2-page .qa-hero,
.qa-v2-page .qa-main,
.qa-v2-page .qa-footer {
    padding-inline: 18px;
}

.qa-v2-page .qa-hero {
    padding-top: 22px;
    padding-bottom: 16px;
    display: grid;
    gap: 14px;
    background: linear-gradient(180deg, rgba(255, 244, 250, 0.96) 0%, rgba(255, 238, 247, 0.78) 100%);
}

.qa-v2-page .qa-hero-copy,
.qa-v2-page .qa-hero-side,
.qa-v2-page .qa-panel {
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.12);
}

.qa-v2-page .qa-hero-copy {
    padding: 16px 14px;
}

.qa-v2-page .qa-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--qa-accent-strong);
    font-weight: 700;
    font-size: 0.92rem;
}

.qa-v2-page .qa-eyebrow,
.qa-v2-page .qa-panel-kicker,
.qa-v2-page .qa-side-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--qa-accent-strong);
}

.qa-v2-page h1,
.qa-v2-page h2,
.qa-v2-page h3,
.qa-v2-page h4 {
    color: var(--qa-ink);
    line-height: 1.08;
    text-shadow: none;
    animation: none;
}

.qa-v2-page h1 {
    margin-top: 10px;
    font-size: clamp(1rem, 4.2vw, 1.55rem);
    max-width: 30ch;
}

.qa-v2-page .qa-hero-lead {
    margin-top: 12px;
    font-size: 0.96rem;
    color: var(--qa-muted);
    max-width: 60ch;
}

.qa-v2-page .qa-hero-points {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qa-v2-page .qa-hero-points span,
.qa-v2-page .qa-bookmark-card,
.qa-v2-page .qa-tip-card {
    border: 1px solid var(--qa-border);
    background: rgba(255, 255, 255, 0.76);
    border-radius: 16px;
}

.qa-v2-page .qa-hero-points span {
    padding: 7px 10px;
    font-size: 0.84rem;
    color: var(--qa-ink);
    font-weight: 600;
}

.qa-v2-page .qa-hero-side {
    padding: 15px 14px;
    display: grid;
    gap: 10px;
}

.qa-v2-page .qa-steps {
    display: grid;
    gap: 8px;
    padding-left: 18px;
    color: var(--qa-muted);
    font-size: 0.92rem;
}

.qa-v2-page .qa-side-note {
    color: var(--qa-muted);
    font-size: 0.9rem;
}

.qa-v2-page .qa-bookmark-card,
.qa-v2-page .qa-tip-card {
    display: grid;
    gap: 4px;
    padding: 12px;
    color: var(--qa-muted);
    font-size: 0.9rem;
}

.qa-v2-page .qa-bookmark-card strong,
.qa-v2-page .qa-tip-card strong {
    color: var(--qa-ink);
    font-size: 0.95rem;
}

.qa-v2-page .qa-main {
    padding-top: 8px;
    padding-bottom: 18px;
}

.qa-v2-page .qa-grid {
    display: grid;
    gap: 12px;
}

.qa-v2-page .qa-panel {
    padding: 14px;
}

.qa-v2-page .qa-panel-primary {
    background: linear-gradient(180deg, rgba(255, 249, 252, 0.98) 0%, rgba(255, 237, 246, 0.92) 100%);
}

.qa-v2-page .qa-panel-head h2 {
    margin-top: 6px;
    font-size: 0.9rem;
}

.qa-v2-page .qa-hero-copy h2,
.qa-v2-page .qa-hero-side strong,
.qa-v2-page .question-card h3 {
    font-size: 0.95rem;
}

.qa-v2-page .qa-panel-head p:last-child {
    margin-top: 8px;
    color: var(--qa-muted);
    font-size: 0.92rem;
}

.qa-v2-page .qa-form-stack,
.qa-v2-page .qa-lookup-form {
    margin-top: 14px;
}

.qa-v2-page .qa-form-stack textarea,
.qa-v2-page .qa-lookup-form input {
    width: 100%;
    border: 2px solid rgba(255, 179, 217, 0.2);
    border-radius: 18px;
    background: white;
}

.qa-v2-page .qa-form-stack textarea {
    min-height: 140px;
    padding: 14px;
    resize: vertical;
}

.qa-v2-page .qa-lookup-form {
    display: grid;
    gap: 8px;
}

.qa-v2-page .qa-lookup-form input {
    padding: 12px 14px;
}

.qa-v2-page .qa-form-stack button,
.qa-v2-page .qa-lookup-form button,
.qa-v2-page .question-actions button {
    min-height: 46px;
    border: none;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qa-v2-page .qa-form-stack button,
.qa-v2-page .qa-lookup-form button {
    background: linear-gradient(135deg, #ff87b2 0%, #ff9ecd 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(255, 135, 178, 0.28);
}

.qa-v2-page .qa-form-stack button:hover,
.qa-v2-page .qa-lookup-form button:hover,
.qa-v2-page .question-actions button:hover {
    transform: translateY(-2px);
}

.qa-v2-page .qa-question-result {
    margin-top: 14px;
}

.qa-v2-page .question-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--qa-border);
    border-radius: 22px;
    padding: 16px 14px;
    box-shadow: 0 10px 26px rgba(255, 182, 193, 0.12);
}

.qa-v2-page .question-card h3 {
    font-size: 1.1rem;
}

.qa-v2-page .question-text,
.qa-v2-page .answer-text {
    border-radius: 18px;
    padding: 14px;
}

.qa-v2-page .question-text {
    font-size: 1rem;
    color: var(--qa-ink);
    background: linear-gradient(135deg, #fff9fc 0%, #ffeef8 100%);
    border-left: 4px solid #ffb3d9;
}

.qa-v2-page .answer-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 179, 217, 0.24);
}

.qa-v2-page .answer-section h4 {
    color: #2d8a4f;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.qa-v2-page .answer-text {
    color: #2d8a4f;
    background: linear-gradient(135deg, #d4f4dd 0%, #ebfbf0 100%);
    border-left: 4px solid #7ed99e;
}

.qa-v2-page .question-meta,
.qa-v2-page .answer-meta,
.qa-v2-page .pending-answer {
    color: var(--qa-muted);
    font-size: 0.84rem;
}

.qa-v2-page .pending-answer {
    margin-top: 14px;
}

.qa-v2-page .question-actions {
    margin-top: 16px;
    display: grid;
    gap: 8px;
}

.qa-v2-page .delete-btn {
    background: linear-gradient(135deg, #ff87b2 0%, #ff6b9d 100%);
    color: white;
}

.qa-v2-page .mark-delete-btn {
    background: linear-gradient(135deg, #ffd4a3 0%, #ffb380 100%);
    color: #8a5a3a;
}

.qa-v2-page .unmark-delete-btn {
    background: linear-gradient(135deg, #a3d5ff 0%, #80b3ff 100%);
    color: #2a5a8a;
}

.qa-v2-page .qa-footer {
    padding-top: 6px;
    padding-bottom: 18px;
    display: grid;
    gap: 8px;
    justify-items: start;
    align-items: start;
    border-top: 1px solid rgba(255, 179, 217, 0.2);
    color: var(--qa-muted);
    font-size: 0.9rem;
    background: linear-gradient(180deg, rgba(255, 245, 251, 0.4) 0%, rgba(255, 249, 252, 0.82) 100%);
    text-align: left;
}

.qa-v2-page .qa-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.qa-v2-page .qa-footer-links a {
    text-decoration: none;
    color: var(--qa-accent-strong);
}

@media (min-width: 390px) {
    .qa-v2-page {
        padding: 14px;
    }

    .qa-v2-page .qa-hero,
    .qa-v2-page .qa-main,
    .qa-v2-page .qa-footer {
        padding-inline: 20px;
    }
}

@media (min-width: 768px) {
    .qa-v2-page {
        padding: 20px;
    }

    .qa-v2-page .qa-shell {
        border-radius: 34px;
    }

    .qa-v2-page .qa-hero,
    .qa-v2-page .qa-main,
    .qa-v2-page .qa-footer {
        padding-inline: 28px;
    }

    .qa-v2-page .qa-hero {
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
        gap: 18px;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .qa-v2-page .qa-hero-copy,
    .qa-v2-page .qa-hero-side,
    .qa-v2-page .qa-panel {
        padding: 22px;
    }

    .qa-v2-page .qa-grid {
        grid-template-columns: 1.15fr 0.95fr;
        align-items: start;
    }

    .qa-v2-page .qa-grid-single {
        grid-template-columns: minmax(0, 1fr);
    }

    .qa-v2-page .qa-panel-head h2 {
        font-size: 1rem;
    }

    .qa-v2-page h1 {
        font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    }

    .qa-v2-page .question-actions {
        grid-template-columns: repeat(2, minmax(0, max-content));
    }
}

@media (min-width: 1024px) {
    .qa-v2-page {
        padding: 26px;
    }

    .qa-v2-page .qa-hero,
    .qa-v2-page .qa-main,
    .qa-v2-page .qa-footer {
        padding-inline: 36px;
    }

    .qa-v2-page .qa-hero-copy,
    .qa-v2-page .qa-hero-side,
    .qa-v2-page .qa-panel {
        padding: 26px;
        border-radius: 28px;
    }
}

.contact-v2-page {
    --contact-ink: #5a4a6a;
    --contact-muted: #8a7a9a;
    --contact-surface: rgba(255, 249, 252, 0.94);
    --contact-border: rgba(255, 135, 178, 0.16);
    --contact-accent: #ff87b2;
    --contact-accent-strong: #ff6b9d;
    --contact-shadow: 0 18px 45px rgba(255, 182, 193, 0.2);
    background: radial-gradient(circle at top left, rgba(255, 179, 217, 0.78), transparent 32%),
    radial-gradient(circle at top right, rgba(179, 212, 255, 0.5), transparent 28%),
    linear-gradient(180deg, #fff5fb 0%, #ffeef8 52%, #f8f7ff 100%);
    color: var(--contact-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    line-height: 1.5;
    padding: 12px;
}

.contact-v2-page .contact-shell {
    width: min(100%, 1120px);
    margin: 0 auto;
    background: rgba(255, 249, 252, 0.76);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    box-shadow: var(--contact-shadow);
    overflow: hidden;
}

.contact-v2-page .contact-hero,
.contact-v2-page .contact-main,
.contact-v2-page .contact-footer {
    padding-inline: 18px;
}

.contact-v2-page .contact-hero {
    padding-top: 22px;
    padding-bottom: 16px;
    display: grid;
    gap: 14px;
    background: linear-gradient(180deg, rgba(255, 244, 250, 0.96) 0%, rgba(255, 238, 247, 0.78) 100%);
}

.contact-v2-page .contact-hero-copy,
.contact-v2-page .contact-hero-side,
.contact-v2-page .contact-panel {
    background: var(--contact-surface);
    border: 1px solid var(--contact-border);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.12);
}

.contact-v2-page .contact-hero-copy,
.contact-v2-page .contact-hero-side,
.contact-v2-page .contact-panel {
    padding: 14px;
}

.contact-v2-page .contact-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--contact-accent-strong);
    font-weight: 700;
    font-size: 0.92rem;
}

.contact-v2-page .contact-eyebrow,
.contact-v2-page .contact-panel-kicker,
.contact-v2-page .contact-side-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--contact-accent-strong);
}

.contact-v2-page h1,
.contact-v2-page h2,
.contact-v2-page h3,
.contact-v2-page h4 {
    color: var(--contact-ink);
    line-height: 1.12;
    text-shadow: none;
    animation: none;
}

.contact-v2-page h1 {
    margin-top: 10px;
    font-size: clamp(1rem, 4.2vw, 1.55rem);
    max-width: 30ch;
}

.contact-v2-page .contact-panel-head h2,
.contact-v2-page .contact-tip-card strong,
.contact-v2-page .contact-note-card strong {
    font-size: 0.95rem;
}

.contact-v2-page .contact-hero-lead,
.contact-v2-page .contact-panel-head p:last-child,
.contact-v2-page .contact-tip-card span,
.contact-v2-page .contact-note-card span,
.contact-v2-page .contact-list li {
    color: var(--contact-muted);
    font-size: 0.92rem;
}

.contact-v2-page .contact-hero-lead {
    margin-top: 12px;
    max-width: 58ch;
}

.contact-v2-page .contact-hero-points {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.contact-v2-page .contact-hero-points span,
.contact-v2-page .contact-tip-card,
.contact-v2-page .contact-note-card {
    border: 1px solid var(--contact-border);
    background: rgba(255, 255, 255, 0.76);
    border-radius: 16px;
}

.contact-v2-page .contact-hero-points span {
    padding: 7px 10px;
    font-size: 0.84rem;
    color: var(--contact-ink);
    font-weight: 600;
}

.contact-v2-page .contact-hero-side {
    display: grid;
    gap: 10px;
}

.contact-v2-page .contact-tip-card,
.contact-v2-page .contact-note-card {
    display: grid;
    gap: 4px;
    padding: 12px;
}

.contact-v2-page .contact-tip-card a {
    color: var(--contact-accent-strong);
    text-decoration: none;
    font-weight: 600;
}

.contact-v2-page .contact-main {
    padding-top: 8px;
    padding-bottom: 18px;
}

.contact-v2-page .contact-grid {
    display: grid;
    gap: 12px;
}

.contact-v2-page .contact-panel-primary {
    background: linear-gradient(180deg, rgba(255, 249, 252, 0.98) 0%, rgba(255, 237, 246, 0.92) 100%);
}

.contact-v2-page .contact-panel-head p:last-child {
    margin-top: 8px;
}

.contact-v2-page .contact-list {
    margin-top: 14px;
    display: grid;
    gap: 8px;
    padding-left: 18px;
}

.contact-v2-page .contact-list li::marker {
    color: var(--contact-accent);
}

.contact-v2-page .contact-note-card {
    margin-top: 14px;
}

.contact-v2-page .contact-form {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.contact-v2-page .contact-form input,
.contact-v2-page .contact-form textarea {
    width: 100%;
    border: 2px solid rgba(255, 179, 217, 0.2);
    border-radius: 18px;
    background: white;
    padding: 12px 14px;
    font: inherit;
    color: var(--contact-ink);
}

.contact-v2-page .contact-form textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-v2-page .contact-form button {
    min-height: 46px;
    border: none;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(135deg, #ff87b2 0%, #ff9ecd 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(255, 135, 178, 0.28);
}

.contact-v2-page .contact-form button:hover {
    transform: translateY(-2px);
}

.contact-v2-page .contact-result {
    margin-top: 14px;
}

.contact-v2-page .contact-footer {
    padding-top: 10px;
    padding-bottom: 18px;
    display: grid;
    gap: 8px;
    justify-items: start;
    align-items: start;
    border-top: 1px solid rgba(255, 179, 217, 0.2);
    color: var(--contact-muted);
    font-size: 0.9rem;
    background: linear-gradient(180deg, rgba(255, 245, 251, 0.4) 0%, rgba(255, 249, 252, 0.82) 100%);
    text-align: left;
}

.contact-v2-page .contact-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-v2-page .contact-footer-links a {
    text-decoration: none;
    color: var(--contact-accent-strong);
    font-weight: 600;
}

@media (min-width: 390px) {
    .contact-v2-page {
        padding: 14px;
    }

    .contact-v2-page .contact-hero,
    .contact-v2-page .contact-main,
    .contact-v2-page .contact-footer {
        padding-inline: 20px;
    }

    .contact-v2-page .contact-hero-copy,
    .contact-v2-page .contact-hero-side,
    .contact-v2-page .contact-panel {
        padding: 16px;
        border-radius: 26px;
    }
}

@media (min-width: 768px) {
    .contact-v2-page {
        padding: 20px;
    }

    .contact-v2-page .contact-shell {
        border-radius: 34px;
    }

    .contact-v2-page .contact-hero,
    .contact-v2-page .contact-main,
    .contact-v2-page .contact-footer {
        padding-inline: 28px;
    }

    .contact-v2-page .contact-hero {
        grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.95fr);
        gap: 18px;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .contact-v2-page .contact-grid {
        grid-template-columns: 0.95fr 1.15fr;
        align-items: start;
    }

    .contact-v2-page .contact-hero-copy,
    .contact-v2-page .contact-hero-side,
    .contact-v2-page .contact-panel {
        padding: 22px;
    }

    .contact-v2-page h1 {
        font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    }

    .contact-v2-page .contact-panel-head h2,
    .contact-v2-page .contact-tip-card strong,
    .contact-v2-page .contact-note-card strong {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .contact-v2-page {
        padding: 26px;
    }

    .contact-v2-page .contact-hero,
    .contact-v2-page .contact-main,
    .contact-v2-page .contact-footer {
        padding-inline: 36px;
    }

    .contact-v2-page .contact-hero-copy,
    .contact-v2-page .contact-hero-side,
    .contact-v2-page .contact-panel {
        padding: 26px;
        border-radius: 28px;
    }
}

.songs-v2-page {
    --songs-ink: #5a4a6a;
    --songs-muted: #8a7a9a;
    --songs-surface: rgba(255, 249, 252, 0.94);
    --songs-border: rgba(255, 135, 178, 0.16);
    --songs-accent: #ff87b2;
    --songs-accent-strong: #ff6b9d;
    --songs-shadow: 0 18px 45px rgba(255, 182, 193, 0.2);
    background: radial-gradient(circle at top left, rgba(255, 179, 217, 0.78), transparent 32%),
    radial-gradient(circle at top right, rgba(179, 212, 255, 0.5), transparent 28%),
    linear-gradient(180deg, #fff5fb 0%, #ffeef8 52%, #f8f7ff 100%);
    color: var(--songs-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    line-height: 1.5;
    padding: 12px;
}

.songs-v2-page .songs-shell {
    width: min(100%, 1120px);
    margin: 0 auto;
    background: rgba(255, 249, 252, 0.76);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    box-shadow: var(--songs-shadow);
    overflow: hidden;
}

.songs-v2-page .songs-hero,
.songs-v2-page .songs-main,
.songs-v2-page .songs-footer {
    padding-inline: 18px;
}

.songs-v2-page .songs-hero {
    padding-top: 22px;
    padding-bottom: 16px;
    display: grid;
    gap: 14px;
    background: linear-gradient(180deg, rgba(255, 244, 250, 0.96) 0%, rgba(255, 238, 247, 0.78) 100%);
}

.songs-v2-page .songs-hero-copy,
.songs-v2-page .songs-hero-side,
.songs-v2-page .songs-panel {
    background: var(--songs-surface);
    border: 1px solid var(--songs-border);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.12);
    padding: 14px;
}

.songs-v2-page .songs-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--songs-accent-strong);
    font-weight: 700;
    font-size: 0.92rem;
}

.songs-v2-page .songs-eyebrow,
.songs-v2-page .songs-panel-kicker,
.songs-v2-page .songs-side-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--songs-accent-strong);
}

.songs-v2-page h1,
.songs-v2-page h2,
.songs-v2-page h3,
.songs-v2-page h4 {
    color: var(--songs-ink);
    line-height: 1.12;
    text-shadow: none;
    animation: none;
}

.songs-v2-page h1 {
    margin-top: 10px;
    font-size: clamp(1rem, 4.2vw, 1.55rem);
    max-width: none;
}

.songs-v2-page .songs-panel-head h2,
.songs-v2-page .songs-tip-card strong,
.songs-v2-page .song-card-title {
    font-size: 0.95rem;
    color: var(--songs-ink);
}

.songs-v2-page .songs-hero-lead,
.songs-v2-page .songs-panel-head p:last-child,
.songs-v2-page .songs-tip-card span,
.songs-v2-page .song-card-artist,
.songs-v2-page .song-card-meta,
.songs-v2-page .song-card-date,
.songs-v2-page .song-card-notes,
.songs-v2-page .songs-empty-state,
.songs-v2-page .songs-sort-control span {
    color: var(--songs-muted);
    font-size: 0.92rem;
}

.songs-v2-page .songs-hero-lead {
    margin-top: 12px;
    max-width: none;
}

.songs-v2-page .songs-hero-points {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.songs-v2-page .songs-hero-points span,
.songs-v2-page .songs-tip-card,
.songs-v2-page .song-card,
.songs-v2-page .songs-empty-state {
    border: 1px solid var(--songs-border);
    background: rgba(255, 255, 255, 0.76);
    border-radius: 16px;
}

.songs-v2-page .songs-hero-points span {
    padding: 7px 10px;
    font-size: 0.84rem;
    color: var(--songs-ink);
    font-weight: 600;
}

.songs-v2-page .songs-hero-side {
    display: grid;
    gap: 10px;
}

.songs-v2-page .songs-tip-card {
    display: grid;
    gap: 4px;
    padding: 12px;
}

.songs-v2-page .songs-playlist-links {
    display: grid;
    gap: 6px;
    margin-top: 4px;
}

.songs-v2-page .songs-playlist-links a,
.songs-v2-page .songs-playlist-links span {
    font-size: 0.9rem;
}

.songs-v2-page .songs-playlist-links a {
    color: var(--songs-accent-strong);
    text-decoration: none;
    font-weight: 600;
}

.songs-v2-page .songs-playlist-links span {
    color: var(--songs-muted);
}

.songs-v2-page .songs-main {
    padding-top: 8px;
    padding-bottom: 18px;
}

.songs-v2-page .songs-grid {
    display: grid;
    gap: 12px;
}

.songs-v2-page .songs-panel-primary {
    background: linear-gradient(180deg, rgba(255, 249, 252, 0.98) 0%, rgba(255, 237, 246, 0.92) 100%);
}

.songs-v2-page .songs-panel-head p:last-child {
    margin-top: 8px;
}

.songs-v2-page .songs-form {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.songs-v2-page .songs-form input,
.songs-v2-page .songs-form textarea,
.songs-v2-page .songs-sort-control select {
    width: 100%;
    border: 2px solid rgba(255, 179, 217, 0.2);
    border-radius: 18px;
    background: white;
    padding: 12px 14px;
    font: inherit;
    color: var(--songs-ink);
}

.songs-v2-page .songs-form button {
    min-height: 46px;
    border: none;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(135deg, #ff87b2 0%, #ff9ecd 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(255, 135, 178, 0.28);
}

.songs-v2-page .songs-form button:hover,
.songs-v2-page .song-card-link:hover,
.songs-v2-page .song-card-upvote:hover {
    transform: translateY(-2px);
}

.songs-v2-page .songs-result {
    margin-top: 14px;
}

.songs-v2-page .songs-list-head {
    display: grid;
    gap: 10px;
}

.songs-v2-page .songs-sort-control {
    display: grid;
    gap: 6px;
}

.songs-v2-page .songs-sort-control span {
    font-weight: 600;
}

.songs-v2-page .songs-list {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.songs-v2-page .songs-empty-state {
    padding: 14px;
}

.songs-v2-page .song-card {
    padding: 14px;
    display: grid;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255, 249, 252, 0.96) 0%, rgba(246, 243, 255, 0.96) 100%);
}

.songs-v2-page .song-card-main {
    display: grid;
    gap: 4px;
}

.songs-v2-page .song-card-title {
    color: var(--songs-ink);
    font-weight: 700;
}

.songs-v2-page .song-card-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.songs-v2-page .song-card-votes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--songs-muted);
    font-size: 0.88rem;
}

.songs-v2-page .song-card-link,
.songs-v2-page .song-card-upvote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 999px;
    padding: 10px 14px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.songs-v2-page .song-card-link {
    background: rgba(255, 179, 217, 0.16);
    color: var(--songs-ink);
}

.songs-v2-page .song-card-upvote {
    border: none;
    background: linear-gradient(135deg, #ff87b2 0%, #ff9ecd 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(255, 135, 178, 0.24);
    cursor: pointer;
}

.songs-v2-page .song-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.songs-v2-page .songs-footer {
    padding-top: 10px;
    padding-bottom: 18px;
    display: grid;
    gap: 8px;
    justify-items: start;
    align-items: start;
    border-top: 1px solid rgba(255, 179, 217, 0.2);
    color: var(--songs-muted);
    font-size: 0.9rem;
    background: linear-gradient(180deg, rgba(255, 245, 251, 0.4) 0%, rgba(255, 249, 252, 0.82) 100%);
    text-align: left;
}

.songs-v2-page .songs-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.songs-v2-page .songs-footer-links a {
    text-decoration: none;
    color: var(--songs-accent-strong);
    font-weight: 600;
}

@media (min-width: 390px) {
    .songs-v2-page {
        padding: 14px;
    }

    .songs-v2-page .songs-hero,
    .songs-v2-page .songs-main,
    .songs-v2-page .songs-footer {
        padding-inline: 20px;
    }

    .songs-v2-page .songs-hero-copy,
    .songs-v2-page .songs-hero-side,
    .songs-v2-page .songs-panel {
        padding: 16px;
        border-radius: 26px;
    }
}

@media (min-width: 768px) {
    .songs-v2-page {
        padding: 20px;
    }

    .songs-v2-page .songs-shell {
        border-radius: 34px;
    }

    .songs-v2-page .songs-hero,
    .songs-v2-page .songs-main,
    .songs-v2-page .songs-footer {
        padding-inline: 28px;
    }

    .songs-v2-page .songs-hero {
        grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.95fr);
        gap: 18px;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .songs-v2-page .songs-grid {
        grid-template-columns: 0.9fr 1.1fr;
        align-items: start;
    }

    .songs-v2-page .songs-hero-copy,
    .songs-v2-page .songs-hero-side,
    .songs-v2-page .songs-panel {
        padding: 22px;
    }

    .songs-v2-page h1 {
        font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    }

    .songs-v2-page .songs-panel-head h2,
    .songs-v2-page .songs-tip-card strong,
    .songs-v2-page .song-card-title {
        font-size: 1rem;
    }

    .songs-v2-page .songs-list-head {
        grid-template-columns: minmax(0, 1fr) 180px;
        align-items: end;
    }
}

@media (min-width: 1024px) {
    .songs-v2-page {
        padding: 26px;
    }

    .songs-v2-page .songs-hero,
    .songs-v2-page .songs-main,
    .songs-v2-page .songs-footer {
        padding-inline: 36px;
    }

    .songs-v2-page .songs-hero-copy,
    .songs-v2-page .songs-hero-side,
    .songs-v2-page .songs-panel {
        padding: 26px;
        border-radius: 28px;
    }
}

.games-library-page {
    --games-ink: #5a4a6a;
    --games-muted: #8a7a9a;
    --games-surface: rgba(255, 249, 252, 0.94);
    --games-border: rgba(255, 135, 178, 0.16);
    --games-accent: #ff87b2;
    --games-accent-strong: #ff6b9d;
    --games-shadow: 0 18px 45px rgba(255, 182, 193, 0.2);
    background:
        radial-gradient(circle at top left, rgba(255, 179, 217, 0.78), transparent 32%),
        radial-gradient(circle at top right, rgba(179, 212, 255, 0.5), transparent 28%),
        linear-gradient(180deg, #fff5fb 0%, #ffeef8 52%, #f8f7ff 100%);
    color: var(--games-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    line-height: 1.5;
    padding: 12px;
}

.games-library-page .games-library-shell {
    width: min(100%, 1180px);
    margin: 0 auto;
    background: rgba(255, 249, 252, 0.76);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    box-shadow: var(--games-shadow);
    overflow: hidden;
}

.games-library-page .games-library-hero,
.games-library-page .games-library-main,
.games-library-page .games-library-footer {
    padding-inline: 18px;
}

.games-library-page .games-library-hero {
    padding-top: 22px;
    padding-bottom: 16px;
    display: grid;
    gap: 14px;
    background: linear-gradient(180deg, rgba(255, 244, 250, 0.96) 0%, rgba(255, 238, 247, 0.78) 100%);
}

.games-library-page .games-library-hero-copy,
.games-library-page .games-library-hero-side,
.games-library-page .games-library-panel {
    background: var(--games-surface);
    border: 1px solid var(--games-border);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.12);
    padding: 14px;
}

.games-library-page .games-library-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--games-accent-strong);
    font-weight: 700;
    font-size: 0.92rem;
}

.games-library-page .games-library-eyebrow,
.games-library-page .games-library-panel-kicker,
.games-library-page .games-library-side-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--games-accent-strong);
}

.games-library-page h1,
.games-library-page h2,
.games-library-page h3,
.games-library-page h4 {
    color: var(--games-ink);
    line-height: 1.12;
    text-shadow: none;
    animation: none;
}

.games-library-page h1 {
    margin-top: 10px;
    font-size: clamp(1rem, 4.2vw, 1.55rem);
}

.games-library-page .games-library-hero-lead,
.games-library-page .games-library-panel-head p:last-child,
.games-library-page .games-library-tip-card span {
    color: var(--games-muted);
    font-size: 0.92rem;
}

.games-library-page .games-library-hero-lead {
    margin-top: 12px;
}

.games-library-page .games-library-hero-points {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.games-library-page .games-library-hero-points span,
.games-library-page .games-library-tip-card {
    border: 1px solid var(--games-border);
    background: rgba(255, 255, 255, 0.76);
    border-radius: 16px;
}

.games-library-page .games-library-hero-points span {
    padding: 7px 10px;
    font-size: 0.84rem;
    color: var(--games-ink);
    font-weight: 600;
}

.games-library-page .games-library-hero-side {
    display: grid;
    gap: 10px;
}

.games-library-page .games-library-tip-card {
    display: grid;
    gap: 4px;
    padding: 12px;
}

.games-library-page .games-library-tip-card strong {
    color: var(--games-ink);
    font-size: 0.95rem;
}

.games-library-page .games-library-main {
    padding-top: 8px;
    padding-bottom: 18px;
}

.games-library-page .games-library-panel-head h2 {
    font-size: 0.95rem;
    color: var(--games-ink);
}

.games-library-page .games-library-panel-head p:last-child {
    margin-top: 8px;
}

.games-library-page .games-library-checkboxes {
    justify-content: center;
}

.games-library-page .games-library-footer {
    padding-top: 10px;
    padding-bottom: 18px;
    display: grid;
    gap: 8px;
    justify-items: start;
    align-items: start;
    border-top: 1px solid rgba(255, 179, 217, 0.2);
    color: var(--games-muted);
    font-size: 0.9rem;
    background: linear-gradient(180deg, rgba(255, 245, 251, 0.4) 0%, rgba(255, 249, 252, 0.82) 100%);
    text-align: left;
}

.games-library-page .games-library-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.games-library-page .games-library-footer-links a {
    text-decoration: none;
    color: var(--games-accent-strong);
    font-weight: 600;
}

.about-detail-page {
    --about-ink: #5a4a6a;
    --about-muted: #8a7a9a;
    --about-surface: rgba(255, 249, 252, 0.94);
    --about-border: rgba(255, 135, 178, 0.16);
    --about-accent: #ff87b2;
    --about-accent-strong: #ff6b9d;
    --about-shadow: 0 18px 45px rgba(255, 182, 193, 0.2);
    background: radial-gradient(circle at top left, rgba(255, 179, 217, 0.78), transparent 32%),
    radial-gradient(circle at top right, rgba(179, 212, 255, 0.5), transparent 28%),
    linear-gradient(180deg, #fff5fb 0%, #ffeef8 52%, #f8f7ff 100%);
    color: var(--about-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    line-height: 1.5;
    padding: 12px;
}

.about-detail-page .about-shell {
    width: min(100%, 1120px);
    margin: 0 auto;
    background: rgba(255, 249, 252, 0.76);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    box-shadow: var(--about-shadow);
    overflow: hidden;
}

.about-detail-page .about-main {
    padding: 32px 18px;
}

.about-detail-page .about-writing-panel {
    width: min(100%, 760px);
    margin: 0 auto;
    background: var(--about-surface);
    border: 1px solid var(--about-border);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.12);
    padding: 20px 18px;
}

.about-detail-page .about-home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--about-accent-strong);
    font-weight: 700;
    font-size: 0.92rem;
}

.about-detail-page .about-writing-kicker {
    margin-top: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--about-accent-strong);
}

.about-detail-page .about-writing-block {
    margin-top: 14px;
    color: var(--about-ink);
    font-size: 1rem;
    line-height: 1.85;
}

.about-detail-page .about-writing-block p + p {
    margin-top: 1.15rem;
}

.about-detail-page .about-writing-block h2 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
}

.about-detail-page .about-quick-card {
    margin: 1.5rem 0 2rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(10px);
}

.about-detail-page .about-quick-card h2 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.about-detail-page .about-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.about-detail-page .about-quick-card h3 {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    opacity: 0.85;
}

.about-detail-page .about-quick-card ul {
    margin: 0;
    padding-left: 1.1rem;
}

.about-detail-page .about-quick-card li {
    margin: 0.2rem 0;
}

@media (max-width: 700px) {
    .about-detail-page .about-quick-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 390px) {
    .about-detail-page {
        padding: 14px;
    }

    .about-detail-page .about-writing-panel {
        padding: 22px 20px;
        border-radius: 26px;
    }

    .games-library-page {
        padding: 14px;
    }

    .games-library-page .games-library-hero,
    .games-library-page .games-library-main,
    .games-library-page .games-library-footer {
        padding-inline: 20px;
    }

    .games-library-page .games-library-hero-copy,
    .games-library-page .games-library-hero-side,
    .games-library-page .games-library-panel {
        padding: 16px;
        border-radius: 26px;
    }
}

@media (min-width: 768px) {
    .about-detail-page {
        padding: 20px;
    }

    .about-detail-page .about-shell {
        border-radius: 34px;
    }

    .about-detail-page .about-main {
        padding: 44px 28px;
    }

    .about-detail-page .about-writing-panel {
        padding: 30px 28px;
    }

    .about-detail-page .about-writing-block {
        font-size: 1.04rem;
    }

    .games-library-page {
        padding: 20px;
    }

    .games-library-page .games-library-shell {
        border-radius: 34px;
    }

    .games-library-page .games-library-hero,
    .games-library-page .games-library-main,
    .games-library-page .games-library-footer {
        padding-inline: 28px;
    }

    .games-library-page .games-library-hero {
        grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.95fr);
        gap: 18px;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .games-library-page .games-library-hero-copy,
    .games-library-page .games-library-hero-side,
    .games-library-page .games-library-panel {
        padding: 22px;
    }

    .games-library-page h1 {
        font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    }

    .games-library-page .games-library-panel-head h2,
    .games-library-page .games-library-tip-card strong {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .about-detail-page {
        padding: 26px;
    }

    .about-detail-page .about-main {
        padding-inline: 36px;
    }

    .games-library-page {
        padding: 26px;
    }

    .games-library-page .games-library-hero,
    .games-library-page .games-library-main,
    .games-library-page .games-library-footer {
        padding-inline: 36px;
    }

    .games-library-page .games-library-hero-copy,
    .games-library-page .games-library-hero-side,
    .games-library-page .games-library-panel {
        padding: 26px;
        border-radius: 28px;
    }
}

.home-page {
    --bg-ink: #5a4a6a;
    --bg-soft: #fff5fb;
    --surface: rgba(255, 249, 252, 0.92);
    --surface-strong: #ffffff;
    --line: rgba(255, 135, 178, 0.16);
    --accent: #ff87b2;
    --accent-deep: #ff6b9d;
    --accent-soft: #ffd9ea;
    --text-main: #5a4a6a;
    --text-muted: #8a7a9a;
    --shadow: 0 18px 45px rgba(255, 182, 193, 0.22);
    background: radial-gradient(circle at top left, rgba(255, 179, 217, 0.8), transparent 32%),
    radial-gradient(circle at top right, rgba(179, 212, 255, 0.55), transparent 28%),
    linear-gradient(180deg, #fff5fb 0%, #ffeef8 52%, #f8f7ff 100%);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    padding: 12px;
}

.home-page a {
    color: inherit;
}

.home-page .site-shell {
    width: min(100%, 1180px);
    margin: 0 auto;
    background: rgba(255, 249, 252, 0.74);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 28px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.home-page .home-hero,
.home-page .home-main,
.home-page .home-footer {
    padding-inline: 18px;
}

.home-page .home-hero {
    padding-top: 22px;
    padding-bottom: 18px;
    display: grid;
    gap: 16px;
    color: var(--text-main);
    text-align: left;
    background: linear-gradient(180deg, rgba(255, 244, 250, 0.96) 0%, rgba(255, 238, 247, 0.78) 100%);
}

.home-page .hero-copy,
.home-page .hero-card,
.home-page .status-panel,
.home-page .journey-panel,
.home-page .social-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.12);
}

.home-page .hero-copy {
    padding: 16px 14px;
}

.home-page .eyebrow,
.home-page .profile-label,
.home-page .journey-badge,
.home-page .activity-kicker,
.home-page .status-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
}

.home-page .eyebrow,
.home-page .profile-label,
.home-page .activity-kicker,
.home-page .status-label {
    color: var(--accent-deep);
}

.home-page h1,
.home-page h2,
.home-page h3 {
    font-weight: 700;
    line-height: 1.05;
    color: var(--text-main);
    text-shadow: none;
    animation: none;
}

.home-page h1 {
    margin-top: 8px;
    font-size: clamp(1rem, 4.4vw, 1.65rem);
    max-width: 30ch;
}

.home-page .hero-lead {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 58ch;
}

.home-page .hero-actions {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.home-page .primary-link,
.home-page .secondary-link,
.home-page .journey-card,
.home-page .social-card {
    text-decoration: none;
}

.home-page .primary-link,
.home-page .secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.home-page .primary-link {
    background: linear-gradient(135deg, #ff87b2 0%, #ff9ecd 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(255, 135, 178, 0.3);
}

.home-page .secondary-link {
    background: rgba(255, 179, 217, 0.14);
    color: var(--bg-ink);
}

.home-page .primary-link:hover,
.home-page .secondary-link:hover,
.home-page .journey-card:hover,
.home-page .social-card:hover {
    transform: translateY(-2px);
}

.home-page .hero-signals {
    margin-top: 14px;
    display: grid;
    gap: 8px;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.home-page .hero-signals li::marker {
    color: var(--accent);
}

.home-page .hero-card {
    padding: 15px 14px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.home-page .presence-block {
    display: grid;
    justify-items: start;
    gap: 8px;
    margin-bottom: 2px;
}

.home-page .presence-fox {
    display: inline-block;
    font-size: 2.9rem;
    line-height: 1;
    filter: drop-shadow(0 8px 18px rgba(255, 135, 178, 0.18));
    animation: foxFloat 3.8s ease-in-out infinite;
    transform-origin: center bottom;
}

.home-page .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: white;
    border: 1px solid rgba(255, 179, 217, 0.26);
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.14);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.home-page .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    animation: statusBlink 2.4s ease-in-out infinite;
}

.home-page .status-dot.away {
    background: #fb923c;
}

.home-page .status-dot.offline {
    background: #94a3b8;
    animation: none;
}

.home-page .status-text {
    line-height: 1;
}

.home-page .hero-copy h2,
.home-page .hero-card h2,
.home-page .section-heading h2,
.home-page .journey-card h3,
.home-page .social-card h3 {
    font-size: 0.92rem;
    line-height: 1.18;
}

.home-page .hero-card p,
.home-page .section-heading p,
.home-page .social-card p,
.home-page .journey-card p,
.home-page .status-card span,
.home-page .activity-list li,
.home-page .profile-facts dd {
    color: var(--text-muted);
}

.home-page .profile-facts {
    display: grid;
    gap: 8px;
}

.home-page .profile-facts div {
    padding-top: 9px;
    border-top: 1px solid var(--line);
}

.home-page .profile-facts dt {
    font-size: 0.9rem;
    color: var(--bg-ink);
    font-weight: 700;
}

.home-page .profile-facts dd {
    margin-top: 4px;
}

.home-page .home-main {
    padding-top: 8px;
    padding-bottom: 16px;
    display: grid;
    gap: 12px;
}

.home-page .status-panel,
.home-page .journey-panel,
.home-page .social-panel {
    padding: 14px;
}

.home-page .section-heading h2 {
    margin-top: 6px;
    font-size: 1.28rem;
}

.home-page .section-heading p:last-child {
    margin-top: 8px;
    font-size: 0.92rem;
}

.home-page .status-grid,
.home-page .journey-grid,
.home-page .social-grid {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.home-page .status-card,
.home-page .activity-card,
.home-page .journey-card,
.home-page .social-card {
    border-radius: 20px;
    border: 1px solid var(--line);
}

.home-page .status-card {
    background: var(--surface-strong);
    padding: 13px;
    display: grid;
    gap: 6px;
}

.home-page .status-card strong {
    font-size: 1.2rem;
    color: var(--bg-ink);
}

.home-page .current-activity-card {
    --now-playing-accent: #2d8a4f;
    --now-playing-accent-soft: #d4f4dd;
    --now-playing-glow: rgba(45, 138, 79, 0.22);
    margin-top: 10px;
    background: radial-gradient(circle at top right, var(--now-playing-glow), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--now-playing-accent-soft) 82%, white 18%), rgba(255, 255, 255, 0.96));
    padding: 13px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--now-playing-accent) 28%, white 72%);
}

.home-page .current-activity-section {
    display: grid;
    gap: 8px;
}

.home-page .current-activity-icon-line {
    font-size: 1.05rem;
    line-height: 1;
    opacity: 0.9;
}

.home-page .current-activity-divider {
    height: 1px;
    margin: 12px 0;
    background: linear-gradient(90deg, rgba(255, 179, 217, 0), rgba(255, 179, 217, 0.45), rgba(255, 179, 217, 0));
}

.home-page .current-activity-empty {
    display: grid;
    gap: 8px;
}

.home-page .now-playing-body {
    margin-top: 10px;
    display: grid;
    gap: 6px;
}

.home-page .now-playing-layout {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.home-page .game-presence-body {
    display: grid;
    gap: 6px;
}

.home-page .game-presence-layout {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.home-page .game-presence-shell {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(74, 122, 179, 0.14), rgba(255, 255, 255, 0.92));
    border: 1px solid rgba(74, 122, 179, 0.16);
    box-shadow: 0 8px 20px rgba(74, 122, 179, 0.08);
}

.home-page .game-presence-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.home-page .game-presence-kicker {
    color: #46688b;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-page .game-presence-live {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(74, 122, 179, 0.12);
    color: #46688b;
    font-size: 0.72rem;
    font-weight: 700;
}

.home-page .game-presence-art {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(74, 122, 179, 0.18);
}

.home-page .game-presence-art-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(74, 122, 179, 0.16), rgba(179, 212, 255, 0.55));
    color: #46688b;
    font-size: 1.5rem;
}

.home-page .now-playing-cover {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 24px var(--now-playing-glow);
}

.home-page .now-playing-cover-fallback {
    background: linear-gradient(135deg, rgba(45, 138, 79, 0.18), rgba(126, 217, 158, 0.45));
}

.home-page .now-playing-body strong {
    font-size: 1rem;
    color: color-mix(in srgb, var(--now-playing-accent) 88%, #163322 12%);
}

.home-page .game-presence-body strong {
    font-size: 1.18rem;
    color: #37577a;
    line-height: 1.1;
}

.home-page .now-playing-meta {
    color: color-mix(in srgb, var(--now-playing-accent) 90%, #244333 10%);
    font-size: 0.92rem;
    font-weight: 600;
}

.home-page .now-playing-link {
    color: color-mix(in srgb, var(--now-playing-accent) 92%, #244333 8%);
    font-weight: 700;
    text-decoration: none;
}

.home-page .now-playing-progress {
    display: grid;
    gap: 4px;
    margin-top: 2px;
}

.home-page .now-playing-progress-track {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--now-playing-accent) 18%, white 82%);
    overflow: hidden;
}

.home-page .now-playing-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--now-playing-accent) 0%, var(--now-playing-accent-soft) 100%);
    transition: width 0.45s linear;
}

.home-page .now-playing-progress-times {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.home-page .now-playing-time {
    color: color-mix(in srgb, var(--now-playing-accent) 92%, #244333 8%);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.home-page .activity-card {
    margin-top: 10px;
    background: linear-gradient(135deg, rgba(255, 179, 217, 0.12), rgba(179, 212, 255, 0.14));
    padding: 13px;
}

.home-page .activity-list {
    margin-top: 10px;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    font-size: 0.9rem;
}

.home-page .activity-list li::marker {
    color: var(--accent);
}

.home-page .journey-card,
.home-page .social-card {
    background: var(--surface-strong);
    padding: 14px;
    display: grid;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.home-page .journey-card {
    box-shadow: 0 10px 25px rgba(255, 182, 193, 0.14);
}

.home-page .journey-card-primary {
    background: linear-gradient(180deg, rgba(255, 179, 217, 0.34) 0%, rgba(255, 249, 252, 0.96) 100%);
    border-color: rgba(255, 135, 178, 0.25);
}

.home-page .journey-card h3,
.home-page .social-card h3 {
    font-size: 1.08rem;
}

.home-page .journey-badge {
    color: var(--accent-deep);
}

.home-page .journey-cta,
.home-page .social-card span {
    margin-top: 2px;
    color: var(--bg-ink);
    font-weight: 700;
    font-size: 0.9rem;
}

.home-page .social-card {
    background: linear-gradient(180deg, rgba(255, 249, 252, 0.96) 0%, rgba(246, 243, 255, 0.96) 100%);
}

.home-page .home-footer {
    background: linear-gradient(180deg, rgba(255, 245, 251, 0.4) 0%, rgba(255, 249, 252, 0.82) 100%);
    color: var(--text-muted);
    padding-top: 10px;
    padding-bottom: 18px;
    display: grid;
    gap: 8px;
    justify-items: start;
    align-items: start;
    font-size: 0.9rem;
    text-align: left;
    border-top: 1px solid rgba(255, 179, 217, 0.2);
}

.home-page .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-page .footer-links a {
    text-decoration: none;
    color: var(--accent-deep);
    font-weight: 600;
    padding: 2px 0;
}

@keyframes foxFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px) rotate(-3deg);
    }
}

@keyframes statusBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}

.home-page .journey-card p,
.home-page .social-card p,
.home-page .hero-card p,
.home-page .status-card span,
.home-page .now-playing-body span,
.home-page .game-presence-body span,
.home-page .current-activity-body span,
.home-page .section-heading p {
    font-size: 0.9rem;
}

@media (min-width: 390px) {
    .home-page {
        padding: 14px;
    }

    .home-page .home-hero,
    .home-page .home-main,
    .home-page .home-footer {
        padding-inline: 20px;
    }

    .home-page .hero-copy,
    .home-page .hero-card,
    .home-page .status-panel,
    .home-page .journey-panel,
    .home-page .social-panel {
        border-radius: 26px;
    }

    .home-page .hero-actions {
        gap: 12px;
    }

    .home-page .hero-copy,
    .home-page .hero-card,
    .home-page .status-panel,
    .home-page .journey-panel,
    .home-page .social-panel {
        padding: 16px;
    }

    .home-page .journey-card,
    .home-page .social-card,
    .home-page .status-card,
    .home-page .activity-card,
    .home-page .current-activity-card {
        padding: 15px;
    }
}

@media (min-width: 768px) {
    .home-page {
        padding: 20px;
    }

    .home-page .home-hero {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
        gap: 18px;
        padding-top: 28px;
        padding-bottom: 22px;
    }

    .home-page .home-hero,
    .home-page .home-main,
    .home-page .home-footer {
        padding-inline: 28px;
    }

    .home-page .hero-copy,
    .home-page .hero-card,
    .home-page .status-panel,
    .home-page .journey-panel,
    .home-page .social-panel {
        padding: 24px;
    }

    .home-page h1 {
        font-size: clamp(1.25rem, 2.6vw, 1.95rem);
    }

    .home-page .presence-fox {
        font-size: 3.9rem;
    }

    .home-page .hero-copy h2,
    .home-page .hero-card h2,
    .home-page .section-heading h2,
    .home-page .journey-card h3,
    .home-page .social-card h3 {
        font-size: 1rem;
    }

    .home-page .hero-actions {
        grid-template-columns: repeat(2, minmax(0, max-content));
        align-items: start;
    }

    .home-page .status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-page .journey-grid,
    .home-page .social-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page .section-heading h2 {
        max-width: 14ch;
    }

}

@media (min-width: 1024px) {
    .home-page {
        padding: 26px;
    }

    .home-page .site-shell {
        border-radius: 36px;
    }

    .home-page .home-hero,
    .home-page .home-main,
    .home-page .home-footer {
        padding-inline: 36px;
    }

    .home-page .home-hero {
        gap: 22px;
        padding-top: 36px;
        padding-bottom: 26px;
    }

    .home-page .hero-copy,
    .home-page .hero-card,
    .home-page .status-panel,
    .home-page .journey-panel,
    .home-page .social-panel {
        padding: 28px;
        border-radius: 30px;
    }

    .home-page .journey-grid {
        grid-template-columns: 1.15fr 1fr 1fr 1fr;
    }

    .home-page .social-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #5a4a6a;
    background: linear-gradient(135deg, #ffb3d9 0%, #b3d4ff 50%, #ffd4e5 100%);
    min-height: 100vh;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff9fc;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(255, 182, 193, 0.4), 0 0 0 8px rgba(255, 255, 255, 0.5);
    overflow: hidden;
    position: relative;
}

header {
    background: linear-gradient(135deg, #ffb3d9 0%, #ff9ecd 100%);
    color: white;
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

header::before {
    content: '🐾';
    position: absolute;
    font-size: 4em;
    opacity: 0.2;
    top: 10px;
    left: 30px;
    transform: rotate(-20deg);
}

header::after {
    content: '🐾';
    position: absolute;
    font-size: 3em;
    opacity: 0.2;
    bottom: 15px;
    right: 40px;
    transform: rotate(20deg);
}

header h1 {
    font-size: 3em;
    margin-bottom: 10px;
    text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5), 5px 5px 10px rgba(255, 182, 193, 0.3);
    animation: wiggle 3s ease-in-out infinite;
}

@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-1deg);
    }
    75% {
        transform: rotate(1deg);
    }
}

.tagline {
    font-size: 1.2em;
    opacity: 0.9;
}

.bio-section {
    padding: 40px;
    text-align: center;
    background: linear-gradient(180deg, #fff9fc 0%, #ffe6f0 100%);
}

.bio-section h2 {
    font-size: 2em;
    margin-bottom: 15px;
    color: #ff87b2;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

.social-links {
    margin-top: 30px;
}

.social-links h3 {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #333;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 12px 24px;
    background: white;
    color: #ff87b2;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.8);
    transition: all 0.3s;
    font-weight: 500;
    position: relative;
}

.social-link:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 182, 193, 0.5), 0 0 0 4px rgba(255, 182, 193, 0.3);
    background: linear-gradient(135deg, #ffb3d9 0%, #ff9ecd 100%);
    color: white;
    animation: bounce 0.5s ease-in-out;
}

.social-link:hover::after {
    content: '🐾';
    position: absolute;
    right: -15px;
    top: -10px;
    font-size: 1.5em;
    animation: pawPrint 0.5s ease-out;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-3px) scale(1.05);
    }
    50% {
        transform: translateY(-5px) scale(1.08);
    }
}

@keyframes pawPrint {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        opacity: 0;
        transform: scale(1) rotate(20deg);
    }
}

.social-link .icon {
    font-size: 1.2em;
}

.content-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 40px;
}

.qa-section,
.songs-section {
    background: linear-gradient(180deg, #fff9fc 0%, #ffe6f0 100%);
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
}

.qa-section h2,
.songs-section h2 {
    color: #ff87b2;
    margin-bottom: 10px;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

.tracking-code-box {
    background: linear-gradient(135deg, #d4f4dd 0%, #c8f0d8 100%);
    border: 3px solid #7ed99e;
    border-radius: 30px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
    box-shadow: 0 4px 15px rgba(126, 217, 158, 0.3);
}

.tracking-code-box h3 {
    color: #155724;
    margin-bottom: 10px;
}

.tracking-code {
    font-size: 2em;
    font-weight: bold;
    color: #2d8a4f;
    background: white;
    padding: 15px;
    border-radius: 20px;
    margin: 15px 0;
    letter-spacing: 2px;
    font-family: monospace;
    box-shadow: 0 2px 10px rgba(126, 217, 158, 0.3);
}

.tracking-note {
    color: #155724;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.lookup-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #e0e0e0;
}

.lookup-section h3 {
    color: #333;
    margin-bottom: 10px;
}

.lookup-form {
    display: flex;
    gap: 10px;
}

.lookup-form input {
    flex: 1;
    padding: 12px;
    border: 3px solid #ffe6f0;
    border-radius: 25px;
    font-size: 1em;
    text-transform: uppercase;
    font-family: monospace;
    transition: all 0.3s;
}

.lookup-form input:focus {
    outline: none;
    border-color: #ffb3d9;
    box-shadow: 0 0 0 4px rgba(255, 179, 217, 0.2);
}

.lookup-form button {
    padding: 12px 24px;
    background: linear-gradient(135deg, #ffb3d9 0%, #ff9ecd 100%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.4);
    font-weight: 600;
}

.lookup-form button:hover {
    background: linear-gradient(135deg, #ff9ecd 0%, #ff87b2 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 182, 193, 0.6);
}

.question-result {
    margin-top: 20px;
}

.question-card {
    background: white;
    padding: 20px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2), 0 0 0 3px rgba(255, 182, 193, 0.1);
}

.question-card h3 {
    color: #ff87b2;
    margin-bottom: 10px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
}

.question-text {
    font-size: 1.1em;
    color: #5a4a6a;
    margin: 15px 0;
    padding: 15px;
    background: linear-gradient(135deg, #fff9fc 0%, #ffe6f0 100%);
    border-radius: 20px;
    border-left: 4px solid #ffb3d9;
}

.question-meta,
.answer-meta {
    font-size: 0.8em;
    color: #999;
    margin-top: 5px;
}

.answer-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #e0e0e0;
}

.answer-section h4 {
    color: #7ed99e;
    margin-bottom: 10px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
}

.answer-text {
    font-size: 1em;
    color: #2d8a4f;
    margin: 15px 0;
    padding: 15px;
    background: linear-gradient(135deg, #d4f4dd 0%, #c8f0d8 100%);
    border-radius: 20px;
    border-left: 4px solid #7ed99e;
}

.pending-answer {
    color: #999;
    font-style: italic;
    margin: 15px 0;
}

.question-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.mark-delete-btn {
    background: linear-gradient(135deg, #ffd4a3 0%, #ffb380 100%);
    color: #8a5a3a;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(255, 179, 128, 0.3);
    font-weight: 600;
}

.mark-delete-btn:hover {
    background: linear-gradient(135deg, #ffb380 0%, #ff9a5c 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 179, 128, 0.5);
}

.unmark-delete-btn {
    background: linear-gradient(135deg, #a3d5ff 0%, #80b3ff 100%);
    color: #2a5a8a;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(128, 179, 255, 0.3);
    font-weight: 600;
}

.unmark-delete-btn:hover {
    background: linear-gradient(135deg, #80b3ff 0%, #5c9aff 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 15px rgba(128, 179, 255, 0.5);
}

.marked-deletion-notice {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
    border-left: 4px solid #ff9a5c;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}

.marked-deletion-notice strong {
    color: #8a5a3a;
    font-size: 1.05em;
}

.marked-deletion-notice p {
    margin: 5px 0;
    color: #8a5a3a;
}


.add-form {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-form input,
.add-form textarea {
    padding: 12px;
    border: 3px solid #ffe6f0;
    border-radius: 25px;
    font-size: 1em;
    transition: all 0.3s;
    font-family: inherit;
    background: white;
}

.add-form input:focus,
.add-form textarea:focus {
    outline: none;
    border-color: #ffb3d9;
    box-shadow: 0 0 0 4px rgba(255, 179, 217, 0.2);
    transform: scale(1.02);
}

.add-form button {
    padding: 12px 24px;
    background: linear-gradient(135deg, #ffb3d9 0%, #ff9ecd 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.4);
    font-weight: 600;
}

.add-form button:hover {
    background: linear-gradient(135deg, #ff9ecd 0%, #ff87b2 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 182, 193, 0.6);
    animation: wiggle 0.5s ease-in-out;
}

.items-list {
    margin-top: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.item {
    background: white;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(255, 182, 193, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(255, 182, 193, 0.3);
    border-color: rgba(255, 179, 217, 0.3);
}

.item-content {
    flex: 1;
}

.item-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.item-subtitle {
    color: #666;
    font-size: 0.9em;
}

.item-link {
    color: #ff87b2;
    text-decoration: none;
    word-break: break-all;
    transition: all 0.3s;
    padding: 3px 8px;
    border-radius: 10px;
}

.item-link:hover {
    background: rgba(255, 179, 217, 0.2);
    text-decoration: none;
    transform: scale(1.05);
}

.delete-btn {
    background: linear-gradient(135deg, #ff87b2 0%, #ff6b9d 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(255, 107, 157, 0.3);
}

.delete-btn:hover {
    background: linear-gradient(135deg, #ff6b9d 0%, #ff4d8d 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.5);
}

.item-date {
    font-size: 0.8em;
    color: #999;
    margin-top: 5px;
}

.contact-section {
    padding: 40px;
    background: linear-gradient(180deg, #fff9fc 0%, #ffe6f0 100%);
    margin: 0 40px 40px 40px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
}

.contact-section h2 {
    color: #ff87b2;
    margin-bottom: 10px;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 600px;
    margin: 20px auto;
}

.contact-form input,
.contact-form textarea {
    padding: 12px;
    border: 3px solid #ffe6f0;
    border-radius: 25px;
    font-size: 1em;
    transition: all 0.3s;
    font-family: inherit;
    background: white;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #ffb3d9;
    box-shadow: 0 0 0 4px rgba(255, 179, 217, 0.2);
    transform: scale(1.02);
}

.contact-form button {
    padding: 12px 24px;
    background: linear-gradient(135deg, #ffb3d9 0%, #ff9ecd 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.4);
    font-weight: 600;
}

.contact-form button:hover {
    background: linear-gradient(135deg, #ff9ecd 0%, #ff87b2 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 182, 193, 0.6);
}

.contact-result {
    margin-top: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.success-message {
    background: linear-gradient(135deg, #d4f4dd 0%, #c8f0d8 100%);
    color: #2d8a4f;
    padding: 15px;
    border-radius: 25px;
    border: 3px solid #7ed99e;
    text-align: center;
    box-shadow: 0 4px 15px rgba(126, 217, 158, 0.3);
    font-weight: 600;
}

footer {
    /*background: linear-gradient(to bottom,
        rgba(255, 179, 217, 0) 0%,
        rgba(255, 179, 217, 0.1) 10%,
        #7a6a8a 15%,
        #5a4a6a 100%,
    );*/
    background: #5a4a6a;
    color: white;
    text-align: center;
    padding: 20px 20px 30px 20px;
    position: relative;
}

.footer-links {
    margin-top: 10px;
}

.footer-links a {
    color: #ffb3d9;
    text-decoration: none;
    transition: all 0.3s;
    padding: 5px 10px;
    border-radius: 15px;
}

.footer-links a:hover {
    color: #fff;
    background: rgba(255, 179, 217, 0.2);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    /* Reduce body padding for more screen space */
    body {
        padding: 8px;
    }

    /* Reduce container border radius */
    .container {
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(255, 182, 193, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.5);
    }

    /* Reduce header padding and font sizes */
    header {
        padding: 16px;
    }

    header h1 {
        font-size: 1.6em;
        margin-bottom: 5px;
    }

    header::before,
    header::after {
        font-size: 1.5em;
    }

    .tagline {
        font-size: 0.95em;
    }

    /* Reduce bio section padding */
    .bio-section {
        padding: 16px;
    }

    .bio-section h2 {
        font-size: 1.4em;
        margin-bottom: 10px;
    }

    .bio-section p {
        font-size: 0.9em;
    }

    /* Reduce social links spacing */
    .social-links {
        margin-top: 20px;
    }

    .social-links h3 {
        font-size: 1em;
        margin-bottom: 10px;
    }

    .social-icons {
        gap: 10px;
    }

    .social-link {
        padding: 8px 16px;
        font-size: 0.9em;
        border-radius: 25px;
        box-shadow: 0 2px 10px rgba(255, 182, 193, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.8);
    }

    .social-link .icon {
        font-size: 1em;
    }

    /* Reduce actions section padding */
    .actions-section {
        padding: 20px;
    }

    .actions-section h2 {
        font-size: 1.5em;
        margin-bottom: 20px;
    }

    .action-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .action-card {
        padding: 16px;
        border-radius: 18px;
        box-shadow: 0 4px 15px rgba(255, 182, 193, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.8);
    }

    .action-card::before {
        width: 25px;
        height: 25px;
        border-radius: 0 18px 0 50%;
    }

    .action-card::after {
        width: 18px;
        height: 18px;
        border-radius: 0 18px 0 50%;
    }

    .action-icon {
        font-size: 2em;
        margin-bottom: 8px;
    }

    .action-card h3 {
        font-size: 1.1em;
        margin-bottom: 4px;
    }

    .action-card p {
        font-size: 0.8em;
        line-height: 1.4;
    }

    /* Reduce page content padding */
    .page-content {
        padding: 15px;
    }

    /* Reduce section padding */
    .qa-submit,
    .qa-lookup,
    .songs-submit,
    .songs-list-section,
    .contact-info,
    .contact-form-wrapper {
        padding: 15px;
        border-radius: 16px;
    }

    .qa-page-section,
    .songs-page-section {
        gap: 20px;
    }

    .qa-submit h2,
    .qa-lookup h2,
    .songs-submit h2,
    .songs-list-section h2,
    .contact-info h2,
    .contact-form-wrapper h2 {
        font-size: 1.3em;
        margin-bottom: 10px;
    }

    /* Reduce form input padding */
    .add-form input,
    .add-form textarea,
    .contact-form input,
    .contact-form textarea,
    .lookup-form input {
        padding: 10px;
        border-radius: 15px;
        font-size: 0.95em;
    }

    .add-form button,
    .contact-form button,
    .lookup-form button {
        padding: 10px 20px;
        font-size: 0.95em;
        border-radius: 25px;
    }

    /* Reduce tracking code box padding */
    .tracking-code-box {
        padding: 15px;
        border-radius: 20px;
    }

    .tracking-code {
        font-size: 1.5em;
        padding: 10px;
        border-radius: 15px;
    }

    /* Reduce back link spacing */
    .back-link {
        margin-bottom: 20px;
        padding: 6px 12px;
        border-radius: 15px;
        font-size: 0.95em;
    }

    /* Reduce contact page section spacing */
    .contact-page-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-info ul {
        margin: 15px 0 15px 20px;
        font-size: 0.95em;
    }

    /* Reduce footer padding */
    footer {
        padding: 15px 15px 20px 15px;
        font-size: 0.9em;
    }

    .support-section {
        margin-top: 15px;
        padding-top: 15px;
    }

    .kofi-button {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    /* Adjust grid layouts */
    .content-section {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    /* Reduce contact section margin */
    .contact-section {
        padding: 20px;
        margin: 0 20px 20px 20px;
        border-radius: 20px;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    body {
        padding: 5px;
    }

    .container {
        border-radius: 12px;
    }

    header {
        padding: 12px;
    }

    header h1 {
        font-size: 1.4em;
    }

    .bio-section {
        padding: 12px;
    }

    .bio-section h2,
    .actions-section h2 {
        font-size: 1.2em;
    }

    /* Make action cards even more compact */
    .action-card {
        padding: 12px;
    }

    .action-icon {
        font-size: 1.5em;
        margin-bottom: 5px;
    }

    .action-card h3 {
        font-size: 0.95em;
    }

    .action-card p {
        font-size: 0.7em;
        line-height: 1.3;
    }

    /* Compact game cards further */
    .game-card {
        padding: 8px;
    }

    .game-card-title {
        font-size: 0.85em;
    }

    .page-content {
        padding: 10px;
    }

    .qa-submit,
    .qa-lookup,
    .songs-submit,
    .songs-list-section,
    .contact-info,
    .contact-form-wrapper,
    .games-category {
        padding: 10px;
    }
}

/* Action Cards Section */
.actions-section {
    padding: 40px;
    background: linear-gradient(180deg, #ffe6f0 0%, #fff9fc 100%);
}

@media (max-width: 768px) {
    .actions-section {
        padding: 20px 15px;
    }
}

@media (max-width: 480px) {
    .actions-section {
        padding: 15px 10px;
    }
}

.actions-section h2 {
    text-align: center;
    font-size: 2em;
    color: #ff87b2;
    margin-bottom: 30px;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

.action-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .action-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .action-cards {
        gap: 10px;
    }
}

.action-card {
    background: white;
    padding: 30px;
    border-radius: 35px;
    box-shadow: 0 8px 20px rgba(255, 182, 193, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.8);
    text-decoration: none;
    color: #5a4a6a;
    transition: all 0.3s;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.action-card::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background: #ffb3d9;
    border-radius: 0 35px 0 50%;
    opacity: 0.6;
}

.action-card::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    background: #ff9ecd;
    border-radius: 0 35px 0 50%;
    opacity: 0.8;
}

.action-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 30px rgba(255, 182, 193, 0.5), 0 0 0 6px rgba(255, 182, 193, 0.2);
    animation: wiggleCard 0.5s ease-in-out;
}

.action-card:hover::before {
    animation: earWiggle 0.5s ease-in-out infinite;
}

@keyframes wiggleCard {
    0%, 100% {
        transform: translateY(-8px) scale(1.02) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) scale(1.02) rotate(-1deg);
    }
    75% {
        transform: translateY(-8px) scale(1.02) rotate(1deg);
    }
}

@keyframes earWiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-5deg);
    }
}

.action-icon {
    font-size: 3em;
    margin-bottom: 15px;
    filter: drop-shadow(3px 3px 5px rgba(255, 182, 193, 0.4));
    animation: iconFloat 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-5px) rotate(5deg);
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.action-card h3 {
    color: #ff87b2;
    font-size: 1.5em;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.action-card p {
    color: #8a7a9a;
    font-size: 0.95em;
    position: relative;
    z-index: 1;
}

/* Page Content */
.page-content {
    padding: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.back-link {
    display: inline-block;
    color: #ff87b2;
    text-decoration: none;
    margin-bottom: 30px;
    font-weight: 500;
    transition: all 0.3s;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255, 179, 217, 0.1);
}

.back-link:hover {
    color: #ff6b9d;
    text-decoration: none;
    background: rgba(255, 179, 217, 0.2);
    transform: translateX(-5px);
}

/* Q&A Page Styles */
.qa-page-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.qa-submit,
.qa-lookup {
    background: linear-gradient(180deg, #fff9fc 0%, #ffe6f0 100%);
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
}

.qa-submit h2,
.qa-lookup h2 {
    color: #ff87b2;
    margin-bottom: 10px;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

/* Songs Page Styles */
.songs-page-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.songs-submit,
.songs-list-section {
    background: linear-gradient(180deg, #fff9fc 0%, #ffe6f0 100%);
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
}

.songs-submit h2,
.songs-list-section h2 {
    color: #ff87b2;
    margin-bottom: 10px;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

/* Contact Page Styles */
.contact-page-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.contact-info {
    background: linear-gradient(180deg, #fff9fc 0%, #ffe6f0 100%);
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
}

.contact-info h2 {
    color: #ff87b2;
    margin-bottom: 15px;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

.contact-info ul {
    margin: 20px 0 20px 30px;
}

.contact-info ul li {
    margin-bottom: 8px;
}

.contact-info .note {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 12px;
    margin-top: 20px;
    border-radius: 4px;
}

.contact-info .note a {
    color: #ff87b2;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 10px;
    transition: all 0.3s;
}

.contact-info .note a:hover {
    background: rgba(255, 179, 217, 0.2);
    text-decoration: none;
}

.contact-form-wrapper {
    background: linear-gradient(180deg, #fff9fc 0%, #ffe6f0 100%);
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
}

.contact-form-wrapper h2 {
    color: #ff87b2;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

/* Support Section (Ko-fi) */
.support-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.support-section p {
    margin-bottom: 10px;
    font-size: 0.9em;
}

.kofi-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #ff87b2 0%, #ffb3d9 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 135, 178, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

.kofi-button:hover {
    background: linear-gradient(135deg, #ff6b9d 0%, #ff87b2 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 135, 178, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.5);
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.kofi-icon {
    font-size: 1.2em;
}

/* Games Page Styles */
.games-page-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.games-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.filter-tab {
    padding: 12px 24px;
    background: white;
    color: #ff87b2;
    border: 3px solid #ffe6f0;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(255, 182, 193, 0.2);
}

.filter-tab:hover {
    background: linear-gradient(135deg, #fff0f5 0%, #ffe6f0 100%);
    border-color: #ffb3d9;
    transform: translateY(-2px);
}

.filter-tab.active {
    background: linear-gradient(135deg, #ffb3d9 0%, #ff9ecd 100%);
    color: white;
    border-color: #ff9ecd;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.4);
}

.games-category {
    background: linear-gradient(180deg, #fff9fc 0%, #ffe6f0 100%);
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
}

@media (max-width: 768px) {
    .games-category {
        padding: 15px;
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    .games-category {
        padding: 12px;
        border-radius: 16px;
    }
}

.games-category h2 {
    color: #ff87b2;
    margin-bottom: 10px;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

.games-category > p {
    color: #8a7a9a;
    margin-bottom: 20px;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

@media (max-width: 900px) {
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.game-card {
    background: white;
    padding: 0;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    min-height: 140px;
}

@media (max-width: 768px) {
    .game-card {
        min-height: 60px;
    }

    .game-card.has-cover {
        min-height: 120px;
    }
}

@media (max-width: 480px) {
    .game-card {
        min-height: 48px;
    }

    .game-card.has-cover {
        min-height: 96px;
    }
}

.game-card.clickable {
    cursor: pointer;
}

.game-card.clickable:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(255, 182, 193, 0.5);
}

.game-card.has-cover {
    min-height: 160px;
}

.game-card.has-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}

.game-card.has-cover .game-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.game-card.has-cover .game-name {
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.game-card.has-cover .game-platform-text {
    color: rgba(255, 255, 255, 0.85);
}

.game-card.has-cover .game-tag {
    background: rgba(255, 255, 255, 0.9);
}

.game-card.has-cover .game-notes {
    color: rgba(255, 255, 255, 0.8);
    border-top-color: rgba(255, 255, 255, 0.2);
}

/* Cards with custom color (no cover image) */
.game-card.has-color .game-name {
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.game-card.has-color .game-platform-text {
    color: rgba(255, 255, 255, 0.9);
}

.game-card.has-color .game-notes {
    color: rgba(255, 255, 255, 0.8);
    border-top-color: rgba(255, 255, 255, 0.2);
}

.game-card-content {
    padding: 15px;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 182, 193, 0.4);
}

.game-card.pinned {
    border: 2px solid #ffb3d9;
}

.game-card.pinned::after {
    content: '📌';
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 14px;
    z-index: 4;
}

.game-platform-logo {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.15));
    z-index: 3;
}

.game-name {
    color: #5a4a6a;
    font-size: 0.95em;
    margin-bottom: 4px;
    padding-right: 35px;
}

.game-platform-text {
    color: #8a7a9a;
    font-size: 0.75em;
    margin-bottom: 8px;
}

.game-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.game-tag {
    background: linear-gradient(135deg, #e8f4fd 0%, #d4e8fc 100%);
    color: #4a7ab3;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.65em;
    font-weight: 500;
    border: 1px solid #b3d4ff;
}

.game-notes {
    color: #999;
    font-size: 0.75em;
    font-style: italic;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f0e6f0;
}

.no-games {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 20px;
    grid-column: 1 / -1;
}

.loading-text {
    color: #999;
    text-align: center;
    padding: 20px;
    grid-column: 1 / -1;
}

/* Age Rating Filter */
.age-rating-filter {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.age-filter-btn {
    padding: 8px 16px;
    background: white;
    color: #8a7a9a;
    border: 2px solid #ffe6f0;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.3s;
}

.age-filter-btn:hover {
    background: #fff0f5;
    border-color: #ffb3d9;
}

.age-filter-btn.active {
    background: linear-gradient(135deg, #ffb3d9 0%, #ff9ecd 100%);
    color: white;
    border-color: #ff9ecd;
}

/* Show More Button */
.show-more-btn {
    display: block;
    margin: 20px auto 0;
    padding: 12px 30px;
    background: linear-gradient(135deg, #ffb3d9 0%, #ff9ecd 100%);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.3);
}

.show-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 182, 193, 0.4);
}

/* Platform Legend */
.platform-logo {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.platform-legend {
    background: linear-gradient(180deg, #fff9fc 0%, #ffe6f0 100%);
    padding: 20px 30px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
    margin-top: 30px;
}

.platform-legend h3 {
    color: #ff87b2;
    margin-bottom: 15px;
    font-size: 1em;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
}

.platform-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.platform-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #5a4a6a;
    font-size: 0.9em;
}

.platform-icon {
    font-size: 1.2em;
}

/* Mobile responsive for games page */
@media (max-width: 768px) {
    .games-filter-tabs {
        gap: 8px;
    }

    .filter-tab {
        padding: 10px 16px;
        font-size: 0.85em;
    }

    .games-category {
        padding: 20px;
        border-radius: 20px;
    }

    .games-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .game-card {
        padding: 12px;
        border-radius: 16px;
    }

    .game-card-title {
        font-size: 1em;
    }

    .game-card-content {
        padding: 10px;
    }

    .game-card-meta {
        font-size: 0.8em;
    }

    .platform-legend {
        padding: 15px 20px;
    }

    .platform-icons {
        gap: 10px;
    }

    .platform-item {
        font-size: 0.8em;
    }
}

/* Bookmark hint styling */
.bookmark-hint {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe8a1 100%);
    border: 2px solid #ffc107;
    border-radius: 15px;
    padding: 15px 20px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.2);
}

.bookmark-hint p {
    margin: 0;
    color: #856404;
    font-size: 1.05em;
}

.bookmark-hint strong {
    color: #6c5200;
}

/* Turnstile widget styling */
.cf-turnstile {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.soft-line {
    margin-top: 1.2rem;
    font-size: 0.9rem;
    color: #b07aa8;
    opacity: 0.8;
    font-style: italic;
}

/* Upvote button styling */
.upvote-btn {
    background: linear-gradient(135deg, #ffb3d9 0%, #ff9ecd 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 158, 205, 0.3);
}

.upvote-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 158, 205, 0.5);
}

.upvote-btn:active {
    transform: translateY(0);
}

.item-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

/* V2 Banner */
.v2-banner {
    background: linear-gradient(135deg, #e8f4fd 0%, #d4e8fc 100%);
    border: 3px solid #b3d4ff;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(74, 122, 179, 0.2);
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.v2-banner-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.v2-badge {
    background: linear-gradient(135deg, #4a7ab3 0%, #3a5a93 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.v2-text {
    flex: 1;
    color: #3a5a93;
    font-size: 0.95em;
    line-height: 1.4;
}

.v2-text strong {
    color: #2a4a73;
}

.v2-link {
    padding: 10px 20px;
    background: linear-gradient(135deg, #4a7ab3 0%, #3a5a93 100%);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9em;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(74, 122, 179, 0.3);
}

.v2-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(74, 122, 179, 0.4);
}

@media (max-width: 768px) {
    .v2-banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .v2-link {
        align-self: stretch;
        text-align: center;
    }
}