/* ═══════════════════════════════════════════════════════════════════════════
   THEME 2026 v2 — "OBSIDIAN GLASS TERMINAL"
   (2026-08-28, operator: "more advanced and trendy, super visual effects,
    2026 latest standards"). Additive design layer:
     · loads AFTER the inline <style> blocks — token overrides re-skin every
       var() consumer, targeted rules add surface/motion polish
     · JS contracts (ids, classes, app.js) UNTOUCHED; theme2026.js only adds
       --t26-mx/--t26-my pointer vars and .t26-scrolled on the topbar
     · remove the theme2026 <link>/<script> lines in index.html to roll back
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --bg: #04060c;
  --bg-tint: #0a0f1c;
  --paper: #0b0f1a;
  --line: #1c2334;
  --line-soft: #141a29;
  --ink: #ecf1fb;
  --ink-soft: #bcc6da;
  --muted: #77829b;

  --accent: #8b7cff;                 /* electric indigo — the identity */
  --accent-bright: #ab9fff;
  --accent-dim: #5b4fd4;
  --accent-glow: rgba(139, 124, 255, 0.22);
  --cyan: #22d3ee;
  --violet: #c084fc;                 /* v2: third stop widens every gradient */

  --brand-red: #8b7cff;              /* legacy token aliases (v1 contract) */
  --brand-red-dark: #5b4fd4;
  --brand-red-bright: #ab9fff;
  --brand-red-glow: rgba(139, 124, 255, 0.22);

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --success-glow: rgba(52, 211, 153, 0.35);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --danger: #fb7185;
  --danger-bg: rgba(251, 113, 133, 0.12);
  --danger-glow: rgba(251, 113, 133, 0.35);

  --grad-brand: linear-gradient(100deg, var(--accent-bright), var(--violet) 45%, var(--cyan));
  --grad-btn: linear-gradient(135deg, var(--accent-dim), var(--accent) 55%, #7c5cff);

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  --shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 28px 60px -14px rgba(91, 79, 212, 0.32), 0 10px 22px -8px rgba(0, 0, 0, 0.65);
  --radius: 18px;
  --radius-sm: 12px;

  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.55s;
}

/* ── 2 · LIVING GROUND: drifting aurora + whisper-grid + film grain ─────── */
html { scroll-behavior: smooth; }
body { background: var(--bg); position: relative; }

/* aurora blobs — pure-transform loops, GPU-cheap, behind everything */
body::before {
  content: "";
  position: fixed; inset: -20% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 30% at 78% 12%, rgba(139, 124, 255, 0.16), transparent 70%),
    radial-gradient(30% 26% at 12% 22%, rgba(34, 211, 238, 0.10), transparent 70%),
    radial-gradient(46% 38% at 55% 95%, rgba(192, 132, 252, 0.10), transparent 72%);
  filter: blur(70px) saturate(120%);
  animation: t26-aurora 38s var(--ease-out) infinite alternate;
  will-change: transform;
}
@keyframes t26-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2.5%, 0) scale(1.07) rotate(1.5deg); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.03) rotate(-1deg); }
}

/* grid + grain, one fixed overlay */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(139, 124, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 124, 255, 0.028) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 44px 44px, 44px 44px, 160px 160px;
  mask-image: radial-gradient(ellipse 95% 75% at 50% 0%, #000 25%, transparent 78%);
}
.container, .topbar, .modal, .toast { position: relative; z-index: 1; }

/* ── 3 · SCROLL PROGRESS ────────────────────────────────────────────────── */
#t26-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--grad-brand);
  z-index: 9999; box-shadow: 0 0 14px var(--accent-glow), 0 0 4px var(--accent);
  transition: width 0.08s linear;
  border-radius: 0 3px 3px 0;
}

/* ── 4 · TOPBAR: glass dock with edge-light ─────────────────────────────── */
.topbar {
  background: rgba(6, 9, 16, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(139, 124, 255, 0.14);
  transition: box-shadow 0.35s ease, background 0.35s ease;
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(139, 124, 255, 0.55),
              rgba(34, 211, 238, 0.45), transparent 95%);
  opacity: 0.6; pointer-events: none;
}
.topbar.t26-scrolled {
  background: rgba(5, 8, 14, 0.88);
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.8);
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 800; letter-spacing: 0.02em;
  background: var(--grad-brand);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: t26-brandhue 9s linear infinite;
}
@keyframes t26-brandhue {
  0% { background-position: 0% 0; } 50% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
.brand-icon {
  position: relative; border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(139, 124, 255, 0.35), 0 0 22px -4px var(--accent-glow);
  animation: t26-iconpulse 4.5s ease-in-out infinite;
}
@keyframes t26-iconpulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(139,124,255,0.35), 0 0 18px -6px var(--accent-glow); }
  50%      { box-shadow: 0 0 0 1px rgba(139,124,255,0.6),  0 0 30px -4px var(--accent-glow); }
}
.brand-tag { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.12em; }

/* ── 5 · CARDS: gradient-border glass + pointer spotlight ───────────────── */
.card, details.card, .metric-card, .rail-bar {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(139, 124, 255, 0.05), rgba(11, 15, 26, 0) 36%) padding-box,
    linear-gradient(rgba(11, 15, 26, 0.86), rgba(11, 15, 26, 0.86)) padding-box,
    linear-gradient(145deg, rgba(139, 124, 255, 0.38), rgba(34, 211, 238, 0.10) 42%,
                    rgba(139, 124, 255, 0.05) 70%, rgba(192, 132, 252, 0.22)) border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--dur) var(--ease-out),
              box-shadow 0.35s ease, filter 0.35s ease;
}
/* pointer-tracked spotlight (vars set by theme2026.js; harmless without JS) */
.metric-card::before, .card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--t26-mx, 50%) var(--t26-my, -40%),
              rgba(139, 124, 255, 0.10), transparent 65%);
  opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
.metric-card:hover::before, .card:hover::before { opacity: 1; }
.metric-card { overflow: hidden; }
.metric-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--cyan), transparent);
  background-size: 220% 100%;
  opacity: 0; transition: opacity 0.35s ease;
  animation: t26-hairline 3.2s linear infinite paused;
}
.metric-card:hover::after { opacity: 1; animation-play-state: running; }
.metric-card:hover, .card:hover, details.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -12px rgba(91, 79, 212, 0.38), var(--shadow-sm);
}
@keyframes t26-hairline { from { background-position: 0% 0; } to { background-position: 220% 0; } }

/* uppercase micro-labels — the console voice */
.metric-label, .navgroup, .card-header .po-note, .rail-sub {
  text-transform: uppercase; letter-spacing: 0.14em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--muted);
}
.metric-value, .mono { font-variant-numeric: tabular-nums; }
.metric-value {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.015em;
}

/* ── 6 · P&L SEMANTICS: neon signal glow ────────────────────────────────── */
.pos, .pnl-pos, .up { color: var(--success) !important; }
.neg, .pnl-neg, .down { color: var(--danger) !important; }
.metric-value.pos, .metric-value.pnl-pos, .metric-value.up,
td.pos, .pnl-pos { text-shadow: 0 0 16px var(--success-glow); }
.metric-value.neg, .metric-value.pnl-neg, .metric-value.down,
td.neg, .pnl-neg { text-shadow: 0 0 16px var(--danger-glow); }

/* ── 7 · SIDEBAR / TABNAV: pills with slow-panning gradient when active ─── */
.tabnav-btn {
  position: relative; border-radius: 12px;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease,
              transform 0.25s var(--ease-out);
}
.tabnav-btn:hover { transform: translateX(3px); border-color: rgba(139, 124, 255, 0.5); }
.tabnav-btn.active {
  background: var(--grad-btn);
  background-size: 180% 180%;
  animation: t26-navpan 6s ease-in-out infinite;
  border-color: transparent;
  box-shadow: 0 8px 22px -6px rgba(139, 124, 255, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
@keyframes t26-navpan {
  0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; }
}
.tabnav-btn .nav-ic { transition: transform 0.3s var(--ease-spring); display: inline-block; }
.tabnav-btn:hover .nav-ic { transform: scale(1.22) rotate(-5deg); }

/* ── 8 · BUTTONS: gradient primaries, sheen sweep, springy press ────────── */
.btn, .po-btn, .icon-btn, button.tabnav-btn {
  transition: transform 0.18s var(--ease-spring), box-shadow 0.25s ease,
              background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn:active, .po-btn:active, .tabnav-btn:active { transform: scale(0.95); }
.po-btn { position: relative; overflow: hidden; border-radius: var(--radius-sm); }
.po-btn:not(.ghost) {
  background: var(--grad-btn);
  border-color: transparent;
  box-shadow: 0 6px 20px -8px rgba(139, 124, 255, 0.55);
}
.po-btn:not(.ghost):hover { box-shadow: 0 10px 28px -8px rgba(139, 124, 255, 0.75); }
.po-btn:not(.ghost)::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-18deg); transition: left 0.55s var(--ease-out);
}
.po-btn:not(.ghost):hover::before { left: 130%; }

/* ── 9 · TABLES: glass sticky headers, accent-edge row hover ────────────── */
table.chain tr { transition: background 0.18s ease, box-shadow 0.18s ease; }
table.chain tr:hover td {
  background: rgba(139, 124, 255, 0.07);
}
table.chain tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
table.chain th {
  position: relative;
  background: rgba(9, 12, 20, 0.9);
  backdrop-filter: blur(8px);
  letter-spacing: 0.09em; text-transform: uppercase; font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
}
table.chain thead::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, rgba(139, 124, 255, 0.5), transparent);
}
table.chain tbody tr:nth-child(2n) td { background: rgba(139, 124, 255, 0.018); }

/* ── 10 · LIVE PULSE + status dots ──────────────────────────────────────── */
.rail-pill { position: relative; animation: t26-pulse 2.6s ease-in-out infinite; }
@keyframes t26-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 124, 255, 0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(139, 124, 255, 0); }
}

/* ── 11 · SCROLL-REVEAL + PANE ENTRANCES (armed by theme2026.js) ────────── */
.t26-r {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--t26-d, 0ms);
  will-change: opacity, transform;
}
.t26-in { opacity: 1; transform: none; }
.t26-pane-in { animation: t26-pane 0.5s var(--ease-out) both; }
@keyframes t26-pane {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.t26-tick { animation: t26-tick 0.6s var(--ease-out); }
@keyframes t26-tick {
  0%   { color: var(--accent-bright); text-shadow: 0 0 16px var(--accent-glow); }
  100% { color: inherit; }
}

/* ── 12 · MODALS + TOAST ────────────────────────────────────────────────── */
.modal { animation: t26-modal 0.4s var(--ease-spring); }
@keyframes t26-modal {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.toast:not(.hidden) { animation: t26-toast 0.45s var(--ease-spring); }
@keyframes t26-toast {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ── 13 · LOGIN: the showcase moment ────────────────────────────────────── */
.auth-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.01em;
  background: var(--grad-brand); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: t26-brandhue 9s linear infinite;
}
#login-form input {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
#login-form input:focus {
  border-color: rgba(139, 124, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(139, 124, 255, 0.18), 0 0 24px -6px var(--accent-glow);
  outline: none;
}
.auth-submit {
  background: var(--grad-btn); background-size: 180% 180%;
  border: none; border-radius: var(--radius-sm);
  box-shadow: 0 10px 26px -8px rgba(139, 124, 255, 0.6);
  transition: transform 0.18s var(--ease-spring), box-shadow 0.25s ease,
              background-position 0.6s ease;
}
.auth-submit:hover { background-position: 100% 50%;
  box-shadow: 0 14px 34px -8px rgba(139, 124, 255, 0.8); }
.auth-submit:active { transform: scale(0.96); }

/* ── 14 · DETAILS/SUMMARY chevrons + focus rings ────────────────────────── */
details.card > summary { transition: color 0.25s ease; }
details.card[open] > summary { color: var(--accent-bright); }
:focus-visible {
  outline: 2px solid rgba(139, 124, 255, 0.7);
  outline-offset: 2px; border-radius: 4px;
}

/* ── 15 · SCROLLBAR + SELECTION ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-dim), rgba(139, 124, 255, 0.22));
  border-radius: 8px; border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent), rgba(139, 124, 255, 0.45));
}
::selection { background: rgba(139, 124, 255, 0.35); }

/* ── 16 · REDUCED MOTION: everything instant, aurora frozen ─────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .t26-r { opacity: 1; transform: none; }
}