:root {
    color-scheme: dark;
    --bg: #0E1116;
    --surface: #171C24;
    --surface-2: #1F2630;
    --line: #2A3340;
    --text: #E8EAED;
    --muted: #8B95A3;
    --green: #34D399;
    --green-dark: #0F2A20;
    --red: #F87171;
    --red-dark: #2A1214;
    --gold: #FBBF24;
    --gold-dark: #241C0B;
    --blue: #60A5FA;
    --shadow: 0 24px 70px rgba(0, 0, 0, .28);
    --radius: 12px;
    --radius-small: 8px;
    --shell: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--bg);
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background:
        radial-gradient(circle at 85% 10%, rgba(52, 211, 153, .055), transparent 25rem),
        var(--bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, dl { margin-top: 0; }

h1, h2, h3, strong, b { letter-spacing: -.02em; }
h1, h2, h3 { line-height: 1.12; }
h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); margin-bottom: 1.5rem; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); margin-bottom: 1rem; }
h3 { font-size: 1.15rem; margin-bottom: .65rem; }

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

::selection { background: var(--green); color: #08100c; }

.shell {
    width: min(calc(100% - 48px), var(--shell));
    margin-inline: auto;
}

.sr-only {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.clipboard-fallback {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.skip-link {
    position: fixed;
    z-index: 999;
    top: 8px;
    left: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-small);
    background: var(--green);
    color: #08100c;
    font-weight: 800;
    transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.eyebrow {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .85rem;
    color: var(--green);
    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1.4;
    text-transform: uppercase;
}

.eyebrow__dot,
.preview-label span,
.sync-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(52, 211, 153, .11);
}

.button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .72rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.button:hover { transform: translateY(-1px); }
.button--primary { background: var(--green); color: #08100c; box-shadow: 0 10px 32px rgba(52, 211, 153, .14); }
.button--primary:hover { background: #55e1ae; }
.button--secondary { border-color: var(--line); background: var(--surface); color: var(--text); }
.button--secondary:hover { border-color: #3b4858; background: var(--surface-2); }
.button--quiet { border-color: transparent; background: transparent; color: var(--muted); }
.button--quiet:hover { color: var(--text); background: var(--surface-2); }
.button--danger { border-color: rgba(248, 113, 113, .35); background: var(--red-dark); color: var(--red); }
.button--large { min-height: 52px; padding: .92rem 1.35rem; }
.button--small { min-height: 36px; padding: .5rem .82rem; font-size: .88rem; }
.button--full { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--green);
    font-weight: 750;
}

.text-link span { transition: transform .18s ease; }
.text-link:hover span { transform: translateX(3px); }

.badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    gap: .3rem;
    padding: .25rem .52rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .7rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.badge--green { border-color: rgba(52, 211, 153, .28); background: var(--green-dark); color: var(--green); }
.badge--gold { border-color: rgba(251, 191, 36, .28); background: var(--gold-dark); color: var(--gold); }
.badge--red { border-color: rgba(248, 113, 113, .28); background: var(--red-dark); color: var(--red); }
.badge--muted { color: var(--muted); }

/* Header */
.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid rgba(42, 51, 64, .8);
    background: rgba(14, 17, 22, .88);
    backdrop-filter: blur(18px);
}

.site-header__inner { display: flex; min-height: 72px; align-items: center; gap: 1.5rem; }
.brand { display: flex; flex: 0 0 auto; align-items: center; gap: .72rem; }
.brand__logo { object-fit: contain; filter: drop-shadow(0 5px 14px rgba(52, 211, 153, .13)); }
.brand__wordmark { font-size: 1.22rem; font-weight: 800; letter-spacing: -.035em; }
.brand__wordmark span { color: var(--green); }

.site-nav { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: 1rem; }
.site-nav__links, .site-nav__account { display: flex; align-items: center; gap: .25rem; }
.site-nav__links { min-width: 0; }
.site-nav__link {
    position: relative;
    padding: .62rem .72rem;
    border-radius: 7px;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 650;
    white-space: nowrap;
}

.site-nav__link:hover { background: rgba(31, 38, 48, .7); color: var(--text); }
.site-nav__link.is-active { color: var(--text); }
.site-nav__link.is-active::after { position: absolute; right: .72rem; bottom: .2rem; left: .72rem; height: 2px; border-radius: 2px; background: var(--green); content: ""; }
.site-nav__link--admin.is-active::after { background: var(--gold); }
.site-nav__divider { width: 1px; height: 24px; margin-inline: .35rem; background: var(--line); }
.site-nav__account { margin-left: auto; }

.account-chip { display: flex; max-width: 220px; align-items: center; gap: .48rem; padding: .45rem .6rem; border-radius: 8px; background: var(--surface); }
.account-chip__dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); }
.account-chip__name { overflow: hidden; font-size: .85rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nav-logout { margin: 0; }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
}

.nav-toggle__lines { display: grid; width: 18px; gap: 4px; margin: auto; }
.nav-toggle__lines span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__lines span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.flash-stack { position: relative; z-index: 90; display: grid; gap: .5rem; padding-top: 1rem; }
.alert { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); color: var(--text); font-size: .92rem; }
.alert__mark { width: 8px; height: 8px; flex: 0 0 auto; margin-top: .48rem; border-radius: 50%; background: var(--blue); }
.alert--success { border-color: rgba(52, 211, 153, .28); background: var(--green-dark); }
.alert--success .alert__mark { background: var(--green); }
.alert--error { border-color: rgba(248, 113, 113, .3); background: var(--red-dark); }
.alert--error .alert__mark { background: var(--red); }
.alert--warning { border-color: rgba(251, 191, 36, .3); background: var(--gold-dark); }
.alert--warning .alert__mark { background: var(--gold); }

.site-footer { border-top: 1px solid var(--line); background: #0b0e12; }
.site-footer__inner { display: grid; min-height: 120px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.site-footer__brand { display: flex; align-items: center; gap: .65rem; }
.site-footer__brand div { display: grid; line-height: 1.3; }
.site-footer__brand strong { font-size: .95rem; }
.site-footer__brand span, .site-footer__copy { color: var(--muted); font-size: .78rem; }
.site-footer__links { display: flex; gap: 1.25rem; color: var(--muted); font-size: .85rem; }
.site-footer__links a:hover { color: var(--text); }
.site-footer__copy { margin: 0; text-align: right; }

/* Landing */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before { position: absolute; top: -280px; left: -240px; width: 650px; height: 650px; border-radius: 50%; background: radial-gradient(circle, rgba(52, 211, 153, .06), transparent 68%); content: ""; pointer-events: none; }
.hero__grid { display: grid; min-height: 720px; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(2.5rem, 6vw, 6rem); padding-block: 5rem; }
.hero__content { position: relative; z-index: 2; }
.hero h1 { max-width: 720px; font-size: clamp(3rem, 5.6vw, 5.3rem); letter-spacing: -.06em; }
.hero h1 span, .page-hero h1 span { color: var(--green); }
.hero__lead { max-width: 660px; margin-bottom: 2rem; color: #b4bbc4; font-size: clamp(1.02rem, 1.6vw, 1.2rem); }
.hero__facts { display: flex; flex-wrap: wrap; gap: .65rem 1rem; padding: 0; margin: 1.6rem 0 0; color: var(--muted); font-size: .82rem; list-style: none; }
.hero__facts li { display: flex; align-items: center; gap: .36rem; }
.hero__facts span { color: var(--green); font-weight: 800; }
.hero__visual { position: relative; min-width: 0; }
.hero__glow { position: absolute; z-index: -1; right: -10%; bottom: -15%; width: 80%; height: 65%; border-radius: 50%; background: rgba(52, 211, 153, .1); filter: blur(70px); }

.preview-label { display: flex; align-items: center; gap: .55rem; margin: 0 0 .65rem .5rem; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.preview-label span { width: 6px; height: 6px; box-shadow: none; }
.app-preview { overflow: hidden; border: 1px solid #323c49; border-radius: 15px; background: var(--surface); box-shadow: 0 35px 90px rgba(0, 0, 0, .45), 0 0 0 7px rgba(31, 38, 48, .27); }
.app-preview--hero { transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.app-preview__bar { display: grid; height: 42px; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 .85rem; border-bottom: 1px solid var(--line); background: #11161d; color: var(--muted); font-size: .62rem; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #394452; }
.window-dots i:first-child { background: var(--red); }.window-dots i:nth-child(2) { background: var(--gold); }.window-dots i:last-child { background: var(--green); }
.app-preview__online { justify-self: end; color: var(--green); }
.app-preview__online i { display: inline-block; width: 5px; height: 5px; margin-right: .25rem; border-radius: 50%; background: currentColor; }
.app-preview__body { display: grid; min-height: 390px; grid-template-columns: 54px 1fr; }
.app-preview__side { display: grid; align-content: start; justify-items: center; gap: .75rem; padding: .7rem .45rem; border-right: 1px solid var(--line); background: #12171e; }
.app-preview__side > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 7px; color: #667181; font-size: .82rem; }
.app-preview__side > span.is-on { background: var(--green-dark); color: var(--green); }
.app-preview__mini-brand { display: flex; align-items: center; gap: .2rem; margin-bottom: .35rem; }
.app-preview__mini-brand b { display: none; }
.app-preview__main { min-width: 0; padding: 1.25rem; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.preview-heading div { display: grid; }
.preview-heading small { color: var(--muted); font-size: .65rem; }
.preview-heading strong { font-size: 1.25rem; }
.status-pill { padding: .28rem .55rem; border-radius: 999px; background: var(--green-dark); color: var(--green); font-size: .6rem; font-weight: 800; }
.preview-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.preview-kpis article { display: grid; min-width: 0; gap: .2rem; padding: .72rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.preview-kpis small { overflow: hidden; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.preview-kpis strong { font-size: 1.15rem; }
.preview-kpis span { color: var(--muted); font-size: .55rem; }
.preview-kpis .trend-up { color: var(--green); }
.preview-panels { display: grid; grid-template-columns: 1.45fr .85fr; gap: .55rem; margin-top: .55rem; }
.preview-panels article { min-height: 170px; padding: .85rem; border: 1px solid var(--line); border-radius: 9px; background: #141a22; }
.preview-panel-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.preview-panel-title strong { font-size: .72rem; }.preview-panel-title span { color: var(--muted); font-size: .53rem; }
.bar-chart { display: flex; height: 110px; align-items: end; justify-content: space-between; gap: 7px; padding: 14px 5px 4px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent 26px, rgba(42, 51, 64, .6) 27px); }
.bar-chart i { width: 10%; min-width: 4px; border-radius: 3px 3px 0 0; background: linear-gradient(to top, #1b6e55, var(--green)); opacity: .85; }
.bar-42 { height: 42%; }.bar-48 { height: 48%; }.bar-55 { height: 55%; }.bar-62 { height: 62%; }.bar-66 { height: 66%; }.bar-70 { height: 70%; }.bar-76 { height: 76%; }.bar-84 { height: 84%; }
.preview-next { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.preview-next .preview-panel-title { width: 100%; margin-bottom: .4rem; }
.event-icon { font-size: 1.5rem; }.preview-next b { font-size: .75rem; }.preview-next > span { color: var(--muted); font-size: .52rem; }
.preview-next button { margin-top: .6rem; padding: .35rem .65rem; border: 0; border-radius: 5px; background: var(--green); color: #08100c; font-size: .55rem; font-weight: 800; }

.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.section--bordered { border-bottom: 1px solid var(--line); }
.section--surface { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(23, 28, 36, .75), rgba(23, 28, 36, .4)); }
.section--cta { padding-block: 4rem; }
.split-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; margin-bottom: 3rem; }
.split-intro h2 { max-width: 520px; margin: 0; }
.split-intro > p { max-width: 590px; margin: 0; color: var(--muted); font-size: 1.08rem; }
.section-heading { max-width: 760px; margin-bottom: 3rem; }
.section-heading--center { text-align: center; }
.section-heading--center .eyebrow { justify-content: center; }
.section-heading > p:last-child { color: var(--muted); font-size: 1.05rem; }

.feature-grid { display: grid; gap: 1rem; }
.feature-grid--three { grid-template-columns: repeat(3, 1fr); }
.feature-card { position: relative; overflow: hidden; min-height: 310px; padding: 1.65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.feature-card::after { position: absolute; right: -40px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(52, 211, 153, .045); content: ""; }
.feature-card__icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 2.5rem; border: 1px solid rgba(52, 211, 153, .18); border-radius: 10px; background: var(--green-dark); font-size: 1.3rem; }
.feature-card__number { position: absolute; top: 1.4rem; right: 1.4rem; color: #46515f; font-size: .75rem; font-weight: 800; }
.feature-card h3 { font-size: 1.25rem; }.feature-card > p:last-child { color: var(--muted); }

.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 0; list-style: none; }
.steps::before { position: absolute; top: 24px; right: 16%; left: 16%; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); content: ""; }
.steps li { position: relative; display: grid; justify-items: center; text-align: center; }
.steps__number { position: relative; z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 1.25rem; border: 1px solid rgba(52, 211, 153, .28); border-radius: 50%; background: var(--green-dark); color: var(--green); font-size: .88rem; font-weight: 900; box-shadow: 0 0 0 10px var(--surface); }
.steps h3 { margin-bottom: .4rem; }.steps p { max-width: 310px; margin: 0; color: var(--muted); font-size: .92rem; }

.detail-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.detail-grid__copy > p:not(.eyebrow) { color: var(--muted); }
.check-list { display: grid; gap: .7rem; padding: 0; margin: 1.5rem 0 1.7rem; list-style: none; }
.check-list li { display: flex; align-items: flex-start; gap: .65rem; color: #bbc2cb; }
.check-list li > span { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; margin-top: .1rem; border-radius: 50%; background: var(--green-dark); color: var(--green); font-size: .65rem; font-weight: 900; }
.career-map { position: relative; display: grid; gap: .75rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.career-map__line { position: absolute; top: 3.2rem; bottom: 3.2rem; left: 3.02rem; width: 2px; background: var(--line); }
.career-node { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; padding: .9rem; border: 1px solid transparent; border-radius: 10px; background: var(--surface); }
.career-node > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: .75rem; font-weight: 900; }
.career-node div { display: grid; }.career-node small { color: var(--muted); font-size: .65rem; text-transform: uppercase; }.career-node strong { font-size: 1rem; }.career-node em { color: var(--green); font-size: .68rem; font-style: normal; }
.career-node--done > span { border-color: var(--green); background: var(--green-dark); color: var(--green); }
.career-node--active { border-color: rgba(52, 211, 153, .32); background: linear-gradient(90deg, var(--green-dark), var(--surface)); }
.career-node--active > span { border-color: var(--green); color: var(--green); box-shadow: 0 0 0 6px rgba(52, 211, 153, .08); }

.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid rgba(52, 211, 153, .25); border-radius: 16px; background: linear-gradient(120deg, var(--green-dark), var(--surface) 70%); box-shadow: var(--shadow); }
.cta-panel h2 { margin-bottom: .55rem; }.cta-panel p:last-child { max-width: 650px; margin: 0; color: #a8b2bc; }

/* Public subpages and previews */
.page-hero { border-bottom: 1px solid var(--line); background: radial-gradient(circle at 78% 20%, rgba(52, 211, 153, .07), transparent 24rem); }
.page-hero__inner { display: grid; min-height: 420px; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 5rem; padding-block: 5rem; }
.page-hero--compact h1 { margin: 0; font-size: clamp(2.8rem, 6vw, 5rem); }
.page-hero__lead { max-width: 540px; margin: 0 0 .5rem; color: #aeb6c0; font-size: 1.08rem; }
.feature-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.showcase-card { min-width: 0; padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.showcase-card--wide { display: grid; grid-column: 1 / -1; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.showcase-card--reverse .showcase-card__copy { order: 2; }
.showcase-card h2 { font-size: clamp(1.65rem, 3vw, 2.5rem); }.showcase-card p:not(.eyebrow) { color: var(--muted); }
.showcase-card .feature-card__icon { margin-bottom: 1.2rem; }

.scoreboard-preview, .analysis-preview { overflow: hidden; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #11161c; box-shadow: var(--shadow); }
.scoreboard-preview .preview-label, .analysis-preview .preview-label { margin-left: 0; }
.scoreboard-preview__top { display: flex; align-items: center; justify-content: space-between; padding: .65rem .8rem; border-bottom: 1px solid var(--line); color: var(--green); font-size: .68rem; font-weight: 800; }
.scoreboard-preview__top b { color: var(--muted); }
.score-player { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .8rem; border-bottom: 1px solid var(--line); }
.score-player.is-throwing { background: linear-gradient(90deg, var(--green-dark), transparent); }
.score-player__avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--green); color: #08100c; font-size: .6rem; font-weight: 900; }.score-player__avatar--bot { background: var(--surface-2); color: var(--muted); }
.score-player div { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }.score-player small { color: var(--muted); }.score-player strong { font-size: 1.5rem; }.score-player em { color: var(--muted); font-size: .7rem; font-style: normal; }
.scoreboard-preview__visit { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem 1rem; padding: .8rem; }.scoreboard-preview__visit small { color: var(--muted); }.scoreboard-preview__visit strong { grid-row: span 2; font-size: 1.5rem; }.scoreboard-preview__visit span { color: var(--green); font-size: .7rem; }
.mini-calendar { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: 1.8rem; }.mini-calendar span { display: grid; justify-items: center; gap: .2rem; padding: .65rem .3rem; border: 1px solid var(--line); border-radius: 8px; }.mini-calendar small { color: var(--muted); font-size: .55rem; }.mini-calendar b { font-size: 1.05rem; }.mini-calendar .is-event { border-color: rgba(251, 191, 36, .3); color: var(--gold); }.mini-calendar .is-active { border-color: var(--green); background: var(--green-dark); color: var(--green); }
.opponent-list { display: grid; gap: .45rem; margin-top: 1.5rem; }.opponent-list span { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .55rem; border-radius: 8px; background: var(--surface-2); }.opponent-list i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #293341; color: var(--muted); font-size: .55rem; font-style: normal; }.opponent-list b { font-size: .75rem; }.opponent-list em { color: var(--green); font-size: .65rem; font-style: normal; }.opponent-list span:last-child em { color: var(--red); }
.analysis-preview__head, .analysis-preview__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.analysis-preview__head div { display: grid; }.analysis-preview__head small { color: var(--muted); font-size: .65rem; }.analysis-preview__head strong { color: var(--green); font-size: 1.45rem; }.analysis-preview__head > span, .analysis-preview__foot { color: var(--muted); font-size: .65rem; }
.line-preview { position: relative; height: 190px; margin: 1rem 0; overflow: hidden; border-bottom: 1px solid var(--line); }.line-preview__grid { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 46px, rgba(42, 51, 64, .65) 47px); }.point { position: absolute; z-index: 2; width: 7px; height: 7px; border: 2px solid #0d1513; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(52, 211, 153, .13); }.point--1 { left: 2%; top: 68%; }.point--2 { left: 15%; top: 56%; }.point--3 { left: 29%; top: 61%; }.point--4 { left: 43%; top: 42%; }.point--5 { left: 57%; top: 49%; }.point--6 { left: 71%; top: 28%; }.point--7 { left: 84%; top: 36%; }.point--8 { left: 97%; top: 14%; }
.segment { position: absolute; z-index: 1; height: 2px; background: var(--green); transform-origin: left center; }.segment--1 { top: 69%; left: 2%; width: 14%; transform: rotate(-11deg); }.segment--2 { top: 57%; left: 15%; width: 14%; transform: rotate(4deg); }.segment--3 { top: 62%; left: 29%; width: 15%; transform: rotate(-15deg); }.segment--4 { top: 43%; left: 43%; width: 15%; transform: rotate(5deg); }.segment--5 { top: 50%; left: 57%; width: 15%; transform: rotate(-16deg); }.segment--6 { top: 29%; left: 71%; width: 14%; transform: rotate(7deg); }.segment--7 { top: 37%; left: 84%; width: 15%; transform: rotate(-17deg); }
.green-dot { display: inline-block; width: 6px; height: 6px; margin-right: .3rem; border-radius: 50%; background: var(--green); }.analysis-preview__foot b { color: var(--text); }
.icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.icon-grid article { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.icon-grid article > span { font-size: 1.45rem; }.icon-grid h3 { margin: 1rem 0 .5rem; }.icon-grid p { margin: 0; color: var(--muted); font-size: .9rem; }

.insight-stack { display: grid; gap: 7rem; }.insight-block { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: clamp(3rem, 8vw, 8rem); }.insight-block--reverse { grid-template-columns: 1.28fr .72fr; }.insight-block--reverse .insight-block__copy { order: 2; }.insight-block__copy p:not(.eyebrow) { color: var(--muted); }.plain-list { display: grid; gap: .55rem; padding: 0; margin: 1.5rem 0 0; list-style: none; }.plain-list li { padding-left: 1rem; border-left: 2px solid var(--green); color: #bec5cd; }
.media-frame { overflow: hidden; min-width: 0; padding: 1rem; border: 1px solid #303a47; border-radius: 15px; background: #11161c; box-shadow: var(--shadow); }.media-frame .preview-label { margin-left: 0; }
.dashboard-mock { display: grid; grid-template-columns: 46px 1fr; min-height: 320px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }.dashboard-mock__nav { display: grid; align-content: start; justify-items: center; gap: 1rem; padding: .7rem .3rem; border-right: 1px solid var(--line); background: #10151b; }.dashboard-mock__nav i { width: 22px; height: 22px; border-radius: 5px; background: #242d38; }.dashboard-mock__nav i.on { background: var(--green-dark); box-shadow: inset 3px 0 var(--green); }
.dashboard-mock__content { min-width: 0; padding: 1.1rem; }.mock-title { display: flex; align-items: center; justify-content: space-between; }.mock-title > span { display: grid; }.mock-title small { color: var(--muted); font-size: .55rem; }.mock-title b { font-size: 1rem; }.mock-title em { color: var(--green); font-size: .58rem; font-style: normal; }
.mock-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-block: .8rem; }.mock-stat-row span { display: grid; padding: .65rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }.mock-stat-row small { color: var(--muted); font-size: .47rem; }.mock-stat-row b { font-size: .8rem; }
.mock-lower { display: grid; grid-template-columns: 1.5fr .8fr; gap: .6rem; }.mock-lower > div { display: grid; align-content: start; gap: .35rem; padding: .7rem; border: 1px solid var(--line); border-radius: 7px; }.mock-lower > div > b { margin-bottom: .2rem; font-size: .65rem; }.mock-event, .task-check, .task-open { display: flex; justify-content: space-between; gap: .3rem; padding: .35rem; border-radius: 4px; background: var(--surface-2); color: var(--muted); font-size: .5rem; }.mock-event em { font-style: normal; }.mock-event.is-past { opacity: .55; }.mock-event.is-next { border-left: 2px solid var(--green); color: var(--text); }.task-check { color: var(--green); }.task-open { color: var(--muted); }
.stats-mock { padding: .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }.stats-mock__tabs { display: flex; gap: .3rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }.stats-mock__tabs span { padding: .35rem .5rem; border-radius: 4px; color: var(--muted); font-size: .52rem; }.stats-mock__tabs span.on { background: var(--green-dark); color: var(--green); }.stats-mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-block: .7rem; }.stats-mock__kpis article { display: grid; padding: .65rem; border: 1px solid var(--line); border-radius: 7px; }.stats-mock__kpis small { color: var(--muted); font-size: .45rem; }.stats-mock__kpis b { font-size: 1rem; }.stats-mock__kpis em { color: var(--green); font-size: .5rem; font-style: normal; }.stats-mock__chart { display: grid; grid-template-columns: auto 1fr; gap: .5rem; }.chart-axis { color: var(--muted); font-size: .45rem; line-height: 2.25rem; }.bar-chart--wide { height: 130px; }
.browser-chrome { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 .6rem; border: 1px solid var(--line); border-radius: 7px 7px 0 0; background: #171c23; }.browser-chrome i { width: 6px; height: 6px; border-radius: 50%; background: #485362; }.browser-chrome span { flex: 1; margin-left: .5rem; color: var(--muted); font-size: .48rem; text-align: center; }.web-mock { padding: 1rem; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 7px 7px; background: var(--bg); }.web-mock__hello { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.web-mock__hello div { display: grid; }.web-mock__hello small { color: var(--green); font-size: .48rem; text-transform: uppercase; }.web-mock__hello b { font-size: .9rem; }.web-mock__hello em { color: var(--muted); font-size: .48rem; font-style: normal; }.web-mock__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-block: .8rem; }.web-mock__cards span { display: grid; padding: .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }.web-mock__cards small { color: var(--muted); font-size: .45rem; }.web-mock__cards b { font-size: .85rem; }.web-mock__history { display: grid; gap: .35rem; padding: .65rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }.web-mock__history > b { font-size: .6rem; }.web-mock__history span { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; color: var(--muted); font-size: .5rem; }.web-mock__history i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; font-size: .42rem; font-style: normal; font-weight: 900; }.result-win { background: var(--green-dark); color: var(--green); }.result-loss { background: var(--red-dark); color: var(--red); }
.real-media-placeholder { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2rem; max-width: 850px; }.real-media-placeholder__icon { display: grid; width: 94px; height: 94px; place-items: center; border: 1px dashed #46515f; border-radius: 50%; background: var(--surface); color: var(--green); font-size: 1.5rem; }.real-media-placeholder h2 { margin-bottom: .7rem; }.real-media-placeholder p:last-child { margin: 0; color: var(--muted); }

/* Authentication */
.auth-page { position: relative; overflow: hidden; min-height: calc(100vh - 193px); padding-block: clamp(3rem, 7vw, 6rem); }.auth-page__glow { position: absolute; top: 20%; left: 58%; width: 500px; height: 500px; border-radius: 50%; background: rgba(52, 211, 153, .055); filter: blur(75px); pointer-events: none; }.auth-grid { position: relative; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: clamp(3rem, 10vw, 9rem); }.auth-intro__back { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 4rem; color: var(--muted); font-size: .88rem; }.auth-intro__back:hover { color: var(--text); }.auth-intro h1 { font-size: clamp(2.8rem, 5vw, 4.8rem); }.auth-intro h1 span { color: var(--green); }.auth-intro > p:not(.eyebrow) { max-width: 600px; color: var(--muted); font-size: 1.06rem; }.auth-benefits { display: grid; gap: 1rem; padding: 0; margin: 2rem 0 0; list-style: none; }.auth-benefits li { display: flex; align-items: center; gap: .8rem; }.auth-benefits li > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }.auth-benefits li div { display: grid; }.auth-benefits strong { font-size: .92rem; }.auth-benefits small { color: var(--muted); }
.auth-card-wrap { position: relative; }.auth-card { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid #303a47; border-radius: 15px; background: rgba(23, 28, 36, .96); box-shadow: var(--shadow); }.auth-card__heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }.auth-card__heading h2 { margin: 0 0 .15rem; font-size: 1.55rem; }.auth-card__heading p { margin: 0; color: var(--muted); font-size: .9rem; }.auth-card__help { margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; text-align: center; }.auth-security { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 1rem 0 0; color: var(--muted); font-size: .7rem; text-align: center; }
.form-stack { display: grid; gap: 1.15rem; }.field { display: grid; gap: .4rem; }.field label { color: #cdd2d8; font-size: .82rem; font-weight: 700; }.field label span { color: var(--muted); font-weight: 500; }.field small { color: var(--muted); font-size: .73rem; }.field input, .field select, .profile-picker select, .snapshot-picker select, .role-form select { width: 100%; min-height: 46px; padding: .68rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-small); outline: 0; background: #11161d; color: var(--text); transition: border-color .18s ease, box-shadow .18s ease; }.field input::placeholder { color: #65707d; }.field input:focus, .field select:focus, .profile-picker select:focus, .snapshot-picker select:focus, .role-form select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(52, 211, 153, .1); }.password-field { position: relative; }.password-field input { padding-right: 5.5rem; }.password-field button { position: absolute; top: 5px; right: 5px; bottom: 5px; padding-inline: .7rem; border: 0; border-radius: 5px; background: var(--surface-2); color: var(--muted); font-size: .75rem; font-weight: 700; }.password-field button:hover { color: var(--text); }
.auth-page--single { display: grid; place-items: center; }.auth-single { width: min(calc(100% - 48px), 680px); }.auth-card--wide { margin-top: 1rem; }.auth-card__heading--centered { display: grid; justify-items: center; text-align: center; }.auth-card__heading--centered h1 { margin: .5rem 0 .65rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }.auth-card__heading--centered .eyebrow { justify-content: center; margin: 0; }.password-rules { display: grid; padding: .85rem; border: 1px solid var(--line); border-radius: 8px; background: #131922; }.password-rules strong { font-size: .78rem; }.password-rules span { color: var(--muted); font-size: .75rem; }.state-icon { display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 1rem; border-radius: 50%; font-size: 1.4rem; font-weight: 900; }.state-icon--error { background: var(--red-dark); color: var(--red); }.auth-card__centered { text-align: center; }.auth-card__centered .eyebrow { justify-content: center; }.auth-card__centered h1 { font-size: 2rem; }.auth-card__centered p:not(.eyebrow) { color: var(--muted); }

/* Portal shared */
.portal-page { min-height: calc(100vh - 193px); padding-block: 3.5rem 6rem; }.portal-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }.portal-heading h1 { margin: 0 0 .5rem; font-size: clamp(2.25rem, 4.5vw, 3.8rem); }.portal-heading p:last-child { margin: 0; color: var(--muted); }.profile-picker, .snapshot-picker { display: grid; min-width: 220px; gap: .35rem; }.profile-picker label, .snapshot-picker label { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.profile-banner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(90deg, var(--surface), rgba(15, 42, 32, .45)); }.profile-banner__identity, .profile-banner__sync { display: flex; align-items: center; gap: .8rem; }.profile-avatar { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; background: var(--green-dark); color: var(--green); font-size: .8rem; font-weight: 900; }.profile-banner__identity div, .profile-banner__sync div { display: grid; }.profile-banner small { color: var(--muted); font-size: .65rem; }.profile-banner strong { font-size: .92rem; }.profile-banner__identity div > span { color: var(--green); font-size: .72rem; }.profile-banner__sync { padding-left: 1.2rem; border-left: 1px solid var(--line); }.profile-banner__sync strong { font-size: .8rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }.metric-card { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.metric-card--accent { border-color: rgba(52, 211, 153, .3); background: linear-gradient(140deg, var(--green-dark), var(--surface) 75%); }.metric-card__label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; color: var(--muted); font-size: .72rem; font-weight: 700; }.metric-card__label i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; background: var(--surface-2); color: var(--green); font-size: .75rem; font-style: normal; }.metric-card > strong { display: block; overflow: hidden; font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.metric-card > strong em { color: var(--muted); font-size: .85rem; font-style: normal; font-weight: 600; }.metric-card > small { color: var(--muted); font-size: .68rem; }
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }.panel { min-width: 0; padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.panel--span-2 { grid-column: 1; }.panel--full { grid-column: 1 / -1; }.panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }.panel__heading .eyebrow { margin-bottom: .25rem; }.panel__heading h2 { margin: 0; font-size: 1.2rem; }
.match-list { display: grid; }.match-row { display: grid; grid-template-columns: auto minmax(130px, 1fr) auto auto auto; align-items: center; gap: 1rem; padding: .8rem .2rem; border-top: 1px solid var(--line); }.match-row:first-child { border-top: 0; }.result-badge { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; font-size: .67rem; font-weight: 900; }.result-badge--win { background: var(--green-dark); color: var(--green); }.result-badge--loss { background: var(--red-dark); color: var(--red); }.match-row__main, .match-row__stat { display: grid; }.match-row__main strong { font-size: .85rem; }.match-row__main span, .match-row__stat small, .match-row time { color: var(--muted); font-size: .65rem; }.match-row__stat { min-width: 62px; }.match-row__stat strong { font-size: .82rem; }.match-row time { min-width: 88px; text-align: right; }
.dashboard-actions { grid-column: 2; grid-row: 1; }.dashboard-actions > a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .8rem .3rem; border-top: 1px solid var(--line); }.dashboard-actions > a:hover strong { color: var(--green); }.dashboard-actions > a > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: var(--surface-2); }.dashboard-actions > a div { display: grid; }.dashboard-actions > a strong { font-size: .82rem; }.dashboard-actions > a small { color: var(--muted); font-size: .65rem; }.dashboard-actions > a i { color: var(--muted); font-style: normal; }
.upload-timeline { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }.upload-item { position: relative; display: flex; min-width: 190px; align-items: center; gap: .55rem; padding: .65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }.upload-item__dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #566273; }.upload-item.is-current .upload-item__dot { background: var(--green); box-shadow: 0 0 0 4px rgba(52, 211, 153, .1); }.upload-item div { display: grid; flex: 1; }.upload-item strong { font-size: .72rem; }.upload-item small { color: var(--muted); font-size: .6rem; }
.empty-inline { display: flex; min-height: 100px; align-items: center; justify-content: center; gap: .7rem; padding: 1rem; color: var(--muted); text-align: center; }.empty-inline > span { font-size: 1.3rem; }.empty-inline p { margin: 0; }
.empty-state { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(2rem, 7vw, 6rem); padding: clamp(2rem, 6vw, 5rem); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }.empty-state__visual { position: relative; display: grid; min-height: 260px; place-items: center; border: 1px dashed #3a4553; border-radius: 14px; background: radial-gradient(circle, rgba(52, 211, 153, .1), transparent 60%); }.empty-state__visual span { position: relative; z-index: 1; font-size: 4rem; filter: grayscale(.2); }.empty-state__visual i { position: absolute; width: 130px; height: 130px; border: 1px solid rgba(52, 211, 153, .25); border-radius: 50%; box-shadow: 0 0 0 30px rgba(52, 211, 153, .025), 0 0 0 60px rgba(52, 211, 153, .015); }.empty-state__content > p:not(.eyebrow) { color: var(--muted); }.empty-steps { display: grid; gap: .7rem; padding: 0; margin: 1.5rem 0; list-style: none; }.empty-steps li { display: flex; gap: .7rem; }.empty-steps li > span { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--green-dark); color: var(--green); font-size: .65rem; font-weight: 900; }.empty-steps div { display: grid; }.empty-steps strong { font-size: .82rem; }.empty-steps small { color: var(--muted); }

/* Statistics */
.stats-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.stats-toolbar > div { display: flex; align-items: center; gap: .7rem; }.stats-toolbar p { display: grid; margin: 0; }.stats-toolbar strong { font-size: .85rem; }.stats-toolbar small { color: var(--muted); font-size: .68rem; }.snapshot-picker { min-width: 230px; }.snapshot-picker select { min-height: 40px; }
.section-tabs { position: sticky; z-index: 20; top: 72px; display: flex; gap: .3rem; overflow-x: auto; margin-bottom: 2.2rem; padding: .55rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(23, 28, 36, .94); backdrop-filter: blur(12px); scrollbar-width: thin; }.section-tabs a { flex: 0 0 auto; padding: .55rem .85rem; border-radius: 7px; color: var(--muted); font-size: .8rem; font-weight: 700; }.section-tabs a:hover { background: var(--surface-2); color: var(--text); }.stats-content { display: grid; gap: 4rem; }.stats-section { scroll-margin-top: 150px; }.section-title { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; }.section-title .eyebrow { margin-bottom: .25rem; }.section-title h2 { margin: 0; font-size: 1.65rem; }.section-title > p { max-width: 420px; margin: 0; color: var(--muted); font-size: .8rem; text-align: right; }.metric-grid--stats { grid-template-columns: repeat(3, 1fr); }.trend-list { display: grid; max-height: 480px; overflow-y: auto; }.trend-row { display: grid; grid-template-columns: minmax(130px, .5fr) 1fr 60px; align-items: center; gap: 1rem; padding: .72rem 0; border-top: 1px solid var(--line); }.trend-row:first-child { border-top: 0; }.trend-row time { color: var(--muted); font-size: .75rem; }.trend-row strong { text-align: right; }.trend-row progress, .checkout-grid progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--green); }.trend-row progress::-webkit-progress-bar, .checkout-grid progress::-webkit-progress-bar { border-radius: 999px; background: var(--surface-2); }.trend-row progress::-webkit-progress-value, .checkout-grid progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #19815f, var(--green)); }.trend-row progress::-moz-progress-bar, .checkout-grid progress::-moz-progress-bar { border-radius: 999px; background: var(--green); }
.checkout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }.checkout-grid article { display: grid; gap: .45rem; padding: .85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }.checkout-grid article > div { display: flex; justify-content: space-between; gap: .5rem; }.checkout-grid article span { color: var(--green); font-size: .75rem; font-weight: 800; }.checkout-grid small { color: var(--muted); font-size: .67rem; }
.panel--table { padding: 0; overflow: visible; }.panel--table > .panel__heading { padding: 1.3rem 1.3rem 0; }.table-scroll { overflow-x: auto; }.table-scroll table { width: 100%; border-collapse: collapse; }.table-scroll th, .table-scroll td { padding: .85rem 1rem; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }.table-scroll th { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }.table-scroll td { font-size: .8rem; }.table-scroll td > strong, .table-scroll td > small { display: block; }.table-scroll td > small { color: var(--muted); font-size: .65rem; }.table-action { text-align: right !important; }.table-action form { display: inline-flex; }

/* Download and devices */
.download-layout, .device-layout, .admin-stack { display: grid; gap: 1rem; }.download-layout { grid-template-columns: 1.5fr .8fr; align-items: start; }.download-card { display: grid; min-width: 0; grid-template-columns: auto 1fr; gap: 2rem; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid rgba(52, 211, 153, .28); border-radius: 15px; background: linear-gradient(140deg, var(--green-dark), var(--surface) 60%); }.download-card__visual { position: relative; display: grid; width: 150px; height: 150px; place-items: center; border: 1px solid rgba(52, 211, 153, .2); border-radius: 24px; background: rgba(14, 17, 22, .58); }.windows-mark { position: absolute; right: 10px; bottom: 10px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; background: var(--surface-2); color: var(--blue); font-size: 1.15rem; }.download-card__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }.download-card h2 { margin-bottom: .45rem; }.download-card__content > p { color: var(--muted); }.release-facts { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; margin: 1.2rem 0; }.release-facts div { display: grid; }.release-facts dt { color: var(--muted); font-size: .65rem; }.release-facts dd { margin: 0; font-size: .78rem; font-weight: 700; }.download-button { max-width: 100%; }.download-card__note { display: block; margin-top: .75rem; color: var(--muted); }
.install-panel { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.install-panel h2 { font-size: 1.35rem; }.install-steps { display: grid; gap: 1rem; padding: 0; margin: 1.2rem 0 1.5rem; list-style: none; }.install-steps li { display: flex; gap: .75rem; }.install-steps li > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(52, 211, 153, .3); border-radius: 50%; background: var(--green-dark); color: var(--green); font-size: .65rem; font-weight: 900; }.install-steps div { display: grid; }.install-steps strong { font-size: .82rem; }.install-steps small { color: var(--muted); }.checksum-panel { grid-column: 1 / -1; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.checksum-panel summary { font-weight: 750; }.checksum-panel > div { display: grid; grid-template-columns: 1fr auto; gap: .7rem; margin-top: .8rem; }.checksum-panel p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .8rem; }.checksum-panel code, .secret-code code { min-width: 0; overflow-wrap: anywhere; color: var(--green); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; }
.copy-button { min-height: 34px; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: .72rem; font-weight: 750; }.copy-button:hover { border-color: var(--green); }.copy-button.is-copied { border-color: var(--green); color: var(--green); }.copy-button--strong { border-color: rgba(52, 211, 153, .35); background: var(--green); color: #08100c; }
.token-reveal { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: 1.4rem; border: 1px solid rgba(52, 211, 153, .32); border-radius: var(--radius); background: linear-gradient(110deg, var(--green-dark), var(--surface) 80%); }.token-reveal--gold { border-color: rgba(251, 191, 36, .3); background: linear-gradient(110deg, var(--gold-dark), var(--surface) 80%); }.token-reveal__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--green); color: #08100c; font-weight: 900; }.token-reveal--gold .token-reveal__icon { background: var(--gold); color: #171109; }.token-reveal__content h2 { margin-bottom: .4rem; font-size: 1.35rem; }.token-reveal__content > p:not(.eyebrow, .token-reveal__warning) { color: var(--muted); }.secret-code { display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin-top: 1rem; padding: .7rem; border: 1px solid rgba(52, 211, 153, .2); border-radius: 8px; background: rgba(14, 17, 22, .72); }.token-reveal__warning { display: flex; gap: .5rem; margin: .8rem 0 0; color: var(--gold); font-size: .72rem; }.token-reveal__warning span { font-weight: 900; }
.device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.create-device > p { color: var(--muted); }.connect-guide { background: linear-gradient(145deg, var(--surface), rgba(15, 42, 32, .45)); }.install-steps--compact { margin-bottom: 0; }

/* Administration */
.admin-page { background: radial-gradient(circle at 90% 8%, rgba(251, 191, 36, .035), transparent 30rem); }.admin-indicator { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border: 1px solid rgba(251, 191, 36, .24); border-radius: 8px; background: var(--gold-dark); color: var(--gold); font-size: .75rem; font-weight: 800; }.admin-create { padding: 1.5rem; }.admin-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }.admin-form-grid__action { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }.admin-form-grid__action p { max-width: 640px; margin: 0; color: var(--muted); font-size: .78rem; }.check-field { display: flex; align-items: center; gap: .7rem; cursor: pointer; }.check-field input { width: 18px; height: 18px; accent-color: var(--green); }.check-field span { display: grid; }.check-field strong { font-size: .8rem; }.check-field small { color: var(--muted); }
.admin-table td:first-child { min-width: 220px; }.admin-table td > .badge { display: inline-flex; }.action-menu { position: relative; }.action-menu summary { display: inline-flex; min-height: 34px; align-items: center; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); font-size: .72rem; font-weight: 750; list-style: none; }.action-menu summary::-webkit-details-marker { display: none; }.action-menu__panel { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; display: grid; width: 240px; padding: .45rem; border: 1px solid #3b4654; border-radius: 9px; background: #141a21; box-shadow: var(--shadow); text-align: left; }.action-menu__panel form { display: grid; }.action-menu__panel button { width: 100%; padding: .55rem .65rem; border: 0; border-radius: 5px; background: transparent; color: var(--text); font-size: .72rem; text-align: left; }.action-menu__panel button:hover { background: var(--surface-2); }.action-menu__panel button.is-danger { color: var(--red); }.role-form { grid-template-columns: 1fr auto !important; gap: .35rem; padding: .5rem .65rem; border-block: 1px solid var(--line); }.role-form label { grid-column: 1 / -1; color: var(--muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; }.role-form select { min-height: 34px; padding: .3rem .4rem; font-size: .7rem; }.role-form button { width: auto; border: 1px solid var(--line); background: var(--surface-2); }
.release-guide { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.3rem; border: 1px solid rgba(251, 191, 36, .25); border-radius: var(--radius); background: linear-gradient(100deg, var(--gold-dark), var(--surface) 80%); }.release-guide__icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 10px; background: rgba(251, 191, 36, .13); color: var(--gold); font-size: 1.2rem; }.release-guide h2 { margin-bottom: .4rem; font-size: 1.25rem; }.release-guide p:last-child { margin: 0; color: var(--muted); }.hash-short { color: var(--green); font-size: .7rem; }.audit-note { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.audit-note > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--blue); font-weight: 900; }.audit-note p { margin: 0; color: var(--muted); font-size: .78rem; }.audit-note strong { color: var(--text); }.audit-table td { vertical-align: top; }.details-popover summary { color: var(--green); cursor: pointer; font-size: .72rem; font-weight: 700; }.details-popover code { display: block; max-width: 360px; margin-top: .4rem; overflow-wrap: anywhere; color: var(--muted); font-size: .65rem; white-space: normal; }

/* Legal and error */
.page-hero--legal .page-hero__inner { min-height: 310px; }.page-hero--legal h1 { margin: 0; font-size: 3.5rem; }.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); align-items: start; justify-content: center; gap: clamp(2rem, 7vw, 6rem); }.legal-nav { position: sticky; top: 105px; display: grid; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.legal-nav a { padding: .65rem .75rem; border-radius: 7px; color: var(--muted); font-size: .82rem; font-weight: 700; }.legal-nav a.is-active { background: var(--green-dark); color: var(--green); }.legal-content h2 { margin: 2.3rem 0 .7rem; font-size: 1.35rem; }.legal-content h2:first-of-type { margin-top: 0; }.legal-content p, .legal-content li, .legal-content address { color: #abb3bd; }.legal-content address { font-style: normal; }.legal-content a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }.legal-content li { margin-bottom: .45rem; }.legal-content strong { color: var(--text); }.legal-lead { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }.draft-notice { display: flex; gap: .8rem; margin-bottom: 2rem; padding: 1rem; border: 1px solid rgba(251, 191, 36, .3); border-radius: 9px; background: var(--gold-dark); }.draft-notice > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--gold); color: #171109; font-weight: 900; }.draft-notice p { margin: .2rem 0 0; color: #c7af72; font-size: .8rem; }.legal-updated { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .75rem; }
.error-page { display: grid; min-height: calc(100vh - 193px); place-items: center; padding-block: 5rem; }.error-card { display: grid; max-width: 900px; grid-template-columns: .75fr 1.25fr; align-items: center; gap: clamp(2rem, 7vw, 6rem); }.error-card__code { position: relative; display: grid; min-height: 280px; place-items: center; border: 1px dashed #3b4654; border-radius: 20px; background: radial-gradient(circle, rgba(248, 113, 113, .08), transparent 65%); }.error-card__code span { position: relative; z-index: 1; color: var(--red); font-size: clamp(4rem, 10vw, 7rem); font-weight: 900; letter-spacing: -.08em; }.error-card__code i { position: absolute; width: 150px; height: 150px; border: 1px solid rgba(248, 113, 113, .18); border-radius: 50%; box-shadow: 0 0 0 35px rgba(248, 113, 113, .02); }.error-card__content h1 { margin-bottom: .8rem; font-size: clamp(2rem, 4vw, 3.2rem); }.error-card__content > p:not(.eyebrow) { color: var(--muted); }.request-id { display: block; margin-top: 1.3rem; color: var(--muted); }.request-id code { color: #b7bec7; }

/* Responsive */
@media (max-width: 1120px) {
    .site-header__inner { gap: .8rem; }
    .site-nav__link { padding-inline: .5rem; font-size: .82rem; }
    .account-chip__name { max-width: 90px; }
    .hero__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .app-preview__main { padding: .9rem; }
    .preview-panels { grid-template-columns: 1fr; }
    .preview-next { display: none; }
    .download-layout { grid-template-columns: 1fr; }
    .install-panel { grid-row: 2; }
}

@media (max-width: 960px) {
    .site-header__inner { min-height: 66px; }
    .nav-toggle { display: block; }
    .site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: grid; max-height: calc(100vh - 67px); align-items: stretch; gap: .8rem; overflow-y: auto; padding: 1rem max(24px, calc((100vw - var(--shell)) / 2)); border-bottom: 1px solid var(--line); background: rgba(14, 17, 22, .98); }
    .js .site-nav:not(.is-open) { display: none; }
    .site-nav__links { display: grid; align-items: stretch; }
    .site-nav__link { padding: .75rem; font-size: .95rem; }
    .site-nav__link.is-active::after { top: .55rem; right: auto; bottom: .55rem; left: .1rem; width: 2px; height: auto; }
    .site-nav__divider { width: auto; height: 1px; margin-block: .4rem; }
    .site-nav__account { display: flex; justify-content: space-between; margin: 0; padding-top: .8rem; border-top: 1px solid var(--line); }
    .account-chip__name { max-width: none; }
    .hero__grid { min-height: 0; grid-template-columns: 1fr; padding-block: 4rem; }
    .hero__content { max-width: 730px; }
    .hero__visual { width: min(100%, 680px); margin-inline: auto; }
    .app-preview--hero { transform: none; }
    .detail-grid { grid-template-columns: 1fr; }.career-map { max-width: 680px; }
    .page-hero__inner { min-height: 350px; grid-template-columns: 1fr; align-content: end; gap: 1.5rem; }
    .showcase-card--wide { grid-template-columns: 1fr; }.showcase-card--reverse .showcase-card__copy { order: 0; }
    .insight-block, .insight-block--reverse { grid-template-columns: 1fr; gap: 2rem; }.insight-block--reverse .insight-block__copy { order: 0; }
    .auth-grid { grid-template-columns: 1fr; gap: 3rem; }.auth-intro__back { margin-bottom: 2rem; }.auth-card-wrap { width: min(100%, 620px); }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }.metric-grid--stats { grid-template-columns: repeat(3, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }.panel--span-2, .dashboard-actions { grid-column: 1; grid-row: auto; }
    .empty-state { grid-template-columns: 1fr; }.empty-state__visual { min-height: 200px; }
    .device-grid { grid-template-columns: 1fr; }
    .legal-layout { grid-template-columns: 1fr; }.legal-nav { position: static; display: flex; }
}

@media (max-width: 720px) {
    .shell { width: min(calc(100% - 32px), var(--shell)); }
    h1 { font-size: 2.7rem; }
    .section { padding-block: 4rem; }
    .site-footer__inner { grid-template-columns: 1fr; justify-items: center; gap: .8rem; padding-block: 1.5rem; text-align: center; }.site-footer__copy { text-align: center; }
    .split-intro { grid-template-columns: 1fr; gap: 1rem; }.feature-grid--three, .steps, .icon-grid { grid-template-columns: 1fr; }.steps::before { top: 0; bottom: 0; left: 24px; width: 1px; height: auto; }.steps li { grid-template-columns: auto 1fr; justify-items: start; gap: 1rem; text-align: left; }.steps__number { margin: 0; box-shadow: 0 0 0 8px var(--surface); }.steps p { max-width: none; }
    .cta-panel { align-items: flex-start; flex-direction: column; }
    .feature-showcase { grid-template-columns: 1fr; }.showcase-card--wide { grid-column: auto; }
    .real-media-placeholder { grid-template-columns: 1fr; }.real-media-placeholder__icon { width: 72px; height: 72px; }
    .portal-heading { align-items: flex-start; flex-direction: column; }.profile-picker { width: 100%; }.profile-banner { align-items: flex-start; flex-direction: column; }.profile-banner__sync { width: 100%; padding: .8rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
    .metric-grid, .metric-grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }.match-row { grid-template-columns: auto 1fr auto; }.match-row__stat:nth-of-type(2), .match-row time { display: none; }.match-row__stat { text-align: right; }
    .stats-toolbar { align-items: stretch; flex-direction: column; }.snapshot-picker { width: 100%; }.section-tabs { top: 66px; }.section-title { align-items: flex-start; flex-direction: column; gap: .4rem; }.section-title > p { text-align: left; }.checkout-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-content, .device-layout, .admin-stack { min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); }
    .stats-content > *, .device-layout > *, .admin-stack > *, .device-grid > *, .admin-form-grid > * { min-width: 0; max-width: 100%; }
    .stats-section, .stats-section > *, .panel--table, .table-scroll { width: 100%; min-width: 0; max-width: 100%; }
    .table-scroll { overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
    .download-card { grid-template-columns: 1fr; }.download-card__visual { width: 120px; height: 120px; }.checksum-panel > div { grid-template-columns: 1fr; }
    .admin-form-grid { grid-template-columns: 1fr; }.admin-form-grid__action { align-items: flex-start; flex-direction: column; }.admin-form-grid__action .button { width: 100%; }.admin-indicator { align-self: flex-start; }
    .error-card { grid-template-columns: 1fr; }.error-card__code { min-height: 200px; }
}

@media (max-width: 520px) {
    .brand__wordmark { font-size: 1.05rem; }
    .hero__grid { padding-block: 3rem; }.hero h1 { font-size: 2.75rem; }.hero .button-row, .hero .button { width: 100%; }.hero__facts { display: grid; }
    .app-preview__body { min-height: 330px; grid-template-columns: 40px 1fr; }.app-preview__side { gap: .5rem; padding-inline: .2rem; }.app-preview__side > span { width: 28px; height: 28px; }.app-preview__mini-brand img { width: 24px; }.app-preview__main { padding: .65rem; }.preview-kpis { grid-template-columns: 1fr 1fr; }.preview-kpis article:last-child { display: none; }.preview-kpis strong { font-size: .9rem; }.preview-chart { min-height: 145px !important; }.bar-chart { height: 90px; }
    .score-player div { display: grid; }.score-player strong { font-size: 1.2rem; }.mini-calendar { grid-template-columns: repeat(2, 1fr); }
    .dashboard-mock { grid-template-columns: 34px 1fr; }.dashboard-mock__content { padding: .65rem; }.dashboard-mock__nav img { width: 25px; }.mock-stat-row { grid-template-columns: 1fr 1fr; }.mock-stat-row span:last-child { display: none; }.mock-lower { grid-template-columns: 1fr; }.mock-lower > div:last-child { display: none; }.stats-mock__kpis { grid-template-columns: 1fr 1fr; }.stats-mock__kpis article:last-child { display: none; }.web-mock__cards { grid-template-columns: 1fr 1fr; }.web-mock__hello em { display: none; }
    .auth-card { padding: 1.2rem; }.auth-benefits small { font-size: .72rem; }.auth-security { align-items: flex-start; }
    .metric-grid, .metric-grid--stats { grid-template-columns: minmax(0, 1fr); }.match-row { gap: .65rem; }.match-row__main span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .panel { padding: 1rem; }.panel--table { padding: 0; }.section-tabs { margin-inline: 0; width: 100%; border-right: 0; border-left: 0; border-radius: 0; }
    .checkout-grid { grid-template-columns: 1fr; }.trend-row { grid-template-columns: 90px 1fr 50px; gap: .55rem; }.trend-row time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .token-reveal, .release-guide { grid-template-columns: 1fr; }.secret-code { grid-template-columns: 1fr; }.copy-button--strong { width: 100%; }
    .download-button { width: 100%; font-size: .85rem; }.release-facts { display: grid; grid-template-columns: 1fr 1fr; }
    .action-menu__panel { position: fixed; right: 16px; bottom: 16px; left: 16px; top: auto; width: auto; }
    .legal-nav { width: 100%; }.legal-nav a { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
    .button, .panel, .feature-card, .showcase-card, .metric-card, .app-preview, .media-frame { border: 1px solid CanvasText; }
    .eyebrow__dot, .preview-label span, .sync-dot { forced-color-adjust: none; }
}