/* Final-loaded site variants. Keep this file after styles.css. */

body.theme-plus .site-header {
    background: rgba(255, 247, 236, 0.92);
}

body.theme-plus .hero-copy {
    background: linear-gradient(145deg, #fff8ef 0%, #fff2e2 52%, #f5fbff 100%);
    border: 1px solid rgba(239, 108, 36, 0.18);
}

body.theme-plus .hero-panel {
    display: grid;
    gap: 18px;
}

body.theme-plus .app-card {
    border-top: 6px solid var(--accent);
}

body.theme-lab {
    color: #eaf7ff;
    background: #071219;
}

body.theme-lab .site-bg {
    background:
        linear-gradient(90deg, rgba(32, 208, 170, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(100, 168, 255, 0.07) 1px, transparent 1px),
        radial-gradient(circle at 8% 16%, rgba(32, 208, 170, 0.22), transparent 32%);
    background-size: 44px 44px, 44px 44px, auto;
}

body.theme-lab .site-header {
    background: rgba(7, 18, 25, 0.96);
    border-bottom: 1px solid rgba(32, 208, 170, 0.28);
}

body.theme-lab .brand-copy strong,
body.theme-lab .brand-copy span,
body.theme-lab .site-nav a,
body.theme-lab .footer-copy,
body.theme-lab .footer-links a,
body.theme-lab .footer-meta,
body.theme-lab .breadcrumbs,
body.theme-lab .breadcrumbs a {
    color: #d7ecf8;
}

body.theme-lab .site-nav a.is-active,
body.theme-lab .site-nav a:hover {
    color: #39e7c0;
}

body.theme-lab .header-cta,
body.theme-lab .button-primary {
    color: #061317;
    background: linear-gradient(135deg, #39e7c0, #8ec8ff);
    box-shadow: 0 18px 36px rgba(32, 208, 170, 0.2);
}

body.theme-lab .button-secondary {
    color: #eaf7ff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

body.theme-lab .hero-copy,
body.theme-lab .hero-panel,
body.theme-lab .hero-panel-card,
body.theme-lab .page-hero-shell,
body.theme-lab .app-hero-copy,
body.theme-lab .app-hero-card,
body.theme-lab .category-card,
body.theme-lab .app-card,
body.theme-lab .mini-collection,
body.theme-lab .content-card,
body.theme-lab .sidebar-card,
body.theme-lab .reason-card,
body.theme-lab .contact-card,
body.theme-lab .cta-band {
    color: #eaf7ff;
    background: linear-gradient(145deg, rgba(16, 32, 43, 0.96), rgba(12, 24, 33, 0.92));
    border-color: rgba(32, 208, 170, 0.2);
}

body.theme-lab .hero-copy h1,
body.theme-lab .page-hero h1,
body.theme-lab .app-hero-copy h1,
body.theme-lab h2,
body.theme-lab h3,
body.theme-lab strong {
    color: #f6fbff;
}

body.theme-lab .hero-text,
body.theme-lab .page-hero p,
body.theme-lab .app-hero-copy p,
body.theme-lab .app-card p,
body.theme-lab .content-card p,
body.theme-lab .mini-copy span,
body.theme-lab .faq-item p {
    color: #b8cddd;
}

body.theme-lab .stat-grid > div,
body.theme-lab .app-meta-row,
body.theme-lab .hero-keyword-link,
body.theme-lab .hero-guide-item,
body.theme-lab .mini-item,
body.theme-lab .sidebar-note-item {
    color: #eaf7ff;
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.12);
}

body.theme-lab .tag-row span,
body.theme-lab .signal-pill,
body.theme-lab .pill,
body.theme-lab .card-badge {
    color: #071219;
    background: rgba(57, 231, 192, 0.82);
}

body.theme-my {
    background: linear-gradient(180deg, #fff7df, #fff2ec);
}

body.theme-my .site-header {
    top: 16px;
    width: min(calc(100% - 36px), 1180px);
    margin: 0 auto;
    border-radius: 999px;
    background: rgba(255, 253, 244, 0.94);
    box-shadow: 0 20px 54px rgba(99, 69, 37, 0.12);
}

body.theme-my .hero-shell {
    grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr);
}

body.theme-my .hero-panel {
    order: -1;
}

body.theme-my .hero-copy,
body.theme-my .app-card,
body.theme-my .category-card {
    border-radius: 38px 14px 38px 14px;
    background: rgba(255, 255, 248, 0.88);
}

body.theme-my .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.theme-go {
    background: #f6f8ff;
}

@media (min-width: 1100px) {
    body.theme-go .site-header {
        position: fixed;
        z-index: 40;
        top: 24px;
        bottom: 24px;
        left: 24px;
        width: 286px;
        border-radius: 34px;
        border: 1px solid rgba(22, 63, 145, 0.12);
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 24px 70px rgba(22, 63, 145, 0.14);
    }

    body.theme-go .header-shell {
        width: auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 24px;
    }

    body.theme-go .brand {
        align-items: flex-start;
    }

    body.theme-go .site-nav {
        width: 100%;
        margin-top: 28px;
        display: grid;
        gap: 8px;
    }

    body.theme-go .site-nav a {
        width: 100%;
        min-height: 44px;
        padding: 0 14px;
        border-radius: 14px;
        background: rgba(22, 63, 145, 0.06);
    }

    body.theme-go .header-cta {
        width: 100%;
        margin-top: auto;
        justify-content: center;
    }

    body.theme-go main,
    body.theme-go .site-footer {
        margin-left: 318px;
    }
}

body.theme-go .hero-shell,
body.theme-go .app-hero-shell {
    grid-template-columns: 1fr;
}

body.theme-go .hero-copy,
body.theme-go .page-hero-shell {
    background: linear-gradient(135deg, #ffffff 0%, #edf4ff 62%, #fff1e9 100%);
}

body.theme-go .app-card {
    border-left: 7px solid var(--accent);
    border-radius: 18px;
}

body.theme-now .site-header {
    position: relative;
    background: #ffffff;
    border-bottom: 4px solid var(--ink);
}

body.theme-now .header-shell {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 0;
}

body.theme-now .brand {
    justify-content: center;
    text-align: center;
}

body.theme-now .site-nav {
    justify-content: center;
}

body.theme-now .header-cta {
    position: absolute;
    right: 32px;
    top: 20px;
}

body.theme-now .hero-shell {
    grid-template-columns: 1fr;
}

body.theme-now .hero-copy {
    text-align: center;
    background: #fffdf8;
    border: 2px solid var(--ink);
    box-shadow: 12px 12px 0 rgba(18, 23, 35, 0.12);
}

body.theme-now .hero-panel {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
}

body.theme-now .app-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    border-radius: 16px;
}

body.theme-now .app-logo-link {
    grid-row: span 5;
}

body.theme-live {
    background: #120f12;
    color: #fff7ef;
}

body.theme-live .site-bg {
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 61, 46, 0.22), transparent 24%),
        linear-gradient(90deg, rgba(255, 61, 46, 0.05) 1px, transparent 1px);
    background-size: auto, 28px 28px;
}

body.theme-live .site-header,
body.theme-live .hero-copy,
body.theme-live .hero-panel-card,
body.theme-live .page-hero-shell,
body.theme-live .app-hero-copy,
body.theme-live .app-hero-card,
body.theme-live .app-card,
body.theme-live .content-card,
body.theme-live .sidebar-card,
body.theme-live .mini-collection,
body.theme-live .category-card,
body.theme-live .reason-card,
body.theme-live .contact-card {
    color: #fff7ef;
    background: #1d1719;
    border-color: rgba(255, 61, 46, 0.24);
}

body.theme-live .brand-copy span,
body.theme-live .site-nav a,
body.theme-live p,
body.theme-live .mini-copy span {
    color: #ffd3ca;
}

body.theme-live .button-primary,
body.theme-live .header-cta {
    color: #fff;
    background: linear-gradient(135deg, #ff3d2e, #ff8a1f);
}

body.theme-live .button-secondary {
    color: #fff7ef;
    background: rgba(255, 255, 255, 0.08);
}

body.theme-live .app-card,
body.theme-live .mini-item,
body.theme-live .hero-keyword-link {
    border-left: 5px solid #ff3d2e;
}

body.theme-center .site-header {
    background: rgba(245, 252, 245, 0.94);
}

body.theme-center .hero-shell {
    grid-template-columns: 0.82fr 1.18fr;
}

body.theme-center .hero-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

body.theme-center .hero-panel-card-featured {
    grid-row: span 2;
}

body.theme-center .category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.theme-center .collection-layout {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr;
}

body.theme-center .app-card {
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #f4fbf3);
}

body.theme-studio {
    background: #f7eadf;
}

body.theme-studio .site-header {
    position: relative;
    background: transparent;
    border: 0;
}

body.theme-studio .header-shell {
    margin-top: 18px;
    border-radius: 30px;
    padding: 14px 20px;
    background: rgba(255, 249, 245, 0.88);
    border: 1px solid rgba(201, 84, 45, 0.14);
}

body.theme-studio .hero-shell {
    grid-template-columns: 0.78fr 1.22fr;
}

body.theme-studio .hero-copy,
body.theme-studio .page-hero-shell {
    background: #fff9f5;
    border: 1px solid rgba(201, 84, 45, 0.18);
}

body.theme-studio .app-card,
body.theme-studio .content-card,
body.theme-studio .category-card {
    border-radius: 34px;
    transform: rotate(-0.35deg);
}

body.theme-studio .app-card:nth-child(even),
body.theme-studio .content-card:nth-child(even),
body.theme-studio .category-card:nth-child(even) {
    transform: rotate(0.35deg);
}

body.theme-studio .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.theme-online {
    background: #eef8f7;
}

body.theme-online .site-header {
    position: sticky;
    top: 12px;
    width: min(calc(100% - 32px), var(--shell));
    margin: 12px auto 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 48px rgba(17, 125, 115, 0.1);
}

body.theme-online .hero-shell,
body.theme-online .app-hero-shell {
    grid-template-columns: 1fr;
}

body.theme-online .hero-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

body.theme-online .hero-copy,
body.theme-online .page-hero-shell {
    text-align: center;
    background: linear-gradient(180deg, #ffffff, #effbf9);
}

body.theme-online .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.theme-online .app-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
}

body.theme-online .app-logo-link {
    grid-row: span 5;
}

body.theme-official {
    background: #f5f2ea;
}

body.theme-official .site-header {
    background: #fffdf8;
    border-bottom: 1px solid rgba(42, 35, 22, 0.16);
}

body.theme-official .hero-copy,
body.theme-official .page-hero-shell,
body.theme-official .app-hero-copy,
body.theme-official .app-hero-card,
body.theme-official .content-card,
body.theme-official .sidebar-card,
body.theme-official .app-card,
body.theme-official .category-card {
    border-radius: 8px;
    background: #fffdf8;
    border: 1px solid rgba(42, 35, 22, 0.14);
    box-shadow: none;
}

body.theme-official .button,
body.theme-official .header-cta,
body.theme-official .tag-row span,
body.theme-official .pill,
body.theme-official .card-badge {
    border-radius: 6px;
}

body.theme-official .hero-shell {
    grid-template-columns: 1fr 0.72fr;
}

body.theme-official .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
    body.theme-my .hero-shell,
    body.theme-go .hero-shell,
    body.theme-now .hero-panel,
    body.theme-center .hero-shell,
    body.theme-center .hero-panel,
    body.theme-center .category-grid,
    body.theme-center .collection-layout,
    body.theme-studio .hero-shell,
    body.theme-online .hero-panel,
    body.theme-online .card-grid,
    body.theme-official .hero-shell,
    body.theme-official .card-grid {
        grid-template-columns: 1fr;
    }

    body.theme-go main,
    body.theme-go .site-footer {
        margin-left: 0;
    }

    body.theme-now .header-cta {
        position: static;
        justify-self: center;
    }

    body.theme-online .site-header,
    body.theme-my .site-header {
        top: 0;
        width: 100%;
        margin: 0;
        border-radius: 0;
    }
}

@media (max-width: 720px) {
    body.theme-now .app-card,
    body.theme-online .app-card {
        grid-template-columns: 1fr;
    }
}