/* ============================================================================
   VALHALLA NEXUS — Runeforge Command Interface
   Sci-fi command deck × Norse runeforge × ninja-blade precision.
   Loads AFTER every legacy sheet and re-themes the whole surface.
   - Preserves every element ID, data-* hook and JS contract.
   - Candle law preserved: green = bullish, red = bearish. Cyan never sits on candles.
   - Fluid rem scale: phone → 4K → browser zoom all resize cleanly.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
    /* depths */
    --nx-void: #010409;
    --nx-abyss: #030b18;
    --nx-deep: #061224;
    --nx-steel: #0a1c33;
    --nx-plate: #0e2440;
    /* light */
    --nx-cyan: #45d8ff;
    --nx-ice: #bdeeff;
    --nx-frost: #7fc6e8;
    --nx-silver: #cfdded;
    --nx-titanium: #93a9c0;
    /* forge */
    --nx-ember: #ffb85c;
    --nx-gold: #eec272;
    --nx-blood: #ff5d78;
    --nx-life: #47e1aa;
    --nx-storm: #8f7bff;
    /* lines */
    --nx-line: rgba(96, 176, 224, 0.22);
    --nx-line-strong: rgba(107, 220, 255, 0.55);
    --nx-line-dim: rgba(80, 140, 190, 0.12);
    /* glows */
    --nx-glow-cyan: 0 0 18px rgba(69, 216, 255, 0.28), 0 0 46px rgba(69, 216, 255, 0.10);
    --nx-glow-ember: 0 0 18px rgba(255, 184, 92, 0.30), 0 0 44px rgba(255, 184, 92, 0.10);
    /* surfaces */
    --nx-glass: linear-gradient(168deg, rgba(13, 32, 56, 0.86), rgba(5, 14, 28, 0.92));
    --nx-glass-raised: linear-gradient(160deg, rgba(18, 42, 72, 0.92), rgba(7, 18, 34, 0.95));
    --nx-inset: rgba(2, 9, 19, 0.72);
    /* type */
    --nx-font-display: "VALHALLA Marcellus", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --nx-font-ui: "VALHALLA Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
    --nx-font-mono: "VALHALLA Plex Mono", "Cascadia Mono", Consolas, "SF Mono", monospace;
    /* geometry */
    --nx-radius: 14px;
    --nx-radius-sm: 9px;
    --nx-cut: 16px;
    /* motion */
    --nx-snap: cubic-bezier(0.22, 1, 0.36, 1);
    --nx-blade: cubic-bezier(0.7, 0, 0.16, 1);

    /* Re-point the legacy token system at the NEXUS palette (dark theme).
       theme.css light-mode overrides still win on html[data-theme="light"]. */
    --background: var(--nx-void);
    --navy: var(--nx-abyss);
    --panel: #081627;
    --panel-light: #0d2138;
    --steel: var(--nx-steel);
    --border: #274b68;
    --text: #ecf6ff;
    --text-secondary: #b1c7da;
    --muted: #7f99b0;
    --accent: var(--nx-cyan);
    --cyan: var(--nx-cyan);
    --ember: var(--nx-gold);
    --decision-glow: rgba(69, 216, 255, 0.16);
    --valhalla-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
    --theme-page: var(--nx-void);
    --theme-accent: var(--nx-cyan);
}

/* --------------------------------------------------------- fluid rem scale */
/* Phones ~15px → laptops 16px → 1440p ~17px → 4K ~21px. Browser zoom stacks
   on top naturally because every NEXUS measure below is rem/em based. */
html {
    font-size: clamp(14.5px, 0.42vw + 10.9px, 22px);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: var(--nx-font-ui);
    background: var(--nx-void);
    color: var(--text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ global */
::selection { background: rgba(69, 216, 255, 0.32); color: #ffffff; }

* { scrollbar-width: thin; scrollbar-color: rgba(69, 216, 255, 0.35) rgba(4, 12, 24, 0.6); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(3, 10, 20, 0.65); }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(69, 216, 255, 0.45), rgba(30, 90, 130, 0.45));
    border-radius: 8px;
    border: 2px solid rgba(3, 10, 20, 0.8);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(69, 216, 255, 0.65); }

:focus-visible {
    outline: 2px solid var(--nx-cyan);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------------- atmosphere */
/* Injected once per page:
   <div class="nexus-atmosphere"><canvas id="nexus-sky"></canvas>
   <div class="nexus-horizon"></div><div class="nexus-vignette"></div></div> */
.nexus-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.nexus-atmosphere::before {
    /* storm sky: deep void with aurora wells */
    content: "";
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(58% 42% at 12% -6%, rgba(64, 132, 244, 0.16), transparent 62%),
        radial-gradient(46% 38% at 88% -4%, rgba(143, 123, 255, 0.13), transparent 60%),
        radial-gradient(70% 60% at 50% 118%, rgba(10, 50, 80, 0.5), transparent 70%),
        radial-gradient(28% 22% at 78% 30%, rgba(69, 216, 255, 0.07), transparent 65%),
        linear-gradient(180deg, #020610 0%, #030b18 44%, #04101f 100%);
}

#nexus-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

/* perspective grid floor — the holo deck */
.nexus-horizon {
    position: absolute;
    left: -22%;
    right: -22%;
    bottom: -6%;
    height: 46%;
    background:
        linear-gradient(to top, rgba(69, 216, 255, 0.10), transparent 72%),
        repeating-linear-gradient(90deg, rgba(69, 216, 255, 0.13) 0 1px, transparent 1px 88px),
        repeating-linear-gradient(0deg, rgba(69, 216, 255, 0.11) 0 1px, transparent 1px 52px);
    transform: perspective(48rem) rotateX(64deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.75), transparent 88%);
    mask-image: linear-gradient(to top, rgba(0,0,0,0.75), transparent 88%);
    animation: nx-horizon-drift 26s linear infinite;
}

@keyframes nx-horizon-drift {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 0 0, 0 0, 0 3.25rem; }
}

.nexus-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 50% 12%, transparent 58%, rgba(0, 2, 6, 0.55) 100%);
}

/* legacy aurora hooks become NEXUS aurora ribbons */
.dashboard-aurora {
    position: fixed;
    z-index: 0;
    width: 70vw;
    height: 60vh;
    filter: blur(58px);
    opacity: 0.65;
    pointer-events: none;
    mix-blend-mode: screen;
}

.dashboard-aurora-one {
    top: -18vh;
    left: -14vw;
    background:
        radial-gradient(52% 44% at 50% 50%, rgba(56, 150, 255, 0.34), transparent 70%),
        radial-gradient(40% 30% at 70% 30%, rgba(69, 216, 255, 0.22), transparent 70%);
    animation: nx-aurora-a 34s ease-in-out infinite alternate;
}

.dashboard-aurora-two {
    right: -16vw;
    bottom: -20vh;
    background:
        radial-gradient(50% 42% at 50% 50%, rgba(143, 123, 255, 0.26), transparent 70%),
        radial-gradient(36% 30% at 30% 60%, rgba(35, 210, 170, 0.14), transparent 70%);
    animation: nx-aurora-b 41s ease-in-out infinite alternate;
}

@keyframes nx-aurora-a {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(9vw, 6vh, 0) rotate(14deg) scale(1.14); }
    100% { transform: translate3d(2vw, 12vh, 0) rotate(-8deg) scale(0.94); }
}

@keyframes nx-aurora-b {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(-8vw, -7vh, 0) rotate(-12deg) scale(1.18); }
    100% { transform: translate3d(-2vw, -13vh, 0) rotate(9deg) scale(0.96); }
}

/* gate light pillars */
.dashboard-gate-lines {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    justify-content: space-evenly;
    opacity: 0.5;
    pointer-events: none;
}

.dashboard-gate-lines span {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(69, 216, 255, 0.16) 30%,
        rgba(69, 216, 255, 0.05) 55%,
        transparent 100%);
    animation: nx-pillar 9s ease-in-out infinite;
}

.dashboard-gate-lines span:nth-child(2) { animation-delay: 1.6s; }
.dashboard-gate-lines span:nth-child(3) { animation-delay: 3.1s; }
.dashboard-gate-lines span:nth-child(4) { animation-delay: 4.7s; }
.dashboard-gate-lines span:nth-child(5) { animation-delay: 6.4s; }

@keyframes nx-pillar {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.9; }
}

/* everything real sits above the atmosphere */
body > header,
body > main,
body > nav,
body > section,
body > footer { position: relative; z-index: 2; }

/* ------------------------------------------------------------- typography */
h1, h2, h3, .brand-kicker ~ h1, .chronicle-heading h2, .oath-heading h2 {
    font-family: var(--nx-font-display);
    letter-spacing: 0.045em;
}

h1 { text-transform: uppercase; }

.eyebrow, .brand-kicker, small, th, [class*="-label"] {
    font-family: var(--nx-font-ui);
}

/* data readouts breathe in mono with aligned digits */
[id*="price"], [id*="-cents"], [id*="countdown"], [id*="probability"],
[id*="score"], [id*="record"], [id*="rate"], [id*="count"],
.chronicle-time-value, .oath-time, .active-contract-prices strong,
.header-btc-meta strong, #btc-price {
    font-family: var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
}

/* =========================================================== SURFACES ==== */
.panel,
.section-block,
.compact-top-grid > *,
.workspace-layout-drawer,
.valhalla-live-chat,
.tutorial-card {
    position: relative;
    background: var(--nx-glass);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    box-shadow:
        inset 0 1px 0 rgba(190, 232, 255, 0.07),
        inset 0 0 34px rgba(8, 26, 48, 0.5),
        0 22px 54px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(9px) saturate(1.15);
    -webkit-backdrop-filter: blur(9px) saturate(1.15);
    isolation: isolate;
    transition: border-color 320ms var(--nx-snap), box-shadow 480ms var(--nx-snap), transform 320ms var(--nx-snap);
}

/* blade edge-light along each panel's crown */
.panel::after,
.section-block::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg,
        transparent 2%,
        rgba(69, 216, 255, 0.0) 8%,
        rgba(69, 216, 255, 0.75) 22%,
        rgba(189, 238, 255, 0.9) 50%,
        rgba(69, 216, 255, 0.75) 78%,
        transparent 96%);
    opacity: 0.5;
    pointer-events: none;
    animation: nx-edge-breathe 7s ease-in-out infinite;
}

@keyframes nx-edge-breathe {
    0%, 100% { opacity: 0.28; }
    50% { opacity: 0.75; }
}

.panel:hover,
.section-block:hover {
    border-color: var(--nx-line-strong);
    box-shadow:
        inset 0 1px 0 rgba(190, 232, 255, 0.1),
        inset 0 0 40px rgba(10, 34, 60, 0.55),
        0 26px 64px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(69, 216, 255, 0.08),
        var(--nx-glow-cyan);
}

/* HUD corner brackets — injected by valhalla-nexus.js as <i class="nx-corners"> */
.nx-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 3;
}

.nx-corners::before,
.nx-corners::after {
    content: "";
    position: absolute;
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid rgba(107, 220, 255, 0.65);
    filter: drop-shadow(0 0 6px rgba(69, 216, 255, 0.55));
    transition: width 260ms var(--nx-blade), height 260ms var(--nx-blade), border-color 260ms;
}

.nx-corners::before {
    top: -2px;
    left: -2px;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 6px;
}

.nx-corners::after {
    right: -2px;
    bottom: -2px;
    border-left: 0;
    border-top: 0;
    border-bottom-right-radius: 6px;
}

:is(.panel, .section-block):hover > .nx-corners::before,
:is(.panel, .section-block):hover > .nx-corners::after {
    width: 1.8rem;
    height: 1.8rem;
    border-color: var(--nx-ice);
}

/* runic seam under major panel headings */
.chronicle-heading,
.oath-heading {
    position: relative;
    padding-bottom: 0.5rem;
}

.chronicle-heading::after,
.oath-heading::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background-image: var(--nx-rune-strip);
    background-repeat: repeat-x;
    background-size: auto 10px;
    opacity: 0.5;
}

:root {
    /* Elder-Futhark micro strip, drawn as strokes (no font dependency) */
    --nx-rune-strip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='10' viewBox='0 0 96 10'><g stroke='%2345d8ff' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='0.85'><path d='M4 1v8M4 2l5 2M4 6l5 2'/><path d='M20 1v8M20 1l5 4-5 4'/><path d='M36 9V1l6 8V1'/><path d='M56 1v8M52 3l8 4M60 3l-8 4'/><path d='M72 1v8l5-4z'/><path d='M88 1l4 4-4 4M92 1l-4 4 4 4'/></g></svg>");
}

/* ============================================================ MASTHEAD === */
.command-masthead,
.top-header {
    position: relative;
    z-index: 6;
    background:
        linear-gradient(180deg, rgba(8, 22, 40, 0.92), rgba(4, 12, 24, 0.88));
    border: 1px solid var(--nx-line);
    border-top: 0;
    border-radius: 0 0 var(--nx-radius) var(--nx-radius);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.command-masthead::before {
    /* storm-light sweep across the crown */
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(69, 216, 255, 0.9) 30%,
        rgba(255, 184, 92, 0.85) 50%,
        rgba(69, 216, 255, 0.9) 70%,
        transparent);
    background-size: 240% 100%;
    animation: nx-crown-sweep 9s linear infinite;
    opacity: 0.85;
}

@keyframes nx-crown-sweep {
    from { background-position: 130% 0; }
    to   { background-position: -130% 0; }
}

.ares-brand h1 {
    font-family: var(--nx-font-display);
    letter-spacing: 0.08em;
    background: linear-gradient(100deg, #f2f8ff 12%, var(--nx-ice) 34%, var(--nx-cyan) 52%, #dce9f5 74%, var(--nx-titanium) 96%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--nx-ice);
    animation: nx-brand-shimmer 11s ease-in-out infinite;
    text-shadow: none;
}

@keyframes nx-brand-shimmer {
    0%, 100% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
}

.brand-kicker {
    color: var(--nx-gold);
    letter-spacing: 0.34em;
    text-shadow: 0 0 12px rgba(238, 194, 114, 0.5);
}

.ares-brand-mark {
    position: relative;
    border-radius: 30%;
    box-shadow: var(--nx-glow-cyan);
}

.ares-brand-mark::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 32%;
    border: 1px solid rgba(69, 216, 255, 0.5);
    border-top-color: rgba(255, 184, 92, 0.8);
    animation: nx-sigil-spin 14s linear infinite;
    pointer-events: none;
}

@keyframes nx-sigil-spin { to { transform: rotate(360deg); } }

/* BTC settlement price — the heartbeat number */
.header-btc-card {
    background: var(--nx-inset);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius-sm);
    box-shadow: inset 0 0 26px rgba(3, 12, 24, 0.7);
}

#btc-price {
    font-family: var(--nx-font-mono);
    color: var(--nx-ice);
    text-shadow: 0 0 16px rgba(69, 216, 255, 0.45);
}

/* 5S radar — actual radar sweep */
.five-second-brti-radar {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius-sm);
    background:
        radial-gradient(120% 150% at 0% 0%, rgba(69, 216, 255, 0.07), transparent 55%),
        var(--nx-inset);
}

.five-second-brti-radar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 44%,
        rgba(69, 216, 255, 0.14) 50%,
        transparent 56%);
    background-size: 260% 100%;
    animation: nx-radar-line 4.5s linear infinite;
    pointer-events: none;
}

@keyframes nx-radar-line {
    from { background-position: 150% 0; }
    to { background-position: -150% 0; }
}

.five-second-brti-radar.is-up { border-color: rgba(71, 225, 170, 0.55); }
.five-second-brti-radar.is-down { border-color: rgba(255, 93, 120, 0.55); }

/* live dot pulses like a heartbeat */
.access-live-dot,
.live-dot,
[class*="live-dot"] {
    box-shadow: 0 0 0 0 rgba(71, 225, 170, 0.7);
    animation: nx-heartbeat 2.2s ease-out infinite;
}

@keyframes nx-heartbeat {
    0% { box-shadow: 0 0 0 0 rgba(71, 225, 170, 0.65); }
    70% { box-shadow: 0 0 0 9px rgba(71, 225, 170, 0); }
    100% { box-shadow: 0 0 0 0 rgba(71, 225, 170, 0); }
}

/* ============================================================= TABBAR ==== */
.command-tabbar {
    position: sticky;
    top: 0.5rem;
    z-index: 40;
    background: linear-gradient(180deg, rgba(10, 26, 46, 0.94), rgba(5, 14, 28, 0.96));
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(190, 232, 255, 0.08);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
}

.command-tabbar-mark {
    font-family: var(--nx-font-display);
    color: var(--nx-void);
    background: linear-gradient(140deg, var(--nx-ice), var(--nx-cyan) 55%, #1c88b8);
    border-radius: 50%;
    box-shadow: var(--nx-glow-cyan);
    text-shadow: none;
}

.command-tabbar-tabs a,
.command-tabbar-tabs button {
    position: relative;
    font-family: var(--nx-font-ui);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--nx-titanium);
    border-radius: 999px;
    transition: color 200ms var(--nx-snap), background 200ms var(--nx-snap), text-shadow 200ms;
}

.command-tabbar-tabs a:hover,
.command-tabbar-tabs button:hover {
    color: var(--nx-ice);
    background: rgba(69, 216, 255, 0.08);
    text-shadow: 0 0 12px rgba(69, 216, 255, 0.6);
}

.command-tabbar-tabs a.is-active,
.command-tabbar-tabs button.is-active,
.command-tabbar-tabs button[aria-selected="true"] {
    color: #04141f;
    background: linear-gradient(135deg, var(--nx-ice) 0%, var(--nx-cyan) 60%, #2fb4e0 100%);
    box-shadow: 0 0 20px rgba(69, 216, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: none;
}

/* ============================================================= CONTROLS == */
button,
.button,
[class*="-toggle"],
select,
input[type="submit"] {
    font-family: var(--nx-font-ui);
}

.workspace-layout-toggle,
.chronicle-compass button,
.oath-overview button,
button[class*="secondary"],
button[class*="chip"] {
    transition: transform 160ms var(--nx-blade), box-shadow 220ms, border-color 220ms, background 220ms;
}

.workspace-layout-toggle:hover { box-shadow: var(--nx-glow-cyan); }

button:active { transform: translateY(1px) scale(0.99); }

input,
select,
textarea {
    accent-color: var(--nx-cyan);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
    background: var(--nx-inset);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius-sm);
    color: var(--text);
    transition: border-color 200ms, box-shadow 200ms;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--nx-line-strong);
    box-shadow: 0 0 0 3px rgba(69, 216, 255, 0.16), var(--nx-glow-cyan);
}

/* ======================================================== DATA LEDGERS === */
.chronicle-entry,
.oath-card {
    position: relative;
    background: linear-gradient(165deg, rgba(12, 30, 52, 0.75), rgba(5, 14, 27, 0.85));
    border: 1px solid var(--nx-line-dim);
    border-left: 3px solid var(--nx-line);
    border-radius: var(--nx-radius-sm);
    transition: transform 220ms var(--nx-snap), border-color 220ms, box-shadow 260ms;
}

.chronicle-entry:hover,
.oath-card:hover {
    transform: translateX(4px);
    border-left-color: var(--nx-cyan);
    box-shadow: -6px 0 24px -6px rgba(69, 216, 255, 0.25), 0 14px 34px rgba(0, 0, 0, 0.4);
}

.chronicle-entry.is-win, .oath-card.is-win { border-left-color: var(--nx-life); }
.chronicle-entry.is-loss, .oath-card.is-loss { border-left-color: var(--nx-blood); }
.chronicle-entry.is-win:hover, .oath-card.is-win:hover { box-shadow: -6px 0 24px -6px rgba(71, 225, 170, 0.3), 0 14px 34px rgba(0,0,0,0.4); }
.chronicle-entry.is-loss:hover, .oath-card.is-loss:hover { box-shadow: -6px 0 24px -6px rgba(255, 93, 120, 0.3), 0 14px 34px rgba(0,0,0,0.4); }

.oath-seal-mark {
    font-family: var(--nx-font-display);
    background: linear-gradient(140deg, var(--nx-gold), #b98a3e);
    color: #140b02;
    border-radius: 50%;
    box-shadow: var(--nx-glow-ember);
}

.oath-result-stamp {
    font-family: var(--nx-font-display);
    letter-spacing: 0.12em;
    border: 1px solid currentColor;
    border-radius: 4px;
    transform: rotate(-1.6deg);
}

/* direction colors are LAW: green up, red down */
.up-text, .is-up .oath-direction, [class*="direction"].is-up { color: var(--nx-life) !important; }
.down-text, .is-down .oath-direction, [class*="direction"].is-down { color: var(--nx-blood) !important; }

/* ===================================================== MARQUEE PANELS ==== */
/* Oath focus — the sealed-direction hero */
.oath-focus-shell {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(130% 170% at 50% -30%, rgba(69, 216, 255, 0.10), transparent 55%),
        var(--nx-glass-raised);
    border: 1px solid var(--nx-line-strong);
    box-shadow:
        inset 0 1px 0 rgba(190, 232, 255, 0.1),
        0 30px 80px rgba(0, 0, 0, 0.55),
        var(--nx-glow-cyan);
}

.oath-focus-shell::before {
    content: "";
    position: absolute;
    inset: -55% -25%;
    background: conic-gradient(from 180deg,
        transparent 0deg,
        rgba(69, 216, 255, 0.07) 40deg,
        transparent 80deg,
        transparent 180deg,
        rgba(255, 184, 92, 0.06) 230deg,
        transparent 280deg);
    animation: nx-sigil-spin 32s linear infinite;
    pointer-events: none;
}

/* settlement proof + prospective entry pulse with living borders */
.settlement-proof-panel,
.prospective-entry-panel,
.watchtower-banner {
    position: relative;
    background-blend-mode: screen;
    border-radius: var(--nx-radius);
    overflow: hidden;
}

.settlement-proof-panel::after,
.prospective-entry-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg,
        transparent 20%,
        rgba(69, 216, 255, 0.65) 42%,
        rgba(189, 238, 255, 0.9) 50%,
        rgba(69, 216, 255, 0.65) 58%,
        transparent 80%);
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: nx-border-flow 6s linear infinite;
    pointer-events: none;
    opacity: 0.7;
}

@keyframes nx-border-flow {
    from { background-position: 200% 0; }
    to { background-position: -100% 0; }
}

/* cycle pulse — session countdown strip */
.cycle-pulse {
    background: var(--nx-glass);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    box-shadow: inset 0 0 30px rgba(6, 20, 38, 0.6);
}

/* watchtower states keep their voice, now with storm glow */
.watchtower-banner.is-calm { box-shadow: inset 0 0 34px rgba(8, 26, 48, 0.5); }
.watchtower-banner.is-alert {
    animation: nx-alert-throb 1.6s ease-in-out infinite;
}

@keyframes nx-alert-throb {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 93, 120, 0.0), inset 0 0 34px rgba(60, 10, 20, 0.5); }
    50% { box-shadow: 0 0 34px 2px rgba(255, 93, 120, 0.28), inset 0 0 34px rgba(60, 10, 20, 0.6); }
}

/* probability meters shimmer */
#probability-fill,
[class*="probability-fill"],
[class*="meter-fill"],
[class*="progress-fill"] {
    background-image: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 100%),
        linear-gradient(90deg, var(--nx-cyan), var(--nx-ice));
    background-size: 200% 100%, 100% 100%;
    animation: nx-meter-sheen 2.8s linear infinite;
}

@keyframes nx-meter-sheen {
    from { background-position: -100% 0, 0 0; }
    to { background-position: 200% 0, 0 0; }
}

/* ======================================================== FLOW FORGE ===== */
.flow-forge,
.coinbase-candle-panel {
    background:
        radial-gradient(100% 120% at 50% -20%, rgba(69, 216, 255, 0.06), transparent 50%),
        linear-gradient(175deg, rgba(9, 24, 43, 0.92), rgba(3, 10, 20, 0.95));
    border: 1px solid var(--nx-line-strong);
}

.flow-forge canvas { border-radius: var(--nx-radius-sm); }

/* ============================================================== CHAT ===== */
.valhalla-live-chat {
    border-radius: var(--nx-radius) var(--nx-radius) 0 0;
    border-bottom: 0;
}

.live-chat-header { border-bottom: 1px solid var(--nx-line); }

/* ============================================================ FOOTER ===== */
footer {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-family: var(--nx-font-ui);
}

/* ================================================== SCROLL REVEAL ======== */
.nx-reveal {
    opacity: 0;
    transform: translateY(14px);
}

.nx-reveal.nx-in {
    opacity: 1;
    transform: none;
    transition: opacity 640ms var(--nx-snap), transform 640ms var(--nx-snap);
}

@media (prefers-reduced-motion: reduce) {
    .nx-reveal { opacity: 1; transform: none; }
}

/* ======================================================== RESPONSIVE ===== */
/* -- big command walls: let the deck breathe and densify ------------------ */
@media (min-width: 1800px) {
    .valhalla-dashboard-page .dashboard-container {
        width: min(2100px, calc(100% - 4rem));
    }

    .valhalla-dashboard-page .command-masthead {
        width: min(2100px, calc(100% - 4rem));
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 2500px) {
    .valhalla-dashboard-page .dashboard-container,
    .valhalla-dashboard-page .command-masthead {
        width: min(2560px, calc(100% - 6rem));
    }
}

/* -- tablets -------------------------------------------------------------- */
@media (max-width: 1100px) {
    .command-tabbar { top: 0.4rem; border-radius: 1.2rem; }
}

/* -- phones: bottom command dock ------------------------------------------ */
@media (max-width: 820px) {
    body .command-tabbar,
    .valhalla-dashboard-page .command-tabbar {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        z-index: 60;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.4rem;
        margin: 0 !important;
        padding: 0.45rem max(0.6rem, env(safe-area-inset-right)) calc(0.45rem + env(safe-area-inset-bottom)) max(0.6rem, env(safe-area-inset-left));
        border-radius: 1.1rem 1.1rem 0 0;
        border-bottom: 0;
        background: linear-gradient(180deg, rgba(8, 22, 40, 0.97), rgba(3, 9, 18, 0.99));
        box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.6);
    }

    body .command-tabbar-tabs,
    .valhalla-dashboard-page .command-tabbar-tabs {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        gap: 0.25rem;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 0.9rem, #000 calc(100% - 0.9rem), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 0.9rem, #000 calc(100% - 0.9rem), transparent 100%);
    }

    .command-tabbar-tabs::-webkit-scrollbar { display: none; }

    body .command-tabbar-tabs a,
    body .command-tabbar-tabs button,
    .valhalla-dashboard-page .command-tabbar-tabs a,
    .valhalla-dashboard-page .command-tabbar-tabs button {
        flex: 0 0 auto;
        scroll-snap-align: center;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 0.85rem;
        white-space: nowrap;
    }

    /* keep content clear of the dock */
    body .dashboard-container,
    .valhalla-dashboard-page .dashboard-container {
        padding-bottom: calc(5.2rem + env(safe-area-inset-bottom));
    }

    body { padding-bottom: env(safe-area-inset-bottom); }

    /* ledgers + footer sit above the dock too */
    body > footer,
    #cycle-chronicle,
    #oath-ledger { margin-bottom: 1rem; }

    body > footer { padding-bottom: calc(4.8rem + env(safe-area-inset-bottom)); }

    /* chat + tutorial float above the dock */
    body .valhalla-live-chat,
    .valhalla-live-chat { bottom: calc(4.6rem + env(safe-area-inset-bottom)) !important; }

    /* trim heavy effects for small GPUs */
    .panel, .section-block { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
    .dashboard-aurora { filter: blur(44px); opacity: 0.4; }
    .nexus-horizon { display: none; }
}

/* touch ergonomics everywhere */
@media (pointer: coarse) {
    button, .command-tabbar-tabs a, select, input[type="submit"], [role="tab"] {
        min-height: 44px;
    }
}

/* ======================================================= LIGHT THEME ===== */
/* The command deck is a night surface; light mode stays functional and calm. */
html[data-theme="light"] .nexus-atmosphere::before {
    background:
        radial-gradient(60% 40% at 15% -5%, rgba(0, 127, 156, 0.10), transparent 60%),
        radial-gradient(50% 40% at 85% -5%, rgba(118, 81, 168, 0.08), transparent 60%),
        linear-gradient(180deg, #eaf3f7 0%, #edf5f8 100%);
}

html[data-theme="light"] #nexus-sky,
html[data-theme="light"] .nexus-horizon,
html[data-theme="light"] .dashboard-gate-lines { display: none; }

html[data-theme="light"] .dashboard-aurora { opacity: 0.18; }

html[data-theme="light"] .panel,
html[data-theme="light"] .section-block,
html[data-theme="light"] .compact-top-grid > *,
html[data-theme="light"] .valhalla-live-chat {
    background: rgba(252, 254, 255, 0.9);
    border-color: rgba(36, 102, 133, 0.26);
    box-shadow: 0 16px 40px rgba(38, 76, 96, 0.12);
}

html[data-theme="light"] .command-masthead,
html[data-theme="light"] .top-header,
html[data-theme="light"] .command-tabbar {
    background: rgba(250, 253, 255, 0.92);
    border-color: rgba(36, 102, 133, 0.26);
    box-shadow: 0 12px 34px rgba(38, 76, 96, 0.14);
}

html[data-theme="light"] .ares-brand h1 {
    background: linear-gradient(100deg, #0d3d55, #007f9c 50%, #24506b);
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-theme="light"] .nx-corners::before,
html[data-theme="light"] .nx-corners::after {
    border-color: rgba(0, 127, 156, 0.5);
    filter: none;
}

/* ==================================================== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .nexus-atmosphere *,
    .dashboard-aurora,
    .dashboard-gate-lines span,
    .command-masthead::before,
    .ares-brand h1,
    .ares-brand-mark::after,
    .five-second-brti-radar::before,
    .panel::after,
    .section-block::after,
    .settlement-proof-panel::after,
    .prospective-entry-panel::after,
    .oath-focus-shell::before,
    #probability-fill,
    [class*="meter-fill"],
    .access-live-dot,
    .watchtower-banner.is-alert {
        animation: none !important;
    }

    .nexus-horizon { animation: none !important; }
    .panel, .section-block, .chronicle-entry, .oath-card { transition: none; }
}

/* ================================================== ACCESS / LOGIN ======= */
/* login.html · account.html · terms · payment · discord-required use the
   access family. Give them the full gate-of-Valhalla treatment. */
body.access-page,
body.valhalla-access-page,
body[class*="access"] {
    background: var(--nx-void);
}

.access-shell,
.login-panel,
#login-panel,
.access-card,
#member-access-card,
.purchase-panel,
#register-panel,
#recovery-panel,
#member-mfa-panel {
    position: relative;
    background: var(--nx-glass-raised);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    box-shadow:
        inset 0 1px 0 rgba(190, 232, 255, 0.08),
        0 30px 90px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* ===================================================== MONITOR PAGES ===== */
/* option_e_monitor · heimdall_monitor — small owner surfaces */
body.option-e-monitor-page main,
body.heimdall-monitor-page main {
    position: relative;
    z-index: 2;
}

/* ===================================================== UTILITY =========== */
.nx-hidden { display: none !important; }

/* Chart canvases must never stretch past their frame on zoom */
canvas { max-width: 100%; }

/* Wide tables scroll inside their panel, the page never scrolls sideways */
.panel table,
.section-block table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

/* ============================================== ACCESS GATE (login) ====== */
.valhalla-access-page {
    background:
        radial-gradient(90% 60% at 50% -10%, rgba(56, 130, 220, 0.14), transparent 60%),
        var(--nx-void);
}

.valhalla-access-page .access-shell {
    position: relative;
    background: linear-gradient(172deg, rgba(11, 27, 48, 0.72), rgba(4, 11, 22, 0.86));
    border: 1px solid var(--nx-line);
    border-radius: calc(var(--nx-radius) + 6px);
    box-shadow:
        inset 0 1px 0 rgba(190, 232, 255, 0.08),
        0 40px 110px rgba(0, 0, 0, 0.62),
        0 0 70px rgba(69, 216, 255, 0.06);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    overflow: hidden;
}

.valhalla-access-page .access-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(69, 216, 255, 0.85) 35%, rgba(255, 184, 92, 0.8) 50%, rgba(69, 216, 255, 0.85) 65%, transparent);
    background-size: 220% 100%;
    animation: nx-crown-sweep 8s linear infinite;
}

/* rune-ring halo behind the gate sigil */
.valhalla-access-page .hero-brand-logo {
    position: relative;
    filter: drop-shadow(0 10px 34px rgba(69, 216, 255, 0.35));
    animation: nx-gate-float 7s ease-in-out infinite;
}

@keyframes nx-gate-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.valhalla-access-page .access-tab {
    font-family: var(--nx-font-ui);
    letter-spacing: 0.16em;
    transition: color 200ms, background 200ms, box-shadow 200ms;
}

.valhalla-access-page .access-tab[aria-selected="true"],
.valhalla-access-page .access-tab.is-active {
    color: #04141f;
    background: linear-gradient(135deg, var(--nx-ice), var(--nx-cyan) 65%);
    box-shadow: 0 0 18px rgba(69, 216, 255, 0.4);
}

/* forge-fired primary action */
.valhalla-access-page .primary-action,
.access-form button[type="submit"] {
    position: relative;
    overflow: hidden;
    font-family: var(--nx-font-ui);
    font-weight: 700;
    letter-spacing: 0.14em;
    border: 1px solid rgba(69, 216, 255, 0.5);
    transition: transform 160ms var(--nx-blade), box-shadow 240ms, filter 240ms;
}

.valhalla-access-page .primary-action::after,
.access-form button[type="submit"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    background-size: 260% 100%;
    background-position: 140% 0;
    transition: background-position 700ms var(--nx-snap);
    pointer-events: none;
}

.valhalla-access-page .primary-action:hover,
.access-form button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(69, 216, 255, 0.3);
}

.valhalla-access-page .primary-action:hover::after,
.access-form button[type="submit"]:hover::after {
    background-position: -140% 0;
}

.valhalla-access-page .gate-lines span {
    background: linear-gradient(180deg, transparent, rgba(69, 216, 255, 0.2) 35%, transparent);
}

/* ====================================== MASTHEAD BALANCE (wide walls) ==== */
@media (min-width: 1800px) {
    .valhalla-dashboard-page .command-masthead {
        align-items: center;
    }

    .ares-brand h1 { font-size: 1.9rem; }
}

/* =============================================== MOBILE DOCK POLISH ====== */
@media (max-width: 820px) {
    /* slim the dock identity: keep the switcher, drop the caption */
    .command-tabbar-identity .product-switcher-label > strong { display: none; }

    .command-tabbar-identity { gap: 0.3rem; }

    .command-tabbar-state { gap: 0.35rem; }

    /* floating controls ride above the dock */
    [data-theme-toggle],
    .theme-toggle,
    .live-chat-toggle,
    [id*="chat-toggle"] {
        bottom: calc(5.4rem + env(safe-area-inset-bottom)) !important;
    }
}

/* ============================================ KEEPER / OWNER ACCENT ====== */
/* Keeper + admin surfaces keep the NEXUS body but wear a gold command trim,
   so owner space reads apart from member space at a glance. */
body.admin-page .panel::after,
body.ragnarok-admin-page .panel::after,
body.ragnarok-keeper-page .panel::after,
body.ragnarok-keeper-page .access-shell::before {
    background: linear-gradient(90deg, transparent 4%, rgba(238, 194, 114, 0.8) 50%, transparent 96%);
}

/* ================================================== TERMS / LEGAL ======== */
body.terms-page main,
body.legal-page main {
    max-width: 74rem;
    margin-inline: auto;
}

/* -------- access gate: give the shell air and put a sigil ring behind it -- */
.valhalla-access-page main.access-shell {
    margin-top: 1.4rem;
    margin-bottom: 2.2rem;
}

.valhalla-access-page .hero-column {
    position: relative;
    isolation: isolate;
}

.valhalla-access-page .hero-column::before {
    /* rotating sigil ring behind the crest — drawn, not approximated */
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 50%;
    width: 22rem;
    height: 22rem;
    margin-left: -11rem;
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%2345d8ff' stroke-opacity='0.5'><circle cx='100' cy='100' r='88' stroke-width='0.7' stroke-dasharray='2 7'/><circle cx='100' cy='100' r='79' stroke-width='0.5' stroke-opacity='0.28'/><g stroke-width='1.4' stroke-linecap='round'><path d='M100 6v9M100 7l5 3M100 11l5 3'/><path d='M167 33l-6 6M167 33l1 6M167 33l-6-1'/><path d='M194 100h-9M190 96l-5 4 5 4'/><path d='M167 167l-6-6M161 167h6v-6'/><path d='M100 194v-9M95 190l5-4 5 4'/><path d='M33 167l6-6M33 161v6h6'/><path d='M6 100h9M10 96l5 4-5 4'/><path d='M33 33l6 6M39 33h-6v6'/></g></g></svg>");
    background-size: 100% 100%;
    opacity: 0.8;
    animation: nx-ring-spin 60s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes nx-ring-spin { to { transform: rotate(360deg); } }

.valhalla-access-page .hero-column::after {
    content: "";
    position: absolute;
    top: -2rem;
    left: 50%;
    width: 30rem;
    height: 20rem;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 42%, rgba(48, 140, 220, 0.2), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
    z-index: -2;
}

@media (max-width: 640px) {
    .valhalla-access-page .hero-column::before { width: 15rem; height: 15rem; }
    .valhalla-access-page .hero-column::after { width: 20rem; height: 15rem; }
}