/*
 * CloudGate panel — design system.
 * Ported VERBATIM from the legacy MineToday admin panel (site/admin/index.php, the
 * <style> block) — the colleague-built look we are preserving 1:1 for CloudGate.
 * Token architecture: brand -> density layer -> legacy aliases (--bg/2/3/4, --text/2/3)
 * -> semantic (event --ev-*, threat --threat-*). Do not redesign; extend additively.
 */

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            /* ===== Brand tokens (verbatim from main-site style.css) ===== */
            --grad-start: #ffaf3f; --grad-end: #ffc857;
            --accent: #ff9800; --accent-dark: #ef6c00; --accent-light: #ffc857;
            --accent-glow: rgba(255,175,63,0.32);
            --bg-deep: #050505;
            --text-primary: #f6f1e1; --text-secondary: #c9bda9; --text-muted: #b3a593;
            --success: #7fd18b; --error: #ff8a7a; --warning: #ffc857;
            --shadow-lg: 0 30px 60px rgba(0,0,0,0.35); --shadow-md: 0 18px 38px rgba(0,0,0,0.3);
            --transition: 0.25s ease;
            color-scheme: dark;

            /* ===== Admin density layer (surfaces tuned for dense tables on near-black) ===== */
            --surface: rgba(255,255,255,0.035);   /* inputs / inner panels */
            --surface-2: rgba(255,255,255,0.05);   /* cards / modals / stat-cards */
            --surface-hover: rgba(255,255,255,0.08);
            --border: rgba(255,255,255,0.10); --border-light: rgba(255,255,255,0.18);
            --radius: 12px; --radius-sm: 8px;

            /* ===== Legacy aliases — existing markup/JS re-themes with ZERO renames ===== */
            --bg: var(--bg-deep);
            --bg2: var(--surface);
            --bg3: var(--surface-2);
            --bg4: var(--surface-hover);
            --text: var(--text-primary);
            --text2: var(--text-secondary);
            --text3: var(--text-muted);

            /* ===== Event-type tokens (warm-shifted, kept distinct) ===== */
            --ev-new: #7fd18b; --ev-alt: #ffc857; --ev-limit: #ffae6b;
            --ev-banned: #ff8a7a; --ev-mobile: #d9a8ff; --ev-vpn: #7fd1d1; --ev-spoof: #ffb84d;

            /* ===== Threat tokens ===== */
            --threat-critical: #ff6f5e; --threat-high: #ff8a7a; --threat-medium: #ffc857;
            --threat-low: #9cc4ff; --threat-clean: #7fd18b;
        }
        body { font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif; background: radial-gradient(circle at top right, rgba(255,200,87,0.05), transparent 42%), var(--bg-deep); color: var(--text); min-height: 100vh; }
        a { color: var(--accent-light); text-decoration: none; }
        a:hover { text-decoration: underline; }

        /* Login */
        .login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
        .login-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; max-width: 380px; width: 100%; text-align: center; }
        .login-card h1 { font-size: 1.4rem; margin-bottom: 8px; }
        .login-card p { color: var(--text2); font-size: 0.9rem; margin-bottom: 24px; }
        .login-card input { width: 100%; padding: 12px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.95rem; margin-bottom: 16px; outline: none; }
        .login-card input:focus { border-color: var(--accent); }
        .login-card button { width: 100%; padding: 12px; background: linear-gradient(135deg, var(--grad-start), var(--grad-end)); border: none; border-radius: 8px; color: #2b1a00; font-weight: 700; font-size: 0.95rem; cursor: pointer; box-shadow: 0 10px 26px var(--accent-glow); }
        .login-card button:hover { opacity: 0.9; }
        .login-error { color: var(--error); font-size: 0.85rem; margin-bottom: 12px; }

        /* Layout */
        .layout { display: flex; min-height: 100vh; }
        .sidebar { width: 220px; background: var(--bg2); border-right: 1px solid var(--border); padding: 20px 0; flex-shrink: 0; display: flex; flex-direction: column; }
        .sidebar-logo { padding: 0 20px 20px; font-weight: 700; font-size: 1.1rem; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
        .sidebar-nav { flex: 1; }
        .sidebar-nav a { display: block; padding: 10px 20px; color: var(--text2); font-size: 0.9rem; text-decoration: none; transition: 0.2s; }
        .sidebar-nav a:hover, .sidebar-nav a.active { color: var(--text); background: var(--bg4); }
        .sidebar-nav a.active { border-left: 3px solid var(--accent); }
        .sidebar-bottom { padding: 12px 20px; border-top: 1px solid var(--border); }
        .sidebar-bottom form button { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 0.85rem; }
        .sidebar-bottom form button:hover { color: var(--error); }
        .sidebar-nav a { border-left: 3px solid transparent; }

        /* Workspace chip-row (batch 3) — sub-navigation inside Расследование / Настройки */
        .chip-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
        .chip-bar:empty { display: none; }
        .chip { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text2); cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: background var(--transition), border-color var(--transition), color var(--transition); white-space: nowrap; }
        .chip:hover { background: var(--surface-hover); color: var(--text); }
        .chip.active { background: rgba(255,175,63,0.15); border-color: var(--accent); color: var(--accent-light); }
        .chip .chip-badge { display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #2b1a00; font-size: 0.7rem; font-weight: 700; text-align: center; }
        .chip-refresh { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: 0.85rem; white-space: nowrap; transition: background var(--transition), color var(--transition); }
        .chip-refresh:hover { background: var(--surface-hover); color: var(--accent-light); }

        .content { flex: 1; padding: 24px 32px; overflow-x: auto; }
        .content h2 { font-size: 1.3rem; margin-bottom: 20px; }

        /* Stats */
        .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
        .stat-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
        .stat-card .label { font-size: 0.8rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
        .stat-card .value { font-size: 1.8rem; font-weight: 700; }
        .stat-card .value.green { color: var(--success); }
        .stat-card .value.red { color: var(--error); }
        .stat-card .value.yellow { color: var(--warning); }
        .stat-card .value.purple { color: var(--accent-light); }

        /* ── Stat-card ambient trend sparkline (additive; the number stays the hero) ──
           The line is ALWAYS the calm --accent-light amber; only the caption carries
           green/red valence, and the ▲/▼/• glyph carries direction — so meaning is never
           colour-only (color-blind + screen-reader safe). The viewBox is a normalised
           100×28 box stretched by preserveAspectRatio=none; non-scaling-stroke keeps the
           1.5px line crisp at any width/scale. The height is in rem so it tracks the scale
           switch, and the block lives inside .stat-card so density-hide + the mobile skin
           carry it for free. */
        .stat-card .stat-spark { display: block; width: 100%; height: 1.75rem; margin-top: 11px; overflow: visible; }
        .stat-spark__fill { fill: var(--accent-light); opacity: 0.08; stroke: none; }
        .stat-spark__line { fill: none; stroke: var(--accent-light); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.9; }
        .stat-spark__dot  { fill: none; stroke: var(--accent-light); stroke-width: 3.4; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2.5px var(--accent-glow)); }
        .stat-spark__base { stroke: var(--border-light); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }

        /* Caption — the colour-INDEPENDENT affordance (direction glyph + signed delta + period). */
        .stat-trend { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; font-size: 0.72rem; color: var(--text3); font-variant-numeric: tabular-nums; }
        .stat-trend__arw   { font-size: 0.8em; line-height: 1; }
        .stat-trend__delta { font-weight: 600; }
        .stat-trend--good .stat-trend__arw, .stat-trend--good .stat-trend__delta { color: var(--success); }
        .stat-trend--bad  .stat-trend__arw, .stat-trend--bad  .stat-trend__delta { color: var(--error); }
        .stat-trend--flat .stat-trend__arw, .stat-trend--flat .stat-trend__delta { color: var(--text3); }

        /* One-shot draw-in on first paint (pathLength=1 → length-independent); reduced-motion
           users get the final drawn line instantly, which is also the JS-off static state. */
        @media (prefers-reduced-motion: no-preference) {
            .stat-spark__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spark-draw 0.8s ease forwards; }
            .stat-spark__dot  { opacity: 0; animation: spark-fade 0.35s 0.55s ease forwards; }
            @keyframes spark-draw { to { stroke-dashoffset: 0; } }
            @keyframes spark-fade { to { opacity: 1; } }
        }

        /* Controls */
        .controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
        .controls select, .controls input { padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.85rem; outline: none; }
        .controls select:focus, .controls input:focus { border-color: var(--accent); }
        .controls input { min-width: 200px; }

        /* Table */
        .table-wrap { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
        th { text-align: left; padding: 10px 12px; color: var(--text3); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
        td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text2); }
        tr:hover td { background: var(--bg4); }
        .badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }

        /* Entity card — ONE consistent type scale (every row/label/badge the same) */
        .ent-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 8px; }
        .ent-label:first-child { margin-top: 0; }
        .ent-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
        .ent-card.banned { border-color: rgba(255,138,122,0.35); }
        .ent-card__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
        .ent-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.82rem; color: var(--text-secondary); }
        .ent-row:last-child { border-bottom: none; }
        .ent-time { color: var(--text-muted); white-space: nowrap; min-width: 116px; font-variant-numeric: tabular-nums; }
        .ent-meta { color: var(--text-muted); font-size: 0.82rem; }
        .badge-verified { background: rgba(127,209,139,0.15); color: var(--success); }
        .badge-rejected { background: rgba(255,138,122,0.15); color: var(--error); }
        .badge-pending { background: rgba(255,200,87,0.15); color: var(--warning); }
        .clickable { cursor: pointer; color: var(--accent-light); }
        .clickable:hover { text-decoration: underline; }

        /* Pagination */
        .pagination { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
        .pagination button { padding: 6px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; color: var(--text2); cursor: pointer; font-size: 0.85rem; }
        .pagination button:hover { background: var(--bg4); color: var(--text); }
        .pagination button.active { background: var(--accent); color: #2b1a00; font-weight: 700; border-color: var(--accent); }
        .pagination span { color: var(--text3); font-size: 0.85rem; }

        /* Sortable headers + toggle switch (batch 2) */
        th.th-sort { cursor: pointer; user-select: none; transition: color var(--transition); }
        th.th-sort:hover { color: var(--text-secondary); }
        th.th-sort .ind { font-size: 0.7em; }
        .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 0.85rem; color: var(--text2); white-space: nowrap; }
        .switch input { position: absolute; opacity: 0; pointer-events: none; }
        .switch .track { width: 38px; height: 22px; border-radius: 11px; background: var(--surface-hover); border: 1px solid var(--border); position: relative; flex-shrink: 0; transition: background var(--transition), border-color var(--transition); }
        .switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform var(--transition), background var(--transition); }
        .switch input:checked + .track { background: rgba(255,175,63,0.30); border-color: var(--accent); }
        .switch input:checked + .track::after { transform: translateX(16px); background: var(--accent); }

        /* Modal */
        /* Overlay = invisible click-catcher only (no full-screen dimming — the surrounding
           table stays visible so you can reference it without closing the modal). The window
           itself is opaque + heavily shadowed so it floats cleanly over the live page. */
        .modal-overlay { display: none; position: fixed; inset: 0; background: transparent; z-index: 100; align-items: center; justify-content: center; padding: 20px; }
        .modal-overlay.active { display: flex; }
        .modal { background: #111214; border: 1px solid var(--border-light); border-radius: var(--radius); max-width: 700px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,0.8); }
        .modal h3 { font-size: 1.1rem; margin-bottom: 16px; }
        .modal-close { float: right; background: none; border: none; color: var(--text3); font-size: 1.5rem; cursor: pointer; line-height: 1; }
        .modal-close:hover { color: var(--text); }
        .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
        .detail-item { background: var(--bg2); padding: 10px 14px; border-radius: 8px; }
        .detail-item .dlabel { font-size: 0.75rem; color: var(--text3); text-transform: uppercase; margin-bottom: 4px; }
        .detail-item .dvalue { font-size: 0.9rem; word-break: break-all; }
        .detail-full { grid-column: 1 / -1; }
        .signals-list { background: var(--bg2); padding: 14px; border-radius: 8px; font-size: 0.8rem; font-family: monospace; max-height: 300px; overflow-y: auto; line-height: 1.6; }
        .signals-list .sig-key { color: var(--accent-light); }
        .signals-list .sig-val { color: var(--text2); }

        .btn-sm { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); cursor: pointer; font-size: 0.8rem; margin-right: 8px; }
        .btn-sm:hover { background: var(--bg4); color: var(--text); }
        .btn-sm.danger { border-color: rgba(255,138,122,0.3); color: var(--error); }
        .btn-sm.danger:hover { background: rgba(255,138,122,0.1); }

        /* IP Cache */
        .cache-controls { margin-bottom: 16px; }
        .cache-controls button { padding: 8px 16px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text2); cursor: pointer; font-size: 0.85rem; }
        .cache-controls button:hover { background: var(--bg4); color: var(--error); }

        /* Section toggle */
        .section { display: none; }
        .section.active { display: block; }

        /* Event log badges */
        .ev-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }
        .ev-NEW_DEVICE     { background: rgba(127,209,139,0.15); color: var(--ev-new); }
        .ev-ALT_LINKED     { background: rgba(255,200,87,0.15);  color: var(--ev-alt); }
        .ev-LIMIT_EXCEEDED { background: rgba(255,174,107,0.15); color: var(--ev-limit); }
        .ev-BANNED_ATTEMPT { background: rgba(255,138,122,0.18); color: var(--ev-banned); }
        .ev-MOBILE_BLOCKED { background: rgba(217,168,255,0.18); color: var(--ev-mobile); }
        .ev-VPN_BLOCKED    { background: rgba(127,209,209,0.18); color: var(--ev-vpn); }
        .ev-SPOOF_FLAG     { background: rgba(255,184,77,0.18);  color: var(--ev-spoof); }

        /* Device list */
        .dev-short-id { font-family: monospace; font-size: 0.82rem; color: var(--accent-light); font-weight: 600; }
        .dev-players  { display: flex; flex-wrap: wrap; gap: 4px; }
        .dev-player   { padding: 2px 8px; border-radius: 4px; background: var(--bg4); color: var(--text2); font-size: 0.78rem; border: 1px solid var(--border); }
        .dev-banned-row td { opacity: 0.7; }
        .dev-banned-row td:first-child { border-left: 3px solid var(--error); padding-left: 9px; }
        .btn-ban  { padding: 4px 12px; border-radius: 5px; border: 1px solid rgba(255,138,122,0.35); background: rgba(255,138,122,0.08); color: var(--error); cursor: pointer; font-size: 0.78rem; white-space: nowrap; }
        .btn-ban:hover  { background: rgba(255,138,122,0.18); }
        .btn-unban { padding: 4px 12px; border-radius: 5px; border: 1px solid rgba(127,209,139,0.35); background: rgba(127,209,139,0.08); color: var(--success); cursor: pointer; font-size: 0.78rem; white-space: nowrap; }
        .btn-unban:hover { background: rgba(127,209,139,0.18); }

        /* Device modal */
        .dev-modal-accounts { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
        .dev-account-row { display: flex; align-items: center; justify-content: space-between; background: var(--bg2); padding: 10px 14px; border-radius: 8px; }
        .dev-account-name { font-weight: 600; color: var(--text); }
        .dev-account-date { font-size: 0.78rem; color: var(--text3); }

        /* Fingerprint cards */
        .fp-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
        .fp-card.threat-critical { border-left: 4px solid var(--threat-critical); }
        .fp-card.threat-high { border-left: 4px solid var(--threat-high); }
        .fp-card.threat-medium { border-left: 4px solid var(--threat-medium); }
        .fp-card.threat-low { border-left: 4px solid var(--threat-low); }
        .fp-card.threat-clean { border-left: 4px solid var(--threat-clean); }
        .fp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
        .fp-header-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
        .fp-players { font-weight: 700; font-size: 1rem; }
        .fp-threat { padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
        .fp-threat.critical { background: rgba(255,111,94,0.15); color: var(--threat-critical); }
        .fp-threat.high { background: rgba(255,138,122,0.15); color: var(--threat-high); }
        .fp-threat.medium { background: rgba(255,200,87,0.15); color: var(--threat-medium); }
        .fp-threat.low { background: rgba(156,196,255,0.15); color: var(--threat-low); }
        .fp-threat.clean { background: rgba(127,209,139,0.15); color: var(--threat-clean); }
        .fp-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; font-size: 0.82rem; }
        .fp-meta-item { color: var(--text3); }
        .fp-meta-item strong { color: var(--text2); }
        .fp-players-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
        .fp-player-tag { padding: 4px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 500; }
        .fp-player-tag.verified { background: rgba(127,209,139,0.1); color: var(--success); border: 1px solid rgba(127,209,139,0.2); }
        .fp-player-tag.rejected { background: rgba(255,138,122,0.1); color: var(--error); border: 1px solid rgba(255,138,122,0.2); }
        .fp-player-tag.pending { background: rgba(255,200,87,0.1); color: var(--warning); border: 1px solid rgba(255,200,87,0.2); }
        .fp-details { display: none; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
        .fp-details.open { display: block; }
        .fp-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text3); padding: 5px 12px; cursor: pointer; font-size: 0.8rem; }
        .fp-toggle:hover { color: var(--text); background: var(--bg4); }
        .fp-sections { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
        .fp-section { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
        .fp-section-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; user-select: none; }
        .fp-section-header:hover { background: var(--bg4); }
        .fp-section-title { font-size: 0.82rem; font-weight: 600; color: var(--text2); display: flex; align-items: center; gap: 8px; }
        .fp-section-title .icon { font-size: 1rem; }
        .fp-section-arrow { color: var(--text3); font-size: 0.75rem; transition: transform 0.2s; }
        .fp-section.open .fp-section-arrow { transform: rotate(180deg); }
        .fp-section-body { display: none; padding: 0 14px 12px; }
        .fp-section.open .fp-section-body { display: block; }
        .fp-params { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
        .fp-param { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.78rem; }
        .fp-param:last-child { border-bottom: none; }
        .fp-param-key { color: var(--text3); }
        .fp-param-val { color: var(--text2); font-family: monospace; font-size: 0.76rem; text-align: right; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .fp-param-full { grid-column: 1 / -1; }
        .fp-param-full .fp-param-val { max-width: none; white-space: normal; word-break: break-all; font-size: 0.72rem; line-height: 1.4; }
        .fp-timeline { font-size: 0.82rem; }
        .fp-timeline-item { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); align-items: flex-start; }
        .fp-timeline-item:last-child { border-bottom: none; }
        .fp-timeline-time { color: var(--text3); white-space: nowrap; min-width: 130px; }
        .fp-timeline-player { font-weight: 600; min-width: 100px; }
        .fp-timeline-info { color: var(--text3); }
        .fp-ips, .fp-tzs { display: flex; gap: 6px; flex-wrap: wrap; }
        .fp-ip-tag, .fp-tz-tag { padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; background: var(--bg2); color: var(--text2); border: 1px solid var(--border); }
        .fp-count { font-size: 0.85rem; color: var(--text3); }

        @media (max-width: 768px) {
            .layout { flex-direction: column; }
            .sidebar { width: 100%; flex-direction: row; overflow-x: auto; }
            .sidebar-nav { display: flex; }
            .sidebar-nav a { white-space: nowrap; }
            .stats { grid-template-columns: repeat(2, 1fr); }
            .detail-grid { grid-template-columns: 1fr; }
        }