/* Midnight Remix Club — Foundation V2
   Loaded after site.css so the existing pages can migrate without a full rewrite. */
:root {
    --bg: #05070b;
    --bg-soft: #0a0f16;
    --panel: rgba(10, 16, 24, .82);
    --panel-strong: rgba(11, 18, 28, .95);
    --line: rgba(115, 157, 186, .22);
    --line-strong: rgba(32, 217, 255, .55);
    --text: #f5f7fa;
    --muted: #98a6b5;
    --muted-2: #687888;
    --blue: #1aa9ff;
    --cyan: #20d9ff;
    --purple: #8468ff;
    --green: #28e28c;
    --red: #ff3b4d;
    --yellow: #ffb020;
    --support: #f4c75b;
    --support-soft: rgba(244, 199, 91, .13);
    --shadow: 0 28px 80px rgba(0, 0, 0, .46);
    --radius: 22px;
    --max: 1240px;
    --scene-accent: 32, 217, 255;
    --scene-secondary: 255, 59, 77;
}

body[data-scene="dd"] { --scene-accent: 255, 59, 77; --scene-secondary: 32, 217, 255; }
body[data-scene="competition"] { --scene-accent: 255, 59, 77; --scene-secondary: 244, 199, 91; }
body[data-scene="journey"] { --scene-accent: 32, 217, 255; --scene-secondary: 40, 226, 140; }
body[data-scene="community"] { --scene-accent: 132, 104, 255; --scene-secondary: 32, 217, 255; }
body[data-scene="cinema"] { --scene-accent: 244, 199, 91; --scene-secondary: 255, 59, 77; }
body[data-scene="profile"] { --scene-accent: 32, 217, 255; --scene-secondary: 132, 104, 255; }
body[data-scene="operations"] { --scene-accent: 255, 176, 32; --scene-secondary: 255, 59, 77; }
body[data-scene="touge"] { --scene-accent: 255, 176, 32; --scene-secondary: 32, 217, 255; }
body[data-scene="race"] { --scene-accent: 32, 217, 255; --scene-secondary: 255, 176, 32; }
body[data-scene="garage"] { --scene-accent: 40, 226, 140; --scene-secondary: 32, 217, 255; }
body[data-scene="neutral"] { --scene-accent: 132, 104, 255; --scene-secondary: 98, 166, 181; }

html { scrollbar-color: rgba(var(--scene-accent), .5) #070a0f; }
body {
    background: #05070b;
    color: var(--text);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: -.006em;
}
body::after {
    background:
        linear-gradient(180deg, rgba(3, 6, 10, .04), transparent 25%, transparent 68%, rgba(1, 3, 6, .52)),
        radial-gradient(ellipse at 50% 100%, rgba(var(--scene-accent), .07), transparent 46%);
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 10px;
    left: 10px;
    transform: translateY(-140%);
    padding: 10px 15px;
    border-radius: 10px;
    color: #071016;
    background: var(--cyan);
    font-weight: 900;
    transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-bg {
    background:
        radial-gradient(circle at 14% 18%, rgba(var(--scene-accent), .12), transparent 31%),
        radial-gradient(circle at 86% 15%, rgba(var(--scene-secondary), .10), transparent 36%),
        linear-gradient(180deg, #030509 0%, #070b11 54%, #030509 100%);
}
.site-bg::before {
    background:
        linear-gradient(90deg, rgba(var(--scene-accent), .05) 0%, transparent 28%, rgba(1, 3, 8, .26) 55%, transparent 76%, rgba(var(--scene-secondary), .055) 100%),
        linear-gradient(180deg, rgba(1, 3, 8, .28) 0%, rgba(1, 3, 8, .16) 38%, rgba(1, 3, 8, .68) 100%),
        radial-gradient(ellipse at 50% 54%, transparent 0%, rgba(0, 0, 0, .09) 46%, rgba(0, 0, 0, .62) 100%);
}
.site-bg::after {
    opacity: .17;
    background:
        linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(120deg, transparent 0 44%, rgba(var(--scene-accent), .055) 44.2% 44.5%, transparent 44.7% 100%);
    background-size: 64px 64px, 64px 64px, 100% 100%;
}
.scene-bg-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.scene-bg-layer {
    position: absolute;
    inset: -3%;
    opacity: 0;
    transform: scale(1.045);
    transition: opacity 1800ms ease, transform 12000ms ease;
    will-change: opacity, transform;
}
.scene-bg-layer::before,
.scene-bg-layer::after {
    content: "";
    position: absolute;
    inset: 0;
}
.scene-bg-layer.is-visible {
    opacity: .7;
    transform: scale(1);
}
.scene-bg-layer[data-scene-layer="home"]::before {
    background:
        radial-gradient(circle at 18% 20%, rgba(32, 217, 255, .18), transparent 20%),
        radial-gradient(circle at 78% 16%, rgba(255, 59, 77, .14), transparent 24%),
        linear-gradient(135deg, rgba(32, 217, 255, .08) 0%, transparent 28%, transparent 54%, rgba(255, 59, 77, .07) 82%, transparent 100%);
}
.scene-bg-layer[data-scene-layer="home"]::after {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(32, 217, 255, .09), transparent 38%),
        repeating-linear-gradient(110deg, transparent 0 88px, rgba(255,255,255,.018) 88px 90px, transparent 90px 172px);
}
.scene-bg-layer[data-scene-layer="dd"]::before {
    background:
        linear-gradient(125deg, rgba(255, 59, 77, .18) 0%, transparent 22%, transparent 55%, rgba(32, 217, 255, .10) 82%, transparent 100%),
        radial-gradient(circle at 25% 72%, rgba(255, 59, 77, .18), transparent 24%),
        radial-gradient(circle at 78% 28%, rgba(255, 176, 32, .11), transparent 22%);
}
.scene-bg-layer[data-scene-layer="dd"]::after {
    background:
        repeating-linear-gradient(128deg, transparent 0 96px, rgba(255, 59, 77, .060) 96px 104px, transparent 104px 182px),
        linear-gradient(180deg, transparent 0%, rgba(6, 7, 10, .18) 48%, rgba(2, 3, 6, .42) 100%);
}
.scene-bg-layer[data-scene-layer="touge"]::before {
    background:
        radial-gradient(ellipse at 12% 90%, rgba(255, 176, 32, .18), transparent 26%),
        radial-gradient(ellipse at 88% 14%, rgba(32, 217, 255, .13), transparent 22%),
        linear-gradient(180deg, transparent 0%, rgba(255, 176, 32, .03) 52%, rgba(32, 217, 255, .04) 100%);
}
.scene-bg-layer[data-scene-layer="touge"]::after {
    background:
        radial-gradient(1600px 520px at 18% 100%, transparent 64%, rgba(255,255,255,.05) 64.4%, transparent 65.2%),
        radial-gradient(1600px 520px at 78% 100%, transparent 58%, rgba(255,176,32,.07) 58.4%, transparent 59.1%),
        radial-gradient(1600px 520px at 42% 100%, transparent 51%, rgba(32,217,255,.06) 51.3%, transparent 52.1%);
}
.scene-bg-layer[data-scene-layer="race"]::before {
    background:
        linear-gradient(90deg, rgba(32, 217, 255, .08) 0%, transparent 38%, rgba(255,176,32,.06) 100%),
        radial-gradient(circle at 30% 20%, rgba(32, 217, 255, .16), transparent 20%),
        radial-gradient(circle at 78% 72%, rgba(255, 176, 32, .12), transparent 24%);
}
.scene-bg-layer[data-scene-layer="race"]::after {
    background:
        linear-gradient(180deg, transparent 0%, rgba(8, 10, 14, .16) 46%, rgba(2,3,6,.42) 100%),
        repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.018) 54px 56px, transparent 56px 108px),
        linear-gradient(122deg, transparent 0 35%, rgba(32,217,255,.05) 35.2% 35.6%, transparent 35.8% 100%);
}
.scene-bg-layer[data-scene-layer="garage"]::before {
    background:
        radial-gradient(circle at 50% 18%, rgba(40, 226, 140, .13), transparent 16%),
        radial-gradient(circle at 24% 18%, rgba(32, 217, 255, .11), transparent 18%),
        radial-gradient(circle at 78% 22%, rgba(255, 176, 32, .08), transparent 20%),
        linear-gradient(180deg, rgba(6,8,12,.06) 0%, rgba(4,5,8,.38) 100%);
}
.scene-bg-layer[data-scene-layer="garage"]::after {
    background:
        linear-gradient(180deg, transparent 0%, transparent 58%, rgba(255,255,255,.04) 58.3%, transparent 58.8%, transparent 100%),
        repeating-linear-gradient(90deg, transparent 0 82px, rgba(255,255,255,.016) 82px 84px, transparent 84px 164px),
        radial-gradient(ellipse at 50% 100%, rgba(40,226,140,.12), transparent 38%);
}
.scene-bg-layer[data-scene-layer="community"]::before {
    background:
        radial-gradient(circle at 24% 32%, rgba(132, 104, 255, .14), transparent 18%),
        radial-gradient(circle at 80% 26%, rgba(32, 217, 255, .12), transparent 18%),
        radial-gradient(circle at 54% 74%, rgba(132,104,255,.08), transparent 24%);
}
.scene-bg-layer[data-scene-layer="community"]::after {
    background:
        radial-gradient(circle at 20% 32%, rgba(255,255,255,.055) 0 2px, transparent 3px),
        radial-gradient(circle at 32% 46%, rgba(255,255,255,.045) 0 2px, transparent 3px),
        radial-gradient(circle at 54% 38%, rgba(255,255,255,.05) 0 2px, transparent 3px),
        radial-gradient(circle at 66% 58%, rgba(255,255,255,.04) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 24%, rgba(255,255,255,.05) 0 2px, transparent 3px),
        linear-gradient(118deg, transparent 0 21%, rgba(132,104,255,.05) 21.3% 21.55%, transparent 21.8% 100%),
        linear-gradient(146deg, transparent 0 52%, rgba(32,217,255,.05) 52.2% 52.45%, transparent 52.7% 100%);
}
.scene-bg-layer[data-scene-layer="cinema"]::before {
    background:
        linear-gradient(180deg, rgba(244, 199, 91, .08) 0%, transparent 34%, rgba(255, 59, 77, .05) 100%),
        radial-gradient(circle at 22% 20%, rgba(244, 199, 91, .18), transparent 18%),
        radial-gradient(circle at 76% 24%, rgba(255, 59, 77, .10), transparent 18%);
}
.scene-bg-layer[data-scene-layer="cinema"]::after {
    background:
        linear-gradient(180deg, rgba(0,0,0,.35) 0 8%, transparent 8% 92%, rgba(0,0,0,.35) 92% 100%),
        linear-gradient(90deg, rgba(244,199,91,.05), transparent 24%, transparent 76%, rgba(255,59,77,.04)),
        radial-gradient(ellipse at 50% 100%, rgba(244,199,91,.11), transparent 40%);
}
.scene-bg-layer[data-scene-layer="profile"]::before,
.scene-bg-layer[data-scene-layer="journey"]::before,
.scene-bg-layer[data-scene-layer="competition"]::before,
.scene-bg-layer[data-scene-layer="operations"]::before,
.scene-bg-layer[data-scene-layer="neutral"]::before {
    background:
        radial-gradient(circle at 16% 22%, rgba(var(--scene-accent), .16), transparent 20%),
        radial-gradient(circle at 80% 20%, rgba(var(--scene-secondary), .12), transparent 22%),
        linear-gradient(140deg, rgba(var(--scene-accent), .06) 0%, transparent 30%, transparent 72%, rgba(var(--scene-secondary), .06) 100%);
}
.scene-bg-layer[data-scene-layer="profile"]::after,
.scene-bg-layer[data-scene-layer="journey"]::after,
.scene-bg-layer[data-scene-layer="competition"]::after,
.scene-bg-layer[data-scene-layer="operations"]::after,
.scene-bg-layer[data-scene-layer="neutral"]::after {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(var(--scene-accent), .09), transparent 42%),
        repeating-linear-gradient(115deg, transparent 0 98px, rgba(255,255,255,.015) 98px 100px, transparent 100px 190px);
}
@media (max-width: 900px) {
    .scene-bg-layer.is-visible { opacity: .56; }
}
@media (prefers-reduced-motion: reduce) {
    .scene-bg-layer { transition: none; }
}
.lobby-bg-image,
body.is-static-bg .lobby-bg-stage {
    filter: saturate(.78) contrast(1.12) brightness(.56);
}
body[data-scene="cinema"] .lobby-bg-image,
body[data-scene="cinema"].is-static-bg .lobby-bg-stage {
    filter: sepia(.16) saturate(.72) contrast(1.16) brightness(.47);
}

main { min-height: calc(100vh - 240px); }
.section { width: min(var(--max), calc(100% - 40px)); padding: 78px 0; }
.section + .section { position: relative; }
.section-head h2 { max-width: 900px; font-weight: 900; letter-spacing: -.055em; }
.section-head p { color: #aab6c2; }
.eyebrow { color: rgb(var(--scene-accent)); }
.eyebrow::before { background: linear-gradient(90deg, rgb(var(--scene-accent)), transparent); }
h1, h2, h3 { text-wrap: balance; }
.lead { color: #c8d0d8; }

/* Header */
.topbar.topbar-v2 {
    width: min(1420px, calc(100% - 28px));
    min-height: 72px;
    margin-top: 14px;
    padding: 9px 10px 9px 12px;
    gap: 16px;
    border: 1px solid rgba(137, 174, 200, .22);
    border-radius: 18px;
    background: rgba(7, 11, 17, .86);
    box-shadow: 0 16px 52px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(22px) saturate(1.12);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.topbar.topbar-v2.is-scrolled {
    background: rgba(5, 8, 13, .95);
    border-color: rgba(var(--scene-accent), .3);
    box-shadow: 0 18px 58px rgba(0, 0, 0, .52);
}
.brand.brand-v2 {
    min-width: 236px;
    gap: 11px;
}
.brand-mark {
    position: relative;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(var(--scene-accent), .34);
    background: linear-gradient(145deg, rgba(var(--scene-accent), .14), rgba(255,255,255,.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 26px rgba(var(--scene-accent), .13);
}
.brand-mark::after {
    content: "";
    position: absolute;
    inset: 7px -5px -5px 7px;
    border-right: 1px solid rgba(var(--scene-accent), .22);
    border-bottom: 1px solid rgba(var(--scene-accent), .22);
    border-radius: 0 0 12px 0;
    pointer-events: none;
}
.brand-v2 .brand-icon { width: 36px; height: 36px; border-radius: 10px; box-shadow: none; }
.brand-copy { min-width: 0; }
.brand-v2 strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: .09em;
}
.brand-v2 small {
    margin-top: 2px;
    color: rgb(var(--scene-accent));
    font-size: 9px;
    letter-spacing: .2em;
    opacity: .9;
}

.nav.nav-v2 {
    align-self: stretch;
    gap: 3px;
    overflow: visible;
}
.nav-v2 > a,
.nav-cluster > summary {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #9eabb8;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .015em;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.nav-cluster > summary::-webkit-details-marker { display: none; }
.nav-cluster > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}
.nav-cluster[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.nav-v2 > a:hover,
.nav-v2 > a.active,
.nav-cluster > summary:hover,
.nav-cluster.active > summary,
.nav-cluster[open] > summary {
    color: var(--text);
    border-color: rgba(var(--scene-accent), .22);
    background: rgba(var(--scene-accent), .08);
}
.nav-v2 > a.active,
.nav-cluster.active > summary { box-shadow: inset 0 -2px 0 rgba(var(--scene-accent), .76); }
.nav-v2 > .nav-support {
    color: #ffe5a4;
    border-color: rgba(244, 199, 91, .24);
    background: rgba(244, 199, 91, .065);
}
.nav-v2 > .nav-support:hover,
.nav-v2 > .nav-support.active {
    color: #fff0bd;
    border-color: rgba(244, 199, 91, .5);
    background: rgba(244, 199, 91, .13);
    box-shadow: inset 0 -2px 0 rgba(244, 199, 91, .8);
}
.nav-cluster { position: relative; display: flex; align-items: center; }
.nav-cluster-menu {
    position: absolute;
    z-index: 70;
    top: calc(100% + 10px);
    left: 50%;
    width: 290px;
    padding: 8px;
    display: grid;
    gap: 4px;
    border: 1px solid rgba(137, 174, 200, .22);
    border-radius: 16px;
    background: rgba(7, 11, 17, .97);
    box-shadow: 0 24px 70px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(24px);
    transform: translateX(-50%);
}
.nav-cluster-menu::before {
    content: "";
    position: absolute;
    top: -5px;
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    border-left: 1px solid rgba(137, 174, 200, .22);
    border-top: 1px solid rgba(137, 174, 200, .22);
    background: #090e15;
    transform: rotate(45deg);
}
.nav-cluster-menu a {
    position: relative;
    display: grid;
    gap: 1px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #d4dce4;
    background: transparent;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.nav-cluster-menu a strong { font-size: 13px; }
.nav-cluster-menu a small { color: var(--muted); font-size: 11px; }
.nav-cluster-menu a:hover,
.nav-cluster-menu a.active {
    border-color: rgba(var(--scene-accent), .22);
    background: rgba(var(--scene-accent), .075);
    transform: translateX(2px);
}

.top-actions.top-actions-v2 { gap: 7px; }
.top-actions-v2 .top-status {
    min-width: 82px;
    min-height: 44px;
    padding: 6px 10px;
    border-color: rgba(40, 226, 140, .18);
    background: rgba(40, 226, 140, .045);
    transition: border-color .18s ease, background .18s ease;
}
.top-actions-v2 .top-status:hover { border-color: rgba(40, 226, 140, .38); background: rgba(40, 226, 140, .08); }
.top-actions-v2 .top-status strong { font-size: 13px; }
.top-actions-v2 .top-status small { font-size: 8px; letter-spacing: .14em; }
.top-actions-v2 .language-switcher {
    padding: 3px;
    border-color: rgba(137, 174, 200, .18);
    background: rgba(255,255,255,.025);
}
.top-actions-v2 .language-switcher a { padding: 5px 6px; font-size: 9px; }
.btn-account {
    min-height: 44px;
    gap: 7px;
    padding-inline: 13px;
    border-color: rgba(137, 174, 200, .2);
    color: #d8e0e7;
    background: rgba(255,255,255,.035);
}
.btn-account span { color: rgb(var(--scene-accent)); font-size: 10px; }
.top-actions-v2 .desktop-join { min-width: 142px; min-height: 44px; padding-inline: 17px; }
.nav-toggle i,
.nav-toggle i::before,
.nav-toggle i::after {
    width: 17px;
    height: 1.5px;
    display: block;
    border-radius: 99px;
    background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle i { position: relative; }
.nav-toggle i::before,
.nav-toggle i::after { content: ""; position: absolute; left: 0; }
.nav-toggle i::before { top: -5px; }
.nav-toggle i::after { top: 5px; }
.nav-toggle[aria-expanded="true"] i { background: transparent; }
.nav-toggle[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }

/* Shared component refinements */
.btn {
    min-height: 44px;
    border-radius: 12px;
    font-weight: 850;
    letter-spacing: .005em;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
    border-color: rgba(32, 217, 255, .52);
    background: linear-gradient(135deg, #087fae, #12b9d8 58%, #20d9ff);
    color: #021017;
    box-shadow: 0 12px 32px rgba(32, 217, 255, .18);
}
.btn-primary:hover { box-shadow: 0 16px 38px rgba(32, 217, 255, .28); }
.btn-support {
    border-color: rgba(244, 199, 91, .58);
    color: #171105;
    background: linear-gradient(135deg, #b98622, #eabf57 55%, #ffe09a);
    box-shadow: 0 14px 34px rgba(244, 199, 91, .14);
    font-weight: 900;
}
.btn-support:hover { border-color: #ffe4a4; box-shadow: 0 18px 42px rgba(244, 199, 91, .23); }
.btn-large { min-height: 52px; padding-inline: 24px; }
.btn-ghost { border-color: rgba(137, 174, 200, .25); background: rgba(255,255,255,.035); }

.card,
.glass-card,
.metric,
.status-orb,
.table-wrap {
    border-color: rgba(137, 174, 200, .2);
    background: linear-gradient(145deg, rgba(13, 20, 30, .88), rgba(7, 12, 19, .78));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 20px 62px rgba(0,0,0,.24);
}
.card::after,
.glass-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--scene-accent), .4), transparent);
    opacity: .65;
}
.mode-card { min-height: 270px; }
.mode-icon { border-radius: 14px; background: linear-gradient(135deg, rgba(var(--scene-accent), .16), rgba(var(--scene-secondary), .12)); }
.mode-tag, .rank, .update-card time { color: rgb(var(--scene-accent)); }
.badge { color: rgb(var(--scene-accent)); background: rgba(var(--scene-accent), .07); border-color: rgba(var(--scene-accent), .24); }

/* Footer */
.footer.footer-v2 {
    width: min(var(--max), calc(100% - 40px));
    margin: 64px auto 24px;
    padding: 0;
    border-color: rgba(137, 174, 200, .2);
    border-radius: 22px;
    background: rgba(5, 9, 14, .9);
    box-shadow: 0 24px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.035);
}
.footer-v2-grid {
    padding: 34px;
    display: grid;
    grid-template-columns: minmax(260px, 1.55fr) repeat(2, minmax(130px, .7fr)) minmax(230px, 1fr);
    gap: 32px;
}
.footer-brand-block img { width: min(280px, 100%); max-height: 86px; object-fit: contain; object-position: left center; margin-bottom: 12px; }
.footer-brand-block p { max-width: 430px; color: #a7b3bf; }
.footer-signature { display: block; margin-top: 18px; color: rgb(var(--scene-accent)); font-size: 10px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.footer-column { display: grid; align-content: start; gap: 9px; }
.footer-column > strong { margin-bottom: 5px; color: #edf2f6; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
.footer-column > a:not(.btn) { color: #94a3b1; font-size: 13px; transition: color .16s ease, transform .16s ease; }
.footer-column > a:not(.btn):hover { color: #fff; transform: translateX(2px); }
.footer-support-column { padding: 18px; border: 1px solid rgba(244, 199, 91, .2); border-radius: 16px; background: rgba(244, 199, 91, .055); }
.footer-support-column p { color: #b7b09d; font-size: 13px; }
.footer-support-column .btn { justify-self: start; }
.footer-v2-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 34px;
    border-top: 1px solid rgba(137, 174, 200, .14);
    color: #687784;
    font-size: 11px;
}

/* Support / Cinema MR */
.support-hero {
    min-height: 690px;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(330px, .72fr);
    gap: 52px;
    align-items: center;
    padding-top: 96px;
}
.support-hero-copy h1 {
    max-width: 920px;
    margin-bottom: 24px;
    font-size: clamp(50px, 7.3vw, 100px);
    line-height: .91;
    letter-spacing: -.07em;
}
.support-hero-copy h1 span {
    color: #f3cd6a;
    background: linear-gradient(135deg, #fff1b8, #e9ba4b 55%, #ff8568);
    -webkit-background-clip: text;
    background-clip: text;
}
.support-hero-copy .lead { max-width: 790px; }
.support-principles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.support-principles span {
    padding: 7px 10px;
    border: 1px solid rgba(244, 199, 91, .2);
    border-radius: 999px;
    color: #cbbf9c;
    background: rgba(244, 199, 91, .05);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.support-access-card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border: 1px solid rgba(244, 199, 91, .28);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(244, 199, 91, .17), transparent 44%),
        linear-gradient(145deg, rgba(19, 19, 17, .96), rgba(8, 12, 18, .91));
    box-shadow: 0 32px 90px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05);
}
.support-access-card::after {
    content: "VIP ACCESS";
    position: absolute;
    right: -32px;
    bottom: 36px;
    transform: rotate(-90deg);
    color: rgba(244, 199, 91, .08);
    font-size: 42px;
    font-weight: 950;
    letter-spacing: .12em;
    pointer-events: none;
}
.support-access-card.is-active { border-color: rgba(40, 226, 140, .42); }
.support-access-card.is-active::before,
.support-access-card.is-pending::before,
.support-access-card.is-guest::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--support);
}
.support-access-card.is-active::before { background: var(--green); }
.support-access-card.is-guest::before { background: var(--cyan); }
.support-access-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.cinema-symbol {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244, 199, 91, .34);
    border-radius: 17px;
    color: #f7d984;
    background: rgba(244, 199, 91, .1);
    box-shadow: 0 0 30px rgba(244, 199, 91, .08);
}
.support-access-head small { color: #c6aa61; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.support-access-head strong { display: block; margin-top: 3px; font-size: 19px; }
.support-access-card > p { position: relative; z-index: 1; margin: 24px 0; color: #aeb6bd; }
.support-access-card > .btn,
.support-access-actions { position: relative; z-index: 1; }
.support-access-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.support-catalog-section { padding-top: 42px; }
.support-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.catalog-feature {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid rgba(137, 174, 200, .2);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(14, 21, 31, .94), rgba(5, 9, 14, .92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 22px 60px rgba(0,0,0,.25);
}
.catalog-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 20%, rgba(3,5,8,.88) 86%),
        repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.012) 38px 39px);
}
.catalog-feature::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    top: -130px;
    right: -120px;
    border: 52px solid rgba(255,255,255,.025);
    border-radius: 50%;
}
.catalog-initial { border-color: rgba(255, 176, 32, .27); background: radial-gradient(circle at 76% 12%, rgba(255,176,32,.19), transparent 38%), linear-gradient(155deg, #151710, #080c11 72%); }
.catalog-wangan { border-color: rgba(255, 59, 77, .28); background: radial-gradient(circle at 76% 12%, rgba(255,59,77,.18), transparent 38%), linear-gradient(155deg, #161014, #080c11 72%); }
.catalog-bonus { border-color: rgba(132, 104, 255, .25); background: radial-gradient(circle at 76% 12%, rgba(132,104,255,.17), transparent 38%), linear-gradient(155deg, #11101a, #080c11 72%); }
.catalog-devil { border-color: rgba(255, 59, 77, .27); background: radial-gradient(circle at 76% 12%, rgba(255,59,77,.17), transparent 38%), radial-gradient(circle at 18% 86%, rgba(32,217,255,.08), transparent 34%), linear-gradient(155deg, #171012, #080c11 72%); }
.catalog-number { position: absolute; top: 18px; right: 22px; color: rgba(255,255,255,.08); font-size: 76px; font-weight: 950; letter-spacing: -.08em; }
.catalog-feature > span,
.catalog-feature h3,
.catalog-feature p,
.catalog-meta { position: relative; z-index: 1; }
.catalog-feature > span { color: #d7ba6a; font-size: 10px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.catalog-feature h3 { margin: 9px 0 12px; font-size: clamp(30px, 3vw, 46px); line-height: .95; letter-spacing: -.055em; }
.catalog-feature p { max-width: 520px; color: #a8b2bc; font-size: 14px; }
.catalog-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.catalog-meta b { padding: 5px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #b8c1ca; background: rgba(255,255,255,.035); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.support-purpose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.support-purpose-grid article {
    min-height: 245px;
    padding: 26px;
    border: 1px solid rgba(137, 174, 200, .19);
    border-radius: 20px;
    background: rgba(9, 15, 23, .8);
}
.support-purpose-grid article > span { color: rgb(var(--scene-accent)); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.support-purpose-grid h3 { margin: 45px 0 10px; font-size: 25px; }
.support-purpose-grid p { color: var(--muted); }

.support-benefits-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.support-benefits-card,
.support-steps-card {
    padding: 34px;
    border: 1px solid rgba(137, 174, 200, .2);
    border-radius: 24px;
    background: rgba(9, 15, 23, .84);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 24px 68px rgba(0,0,0,.22);
}
.support-benefits-card { border-color: rgba(244, 199, 91, .24); background: radial-gradient(circle at 100% 0%, rgba(244,199,91,.11), transparent 38%), rgba(12, 16, 21, .88); }
.support-benefits-card h2,
.support-steps-card h2 { font-size: clamp(34px, 4vw, 54px); letter-spacing: -.055em; }
.support-check-list { display: grid; gap: 12px; padding: 0; margin: 28px 0; }
.support-check-list li { position: relative; list-style: none; padding: 14px 16px 14px 46px; border: 1px solid rgba(244, 199, 91, .13); border-radius: 13px; color: #c1c8ce; background: rgba(255,255,255,.025); }
.support-check-list li::before { content: "✓"; position: absolute; left: 16px; top: 12px; color: #f3cd6a; font-weight: 950; }
.support-steps-card ol { display: grid; gap: 0; padding: 0; margin: 24px 0 0; counter-reset: none; }
.support-steps-card li { position: relative; min-height: 76px; display: grid; grid-template-columns: 58px 1fr; align-items: start; gap: 10px; list-style: none; }
.support-steps-card li:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 42px; bottom: 0; width: 1px; background: rgba(244,199,91,.22); }
.support-steps-card li span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(244,199,91,.3); border-radius: 14px; color: #f1ca68; background: rgba(244,199,91,.07); font-size: 11px; font-weight: 900; }
.support-steps-card li p { margin: 10px 0 0; color: #b4bec7; }

.support-transparency article {
    position: relative;
    overflow: hidden;
    padding: 38px;
    border: 1px solid rgba(32, 217, 255, .19);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(32,217,255,.06), rgba(244,199,91,.045)), rgba(7,12,19,.88);
}
.support-transparency article::after { content: "§"; position: absolute; right: 34px; top: 6px; color: rgba(255,255,255,.04); font-size: 130px; font-weight: 950; }
.support-transparency h2 { font-size: clamp(34px, 4vw, 56px); }
.support-transparency p { position: relative; z-index: 1; max-width: 1020px; margin-bottom: 0; color: #aeb9c2; }

.support-faq-list { display: grid; gap: 10px; }
.support-faq-list details { border: 1px solid rgba(137, 174, 200, .18); border-radius: 16px; background: rgba(9,15,23,.78); }
.support-faq-list summary { position: relative; padding: 20px 58px 20px 22px; color: #e6ebef; font-weight: 850; cursor: pointer; list-style: none; }
.support-faq-list summary::-webkit-details-marker { display: none; }
.support-faq-list summary::after { content: "+"; position: absolute; right: 20px; top: 14px; color: rgb(var(--scene-accent)); font-size: 27px; font-weight: 400; transition: transform .18s ease; }
.support-faq-list details[open] summary::after { transform: rotate(45deg); }
.support-faq-list details p { margin: 0; padding: 0 22px 22px; color: var(--muted); }

.support-final-cta {
    margin-top: 34px;
    margin-bottom: 40px;
    padding: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border: 1px solid rgba(244,199,91,.28);
    border-radius: 24px;
    background: radial-gradient(circle at 100% 0%, rgba(244,199,91,.15), transparent 42%), rgba(10,14,19,.91);
}
.support-final-cta h2 { margin-bottom: 8px; font-size: clamp(34px, 4vw, 58px); }
.support-final-cta p { margin-bottom: 0; color: #aeb8c0; }
.support-final-cta .btn { flex: 0 0 auto; }

/* Account Cinema bridge */
.account-cinema-section { padding-top: 10px; padding-bottom: 18px; }
.account-cinema-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 22px;
    border: 1px solid rgba(244,199,91,.25);
    border-radius: 22px;
    background: radial-gradient(circle at 100% 0%, rgba(244,199,91,.13), transparent 38%), rgba(10,15,21,.9);
}
.account-cinema-card::after { content: "CINEMA MR"; position: absolute; right: 8%; bottom: -23px; color: rgba(255,255,255,.03); font-size: 72px; font-weight: 950; letter-spacing: .08em; }
.account-cinema-visual { position: relative; z-index: 1; width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(244,199,91,.33); border-radius: 20px; color: #f3cf72; background: rgba(244,199,91,.075); }
.account-cinema-visual small { position: absolute; right: -6px; bottom: -6px; padding: 4px 6px; border-radius: 7px; color: #191000; background: #f3cf72; font-size: 8px; font-weight: 950; }
.account-cinema-copy,
.account-cinema-actions { position: relative; z-index: 1; }
.account-cinema-copy h2 { margin-bottom: 6px; }
.account-cinema-copy p { margin-bottom: 0; color: var(--muted); }
.account-cinema-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.account-cinema-card.is-active { border-color: rgba(40,226,140,.35); }
.account-cinema-card.is-active .account-cinema-visual { border-color: rgba(40,226,140,.35); color: #9df6c9; background: rgba(40,226,140,.075); }

@media (max-width: 1320px) {
    .topbar.topbar-v2 { width: min(1260px, calc(100% - 22px)); gap: 9px; }
    .brand.brand-v2 { min-width: 196px; }
    .brand-v2 strong { font-size: 11px; }
    .nav-v2 > a, .nav-cluster > summary { padding-inline: 8px; font-size: 11px; }
    .top-actions-v2 .top-status { display: none; }
    .top-actions-v2 .desktop-join { min-width: 126px; padding-inline: 13px; font-size: 12px; }
}

@media (max-width: 1080px) {
    .brand.brand-v2 { min-width: 174px; }
    .brand-copy strong { max-width: 123px; }
    .top-actions-v2 .language-switcher { display: none; }
    .nav-v2 > a, .nav-cluster > summary { padding-inline: 7px; }
    .footer-v2-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-support-column { grid-column: 1 / -1; }
    .support-catalog-grid { grid-template-columns: 1fr 1fr; }
    .catalog-bonus,
    .catalog-devil { min-height: 320px; }
}

@media (max-width: 980px) {
    .topbar.topbar-v2 { padding: 9px 10px; flex-wrap: wrap; }
    .brand.brand-v2 { min-width: 0; flex: 1 1 auto; }
    .brand-copy strong { max-width: none; }
    .nav-toggle { order: 2; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; margin-left: 0; border-radius: 12px; }
    .top-actions.top-actions-v2 { order: 3; width: auto; margin-left: 0; }
    .top-actions-v2 .btn-account { display: inline-flex; }
    .nav.nav-v2 {
        order: 4;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        opacity: 0;
        transition: max-height .28s ease, opacity .18s ease, padding .18s ease;
    }
    .nav.nav-v2.open { max-height: 760px; overflow: visible; padding-top: 10px; opacity: 1; }
    .nav-v2 > a, .nav-cluster > summary { width: 100%; min-height: 46px; justify-content: flex-start; padding-inline: 13px; border-color: rgba(137,174,200,.12); background: rgba(255,255,255,.018); }
    .nav-cluster { display: block; }
    .nav-cluster > summary { justify-content: space-between; }
    .nav-cluster-menu { position: static; width: 100%; margin-top: 5px; padding: 5px; transform: none; box-shadow: none; background: rgba(0,0,0,.16); }
    .nav-cluster-menu::before { display: none; }
    .nav-cluster-menu a { padding: 10px; }
    .support-hero { min-height: auto; grid-template-columns: 1fr; gap: 24px; padding-top: 74px; }
    .support-access-card { max-width: 720px; }
    .support-purpose-grid { grid-template-columns: 1fr; }
    .support-purpose-grid article { min-height: 0; }
    .support-purpose-grid h3 { margin-top: 24px; }
    .support-benefits-layout { grid-template-columns: 1fr; }
    .account-cinema-card { grid-template-columns: 72px 1fr; }
    .account-cinema-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 720px) {
    .section { width: min(100% - 24px, var(--max)); padding: 58px 0; }
    .topbar.topbar-v2 { width: calc(100% - 16px); top: 7px; margin-top: 8px; border-radius: 16px; }
    .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
    .brand-v2 .brand-icon { width: 32px; height: 32px; }
    .brand-v2 strong { font-size: 10px; letter-spacing: .07em; }
    .brand-v2 small { font-size: 8px; }
    .nav-toggle span { display: none; }
    .top-actions.top-actions-v2 { gap: 5px; }
    .btn-account { min-width: 43px; padding-inline: 11px; font-size: 0; }
    .btn-account span { font-size: 12px; }
    .top-actions-v2 .desktop-join { display: none; }
    .nav.nav-v2 { grid-template-columns: 1fr; }
    .support-hero-copy h1 { font-size: clamp(46px, 15vw, 70px); }
    .support-catalog-grid { grid-template-columns: 1fr; }
    .catalog-feature,
    .catalog-bonus,
    .catalog-devil { grid-column: auto; min-height: 330px; padding: 23px; }
    .support-benefits-card,
    .support-steps-card,
    .support-transparency article { padding: 24px; }
    .support-final-cta { width: min(100% - 24px, var(--max)); padding: 27px; flex-direction: column; align-items: flex-start; }
    .support-final-cta .btn { width: 100%; }
    .footer.footer-v2 { width: calc(100% - 24px); }
    .footer-v2-grid { padding: 26px; grid-template-columns: 1fr 1fr; gap: 26px 18px; }
    .footer-brand-block { grid-column: 1 / -1; }
    .footer-support-column { grid-column: 1 / -1; }
    .footer-v2-bottom { padding: 15px 26px; flex-direction: column; gap: 5px; }
    .account-cinema-card { padding: 20px; grid-template-columns: 58px 1fr; gap: 15px; }
    .account-cinema-visual { width: 58px; height: 58px; border-radius: 16px; }
}

@media (max-width: 460px) {
    .brand-copy strong { max-width: 135px; }
    .brand-copy small { max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .support-access-actions .btn,
    .account-cinema-actions .btn { width: 100%; }
    .footer-v2-grid { grid-template-columns: 1fr; }
    .footer-column,
    .footer-brand-block,
    .footer-support-column { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .topbar, .nav, .nav-cluster-menu, .btn, .skip-link { transition: none !important; }
    .btn:hover { transform: none; }
}

/* =========================================================
   Home Competitive V2 — R4
   ========================================================= */
.home-v2-hero {
    min-height: min(900px, calc(100vh - 24px));
    padding-top: 132px;
    padding-bottom: 88px;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(380px, .72fr);
    align-items: center;
    gap: clamp(34px, 5vw, 76px);
}
.home-v2-hero-copy { position: relative; z-index: 1; max-width: 800px; }
.home-v2-logo { width: min(390px, 70%); margin: 10px 0 18px; opacity: .94; filter: drop-shadow(0 16px 34px rgba(0,0,0,.44)); }
.home-v2-hero h1 {
    margin: 0;
    max-width: 920px;
    font-size: clamp(48px, 6.6vw, 96px);
    line-height: .94;
    letter-spacing: -.072em;
    font-weight: 950;
    text-transform: uppercase;
}
.home-v2-hero h1 span {
    display: block;
    color: transparent;
    background: linear-gradient(100deg, #f6fbff 0%, var(--cyan) 42%, #79efff 60%, #ff5161 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 38px rgba(32,217,255,.10);
}
.home-v2-hero .lead { max-width: 760px; margin: 26px 0 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.72; }
.home-v2-hero-actions { margin-top: 34px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.home-v2-hero-actions .btn { min-height: 50px; }
.home-v2-text-link { padding: 10px 4px; color: #c9d5df; font-size: 13px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.home-v2-text-link:hover { color: var(--cyan); }
.home-v2-status-strip {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.home-v2-status-strip > span {
    min-height: 49px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(137,174,200,.17);
    border-radius: 13px;
    background: rgba(5,9,14,.70);
    backdrop-filter: blur(14px);
}
.home-v2-status-strip small { display: block; color: #758493; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.home-v2-status-strip strong { display: block; color: #e9f4fa; font-size: 12px; }
.home-v2-status-strip .dot { width: 8px; height: 8px; }

.home-v2-network-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid rgba(137,174,200,.24);
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, rgba(32,217,255,.11), transparent 34%),
        linear-gradient(155deg, rgba(13,21,31,.95), rgba(7,11,17,.87));
    box-shadow: 0 34px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(24px) saturate(1.1);
}
.home-v2-network-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .44;
    background:
        linear-gradient(120deg, transparent 0 62%, rgba(32,217,255,.05) 62.2% 62.7%, transparent 62.9% 100%),
        repeating-linear-gradient(90deg, transparent 0 56px, rgba(255,255,255,.014) 56px 57px);
}
.home-v2-network-card > * { position: relative; z-index: 1; }
.home-v2-network-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.home-v2-network-head h2 { margin: 4px 0 2px; font-size: 25px; letter-spacing: -.04em; }
.home-v2-network-head p { margin: 0; color: #80909e; font-size: 12px; }
.home-v2-kicker { color: var(--cyan); font-size: 9px; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.home-v2-live-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(40,226,140,.27); border-radius: 999px; color: #9df6c9; background: rgba(40,226,140,.07); font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.home-v2-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #28e28c; box-shadow: 0 0 12px rgba(40,226,140,.7); }
.home-v2-live-badge.is-offline { border-color: rgba(255,59,77,.3); color: #ff9da7; background: rgba(255,59,77,.08); }
.home-v2-live-badge.is-offline i { background: #ff3b4d; box-shadow: 0 0 12px rgba(255,59,77,.7); }
.home-v2-network-metrics { margin: 22px 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.home-v2-network-metrics article { min-height: 82px; padding: 14px; border: 1px solid rgba(137,174,200,.13); border-radius: 15px; background: rgba(255,255,255,.018); }
.home-v2-network-metrics small { display: block; min-height: 28px; color: #72818e; font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.home-v2-network-metrics strong { display: block; margin-top: 5px; overflow: hidden; color: #f5fbff; font-size: clamp(17px, 2vw, 25px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.home-v2-arena-pulse { display: grid; gap: 7px; }
.home-v2-arena-pulse .arena-item { min-height: 55px; padding: 10px 11px; border-color: rgba(137,174,200,.11); background: rgba(0,0,0,.13); }
.home-v2-arena-pulse .arena-item strong { font-size: 11px; }
.home-v2-arena-pulse .arena-item small { max-width: 260px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.home-v2-network-foot { margin-top: 15px; padding-top: 13px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; border-top: 1px solid rgba(137,174,200,.10); color: #647380; font-size: 9px; }
.home-v2-network-foot a { color: var(--cyan); font-weight: 850; text-transform: uppercase; }

.home-v2-section-heading { max-width: 900px; }
.home-v2-section-heading h2,
.home-v2-journey-head h2,
.home-v2-season-copy h2,
.home-v2-support-panel h2 { margin: 8px 0 15px; font-size: clamp(37px, 4.7vw, 66px); line-height: 1.02; letter-spacing: -.058em; }
.home-v2-section-heading > p,
.home-v2-journey-head p,
.home-v2-season-copy > p,
.home-v2-support-panel p { max-width: 780px; margin: 0; color: #9eacb9; font-size: 16px; line-height: 1.72; }

.home-v2-core { padding-top: 52px; }
.home-v2-dd-feature {
    position: relative;
    overflow: hidden;
    margin-top: 34px;
    border: 1px solid rgba(255,59,77,.29);
    border-radius: 28px;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,59,77,.17), transparent 35%),
        radial-gradient(circle at 100% 100%, rgba(32,217,255,.09), transparent 38%),
        linear-gradient(145deg, rgba(17,13,18,.96), rgba(7,11,16,.93));
    box-shadow: var(--shadow);
}
.home-v2-dd-feature::after { content: "DESTRUCTION DERBY"; position: absolute; right: -18px; top: 9px; color: rgba(255,255,255,.025); font-size: clamp(44px, 8vw, 118px); font-weight: 950; letter-spacing: -.06em; white-space: nowrap; transform: rotate(-4deg); pointer-events: none; }
.home-v2-dd-intro { position: relative; z-index: 1; padding: 28px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.home-v2-mode-code { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; color: #fff; background: rgba(255,255,255,.035); font-size: 19px; font-weight: 950; letter-spacing: .06em; }
.home-v2-dd-intro .home-v2-mode-code { border-color: rgba(255,59,77,.4); color: #ff9ca6; background: rgba(255,59,77,.08); box-shadow: 0 0 30px rgba(255,59,77,.08); }
.home-v2-dd-intro strong { display: block; font-size: 25px; letter-spacing: -.025em; }
.home-v2-dd-intro small { color: #8997a3; }
.home-v2-dd-grid { position: relative; z-index: 1; padding: 18px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.home-v2-dd-grid article { min-height: 220px; padding: 24px; border: 1px solid rgba(255,255,255,.075); border-radius: 19px; background: rgba(255,255,255,.021); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.home-v2-dd-grid article:hover { transform: translateY(-4px); border-color: rgba(255,59,77,.35); background: rgba(255,59,77,.04); }
.home-v2-dd-grid span { color: #ff6271; font-size: 10px; font-weight: 950; letter-spacing: .16em; }
.home-v2-dd-grid h3 { margin: 52px 0 9px; font-size: 22px; letter-spacing: -.035em; }
.home-v2-dd-grid p { margin: 0; color: #8795a2; font-size: 13px; line-height: 1.62; }

.home-v2-touge-panel {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    padding: clamp(30px, 5vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, .72fr);
    align-items: center;
    gap: clamp(32px, 6vw, 86px);
    border: 1px solid rgba(255,176,32,.26);
    border-radius: 30px;
    background:
        linear-gradient(90deg, rgba(6,9,13,.96) 0%, rgba(7,11,16,.88) 53%, rgba(13,12,9,.88) 100%),
        radial-gradient(circle at 100% 20%, rgba(255,176,32,.18), transparent 36%);
    box-shadow: var(--shadow);
}
.home-v2-touge-panel::before { content: ""; position: absolute; inset: 0; opacity: .6; pointer-events: none; background: radial-gradient(1300px 480px at 80% 110%, transparent 55%, rgba(255,176,32,.09) 55.4%, transparent 56.2%), radial-gradient(1300px 480px at 60% 110%, transparent 63%, rgba(32,217,255,.07) 63.4%, transparent 64.2%); }
.home-v2-touge-copy,
.home-v2-touge-mapbox { position: relative; z-index: 1; }
.home-v2-touge-copy h2 { margin: 8px 0 15px; max-width: 770px; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -.06em; }
.home-v2-touge-copy > p { max-width: 680px; color: #9eacb8; line-height: 1.72; }
.home-v2-feature-list { margin: 25px 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.home-v2-feature-list span { padding: 8px 10px; border: 1px solid rgba(255,176,32,.22); border-radius: 999px; color: #dec99f; background: rgba(255,176,32,.055); font-size: 10px; font-weight: 800; }
.btn-touge { border-color: rgba(255,176,32,.35); color: #181004; background: linear-gradient(100deg, #ffb020, #ffd479); }
.btn-touge:hover { box-shadow: 0 10px 34px rgba(255,176,32,.20); }
.home-v2-touge-mapbox { padding: 25px; border: 1px solid rgba(255,176,32,.18); border-radius: 23px; background: rgba(0,0,0,.25); backdrop-filter: blur(16px); }
.home-v2-touge-mapbox > small { color: #ffca6d; font-size: 9px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.home-v2-map-grid { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.home-v2-map-grid span { padding: 9px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; color: #d4dce3; background: rgba(255,255,255,.025); font-size: 11px; }
.home-v2-route-line { position: relative; height: 86px; margin-top: 24px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.18)); }
.home-v2-route-line::before { content: ""; position: absolute; width: 150%; height: 160px; left: -38%; top: 20px; border: 3px solid rgba(255,176,32,.42); border-color: rgba(255,176,32,.42) transparent transparent rgba(255,176,32,.42); border-radius: 50%; transform: rotate(-8deg); filter: drop-shadow(0 0 9px rgba(255,176,32,.18)); }
.home-v2-route-line i { position: absolute; width: 8px; height: 8px; border: 2px solid #ffd17b; border-radius: 50%; background: #1b1408; box-shadow: 0 0 15px rgba(255,176,32,.5); }
.home-v2-route-line i:nth-child(1) { left: 8%; top: 50px; }
.home-v2-route-line i:nth-child(2) { left: 29%; top: 30px; }
.home-v2-route-line i:nth-child(3) { left: 50%; top: 47px; }
.home-v2-route-line i:nth-child(4) { left: 70%; top: 25px; }
.home-v2-route-line i:nth-child(5) { right: 6%; top: 43px; }

.home-v2-heading-row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.home-v2-experience-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.home-v2-experience-card { position: relative; min-height: 265px; padding: 25px; display: flex; align-items: flex-start; gap: 18px; overflow: hidden; border: 1px solid rgba(137,174,200,.17); border-radius: 23px; background: linear-gradient(150deg, rgba(14,22,31,.92), rgba(7,11,16,.88)); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.home-v2-experience-card::after { content: ""; position: absolute; inset: auto -35% -80% 20%; height: 210px; border-radius: 50%; filter: blur(30px); opacity: .18; }
.home-v2-experience-card:hover { transform: translateY(-5px); box-shadow: 0 25px 65px rgba(0,0,0,.38); }
.home-v2-experience-card.is-race:hover { border-color: rgba(32,217,255,.38); }
.home-v2-experience-card.is-race::after { background: var(--cyan); }
.home-v2-experience-card.is-dm:hover { border-color: rgba(132,104,255,.38); }
.home-v2-experience-card.is-dm::after { background: var(--purple); }
.home-v2-experience-card.is-garage:hover { border-color: rgba(40,226,140,.38); }
.home-v2-experience-card.is-garage::after { background: var(--green); }
.home-v2-experience-card.is-shooter:hover { border-color: rgba(255,88,88,.4); }
.home-v2-experience-card.is-shooter::after { background: #ff5858; }
.home-v2-experience-card.is-hub:hover { border-color: rgba(255,196,64,.4); }
.home-v2-experience-card.is-hub::after { background: #ffc440; }
.home-v2-experience-card .home-v2-mode-code { width: 54px; height: 54px; flex-basis: 54px; border-radius: 15px; font-size: 15px; }
.home-v2-experience-card > div { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 205px; }
.home-v2-experience-card h3 { margin: 6px 0 10px; font-size: 26px; }
.home-v2-experience-card p { margin: 0; color: #8c9aa7; font-size: 13px; line-height: 1.65; }
.home-v2-experience-card strong { margin-top: auto; color: #d9e5ed; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }

.home-v2-journey { position: relative; }
.home-v2-journey-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; }
.home-v2-journey-head > div { max-width: 830px; }
.home-v2-journey-grid { position: relative; margin-top: 34px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.home-v2-journey-grid::before { content: ""; position: absolute; left: 10%; right: 10%; top: 35px; height: 1px; background: linear-gradient(90deg, transparent, rgba(32,217,255,.36), rgba(255,59,77,.28), transparent); }
.home-v2-journey-grid article { position: relative; z-index: 1; min-height: 225px; padding: 23px; border: 1px solid rgba(137,174,200,.15); border-radius: 20px; background: rgba(8,13,20,.91); }
.home-v2-journey-grid span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(32,217,255,.32); border-radius: 50%; color: var(--cyan); background: #081018; font-size: 9px; font-weight: 950; box-shadow: 0 0 25px rgba(32,217,255,.08); }
.home-v2-journey-grid h3 { margin: 46px 0 8px; font-size: 19px; }
.home-v2-journey-grid p { margin: 0; color: #82919e; font-size: 12px; line-height: 1.65; }

.home-v2-season-panel { position: relative; overflow: hidden; padding: clamp(28px,4.5vw,56px); display: grid; grid-template-columns: minmax(0,.9fr) minmax(300px,.62fr) minmax(320px,.72fr); align-items: stretch; gap: 18px; border: 1px solid rgba(255,59,77,.20); border-radius: 28px; background: radial-gradient(circle at 0% 0%, rgba(255,59,77,.10), transparent 32%), radial-gradient(circle at 100% 100%, rgba(244,199,91,.08), transparent 35%), rgba(8,12,18,.94); box-shadow: var(--shadow); }
.home-v2-season-panel::after { content: "SEASON"; position: absolute; left: 3%; bottom: -41px; color: rgba(255,255,255,.023); font-size: 132px; font-weight: 950; letter-spacing: -.08em; pointer-events: none; }
.home-v2-season-panel > * { position: relative; z-index: 1; }
.home-v2-season-copy h2 { font-size: clamp(36px, 4vw, 58px); }
.home-v2-season-name { margin: 24px 0 20px; }
.home-v2-season-name small { display: block; color: #798893; font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.home-v2-season-name strong { display: block; margin-top: 3px; font-size: 22px; }
.home-v2-season-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.home-v2-season-stats article { min-height: 126px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(137,174,200,.13); border-radius: 17px; background: rgba(255,255,255,.018); }
.home-v2-season-stats small { color: #768591; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.home-v2-season-stats strong { font-size: 34px; letter-spacing: -.04em; }
.home-v2-ranking-preview { padding: 19px; border: 1px solid rgba(137,174,200,.14); border-radius: 20px; background: rgba(0,0,0,.19); }
.home-v2-ranking-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-v2-ranking-head strong { font-size: 13px; }
.home-v2-ranking-head a { color: var(--cyan); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.home-v2-ranking-list { margin-top: 14px; display: grid; gap: 7px; }
.home-v2-ranking-list a { min-height: 62px; padding: 10px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.065); border-radius: 13px; background: rgba(255,255,255,.018); }
.home-v2-ranking-list a:hover { border-color: rgba(32,217,255,.25); }
.home-v2-ranking-list span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #d8e8f2; background: rgba(32,217,255,.08); font-size: 10px; font-weight: 950; }
.home-v2-ranking-list strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.home-v2-ranking-list small { color: #7f8e9a; font-size: 9px; }
.home-v2-empty-ranking { margin-top: 15px; min-height: 176px; padding: 20px; display: flex; flex-direction: column; justify-content: center; border: 1px dashed rgba(137,174,200,.17); border-radius: 15px; text-align: center; }
.home-v2-empty-ranking strong { color: #d8e4ec; }
.home-v2-empty-ranking p { margin: 7px 0 0; color: #758491; font-size: 11px; line-height: 1.55; }

.home-v2-community-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.home-v2-community-card { position: relative; overflow: hidden; min-height: 350px; padding: 27px; display: flex; flex-direction: column; border: 1px solid rgba(137,174,200,.16); border-radius: 23px; background: rgba(8,13,20,.91); }
.home-v2-community-card::after { content: ""; position: absolute; width: 210px; height: 210px; right: -95px; top: -90px; border-radius: 50%; filter: blur(12px); opacity: .12; }
.home-v2-community-card.is-discord::after { background: #5865f2; }
.home-v2-community-card.is-clans::after { background: #ff3b4d; }
.home-v2-community-card.is-updates::after { background: #20d9ff; }
.home-v2-community-card > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; color: #dfeaf1; background: rgba(255,255,255,.03); font-size: 12px; font-weight: 950; }
.home-v2-community-card h3 { margin: 31px 0 9px; font-size: 23px; }
.home-v2-community-card > p { margin: 0; color: #8795a2; font-size: 13px; line-height: 1.65; }
.home-v2-community-meta { margin: 22px 0 18px; padding-top: 17px; display: flex; align-items: baseline; gap: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.home-v2-community-meta strong { font-size: 27px; }
.home-v2-community-meta small { color: #778692; font-size: 10px; }
.home-v2-community-card .btn { margin-top: auto; width: fit-content; }

.home-v2-support-panel { position: relative; min-height: 300px; padding: clamp(30px,4.5vw,54px); display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: clamp(26px,5vw,70px); overflow: hidden; border: 1px solid rgba(244,199,91,.27); border-radius: 29px; background: radial-gradient(circle at 80% 30%, rgba(244,199,91,.13), transparent 30%), radial-gradient(circle at 100% 100%, rgba(255,59,77,.08), transparent 36%), rgba(10,14,19,.95); box-shadow: var(--shadow); }
.home-v2-support-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, transparent 0 68%, rgba(244,199,91,.04) 68.2% 68.8%, transparent 69% 100%); }
.home-v2-support-panel > * { position: relative; z-index: 1; }
.home-v2-support-panel h2 { font-size: clamp(34px,4vw,58px); }
.home-v2-support-catalog { display: inline-block; margin-top: 18px; padding: 8px 11px; border: 1px solid rgba(244,199,91,.20); border-radius: 10px; color: #e5d19c; background: rgba(244,199,91,.055); font-size: 11px; }
.home-v2-support-mark { width: 150px; height: 150px; display: grid; place-content: center; border: 1px solid rgba(244,199,91,.27); border-radius: 50%; text-align: center; background: rgba(244,199,91,.05); box-shadow: inset 0 0 40px rgba(244,199,91,.04), 0 0 55px rgba(244,199,91,.05); }
.home-v2-support-mark strong { display: block; color: #f0d486; font-size: 12px; letter-spacing: .15em; }
.home-v2-support-mark span { display: block; color: #fff2c2; font-size: 35px; font-weight: 950; line-height: 1; }

.home-v2-bottom-grid { padding-top: 38px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.72fr); align-items: stretch; gap: 14px; }
.home-v2-live-arenas,
.home-v2-updates-panel { padding: 24px; border: 1px solid rgba(137,174,200,.16); border-radius: 24px; background: rgba(8,13,20,.91); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.home-v2-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.home-v2-block-head h2 { margin: 0 0 5px; font-size: 24px; }
.home-v2-block-head p { margin: 0; color: #7f8e9b; font-size: 11px; }
.home-v2-block-head > a { flex: 0 0 auto; color: var(--cyan); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.home-v2-arena-grid { margin-top: 19px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.home-v2-arena-grid article { position: relative; min-height: 92px; padding: 13px 42px 13px 13px; border: 1px solid rgba(255,255,255,.065); border-radius: 14px; background: rgba(255,255,255,.018); }
.home-v2-arena-grid article > div { display: flex; align-items: center; gap: 8px; }
.home-v2-arena-grid article span { padding: 3px 5px; border-radius: 6px; color: var(--cyan); background: rgba(32,217,255,.07); font-size: 7px; font-weight: 950; }
.home-v2-arena-grid article strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.home-v2-arena-grid article small { display: block; margin-top: 8px; overflow: hidden; color: #73818e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.home-v2-arena-grid article b { position: absolute; right: 12px; top: 50%; min-width: 25px; height: 25px; display: grid; place-items: center; transform: translateY(-50%); border-radius: 8px; color: #c6d4dc; background: rgba(255,255,255,.04); font-size: 9px; }
.home-v2-arena-grid article b.arena-load-low,
.home-v2-arena-grid article b.arena-load-mid { color: #9df6c9; background: rgba(40,226,140,.08); }
.home-v2-arena-grid article b.arena-load-yellow,
.home-v2-arena-grid article b.arena-load-orange { color: #ffd88e; background: rgba(255,176,32,.09); }
.home-v2-arena-grid article b.arena-load-red { color: #ff9ca6; background: rgba(255,59,77,.10); }
.home-v2-update-list { margin-top: 19px; display: grid; gap: 8px; }
.home-v2-update-list a { min-height: 93px; padding: 13px; display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 12px; border: 1px solid rgba(255,255,255,.065); border-radius: 14px; background: rgba(255,255,255,.018); }
.home-v2-update-list a:hover { border-color: rgba(32,217,255,.24); }
.home-v2-update-list > a > span { align-self: start; padding: 5px 7px; border-radius: 8px; color: var(--cyan); background: rgba(32,217,255,.07); font-size: 8px; font-weight: 900; text-align: center; }
.home-v2-update-list strong { display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-v2-update-list p { display: -webkit-box; margin: 5px 0 0; overflow: hidden; color: #74828e; font-size: 9px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media (max-width: 1180px) {
    .home-v2-hero { grid-template-columns: minmax(0,1fr) minmax(340px,.72fr); }
    .home-v2-dd-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home-v2-season-panel { grid-template-columns: 1fr 1fr; }
    .home-v2-ranking-preview { grid-column: 1 / -1; }
    .home-v2-ranking-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .home-v2-ranking-list a { grid-template-columns: 30px minmax(0,1fr); }
    .home-v2-ranking-list small { grid-column: 2; }
    .home-v2-support-panel { grid-template-columns: minmax(0,1fr) auto; }
    .home-v2-support-mark { display: none; }
}

@media (max-width: 980px) {
    .home-v2-hero { min-height: auto; padding-top: 126px; grid-template-columns: 1fr; }
    .home-v2-hero-copy { max-width: 850px; }
    .home-v2-network-card { max-width: 760px; }
    .home-v2-touge-panel { grid-template-columns: 1fr; }
    .home-v2-touge-mapbox { max-width: 680px; }
    .home-v2-experience-grid,
    .home-v2-community-grid { grid-template-columns: 1fr 1fr; }
    .home-v2-experience-card:last-child,
    .home-v2-community-card:last-child { grid-column: 1 / -1; }
    .home-v2-journey-grid { grid-template-columns: 1fr 1fr; }
    .home-v2-journey-grid::before { display: none; }
    .home-v2-season-panel { grid-template-columns: 1fr; }
    .home-v2-season-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .home-v2-ranking-preview { grid-column: auto; }
    .home-v2-bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .home-v2-hero { padding-top: 104px; padding-bottom: 52px; }
    .home-v2-logo { width: min(330px, 84%); }
    .home-v2-hero h1 { font-size: clamp(43px, 14.5vw, 70px); }
    .home-v2-hero .lead { font-size: 16px; }
    .home-v2-hero-actions { align-items: stretch; }
    .home-v2-hero-actions .btn { flex: 1 1 100%; }
    .home-v2-text-link { width: 100%; text-align: center; }
    .home-v2-status-strip { display: grid; grid-template-columns: 1fr 1fr; }
    .home-v2-status-strip > span { min-width: 0; }
    .home-v2-network-card { padding: 18px; border-radius: 21px; }
    .home-v2-network-head { flex-direction: column; }
    .home-v2-network-metrics { grid-template-columns: 1fr 1fr; }
    .home-v2-network-metrics article:last-child { grid-column: 1 / -1; }
    .home-v2-network-foot { grid-template-columns: 1fr auto; }
    .home-v2-network-foot small { display: none; }
    .home-v2-dd-intro { grid-template-columns: auto 1fr; padding: 20px; }
    .home-v2-dd-intro .btn { grid-column: 1 / -1; width: 100%; }
    .home-v2-dd-grid { grid-template-columns: 1fr; padding: 11px; }
    .home-v2-dd-grid article { min-height: 180px; }
    .home-v2-dd-grid h3 { margin-top: 32px; }
    .home-v2-touge-panel { min-height: auto; padding: 26px 20px; }
    .home-v2-touge-copy h2 { font-size: clamp(38px, 12vw, 58px); }
    .home-v2-experience-grid,
    .home-v2-community-grid,
    .home-v2-journey-grid { grid-template-columns: 1fr; }
    .home-v2-experience-card:last-child,
    .home-v2-community-card:last-child { grid-column: auto; }
    .home-v2-experience-card { min-height: 230px; }
    .home-v2-journey-head { align-items: flex-start; flex-direction: column; }
    .home-v2-journey-head .btn { width: 100%; }
    .home-v2-journey-grid article { min-height: 180px; }
    .home-v2-journey-grid h3 { margin-top: 30px; }
    .home-v2-season-panel { padding: 22px; }
    .home-v2-season-stats { grid-template-columns: 1fr 1fr; }
    .home-v2-ranking-list { grid-template-columns: 1fr; }
    .home-v2-support-panel { grid-template-columns: 1fr; padding: 26px; }
    .home-v2-support-panel .btn { width: 100%; }
    .home-v2-arena-grid { grid-template-columns: 1fr; }
    .home-v2-block-head { flex-direction: column; }
    .home-v2-live-arenas,
    .home-v2-updates-panel { padding: 19px; }
}

@media (max-width: 430px) {
    .home-v2-status-strip { grid-template-columns: 1fr; }
    .home-v2-network-metrics { grid-template-columns: 1fr; }
    .home-v2-network-metrics article:last-child { grid-column: auto; }
    .home-v2-season-stats { grid-template-columns: 1fr; }
    .home-v2-update-list a { grid-template-columns: 1fr; }
    .home-v2-update-list > a > span { width: fit-content; }
}


/* Home refinement R4B — cleaner opening and live network below the fold */
.home-v2-hero.home-v2-hero-refined {
    width: min(1280px, calc(100% - 40px));
    min-height: min(820px, calc(100vh - 12px));
    padding: 138px 0 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    isolation: isolate;
}
.home-v2-hero-refined::before {
    content: "";
    position: absolute;
    inset: 72px -10vw 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(3, 7, 12, .18), rgba(3, 7, 12, .36) 46%, transparent 75%),
        linear-gradient(180deg, rgba(2,5,9,.10), rgba(2,5,9,.22) 64%, rgba(2,5,9,.56));
}
.home-v2-hero-refined .home-v2-hero-copy {
    width: min(940px, 100%);
    max-width: 940px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home-v2-hero-refined .eyebrow { justify-content: center; }
.home-v2-hero-refined .home-v2-logo {
    width: min(410px, 68vw);
    margin: 22px auto 24px;
    opacity: .98;
    filter: drop-shadow(0 18px 42px rgba(0,0,0,.62)) drop-shadow(0 0 24px rgba(32,217,255,.12));
}
.home-v2-hero-refined h1 {
    max-width: 940px;
    margin: 0;
    font-size: clamp(46px, 6.1vw, 82px);
    line-height: .99;
    letter-spacing: -.062em;
    text-shadow: 0 12px 38px rgba(0,0,0,.66);
}
.home-v2-hero-refined h1 span {
    display: block;
    margin-top: 7px;
    color: var(--cyan);
    background: none;
    -webkit-text-fill-color: currentColor;
}
.home-v2-hero-refined .lead {
    max-width: 760px;
    margin: 24px auto 0;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.65;
    color: #d3dce4;
    text-shadow: 0 8px 24px rgba(0,0,0,.7);
}
.home-v2-hero-refined .home-v2-hero-actions {
    margin-top: 30px;
    justify-content: center;
}
.home-v2-hero-refined .home-v2-hero-actions .btn { min-width: 168px; }
.home-v2-hero-status {
    margin-top: 25px;
    padding: 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(135,176,201,.18);
    border-radius: 16px;
    background: rgba(5,10,16,.72);
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
    backdrop-filter: blur(16px);
}
.home-v2-hero-status > span {
    min-height: 38px;
    padding: 7px 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 1px solid rgba(137,174,200,.10);
}
.home-v2-hero-status > span:first-child { border-left: 0; }
.home-v2-hero-status small {
    color: #788794;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.home-v2-hero-status strong { color: #edf7fb; font-size: 12px; }
.home-v2-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #81909d;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.home-v2-scroll-cue i {
    width: 1px;
    height: 28px;
    background: linear-gradient(var(--cyan), transparent);
    animation: mrHomeScrollCue 1.9s ease-in-out infinite;
}
@keyframes mrHomeScrollCue {
    0%,100% { opacity: .35; transform: scaleY(.65); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}
.home-v2-network-section {
    width: min(1240px, calc(100% - 40px));
    padding: 0 0 54px;
    margin-top: -62px;
    position: relative;
    z-index: 5;
    scroll-margin-top: 96px;
}
.home-v2-network-card.home-v2-network-wide {
    max-width: none;
    min-height: 0;
    padding: 24px;
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(9,17,25,.94), rgba(5,10,16,.90));
    box-shadow: 0 28px 80px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.035);
}
.home-v2-network-wide .home-v2-network-head { align-items: center; }
.home-v2-network-wide .home-v2-network-head h2 { font-size: 29px; }
.home-v2-network-wide .home-v2-network-head p { font-size: 13px; }
.home-v2-network-wide .home-v2-network-metrics {
    margin: 20px 0 14px;
    grid-template-columns: repeat(3, minmax(0,1fr));
}
.home-v2-network-wide .home-v2-network-metrics article {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.home-v2-network-wide .home-v2-arena-pulse {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 8px;
}
.home-v2-network-wide .home-v2-arena-pulse .arena-item {
    min-height: 74px;
    padding: 12px;
    border: 1px solid rgba(137,174,200,.11);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
}
.home-v2-network-wide .home-v2-arena-pulse .arena-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-v2-network-wide .home-v2-arena-pulse .arena-item small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.home-v2-network-wide .home-v2-network-foot { margin-top: 14px; }

@media (max-width: 1050px) {
    .home-v2-hero.home-v2-hero-refined { min-height: 760px; padding-top: 126px; }
    .home-v2-network-wide .home-v2-arena-pulse { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .home-v2-hero.home-v2-hero-refined {
        width: min(100% - 28px, 680px);
        min-height: 710px;
        padding: 118px 0 96px;
    }
    .home-v2-hero-refined .home-v2-logo { width: min(320px, 82vw); margin-top: 16px; }
    .home-v2-hero-refined h1 { font-size: clamp(40px, 12.5vw, 62px); }
    .home-v2-hero-refined .lead { font-size: 16px; }
    .home-v2-hero-refined .home-v2-hero-actions { width: min(430px, 100%); }
    .home-v2-hero-refined .home-v2-hero-actions .btn { flex: 1 1 100%; }
    .home-v2-hero-status { width: min(430px, 100%); display: grid; grid-template-columns: 1fr 1fr; }
    .home-v2-hero-status > span { justify-content: center; border-left: 0; }
    .home-v2-hero-status > span:first-child { grid-column: 1 / -1; border-bottom: 1px solid rgba(137,174,200,.10); }
    .home-v2-scroll-cue { display: none; }
    .home-v2-network-section { width: min(100% - 28px, 680px); margin-top: -34px; padding-bottom: 40px; }
    .home-v2-network-card.home-v2-network-wide { padding: 18px; }
    .home-v2-network-wide .home-v2-network-head { align-items: flex-start; }
    .home-v2-network-wide .home-v2-network-metrics { grid-template-columns: 1fr 1fr; }
    .home-v2-network-wide .home-v2-network-metrics article:last-child { grid-column: 1 / -1; }
    .home-v2-network-wide .home-v2-arena-pulse { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .home-v2-scroll-cue i { animation: none; }
}


/* Home refinement R4C — tighter brand grouping in the opening hero */
.home-v2-hero-refined .eyebrow {
    margin-bottom: 0;
}
.home-v2-hero-refined .home-v2-logo {
    width: min(470px, 72vw);
    margin: 8px auto 10px;
}
.home-v2-hero-refined h1 {
    margin-top: 0;
}
@media (max-width: 760px) {
    .home-v2-hero-refined .eyebrow {
        max-width: 92%;
        font-size: 10px;
        line-height: 1.4;
    }
    .home-v2-hero-refined .home-v2-logo {
        width: min(355px, 88vw);
        margin: 8px auto 10px;
    }
}


/* Home refinement R4D — complete first-view composition */
.home-v2-hero.home-v2-hero-refined {
    min-height: min(820px, 100svh);
    padding: 96px 0 40px;
    align-items: flex-start;
}
.home-v2-hero-refined::before {
    inset: 74px -10vw 0;
}
.home-v2-hero-refined .home-v2-hero-copy {
    width: min(980px, 100%);
    max-width: 980px;
}
.home-v2-hero-refined .eyebrow {
    margin: 0 0 1px;
}
.home-v2-hero-refined .home-v2-logo {
    width: min(540px, 76vw);
    margin: 0 auto 3px;
}
.home-v2-hero-refined .home-v2-logo img {
    width: 100%;
    height: auto;
}
.home-v2-hero-refined h1 {
    max-width: 930px;
    margin-top: 0;
    font-size: clamp(44px, 5.6vw, 78px);
    line-height: .96;
}
.home-v2-hero-refined h1 span {
    margin-top: 5px;
}
.home-v2-hero-refined .lead {
    margin-top: 16px;
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.5;
}
.home-v2-hero-refined .home-v2-hero-actions {
    margin-top: 19px;
}
.home-v2-hero-status {
    display: none;
}
.home-v2-scroll-cue {
    bottom: 16px;
}
.home-v2-network-section {
    margin-top: -18px;
}
@media (max-height: 780px) and (min-width: 761px) {
    .home-v2-hero.home-v2-hero-refined {
        min-height: 720px;
        padding-top: 86px;
        padding-bottom: 26px;
    }
    .home-v2-hero-refined .home-v2-logo {
        width: min(470px, 70vw);
    }
    .home-v2-hero-refined h1 {
        font-size: clamp(40px, 4.9vw, 66px);
    }
    .home-v2-hero-refined .lead {
        margin-top: 12px;
    }
    .home-v2-hero-refined .home-v2-hero-actions {
        margin-top: 15px;
    }
}
@media (max-width: 760px) {
    .home-v2-hero.home-v2-hero-refined {
        min-height: 670px;
        padding: 96px 0 44px;
    }
    .home-v2-hero-refined .eyebrow {
        margin-bottom: 0;
        font-size: 9px;
    }
    .home-v2-hero-refined .home-v2-logo {
        width: min(405px, 94vw);
        margin: 0 auto 1px;
    }
    .home-v2-hero-refined h1 {
        font-size: clamp(37px, 11.2vw, 57px);
        line-height: .97;
    }
    .home-v2-hero-refined .lead {
        margin-top: 13px;
        line-height: 1.46;
    }
    .home-v2-hero-refined .home-v2-hero-actions {
        margin-top: 17px;
    }
    .home-v2-network-section {
        margin-top: -6px;
    }
}


/* Home refinement R4E — remove the duplicated live-network scroll cue */
.home-v2-hero-refined .home-v2-scroll-cue {
    display: none !important;
}

/* R5 — Competitive Hub, Destruction Derby and Touge dedicated pages */
.compete-hub-hero,
.mode-detail-hero {
    position: relative;
    width: min(var(--max), calc(100% - 40px));
    min-height: 560px;
    padding-top: 150px;
    padding-bottom: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr);
    align-items: end;
    gap: 64px;
}
.compete-hub-hero::before,
.mode-detail-hero::before {
    content: "";
    position: absolute;
    inset: 86px -120px 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 55%, rgba(var(--scene-accent), .16), transparent 28%),
        linear-gradient(90deg, rgba(3,6,10,.12), rgba(3,6,10,.72) 72%);
    mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}
.compete-hub-hero-copy h1,
.mode-detail-copy h1 {
    margin: 12px 0 18px;
    font-size: clamp(64px, 9vw, 118px);
    line-height: .86;
    letter-spacing: -.075em;
    text-transform: uppercase;
}
.compete-hub-hero-copy .lead,
.mode-detail-copy .lead {
    max-width: 720px;
    margin: 0;
    font-size: clamp(18px, 2vw, 23px);
}
.compete-hub-snapshot,
.mode-detail-stats {
    border: 1px solid rgba(var(--scene-accent), .24);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(10,17,25,.94), rgba(5,9,14,.84));
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(22px);
}
.compete-hub-snapshot { padding: 24px; }
.compete-hub-live {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.compete-hub-metrics,
.mode-detail-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
}
.compete-hub-metrics article,
.mode-detail-stats article {
    min-width: 0;
    padding: 18px;
    border-top: 1px solid rgba(137,174,200,.11);
    border-left: 1px solid rgba(137,174,200,.11);
}
.compete-hub-metrics article:nth-child(-n+2),
.mode-detail-stats article:nth-child(-n+2) { border-top: 0; }
.compete-hub-metrics article:nth-child(odd),
.mode-detail-stats article:nth-child(odd) { border-left: 0; }
.compete-hub-metrics small,
.mode-detail-stats small {
    display: block;
    margin-bottom: 8px;
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.compete-hub-metrics strong,
.mode-detail-stats strong {
    display: block;
    overflow: hidden;
    color: #f3f8fb;
    font-size: clamp(19px, 2vw, 28px);
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mode-detail-stats { overflow: hidden; }

.compete-flagships {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 24px;
    padding-top: 44px;
}
.compete-flagship {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 36px;
    border: 1px solid rgba(137,174,200,.20);
    border-radius: 28px;
    background: rgba(7,12,18,.88);
    box-shadow: var(--shadow);
}
.compete-flagship::before,
.compete-flagship::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.compete-flagship::before {
    inset: 0;
    opacity: .78;
    background:
        radial-gradient(circle at 74% 18%, rgba(var(--card-accent), .23), transparent 30%),
        linear-gradient(145deg, rgba(var(--card-accent), .10), transparent 50%);
}
.compete-flagship::after {
    right: -70px;
    bottom: -90px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(var(--card-accent), .20);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(var(--card-accent), .035), 0 0 0 74px rgba(var(--card-accent), .022);
}
.compete-flagship-dd { --card-accent: 255, 59, 77; }
.compete-flagship-touge { --card-accent: 255, 176, 32; }
.compete-flagship-content,
.compete-live-number { position: relative; z-index: 1; }
.compete-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgb(var(--card-accent, var(--scene-accent)));
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.compete-kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.compete-flagship h2 {
    margin: 18px 0 15px;
    font-size: clamp(42px, 5vw, 72px);
    line-height: .92;
    letter-spacing: -.06em;
}
.compete-flagship p { max-width: 590px; color: #b8c4cf; font-size: 17px; }
.compete-mode-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.compete-mode-pills span {
    padding: 8px 11px;
    border: 1px solid rgba(var(--card-accent), .24);
    border-radius: 999px;
    color: #d8e1e8;
    background: rgba(var(--card-accent), .06);
    font-size: 11px;
    font-weight: 800;
}
.compete-flagship-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn-touge {
    border-color: rgba(255,176,32,.50);
    color: #151005;
    background: linear-gradient(135deg, #ffb020, #ffcf66);
    box-shadow: 0 14px 38px rgba(255,176,32,.16);
}
.btn-touge:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(255,176,32,.25); }
.compete-live-number {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 26px;
    border-top: 1px solid rgba(137,174,200,.13);
}
.compete-live-number strong { color: rgb(var(--card-accent)); font-size: 46px; line-height: 1; }
.compete-live-number span { max-width: 130px; color: var(--muted); font-size: 12px; }

.compete-secondary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
    padding-top: 20px;
}
.compete-secondary-card {
    position: relative;
    min-height: 270px;
    padding: 27px;
    overflow: hidden;
    border: 1px solid rgba(137,174,200,.18);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(12,19,28,.88), rgba(6,10,16,.88));
}
.compete-secondary-card > span {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border: 1px solid rgba(var(--scene-accent), .30);
    border-radius: 14px;
    color: rgb(var(--scene-accent));
    background: rgba(var(--scene-accent), .08);
    font-weight: 900;
}
.compete-secondary-card h3 { margin: 24px 0 10px; font-size: 28px; }
.compete-secondary-card p { color: var(--muted); }
.compete-secondary-card a { position: absolute; left: 27px; bottom: 25px; color: rgb(var(--scene-accent)); font-weight: 900; }
.compete-race-card { --scene-accent: 32,217,255; }
.compete-dm-card { --scene-accent: 255,59,77; }
.compete-garage-card { --scene-accent: 40,226,140; }

.compete-live-section { padding-top: 54px; }
.compete-live-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}
.compete-arena-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 22px;
    border: 1px solid rgba(137,174,200,.14);
    border-radius: 18px;
    background: rgba(7,12,18,.78);
}
.compete-arena-card span { color: rgb(var(--scene-accent)); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.compete-arena-card h3 { margin: 5px 0 3px; font-size: 20px; }
.compete-arena-card p { margin: 0; color: var(--muted-2); font-size: 12px; }
.compete-arena-count { min-width: 70px; text-align: right; }
.compete-arena-count strong { display: block; color: var(--green); font-size: 28px; }
.compete-arena-count small { color: var(--muted-2); font-size: 9px; text-transform: uppercase; }

.compete-connected-panel {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 38px;
    padding: 40px;
    border: 1px solid rgba(var(--scene-accent), .20);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(var(--scene-accent), .07), rgba(7,12,18,.90) 42%);
}
.compete-connected-copy h2 { margin: 13px 0; font-size: clamp(38px, 4.5vw, 62px); line-height: .95; }
.compete-connected-copy p { color: var(--muted); }
.compete-connected-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.compete-connected-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.compete-connected-steps article,
.mode-flow-grid article {
    padding: 24px;
    border: 1px solid rgba(137,174,200,.14);
    border-radius: 20px;
    background: rgba(4,8,13,.55);
}
.compete-connected-steps span,
.mode-flow-grid span { color: rgb(var(--scene-accent)); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.compete-connected-steps h3,
.mode-flow-grid h3 { margin: 32px 0 9px; font-size: 21px; }
.compete-connected-steps p,
.mode-flow-grid p { margin: 0; color: var(--muted); font-size: 14px; }

.mode-detail-hero-dd::before { background: radial-gradient(circle at 24% 55%, rgba(255,59,77,.20), transparent 28%), linear-gradient(90deg, rgba(3,6,10,.10), rgba(3,6,10,.74) 72%); }
.mode-detail-hero-touge::before { background: radial-gradient(circle at 24% 55%, rgba(255,176,32,.17), transparent 28%), linear-gradient(90deg, rgba(3,6,10,.10), rgba(3,6,10,.74) 72%); }
.mode-detail-section { padding-top: 36px; }
.dd-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}
.dd-mode-card {
    padding: 28px;
    border: 1px solid rgba(255,59,77,.20);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,59,77,.055), rgba(7,12,18,.88) 42%);
}
.dd-mode-card-top { display: flex; align-items: center; justify-content: space-between; }
.dd-mode-card-top span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(255,59,77,.30);
    border-radius: 14px;
    color: var(--red);
    background: rgba(255,59,77,.08);
    font-weight: 900;
}
.dd-mode-card-top strong { color: var(--green); font-size: 30px; }
.dd-mode-card h3 { margin: 22px 0 9px; font-size: 32px; }
.dd-mode-card > p { min-height: 72px; color: var(--muted); }
.dd-mode-card dl { margin: 24px 0 0; border-top: 1px solid rgba(137,174,200,.12); }
.dd-mode-card dl div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(137,174,200,.09); }
.dd-mode-card dt { color: var(--muted-2); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.dd-mode-card dd { margin: 0; overflow: hidden; color: #dce5eb; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.mode-flow-panel {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 32px;
    padding: 38px;
    border: 1px solid rgba(var(--scene-accent), .18);
    border-radius: 28px;
    background: rgba(7,12,18,.82);
}
.mode-flow-copy h2 { margin: 13px 0; font-size: clamp(38px, 4.5vw, 58px); line-height: .96; }
.mode-flow-copy p { color: var(--muted); }
.mode-flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.dd-clanwar-panel,
.touge-records-panel,
.mode-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 38px 42px;
    border-radius: 28px;
}
.dd-clanwar-panel {
    border: 1px solid rgba(255,59,77,.24);
    background: linear-gradient(120deg, rgba(255,59,77,.13), rgba(6,10,16,.90) 58%);
}
.dd-clanwar-panel > div,
.touge-records-panel > div,
.mode-final-cta > div { max-width: 780px; }
.dd-clanwar-panel h2,
.touge-records-panel h2,
.mode-final-cta h2 { margin: 12px 0; font-size: clamp(34px, 4vw, 56px); line-height: .97; }
.dd-clanwar-panel p,
.touge-records-panel p,
.mode-final-cta p { margin: 0; color: var(--muted); }
.mode-ranking-panel {
    padding: 32px;
    border: 1px solid rgba(137,174,200,.16);
    border-radius: 26px;
    background: rgba(7,12,18,.82);
}
.mode-ranking-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; }
.mode-ranking-head h2 { margin: 10px 0; font-size: 42px; }
.mode-ranking-head p { max-width: 780px; margin: 0; color: var(--muted); }
.mode-ranking-list { display: grid; gap: 9px; margin-top: 24px; }
.mode-ranking-list article {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) 110px 110px;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid rgba(137,174,200,.11);
    border-radius: 15px;
    background: rgba(3,7,11,.52);
}
.mode-ranking-list article > span { color: var(--red); font-size: 24px; font-weight: 900; }
.mode-ranking-list div strong { display: block; }
.mode-ranking-list div small { color: var(--muted-2); font-size: 10px; text-transform: uppercase; }
.mode-empty-state { margin-top: 24px; padding: 26px; border: 1px dashed rgba(137,174,200,.20); border-radius: 16px; color: var(--muted); text-align: center; }
.mode-final-cta { border: 1px solid rgba(var(--scene-accent), .24); background: linear-gradient(120deg, rgba(var(--scene-accent), .12), rgba(6,10,16,.90) 58%); }
.mode-final-cta-dd { --scene-accent: 255,59,77; }
.mode-final-cta-touge { --scene-accent: 255,176,32; }

.touge-map-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.touge-map-card {
    display: grid;
    grid-template-columns: 54px minmax(0,1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 128px;
    padding: 20px;
    border: 1px solid rgba(255,176,32,.14);
    border-radius: 20px;
    background: rgba(7,12,18,.80);
}
.touge-map-card.is-live { border-color: rgba(255,176,32,.38); background: linear-gradient(110deg, rgba(255,176,32,.10), rgba(7,12,18,.88) 46%); }
.touge-map-index { display: grid; height: 50px; place-items: center; border-right: 1px solid rgba(137,174,200,.12); color: var(--yellow); font-weight: 900; }
.touge-map-card span { color: var(--muted-2); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.touge-map-card h3 { margin: 4px 0; font-size: 24px; }
.touge-map-card p { margin: 0; color: var(--muted); font-size: 12px; }
.touge-map-card > strong { color: var(--green); font-size: 32px; }
.touge-system-panel {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 32px;
    padding: 38px;
    border: 1px solid rgba(255,176,32,.20);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255,176,32,.07), rgba(7,12,18,.88) 38%);
}
.touge-system-copy h2 { margin: 13px 0; font-size: clamp(38px, 4.5vw, 58px); line-height: .96; }
.touge-system-copy p { color: var(--muted); }
.touge-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.touge-feature-grid article { padding: 22px; border: 1px solid rgba(255,176,32,.13); border-radius: 18px; background: rgba(4,8,13,.55); }
.touge-feature-grid span { color: var(--yellow); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.touge-feature-grid h3 { margin: 27px 0 8px; font-size: 21px; }
.touge-feature-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.mode-flow-panel-touge { --scene-accent: 255,176,32; }
.touge-records-panel { border: 1px solid rgba(255,176,32,.22); background: linear-gradient(120deg, rgba(255,176,32,.10), rgba(6,10,16,.90) 58%); }
.touge-records-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1050px) {
    .compete-hub-hero,
    .mode-detail-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 138px; gap: 34px; }
    .compete-flagships { grid-template-columns: 1fr; }
    .compete-secondary-grid { grid-template-columns: 1fr 1fr; }
    .compete-secondary-card:last-child { grid-column: 1 / -1; }
    .compete-connected-panel,
    .mode-flow-panel,
    .touge-system-panel { grid-template-columns: 1fr; }
    .compete-connected-steps,
    .mode-flow-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 760px) {
    .compete-hub-hero,
    .mode-detail-hero { width: min(100% - 28px, var(--max)); padding-top: 112px; padding-bottom: 38px; }
    .compete-hub-hero-copy h1,
    .mode-detail-copy h1 { font-size: clamp(52px, 18vw, 78px); }
    .compete-hub-hero-copy .lead,
    .mode-detail-copy .lead { font-size: 16px; }
    .compete-hub-metrics,
    .mode-detail-stats { grid-template-columns: 1fr; }
    .compete-hub-metrics article,
    .mode-detail-stats article { border-left: 0; border-top: 1px solid rgba(137,174,200,.11) !important; }
    .compete-hub-metrics article:first-child,
    .mode-detail-stats article:first-child { border-top: 0 !important; }
    .compete-flagships,
    .compete-secondary-grid,
    .compete-live-grid,
    .dd-mode-grid,
    .touge-map-grid { grid-template-columns: 1fr; }
    .compete-flagship { min-height: 500px; padding: 25px; }
    .compete-flagship h2 { font-size: 47px; }
    .compete-secondary-card:last-child { grid-column: auto; }
    .compete-connected-panel,
    .mode-flow-panel,
    .touge-system-panel { padding: 24px; }
    .compete-connected-steps,
    .mode-flow-grid,
    .touge-feature-grid { grid-template-columns: 1fr; }
    .dd-clanwar-panel,
    .touge-records-panel,
    .mode-final-cta { align-items: flex-start; flex-direction: column; padding: 27px; }
    .mode-ranking-head { align-items: flex-start; flex-direction: column; }
    .mode-ranking-list article { grid-template-columns: 38px minmax(0,1fr); }
    .mode-ranking-list article > div:nth-last-child(-n+2) { display: none; }
    .touge-map-card { grid-template-columns: 44px minmax(0,1fr) auto; padding: 16px; }
}

/* R5 mobile title fit */
@media (max-width: 760px) {
    .mode-detail-hero-dd .mode-detail-copy h1 {
        font-size: clamp(46px, 13.4vw, 60px);
        letter-spacing: -.07em;
    }
}

/* R6 — Race, Deathmatch and Garage dedicated experiences */
body[data-scene="dm"] { --scene-accent: 255, 59, 77; --scene-secondary: 132, 104, 255; }

.scene-bg-layer[data-scene-layer="dm"]::before {
    background:
        radial-gradient(circle at 18% 25%, rgba(255,59,77,.17), transparent 21%),
        radial-gradient(circle at 82% 22%, rgba(132,104,255,.14), transparent 23%),
        linear-gradient(135deg, rgba(255,59,77,.07), transparent 30%, transparent 68%, rgba(132,104,255,.07));
}
.scene-bg-layer[data-scene-layer="dm"]::after {
    background:
        repeating-linear-gradient(125deg, transparent 0 92px, rgba(255,255,255,.018) 92px 94px, transparent 94px 184px),
        radial-gradient(ellipse at 50% 100%, rgba(255,59,77,.08), transparent 42%);
}

.mode-detail-hero-race::before {
    background:
        radial-gradient(circle at 25% 52%, rgba(32,217,255,.20), transparent 28%),
        linear-gradient(90deg, rgba(3,6,10,.12), rgba(3,6,10,.76) 72%);
}
.mode-detail-hero-dm::before {
    background:
        radial-gradient(circle at 25% 52%, rgba(255,59,77,.20), transparent 28%),
        linear-gradient(90deg, rgba(3,6,10,.12), rgba(3,6,10,.76) 72%);
}
.mode-detail-hero-garage::before {
    background:
        radial-gradient(circle at 25% 52%, rgba(40,226,140,.17), transparent 28%),
        linear-gradient(90deg, rgba(3,6,10,.12), rgba(3,6,10,.76) 72%);
}
.mode-flow-panel-race { --scene-accent: 32,217,255; }
.mode-final-cta-race { --scene-accent: 32,217,255; }
.mode-final-cta-dm { --scene-accent: 255,59,77; }
.mode-final-cta-garage { --scene-accent: 40,226,140; }

.experience-live-strip {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    align-items: center;
    gap: 34px;
    padding: 32px 36px;
    border: 1px solid rgba(var(--scene-accent), .22);
    border-radius: 26px;
    background: linear-gradient(120deg, rgba(var(--scene-accent), .10), rgba(7,12,18,.92) 48%);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.035);
}
.experience-live-strip h2 { margin: 12px 0 7px; font-size: clamp(34px, 4vw, 54px); line-height: .96; }
.experience-live-strip p { margin: 0; color: var(--muted); }
.experience-live-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    overflow: hidden;
    border: 1px solid rgba(137,174,200,.12);
    border-radius: 18px;
    background: rgba(3,7,12,.48);
}
.experience-live-values article { min-width: 0; padding: 20px; border-left: 1px solid rgba(137,174,200,.11); }
.experience-live-values article:first-child { border-left: 0; }
.experience-live-values small { display: block; margin-bottom: 9px; color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.experience-live-values strong { display: block; overflow: hidden; color: #f2f7fa; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }

.experience-feature-section { padding-top: 50px; }
.experience-feature-grid {
    display: grid;
    gap: 14px;
}
.experience-feature-grid-four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.experience-feature-grid article,
.garage-category-grid article {
    position: relative;
    min-height: 260px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(var(--scene-accent), .15);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(var(--scene-accent), .055), rgba(7,12,18,.87) 44%);
}
.experience-feature-grid article::after,
.garage-category-grid article::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -86px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(var(--scene-accent), .14);
    border-radius: 50%;
}
.experience-feature-grid span,
.garage-category-grid span { color: rgb(var(--scene-accent)); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.experience-feature-grid h3,
.garage-category-grid h3 { margin: 72px 0 10px; font-size: 25px; }
.experience-feature-grid p,
.garage-category-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.experience-feature-grid-dm { --scene-accent: 255,59,77; }

.experience-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
    padding-top: 38px;
}
.experience-data-panel,
.experience-future-panel {
    min-width: 0;
    padding: 30px;
    border: 1px solid rgba(137,174,200,.17);
    border-radius: 24px;
    background: rgba(7,12,18,.84);
}
.experience-list { display: grid; gap: 9px; margin-top: 22px; }
.experience-list > article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 17px;
    border: 1px solid rgba(137,174,200,.11);
    border-radius: 14px;
    background: rgba(3,7,11,.48);
}
.experience-list strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.experience-list small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 10px; }
.experience-list > article > span { color: rgb(var(--scene-accent)); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.experience-future-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-color: rgba(255,59,77,.22);
    background: linear-gradient(140deg, rgba(255,59,77,.10), rgba(7,12,18,.90) 52%);
}
.experience-future-panel > span { color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.experience-future-panel h2 { margin: 18px 0 12px; font-size: clamp(38px, 4.6vw, 60px); line-height: .95; }
.experience-future-panel p { color: var(--muted); }

.dm-arena-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}
.dm-arena-card {
    min-width: 0;
    padding: 30px;
    border: 1px solid rgba(255,59,77,.20);
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(255,59,77,.07), rgba(7,12,18,.88) 42%);
}
.dm-arena-card.is-oldschool { border-color: rgba(132,104,255,.22); background: linear-gradient(145deg, rgba(132,104,255,.08), rgba(7,12,18,.88) 42%); }
.dm-arena-card-head { display: flex; align-items: center; justify-content: space-between; }
.dm-arena-card-head span { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255,59,77,.30); border-radius: 14px; color: var(--red); background: rgba(255,59,77,.08); font-weight: 900; }
.dm-arena-card.is-oldschool .dm-arena-card-head span { border-color: rgba(132,104,255,.32); color: var(--purple); background: rgba(132,104,255,.09); }
.dm-arena-card-head strong { color: var(--green); font-size: 34px; }
.dm-arena-card h3 { margin: 23px 0 9px; font-size: 34px; }
.dm-arena-card > p { min-height: 64px; color: var(--muted); }
.dm-arena-card dl { margin: 24px 0 0; border-top: 1px solid rgba(137,174,200,.11); }
.dm-arena-card dl div { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(137,174,200,.09); }
.dm-arena-card dt { color: var(--muted-2); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.dm-arena-card dd { margin: 0; overflow: hidden; color: #dce5eb; text-overflow: ellipsis; white-space: nowrap; }

.garage-profile-card {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--garage-accent), transparent 58%);
    border-radius: 26px;
    background: rgba(7,12,18,.91);
    box-shadow: var(--shadow);
}
.garage-profile-banner { height: 150px; background-position: center; background-size: cover; }
.garage-profile-identity { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 18px; align-items: center; padding: 0 28px 24px; margin-top: -39px; }
.garage-profile-identity img { width: 88px; height: 88px; border: 4px solid rgba(7,12,18,.95); border-radius: 25px; object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--garage-accent), transparent 52%); }
.garage-profile-identity small { color: var(--garage-accent); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.garage-profile-identity h2 { margin: 5px 0 4px; font-size: 30px; }
.garage-profile-identity p { margin: 0; color: var(--muted); font-size: 13px; }
.garage-profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid rgba(137,174,200,.12); border-bottom: 1px solid rgba(137,174,200,.12); }
.garage-profile-stats article { min-width: 0; padding: 17px 20px; border-left: 1px solid rgba(137,174,200,.10); }
.garage-profile-stats article:first-child { border-left: 0; }
.garage-profile-stats small { display: block; color: var(--muted-2); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.garage-profile-stats strong { display: block; overflow: hidden; margin-top: 6px; color: #edf6f2; text-overflow: ellipsis; white-space: nowrap; }
.garage-profile-card > a { display: block; padding: 17px 28px; color: var(--garage-accent); font-weight: 900; }

.garage-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; --scene-accent: 40,226,140; }
.garage-car-section { padding-top: 40px; }
.garage-car-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.garage-car-grid article {
    min-height: 190px;
    padding: 22px;
    border: 1px solid rgba(40,226,140,.14);
    border-radius: 19px;
    background:
        radial-gradient(circle at 72% 25%, rgba(40,226,140,.09), transparent 32%),
        rgba(7,12,18,.82);
}
.garage-car-grid span { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.garage-car-grid h3 { margin: 80px 0 4px; font-size: 24px; }
.garage-car-grid small { color: var(--muted-2); font-size: 9px; letter-spacing: .12em; }

.garage-showroom-panel {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 32px;
    padding: 38px;
    border: 1px solid rgba(40,226,140,.20);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(40,226,140,.08), rgba(7,12,18,.90) 42%);
}
.garage-showroom-copy h2 { margin: 13px 0; font-size: clamp(38px, 4.6vw, 60px); line-height: .95; }
.garage-showroom-copy p { color: var(--muted); }
.garage-showroom-roadmap { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.garage-showroom-roadmap article { padding: 23px; border: 1px solid rgba(40,226,140,.13); border-radius: 18px; background: rgba(4,8,13,.56); }
.garage-showroom-roadmap span { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.garage-showroom-roadmap h3 { margin: 30px 0 8px; font-size: 21px; }
.garage-showroom-roadmap p { margin: 0; color: var(--muted); font-size: 13px; }

@media (max-width: 1050px) {
    .experience-feature-grid-four,
    .garage-category-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .garage-car-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .garage-showroom-panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .experience-live-strip,
    .experience-data-grid,
    .dm-arena-grid { grid-template-columns: 1fr; }
    .experience-live-strip { padding: 25px; }
    .experience-live-values { grid-template-columns: 1fr; }
    .experience-live-values article { border-left: 0; border-top: 1px solid rgba(137,174,200,.11); }
    .experience-live-values article:first-child { border-top: 0; }
    .experience-feature-grid-four,
    .garage-category-grid,
    .garage-car-grid,
    .garage-showroom-roadmap { grid-template-columns: 1fr; }
    .experience-feature-grid article,
    .garage-category-grid article { min-height: 225px; }
    .experience-feature-grid h3,
    .garage-category-grid h3 { margin-top: 50px; }
    .garage-profile-identity { grid-template-columns: 72px minmax(0,1fr); padding: 0 20px 22px; }
    .garage-profile-identity img { width: 72px; height: 72px; border-radius: 20px; }
    .garage-profile-stats { grid-template-columns: 1fr; }
    .garage-profile-stats article { border-left: 0; border-top: 1px solid rgba(137,174,200,.10); }
    .garage-profile-stats article:first-child { border-top: 0; }
    .garage-showroom-panel { padding: 25px; }
    .garage-car-grid article { min-height: 160px; }
    .garage-car-grid h3 { margin-top: 55px; }
}

/* R7 — Journey and player dashboard */
.btn-account.active {
    border-color: rgba(var(--scene-accent), .48);
    color: #fff;
    background: rgba(var(--scene-accent), .10);
    box-shadow: inset 0 0 0 1px rgba(var(--scene-accent), .06);
}
.profile-identity-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.dashboard-hero {
    position: relative;
    min-height: 540px;
    margin-top: 34px;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--dashboard-accent), transparent 65%);
    border-radius: 30px;
    background: #070c12;
    box-shadow: var(--shadow);
}
.dashboard-banner {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    filter: saturate(.78) contrast(1.1);
}
.dashboard-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 12%, rgba(4,8,13,.18) 48%, rgba(4,8,13,.96) 84%);
}
.dashboard-identity {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 132px minmax(0,1fr);
    gap: 28px;
    align-items: end;
    min-height: 390px;
    padding: 76px 48px 38px;
}
.dashboard-identity > img {
    width: 132px;
    height: 132px;
    object-fit: cover;
    border: 5px solid rgba(5,10,16,.92);
    border-radius: 32px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dashboard-accent), transparent 45%), 0 20px 50px rgba(0,0,0,.38);
}
.dashboard-identity .eyebrow { color: var(--dashboard-accent); }
.dashboard-identity h1 {
    max-width: 850px;
    margin: 10px 0 10px;
    font-size: clamp(42px, 5vw, 72px);
    line-height: .95;
    letter-spacing: -.055em;
}
.dashboard-identity h1 span { color: var(--dashboard-accent); }
.dashboard-identity p { max-width: 820px; margin: 0; color: #bec9d1; }
.dashboard-identity .hero-actions { margin: 24px 0 0; }
.dashboard-stat-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.35fr repeat(5, minmax(0,1fr));
    border-top: 1px solid rgba(137,174,200,.14);
    background: rgba(4,8,13,.82);
    backdrop-filter: blur(16px);
}
.dashboard-stat-row article { min-width: 0; padding: 21px 22px; border-left: 1px solid rgba(137,174,200,.11); }
.dashboard-stat-row article:first-child { border-left: 0; }
.dashboard-stat-row small { display: block; color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.dashboard-stat-row strong { display: block; overflow: hidden; margin-top: 7px; color: #f1f6f9; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
    gap: 20px;
    padding-top: 38px;
}
.dashboard-panel {
    min-width: 0;
    padding: 30px;
    border: 1px solid rgba(137,174,200,.17);
    border-radius: 25px;
    background: rgba(7,12,18,.88);
    box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.dashboard-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.dashboard-panel-head > div > span,
.dashboard-panel-title > span { color: rgb(var(--scene-accent)); font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.dashboard-panel-head h2 { margin: 9px 0 8px; font-size: 34px; }
.dashboard-panel-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 13px; }
.dashboard-panel-head > strong { color: rgb(var(--scene-accent)); font-size: 42px; line-height: 1; }
.dashboard-progress,
.dashboard-objective-progress { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.dashboard-progress { margin: 24px 0; }
.dashboard-progress i,
.dashboard-objective-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--scene-accent)), var(--green)); box-shadow: 0 0 20px rgba(var(--scene-accent), .26); }
.dashboard-next-step {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 3px 18px;
    align-items: center;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(var(--scene-accent), .22);
    border-radius: 16px;
    background: rgba(var(--scene-accent), .07);
}
.dashboard-next-step small { color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.dashboard-next-step strong { grid-column: 1; color: #f3f8fb; }
.dashboard-next-step > span { grid-column: 2; grid-row: 1 / 3; color: rgb(var(--scene-accent)); font-size: 24px; }
.dashboard-step-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.dashboard-step {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    gap: 13px;
    align-items: center;
    padding: 15px;
    border: 1px solid rgba(137,174,200,.11);
    border-radius: 15px;
    background: rgba(3,7,11,.48);
}
.dashboard-step > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(var(--scene-accent), .24); border-radius: 12px; color: rgb(var(--scene-accent)); font-weight: 900; background: rgba(var(--scene-accent), .06); }
.dashboard-step strong { display: block; font-size: 14px; }
.dashboard-step small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 11px; line-height: 1.35; }
.dashboard-step.is-done { border-color: rgba(40,226,140,.19); background: rgba(40,226,140,.045); }
.dashboard-step.is-done > span { border-color: rgba(40,226,140,.30); color: var(--green); background: rgba(40,226,140,.08); }
.dashboard-side-stack { display: grid; gap: 20px; align-content: start; }
.dashboard-panel-title { display: flex; align-items: center; justify-content: space-between; }
.dashboard-network-state { display: block; margin: 17px 0 22px; font-size: 31px; }
.dashboard-network-grid { display: grid; gap: 9px; }
.dashboard-network-grid > div { padding: 14px 15px; border: 1px solid rgba(137,174,200,.10); border-radius: 13px; background: rgba(3,7,11,.46); }
.dashboard-network-grid small { display: block; color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-network-grid strong { display: block; overflow: hidden; margin-top: 5px; color: #eaf2f6; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-shortcuts { padding-bottom: 16px; }
.dashboard-shortcuts .dashboard-panel-title { margin-bottom: 12px; }
.dashboard-shortcuts > a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 2px; border-bottom: 1px solid rgba(137,174,200,.10); color: #dfe8ed; }
.dashboard-shortcuts > a:last-child { border-bottom: 0; }
.dashboard-shortcuts > a span { color: rgb(var(--scene-accent)); }

.dashboard-objective-section,
.dashboard-ranking-section { padding-top: 42px; }
.dashboard-objective-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.dashboard-objective {
    min-height: 245px;
    padding: 23px;
    border: 1px solid rgba(var(--scene-accent), .14);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(var(--scene-accent), .055), rgba(7,12,18,.87) 43%);
}
.dashboard-objective > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dashboard-objective > div:first-child span { color: rgb(var(--scene-accent)); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.dashboard-objective > div:first-child strong { font-size: 14px; }
.dashboard-objective h3 { margin: 54px 0 9px; font-size: 20px; }
.dashboard-objective p { min-height: 58px; margin: 0 0 20px; color: var(--muted); font-size: 12px; }
.dashboard-objective.is-done { border-color: rgba(40,226,140,.20); background: linear-gradient(145deg, rgba(40,226,140,.07), rgba(7,12,18,.87) 43%); }
.dashboard-objective.is-done > div:first-child span { color: var(--green); }
.dashboard-ranking-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.dashboard-ranking-grid > a { padding: 25px; border: 1px solid rgba(137,174,200,.15); border-radius: 20px; background: rgba(7,12,18,.84); }
.dashboard-ranking-grid small { color: var(--muted-2); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-ranking-grid strong { display: block; margin: 21px 0 5px; color: rgb(var(--scene-accent)); font-size: 42px; line-height: 1; }
.dashboard-ranking-grid span { color: var(--muted); font-size: 12px; }
.dashboard-activity-section { padding-top: 38px; }
.dashboard-match-list { display: grid; gap: 9px; }
.dashboard-match-list article { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid rgba(137,174,200,.10); border-radius: 14px; background: rgba(3,7,11,.46); }
.dashboard-match-list strong { display: block; }
.dashboard-match-list small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 11px; }
.dashboard-match-list article > div:last-child { text-align: right; }
.dashboard-match-list article > div:last-child span { color: rgb(var(--scene-accent)); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.journey-hero {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr);
    gap: 34px;
    align-items: center;
    min-height: 650px;
    padding-top: 72px;
    padding-bottom: 70px;
}
.journey-hero-copy h1 { max-width: 880px; margin: 16px 0 18px; font-size: clamp(54px, 7vw, 96px); line-height: .9; letter-spacing: -.065em; }
.journey-hero-copy .lead { max-width: 760px; }
.journey-connect-card { padding: 30px; border: 1px solid rgba(32,217,255,.22); border-radius: 25px; background: rgba(7,12,18,.88); box-shadow: var(--shadow); }
.journey-connect-card > p { color: var(--muted); }
.journey-path-section { padding-top: 40px; }
.journey-path-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.journey-path-grid article { min-height: 260px; padding: 23px; border: 1px solid rgba(32,217,255,.13); border-radius: 20px; background: linear-gradient(145deg, rgba(32,217,255,.05), rgba(7,12,18,.86) 43%); }
.journey-path-grid article > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(32,217,255,.28); border-radius: 13px; color: var(--cyan); font-weight: 900; background: rgba(32,217,255,.07); }
.journey-path-grid h3 { margin: 60px 0 10px; font-size: 21px; }
.journey-path-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.journey-choice-section { padding-top: 45px; }
.journey-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.journey-choice-grid > a { min-height: 280px; padding: 26px; border: 1px solid rgba(var(--scene-accent), .15); border-radius: 22px; background: radial-gradient(circle at 80% 14%, rgba(var(--scene-accent), .10), transparent 31%), rgba(7,12,18,.86); }
.journey-choice-grid > a > span { color: rgb(var(--scene-accent)); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.journey-choice-grid h3 { margin: 70px 0 10px; font-size: 31px; }
.journey-choice-grid p { min-height: 62px; color: var(--muted); font-size: 13px; }
.journey-choice-grid strong { color: rgb(var(--scene-accent)); }
.journey-account-bridge { display: flex; align-items: center; justify-content: space-between; gap: 34px; padding: 42px; border: 1px solid rgba(40,226,140,.20); border-radius: 27px; background: linear-gradient(135deg, rgba(40,226,140,.08), rgba(7,12,18,.90) 44%); }
.journey-account-bridge > div > span { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.journey-account-bridge h2 { margin: 12px 0 8px; font-size: clamp(36px, 4.5vw, 58px); line-height: .95; }
.journey-account-bridge p { max-width: 760px; margin: 0; color: var(--muted); }

@media (max-width: 1120px) {
    .dashboard-stat-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .dashboard-stat-row article:nth-child(4) { border-left: 0; }
    .dashboard-objective-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .journey-path-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .dashboard-main-grid,
    .journey-hero { grid-template-columns: 1fr; }
    .journey-hero { min-height: auto; }
    .dashboard-objective-grid,
    .dashboard-ranking-grid,
    .journey-choice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .dashboard-hero { margin-top: 18px; border-radius: 22px; }
    .dashboard-identity { grid-template-columns: 76px minmax(0,1fr); gap: 16px; min-height: 410px; padding: 62px 20px 28px; align-items: end; }
    .dashboard-identity > img { width: 76px; height: 76px; border-width: 3px; border-radius: 21px; }
    .dashboard-identity h1 { font-size: clamp(36px, 11vw, 52px); }
    .dashboard-identity p,
    .dashboard-identity .hero-actions { grid-column: 1 / -1; }
    .dashboard-stat-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dashboard-stat-row article:nth-child(odd) { border-left: 0; }
    .dashboard-stat-row article:nth-child(4) { border-left: 1px solid rgba(137,174,200,.11); }
    .dashboard-main-grid { padding-top: 24px; }
    .dashboard-panel { padding: 22px; border-radius: 20px; }
    .dashboard-panel-head { display: block; }
    .dashboard-panel-head > strong { display: block; margin-top: 15px; }
    .dashboard-step-list,
    .dashboard-objective-grid,
    .dashboard-ranking-grid,
    .journey-path-grid,
    .journey-choice-grid { grid-template-columns: 1fr; }
    .dashboard-match-list article { display: block; }
    .dashboard-match-list article > div:last-child { margin-top: 12px; text-align: left; }
    .journey-hero { padding-top: 58px; padding-bottom: 45px; }
    .journey-hero-copy h1 { font-size: clamp(48px, 15vw, 70px); }
    .journey-connect-card { padding: 22px; }
    .journey-account-bridge { display: block; padding: 27px; }
    .journey-account-bridge .btn { margin-top: 24px; }
    .profile-identity-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 700px) {
    .dashboard-identity {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 15px;
        min-height: 560px;
    }
    .dashboard-identity > img { margin-bottom: 2px; }
    .dashboard-identity > div { width: 100%; }
    .dashboard-identity p,
    .dashboard-identity .hero-actions { grid-column: auto; }
}

/* R8 — Events, missions and notifications */
.top-notifications {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(137,174,200,.16);
    border-radius: 13px;
    color: #aab8c2;
    background: rgba(5,10,16,.56);
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.top-notifications:hover,
.top-notifications.active,
.top-notifications.has-unread { border-color: rgba(var(--scene-accent), .38); color: rgb(var(--scene-accent)); background: rgba(var(--scene-accent), .06); }
.top-notifications svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.top-notifications i { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border: 2px solid #070b11; border-radius: 999px; color: #051017; background: var(--cyan); font-size: 9px; font-style: normal; font-weight: 900; }

.events-hero,
.missions-hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(360px,.72fr); gap: 38px; align-items: center; min-height: 620px; padding-top: 86px; padding-bottom: 62px; }
.events-hero-copy h1,
.missions-hero-copy h1 { max-width: 900px; margin: 15px 0 20px; font-size: clamp(54px, 7vw, 92px); line-height: .91; letter-spacing: -.064em; }
.events-hero-copy .lead,
.missions-hero-copy .lead { max-width: 790px; }
.events-feature-card,
.missions-summary-card { position: relative; overflow: hidden; padding: 30px; border: 1px solid rgba(var(--scene-accent), .21); border-radius: 25px; background: linear-gradient(150deg, rgba(var(--scene-accent), .07), rgba(6,11,17,.94) 44%); box-shadow: var(--shadow); }
.events-feature-card::before,
.mission-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--event-accent, var(--cyan)); }
.event-accent-red { --event-accent: var(--red); }
.event-accent-amber { --event-accent: var(--yellow); }
.event-accent-green { --event-accent: var(--green); }
.event-accent-purple { --event-accent: var(--purple); }
.event-accent-cyan { --event-accent: var(--cyan); }
.events-feature-card > div:first-child { display: flex; justify-content: space-between; gap: 20px; color: var(--event-accent, var(--cyan)); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.events-feature-card h2 { margin: 48px 0 12px; font-size: 38px; line-height: 1; }
.events-feature-card > p { color: var(--muted); }
.events-feature-card dl { display: grid; gap: 8px; margin: 27px 0; }
.events-feature-card dl div { padding: 12px 14px; border: 1px solid rgba(137,174,200,.10); border-radius: 12px; background: rgba(2,6,10,.44); }
.events-feature-card dt { color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.events-feature-card dd { margin: 3px 0 0; color: #e7eef2; font-size: 13px; }
.events-feature-card > a { color: var(--event-accent, var(--cyan)); font-weight: 900; }
.events-agenda-section { padding-top: 38px; }
.events-agenda-section .section-head > small { color: var(--muted-2); }
.events-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.event-card { position: relative; min-height: 330px; overflow: hidden; padding: 27px; border: 1px solid rgba(137,174,200,.13); border-radius: 22px; background: radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--event-accent, var(--cyan)) 12%, transparent), transparent 30%), rgba(7,12,18,.88); }
.event-card-top { display: flex; justify-content: space-between; gap: 18px; color: var(--event-accent, var(--cyan)); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.event-card h3 { margin: 54px 0 10px; font-size: 29px; }
.event-card > p { min-height: 62px; color: var(--muted); }
.event-card-meta { display: grid; gap: 5px; margin: 21px 0; color: var(--muted-2); font-size: 11px; }
.event-card > a { color: var(--event-accent, var(--cyan)); font-weight: 900; }
.events-flow-section { padding-top: 44px; }
.events-flow-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.events-flow-grid article { min-height: 245px; padding: 25px; border: 1px solid rgba(132,104,255,.14); border-radius: 20px; background: linear-gradient(145deg, rgba(132,104,255,.055), rgba(7,12,18,.87) 43%); }
.events-flow-grid article > span { display: grid; width: 41px; height: 41px; place-items: center; border: 1px solid rgba(132,104,255,.30); border-radius: 12px; color: var(--purple); font-weight: 900; background: rgba(132,104,255,.08); }
.events-flow-grid h3 { margin: 60px 0 9px; }
.events-flow-grid p { color: var(--muted); font-size: 13px; }
.events-notice { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 38px; border: 1px solid rgba(255,176,32,.18); border-radius: 25px; background: linear-gradient(135deg, rgba(255,176,32,.07), rgba(7,12,18,.90) 44%); }
.events-notice span { color: var(--yellow); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.events-notice h2 { max-width: 900px; margin: 12px 0 0; font-size: 25px; line-height: 1.25; }

.missions-summary-card { display: grid; gap: 22px; }
.missions-ring { --mission-progress: 0; width: 190px; height: 190px; margin: 0 auto; display: grid; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(circle at center, #081018 61%, transparent 62%), conic-gradient(rgb(var(--scene-accent)) calc(var(--mission-progress) * 1%), rgba(137,174,200,.12) 0); box-shadow: 0 0 45px rgba(var(--scene-accent), .11); }
.missions-ring strong { font-size: 43px; line-height: 1; }
.missions-ring span { margin-top: 7px; color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.missions-summary-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.missions-summary-stats div { padding: 16px; border: 1px solid rgba(137,174,200,.11); border-radius: 14px; background: rgba(3,7,11,.46); }
.missions-summary-stats small { display: block; color: var(--muted-2); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.missions-summary-stats strong { display: block; margin-top: 7px; font-size: 27px; }
.missions-summary-card > a { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 16px; border: 1px solid rgba(var(--scene-accent), .16); border-radius: 14px; background: rgba(var(--scene-accent), .045); }
.missions-summary-card > a small { color: rgb(var(--scene-accent)); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.missions-summary-card > a strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.missions-summary-card > a span { grid-column: 2; grid-row: 1 / 3; align-self: center; color: rgb(var(--scene-accent)); }
.missions-guest-section { padding-top: 0; }
.missions-guest-section article { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 25px 28px; border: 1px solid rgba(255,176,32,.18); border-radius: 19px; background: rgba(255,176,32,.045); }
.missions-guest-section span { color: var(--yellow); font-weight: 900; }
.missions-guest-section p { margin: 5px 0 0; color: var(--muted); }
.missions-board-section { padding-top: 35px; }
.mission-filters { display: flex; gap: 8px; margin-bottom: 40px; }
.mission-filters button { padding: 10px 15px; border: 1px solid rgba(137,174,200,.15); border-radius: 999px; color: var(--muted); background: rgba(7,12,18,.78); cursor: pointer; }
.mission-filters button.active { border-color: rgba(var(--scene-accent), .38); color: rgb(var(--scene-accent)); background: rgba(var(--scene-accent), .08); }
.mission-group + .mission-group { margin-top: 54px; }
.mission-group.is-empty { display: none; }
.mission-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.mission-card { --mission-accent: var(--cyan); --event-accent: var(--mission-accent); position: relative; min-height: 365px; overflow: hidden; padding: 25px; border: 1px solid color-mix(in srgb, var(--mission-accent) 20%, transparent); border-radius: 21px; background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--mission-accent) 11%, transparent), transparent 29%), rgba(7,12,18,.89); }
.mission-accent-red { --mission-accent: var(--red); }.mission-accent-amber,.mission-accent-gold { --mission-accent: var(--yellow); }.mission-accent-green { --mission-accent: var(--green); }.mission-accent-purple { --mission-accent: var(--purple); }.mission-accent-cyan { --mission-accent: var(--cyan); }
.mission-card.is-done { border-color: rgba(40,226,140,.24); }
.mission-card-top { display: flex; justify-content: space-between; gap: 18px; color: var(--mission-accent); font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.mission-card h3 { margin: 48px 0 9px; font-size: 25px; }
.mission-card > p { min-height: 55px; color: var(--muted); }
.mission-progress { height: 5px; overflow: hidden; margin: 22px 0; border-radius: 999px; background: rgba(137,174,200,.12); }
.mission-progress i { display: block; height: 100%; border-radius: inherit; background: var(--mission-accent); box-shadow: 0 0 20px color-mix(in srgb, var(--mission-accent) 50%, transparent); }
.mission-reward { min-height: 78px; padding: 13px 14px; border: 1px solid rgba(137,174,200,.10); border-radius: 13px; background: rgba(3,7,11,.46); }
.mission-reward small { display: block; color: var(--muted-2); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mission-reward strong { display: block; margin: 5px 0; font-size: 12px; }
.mission-reward span { color: var(--muted-2); font-size: 9px; }
.mission-card > a { display: block; margin-top: 18px; color: var(--mission-accent); font-weight: 900; }
.missions-notice-section article { padding: 36px; border: 1px solid rgba(255,59,77,.17); border-radius: 24px; background: linear-gradient(135deg, rgba(255,59,77,.06), rgba(7,12,18,.91) 44%); }
.missions-notice-section span { color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.missions-notice-section h2 { max-width: 1050px; margin: 12px 0 0; font-size: 26px; line-height: 1.25; }

.notifications-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-top: 110px; padding-bottom: 38px; }
.notifications-hero h1 { max-width: 900px; margin: 15px 0; font-size: clamp(52px,7vw,88px); line-height: .92; letter-spacing: -.062em; }
.notifications-hero .lead { max-width: 790px; }
.notifications-list-section { padding-top: 20px; }
.notification-list { display: grid; gap: 11px; }
.notification-item { position: relative; display: grid; grid-template-columns: 12px minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 22px 24px; border: 1px solid rgba(137,174,200,.13); border-radius: 18px; background: rgba(7,12,18,.88); transition: opacity .18s ease, border-color .18s ease, transform .18s ease; }
.notification-item:hover { transform: translateY(-2px); border-color: rgba(var(--scene-accent), .28); }
.notification-indicator { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px rgba(32,217,255,.6); }
.notification-type-warning .notification-indicator { background: var(--red); }.notification-type-mission .notification-indicator { background: var(--yellow); }.notification-type-event .notification-indicator { background: var(--purple); }.notification-type-security .notification-indicator { background: var(--green); }
.notification-item small { color: rgb(var(--scene-accent)); font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.notification-item h2 { margin: 4px 0; font-size: 20px; }
.notification-item p { margin: 0; color: var(--muted); font-size: 13px; }
.notification-item > strong { color: rgb(var(--scene-accent)); white-space: nowrap; }
.notification-item.is-read { opacity: .52; }
.notification-item.is-read .notification-indicator { background: var(--muted-2); box-shadow: none; }
.notifications-privacy-section article { padding: 25px 28px; border: 1px solid rgba(137,174,200,.11); border-radius: 18px; background: rgba(7,12,18,.73); }
.notifications-privacy-section span { color: var(--muted-2); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.notifications-privacy-section p { margin: 6px 0 0; color: var(--muted); }

.dashboard-evolution-section { padding-top: 40px; }
.dashboard-evolution-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.dashboard-evolution-grid > a { min-height: 260px; padding: 25px; border: 1px solid rgba(var(--scene-accent), .14); border-radius: 20px; background: radial-gradient(circle at 82% 14%, rgba(var(--scene-accent), .08), transparent 30%), rgba(7,12,18,.86); }
.dashboard-evolution-grid span { color: rgb(var(--scene-accent)); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.dashboard-evolution-grid h3 { margin: 68px 0 9px; font-size: 27px; }
.dashboard-evolution-grid p { min-height: 55px; color: var(--muted); }
.dashboard-evolution-grid strong { color: rgb(var(--scene-accent)); }

@media (max-width: 1120px) {
    .mission-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .events-flow-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .events-hero,.missions-hero { grid-template-columns: 1fr; min-height: auto; }
    .events-grid,.dashboard-evolution-grid { grid-template-columns: 1fr; }
    .top-notifications { order: 2; }
}
@media (max-width: 700px) {
    .events-hero,.missions-hero { padding-top: 58px; }
    .events-hero-copy h1,.missions-hero-copy h1 { font-size: clamp(48px,15vw,70px); }
    .events-grid,.mission-card-grid,.events-flow-grid { grid-template-columns: 1fr; }
    .events-notice,.missions-guest-section article,.notifications-hero { display: block; }
    .events-notice .btn,.missions-guest-section .btn,.notifications-hero .btn { margin-top: 22px; }
    .mission-filters { overflow-x: auto; padding-bottom: 5px; }
    .mission-filters button { white-space: nowrap; }
    .notification-item { grid-template-columns: 10px minmax(0,1fr); padding: 19px; }
    .notification-item > strong { grid-column: 2; margin-top: 5px; }
    .top-actions-v2 .top-notifications { width: 40px; height: 40px; flex-basis: 40px; }
}

/* R9 — Community Lite */
.community-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
    gap: 42px;
    align-items: end;
    padding-top: 116px;
    padding-bottom: 38px;
}
.community-hero-copy h1 {
    max-width: 950px;
    margin: 15px 0 18px;
    font-size: clamp(54px, 7.6vw, 98px);
    line-height: .9;
    letter-spacing: -.065em;
}
.community-hero-copy .lead { max-width: 790px; }
.community-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.community-stat-grid article {
    min-height: 126px;
    padding: 20px;
    border: 1px solid rgba(132, 104, 255, .17);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(132, 104, 255, .055), rgba(7, 12, 18, .87));
}
.community-stat-grid small {
    display: block;
    color: var(--muted-2);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.community-stat-grid strong {
    display: block;
    margin-top: 24px;
    color: var(--purple);
    font-size: 35px;
}
.community-flash-wrap { padding-top: 0; padding-bottom: 0; }
.community-flash {
    padding: 14px 18px;
    border: 1px solid rgba(32, 217, 255, .24);
    border-radius: 14px;
    background: rgba(32, 217, 255, .075);
    color: #dff8ff;
}
.community-flash.is-error { border-color: rgba(255, 59, 77, .28); background: rgba(255, 59, 77, .075); color: #ffdce1; }
.community-flash.is-success { border-color: rgba(40, 226, 140, .28); background: rgba(40, 226, 140, .075); color: #dcfff0; }
.community-category-section { padding-top: 28px; padding-bottom: 24px; }
.community-category-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 8px;
    scrollbar-width: thin;
}
.community-category-nav a {
    flex: 0 0 auto;
    padding: 10px 15px;
    border: 1px solid rgba(137, 174, 200, .14);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(7, 12, 18, .78);
    font-size: 12px;
    font-weight: 800;
}
.community-category-nav a.active,
.community-category-nav a:hover {
    border-color: color-mix(in srgb, var(--community-accent, var(--purple)) 44%, transparent);
    color: var(--community-accent, var(--purple));
    background: color-mix(in srgb, var(--community-accent, var(--purple)) 9%, rgba(7,12,18,.9));
}
.community-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, .5fr);
    gap: 28px;
    align-items: start;
    padding-top: 24px;
}
.community-feed-column { min-width: 0; }
.community-feed-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;
    margin-bottom: 20px;
}
.community-feed-head h2 { margin: 0 0 6px; font-size: 34px; }
.community-feed-head p { margin: 0; color: var(--muted); }
.community-filter-form {
    display: flex;
    gap: 8px;
    align-items: end;
}
.community-filter-form label { display: grid; gap: 5px; }
.community-filter-form label > span {
    color: var(--muted-2);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.community-filter-form input,
.community-filter-form select,
.community-composer input,
.community-composer select,
.community-composer textarea,
.community-comment-composer textarea,
.community-report-box textarea,
.community-comment-report input {
    width: 100%;
    border: 1px solid rgba(137, 174, 200, .15);
    border-radius: 12px;
    color: var(--text);
    background: rgba(3, 7, 11, .78);
    outline: none;
}
.community-filter-form input { width: 220px; padding: 10px 12px; }
.community-filter-form select { padding: 10px 32px 10px 12px; }
.community-filter-form input:focus,
.community-filter-form select:focus,
.community-composer input:focus,
.community-composer select:focus,
.community-composer textarea:focus,
.community-comment-composer textarea:focus,
.community-report-box textarea:focus,
.community-comment-report input:focus { border-color: rgba(132, 104, 255, .54); box-shadow: 0 0 0 3px rgba(132, 104, 255, .08); }
.community-feed-list { display: grid; gap: 13px; }
.community-feed-card {
    --community-accent: var(--purple);
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--community-accent) 19%, transparent);
    border-radius: 20px;
    background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--community-accent) 9%, transparent), transparent 28%), rgba(7, 12, 18, .89);
}
.community-feed-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--community-accent);
    opacity: .72;
}
.community-feed-card.is-pinned { border-color: color-mix(in srgb, var(--community-accent) 34%, transparent); }
.community-feed-card.is-hidden,
.community-post-main.is-hidden,
.community-comment.is-hidden { opacity: .55; border-style: dashed; }
.community-accent-cyan { --community-accent: var(--cyan); }
.community-accent-purple { --community-accent: var(--purple); }
.community-accent-red { --community-accent: var(--red); }
.community-accent-yellow,
.community-accent-amber { --community-accent: var(--yellow); }
.community-accent-green { --community-accent: var(--green); }
.community-author-row {
    display: flex;
    align-items: center;
    gap: 11px;
}
.community-author-row img {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border: 1px solid color-mix(in srgb, var(--community-accent, var(--purple)) 35%, transparent);
    border-radius: 12px;
    object-fit: cover;
    background: #071018;
}
.community-author-row > div { min-width: 0; }
.community-author-row strong,
.community-author-row small { display: block; }
.community-author-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.community-author-row small { margin-top: 2px; color: var(--muted-2); font-size: 10px; }
.community-category-badge {
    margin-left: auto;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--community-accent, var(--purple)) 27%, transparent);
    border-radius: 999px;
    color: var(--community-accent, var(--purple));
    background: color-mix(in srgb, var(--community-accent, var(--purple)) 7%, transparent);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.community-post-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; }
.community-post-flags span {
    padding: 5px 8px;
    border-radius: 7px;
    color: var(--community-accent, var(--purple));
    background: color-mix(in srgb, var(--community-accent, var(--purple)) 10%, transparent);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.community-feed-card h3 { margin: 15px 0 8px; font-size: 25px; line-height: 1.12; }
.community-feed-card h3 a:hover { color: var(--community-accent); }
.community-feed-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.community-feed-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(137, 174, 200, .09);
}
.community-feed-footer > div { display: flex; flex-wrap: wrap; gap: 11px; color: var(--muted-2); font-size: 11px; }
.community-feed-footer > a { color: var(--community-accent); font-size: 12px; font-weight: 900; }
.community-empty {
    padding: 45px 28px;
    border: 1px dashed rgba(137, 174, 200, .17);
    border-radius: 18px;
    text-align: center;
    background: rgba(7, 12, 18, .62);
}
.community-empty strong { font-size: 20px; }
.community-empty p { margin: 8px 0 0; color: var(--muted); }
.community-sidebar { position: sticky; top: 104px; display: grid; gap: 14px; }
.community-composer,
.community-login-card,
.community-rules-card,
.community-beta-card,
.community-comment-composer > form,
.community-comment-composer > article {
    padding: 23px;
    border: 1px solid rgba(132, 104, 255, .16);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(132,104,255,.045), rgba(7,12,18,.91) 38%);
}
.community-composer > span,
.community-login-card > span,
.community-rules-card > span,
.community-beta-card > span,
.community-comment-composer form > span {
    color: var(--purple);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.community-composer h2,
.community-login-card h2 { margin: 9px 0; font-size: 24px; }
.community-composer > p,
.community-rules-card > p,
.community-beta-card > p,
.community-login-card > p { color: var(--muted); font-size: 12px; }
.community-composer label { position: relative; display: grid; gap: 7px; margin-top: 14px; color: #dce4eb; font-size: 11px; font-weight: 800; }
.community-composer input,
.community-composer select { padding: 12px; }
.community-composer textarea,
.community-comment-composer textarea,
.community-report-box textarea { resize: vertical; padding: 12px; line-height: 1.55; }
.community-composer label small,
.community-comment-composer form > small { justify-self: end; color: var(--muted-2); font-size: 9px; }
.community-composer .btn { width: 100%; margin-top: 17px; }
.community-login-card .btn { margin-top: 13px; }
.community-rules-card ol { margin: 15px 0 0; padding-left: 19px; color: var(--muted); font-size: 12px; }
.community-rules-card li + li { margin-top: 9px; }
.community-beta-card { border-color: rgba(255, 176, 32, .15); background: linear-gradient(145deg, rgba(255,176,32,.045), rgba(7,12,18,.91) 38%); }
.community-beta-card > span { color: var(--yellow); }

.community-post-page { --community-accent: var(--purple); padding-top: 106px; padding-bottom: 30px; }
.community-back-link { display: inline-flex; margin-bottom: 18px; color: var(--muted); font-size: 12px; font-weight: 800; }
.community-back-link:hover { color: var(--community-accent); }
.community-post-page > .community-flash { margin-bottom: 14px; }
.community-post-main {
    padding: clamp(25px, 4vw, 48px);
    border: 1px solid color-mix(in srgb, var(--community-accent) 23%, transparent);
    border-radius: 25px;
    background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--community-accent) 10%, transparent), transparent 28%), rgba(7, 12, 18, .93);
    box-shadow: var(--shadow);
}
.community-author-row.is-large img { width: 50px; height: 50px; flex-basis: 50px; border-radius: 15px; }
.community-post-main h1 { max-width: 1050px; margin: 20px 0; font-size: clamp(38px, 5.5vw, 68px); line-height: .98; letter-spacing: -.052em; }
.community-post-content { max-width: 980px; color: #cbd5de; font-size: 16px; line-height: 1.83; overflow-wrap: anywhere; }
.community-post-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(137,174,200,.10); color: var(--muted-2); font-size: 10px; }
.community-reaction-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.community-reaction-bar > strong { margin-right: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.community-reaction-bar form { margin: 0; }
.community-reaction-bar button,
.community-reaction-bar > span {
    min-width: 58px;
    padding: 8px 10px;
    border: 1px solid rgba(137,174,200,.14);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(3,7,11,.58);
    text-align: center;
}
.community-reaction-bar button { cursor: pointer; }
.community-reaction-bar button:hover,
.community-reaction-bar button.active { border-color: color-mix(in srgb, var(--community-accent) 42%, transparent); color: var(--community-accent); background: color-mix(in srgb, var(--community-accent) 9%, transparent); }
.community-report-box { margin-top: 15px; }
.community-report-box summary,
.community-comment-report summary { color: var(--muted-2); font-size: 10px; cursor: pointer; }
.community-report-box form { display: grid; gap: 8px; max-width: 600px; margin-top: 10px; }
.community-report-box .btn { justify-self: start; }
.community-moderation { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(255,176,32,.18); }
.community-moderation > strong { margin-right: 7px; color: var(--yellow); font-size: 10px; text-transform: uppercase; }
.community-moderation form { margin: 0; }
.community-moderation button,
.community-comment-moderate button {
    padding: 7px 9px;
    border: 1px solid rgba(255,176,32,.18);
    border-radius: 8px;
    color: var(--yellow);
    background: rgba(255,176,32,.05);
    cursor: pointer;
}
.community-comments-section { padding-top: 32px; }
.community-comments-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .38fr); gap: 24px; align-items: start; }
.community-comment-list { display: grid; gap: 10px; }
.community-comment {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    padding: 20px;
    border: 1px solid rgba(137,174,200,.12);
    border-radius: 17px;
    background: rgba(7,12,18,.84);
}
.community-comment > img { width: 42px; height: 42px; border: 1px solid rgba(132,104,255,.24); border-radius: 13px; object-fit: cover; background: #071018; }
.community-comment-body header { display: flex; justify-content: space-between; gap: 15px; }
.community-comment-body header strong { font-size: 13px; }
.community-comment-body header small { color: var(--muted-2); font-size: 9px; }
.community-comment-body > p { margin: 10px 0 0; color: #c6d0d9; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.community-comment-report { margin-top: 12px; }
.community-comment-report form { display: flex; gap: 6px; margin-top: 7px; }
.community-comment-report input { padding: 8px 10px; }
.community-comment-report button { border: 0; border-radius: 8px; color: #fff; background: rgba(255,59,77,.55); cursor: pointer; }
.community-comment-moderate { margin-top: 9px; }
.community-comment-composer { position: sticky; top: 104px; }
.community-comment-composer form { display: grid; gap: 10px; }
.community-comment-composer .btn { width: 100%; }
.community-comment-composer article p { margin: 0 0 15px; color: var(--muted); }
.community-not-found { padding-top: 150px; min-height: 68vh; }
.community-not-found h1 { max-width: 800px; margin: 15px 0; font-size: clamp(48px,8vw,86px); }
.community-not-found p { max-width: 650px; color: var(--muted); }
.community-not-found .btn { margin-top: 18px; }

.home-v2-community-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-v2-community-card.is-feed { border-color: rgba(132,104,255,.22); background: radial-gradient(circle at 80% 12%, rgba(132,104,255,.12), transparent 31%), rgba(7,12,18,.87); }
.home-v2-community-card.is-feed > span { color: var(--purple); }
.dashboard-evolution-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1180px) {
    .community-hero { grid-template-columns: 1fr; }
    .community-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .community-stat-grid article { min-height: 105px; }
    .community-stat-grid strong { margin-top: 15px; }
    .community-feed-head { grid-template-columns: 1fr; }
    .community-filter-form { flex-wrap: wrap; }
    .home-v2-community-grid,
    .dashboard-evolution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .community-layout,
    .community-comments-layout { grid-template-columns: 1fr; }
    .community-sidebar,
    .community-comment-composer { position: static; }
    .community-sidebar { grid-row: 1; }
}
@media (max-width: 700px) {
    .community-hero { padding-top: 62px; gap: 25px; }
    .community-hero-copy h1 { font-size: clamp(47px, 15vw, 69px); }
    .community-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .community-filter-form { display: grid; grid-template-columns: 1fr 1fr; }
    .community-filter-form label:first-child { grid-column: 1 / -1; }
    .community-filter-form input { width: 100%; }
    .community-filter-form .btn { width: 100%; }
    .community-feed-card { padding: 20px; }
    .community-author-row { align-items: flex-start; }
    .community-category-badge { max-width: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .community-feed-footer { display: grid; }
    .community-post-page { padding-top: 62px; }
    .community-post-main { padding: 22px; }
    .community-post-main h1 { font-size: clamp(35px, 11vw, 53px); }
    .community-post-content { font-size: 14px; }
    .community-comment { grid-template-columns: 35px minmax(0,1fr); padding: 16px; }
    .community-comment > img { width: 35px; height: 35px; }
    .community-comment-body header { display: grid; gap: 2px; }
    .community-comment-report form { display: grid; }
    .home-v2-community-grid,
    .dashboard-evolution-grid { grid-template-columns: 1fr; }
}
.community-comment-report-count { display: block; margin-top: 9px; color: var(--yellow); font-size: 9px; }

/* R10 — Clan Hub, profiles and versus */
.clan-hub-hero,
.cw-match-center-hero {
    width: min(var(--max), calc(100% - 40px));
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    gap: 34px;
    align-items: end;
    padding-top: 92px;
    padding-bottom: 44px;
}
.clan-hub-copy h1,
.clan-compare-hero h1 {
    max-width: 920px;
    margin: 10px 0 18px;
    font-size: clamp(48px, 6.4vw, 88px);
    line-height: .95;
    letter-spacing: -.065em;
}
.clan-hub-copy h1 span,
.clan-compare-hero h1 span { color: var(--purple); }
.clan-hub-copy .lead,
.clan-compare-hero .lead { max-width: 780px; }
.clan-hub-live {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(132, 104, 255, .25);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(132,104,255,.11), rgba(8,12,19,.86));
    box-shadow: var(--shadow);
}
.clan-hub-live > div,
.cw-center-metrics article {
    min-height: 116px;
    padding: 19px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 17px;
    background: rgba(3,7,12,.5);
}
.clan-hub-live small,
.cw-center-metrics small { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.clan-hub-live strong,
.cw-center-metrics strong { font-size: clamp(25px, 3vw, 39px); line-height: 1; letter-spacing: -.045em; }
.clan-hub-live span { color: var(--purple); font-size: 12px; font-weight: 800; }

.clan-podium-section { padding-top: 42px; }
.clan-podium-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.clan-podium-card,
.clan-directory-card {
    --clan-accent: #20d9ff;
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--clan-accent) 33%, rgba(255,255,255,.09));
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--clan-accent) 15%, transparent), transparent 42%),
        linear-gradient(145deg, rgba(13,20,30,.94), rgba(5,9,15,.92));
    box-shadow: 0 22px 58px rgba(0,0,0,.28);
}
.clan-podium-card::before,
.clan-directory-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--clan-accent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--clan-accent) 75%, transparent);
}
.clan-podium-card {
    min-height: 350px;
    padding: 26px;
    border-radius: 23px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto;
    gap: 18px 20px;
    align-items: center;
}
.clan-podium-card.rank-1 { transform: translateY(-10px); }
.clan-rank-mark {
    position: absolute;
    top: 18px;
    right: 20px;
    color: color-mix(in srgb, var(--clan-accent) 78%, white);
    font-size: 24px;
    font-weight: 950;
}
.clan-emblem {
    width: 94px;
    height: 94px;
    border-radius: 25px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--clan-accent) 56%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--clan-accent) 22%, #0a1017), rgba(3,7,12,.88));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 35px color-mix(in srgb, var(--clan-accent) 18%, transparent);
}
.clan-emblem strong { color: #fff; font-size: clamp(20px, 2vw, 30px); letter-spacing: -.04em; text-align: center; }
.clan-emblem.is-small { width: 58px; height: 58px; border-radius: 17px; }
.clan-emblem.is-small strong { font-size: 17px; }
.clan-emblem.is-profile { width: 132px; height: 132px; border-radius: 34px; }
.clan-emblem.is-profile strong { font-size: clamp(25px, 4vw, 42px); }
.clan-podium-card h3 { margin: 3px 0 0; font-size: clamp(25px, 3vw, 39px); line-height: 1; letter-spacing: -.05em; }
.clan-podium-card > div > small { color: var(--clan-accent); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.clan-card-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-self: end; }
.clan-card-metrics span { padding: 14px; border-radius: 15px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.clan-card-metrics b { display: block; margin-bottom: 3px; color: var(--text); font-size: 19px; letter-spacing: -.04em; }
.clan-podium-card > a { grid-column: 1 / -1; color: var(--clan-accent); font-weight: 900; }

.clan-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.clan-directory-card { padding: 22px; border-radius: 20px; }
.clan-directory-top { display: flex; justify-content: space-between; align-items: flex-start; }
.clan-directory-top > span { color: var(--clan-accent); font-weight: 900; }
.clan-directory-card h3 { margin: 22px 0 12px; font-size: 25px; letter-spacing: -.04em; }
.clan-division-row { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.clan-division-row strong { font-size: 13px; color: var(--clan-accent); }
.clan-directory-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 18px 0; }
.clan-directory-stats span { padding: 11px; border-radius: 13px; background: rgba(255,255,255,.035); }
.clan-directory-stats small { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.clan-directory-stats b { display: block; margin-top: 4px; font-size: 17px; }
.clan-card-link { color: var(--clan-accent); font-weight: 900; }

.clan-tools-grid,
.clan-profile-cta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.clan-tool-card,
.clan-profile-cta-grid > article {
    padding: 30px;
    border: 1px solid rgba(132,104,255,.20);
    border-radius: 23px;
    background: rgba(8,13,21,.88);
}
.clan-tool-card h2,
.clan-profile-cta-grid h2 { margin: 8px 0 10px; font-size: clamp(28px, 4vw, 45px); letter-spacing: -.05em; }
.clan-tool-card p,
.clan-profile-cta-grid p { color: var(--muted); }
.clan-compare-form,
.clan-compare-top-form {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 12px;
    align-items: end;
    margin-top: 24px;
}
.clan-compare-form label,
.clan-compare-top-form label,
.cw-filter-form label { display: grid; gap: 7px; }
.clan-compare-form label span,
.clan-compare-top-form label span,
.cw-filter-form label span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.clan-compare-form select,
.clan-compare-top-form select,
.cw-filter-form select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    color: var(--text);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    background: #0a111a;
}
.clan-compare-vs { align-self: center; padding-bottom: 13px; color: var(--purple); font-weight: 950; }
.clan-tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.clan-division-explainer { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); gap: 30px; align-items: center; }
.clan-division-explainer h2 { margin: 7px 0; font-size: clamp(32px,4vw,52px); }

.clan-profile-hero {
    --clan-accent: #20d9ff;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px;
    padding-top: 92px;
}
.clan-profile-identity { display: flex; gap: 25px; align-items: center; }
.clan-profile-identity h1 { margin: 4px 0 9px; font-size: clamp(48px,7vw,92px); line-height: .92; letter-spacing: -.065em; }
.clan-profile-identity p { max-width: 760px; margin: 0; color: var(--muted); }
.clan-profile-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; max-width: 520px; }
.clan-profile-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; padding-top: 26px; }
.clan-profile-metrics article {
    min-height: 120px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 17px;
    background: rgba(7,12,19,.83);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.clan-profile-metrics small { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.clan-profile-metrics strong { font-size: clamp(22px,3vw,36px); line-height: 1; letter-spacing: -.045em; }
.clan-profile-metrics span { color: rgb(var(--scene-accent)); font-size: 11px; font-weight: 800; }
.clan-profile-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 16px; }
.clan-profile-panel { padding: 27px; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: rgba(7,12,19,.86); }
.clan-form-row { display: flex; gap: 9px; flex-wrap: wrap; }
.clan-form-row span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 13px; font-weight: 950; }
.clan-form-row .is-w { color: var(--green); background: rgba(40,226,140,.12); border: 1px solid rgba(40,226,140,.3); }
.clan-form-row .is-l { color: var(--red); background: rgba(255,59,77,.11); border: 1px solid rgba(255,59,77,.28); }
.clan-form-row .is-d { color: var(--yellow); background: rgba(255,176,32,.11); border: 1px solid rgba(255,176,32,.28); }
.clan-mvp-highlight { margin-top: 26px; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,176,32,.12), rgba(132,104,255,.08)); }
.clan-mvp-highlight small { display: block; color: var(--yellow); text-transform: uppercase; letter-spacing: .1em; font-weight: 900; }
.clan-mvp-highlight strong { display: block; margin: 5px 0; font-size: 23px; }
.clan-mvp-highlight span { color: var(--muted); }
.clan-roster-list { display: grid; gap: 8px; }
.clan-roster-list a { display: grid; grid-template-columns: 35px minmax(120px,1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.025); }
.clan-roster-list a:hover { border-color: rgba(var(--scene-accent),.35); }
.clan-roster-list a > span { color: rgb(var(--scene-accent)); font-weight: 900; }
.clan-roster-list small { color: var(--muted); }
.clan-match-list { display: grid; gap: 9px; }
.clan-match-row { display: grid; grid-template-columns: 52px minmax(180px,1fr) 150px 130px auto; gap: 16px; align-items: center; padding: 15px 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(7,12,19,.82); }
.clan-match-row > div { display: grid; gap: 2px; }
.clan-match-row small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.clan-match-row > a { font-weight: 900; color: var(--cyan); }
.clan-result-badge { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-weight: 950; }
.clan-match-row.is-w .clan-result-badge { color: var(--green); background: rgba(40,226,140,.12); }
.clan-match-row.is-l .clan-result-badge { color: var(--red); background: rgba(255,59,77,.12); }
.clan-match-row.is-d .clan-result-badge { color: var(--yellow); background: rgba(255,176,32,.12); }

.clan-compare-hero { padding-top: 92px; padding-bottom: 42px; }
.clan-compare-top-form { max-width: 1050px; margin-top: 30px; }
.clan-versus-stage { position: relative; display: grid; grid-template-columns: 1fr 180px 1fr; gap: 16px; align-items: stretch; padding-top: 25px; }
.clan-versus-team { --clan-accent: #20d9ff; position: relative; padding: 30px; text-align: center; border: 1px solid color-mix(in srgb, var(--clan-accent) 37%, rgba(255,255,255,.1)); border-radius: 24px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--clan-accent) 17%, transparent), transparent 45%), rgba(7,12,19,.9); }
.clan-versus-team .clan-emblem { margin: 0 auto 20px; }
.clan-versus-team h2 { margin: 0 0 14px; font-size: clamp(31px,4vw,52px); letter-spacing: -.055em; }
.clan-versus-team .btn { margin-top: 22px; }
.clan-versus-rank { position: absolute; top: 20px; right: 22px; color: var(--clan-accent); font-size: 24px; font-weight: 950; }
.clan-versus-center { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; }
.clan-versus-center strong { width: 90px; height: 90px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 31px; background: linear-gradient(145deg, rgba(255,59,77,.8), rgba(132,104,255,.8)); box-shadow: 0 0 45px rgba(132,104,255,.25); }
.clan-versus-center span { color: var(--muted); font-size: 11px; }
.clan-comparison-table { display: grid; gap: 6px; padding-top: 25px; }
.clan-comparison-row { display: grid; grid-template-columns: 1fr 190px 1fr; gap: 15px; align-items: center; min-height: 58px; padding: 10px 20px; border-radius: 14px; background: rgba(7,12,19,.8); }
.clan-comparison-row strong:first-child { text-align: right; color: var(--cyan); }
.clan-comparison-row strong:last-child { color: var(--purple); }
.clan-comparison-row span { text-align: center; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.clan-head-score { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.clan-head-score > div { padding: 20px; text-align: center; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: rgba(7,12,19,.82); }
.clan-head-score small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; }
.clan-head-score strong { display: block; margin: 6px 0; font-size: 35px; }
.clan-head-score span { color: rgb(var(--scene-accent)); font-weight: 900; }
.clan-head-list { display: grid; gap: 8px; }
.clan-head-list article { display: grid; grid-template-columns: 44px 1fr auto; gap: 15px; align-items: center; padding: 15px 18px; border-radius: 14px; background: rgba(255,255,255,.035); }
.clan-head-list article > span { color: var(--cyan); font-weight: 950; }
.clan-head-list small { color: var(--muted); }

.cw-match-center-hero { align-items: center; }
.cw-center-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.cw-center-metrics article { min-height: 135px; }
.cw-filter-section { padding-top: 8px; padding-bottom: 20px; }
.cw-filter-form { display: grid; grid-template-columns: minmax(260px, 460px) auto; gap: 10px; align-items: end; }
.cw-card-title-line-v2 strong a:hover { color: var(--cw-winner); }

@media (max-width: 1080px) {
    .clan-hub-hero,
    .cw-match-center-hero { grid-template-columns: 1fr; }
    .clan-podium-grid,
    .clan-directory-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .clan-podium-card.rank-1 { transform: none; }
    .clan-profile-hero { align-items: flex-start; flex-direction: column; }
    .clan-profile-actions { justify-content: flex-start; }
    .clan-profile-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .clan-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .clan-hub-hero,
    .cw-match-center-hero,
    .clan-compare-hero,
    .clan-profile-hero { width: min(var(--max), calc(100% - 24px)); padding-top: 58px; }
    .clan-hub-copy h1,
    .clan-compare-hero h1 { font-size: clamp(42px,13vw,64px); }
    .clan-hub-live,
    .cw-center-metrics { grid-template-columns: 1fr 1fr; }
    .clan-podium-grid,
    .clan-directory-grid,
    .clan-tools-grid,
    .clan-profile-cta-grid { grid-template-columns: 1fr; }
    .clan-podium-card { min-height: 0; }
    .clan-compare-form,
    .clan-compare-top-form { grid-template-columns: 1fr; }
    .clan-compare-vs { padding: 0; text-align: center; }
    .clan-division-explainer { grid-template-columns: 1fr; }
    .clan-profile-identity { align-items: flex-start; flex-direction: column; }
    .clan-emblem.is-profile { width: 108px; height: 108px; border-radius: 28px; }
    .clan-profile-metrics { grid-template-columns: 1fr 1fr; }
    .clan-roster-list a { grid-template-columns: 32px 1fr; }
    .clan-roster-list small { grid-column: 2; }
    .clan-match-row { grid-template-columns: 45px 1fr auto; }
    .clan-match-row > div:nth-of-type(2),
    .clan-match-row > div:nth-of-type(3) { display: none; }
    .clan-versus-stage { grid-template-columns: 1fr; }
    .clan-versus-center { min-height: 100px; }
    .clan-comparison-row { grid-template-columns: 1fr 115px 1fr; padding-inline: 10px; }
    .clan-head-score { grid-template-columns: repeat(3,1fr); }
    .cw-filter-form { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .clan-hub-live,
    .cw-center-metrics,
    .clan-profile-metrics { grid-template-columns: 1fr; }
    .clan-card-metrics,
    .clan-directory-stats { grid-template-columns: 1fr; }
    .clan-podium-card { grid-template-columns: 1fr; }
    .clan-podium-card > a,
    .clan-card-metrics { grid-column: 1; }
    .clan-comparison-row { grid-template-columns: 1fr; text-align: center; }
    .clan-comparison-row strong:first-child { text-align: center; }
}

/* R11A — MR Supporter, Mercado Pago foundation and manual Cinema access */
.support-v3-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 28px;
    align-items: stretch;
    padding-top: 112px;
}
.support-v3-copy,
.support-identity-card,
.support-v3-principles article,
.support-payment-main,
.support-confirm-card,
.support-status-card,
.support-cinema-policy,
.support-use-grid,
.support-catalog-v3,
.support-credit-section,
.support-transparency,
.staff-support-metrics article {
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(145deg, rgba(9,14,22,.92), rgba(5,8,13,.86));
    box-shadow: var(--shadow);
}
.support-v3-copy { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 64px); border-radius: 30px; }
.support-v3-copy::before { content:""; position:absolute; width:440px; height:440px; right:-180px; top:-220px; border-radius:50%; background:radial-gradient(circle, rgba(244,199,91,.2), transparent 66%); pointer-events:none; }
.support-v3-copy h1 { position:relative; max-width: 920px; margin: 12px 0 18px; font-size: clamp(46px, 6.2vw, 92px); line-height: .96; letter-spacing: -.07em; }
.support-v3-copy h1 span { color: var(--support); text-shadow: 0 0 36px rgba(244,199,91,.14); }
.support-v3-copy .lead { max-width: 850px; font-size: clamp(17px, 1.5vw, 21px); }
.support-v3-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn.is-disabled { opacity:.48; cursor:not-allowed; pointer-events:none; }
.support-v3-trust { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.support-v3-trust span { padding:7px 11px; border:1px solid rgba(244,199,91,.22); border-radius:999px; color:#d8c99c; background:rgba(244,199,91,.055); font-size:12px; font-weight:900; letter-spacing:.06em; }
.support-identity-card { display:flex; flex-direction:column; justify-content:center; padding:32px; border-radius:30px; background:radial-gradient(circle at 50% 10%, rgba(244,199,91,.18), transparent 35%), linear-gradient(155deg, rgba(16,18,20,.96), rgba(5,8,13,.94)); }
.support-identity-mark { display:flex; align-items:center; gap:12px; margin-bottom:30px; }
.support-identity-mark span { display:grid; place-items:center; width:78px; height:78px; border-radius:24px; color:#080a0d; background:linear-gradient(135deg,#fff0ae,#d99d31); font-size:30px; font-weight:1000; box-shadow:0 18px 50px rgba(244,199,91,.2); }
.support-identity-mark strong { font-size:17px; letter-spacing:.22em; color:var(--support); }
.support-identity-card h2 { margin:0 0 10px; font-size:32px; letter-spacing:-.045em; }
.support-identity-card p { margin:0; color:#b7c0c9; }
.support-identity-flags { display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }
.support-identity-flags b { padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.055); color:#c8d0d8; font-size:10px; letter-spacing:.08em; }
.support-v3-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-top:18px; }
.support-v3-principles article { position:relative; min-height:230px; padding:28px; border-radius:24px; overflow:hidden; }
.support-v3-principles article > span { display:block; color:var(--support); font-size:13px; font-weight:1000; letter-spacing:.16em; }
.support-v3-principles article h2 { margin:48px 0 9px; font-size:25px; }
.support-v3-principles article p { margin:0; color:#aeb9c4; }
.support-v3-flow { padding-top:50px; }
.support-flow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.support-flow-grid article { display:flex; align-items:flex-start; gap:14px; min-height:120px; padding:22px; border:1px solid rgba(255,255,255,.09); border-radius:20px; background:rgba(7,11,17,.78); }
.support-flow-grid article span { flex:0 0 auto; color:var(--support); font-size:13px; font-weight:1000; letter-spacing:.12em; }
.support-flow-grid article p { margin:0; color:#c8d0d8; }
.support-payment-zone { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr); gap:20px; align-items:stretch; }
.support-payment-main,.support-confirm-card { padding:30px; border-radius:26px; }
.support-amount-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:26px 0 20px; }
.support-amount { min-height:108px; display:flex; flex-direction:column; justify-content:center; padding:17px; border:1px solid rgba(244,199,91,.18); border-radius:17px; background:linear-gradient(145deg,rgba(244,199,91,.075),rgba(255,255,255,.015)); }
.support-amount small { color:#baa974; font-weight:900; letter-spacing:.1em; }
.support-amount strong { margin-top:8px; font-size:22px; letter-spacing:-.04em; }
.support-amount.is-free { border-color:rgba(32,217,255,.22); background:linear-gradient(145deg,rgba(32,217,255,.08),rgba(255,255,255,.015)); }
.support-plan-grid { grid-template-columns:repeat(3,1fr); }
.support-plan { min-height:190px; color:inherit; text-decoration:none; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.support-plan:hover { transform:translateY(-4px); border-color:rgba(244,199,91,.52); box-shadow:0 18px 45px rgba(244,199,91,.1); }
.support-plan span { margin-top:12px; color:#aeb9c4; font-size:13px; line-height:1.45; }
.support-plan b { margin-top:auto; padding-top:18px; color:var(--support); font-size:11px; letter-spacing:.07em; text-transform:uppercase; }
.support-neon-note { display:grid; gap:7px; margin-top:18px; padding:18px; border:1px solid rgba(32,217,255,.2); border-radius:16px; background:rgba(32,217,255,.045); }
.support-neon-note strong { color:#9aebff; }
.support-neon-note span { color:#aeb9c4; line-height:1.55; }
.support-confirm-card h2 { margin:8px 0; font-size:30px; }
.support-confirm-card > p { color:#aeb9c4; }
.support-notice { margin:14px 0; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); }
.support-notice.success { color:#9ff0c4; border-color:rgba(40,226,140,.35); background:rgba(40,226,140,.08); }
.support-notice.error { color:#ffadb4; border-color:rgba(255,59,77,.35); background:rgba(255,59,77,.08); }
.support-confirm-form { display:grid; gap:14px; margin-top:18px; }
.support-confirm-form label:not(.support-checkbox),
.staff-support-settings label,
.staff-support-account-editor label,
.staff-supporter-card label { display:grid; gap:7px; }
.support-confirm-form label > span,
.staff-support-settings label > span,
.staff-support-account-editor label > span,
.staff-supporter-card label > span { color:#c9d1da; font-size:12px; font-weight:900; letter-spacing:.045em; }
.support-confirm-form input,
.support-confirm-form textarea,
.staff-support-settings input,
.staff-support-account-editor input,
.staff-supporter-card input,
.staff-inline-review select { width:100%; border:1px solid rgba(255,255,255,.13); border-radius:12px; color:#fff; background:rgba(2,5,9,.72); padding:12px 13px; outline:none; }
.support-confirm-form input:focus,.support-confirm-form textarea:focus,.staff-support-settings input:focus,.staff-support-account-editor input:focus,.staff-supporter-card input:focus { border-color:rgba(var(--scene-accent),.55); box-shadow:0 0 0 3px rgba(var(--scene-accent),.08); }
.support-confirm-form small,.staff-support-settings small { color:#7f8c99; }
.support-money-input { display:grid; grid-template-columns:auto 1fr; align-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:12px; background:rgba(2,5,9,.72); }
.support-money-input b { padding-left:13px; color:var(--support); }
.support-money-input input { border:0; background:transparent; }
.support-checkbox { display:flex; gap:10px; align-items:flex-start; color:#bac4ce; }
.support-checkbox input { width:auto; margin-top:4px; }
.support-account-status { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.support-status-card,.support-cinema-policy { padding:30px; border-radius:26px; }
.support-status-card h2,.support-cinema-policy h2 { margin:7px 0 18px; }
.support-status-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:10px 0; padding:15px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(255,255,255,.025); }
.support-status-row span { color:#8d9aa7; font-size:12px; font-weight:1000; letter-spacing:.08em; }
.support-status-row strong { text-align:right; color:#c7d0d9; }
.support-status-row.is-active { border-color:rgba(40,226,140,.3); background:rgba(40,226,140,.06); }
.support-status-row.is-active strong { color:#79e9ad; }
.support-cinema-policy p { color:#aeb9c4; }
.support-catalog-mini { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.support-catalog-mini span { padding:7px 10px; border:1px solid rgba(244,199,91,.16); border-radius:999px; color:#d8c99c; font-size:12px; }
.support-request-list { display:grid; gap:10px; }
.support-request-list article { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:15px 18px; border:1px solid rgba(255,255,255,.09); border-radius:15px; background:rgba(7,11,17,.76); }
.support-request-list article div { display:grid; }
.support-request-list small { color:#82909e; }
.support-request-list b,.staff-support-status { padding:6px 9px; border-radius:999px; font-size:10px; letter-spacing:.07em; }
.status-pending { color:#f0ce78; background:rgba(244,199,91,.1); }
.status-confirmed { color:#7fe6ac; background:rgba(40,226,140,.1); }
.status-declined { color:#ff939c; background:rgba(255,59,77,.1); }
.support-use-grid { display:grid; grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr); gap:30px; padding:36px; border-radius:26px; }
.support-use-grid h2 { font-size:clamp(32px,4vw,56px); }
.support-use-grid ul { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; list-style:none; }
.support-use-grid li { padding:18px; border:1px solid rgba(255,255,255,.08); border-radius:15px; color:#c2ccd5; background:rgba(255,255,255,.02); }
.support-catalog-v3,.support-credit-section,.support-transparency { padding:36px; border-radius:26px; }
.support-catalog-grid-v3 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.support-catalog-grid-v3 article { min-height:210px; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:radial-gradient(circle at 30% 0%,rgba(var(--scene-accent),.13),transparent 42%),rgba(4,7,12,.74); }
.support-catalog-grid-v3 article b { margin-bottom:auto; color:var(--support); }
.support-catalog-grid-v3 article h3 { margin:26px 0 6px; font-size:22px; }
.support-catalog-grid-v3 article span { color:#8e9ba7; font-size:10px; font-weight:1000; letter-spacing:.1em; }
.support-credit-cloud { display:flex; flex-wrap:wrap; gap:10px; }
.support-credit-cloud span { display:inline-flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid rgba(244,199,91,.18); border-radius:12px; background:rgba(244,199,91,.055); color:#e3d9b8; font-weight:800; }
.support-credit-cloud i { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:var(--support); color:#0b0d10; font-size:10px; font-style:normal; font-weight:1000; }
.support-empty-credit { padding:24px; border:1px dashed rgba(255,255,255,.14); border-radius:16px; color:#8d9aa7; text-align:center; }
.support-transparency { text-align:center; }
.support-transparency p { max-width:900px; margin:10px auto 0; color:#aab5bf; }

/* Staff support operations */
.staff-support-hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; padding-top:110px; }
.staff-support-hero h1 { margin:8px 0; font-size:clamp(42px,6vw,78px); letter-spacing:-.065em; }
.staff-support-hero p { max-width:820px; color:#aeb9c4; }
.staff-support-actions,.staff-head-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.staff-support-notice-wrap { padding-top:0; padding-bottom:0; }
.staff-support-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding-top:18px; }
.staff-support-metrics article { display:grid; padding:22px; border-radius:20px; }
.staff-support-metrics small { color:#8d9aa7; font-weight:900; letter-spacing:.09em; }
.staff-support-metrics strong { margin:10px 0 3px; font-size:38px; }
.staff-support-metrics span { color:#7e8a96; }
.staff-support-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.staff-support-settings,.staff-cinema-policy-card,.staff-support-account-editor { padding:28px; }
.staff-support-settings form { display:grid; gap:15px; margin-top:20px; }
.staff-cinema-policy-card p,.staff-cinema-policy-card li { color:#aeb9c4; }
.staff-support-request-table { overflow:auto; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:rgba(5,8,13,.88); }
.staff-support-request-table table { width:100%; min-width:1080px; border-collapse:collapse; }
.staff-support-request-table th,.staff-support-request-table td { padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.07); text-align:left; vertical-align:top; }
.staff-support-request-table th { color:#8e9ba7; font-size:10px; letter-spacing:.08em; }
.staff-support-request-table td strong,.staff-support-request-table td small { display:block; }
.staff-support-request-table td small { max-width:250px; margin-top:4px; color:#7f8b97; }
.staff-support-request-table code { color:#d4c58f; }
.staff-inline-review { display:flex; gap:7px; }
.staff-inline-review select { min-width:118px; padding:8px; }
.btn-small { min-height:34px; padding:7px 10px; font-size:12px; }
.staff-support-fields { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.staff-support-fields .wide { grid-column:1 / -1; }
.staff-support-switches { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.staff-support-switches label { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid rgba(255,255,255,.1); border-radius:12px; color:#b9c4ce; background:rgba(255,255,255,.025); }
.staff-support-switches label.cinema { border-color:rgba(244,199,91,.25); color:#dacb9c; }
.staff-support-switches input { width:auto; }
.staff-support-switches.compact { margin:12px 0; }
.staff-supporter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.staff-supporter-card { padding:20px; }
.staff-supporter-card form { display:grid; gap:11px; }
.staff-supporter-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.staff-supporter-head div { display:grid; }
.staff-supporter-head small { color:#778592; }
.staff-supporter-head > span { padding:6px 8px; border-radius:999px; color:#8e9aa5; background:rgba(255,255,255,.05); font-size:10px; font-weight:900; }
.staff-supporter-head > span.cinema-on { color:#e4ce87; background:rgba(244,199,91,.1); }

@media (max-width: 1050px) {
    .support-v3-hero,.support-payment-zone,.support-account-status,.staff-support-grid { grid-template-columns:1fr; }
    .support-v3-principles,.staff-supporter-grid { grid-template-columns:repeat(2,1fr); }
    .support-flow-grid,.support-catalog-grid-v3,.staff-support-metrics { grid-template-columns:repeat(2,1fr); }
    .support-amount-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 720px) {
    .support-v3-hero { padding-top:82px; }
    .support-v3-copy,.support-identity-card,.support-payment-main,.support-confirm-card,.support-status-card,.support-cinema-policy,.support-use-grid,.support-catalog-v3,.support-credit-section,.support-transparency { padding:22px; border-radius:21px; }
    .support-v3-copy h1 { font-size:clamp(42px,13vw,65px); }
    .support-v3-principles,.support-flow-grid,.support-catalog-grid-v3,.staff-support-metrics,.staff-supporter-grid,.support-use-grid { grid-template-columns:1fr; }
    .support-v3-principles article { min-height:190px; }
    .support-v3-principles article h2 { margin-top:30px; }
    .support-amount-grid { grid-template-columns:1fr 1fr; }
    .support-use-grid ul { grid-template-columns:1fr; }
    .support-request-list article { grid-template-columns:1fr; }
    .staff-support-hero { align-items:flex-start; flex-direction:column; padding-top:90px; }
    .staff-support-fields { grid-template-columns:1fr; }
    .staff-support-fields .wide { grid-column:auto; }
}