/* ============================================================================
   MetaField Labs Lotto Forecast Engine — HTML Cockpit
   Visual language: deep navy void · luminous gold · breathing glyphs
   ============================================================================ */

:root {
    /* Palette ----------------------------------------------------------- */
    --bg-void:        #060912;
    --bg-deep:        #0B1020;
    --bg-panel:       #131A2E;
    --bg-panel-hi:    #1C2440;
    --border-subtle:  rgba(212, 175, 55, 0.18);
    --border-strong:  rgba(212, 175, 55, 0.45);

    --gold:           #D4AF37;
    --gold-bright:    #FFD86B;
    --gold-soft:      #B8902B;
    --mint:           #88D8B0;
    --amber:          #EF9F27;
    --rose:           #E04A6B;
    --azure:          #5BB3F0;
    --violet:         #B095F5;

    --text-bright:    #F8F4E6;
    --text-soft:      #C9C4B1;
    --text-muted:     #7B7560;

    --glow-gold:      0 0 24px rgba(212, 175, 55, 0.45),
                      0 0 48px rgba(212, 175, 55, 0.18);
    --glow-mint:      0 0 18px rgba(136, 216, 176, 0.35);
    --glow-azure:     0 0 18px rgba(91, 179, 240, 0.35);

    /* Sizes ------------------------------------------------------------- */
    --rad-sm: 6px;
    --rad-md: 12px;
    --rad-lg: 18px;

    /* Type -------------------------------------------------------------- */
    --font-body:    'Inter', 'Segoe UI', -apple-system, sans-serif;
    --font-serif:   'Cormorant Garamond', Georgia, serif;
    --font-mono:    'JetBrains Mono', 'Consolas', monospace;

    /* Animation easing -------------------------------------------------- */
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ─── reset / base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--bg-void);
    color: var(--text-soft);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%,
                        rgba(212, 175, 55, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 100% 100%,
                        rgba(91, 179, 240, 0.04) 0%, transparent 70%),
        var(--bg-void);
    padding: 24px 32px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ─── constellation backdrop (gentle drift) ───────────────────────────── */
.constellation {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    overflow: hidden;
}
.constellation .star {
    position: absolute;
    width: 2px; height: 2px;
    background: rgba(255, 220, 130, 0.5);
    border-radius: 50%;
    animation: starTwinkle 6s ease-in-out infinite;
}
.constellation .star.s1 { top:  8%; left: 12%; animation-delay: 0s; }
.constellation .star.s2 { top: 22%; left: 78%; animation-delay: 1.2s; }
.constellation .star.s3 { top: 38%; left: 30%; animation-delay: 2.4s; }
.constellation .star.s4 { top: 55%; left: 88%; animation-delay: 0.6s; }
.constellation .star.s5 { top: 71%; left:  6%; animation-delay: 3.0s; }
.constellation .star.s6 { top: 19%; left: 45%; animation-delay: 1.8s; }
.constellation .star.s7 { top: 82%; left: 52%; animation-delay: 2.1s; }
.constellation .star.s8 { top: 12%; left: 92%; animation-delay: 4.0s; }
.constellation .star.s9 { top: 65%; left: 36%; animation-delay: 3.6s; }
@keyframes starTwinkle {
    0%,100% { opacity: 0.2; transform: scale(0.8); }
    50%     { opacity: 0.95; transform: scale(1.4); box-shadow: 0 0 8px rgba(255,220,130,0.7); }
}


/* ─── HERO HEADER (sticky so the nav is always reachable) ──────────────── */
.hero {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 32px 16px;
    border-bottom: 1px solid var(--border-subtle);
    background:
        linear-gradient(180deg, rgba(6,9,18,0.98), rgba(6,9,18,0.92) 80%, rgba(6,9,18,0.0));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin: -24px -32px 18px;   /* 18px breathing room below the header */
}

/* Push the first page-content row clear of the sticky header so the metric
   card labels are never clipped. The header is ~96px tall when the HANKO
   and PREDICT buttons are visible. */
.page-wrap { padding-top: 8px; }
.hero-left {
    display: flex; align-items: center; gap: 18px;
    /* Constrain the title to its own lane so the centered <nav> can never
       cover it. The nav is ~470px wide centered at 50% of the viewport,
       so its leftmost edge sits at `50% − 235px`. We give the title at
       most `50% − 280px` (a 45px breathing buffer) — beyond that the
       title gracefully truncates with text-overflow: ellipsis and the
       subtitle is allowed to hide on small viewports (media query below). */
    max-width: calc(50% - 280px);
    min-width: 0;
    flex: 0 1 auto;
}
.hero-mark {
    font-size: 38px;
    color: var(--gold);
    text-shadow: var(--glow-gold);
    animation: heroMarkPulse 4s ease-in-out infinite;
}
@keyframes heroMarkPulse {
    0%,100% { transform: scale(1); filter: brightness(1); }
    50%     { transform: scale(1.05); filter: brightness(1.25); }
}
.hero-title {
    /* Allow the inner h1/sub to shrink + ellipsis-truncate cleanly */
    min-width: 0;
    overflow: hidden;
}
.hero-title h1 {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--gold-bright);
    line-height: 1.1;
    /* Truncate gracefully if the lane shrinks past the title's natural width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-sub {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 4px;
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Responsive: shed the subtitle and shrink the title at narrow widths
   so it never feels squeezed. The nav and PREDICT buttons stay intact. */
@media (max-width: 1500px) {
    .hero-title h1 { font-size: 24px; }
}
@media (max-width: 1300px) {
    .hero-sub { display: none; }
    .hero-title h1 { font-size: 22px; }
}
@media (max-width: 1100px) {
    .hero-title h1 { font-size: 18px; letter-spacing: 0.3px; }
}

.hero-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.regime-badge {
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.05));
    border: 1px solid var(--border-strong);
    color: var(--gold-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: var(--glow-gold);
}
.health-pill {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-md);
}
.health-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: var(--glow-mint);
    animation: healthBreath 1.6s ease-in-out infinite;
}
@keyframes healthBreath {
    0%,100% { transform: scale(0.85); opacity: 0.7; }
    50%     { transform: scale(1.15); opacity: 1.0; }
}
.health-text { line-height: 1.1; }
.health-label { font-size: 10px; color: var(--text-muted);
                text-transform: uppercase; letter-spacing: 1.2px; }
.health-val   { font-family: var(--font-mono); font-size: 18px;
                color: var(--text-bright); font-weight: 500; }
.health-unit  { font-size: 11px; color: var(--text-muted); margin-left: 2px; }


/* ─── HERO METRIC CARDS ───────────────────────────────────────────────── */
.metrics {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.metric-card {
    position: relative;
    padding: 18px 22px 20px;
    background:
        linear-gradient(135deg, rgba(212,175,55,0.03), rgba(212,175,55,0)) ,
        var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-md);
    overflow: hidden;
    transition: transform 0.4s var(--ease-out-quint),
                box-shadow 0.4s var(--ease-out-quint),
                border-color 0.4s;
}
.metric-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(212,175,55,0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}
.metric-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5),
                0 0 0 1px var(--border-strong),
                var(--glow-gold);
}
.metric-card:hover::before { opacity: 1; }

.m-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-bottom: 8px;
    font-family: var(--font-mono);
}
.m-value {
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 500;
    color: var(--gold-bright);
    line-height: 1.05;
    text-shadow: 0 0 16px rgba(212, 175, 55, 0.25);
    transition: color 0.3s;
}
.m-value.flash { animation: valueFlash 0.6s var(--ease-out-quint); }
@keyframes valueFlash {
    0%   { color: #fff; text-shadow: 0 0 30px rgba(255,255,255,0.6); }
    100% { color: var(--gold-bright); }
}
.m-sub { font-size: 10px; color: var(--text-muted);
         margin-top: 8px; letter-spacing: 0.8px; font-family: var(--font-mono); }

.m-bar {
    margin-top: 12px;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
}
.m-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-soft), var(--gold-bright));
    border-radius: 999px;
    width: 0%;
    transition: width 0.8s var(--ease-out-quint);
    box-shadow: 0 0 8px rgba(212,175,55,0.5);
}
.m-bar-fill.m-bar-warm {
    background: linear-gradient(90deg, var(--azure), var(--amber));
    box-shadow: 0 0 8px rgba(239,159,39,0.5);
}
.m-spark { height: 22px; margin-top: 8px; }


/* ─── MAIN GRID — VOICE + PPI ─────────────────────────────────────────── */
.main-grid {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    min-height: 420px;
}


/* Panels common ----------------------------------------------------- */
.panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(212,175,55,0.025), transparent 30%),
        var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-lg);
    padding: 22px 26px;
}
.panel-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212,175,55,0.10);
}
.panel-title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.4px;
}
.panel-sub {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: var(--font-mono);
}


/* ─── VOICE PANEL ─────────────────────────────────────────────────────── */
.panel-voice { display: flex; flex-direction: column; }

.glyph-spine {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin: 6px 0 18px;
}
.glyph-cell {
    /* Explicit width/height (not just aspect-ratio) because these are <svg>
       elements — replaced elements resolve aspect-ratio against a grid's 1fr
       track inconsistently across browsers; Safari/WebKit in particular can
       fall back to the SVG's own intrinsic size instead of the track width,
       blowing each glyph up to fill the screen on iPad. */
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 50% 40%, rgba(212,175,55,0.18), transparent 70%),
        rgba(255,255,255,0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-md);
    cursor: pointer;
    transform-origin: 50% 50%;
    transition: transform 0.7s var(--ease-out-quint),
                filter 0.7s var(--ease-out-quint),
                border-color 0.7s;
    /* The breathing animation is applied via JS so it can sync to engine BPM */
}
.glyph-rune {
    font-family: var(--font-serif);
    font-size: 56px;
    font-weight: 500;
    fill: var(--gold);
    filter: drop-shadow(0 0 12px rgba(212,175,55,0.5));
    transition: fill 0.6s, filter 0.6s;
}
.glyph-cell:hover {
    border-color: var(--border-strong);
    filter: brightness(1.3);
    transform: scale(1.06) !important;
}
.glyph-cell.tint-mint .glyph-rune { fill: var(--mint); filter: drop-shadow(0 0 14px rgba(136,216,176,0.7)); }
.glyph-cell.tint-azure .glyph-rune { fill: var(--azure); filter: drop-shadow(0 0 14px rgba(91,179,240,0.7)); }
.glyph-cell.tint-rose .glyph-rune  { fill: var(--rose);  filter: drop-shadow(0 0 14px rgba(224,74,107,0.7)); }
.glyph-cell.tint-violet .glyph-rune { fill: var(--violet); filter: drop-shadow(0 0 14px rgba(176,149,245,0.7)); }
.glyph-cell.heartbeat { animation: heartbeat 0.9s var(--ease-out-back); }
@keyframes heartbeat {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); filter: brightness(1.5); }
    65%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}

/* The voice quote -------------------------------------------------- */
.voice-quote {
    display: flex; gap: 12px;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(212,175,55,0.05), rgba(136,216,176,0.03));
    border-left: 3px solid var(--gold);
    border-radius: var(--rad-md);
    margin-bottom: 12px;
}
.voice-mark {
    font-family: var(--font-serif);
    font-size: 56px;
    line-height: 0.7;
    color: var(--gold);
    opacity: 0.6;
}
.voice-body { flex: 1; }
.voice-headline {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 500;
    color: var(--text-bright);
    line-height: 1.35;
    margin-bottom: 8px;
    font-style: italic;
    transition: opacity 0.5s;
}
.voice-headline.refresh { animation: fadeInUp 0.7s var(--ease-out-quint); }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.voice-summary {
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.6;
}

.voice-bullets {
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-soft);
}
.voice-bullets .bullet {
    padding: 6px 12px;
    border-radius: var(--rad-sm);
    background: rgba(255,255,255,0.02);
    border-left: 2px solid rgba(212,175,55,0.3);
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.voice-bullets .bullet:hover {
    background: rgba(212,175,55,0.05);
    border-left-color: var(--gold);
    transform: translateX(2px);
}


/* ─── PPI PANEL ───────────────────────────────────────────────────────── */
.panel-ppi { display: flex; flex-direction: column; }

.ppi-active {
    text-align: center;
    padding: 16px 0 18px;
    margin-bottom: 14px;
    border-bottom: 1px dashed rgba(212,175,55,0.18);
}
.ppi-active-label {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-family: var(--font-mono);
}
.ppi-active-name {
    font-family: var(--font-serif);
    font-size: 42px;
    font-weight: 600;
    color: var(--gold-bright);
    text-shadow: var(--glow-gold);
    letter-spacing: 1px;
    transition: color 0.6s, text-shadow 0.6s;
}
.ppi-active-arch {
    font-size: 13px;
    color: var(--text-soft);
    margin-top: 4px;
    font-style: italic;
}
.ppi-meta {
    display: flex; justify-content: center; gap: 18px;
    margin-top: 12px;
}
.ppi-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-subtle);
}
.ppi-tag.wildcard b { color: var(--amber); }
.ppi-tag.caution  b { color: var(--rose); }

.ppi-bars { display: flex; flex-direction: column; gap: 10px; }
.ppi-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 50px;
    gap: 12px;
    align-items: center;
    transition: transform 0.4s var(--ease-out-quint);
}
.ppi-bar-row:hover { transform: translateX(2px); }
.ppi-bar-name {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-soft);
    text-transform: uppercase;
}
.ppi-bar-row.active .ppi-bar-name { color: var(--gold-bright); font-weight: 600; }

.ppi-bar-track {
    height: 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.ppi-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(212,175,55,0.55), var(--gold-bright));
    border-radius: 999px;
    width: 0%;
    transition: width 1.0s var(--ease-out-quint);
    position: relative;
}
.ppi-bar-fill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: translateX(-100%);
    animation: barShine 3.5s ease-in-out infinite;
}
@keyframes barShine {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(220%); }
    100% { transform: translateX(220%); }
}
.ppi-bar-row.active .ppi-bar-fill {
    background: linear-gradient(90deg, var(--gold), var(--gold-bright));
    box-shadow: 0 0 18px rgba(212,175,55,0.6);
}
.ppi-bar-row.wildcard .ppi-bar-fill {
    background: linear-gradient(90deg, rgba(239,159,39,0.4), var(--amber));
}
.ppi-bar-row.caution .ppi-bar-fill {
    background: linear-gradient(90deg, rgba(224,74,107,0.3), var(--rose));
}
.ppi-bar-val {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold-bright);
    font-weight: 500;
    text-align: right;
}


/* ─── BOTTOM ─ STAGE 2 + MACRO ────────────────────────────────────────── */
.bottom-grid {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
}

/* Stage 2 ----------------------------------------------------------- */
.s2-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.s2-item {
    padding: 10px 12px;
    border-radius: var(--rad-sm);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-subtle);
    transition: border-color 0.4s, background 0.4s;
}
.s2-item:hover { border-color: var(--border-strong); background: rgba(212,175,55,0.04); }
.s2-name {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.s2-bar-wrap {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
}
.s2-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-soft), var(--gold-bright));
    border-radius: 999px;
    width: 0%;
    transition: width 0.8s var(--ease-out-quint);
}
.s2-val {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-bright);
    font-weight: 500;
}

/* "No signal" state — channel exists but engine hasn't emitted it yet */
.s2-item.s2-no-signal {
    background: rgba(255,255,255,0.012);
    border-color: rgba(255,255,255,0.06);
    opacity: 0.55;
}
.s2-item.s2-no-signal:hover {
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.02);
}
.s2-item.s2-no-signal .s2-name {
    color: rgba(255,255,255,0.35);
}
.s2-bar.s2-bar-dim {
    background: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.06),
        rgba(255,255,255,0.06) 4px,
        rgba(255,255,255,0.02) 4px,
        rgba(255,255,255,0.02) 8px
    );
    box-shadow: none;
    animation: s2DimPulse 3s ease-in-out infinite;
}
@keyframes s2DimPulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.75; }
}
.s2-val-dim {
    color: rgba(255,255,255,0.30) !important;
    font-style: italic;
    font-size: 10px !important;
    letter-spacing: 0.5px;
}


/* Macro / Brainstem ------------------------------------------------- */
.macro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.macro-cell {
    padding: 10px 12px;
    border-radius: var(--rad-sm);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    text-align: center;
}
.mac-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}
.mac-val {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--gold-bright);
    font-weight: 500;
}

.brainstem { display: flex; flex-direction: column; gap: 8px; padding-top: 8px;
             border-top: 1px solid rgba(212,175,55,0.10); }
.brainstem-row {
    display: grid;
    grid-template-columns: 110px 1fr 60px;
    gap: 12px;
    align-items: center;
}
.bs-key   { font-family: var(--font-mono); font-size: 11px;
            letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; }
.bs-bar   { height: 8px; background: rgba(255,255,255,0.06);
            border-radius: 999px; overflow: hidden; }
.bs-bar-fill {
    height: 100%; border-radius: 999px; width: 50%;
    transition: width 1.0s var(--ease-out-quint);
}
.bs-bar-o { background: linear-gradient(90deg, var(--azure), var(--violet)); box-shadow: var(--glow-azure); }
.bs-bar-b { background: linear-gradient(90deg, var(--mint), var(--gold-bright));  box-shadow: var(--glow-mint); }
.bs-bar-d { background: linear-gradient(90deg, var(--amber), var(--rose)); }
.bs-val   { font-family: var(--font-mono); font-size: 12px; color: var(--gold-bright); text-align: right; }


/* ─── FOOTER ──────────────────────────────────────────────────────────── */
.foot {
    position: relative; z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 8px 4px;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}
.foot-l, .foot-r { display: flex; align-items: center; gap: 10px; }
.dot-sep { opacity: 0.5; }
.foot-link {
    color: var(--gold-soft);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color 0.3s, border-color 0.3s;
}
.foot-link:hover { color: var(--gold-bright); border-bottom-color: var(--gold); }

.pulse-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--mint);
    border-radius: 50%;
    box-shadow: var(--glow-mint);
    animation: connPulse 1.2s ease-in-out infinite;
}
.pulse-dot.disconnected { background: var(--rose); box-shadow: 0 0 10px rgba(224,74,107,0.6); }
@keyframes connPulse {
    0%,100% { opacity: 0.5; transform: scale(0.8); }
    50%     { opacity: 1.0; transform: scale(1.2); }
}


/* ─── responsive squish for laptop screens ────────────────────────────── */
@media (max-width: 1400px) {
    .metrics { grid-template-columns: repeat(5, 1fr); gap: 12px; }
    .m-value { font-size: 30px; }
    .ppi-active-name { font-size: 36px; }
}
@media (max-width: 1100px) {
    .main-grid, .bottom-grid { grid-template-columns: 1fr; }
    .metrics { grid-template-columns: repeat(2, 1fr); }
}


/* =============================================================================
   NAVIGATION + PAGE SWITCHING
   ============================================================================= */

.nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 4px;
    background: rgba(11, 16, 32, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    z-index: 3;
}
.nav-pill {
    display: inline-flex; align-items: center;
    /* Layer 1 — compact pills so the nav fits beside the right buttons
       on most laptop viewports without overlapping. Was 8px 22px /
       letter-spacing 1.5px — saved ~100px total nav width with this. */
    padding: 7px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 999px;
    /* Layer 2 — explicit stacking context so conditional z-index works */
    position: relative;
    z-index: 4;
    transition: color 0.35s, background 0.45s, box-shadow 0.45s, transform 0.35s;
}
.nav-pill:hover { color: var(--gold-bright); transform: translateY(-1px); }
.nav-pill.active {
    color: var(--bg-void);
    background: linear-gradient(135deg, var(--gold-bright), var(--gold-soft));
    box-shadow: var(--glow-gold);
    font-weight: 600;
}

.page-wrap { position: relative; z-index: 2; }
.page { display: flex; flex-direction: column; gap: 20px; }
.page[hidden] { display: none; }
.page-enter { animation: pageEnter 0.55s var(--ease-out-quint); }
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(20px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* =============================================================================
   CINEMATIC FX LAYER
   ============================================================================= */

.fx-layer {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9000;
    overflow: hidden;
}

.fx-flash {
    position: absolute; inset: 0;
    background: transparent;
    opacity: 0;
}
.fx-flash.go { animation: fxFlash 0.7s var(--ease-out-quint); }
@keyframes fxFlash {
    0%   { opacity: 0; }
    18%  { opacity: 0.95; }
    100% { opacity: 0; }
}

.fx-shockwave {
    position: absolute;
    left: 50%; top: 50%;
    width: 140vmin; height: 140vmin;
    transform: translate(-50%, -50%);
    opacity: 0;
    color: var(--gold-bright);
}
.fx-shockwave.fire { opacity: 1; }
.fx-shockwave.fire circle:nth-child(1) { animation: ringGrow 1.4s ease-out forwards; }
.fx-shockwave.fire circle:nth-child(2) { animation: ringGrow 1.4s ease-out 0.18s forwards; }
.fx-shockwave.fire circle:nth-child(3) { animation: ringGrow 1.4s ease-out 0.36s forwards; }
@keyframes ringGrow {
    0%   { r: 2;  opacity: 0.95; stroke-width: 0.7; }
    70%  { opacity: 0.45; stroke-width: 0.35; }
    100% { r: 50; opacity: 0;    stroke-width: 0.1; }
}

.fx-cinematic {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    pointer-events: none;
}
.fx-cinematic.show { animation: fxCinematic 2.4s var(--ease-out-quint); }
@keyframes fxCinematic {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); filter: blur(20px); }
    14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); filter: blur(0); }
    22%  { transform: translate(-50%, -50%) scale(1.0); }
    78%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.02); filter: blur(2px); }
}
.fx-cine-line {
    height: 1px;
    width: 280px;
    background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
    margin: 0 auto 18px;
    box-shadow: 0 0 24px rgba(212,175,55,0.7);
}
.fx-cine-name {
    font-family: var(--font-serif);
    font-size: 110px;
    font-weight: 600;
    letter-spacing: 14px;
    color: var(--gold-bright);
    text-shadow: 0 0 60px rgba(212,175,55,0.75),
                 0 0 120px rgba(212,175,55,0.4);
    line-height: 1.05;
}
.fx-cine-sub {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 4px;
    color: var(--gold-soft);
    text-transform: uppercase;
}

.fx-toast {
    position: absolute;
    top: 88px;
    right: 32px;
    padding: 14px 22px;
    background: rgba(11, 16, 32, 0.94);
    border: 1px solid var(--gold);
    border-radius: var(--rad-md);
    color: var(--gold-bright);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 1px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.55),
                0 0 24px rgba(212,175,55,0.4);
    opacity: 0;
    transform: translateX(40px);
    backdrop-filter: blur(12px);
}
.fx-toast.show { animation: toastSlide 2.4s var(--ease-out-quint); }
@keyframes toastSlide {
    0%   { opacity: 0; transform: translateX(40px); }
    10%  { opacity: 1; transform: translateX(0); }
    85%  { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(40px); }
}

.quake-target { --quake-mag: 0px; }
.quake-target.quake { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shake {
    0%, 100% { transform: translate(0, 0); }
    10%      { transform: translate(calc(var(--quake-mag) * -1), 0); }
    20%      { transform: translate(var(--quake-mag), 0); }
    30%      { transform: translate(calc(var(--quake-mag) * -1), calc(var(--quake-mag) * 0.5)); }
    40%      { transform: translate(var(--quake-mag), calc(var(--quake-mag) * -0.5)); }
    50%      { transform: translate(calc(var(--quake-mag) * -0.5), 0); }
    60%      { transform: translate(calc(var(--quake-mag) * 0.5), 0); }
    70%      { transform: translate(calc(var(--quake-mag) * -0.3), 0); }
    80%      { transform: translate(calc(var(--quake-mag) * 0.3), 0); }
    90%      { transform: translate(calc(var(--quake-mag) * -0.1), 0); }
}

.shooting-star {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 90px; height: 2px;
    background: linear-gradient(90deg, transparent, #FFD86B, white);
    border-radius: 999px;
    box-shadow: 0 0 12px #FFD86B, 0 0 24px rgba(212,175,55,0.6);
    transform: rotate(28deg);
    opacity: 0;
}
.shooting-star.go { animation: shoot 1.4s ease-out; }
@keyframes shoot {
    0%   { top: 8%;  left: -10vw; opacity: 0; }
    20%  { opacity: 1; }
    100% { top: 32%; left: 90vw;  opacity: 0; }
}

.constellation .star.s10 { top: 4%;  left: 60%; animation-delay: 1.5s; }
.constellation .star.s11 { top: 48%; left: 18%; animation-delay: 2.8s; }
.constellation .star.s12 { top: 90%; left: 75%; animation-delay: 0.4s; }


/* =============================================================================
   PAGE 2 — PERSONALITY
   ============================================================================= */

.persona-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    padding: 28px 32px;
    background:
        linear-gradient(135deg, rgba(212,175,55,0.08), rgba(91,179,240,0.03)),
        var(--bg-panel);
    border: 1px solid var(--border-strong);
    border-radius: var(--rad-lg);
    box-shadow: 0 14px 40px rgba(0,0,0,0.45),
                inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}
.persona-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(212,175,55,0.15), transparent 50%);
    pointer-events: none;
}

.persona-hero-left { display: flex; gap: 24px; align-items: center; position: relative; z-index: 1; }
.persona-hero-sym {
    font-family: var(--font-serif);
    font-size: 90px;
    color: var(--gold-bright);
    text-shadow: 0 0 28px rgba(212,175,55,0.6);
    animation: heroSymPulse 4s ease-in-out infinite;
    line-height: 1;
}
@keyframes heroSymPulse {
    0%,100% { transform: scale(1) rotate(0deg); }
    50%     { transform: scale(1.07) rotate(-2deg); }
}
.persona-hero-meta { display: flex; flex-direction: column; gap: 6px; }
.persona-hero-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
}
.persona-hero-name {
    font-family: var(--font-serif);
    font-size: 64px;
    font-weight: 700;
    color: var(--gold-bright);
    text-shadow: var(--glow-gold);
    line-height: 1.0;
    letter-spacing: 2px;
    transition: color 0.6s, text-shadow 0.6s;
}
.persona-hero-long {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-soft);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.persona-hero-arch {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 17px;
    color: var(--text-bright);
    margin-top: 6px;
}

.persona-hero-right { display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; z-index: 1; }
.persona-hero-tags { display: flex; gap: 10px; }

.persona-score-ring { position: relative; width: 160px; height: 160px; }
.persona-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.persona-score-ring .ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.07);
    stroke-width: 6;
}
.persona-score-ring .ring-fg {
    fill: none;
    stroke: var(--gold-bright);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.1s var(--ease-out-quint), stroke 0.6s;
    filter: drop-shadow(0 0 8px rgba(212,175,55,0.6));
}
.ring-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.ring-val { font-family: var(--font-mono); font-size: 38px; font-weight: 600; color: var(--gold-bright); }
.ring-unit { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 2px; margin-top: 2px; }


/* ── Comparison-bar panel ───────────────────────────────────────────────── */
.panel-cmpbar { margin-top: 4px; }
.cmp-bars { display: flex; flex-direction: column; gap: 8px; }
.cmp-row {
    display: grid;
    grid-template-columns: 120px 1fr 60px;
    gap: 14px;
    align-items: center;
    transition: transform 0.4s var(--ease-out-quint);
}
.cmp-row:hover { transform: translateX(3px); }
.cmp-name {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--text-soft);
    text-transform: uppercase;
}
.cmp-row.is-active .cmp-name { color: var(--gold-bright); font-weight: 600; }
.cmp-track {
    height: 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.cmp-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, rgba(212,175,55,0.5), var(--gold-bright));
    border-radius: 999px;
    transition: width 1.1s var(--ease-out-quint);
    position: relative;
}
.cmp-fill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: translateX(-100%);
    animation: barShine 3.5s ease-in-out infinite;
}
.cmp-row.is-active .cmp-fill {
    background: linear-gradient(90deg, var(--gold), var(--gold-bright));
    box-shadow: 0 0 18px rgba(212,175,55,0.65);
}
.cmp-row.is-wildcard .cmp-fill { background: linear-gradient(90deg, rgba(239,159,39,0.4), var(--amber)); }
.cmp-row.is-caution  .cmp-fill { background: linear-gradient(90deg, rgba(224,74,107,0.3), var(--rose)); }
.cmp-val { font-family: var(--font-mono); font-size: 13px; text-align: right; color: var(--gold-bright); font-weight: 500; }


/* ── 8 personality cards grid ───────────────────────────────────────────── */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.persona-card {
    position: relative;
    padding: 18px 18px 16px;
    background:
        linear-gradient(180deg, rgba(212,175,55,0.04), transparent 30%),
        var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-md);
    transition: transform 0.5s var(--ease-out-quint),
                box-shadow 0.5s, border-color 0.5s;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.persona-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 60%, var(--accent-hue, rgba(212,175,55,0.15)));
    opacity: 0.45;
    pointer-events: none;
}
.persona-card.hue-gold   { --accent-hue: rgba(212,175,55,0.18); }
.persona-card.hue-mint   { --accent-hue: rgba(136,216,176,0.14); }
.persona-card.hue-azure  { --accent-hue: rgba(91,179,240,0.14); }
.persona-card.hue-rose   { --accent-hue: rgba(224,74,107,0.14); }
.persona-card.hue-violet { --accent-hue: rgba(176,149,245,0.14); }
.persona-card.hue-amber  { --accent-hue: rgba(239,159,39,0.14); }

.persona-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: 0 16px 38px rgba(0,0,0,0.55), var(--glow-gold);
}

.persona-card.is-active {
    border-color: var(--gold);
    box-shadow:
        0 0 0 1px var(--gold),
        0 14px 40px rgba(212,175,55,0.25),
        inset 0 0 28px rgba(212,175,55,0.18);
    transform: translateY(-3px);
}
.persona-card.is-active::after {
    content: '★';
    position: absolute; top: 8px; right: 10px;
    font-size: 14px; color: var(--gold-bright);
    text-shadow: 0 0 12px rgba(212,175,55,0.85);
    animation: spinSlow 6s linear infinite;
}
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.persona-card.is-wildcard { border-color: var(--amber); box-shadow: inset 0 0 18px rgba(239,159,39,0.18); }
.persona-card.is-wildcard::after {
    content: '⚡'; position: absolute; top: 8px; right: 10px;
    font-size: 14px; color: var(--amber); text-shadow: 0 0 10px rgba(239,159,39,0.8);
}
.persona-card.is-caution { border-color: var(--rose); box-shadow: inset 0 0 18px rgba(224,74,107,0.15); }
.persona-card.is-caution::after {
    content: '⚠'; position: absolute; top: 8px; right: 10px;
    font-size: 14px; color: var(--rose); text-shadow: 0 0 10px rgba(224,74,107,0.8);
}

.pc-top { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.pc-sym {
    font-family: var(--font-serif);
    font-size: 28px;
    color: var(--gold-bright);
    text-shadow: 0 0 12px rgba(212,175,55,0.4);
    line-height: 1;
}
.pc-name {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-bright);
}
.pc-arch {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--text-soft);
    line-height: 1.4;
    position: relative; z-index: 1;
}

.pc-score-wrap { position: relative; width: 88px; height: 88px; margin: 4px auto 6px; z-index: 1; }
.pc-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.pc-ring-bg { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 6; }
.pc-ring-fg {
    fill: none;
    stroke: var(--gold-bright);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.0s var(--ease-out-quint), stroke 0.5s;
}
.persona-card.hue-mint   .pc-ring-fg { stroke: var(--mint); }
.persona-card.hue-azure  .pc-ring-fg { stroke: var(--azure); }
.persona-card.hue-rose   .pc-ring-fg { stroke: var(--rose); }
.persona-card.hue-violet .pc-ring-fg { stroke: var(--violet); }
.persona-card.hue-amber  .pc-ring-fg { stroke: var(--amber); }

.pc-score {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--gold-bright);
}
.persona-card.hue-mint   .pc-score { color: var(--mint); }
.persona-card.hue-azure  .pc-score { color: var(--azure); }
.persona-card.hue-rose   .pc-score { color: var(--rose); }
.persona-card.hue-violet .pc-score { color: var(--violet); }
.persona-card.hue-amber  .pc-score { color: var(--amber); }

.pc-contrib { display: flex; flex-direction: column; gap: 4px;
              padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.08);
              position: relative; z-index: 1; }
.ctr-row {
    display: grid;
    grid-template-columns: 70px 1fr 30px;
    gap: 8px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
}
.ctr-lab { letter-spacing: 0.6px; text-transform: uppercase; }
.ctr-track { height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.ctr-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(212,175,55,0.4), var(--gold-bright));
    border-radius: 999px;
    transition: width 0.9s var(--ease-out-quint);
}
.ctr-val { text-align: right; color: var(--gold-soft); }

.pc-rank-badge {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-top: auto;
    text-transform: uppercase;
    position: relative; z-index: 1;
}


/* ── HERO + METRIC CARDS: bigger flash on update ────────────────────────── */
.m-value.flash { animation: valueFlashBig 0.9s var(--ease-out-quint); }
@keyframes valueFlashBig {
    0%   { color: #fff; text-shadow: 0 0 60px rgba(255,255,255,0.85),
                                     0 0 120px rgba(212,175,55,0.5);
           transform: scale(1.15); }
    100% { color: var(--gold-bright); transform: scale(1); }
}

.voice-headline.refresh { animation: fadeInUpBig 0.95s var(--ease-out-quint); }
@keyframes fadeInUpBig {
    from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}


/* ── Responsive squish for the new content ──────────────────────────────── */
@media (max-width: 1400px) {
    .persona-grid { grid-template-columns: repeat(4, 1fr); }
    .persona-hero-name { font-size: 50px; }
    .persona-hero-sym  { font-size: 72px; }
    .fx-cine-name      { font-size: 84px; letter-spacing: 10px; }
}
@media (max-width: 1100px) {
    .persona-grid { grid-template-columns: repeat(2, 1fr); }
    .persona-hero { grid-template-columns: 1fr; }
    .persona-hero-right { align-items: flex-start; }
    .nav { position: static; transform: none; margin-top: 8px; }
    .hero { flex-wrap: wrap; gap: 12px; }
    /* .hero-left's max-width (calc(50% - 280px)) assumes the desktop 1280+
       layout where nav sits centered alongside it in one row. Once .hero
       wraps (this same breakpoint), hero-left gets its own full row, but
       the calc'd max-width was still caging it to ~96px on an iPad-width
       screen — not enough room for both crest icons (Hanko + AML, ~48px
       each), squeezing/overlapping them instead of just showing them. */
    .hero-left { max-width: 100%; }
}
@media (max-width: 760px) {
    .persona-grid { grid-template-columns: 1fr; }
    .fx-cine-name { font-size: 56px; letter-spacing: 6px; }
}


/* =============================================================================
   PAGE 3 — LAB (oscilloscope + analytics)
   ============================================================================= */

.panel-osc {
    padding: 18px 22px 14px;
    background:
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(91,179,240,0.05), transparent 70%),
        var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-lg);
    overflow: hidden;
}
.osc-canvas {
    display: block;
    width: 100%;
    height: 440px;          /* 8 lanes × 55px */
    background:
        linear-gradient(180deg, rgba(11,16,32,0.6), rgba(6,9,18,0.85));
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: var(--rad-md);
    box-shadow:
        inset 0 0 32px rgba(0,0,0,0.6),
        inset 0 0 80px rgba(212,175,55,0.04);
}
.osc-legend {
    display: flex; flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 10px;
    padding: 6px 4px 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.osc-leg { display: inline-flex; align-items: center; gap: 6px; }
.osc-leg-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
}
.osc-leg-name { color: var(--text-soft); text-transform: uppercase; }


/* Lab page bottom row (radar + timeline stubs) ---------------------------- */
.lab-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.lab-stub {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border: 1px dashed rgba(212,175,55,0.18);
    border-radius: var(--rad-md);
    color: var(--text-muted);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    text-align: center;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.01),
            rgba(255,255,255,0.01) 12px,
            transparent 12px,
            transparent 24px
        );
}

@media (max-width: 1100px) {
    .lab-bottom-grid { grid-template-columns: 1fr; }
    .osc-canvas { height: 380px; }
}


/* =============================================================================
   PREDICT BUTTON  +  RUNNING OVERLAY
   ============================================================================= */

.predict-btn {
    position: relative;
    /* Header z-index choreography (Layer 2 of the overlap fix):
       Default: BELOW the nav pills (z-index 4) so when you're on
       Personality/Lab/Vault/Punter, the active nav pill remains
       readable + clickable even if a narrow viewport causes overlap.
       The active-page override below lifts PREDICT above the nav
       when the user is on Cockpit or Spirit (where predicting is
       the primary action). */
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 24px;
    background: linear-gradient(135deg, #FFD86B, #D4AF37 60%, #B8902B);
    border: 1px solid #FFD86B;
    border-radius: 999px;
    color: #0B1020;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        0 8px 24px rgba(212,175,55,0.45),
        0 0 38px rgba(212,175,55,0.35),
        inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform 0.25s var(--ease-out-quint),
                box-shadow 0.35s, filter 0.35s;
    overflow: hidden;
}
.predict-btn:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.12);
    box-shadow:
        0 12px 32px rgba(212,175,55,0.55),
        0 0 60px rgba(212,175,55,0.5),
        inset 0 1px 0 rgba(255,255,255,0.5);
}
.predict-btn:active { transform: translateY(0) scale(0.99); }

/* ── Layer 2: conditional z-index override (Bocky's rule) ───────────────
   On Cockpit + Spirit, PREDICT is the primary action — lift it ABOVE the
   nav so it stays visually dominant even if the viewport narrows. On the
   other pages, leave PREDICT at its default z-index 2 so the nav pill the
   user is actively navigating remains readable + clickable. */
body[data-active-page="cockpit"] .predict-btn,
body[data-active-page="spirit"]  .predict-btn {
    z-index: 12;
}
.predict-icon { font-size: 16px; }
.predict-orb {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 50%);
    opacity: 0.5;
    animation: orbDrift 5s ease-in-out infinite;
}
@keyframes orbDrift {
    0%,100% { transform: translate(0, 0); }
    50%     { transform: translate(20%, 8%); }
}
.predict-btn.busy {
    background: linear-gradient(135deg, #2A3142, #1A2135);
    color: #FFD86B;
    border-color: rgba(212,175,55,0.45);
    cursor: wait;
    pointer-events: none;
    animation: predictBusy 1.4s ease-in-out infinite;
}
@keyframes predictBusy {
    0%,100% { box-shadow: 0 0 22px rgba(212,175,55,0.45); }
    50%     { box-shadow: 0 0 42px rgba(212,175,55,0.85); }
}


/* ── The cinematic "running prediction" overlay ────────────────────────── */
.fx-running {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%,
                                rgba(8, 10, 22, 0.92),
                                rgba(8, 10, 22, 0.78) 60%,
                                rgba(8, 10, 22, 0.55));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    pointer-events: none;
    z-index: 8500;
    transition: opacity 0.5s var(--ease-out-quint);
}
.fx-running.show { opacity: 1; pointer-events: auto; }

.fx-run-orbits {
    position: relative;
    width: 220px; height: 220px;
}
.fx-run-orbits .orbit {
    position: absolute; inset: 0;
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 50%;
    border-top-color: var(--gold-bright);
    border-right-color: rgba(91,179,240,0.4);
    box-shadow: 0 0 30px rgba(212,175,55,0.2) inset;
}
.fx-run-orbits .o1 { animation: orbitSpin 1.8s linear infinite; }
.fx-run-orbits .o2 {
    inset: 18px;
    border-color: rgba(136,216,176,0.3);
    border-top-color: var(--mint);
    animation: orbitSpin 2.6s linear infinite reverse;
}
.fx-run-orbits .o3 {
    inset: 38px;
    border-color: rgba(239,159,39,0.3);
    border-top-color: var(--amber);
    animation: orbitSpin 3.4s linear infinite;
}
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.fx-run-orbits .run-core {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 64px;
    color: var(--gold-bright);
    text-shadow: 0 0 30px rgba(212,175,55,0.85),
                 0 0 60px rgba(212,175,55,0.5);
    animation: coreBeat 1.2s ease-in-out infinite;
}
@keyframes coreBeat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

.fx-run-title {
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 600;
    letter-spacing: 8px;
    color: var(--gold-bright);
    text-shadow: 0 0 30px rgba(212,175,55,0.7);
}
.fx-run-phase {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-soft);
    letter-spacing: 2px;
}
.fx-run-log {
    margin-top: 6px;
    width: min(580px, 86vw);
    max-height: 200px;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    text-align: left;
    padding: 14px 18px;
    background: rgba(11, 16, 32, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-md);
}
.fx-run-line {
    padding: 2px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.04);
    animation: fadeInUp 0.4s var(--ease-out-quint);
}
.fx-run-line:last-child { border-bottom: 0; color: var(--gold-soft); }


/* =============================================================================
   RADAR  +  TIMELINE  panels
   ============================================================================= */

.radar-svg {
    display: block;
    width: 100%;
    height: 320px;
    background:
        radial-gradient(ellipse 50% 60% at 50% 50%, rgba(91,179,240,0.04), transparent 70%);
}
.timeline-canvas {
    display: block;
    width: 100%;
    height: 260px;
    background:
        linear-gradient(180deg, rgba(11,16,32,0.6), rgba(6,9,18,0.85));
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: var(--rad-md);
}
.timeline-legend {
    display: flex; gap: 18px; flex-wrap: wrap;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
}
.tl-leg { display: inline-flex; align-items: center; gap: 6px; }
.tl-dot { width: 10px; height: 3px; border-radius: 2px; box-shadow: 0 0 6px currentColor; }

@media (max-width: 1100px) {
    .radar-svg     { height: 260px; }
    .timeline-canvas { height: 220px; }
    .fx-run-title  { font-size: 36px; letter-spacing: 4px; }
    .predict-btn   { padding: 9px 16px; font-size: 11px; letter-spacing: 2px; }
    .gate-widget   { width: 44px; height: 44px; }
}


/* =============================================================================
   HEADER LOGOS · HANKO ボッキ + AML CREST
   ============================================================================= */

.hero-crests {
    display: flex;
    align-items: center;
    gap: 16px;
}
.crest-hanko, .crest-aml {
    height: 64px;
    width: auto;
    display: block;
    filter:
        drop-shadow(0 0 14px rgba(212,175,55,0.55))
        drop-shadow(0 0 28px rgba(212,175,55,0.25));
    transition: transform 0.5s var(--ease-out-quint), filter 0.5s;
}
.crest-hanko {
    animation: hankoBreathe 6s ease-in-out infinite;
}
.crest-aml {
    height: 60px;
    animation: amlSpin 38s linear infinite;
    transform-origin: center;
}
.crest-hanko:hover,
.crest-aml:hover {
    transform: scale(1.08);
    filter:
        drop-shadow(0 0 22px rgba(255,216,107,0.85))
        drop-shadow(0 0 40px rgba(212,175,55,0.45));
}
@keyframes hankoBreathe {
    0%,100% { transform: scale(1) rotate(-1deg); }
    50%     { transform: scale(1.04) rotate(1deg); }
}
@keyframes amlSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* =============================================================================
   PREDICTION CONFIGURATION PANEL  (personality picker + S6/S8 + big PRED)
   ============================================================================= */

.panel-predconf {
    background:
        linear-gradient(135deg, rgba(212,175,55,0.06), rgba(91,179,240,0.03)),
        var(--bg-panel);
    border: 1px solid var(--border-strong);
    overflow: hidden;
}
.predconf-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
}
.pred-section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gold-bright);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.pred-section-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Personality radio cards ------------------------------------------------- */
.pers-radios {
    display: flex; flex-direction: column;
    gap: 6px;
}
.pers-radio {
    display: grid;
    grid-template-columns: auto 28px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-sm);
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.pers-radio:hover {
    background: rgba(212,175,55,0.05);
    border-color: var(--border-strong);
    transform: translateX(2px);
}
.pers-radio input { accent-color: var(--gold-bright); }
.pers-radio input:checked + .pers-sym {
    color: var(--gold-bright);
    text-shadow: 0 0 12px rgba(212,175,55,0.7);
}
.pers-sym {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--text-muted);
    text-align: center;
    transition: color 0.4s, text-shadow 0.4s;
}
.pers-name {
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--text-bright);
    letter-spacing: 0.4px;
}
.pers-radio input:checked ~ .pers-name {
    color: var(--gold-bright);
}
.pers-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* System configuration / big PRED button --------------------------------- */
.predconf-right {
    display: flex; flex-direction: column;
    gap: 12px;
}
.sys-row {
    display: grid;
    grid-template-columns: 38px auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-sm);
    transition: border-color 0.3s, background 0.3s;
}
.sys-row:hover {
    border-color: var(--border-strong);
    background: rgba(212,175,55,0.04);
}
.sys-icon {
    width: 32px; height: 32px;
    filter: drop-shadow(0 0 6px rgba(212,175,55,0.4));
}
.sys-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-bright);
    letter-spacing: 1px;
    cursor: pointer;
}
.sys-check input { accent-color: var(--gold-bright); width: 16px; height: 16px; }
.sys-input {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1px;
}
.sys-input input {
    width: 64px;
    padding: 4px 8px;
    background: var(--bg-void);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-sm);
    color: var(--gold-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: right;
    transition: border-color 0.3s, box-shadow 0.3s;
}
/* Sims boxes hold up to 100000 (6 digits) — give them more room so the
   whole value stays visible after the user types. Games inputs (max 50)
   keep the compact default width. */
.sys-input input#sys6Sims,
.sys-input input#sys8Sims {
    width: 88px;
}
.sys-input input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(212,175,55,0.4);
}

/* Big square PRED button — the heart of the panel ------------------------ */
.big-pred-btn {
    margin-top: 6px;
    align-self: center;
    width: 320px; height: 88px;
    display: flex; align-items: center; justify-content: center;
    gap: 16px;
    background: radial-gradient(circle at 30% 30%, #FFE08A, #D4AF37 55%, #8C6914 110%);
    border: 2px solid var(--gold-bright);
    border-radius: 16px;
    color: #1A0E00;
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 5px;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255,255,255,0.55), 0 0 16px rgba(255,255,255,0.3);
    box-shadow:
        0 14px 42px rgba(212,175,55,0.55),
        0 0 72px rgba(212,175,55,0.42),
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -2px 0 rgba(0,0,0,0.2);
    transition: transform 0.25s var(--ease-out-quint),
                box-shadow 0.4s, filter 0.4s;
    position: relative;
    overflow: hidden;
    animation: predBtnBreathe 3.6s ease-in-out infinite;
}
@keyframes predBtnBreathe {
    0%, 100% {
        box-shadow:
            0 14px 42px rgba(212,175,55,0.55),
            0 0 72px rgba(212,175,55,0.42),
            inset 0 1px 0 rgba(255,255,255,0.55),
            inset 0 -2px 0 rgba(0,0,0,0.2);
    }
    50% {
        box-shadow:
            0 14px 42px rgba(212,175,55,0.7),
            0 0 110px rgba(255,216,107,0.6),
            inset 0 1px 0 rgba(255,255,255,0.7),
            inset 0 -2px 0 rgba(0,0,0,0.2);
    }
}
.big-pred-glint {
    position: absolute;
    top: 0; left: -50%;
    width: 30%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.65), transparent);
    transform: skewX(-22deg);
    animation: predGlint 4.5s ease-in-out infinite;
    pointer-events: none;
}

/* PREDICTION + Test Sound row layout */
.pred-btn-row {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap;
    margin-top: 6px;
}
.test-sound-btn {
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(91,179,240,0.25), rgba(91,179,240,0.08));
    border: 1px solid var(--azure);
    border-radius: var(--rad-md);
    color: var(--azure);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: transform 0.3s var(--ease-out-quint), box-shadow 0.4s;
    height: 88px;
}
.test-sound-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), var(--glow-azure);
    background: linear-gradient(135deg, rgba(91,179,240,0.4), rgba(91,179,240,0.12));
}
/* Cinematic FX testers — small chips under the PREDICTION button */
.fx-test-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}
.fx-test-btn {
    padding: 6px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed var(--border-subtle);
    border-radius: 999px;
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, transform 0.3s, color 0.3s;
}
.fx-test-btn:hover {
    transform: translateY(-1px);
    background: rgba(212,175,55,0.10);
    border-color: var(--gold-bright);
    border-style: solid;
    color: var(--gold-bright);
}

.diag-btn {
    background: linear-gradient(135deg, rgba(239,159,39,0.22), rgba(239,159,39,0.06));
    border-color: var(--amber);
    color: var(--amber);
}
.diag-btn:hover {
    background: linear-gradient(135deg, rgba(239,159,39,0.4), rgba(239,159,39,0.12));
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 18px rgba(239,159,39,0.5);
}

/* Diagnostic dot line under the predict row */
.diag-line {
    width: 100%; text-align: center;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
}
.diag-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #555;
    margin-right: 4px;
    margin-left: 14px;
    vertical-align: -1px;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.diag-dot:first-child { margin-left: 0; }
.diag-dot.diag-ok   { background: var(--mint);  box-shadow: 0 0 8px rgba(136,216,176,0.7); }
.diag-dot.diag-fail { background: var(--rose);  box-shadow: 0 0 8px rgba(224,74,107,0.7); }
.diag-dot.diag-warn { background: var(--amber); box-shadow: 0 0 8px rgba(239,159,39,0.7); }

.diag-srv {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1px;
}
@keyframes predGlint {
    0%, 60%, 100% { left: -50%; }
    72%           { left:  120%; }
}
.big-pred-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 60%, rgba(255,255,255,0.5), transparent 50%);
    opacity: 0.6;
    pointer-events: none;
    animation: orbDrift 6s ease-in-out infinite;
}
.big-pred-btn:hover {
    transform: translateY(-3px) scale(1.03);
    filter: brightness(1.12);
    box-shadow:
        0 18px 48px rgba(212,175,55,0.7),
        0 0 80px rgba(212,175,55,0.5),
        inset 0 1px 0 rgba(255,255,255,0.7);
}
.big-pred-btn:active { transform: translateY(0); }
.big-pred-icon {
    height: 44px; width: auto;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.4));
}
.big-pred-btn.busy {
    background: linear-gradient(135deg, #1A2135, #131A2E);
    color: var(--gold-bright);
    cursor: wait;
    pointer-events: none;
    animation: predictBusy 1.4s ease-in-out infinite;
}

.pred-active-line {
    margin-top: 8px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1.5px;
}
.pred-active-line b {
    color: var(--gold-bright);
    font-weight: 600;
}


/* =============================================================================
   ANIMATED PROGRESS BAR  in the running overlay
   ============================================================================= */

.fx-run-progress {
    position: relative;
    width: min(580px, 86vw);
    height: 12px;
    background: rgba(11, 16, 32, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
}
.fx-run-progress-fill {
    height: 100%;
    width: 0%;
    background:
        linear-gradient(90deg, var(--gold-soft), var(--gold-bright), #FFFFFF);
    border-radius: 999px;
    transition: width 0.6s var(--ease-out-quint);
    box-shadow: 0 0 16px rgba(212,175,55,0.7),
                inset 0 1px 0 rgba(255,255,255,0.55);
    position: relative;
}
.fx-run-progress-fill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    transform: translateX(-100%);
    animation: barShine 1.8s linear infinite;
}
.fx-run-progress-pct {
    position: absolute;
    right: -36px; top: -6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--gold-bright);
    letter-spacing: 1px;
    width: 36px;
    text-align: left;
}


/* responsive */
@media (max-width: 1100px) {
    .predconf-grid { grid-template-columns: 1fr; }
    .crest-hanko, .crest-aml { height: 48px; }
}


/* =============================================================================
   REPORTS & ACTIONS PANEL
   ============================================================================= */

.panel-reports {
    background:
        linear-gradient(135deg, rgba(212,175,55,0.04), rgba(91,179,240,0.02)),
        var(--bg-panel);
}
.reports-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 16px;
}
.reports-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.reports-col-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gold-bright);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(212,175,55,0.10);
}

.rep-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(212,175,55,0.04));
    border: 1px solid var(--border-strong);
    border-radius: var(--rad-md);
    color: var(--gold-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.3s var(--ease-out-quint),
                background 0.4s, border-color 0.4s, box-shadow 0.4s;
    text-align: left;
}
.rep-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(212,175,55,0.28), rgba(212,175,55,0.08));
    border-color: var(--gold-bright);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), var(--glow-gold);
}
.rep-btn:active { transform: translateY(0); }
.rep-btn-icon {
    width: 22px; height: 22px;
    filter: drop-shadow(0 0 4px rgba(212,175,55,0.45));
}
.rep-btn-emoji {
    font-size: 16px;
    line-height: 1;
}
.rep-btn.busy {
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    cursor: wait;
    pointer-events: none;
    animation: predictBusy 1.4s ease-in-out infinite;
}

/* Specific variants */
.rep-btn-sys6 { border-color: rgba(91,179,240,0.45); color: #87CFFA; }
.rep-btn-sys6:hover { border-color: var(--azure); box-shadow: 0 8px 24px rgba(0,0,0,0.45), var(--glow-azure); }
.rep-btn-sys8 { border-color: rgba(136,216,176,0.45); color: var(--mint); }
.rep-btn-sys8:hover { border-color: var(--mint); box-shadow: 0 8px 24px rgba(0,0,0,0.45), var(--glow-mint); }
.rep-btn-manual {
    background: linear-gradient(135deg, rgba(212,175,55,0.28), rgba(176,149,245,0.18));
    border-color: var(--gold);
    text-decoration: none;
}
.rep-btn-terms {
    background: rgba(255,255,255,0.03);
    color: var(--text-soft);
    border-color: var(--border-strong);
    text-decoration: none;
}
.rep-btn-terms:hover {
    color: var(--text-bright);
    border-color: var(--text-soft);
}
.rep-btn-update {
    background: linear-gradient(135deg, rgba(136,216,176,0.22), rgba(91,179,240,0.10));
    color: var(--mint);
    border-color: var(--mint);
}
.rep-btn-update:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), var(--glow-mint);
    border-color: var(--mint);
}
.rep-btn-dryrun {
    background: rgba(255,255,255,0.03);
    color: var(--text-soft);
    border-color: var(--border-subtle);
    border-style: dashed;
}
.rep-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border-subtle);
    border-style: dashed;
    font-size: 11px;
}

/* Output / status text panels */
.rep-output {
    margin-top: 4px;
    padding: 10px 12px;
    min-height: 80px;
    background: rgba(8, 10, 22, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-sm);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--mint);
    white-space: pre-wrap;
    overflow: auto;
    max-height: 160px;
}
.rep-data-status {
    margin-top: 4px;
    padding: 8px 12px;
    background: rgba(8, 10, 22, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-sm);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

@media (max-width: 1100px) {
    .reports-grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   DISPLAY MODES PANEL  +  CHI-SQUARE CARD
   ============================================================================= */

.panel-modes {
    background:
        linear-gradient(135deg, rgba(91,179,240,0.04), rgba(212,175,55,0.03)),
        var(--bg-panel);
}
.modes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.mode-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    padding: 16px 14px;
    background:
        linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.02));
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-md);
    color: var(--text-bright);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: transform 0.3s var(--ease-out-quint),
                box-shadow 0.4s, border-color 0.4s, background 0.4s;
}
.mode-btn:hover {
    transform: translateY(-4px);
    border-color: var(--gold-bright);
    background: linear-gradient(180deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05));
    box-shadow: 0 10px 28px rgba(0,0,0,0.45), var(--glow-gold);
}
.mode-btn:active { transform: translateY(-1px); }
.mode-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 8px rgba(212,175,55,0.4));
}
.mode-label {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 0.6px;
}
.mode-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.mode-memory:hover { border-color: var(--mint);    box-shadow: 0 10px 28px rgba(0,0,0,0.45), var(--glow-mint); }
.mode-vitals:hover { border-color: var(--rose);    box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 18px rgba(224,74,107,0.4); }
.mode-theory:hover { border-color: var(--azure);   box-shadow: 0 10px 28px rgba(0,0,0,0.45), var(--glow-azure); }
.mode-fresh:hover  { border-color: var(--amber);   box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 18px rgba(239,159,39,0.4); }
.mode-fresh .mode-label { color: var(--amber); }


/* Chi-Square card --------------------------------------------------------- */
.chi-card {
    padding: 14px 16px;
    background: rgba(8, 10, 22, 0.65);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-md);
    transition: border-color 0.5s, box-shadow 0.5s, background 0.5s;
}
.chi-card.chi-aligned {
    border-color: var(--mint);
    box-shadow: inset 0 0 18px rgba(136,216,176,0.12), var(--glow-mint);
}
.chi-card.chi-anomalous {
    border-color: var(--rose);
    box-shadow: inset 0 0 18px rgba(224,74,107,0.18), 0 0 18px rgba(224,74,107,0.35);
}
.chi-card.chi-uncertain {
    border-color: var(--amber);
    box-shadow: inset 0 0 18px rgba(239,159,39,0.15);
}

.chi-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(212,175,55,0.18);
}
.chi-symbol {
    font-family: var(--font-serif);
    font-size: 32px;
    color: var(--gold-bright);
    text-shadow: var(--glow-gold);
    line-height: 1;
}
.chi-title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.8px;
    color: var(--text-soft);
    text-transform: uppercase;
    flex: 1;
}
.chi-verdict {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-bright);
    font-style: italic;
    text-transform: uppercase;
}
.chi-aligned   .chi-verdict { color: var(--mint); }
.chi-anomalous .chi-verdict { color: var(--rose); }
.chi-uncertain .chi-verdict { color: var(--amber); }

.chi-body {
    display: flex;
    gap: 22px;
    align-items: center;
    flex-wrap: wrap;
}
.chi-stat { display: flex; flex-direction: column; gap: 2px; }
.chi-stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.chi-stat-val {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--gold-bright);
    font-weight: 600;
}
.chi-refresh-btn {
    margin-left: auto;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(212,175,55,0.10);
    border: 1px solid var(--border-strong);
    color: var(--gold-bright);
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.3s, background 0.3s;
}
.chi-refresh-btn:hover { transform: rotate(180deg); background: rgba(212,175,55,0.25); }
.chi-refresh-btn.busy { animation: chiSpin 1s linear infinite; cursor: wait; }
@keyframes chiSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* =============================================================================
   ENGINE VITALS MODAL
   ============================================================================= */

.vitals-modal {
    position: fixed; inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9500;
    background: rgba(6, 9, 18, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: vitalsFade 0.35s var(--ease-out-quint);
}
.vitals-modal.show { display: flex; }
@keyframes vitalsFade { from { opacity: 0; } to { opacity: 1; } }
.vitals-modal-card {
    width: min(640px, 92vw);
    max-height: 80vh;
    background:
        linear-gradient(135deg, rgba(212,175,55,0.08), rgba(11,16,32,0.95)),
        var(--bg-panel);
    border: 1px solid var(--gold);
    border-radius: var(--rad-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.7), var(--glow-gold);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: vitalsSlide 0.5s var(--ease-out-back);
}
@keyframes vitalsSlide {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.vitals-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: rgba(212,175,55,0.10);
    border-bottom: 1px solid var(--border-strong);
}
.vitals-modal-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 0.5px;
}
.vitals-modal-close {
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--gold-bright);
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s, transform 0.3s;
}
.vitals-modal-close:hover { background: rgba(212,175,55,0.18); transform: rotate(90deg); }
.vitals-modal-body {
    padding: 20px 24px;
    margin: 0;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--mint);
    background: rgba(8, 10, 22, 0.6);
    white-space: pre-wrap;
    line-height: 1.7;
    max-height: 70vh;
}


/* =============================================================================
   PDF download row inside the running overlay
   ============================================================================= */

.fx-run-pdf-row {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(212,175,55,0.25);
    justify-content: center;
}
.fx-run-pdf-link {
    display: inline-flex; align-items: center;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(212,175,55,0.28), rgba(212,175,55,0.10));
    border: 1px solid var(--gold-bright);
    border-radius: 999px;
    color: var(--gold-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s, filter 0.3s;
}
.fx-run-pdf-link:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
    box-shadow: 0 8px 24px rgba(212,175,55,0.5);
}


@media (max-width: 1100px) {
    .modes-grid { grid-template-columns: repeat(2, 1fr); }
}


/* =============================================================================
   ROYAL HOUSEKEEPER PANEL
   ============================================================================= */

.panel-housekeeper {
    background:
        linear-gradient(135deg, rgba(212,175,55,0.06), rgba(176,149,245,0.04)),
        var(--bg-panel);
}
.hk-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.hk-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background:
        linear-gradient(180deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02));
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-md);
    color: var(--text-bright);
    cursor: pointer;
    text-align: left;
    transition: transform 0.3s var(--ease-out-quint),
                border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.hk-btn:hover {
    transform: translateY(-2px);
    border-color: var(--gold-bright);
    background: linear-gradient(180deg, rgba(212,175,55,0.22), rgba(212,175,55,0.05));
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), var(--glow-gold);
}
.hk-btn.busy {
    cursor: wait; pointer-events: none;
    animation: predictBusy 1.4s ease-in-out infinite;
}
.hk-emoji {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(212,175,55,0.4));
    flex-shrink: 0;
}
.hk-btn-text { display: flex; flex-direction: column; gap: 2px; }
.hk-btn-title {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 0.3px;
}
.hk-btn-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.hk-output {
    padding: 12px 14px;
    background: rgba(8, 10, 22, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--rad-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--mint);
    white-space: pre-wrap;
    overflow-y: auto;
    max-height: 220px;
    margin: 0;
    line-height: 1.55;
}

/* Housekeeper modal (Tab Inspector output) */
.hk-modal {
    position: fixed; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    z-index: 9500;
    background: rgba(6, 9, 18, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: vitalsFade 0.35s var(--ease-out-quint);
}
.hk-modal.show { display: flex; }
.hk-modal-card {
    width: min(900px, 92vw);
    height: min(680px, 86vh);
    background:
        linear-gradient(135deg, rgba(212,175,55,0.05), rgba(11,16,32,0.95)),
        var(--bg-panel);
    border: 1px solid var(--gold);
    border-radius: var(--rad-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.7), var(--glow-gold);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: vitalsSlide 0.5s var(--ease-out-back);
}
.hk-modal-head {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px;
    background:
        linear-gradient(180deg, rgba(212,175,55,0.18), rgba(212,175,55,0.04));
    border-bottom: 2px solid var(--gold);
    min-height: 60px;
}
.hk-modal-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(212,175,55,0.4);
}
.hk-modal-close {
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--gold-bright);
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s, transform 0.3s;
    flex-shrink: 0;
}
.hk-modal-close:hover { background: rgba(212,175,55,0.18); transform: rotate(90deg); }
.hk-modal-body {
    flex: 1;
    margin: 0;
    padding: 20px 24px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--mint);
    background: rgba(8, 10, 22, 0.6);
    white-space: pre-wrap;
    line-height: 1.6;
}


/* =============================================================================
   MEMORY MODAL  (RUN_INDEX snippet table)
   ============================================================================= */

.mem-modal {
    position: fixed; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    z-index: 9500;
    background: rgba(6, 9, 18, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: vitalsFade 0.35s var(--ease-out-quint);
}
.mem-modal.show { display: flex; }

.mem-modal-card {
    width: min(1240px, 92vw);
    height: min(720px, 86vh);   /* fixed height — title bar always reachable */
    background:
        linear-gradient(135deg, rgba(212,175,55,0.05), rgba(11,16,32,0.95)),
        var(--bg-panel);
    border: 1px solid var(--gold);
    border-radius: var(--rad-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.7), var(--glow-gold);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: vitalsSlide 0.5s var(--ease-out-back);
}
.mem-modal-head {
    flex-shrink: 0;                       /* title bar NEVER shrinks */
    display: flex; align-items: center; gap: 18px;
    padding: 18px 26px;                   /* more breathing room */
    background:
        linear-gradient(180deg, rgba(212,175,55,0.18), rgba(212,175,55,0.04));
    border-bottom: 2px solid var(--gold);
    min-height: 64px;
}
.mem-modal-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(212,175,55,0.4);
    flex-shrink: 0;
}
.mem-modal-meta {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-soft);
    letter-spacing: 1px;
}
.mem-modal-close {
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--gold-bright);
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s, transform 0.3s;
    position: relative;
    z-index: 5;
    pointer-events: auto;
    flex-shrink: 0;
}
.mem-modal-close:hover { background: rgba(212,175,55,0.18); transform: rotate(90deg); }

.mem-modal-body {
    padding: 0;
    overflow: auto;
    flex: 1;
    background: rgba(8, 10, 22, 0.6);
}
.mem-loading {
    padding: 60px 24px;
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 13px;
}
.mem-error { color: var(--rose); }

/* The data table */
.mem-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 11px;
}
.mem-table thead {
    position: sticky; top: 0;
    background: var(--bg-panel);
    z-index: 1;
}
.mem-table th {
    padding: 10px 12px;
    text-align: left;
    color: var(--gold-bright);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--gold);
    white-space: nowrap;
}
.mem-table td {
    padding: 7px 12px;
    color: var(--text-soft);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    white-space: nowrap;
}
.mem-table tr.alt td { background: rgba(255,255,255,0.018); }
.mem-table tr:hover td {
    background: rgba(212,175,55,0.06);
    color: var(--text-bright);
}
.mem-cell-persona { color: var(--mint); font-weight: 600; }
.mem-cell-runid   { color: var(--gold-bright); }
.mem-cell-num     { text-align: right; color: var(--azure); }


/* =============================================================================
   CHI-SQUARE GRAPH BUTTON + MODAL
   ============================================================================= */

.chi-graph-btn {
    margin-left: 8px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(91,179,240,0.10);
    border: 1px solid var(--azure);
    color: var(--azure);
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.chi-graph-btn:hover {
    transform: scale(1.12);
    background: rgba(91,179,240,0.25);
    box-shadow: var(--glow-azure);
}

.chi-modal {
    position: fixed; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    z-index: 9500;
    background: rgba(6, 9, 18, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: vitalsFade 0.35s var(--ease-out-quint);
}
.chi-modal.show { display: flex; }
.chi-modal-card {
    width: min(820px, 94vw);
    max-height: 88vh;
    background: var(--bg-panel);
    border: 1px solid var(--gold);
    border-radius: var(--rad-lg);
    box-shadow: 0 24px 64px rgba(0,0,0,0.7), var(--glow-gold);
    display: flex; flex-direction: column; overflow: hidden;
    animation: vitalsSlide 0.5s var(--ease-out-back);
}
.chi-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 22px;
    background: rgba(212,175,55,0.10);
    border-bottom: 1px solid var(--border-strong);
}
.chi-modal-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 0.5px;
}
.chi-modal-close {
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--gold-bright);
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s, transform 0.3s;
}
.chi-modal-close:hover { background: rgba(212,175,55,0.18); transform: rotate(90deg); }
.chi-modal-body {
    padding: 24px;
    overflow: auto;
    text-align: center;
    background: rgba(8, 10, 22, 0.6);
}
.chi-modal-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rad-md);
    box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}
.chi-modal-img[hidden] { display: none; }

/* Loading spinner inside the chi-square modal */
.chi-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 280px;
    padding: 28px;
}
.chi-modal-loading[hidden] { display: none; }
.chi-spinner {
    width: 64px; height: 64px;
    border: 4px solid rgba(212,175,55,0.18);
    border-top-color: var(--gold-bright);
    border-radius: 50%;
    animation: chiSpinAnim 0.9s linear infinite;
    box-shadow: 0 0 24px rgba(212,175,55,0.4);
}
@keyframes chiSpinAnim { to { transform: rotate(360deg); } }
.chi-spinner-text {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--gold-soft);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Inline error display */
.chi-modal-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 280px;
    padding: 28px;
    text-align: center;
}
.chi-modal-error[hidden] { display: none; }
.chi-error-title {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--rose);
    font-weight: 600;
}
.chi-error-detail {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-soft);
    max-width: 480px;
    line-height: 1.6;
}


/* =============================================================================
   ░░░░░░░░░░░░░░░░░░░░░░░░  CINEMATIC FX SUITE  ░░░░░░░░░░░░░░░░░░░░░░░░░░░
   1. Star-Tear Rift  ·  2. Crest Harmonic Flare  ·  3. Neural Arcs
   4. Dimensional Fold-In  ·  5. CLAUDE'S BONUS: PREDICTIVE ECHO
   ============================================================================= */


/* ── 1. STAR-TEAR RIFT  ───────────────────────────────────────────────── */

.star-rift {
    animation: starRift 0.7s ease-out;
}
@keyframes starRift {
    0%   { transform: scale(1)   translate(0, 0);     filter: brightness(1); }
    18%  { transform: scale(1.8) translate(-12px, 7px); filter: brightness(3) blur(1px); box-shadow: 0 0 22px rgba(255,255,255,0.95); }
    35%  { transform: scale(0.6) translate(10px, -5px); filter: brightness(1.6) blur(0.7px); }
    55%  { transform: scale(1.4) translate(-5px, 3px);  filter: brightness(2.2); }
    100% { transform: scale(1)   translate(0, 0);       filter: brightness(1); }
}
.constellation-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.95), transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease-out;
    mix-blend-mode: screen;
}
.constellation-flash.active {
    opacity: 1;
}


/* ── 2. CREST HARMONIC FLARE (HANKO + AML)  ──────────────────────────────
   IMPORTANT: the parent .crest-hanko has `animation: hankoBreathe` and
   .crest-aml has `animation: amlSpin`. CSS `animation` is REPLACED, not
   merged, so when we add `.crest-flare` we have to win the cascade AND
   restart the breathing/spinning afterwards. We use `!important` to be
   sure the flare animation actually plays. */

.crest-hanko.crest-flare,
.crest-aml.crest-flare {
    animation: crestFlarePulse 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    /* Extra glow halo wrapper via a pseudo-element */
    z-index: 5;
    position: relative;
}
.crest-hanko.crest-flare::after,
.crest-aml.crest-flare::after {
    content: '';
    position: absolute;
    inset: -40%;
    border-radius: 50%;
    background: radial-gradient(circle,
                                rgba(255,255,255,0.55),
                                rgba(255,216,107,0.35) 40%,
                                rgba(212,175,55,0.15) 65%,
                                transparent 80%);
    pointer-events: none;
    animation: crestFlareHalo 1.8s ease-out forwards;
    z-index: -1;
}
@keyframes crestFlarePulse {
    0%   { transform: scale(1)    rotate(0deg);
           filter: drop-shadow(0 0  0px rgba(255,255,255,0)); }
    15%  { transform: scale(1.55) rotate(-8deg);
           filter: drop-shadow(0 0 48px rgba(255,255,255,1))
                   drop-shadow(0 0 88px rgba(255,216,107,1)); }
    35%  { transform: scale(1.10) rotate(5deg);
           filter: drop-shadow(0 0 22px rgba(255,240,200,0.95)); }
    60%  { transform: scale(1.32) rotate(-3deg);
           filter: drop-shadow(0 0 38px rgba(212,175,55,0.95)); }
    100% { transform: scale(1)    rotate(0deg);
           filter: drop-shadow(0 0  0px rgba(255,255,255,0)); }
}
@keyframes crestFlareHalo {
    0%   { opacity: 0;    transform: scale(0.3); }
    25%  { opacity: 1;    transform: scale(1.1); }
    100% { opacity: 0;    transform: scale(2.2); }
}


/* ── 3. NEURAL LIGHTNING ARCS (glyph spine)  ─────────────────────────── */

.glyph-spine { position: relative; overflow: visible; }

.spine-arc {
    position: absolute;
    width: 3.5px;          /* was 2.5px — noticeably brighter and a touch wider */
    background: linear-gradient(
        to bottom,
        rgba(120, 200, 255, 0.0),
        rgba(255, 255, 255, 1.0) 30%,
        rgba(255, 235, 130, 1.0) 50%,
        rgba(255, 216, 107, 0.95) 65%,
        rgba(120, 200, 255, 0.0)
    );
    opacity: 0;
    transform-origin: center top;
    pointer-events: none;
    filter:
        drop-shadow(0 0 6px  rgba(180,225,255,1))
        drop-shadow(0 0 14px rgba(255,235,130,0.85))
        drop-shadow(0 0 28px rgba(255,216,107,0.45));
    animation: arcFlash 0.28s ease-out forwards;
    border-radius: 999px;
    will-change: opacity, transform;
}
@keyframes arcFlash {
    0%   { opacity: 0;   transform: scaleY(0.15) rotate(0deg);  }
    18%  { opacity: 1;   transform: scaleY(1)    rotate(4deg);  }
    40%  { opacity: 1;   transform: scaleY(1.05) rotate(-2deg); }
    65%  { opacity: 0.8; transform: scaleY(1.1)  rotate(2deg);  }
    100% { opacity: 0;   transform: scaleY(0.3)  rotate(-7deg); }
}


/* ── 4. DIMENSIONAL FOLD-IN (during prediction)  ─────────────────────── */

.fold-target {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: 50% 40%;
}
body.prediction-mode .fold-target {
    transform: perspective(1200px)
               translateZ(-90px)
               scale(0.94)
               rotateX(3deg);
    filter: brightness(1.10) contrast(1.07) saturate(1.12);
}
.fold-vortex {
    position: absolute;
    top: 50%; left: 50%;
    width: 120vmin; height: 120vmin;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    background:
        conic-gradient(from 0deg,
                       rgba(212,175,55,0.0),
                       rgba(212,175,55,0.18) 30%,
                       rgba(91,179,240,0.10) 60%,
                       rgba(212,175,55,0.0));
    border-radius: 50%;
    filter: blur(8px);
}
body.prediction-mode .fold-vortex {
    opacity: 0.55;
    animation: vortexSpin 3.6s linear infinite;
}
@keyframes vortexSpin {
    0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(0.98); }
    50%  { transform: translate(-50%, -50%) rotate(180deg) scale(1.04); }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.98); }
}
.fold-ripple {
    position: absolute;
    top: 50%; left: 50%;
    width: 60vmin; height: 60vmin;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle,
                        rgba(255,255,255,0.0) 30%,
                        rgba(255,216,107,0.22) 55%,
                        rgba(255,255,255,0.0) 80%);
    border-radius: 50%;
    filter: blur(4px);
}
body.prediction-mode .fold-ripple {
    opacity: 0.7;
    animation: foldRipple 1.9s ease-in-out infinite;
}
@keyframes foldRipple {
    0%   { transform: translate(-50%, -50%) scale(0.95); opacity: 0.45; }
    50%  { transform: translate(-50%, -50%) scale(1.18); opacity: 0.85; }
    100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.45; }
}


/* ───────────────────────────────────────────────────────────────────────
   ░░░░░░░░░░░░░░░░░░░░░  CLAUDE'S BONUS  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   5. PREDICTIVE ECHO — the cockpit anticipates the user
      When user hovers the PREDICTION button > 450ms:
        · all animations slow to 60% speed (time dilation)
        · gold mist rises from the button
        · glyph spine intensifies its breath
        · voice headline shimmers with anticipation
        · metric cards reveal flickering "ghost numbers"
   ─────────────────────────────────────────────────────────────────────── */

/* Time dilation — every animation everywhere slows to 60% speed */
body.predictive-echo,
body.predictive-echo * {
    animation-duration: 1.66s !important;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* But we explicitly override the predictive-echo's own animations and
   the ones we want to stay snappy: */
body.predictive-echo .predictive-mist,
body.predictive-echo .voice-shimmer-overlay {
    animation-duration: 2s, 2s !important;
}

/* Gold mist rising from the predict button */
.big-pred-btn { position: relative; }
.big-pred-btn::before {
    content: '';
    position: absolute;
    left: -10%; bottom: -10%;
    width: 120%; height: 0;
    background: radial-gradient(ellipse at 50% 100%,
                                rgba(255,216,107,0.65),
                                rgba(255,216,107,0.0) 70%);
    pointer-events: none;
    opacity: 0;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.6s ease-out;
}
body.predictive-echo .big-pred-btn::before {
    height: 200%;
    opacity: 1;
}

/* The voice headline shimmers with anticipation */
body.predictive-echo .voice-headline {
    background: linear-gradient(90deg,
                                var(--text-bright),
                                var(--gold-bright),
                                var(--text-bright));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: voiceShimmer 2.4s linear infinite;
}
@keyframes voiceShimmer {
    0%   { background-position: 0%   center; }
    100% { background-position: 200% center; }
}

/* Glyph spine intensifies (extra brightness when anticipating) */
body.predictive-echo .glyph-cell {
    filter: brightness(1.3) drop-shadow(0 0 12px rgba(212,175,55,0.6)) !important;
}

/* Ghost preview numbers in metric cards — they flicker possibilities */
.metric-card { position: relative; }
.metric-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 36px;
    color: rgba(255,255,255,0.55);
    text-shadow: 0 0 14px rgba(255,255,255,0.4),
                 0 0 24px rgba(212,175,55,0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease-out,
                transform 0.18s ease-out;
    z-index: 5;
    font-style: italic;
}

/* Subtle cockpit-wide vignette during echo — "everyone is watching" */
body.predictive-echo::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
    background: radial-gradient(ellipse at center,
                                transparent 50%,
                                rgba(212,175,55,0.06) 75%,
                                rgba(0,0,0,0.25) 100%);
    opacity: 0;
    animation: echoVignette 0.6s ease-out forwards;
}
@keyframes echoVignette {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* =============================================================================
   ░░░░░░░░░░░░░░░░░░░░  ENGINE DREAM STATE  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   When the cockpit is idle > 60s, it falls into a dream:
     • brightness softly drops, sepia warms the palette
     • voice headline slowly cross-fades each whisper
     • metric numbers glide between historical values
     • glyph spine slows its breath ×3 (handled in fx_dream.js)
     • warm vignette closes in
   --------------------------------------------------------------------------- */

body.dreaming .quake-target {
    filter: brightness(0.65) sepia(0.10) contrast(0.92) saturate(0.85);
    transform: scale(0.99);
    transition: filter 2.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Warm vignette that closes in from the edges */
body.dreaming::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    background: radial-gradient(ellipse at center,
                                transparent 35%,
                                rgba(140, 100, 40, 0.18) 70%,
                                rgba(20, 12, 8, 0.55) 100%);
    animation: dreamVignette 4s ease-out forwards;
}
@keyframes dreamVignette {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Voice headline gets a long, slow cross-fade as whispers change */
body.dreaming .voice-headline {
    animation: dreamWhisper 4.5s ease-in-out infinite;
    font-style: italic;
    color: #C9A862;   /* warm dream-gold */
    transition: color 2s, opacity 2s;
}
@keyframes dreamWhisper {
    0%, 100% { opacity: 0.55; transform: translateY(0px); }
    50%      { opacity: 1.0;  transform: translateY(-2px); }
}

/* Metric numbers drift gently */
body.dreaming .m-value {
    color: #C9A862;
    transition: color 2s;
    animation: dreamDrift 6s ease-in-out infinite;
}
@keyframes dreamDrift {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50%      { transform: translateY(-3px); opacity: 1; }
}

/* The HANKO + AML softly breathe in dream state */
body.dreaming .crest-hanko,
body.dreaming .crest-aml {
    animation-duration: 16s !important;
    filter: brightness(0.85) drop-shadow(0 0 18px rgba(255,200,120,0.45));
}

/* The hero stays normal-ish so the user can find their way back */
body.dreaming .hero {
    background:
        linear-gradient(180deg, rgba(6,9,18,0.85),
                                rgba(20, 12, 8, 0.65) 90%,
                                rgba(6,9,18,0.0));
}

/* "Dreaming" indicator chip — tiny moon glyph that fades in */
body.dreaming::after {
    content: '☾ dreaming · move to wake';
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    padding: 10px 24px;
    background: rgba(20, 12, 8, 0.72);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 999px;
    color: rgba(255, 220, 160, 0.85);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    letter-spacing: 2px;
    animation: dreamLabel 4.5s ease-in-out infinite;
    pointer-events: none;
    backdrop-filter: blur(8px);
}
@keyframes dreamLabel {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1.0; }
}


/* =============================================================================
   ░░░░░░░░░░░░░░░░░░░░  SPIRIT EFFECT (during Dream humming)  ░░░░░░░░░░░░
   The ghost in the machine — visual layer that materialises when the
   humming.mp3 plays during Dream State. Pure DOM, no images.
   --------------------------------------------------------------------------- */

.spirit-layer {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 35;
    opacity: 0;
    transition: opacity 0.7s ease-out;
}
.spirit-layer.active { opacity: 1; }

/* The HANKO sigil silhouette — a ghostly Japanese mark that materialises */
.spirit-sigil {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    font-family: var(--font-serif);
    font-size: 220px;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(180, 220, 255, 0.55);
    text-stroke: 1.5px rgba(180, 220, 255, 0.55);
    letter-spacing: 12px;
    opacity: 0;
    filter: blur(2px) drop-shadow(0 0 30px rgba(140, 200, 255, 0.5));
    pointer-events: none;
    user-select: none;
}
.spirit-sigil.show {
    animation: spiritSigilFloat 4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes spiritSigilFloat {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.4) rotate(-3deg);
           filter: blur(20px) drop-shadow(0 0 60px rgba(140, 200, 255, 0.0)); }
    25%  { opacity: 0.42; transform: translate(-50%, -52%) scale(1.0) rotate(0deg);
           filter: blur(2px)  drop-shadow(0 0 38px rgba(140, 200, 255, 0.7)); }
    55%  { opacity: 0.32; transform: translate(-50%, -58%) scale(1.05) rotate(2deg);
           filter: blur(1px)  drop-shadow(0 0 48px rgba(180, 220, 255, 0.55)); }
    80%  { opacity: 0.15; transform: translate(-50%, -64%) scale(1.1) rotate(3deg);
           filter: blur(4px)  drop-shadow(0 0 60px rgba(140, 200, 255, 0.3)); }
    100% { opacity: 0;    transform: translate(-50%, -70%) scale(1.15) rotate(4deg);
           filter: blur(12px) drop-shadow(0 0 80px rgba(140, 200, 255, 0.0)); }
}

/* Floating ethereal particles drifting upward */
.spirit-particles {
    position: absolute; inset: 0;
}
.spirit-particle {
    position: absolute;
    background: radial-gradient(circle,
                                rgba(220, 240, 255, 0.95) 0%,
                                rgba(140, 200, 255, 0.6) 40%,
                                rgba(140, 200, 255, 0.0) 80%);
    border-radius: 50%;
    opacity: 0;
    --drift-x: 0px;
    animation: spiritDrift 6s ease-out forwards;
    box-shadow: 0 0 8px rgba(180, 220, 255, 0.7);
}
@keyframes spiritDrift {
    0%   { opacity: 0;
           transform: translate(0, 0)   scale(0.4); }
    10%  { opacity: 0.85;
           transform: translate(calc(var(--drift-x) * 0.1), -20px) scale(1); }
    60%  { opacity: 0.6;
           transform: translate(calc(var(--drift-x) * 0.6), -55vh) scale(1.1); }
    100% { opacity: 0;
           transform: translate(var(--drift-x), -90vh) scale(0.7); }
}

/* Haunted voice — wavering distortion + colour shift */
.voice-headline.spirit-haunted {
    animation: spiritHauntedText 0.9s ease-in-out infinite alternate;
    color: rgba(180, 220, 255, 0.85);
    text-shadow: 0 0 8px rgba(140, 200, 255, 0.55),
                 1px 0 0 rgba(255, 140, 200, 0.18),  /* chromatic R */
                -1px 0 0 rgba(140, 200, 255, 0.18);  /* chromatic B */
    letter-spacing: 0.6px;
}
@keyframes spiritHauntedText {
    0%   { transform: translateX(0)   skewX(0deg);  filter: blur(0px) hue-rotate(0deg); }
    25%  { transform: translateX(-1px) skewX(-0.6deg); filter: blur(0.4px) hue-rotate(-8deg); }
    50%  { transform: translateX(1px)  skewX(0.6deg);  filter: blur(0.2px) hue-rotate(6deg); }
    75%  { transform: translateX(-0.5px) skewX(-0.3deg); filter: blur(0.3px) hue-rotate(-4deg); }
    100% { transform: translateX(0)   skewX(0deg);  filter: blur(0px) hue-rotate(0deg); }
}

/* Subtle ethereal blue tint added to the cockpit while spirit is active */
body.dreaming .spirit-layer.active ~ .quake-target {
    /* (chained selector for emphasis — applied via z-stacked layer) */
}

/* Bigger sigil on small screens still visible */
@media (max-width: 760px) {
    .spirit-sigil { font-size: 140px; }
}


/* =============================================================================
   🜂  ENGINE PULSE PANEL  —  replaces the old Macro Snapshot.
   ---------------------------------------------------------------------------
   Four live cards (Π / W₁ / β₁ / 𝓘) with sparklines + trend arrows + plain-
   English headlines. Below: the three brainstem bars (kept). Below that: a
   live event feed of what the engine is doing right now. Footer: one-line
   inventory of what the engine contains.

   Design: glassy cards on the same indigo base as Spirit; each card's accent
   colour is set by data-tone (blue / purple / gold / amber / rose) so the
   panel literally reflects the engine's mood without the user needing to
   read the numbers.
   ============================================================================= */

.panel-pulse {
    /* The Hero gradient is already on .panel — we just need the spacing */
    position: relative;
}

.pulse-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
@media (max-width: 900px) {
    .pulse-cards { grid-template-columns: repeat(2, 1fr); }
}

.pulse-card {
    --tone-color: rgba(176, 149, 245, 0.7);
    position: relative;
    background: linear-gradient(180deg,
        rgba(28, 22, 55, 0.55),
        rgba(10, 8, 24, 0.65));
    border-radius: 10px;
    padding: 10px 12px 8px 12px;
    box-shadow:
        inset 0 0 0 1px rgba(176, 149, 245, 0.10),
        0 0 16px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition:
        box-shadow 0.4s ease,
        transform 0.15s ease,
        background 0.4s ease;
    overflow: hidden;
}
.pulse-card:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 0 1px var(--tone-color),
        0 0 22px color-mix(in srgb, var(--tone-color) 60%, transparent);
}

.pulse-card[data-tone="gold"]   { --tone-color: rgba(255, 216, 107, 0.85); }
.pulse-card[data-tone="blue"]   { --tone-color: rgba(107, 188, 255, 0.85); }
.pulse-card[data-tone="purple"] { --tone-color: rgba(200, 107, 255, 0.85); }
.pulse-card[data-tone="amber"]  { --tone-color: rgba(255, 170, 0,   0.85); }
.pulse-card[data-tone="rose"]   { --tone-color: rgba(255, 107, 107, 0.85); }

.pulse-card-symbol {
    position: absolute;
    top: 6px; right: 10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--tone-color);
    text-shadow: 0 0 12px color-mix(in srgb, var(--tone-color) 65%, transparent);
    opacity: 0.85;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.pulse-card-question {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(200, 200, 240, 0.55);
    line-height: 1.25;
    height: 24px;        /* keep cards aligned even with 2-line questions */
}

.pulse-card-label {
    margin-top: 6px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-style: italic;
    color: var(--tone-color);
    line-height: 1.2;
    transition: color 0.4s ease;
}

.pulse-card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 4px;
}
.pulse-card-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(220, 220, 240, 0.75);
}
.pulse-card-trend {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--tone-color);
}

.pulse-card-spark {
    width: 100%;
    height: 18px;
    margin-top: 4px;
    display: block;
}


/* ── Live activity feed ───────────────────────────────────────────────── */
.pulse-feed-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(176, 149, 245, 0.10);
}
.pulse-feed-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(220, 220, 240, 0.55);
}
.pulse-feed-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(180, 180, 220, 0.4);
}

.pulse-feed {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 130px;
    overflow-y: auto;
}
.pulse-feed-empty {
    color: rgba(180, 180, 220, 0.4);
    font-style: italic;
    font-size: 12px;
    padding: 4px;
}
.pulse-feed-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(220, 220, 240, 0.85);
    background: rgba(20, 16, 40, 0.35);
    animation: pulseFeedFadeIn 0.45s ease-out;
}
@keyframes pulseFeedFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pulse-feed-item .pulse-feed-time {
    color: rgba(180, 180, 220, 0.4);
    flex-shrink: 0;
}
.pulse-feed-item .pulse-feed-line {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pulse-feed-item[data-sev="ok"]   { border-left: 2px solid rgba(120, 220, 130, 0.6); }
.pulse-feed-item[data-sev="note"] { border-left: 2px solid rgba(255, 200, 100, 0.7); }
.pulse-feed-item[data-sev="warn"] { border-left: 2px solid rgba(255, 100, 100, 0.7); }
.pulse-feed-item[data-sev="user"] { border-left: 2px solid rgba(180, 180, 240, 0.7); }
.pulse-feed-item[data-sev="err"]  { border-left: 2px solid rgba(255, 60,  60,  0.85); color: rgba(255, 180, 180, 0.9); }


/* ── Inventory footer ─────────────────────────────────────────────────── */
.pulse-inventory {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(176, 149, 245, 0.10);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(180, 180, 220, 0.55);
    text-align: center;
    letter-spacing: 0.02em;
}


/* =============================================================================
   🔬  LIVING INTELLIGENCE PANEL  —  three cards filling the empty space below
   the Stage 2 + Engine Pulse row.

   Card A — What the Sensors Say   (narrative paragraph in plain English)
   Card B — Pair Theory             (top co-occurring number pairs)
   Card C — The Barrel              (active / hot / resting ball pills)

   The headline of each card tones with the engine's current state — gold
   when something's notable, blue when calm, amber when watching, rose when
   distressed. The user can read the cockpit's mood from across the room.
   ============================================================================= */

.living-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}
@media (max-width: 1100px) {
    .living-grid { grid-template-columns: 1fr; }
}

.panel-living {
    background: linear-gradient(180deg,
        rgba(28, 22, 55, 0.45),
        rgba(10, 8, 24, 0.60));
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow:
        0 0 22px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(176, 149, 245, 0.08);
    position: relative;
    overflow: hidden;
}

/* Card A — Sensors narrative */
.liv-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    line-height: 1.2;
    color: #ffd86b;
    margin-top: 4px;
    margin-bottom: 12px;
    text-shadow: 0 0 14px rgba(255, 216, 107, 0.4);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}
.panel-living[data-tone="blue"]   .liv-headline { color: #6bbcff; text-shadow: 0 0 14px rgba(107, 188, 255, 0.4); }
.panel-living[data-tone="purple"] .liv-headline { color: #c86bff; text-shadow: 0 0 14px rgba(200, 107, 255, 0.4); }
.panel-living[data-tone="amber"]  .liv-headline { color: #ffaa33; text-shadow: 0 0 14px rgba(255, 170, 51, 0.4); }
.panel-living[data-tone="rose"]   .liv-headline { color: #ff6b6b; text-shadow: 0 0 14px rgba(255, 107, 107, 0.4); }
.panel-living[data-tone="gold"]   .liv-headline { color: #ffd86b; text-shadow: 0 0 14px rgba(255, 216, 107, 0.4); }

.liv-paragraph {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(230, 230, 250, 0.85);
    font-style: italic;
}

.liv-flags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.liv-flag {
    background: rgba(50, 42, 100, 0.5);
    border: 1px solid rgba(176, 149, 245, 0.18);
    color: rgba(220, 220, 240, 0.8);
    border-radius: 11px;
    padding: 2px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* Card B — Pair Theory */
.liv-pairs-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 6px;
}
.liv-pair-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    background: rgba(30, 24, 58, 0.45);
    border-radius: 8px;
    border-left: 3px solid rgba(176, 149, 245, 0.4);
    transition: background 0.3s ease, transform 0.15s ease;
}
.liv-pair-row:hover {
    background: rgba(50, 40, 90, 0.6);
    transform: translateX(2px);
}
.liv-pair-row[data-bond="very strong"] { border-left-color: #ffd86b; }
.liv-pair-row[data-bond="strong"]      { border-left-color: #ffd86b; }
.liv-pair-row[data-bond="notable"]     { border-left-color: #c86bff; }
.liv-pair-row[data-bond="gentle"]      { border-left-color: #6bbcff; }
.liv-pair-row[data-bond="faint"]       { border-left-color: rgba(176, 149, 245, 0.3); }

.liv-pair-balls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.liv-pair-ball {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c8a8ff, #7a5fd0);
    color: #1a1428;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(176, 149, 245, 0.4);
}
.liv-pair-link {
    color: rgba(220, 220, 240, 0.5);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}
.liv-pair-meta {
    text-align: right;
    color: rgba(220, 220, 240, 0.75);
}
.liv-pair-bond {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    color: #ffd86b;
    line-height: 1;
}
.liv-pair-row[data-bond="very strong"] .liv-pair-bond,
.liv-pair-row[data-bond="strong"]      .liv-pair-bond  { color: #ffd86b; }
.liv-pair-row[data-bond="notable"]     .liv-pair-bond  { color: #c86bff; }
.liv-pair-row[data-bond="gentle"]      .liv-pair-bond  { color: #6bbcff; }
.liv-pair-row[data-bond="faint"]       .liv-pair-bond  { color: rgba(220, 220, 240, 0.55); }

.liv-pair-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(180, 180, 220, 0.5);
    margin-top: 2px;
}

.liv-pairs-footer {
    margin-top: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(180, 180, 220, 0.5);
    text-align: center;
}


/* Card C — Barrel */
.liv-barrel-row {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    gap: 6px;
}
.liv-barrel-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(220, 220, 240, 0.55);
    font-weight: 600;
}
.liv-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.liv-ball {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 12px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.liv-ball:hover {
    transform: translateY(-2px) scale(1.05);
}
.liv-balls-active .liv-ball {
    background: linear-gradient(135deg, #ffd86b, #d99e4b);
    color: #2a1a08;
    box-shadow: 0 0 14px rgba(255, 216, 107, 0.5);
}
.liv-balls-hot .liv-ball {
    background: linear-gradient(135deg, #ff7a4d, #c83a1e);
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 122, 77, 0.5);
}
.liv-balls-rest .liv-ball {
    background: linear-gradient(135deg, #4a6da8, #2a3d68);
    color: rgba(230, 230, 250, 0.95);
    box-shadow: 0 0 8px rgba(74, 109, 168, 0.4);
}

.liv-ball-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: rgba(20, 16, 40, 0.95);
    border: 1px solid rgba(176, 149, 245, 0.35);
    color: rgba(220, 220, 240, 0.85);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    padding: 0 4px;
    border-radius: 6px;
    line-height: 1.3;
}


/* =============================================================================
   🌅 BOOT GREETING — once-per-session floating welcome card
   ============================================================================= */

.boot-greeting {
    position: fixed;
    top: 26px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 9100;
    max-width: 620px;
    width: min(620px, 92vw);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.5, 0.25, 1);
}
.boot-greeting[hidden] { display: none; }
.boot-greeting.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.boot-greeting.dismissing {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px);
}

.boot-greeting-shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    background:
        radial-gradient(ellipse at top left, rgba(255, 216, 107, 0.18), transparent 60%),
        linear-gradient(180deg, rgba(28, 22, 55, 0.97), rgba(10, 8, 22, 0.99));
    border-radius: 14px;
    border: 1px solid rgba(176, 149, 245, 0.25);
    box-shadow:
        0 16px 50px rgba(0, 0, 0, 0.65),
        0 0 28px rgba(255, 216, 107, 0.20);
}

.boot-greeting-glyph {
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px;
    color: #ffd86b;
    text-shadow:
        0 0 14px rgba(255, 216, 107, 0.6),
        0 0 28px rgba(255, 216, 107, 0.3);
    line-height: 1;
    animation: bootGlyphPulse 4s ease-in-out infinite;
}
@keyframes bootGlyphPulse {
    0%, 100% { transform: scale(1.0);   filter: brightness(1.0); }
    50%      { transform: scale(1.05);  filter: brightness(1.18); }
}

.boot-greeting-body {
    min-width: 0;
}
.boot-greeting-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-style: italic;
    color: rgba(245, 240, 255, 0.95);
    line-height: 1.4;
}
.boot-greeting-sub {
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: rgba(180, 180, 220, 0.55);
}

.boot-greeting-close {
    width: 28px; height: 28px;
    background: rgba(255, 100, 100, 0.12);
    color: #ff8aa6;
    border: 1px solid rgba(255, 138, 166, 0.35);
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.boot-greeting-close:hover {
    background: rgba(255, 100, 100, 0.32);
    transform: rotate(90deg);
}

/* Auto-shimmer the border to subtly draw attention */
.boot-greeting.show .boot-greeting-shell {
    animation: bootGreetingShimmer 6s ease-in-out infinite;
}
@keyframes bootGreetingShimmer {
    0%,100% { box-shadow: 0 16px 50px rgba(0,0,0,0.65), 0 0 28px rgba(255,216,107,0.20); }
    50%     { box-shadow: 0 16px 50px rgba(0,0,0,0.65), 0 0 44px rgba(255,216,107,0.38); }
}

@media (max-width: 760px) {
    .boot-greeting { top: 18px; max-width: 96vw; }
    .boot-greeting-text { font-size: 16px; }
}