/* ══════════════════════════════════
   COMMON — single source for /dashboard/* chrome + tokens
   Brand: infinite α — see docs/brand-guide.md
   ══════════════════════════════════ */

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

:root {
    /* ── Page background ── */
    --bg-dark: #0b1215;            /* brand background */
    /* preserved alternates (do not delete — may be reused):
       --bg-dark-pre-rebrand:    #0a0f1a;
       --bg-dark-egos-pre-rebrand:#0a0f1c;
    */

    /* ── Surfaces ── */
    --bg-nav:         rgba(13, 19, 23, 0.85);
    --bg-surface:     rgba(99, 102, 241, 0.04);
    --bg-surface-alt: rgba(99, 102, 241, 0.08);
    --bg-hover:       rgba(99, 102, 241, 0.12);
    --border: rgba(255, 255, 255, 0.05);

    /* ── Text ── */
    --text-primary: #e2e8f0;
    --text-muted:   #94a3b8;       /* slate-400 — body minimum (WCAG AA) */
    --text-dim:     #64748b;       /* slate-500 — captions / tiny labels only */
    /* preserved alternates:
       --text-muted-old: #9DAFCD;
       --text-dim-old:   #7A8BA4;
    */

    /* ── Brand primaries ── */
    --indigo: #6366f1;
    --mint:   #34d399;             /* brand mint — α symbol, sidebar gradient */
    --accent:   var(--indigo);     /* role: primary accent */
    --positive: #2dd4bf;           /* role: up / buy / alive — Aqua (P&L green) */
    --positive-rgb: 45, 212, 191;
    --negative: #fb7185;           /* role: down / sell — Coral */
    --negative-rgb: 251, 113, 133;
    /* preserved alternates (former primaries, retained for retrieval):
       --accent-cyan-pre-rebrand:       #1fc3f9;
       --tier-minor-violet-pre-rebrand: #a78bfa;
       --positive-cyan-pre-rebrand:     #1be3c2;
       --positive-mint-pre-aqua:        #34d399;     (was var(--mint), pre-Aqua P&L migration)
       --negative-pink-pre-coral:       #ff6482;     (pre-Coral P&L migration)
    */

    /* ── B-family secondary (selected: B2 azure pop) ── */
    --b2:        #4d9eff;          /* anchor */
    --b2-soft:   #8ec1ff;          /* lighter pair (gradient end / readable text on dark) */
    --b2-rgb:    77, 158, 255;

    /* ── Tier scale (agent rankings) — B-v3 (75% Olympic + 25% Champagne)
           Champagne-leaning medals: warmth retained, saturation dialled down to harmonise
           with B2 azure chrome. Selected from the agents-prototype-medals comparison. ── */
    --tier-major: #d4b850;          /* rich champagne (gold leaning) */
    --tier-major-rgb: 212, 184, 80;
    --tier-minor: #cfd9e3;          /* pearl-silver */
    --tier-minor-rgb: 207, 217, 227;
    --tier-bench: #a87850;          /* warm patina (bronze leaning) */
    --tier-bench-rgb: 168, 120, 80;
    /* preserved alternates (tier revision history):
       --tier-major-pre-rebrand:    #6366f1;   (legacy indigo, collided with --accent CTA)
       --tier-major-sky-cyan-eval:  #22d3ee;   (T5 sky cyan, cool-tone overlap)
       --tier-major-champagne-eval: #b89640;   (G2 champagne gold, gold-only direction)
       --tier-major-olympic:        #d4af37;   (M1 olympic gold — pre-B-v3, too saturated against B2)
       --tier-minor-lifecycle:      #5588e8;   (lifecycle Algorithms midtone)
       --tier-minor-olympic:        #cbd5e1;   (slate-300 silver — pre-B-v3)
       --tier-bench-olympic:        #a87245;   (M1 bronze — pre-B-v3)
       --tier-bench-slate:          #64748b;   (slate-500)
    */

    /* ── Cockpit accent — V4 (B2 anchor absorbed): panel chrome unified with
           voice elements at full B2 saturation. Cockpit identity merges into the
           dashboard's general voice — maximum consistency, instrument mood carried
           by chrome details (border glow, KPI cards) rather than hue separation. ── */
    --cockpit-accent:     #4d9eff;       /* B2 anchor */
    --cockpit-accent-rgb: 77, 158, 255;
    /* preserved alternates (cockpit-accent revision history):
       --cockpit-accent-mint-teal: #7eb8c8 / 126, 184, 200   (V0: original cyan-side mint-teal)
       --cockpit-accent-b2-desat:  #88a8c8 / 136, 168, 200   (V2: B2 hue at low saturation)
    */

    /* ── Narrative warm — V1 (introduced for egos panel "Where it shines").
           First warm hue in the dashboard's cool-tone vocabulary. Reserved for
           narrative chrome only (decorative callouts, NOT signals). Distinct
           from tier-bench (#a87850 patina brown) and tier-major (#d4b850
           champagne) by both hue and saturation. Never used for PnL, status,
           or league signal. ── */
    --narrative-warm:     #d8a878;       /* sand-amber */
    --narrative-warm-rgb: 216, 168, 120;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg-dark);
    color: var(--text-muted);
    min-height: 100vh;
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }

/* ══════════════════════════════════
   TOPBAR + WORDMARK (brand lockup)
   ══════════════════════════════════ */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; height: 48px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
    background: rgba(11, 18, 21, 0.85);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    z-index: 100;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; }

/* Brand wordmark lockup — see brand-guide §2 */
.logo-lockup {
    display: inline-flex; align-items: baseline; gap: 0;
    text-decoration: none; line-height: 1;
}
.lg-infinite {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.8);
}
.lg-alpha {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 24px;
    color: var(--mint);
    line-height: 1;
    text-transform: none;
    margin-left: 0.15em;
    text-shadow: 0 0 0.35em rgba(52,211,153,0.5), 0 0 1em rgba(52,211,153,0.2);
}

/* ── Language toggle (topbar pill, matches landing pattern) ── */
.lang-toggle {
    display: inline-flex;
    align-items: center;
}
.lang-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 9999px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.lang-toggle-btn:hover {
    color: #fff;
}
.lang-toggle-icon {
    font-size: 13px;
    line-height: 1;
}
.lang-toggle-label {
    line-height: 1;
}

/* ══════════════════════════════════
   SIDEBAR (desktop)
   ══════════════════════════════════ */
.sidebar {
    position: fixed; left: 0; top: 48px; bottom: 0; width: 72px;
    display: flex; flex-direction: column; align-items: center;
    padding: 16px 0; gap: 4px;
    background: var(--bg-nav);
    border-right: 1px solid var(--border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    z-index: 90;
}
.sidebar-btn {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    width: 100%; padding: 12px 0; gap: 2px;
    text-decoration: none; color: var(--text-dim); transition: color 0.15s;
}
.sidebar-btn:hover { color: var(--mint); }
.sidebar-btn.active {
    background:
        linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(52,211,153,0.06) 100%);
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, var(--indigo) 0%, var(--mint) 100%) 1;
    color: var(--indigo);            /* fallback */
}
.sidebar-btn.active .material-symbols-outlined,
.sidebar-btn.active .sidebar-label {
    background: linear-gradient(135deg, var(--indigo) 0%, var(--mint) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sidebar-btn .material-symbols-outlined { font-size: 24px; }
.sidebar-label { font-size: 10px; font-weight: 500; }

/* ══════════════════════════════════
   BOTTOM NAV (tablet/mobile)
   ══════════════════════════════════ */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; height: 64px;
    background: var(--bg-nav);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    align-items: center; z-index: 90;
    padding: 0 16px;
}
.bottom-nav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: var(--text-dim); transition: color 0.15s;
    padding: 8px 8px;
    flex: 0 0 auto; min-width: 56px;
}
.bottom-nav-btn:hover { color: var(--mint); }
.bottom-nav-btn.active {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--indigo) 0%, var(--mint) 100%) 1;
    color: var(--indigo);            /* fallback */
}
.bottom-nav-btn.active .material-symbols-outlined,
.bottom-nav-btn.active .bottom-nav-label {
    background: linear-gradient(135deg, var(--indigo) 0%, var(--mint) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bottom-nav-btn .material-symbols-outlined { font-size: 24px; }
.bottom-nav-label { font-size: 10px; font-weight: 500; }

/* ══════════════════════════════════
   NAV CONNECTOR — dashed line + traveling brightness wave
   Suggests Egos → Agents → Portfolio journey direction.
   Wave travels top→bottom (sidebar) / left→right (bottom-nav).
   Static dashes always visible; wave brightens them as it passes.
   ══════════════════════════════════ */
.sidebar .nav-conn,
.bottom-nav .nav-conn {
    position: relative;
    pointer-events: none;
}

/* Sidebar — vertical (top → bottom) */
.sidebar .nav-conn {
    flex: 0 0 18px;
    width: 1px;
    background-image: linear-gradient(180deg, rgba(165, 180, 252, 0.80) 50%, transparent 50%);
    background-size: 1px 5px;
    filter: drop-shadow(0 0 3px rgba(99, 102, 241, 0.60));
}
.sidebar .nav-conn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        transparent 26%,
        rgba(99,102,241,0.55) 38%,
        rgba(99,102,241,0.95) 46%,
        rgba(52,211,153,1.00) 50%,
        rgba(52,211,153,0.95) 54%,
        rgba(52,211,153,0.55) 62%,
        transparent 74%);
    background-size: 100% 220%;
    background-position: 0 220%;
    -webkit-mask-image: linear-gradient(180deg, black 50%, transparent 50%);
            mask-image: linear-gradient(180deg, black 50%, transparent 50%);
    -webkit-mask-size: 1px 5px;
            mask-size: 1px 5px;
    animation: navWaveDown 6s linear infinite;
}
@keyframes navWaveDown {
    from { background-position: 0 220%; }
    to   { background-position: 0 -120%; }
}

/* Bottom-nav — horizontal (left → right) */
.bottom-nav .nav-conn {
    flex: 1 1 auto;
    height: 1px;
    min-width: 24px;
    margin: 0 6px;
    background-image: linear-gradient(90deg, rgba(165, 180, 252, 0.80) 50%, transparent 50%);
    background-size: 5px 1px;
    filter: drop-shadow(0 0 3px rgba(99, 102, 241, 0.60));
}
.bottom-nav .nav-conn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        transparent 26%,
        rgba(99,102,241,0.55) 38%,
        rgba(99,102,241,0.95) 46%,
        rgba(52,211,153,1.00) 50%,
        rgba(52,211,153,0.95) 54%,
        rgba(52,211,153,0.55) 62%,
        transparent 74%);
    background-size: 220% 100%;
    background-position: 220% 0;
    -webkit-mask-image: linear-gradient(90deg, black 50%, transparent 50%);
            mask-image: linear-gradient(90deg, black 50%, transparent 50%);
    -webkit-mask-size: 5px 1px;
            mask-size: 5px 1px;
    animation: navWaveRight 6s linear infinite;
}
@keyframes navWaveRight {
    from { background-position: 220% 0; }
    to   { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar .nav-conn::after,
    .bottom-nav .nav-conn::after { animation: none; }
}

/* ══════════════════════════════════
   PAGE
   ══════════════════════════════════ */
.page-content {
    margin-top: 48px; margin-left: 72px;
    padding: 16px 20px; margin-right: auto;
}

/* ══════════════════════════════════
   HERO GLOSSARY CHIP — shared across dashboard pages
   Non-interactive definition anchor placed between page title and subtitle.
   Each page defines its own primary concept in a chip (one per page).
   See: /egos, /agents, /portfolio, /viewer
   ══════════════════════════════════ */
.hero-glossary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 11px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.22);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-glossary-icon.material-symbols-outlined {
    font-size: 14px;
    color: var(--indigo);
    opacity: 0.9;
}
.hero-glossary-clause {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.hero-glossary-term {
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--indigo);
    text-transform: lowercase;
}
.hero-glossary-x {
    color: var(--mint);
    font-weight: 700;
    margin-right: 1px;
}
.hero-glossary-eq {
    color: var(--text-dim);
    opacity: 0.6;
    font-weight: 400;
}
.hero-glossary-def {
    color: #fff;
    font-weight: 500;
}
.hero-glossary-sep {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

/* Spacing normalization — keep title→chip and chip→subtitle gaps consistent
   across pages that use either .hero-* or .page-* hero classes. */
.hero-title:has(+ .hero-glossary),
.page-title:has(+ .hero-glossary) {
    margin-bottom: 10px;
}
.hero-glossary + .hero-subtitle,
.hero-glossary + .page-subtitle {
    margin-top: 0;
}

@media (max-width: 768px) {
    .hero-glossary {
        font-size: 11px;
        padding: 5px 12px 5px 9px;
        gap: 8px;
        max-width: 100%;
        flex-wrap: wrap;
    }
}

/* ══════════════════════════════════
   COCKPIT STYLING — instrument mood (V4: B2-absorbed)
   Panel chrome (--cockpit-accent) and voice elements (--b2-*) share the same
   B2 anchor hue. Instrument identity is carried by chrome details — border glow,
   KPI card lift, header underline gradient — not by a separate hue family.
   ══════════════════════════════════ */

.cockpit-panel {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 40%),
        rgba(22,30,34,0.72);
    border: 1px solid rgba(var(--cockpit-accent-rgb), 0.12);
    border-top-color: rgba(255,255,255,0.16);
    border-left-color: rgba(255,255,255,0.12);
    border-radius: 12px;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow:
        0 8px 28px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.cockpit-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(var(--cockpit-accent-rgb), 0.12);
    position: relative;
}
.cockpit-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, rgba(var(--cockpit-accent-rgb), 0.30) 15%,
        rgba(var(--cockpit-accent-rgb), 0.50) 50%, rgba(var(--cockpit-accent-rgb), 0.30) 85%,
        transparent 100%);
    box-shadow:
        0 0 8px rgba(var(--cockpit-accent-rgb), 0.30), 0 0 20px rgba(var(--cockpit-accent-rgb), 0.15),
        0 0 40px rgba(var(--cockpit-accent-rgb), 0.06), 0 2px 12px rgba(var(--cockpit-accent-rgb), 0.10);
}
.cockpit-title { font-size: 24px; font-weight: 800; color: #fff; font-family: 'Sora', 'Inter', sans-serif; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 8px; }
/* Cockpit subtitle text — V3 split: subtitle voice migrates to B2 (consistent with
   non-cockpit pages' subtitle), while panel chrome (border, glow, KPI cards, tooltip,
   info-link) stays on --cockpit-accent for instrument identity. */
.cockpit-subtitle {
    font-size: 15px; line-height: 1.35; margin-top: 6px;
    color: var(--b2-soft);
    text-shadow: 0 0 8px rgba(var(--b2-rgb), 0.20), 0 0 20px rgba(var(--b2-rgb), 0.08);
}

.subtab-pills { display: flex; gap: 4px; }
.subtab-pill {
    padding: 6px 14px; font-size: 12px;
    border-radius: 3px; border: none; cursor: pointer;
    font-weight: 600; font-family: inherit;
    letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--bg-surface-alt); color: var(--text-dim);
    transition: all 0.15s;
}
.subtab-pill:hover { background: var(--bg-hover); color: var(--text-muted); }
/* Active — luminous indigo gradient (matches sub-tab slider, position gauge, agents pill.active) */
.subtab-pill.active {
    background: linear-gradient(180deg, rgba(99,102,241,0.25) 0%, rgba(99,102,241,0.10) 100%);
    color: var(--accent);
    border: 1px solid rgba(99,102,241,0.35);
    border-top-color: rgba(99,102,241,0.50);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 2px 8px rgba(99,102,241,0.12);
}

.cockpit-pill {
    padding: 5px 12px; font-size: 12px; border-radius: 3px;
    border: none; cursor: pointer; font-weight: 500;
    background: var(--bg-surface-alt); color: var(--text-dim);
    transition: all 0.15s; white-space: nowrap; font-family: inherit;
}
.cockpit-pill:hover { background: var(--bg-hover); color: var(--text-muted); }
/* Active — luminous indigo gradient (universal active state across dashboard) */
.cockpit-pill.active {
    background: linear-gradient(180deg, rgba(99,102,241,0.25) 0%, rgba(99,102,241,0.10) 100%);
    color: var(--accent);
    border: 1px solid rgba(99,102,241,0.35);
    border-top-color: rgba(99,102,241,0.50);
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 2px 8px rgba(99,102,241,0.12);
}
.cockpit-pill .pill-pnl { margin-left: 4px; font-size: 11px; font-weight: 600; }

.info-bar {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 16px; padding: 10px 14px;
    background: rgba(11, 18, 21, 0.55);
    border: 1px solid rgba(255,255,255,0.04);
    border-left: 2px solid rgba(99, 102, 241, 0.5);
    border-radius: 2px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 4px 0 12px rgba(99, 102, 241, 0.04);
    font-size: 11px; color: var(--text-dim);
    margin-bottom: 12px;
}
.info-val { color: var(--text-primary); font-weight: 600; }
.info-accent { color: var(--accent); font-weight: 600; }

/* ── Universe strip (shared: portfolio + viewer) ──
   A glass panel that lists the coins/egos in scope. Used as a static display
   on portfolio (collapsed-by-default disclosure, sits below info-bar) and as
   an always-expanded interactive filter on viewer. */
.universe-strip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 12px 0;
    padding: 10px 14px 12px;
    border: 1px solid rgba(var(--cockpit-accent-rgb), 0.14);
    border-top-color: rgba(255, 255, 255, 0.10);
    border-left-color: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(180deg, rgba(var(--cockpit-accent-rgb), 0.09) 0%, rgba(var(--cockpit-accent-rgb), 0.03) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.22);
}

/* Disclosure variant (portfolio) — collapsed by default.
   Negates strip's inner padding so the summary can fill the panel. */
.universe-strip:has(> .universe-disclosure) {
    margin: 0 0 12px;
    padding: 0;
}
.universe-disclosure { width: 100%; }
.universe-disclosure > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    transition: background 0.15s;
}
.universe-disclosure > summary::-webkit-details-marker { display: none; }
.universe-disclosure > summary::marker { display: none; }
.universe-disclosure > summary:hover {
    background: rgba(var(--cockpit-accent-rgb), 0.06);
}
.universe-disclosure[open] > summary {
    border-bottom: 1px solid rgba(var(--cockpit-accent-rgb), 0.10);
    border-radius: 10px 10px 0 0;
}
.universe-heading-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--b2-soft);
    transition: transform 0.18s ease;
    margin-right: 2px;
}
.universe-disclosure[open] .universe-heading-chevron {
    transform: rotate(180deg);
}
.universe-heading-text {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--b2-soft);
    font-weight: 700;
    text-shadow: 0 0 6px rgba(var(--b2-rgb), 0.18);
}
.universe-heading-meta {
    font-size: 10px;
    letter-spacing: 0.4px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-left: auto;
    font-weight: 600;
}
.universe-disclosure-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 12px;
}

.universe-heading {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--b2-soft);
    font-weight: 700;
    text-shadow: 0 0 6px rgba(var(--b2-rgb), 0.18);
    margin-bottom: 2px;
}

.universe-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 6px;
    min-width: 0;
}

.universe-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    font-weight: 700;
    margin-right: 6px;
    min-width: 38px;
}

.universe-chip {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.universe-chip--coin {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.02em;
}

.universe-chip--ego {
    color: var(--b2-soft);
    background: rgba(var(--b2-rgb), 0.10);
    font-family: 'Inter', system-ui, sans-serif;
}

.universe-empty {
    color: var(--text-dim);
    font-size: 11px;
}

/* Interactive chips (viewer filters) */
button.universe-chip {
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
button.universe-chip--coin {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
}
button.universe-chip--coin:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}
button.universe-chip--coin.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
}
button.universe-chip--ego {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    background: rgba(var(--b2-rgb), 0.07);
}
button.universe-chip--ego:hover {
    color: var(--b2-soft);
    background: rgba(var(--b2-rgb), 0.14);
}
button.universe-chip--ego.is-active {
    color: #fff;
    background: rgba(var(--b2-rgb), 0.28);
    border-color: rgba(var(--b2-rgb), 0.45);
    box-shadow: 0 0 8px rgba(var(--b2-rgb), 0.18);
}
button.universe-chip .pill-pnl {
    margin-left: 4px;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.85;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 8px; margin-bottom: 14px;
}
.kpi-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(180deg, rgba(var(--cockpit-accent-rgb), 0.09) 0%, rgba(var(--cockpit-accent-rgb), 0.03) 100%);
    border: 1px solid rgba(var(--cockpit-accent-rgb), 0.14);
    border-top-color: rgba(255,255,255,0.10);
    border-left-color: rgba(255,255,255,0.08);
    border-radius: 10px; padding: 12px 14px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 4px 16px rgba(0,0,0,0.22);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.kpi-card:hover {
    border-color: rgba(var(--cockpit-accent-rgb), 0.26);
    border-top-color: rgba(255,255,255,0.16);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(180deg, rgba(var(--cockpit-accent-rgb), 0.13) 0%, rgba(var(--cockpit-accent-rgb), 0.04) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 28px rgba(0,0,0,0.30), 0 0 16px rgba(var(--cockpit-accent-rgb), 0.08);
}
.kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); font-weight: 700; margin-bottom: 6px; }
.kpi-value {
    font-size: 20px; font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums; color: #fff; line-height: 1.2;
}
.kpi-sub { font-size: 9px; color: var(--text-dim); margin-top: 3px; }

.cockpit-section {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(180deg, rgba(var(--cockpit-accent-rgb), 0.09) 0%, rgba(var(--cockpit-accent-rgb), 0.03) 100%);
    border: 1px solid rgba(var(--cockpit-accent-rgb), 0.14);
    border-top-color: rgba(255,255,255,0.10);
    border-left-color: rgba(255,255,255,0.08);
    border-radius: 10px; padding: 14px; margin-bottom: 12px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 4px 16px rgba(0,0,0,0.22);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.cockpit-section:hover {
    border-color: rgba(var(--cockpit-accent-rgb), 0.26);
    border-top-color: rgba(255,255,255,0.16);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(180deg, rgba(var(--cockpit-accent-rgb), 0.13) 0%, rgba(var(--cockpit-accent-rgb), 0.04) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 28px rgba(0,0,0,0.30), 0 0 16px rgba(var(--cockpit-accent-rgb), 0.08);
}
/* Cockpit section title — solid B2 voice (unified across all section headings).
   Sits inside cockpit-section panel whose border uses --cockpit-accent (V4 = B2). */
.cockpit-section-title {
    font-weight: 700; font-size: 15px;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--b2);
    text-shadow: 0 0 8px rgba(var(--b2-rgb), 0.20);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(var(--cockpit-accent-rgb), 0.25);
}
.cockpit-section-subtitle { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }

/* Unified tooltip icon — used across egos / portfolio / agents.
   Convention: `?` = definitional (what is this / how is it calculated)
               `!` = insight / usage tip (what to look for) */
.tip-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; border-radius: 50%;
    background: rgba(var(--b2-rgb), 0.14); color: var(--b2-soft);
    font-size: 9px; font-weight: 700; line-height: 1; flex-shrink: 0;
    transition: background 0.15s;
}
.tip-host:hover .tip-icon,
.section-tip:hover .tip-icon,
.kpi-label-tip:hover .tip-icon,
.section-heading-tip:hover .tip-icon { background: rgba(var(--b2-rgb), 0.24); }

.section-tip {
    position: relative; display: inline-flex; align-items: center;
    margin-left: 5px; cursor: help; vertical-align: middle;
}
/* Legacy alias — equivalent to .tip-icon */
.section-tip-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; border-radius: 50%;
    background: rgba(var(--b2-rgb), 0.14); color: var(--b2-soft);
    font-size: 9px; font-weight: 700; line-height: 1; flex-shrink: 0;
}
/* Position fixed so utils.js can place tooltips inside the viewport.
   z-index 1000 sits above all dashboard chrome (panel 200, topbar 100) — required
   because utils.js portals the node to <body>, escaping any ancestor stacking
   context including the egos detail panel. */
.section-tip-text {
    display: none; position: fixed; left: 0; top: 0;
    width: max-content; max-width: 300px; padding: 10px 12px;
    background: #161e22;
    border: 1px solid rgba(var(--b2-rgb), 0.25);
    border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    color: #c8d6e5; font-size: 11px; font-weight: 500;
    line-height: 1.5; letter-spacing: normal; text-transform: none;
    white-space: normal; z-index: 1000;
}
.section-tip:hover .section-tip-text { display: block; }
/* Legacy modifier — base positioning is now JS-driven, this is a no-op */
.section-tip-text--right { left: 0; right: auto; }

/* KPI label tooltip — shared brand pattern, matches utils.js TRIGGER_SEL
   `.kpi-label-tip`. Used on perf-box / KPI-card labels where a small `?`
   indicator + portaled hover tooltip is needed. */
.kpi-label-tip {
    display: inline-flex; align-items: center; gap: 4px;
    position: relative; cursor: help;
}
.kpi-tooltip {
    display: none; position: fixed; left: 0; top: 0;
    width: max-content; max-width: 280px; padding: 8px 10px;
    background: #161e22;
    border: 1px solid rgba(var(--b2-rgb), 0.25);
    border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    color: #c8d6e5; font-size: 11px; font-weight: 500;
    line-height: 1.5; letter-spacing: normal; text-transform: none;
    white-space: normal; z-index: 1000;
}
.kpi-label-tip:hover .kpi-tooltip { display: block; }
/* Legacy alias — equivalent to .tip-icon (portfolio.css usage) */
.kpi-tip-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; border-radius: 50%;
    background: rgba(var(--b2-rgb), 0.14); color: var(--b2-soft);
    font-size: 9px; font-weight: 700; line-height: 1; flex-shrink: 0;
}

.table-wrap { overflow-x: auto; border-radius: 3px; }
.cockpit-table { width: 100%; min-width: 500px; border-collapse: separate; border-spacing: 0; }
.cockpit-table thead tr { background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, transparent 100%); }
.cockpit-table thead th {
    color: var(--text-muted); font-size: 11px; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase;
    padding: 9px 8px; text-align: left; white-space: nowrap; vertical-align: middle;
    border-bottom: 1px solid rgba(99, 102, 241, 0.10);
}
.cockpit-table thead th.cell-center { text-align: center; }
.cockpit-table tbody td { padding: 10px 8px; font-size: 12px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.025); vertical-align: middle; }
.cockpit-table tbody tr:hover { background: rgba(99, 102, 241, 0.04) !important; }

.decision-badge { display: inline-block; padding: 2px 10px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
.decision-buy { background: rgba(var(--positive-rgb),0.15); color: var(--positive); }
.decision-sell { background: rgba(var(--negative-rgb),0.15); color: var(--negative); }
.decision-neutral { background: var(--bg-surface-alt); color: var(--text-dim); }
.action-row-buy { border-left: 2px solid rgba(var(--positive-rgb),0.3); }
.action-row-sell { border-left: 2px solid rgba(var(--negative-rgb),0.3); }

.action-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
.action-card {
    background: rgba(17,24,39,0.6); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px; padding: 14px; transition: border-color 0.15s;
}
.action-card.decision-buy { border-left: 3px solid rgba(var(--positive-rgb),0.5); }
.action-card.decision-sell { border-left: 3px solid rgba(var(--negative-rgb),0.5); }
.action-card.decision-neutral { border-left: 3px solid rgba(71,85,105,0.5); }
.action-card:hover { border-color: rgba(255,255,255,0.12); }

.action-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.action-coin { font-size: 16px; font-weight: 800; color: #fff; font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }

.action-signal { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.action-signal-label { font-size: 10px; color: var(--text-dim); width: 36px; flex-shrink: 0; }
.signal-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.signal-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.action-signal-val { font-size: 11px; font-weight: 700; color: var(--text-muted); width: 28px; text-align: right; flex-shrink: 0; }

.action-votes { margin-bottom: 8px; }
.vote-bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.vote-seg { transition: width 0.3s; }
.vote-long { background: var(--positive); }
.vote-short { background: var(--negative); }
.vote-flat { background: var(--text-dim); }
.vote-legend { display: flex; gap: 8px; font-size: 10px; font-weight: 600; color: var(--text-dim); }

.action-footer { font-size: 10px; color: var(--text-dim); }

.cell-score-bar { min-width: 100px; }
.score-bar-wrap { position: relative; height: 20px; background: rgba(255,255,255,0.04); border-radius: 3px; overflow: hidden; }
.score-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 3px; opacity: 0.25; transition: width 0.3s; }
.score-bar-fill.tier-major { background: var(--tier-major); }
.score-bar-fill.tier-minor { background: var(--tier-minor); }
.score-bar-fill.tier-bench { background: var(--tier-bench); }
.score-bar-val { position: absolute; top: 0; left: 6px; line-height: 20px; font-size: 11px; font-weight: 700; color: var(--text-primary); }

.cell-center, th.cell-center { text-align: center; }

/* Agent identity — single visual idiom across every dashboard page.
   Default: ego (bold white text) + coin (gray pill).
   Portfolio variant: coin (bold mono text) + ego (gray pill) — order preserved.
   Tier color is never used here; reserved exclusively for league headings.
   Keep in sync with agentIdentity() in utils.js. */
.agent-ego-text {
    font-weight: 700; color: #fff;
    line-height: 1.2;
}
.agent-coin-mono {
    font-weight: 700; color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.module-chip {
    display: inline-block;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.12);
    color: var(--text-muted);
    letter-spacing: 0.3px;
    font-weight: 600;
    white-space: nowrap;
}
.module-chip-lg { font-size: 12px; padding: 2px 6px; border-radius: 4px; }
.module-chip-xl { font-size: 14px; padding: 2px 8px; border-radius: 5px; }

/* α inline brand mark — must use Georgia 700 wherever rendered (brand-guide §11) */
.alpha-mark { font-family: 'Georgia', serif; font-weight: 700; }

/* Utility */
.cell-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cell-center { text-align: center; }
.empty-cell { text-align: center; color: var(--text-dim); padding: 20px; }
.tone-pos { color: var(--positive); }
.tone-neg { color: var(--negative); }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.kpi-num { font-variant-numeric: tabular-nums; }

.chart-legend { display: flex; gap: 16px; font-size: 12px; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-bar { width: 4px; height: 10px; border-radius: 1px; display: inline-block; opacity: 0.7; }
.legend-val { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

.subtab-content { padding: 10px 12px 14px; }

.empty-state, .loading-state {
    display: flex; align-items: center; justify-content: center;
    min-height: 200px; color: var(--text-dim); font-size: 14px;
}

/* ── Journey CTA — landing footer CTA pattern (radial glow, no border, btn-fill shimmer) ── */
.journey-cta {
    position: relative; z-index: 1;
    margin-top: 56px;
    padding: 64px 24px 56px;
    text-align: center;
    overflow: hidden;
}
.journey-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 60% at 30% 35%, rgba(99,102,241,0.14) 0%, transparent 70%),
        radial-gradient(ellipse 45% 55% at 70% 65%, rgba(52,211,153,0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}
.journey-cta > * { position: relative; }
.journey-flow {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; margin-bottom: 24px;
}
.journey-step {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 20px; border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-dim);
    transition: all 0.2s;
}
.journey-step .material-symbols-outlined { font-size: 28px; }
.journey-step-label { font-size: 12px; font-weight: 700; }
.journey-step-desc { font-size: 10px; font-weight: 500; }
.journey-step.journey-active {
    position: relative;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(52,211,153,0.05) 100%);
    background-clip: padding-box;
    box-shadow:
        0 0 16px rgba(99,102,241,0.20),
        0 0 28px rgba(52,211,153,0.10);
    color: var(--accent);
}
.journey-step.journey-active::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--indigo) 0%, var(--mint) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.journey-step.journey-active .material-symbols-outlined,
.journey-step.journey-active .journey-step-label {
    background: linear-gradient(135deg, var(--indigo) 0%, var(--mint) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.journey-step.journey-active .journey-step-desc { color: var(--accent); }
/* Arrow — gradient sweeps left→right + tiny nudge to suggest forward motion. */
.journey-arrow {
    display: inline-block;
    font-size: 18px;
    background: linear-gradient(
        90deg,
        rgba(148,163,184,0.35) 0%,
        var(--indigo) 35%,
        var(--mint) 65%,
        rgba(148,163,184,0.35) 100%);
    background-size: 250% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation:
        journeyArrowFlow 1.8s linear infinite,
        journeyArrowSlide 1.8s ease-in-out infinite;
    will-change: background-position, transform;
}
@keyframes journeyArrowFlow {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes journeyArrowSlide {
    0%, 100% { transform: translateX(-2px); }
    50%      { transform: translateX(3px); }
}
@keyframes journeyArrowSlideVert {
    0%, 100% { transform: rotate(90deg) translateX(-2px); }
    50%      { transform: rotate(90deg) translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .journey-arrow { animation: none; color: var(--text-dim); -webkit-text-fill-color: currentColor; }
}
.journey-text {
    font-size: 14px; color: var(--text-muted); line-height: 1.6;
    margin-bottom: 24px; max-width: 520px; margin-left: auto; margin-right: auto;
}

/* CTA button — mirrors landing .btn-fill (shimmer sweep + lift on hover) */
.journey-btn {
    position: relative; overflow: hidden;
    display: inline-block;
    padding: 16px 48px;
    border-radius: 9999px;
    font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #fff; background: var(--indigo);
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(.25,.8,.25,1),
                box-shadow 0.3s ease;
}
.journey-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.15),
        transparent);
    transform: translateX(-100%);
    transition: none;
}
.journey-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(99,102,241,0.25);
}
.journey-btn:hover::before {
    animation: journeyBtnShimmer 0.8s ease forwards;
}
@keyframes journeyBtnShimmer {
    to { transform: translateX(100%); }
}

@media (max-width: 768px) {
    .sidebar { display: none; }
    .bottom-nav { display: flex; }
    .page-content { margin-left: 0; padding: 10px 12px; padding-bottom: 80px; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .cockpit-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .journey-cta { padding: 48px 16px 40px; margin-top: 40px; }
    .journey-btn { padding: 14px 36px; }
    .journey-flow { gap: 10px; }
    .journey-step { padding: 10px 14px; }
}
@media (max-width: 480px) {
    .journey-flow { flex-direction: column; }
    .journey-arrow {
        animation:
            journeyArrowFlow 1.8s linear infinite,
            journeyArrowSlideVert 1.8s ease-in-out infinite;
    }
}