/* POLARIS — North Star observatory. Deep-space console, dependency-free. */
:root {
  --bg0: #05070f;
  --bg1: #0a0f1e;
  --panel: rgba(18, 26, 46, 0.55);
  --panel-edge: rgba(120, 160, 220, 0.14);
  --ink: #e8f0ff;
  --ink-dim: #8ea3c8;
  --ink-faint: #4d5e80;
  --star: #cfe8ff;
  --persistent: #5eead4;   /* teal — a real, calm trend */
  --fragile: #fbbf24;      /* amber — leverage-driven, caution */
  --onside: #34d399;
  --threat: #fb7185;
  --up: #4ade80;
  --down: #fb7185;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

/* Global scale — one knob to size the whole interface. Bump this up/down to taste. */
html { zoom: 1.2; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: radial-gradient(1200px 800px at 70% -10%, #11203c 0%, var(--bg1) 45%, var(--bg0) 100%);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* layered starfield */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(207,232,255,.9), transparent),
    radial-gradient(1px 1px at 75% 20%, rgba(207,232,255,.7), transparent),
    radial-gradient(1px 1px at 50% 65%, rgba(207,232,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 75%, rgba(207,232,255,.8), transparent),
    radial-gradient(1px 1px at 12% 80%, rgba(207,232,255,.5), transparent),
    radial-gradient(1px 1px at 35% 12%, rgba(207,232,255,.55), transparent);
  opacity: .5;
}

#app { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 22px 24px 64px; }

/* ── ribbon ───────────────────────────────────────────────────────────── */
.ribbon {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 20px; margin-bottom: 26px;
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 16px; backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 600; letter-spacing: .18em; }
.brand .star {
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--star) 40%, transparent 72%);
  box-shadow: 0 0 14px 3px rgba(159,233,255,.8); animation: twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.brand b { font-size: 15px; }
.ribbon .spacer { flex: 1; }
.stat { display: flex; flex-direction: column; line-height: 1.25; }
.stat .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.stat .v { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.stat .v.warn { color: var(--fragile); }
.logout {
  font: inherit; font-size: 12px; color: var(--ink-dim); cursor: pointer;
  background: transparent; border: 1px solid var(--panel-edge); border-radius: 9px; padding: 7px 12px;
}
.logout:hover { color: var(--ink); border-color: rgba(120,160,220,.4); }

/* ── section headers ──────────────────────────────────────────────────── */
.sec-h { display: flex; align-items: baseline; gap: 12px; margin: 6px 2px 14px; }
.sec-h h2 { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.sec-h .legend { display: flex; gap: 14px; font-size: 11px; color: var(--ink-faint); margin-left: auto; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.legend .l-persistent i { background: var(--persistent); box-shadow: 0 0 7px var(--persistent); }
.legend .l-fragile i { background: var(--fragile); box-shadow: 0 0 7px var(--fragile); }
.legend .l-quiet i { background: var(--ink-faint); }

/* ── positions (the bright foreground) ───────────────────────────────── */
.positions { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 34px; }
.pos {
  position: relative; padding: 16px 18px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--panel-edge); overflow: hidden;
}
.pos::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.pos.onside::before { background: var(--onside); box-shadow: 0 0 16px var(--onside); }
.pos.threat::before { background: var(--threat); box-shadow: 0 0 18px var(--threat); }
.pos .top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.pos .sym { font-weight: 700; font-size: 16px; }
.pos .side { font-size: 10px; letter-spacing: .12em; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; }
.pos .side.short { background: rgba(251,113,133,.16); color: #fda4b4; }
.pos .side.long { background: rgba(74,222,128,.16); color: #86efac; }
.pos .pnl { margin-left: auto; font-family: var(--mono); font-size: 17px; font-weight: 600; }
.pnl.up { color: var(--up); } .pnl.down { color: var(--down); }
.pos .px { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.pos .badge { margin-top: 11px; font-size: 12px; }
.pos.onside .badge { color: var(--onside); }
.pos.threat .badge { color: var(--threat); }
.pos .threats { margin-top: 6px; font-size: 12px; color: #fecdd3; line-height: 1.5; }
.positions .empty { color: var(--ink-faint); font-size: 13px; padding: 8px 2px; grid-column: 1/-1; }

/* ── the field ────────────────────────────────────────────────────────── */
.field { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; }
.tile {
  position: relative; aspect-ratio: 1 / 0.82; border-radius: 13px; cursor: pointer;
  background: rgba(20, 28, 48, 0.4); border: 1px solid rgba(80, 110, 160, .12);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: transform .15s ease, box-shadow .3s ease, border-color .3s ease;
}
.tile:hover { transform: translateY(-2px); border-color: rgba(120,160,220,.4); }
.tile .tsym { font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.tile .dir { font-family: var(--mono); font-size: 12px; margin-top: 3px; color: var(--ink-dim); }
.tile .sig { font-family: var(--mono); font-size: 11px; margin-top: 5px; color: var(--ink-faint); }
/* regimes: setups glow, quiet recede */
.tile.persistent {
  border-color: rgba(94,234,212,.5);
  background: rgba(45,212,191,.10);
  box-shadow: 0 0 calc(8px + var(--glow,0) * 26px) rgba(94,234,212, calc(.25 + var(--glow,0)*.5));
}
.tile.persistent .tsym, .tile.persistent .tile .tsym { color: #ccfbf1; }
.tile.persistent .sig { color: var(--persistent); }
.tile.fragile {
  border-color: rgba(251,191,36,.5);
  background: rgba(251,191,36,.09);
  box-shadow: 0 0 calc(8px + var(--glow,0) * 24px) rgba(251,191,36, calc(.22 + var(--glow,0)*.45));
}
.tile.fragile .sig { color: var(--fragile); }
.tile.no_setup { opacity: .82; }
.tile.unknown { opacity: .4; border-style: dashed; }
.tile .up { color: var(--up); } .tile .down { color: var(--down); }

/* ── detail drawer ────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 10; background: rgba(3,6,14,.66); backdrop-filter: blur(3px); display: none; }
.scrim.open { display: block; }
.drawer {
  position: fixed; z-index: 11; top: 0; right: 0; height: 100%; width: min(440px, 92vw);
  background: linear-gradient(160deg, #0c1424, #070b16); border-left: 1px solid var(--panel-edge);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); padding: 26px 26px 40px; overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer .x { position: absolute; top: 18px; right: 20px; cursor: pointer; color: var(--ink-dim); font-size: 20px; }
.drawer h3 { font-size: 22px; letter-spacing: .02em; }
.drawer .regime-tag { display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 7px; }
.regime-tag.persistent { background: rgba(45,212,191,.16); color: var(--persistent); }
.regime-tag.fragile { background: rgba(251,191,36,.16); color: var(--fragile); }
.regime-tag.no_setup { background: rgba(77,94,128,.2); color: var(--ink-dim); }
.regime-tag.unknown { background: rgba(77,94,128,.16); color: var(--ink-faint); }
.drawer .reasons { margin-top: 14px; font-size: 13px; color: var(--ink-dim); line-height: 1.6; }
.metrics { margin-top: 22px; }
.metric { margin-bottom: 18px; }
.metric .ml { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.metric .ml .name { color: var(--ink-dim); letter-spacing: .04em; }
.metric .ml .val { font-family: var(--mono); color: var(--ink); }
.spark { width: 100%; height: 38px; display: block; }
.spark path { fill: none; stroke: var(--star); stroke-width: 1.5; opacity: .85; }
.spark .base { stroke: rgba(120,150,200,.18); stroke-width: 1; }

/* ── track record ─────────────────────────────────────────────────────── */
.tr-note { font-size: 12.5px; color: var(--ink-dim); line-height: 1.65; margin: 2px 2px 18px; max-width: 880px; }
.tr-note b { color: var(--ink); }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.tr-block { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px; padding: 16px 18px; }
.tr-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 12px; }
.tr-tab { width: 100%; border-collapse: collapse; }
.tr-tab th { font-size: 11px; color: var(--ink-faint); font-weight: 600; text-align: left; padding: 6px 8px; letter-spacing: .03em; }
.tr-tab td { padding: 8px; border-top: 1px solid rgba(120,160,220,.08); }
.tr-tab .rate { font-family: var(--mono); font-size: 17px; color: var(--ink); }
.tr-tab .sub { display: block; font-size: 10px; color: var(--ink-faint); margin-top: 2px; }
.tr-block:nth-child(2) { opacity: .72; }   /* exploratory recedes */

.sp { margin-top: 20px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px; padding: 16px 18px; }
.sp-row { display: flex; align-items: center; gap: 12px; margin: 7px 0; }
.sp-lab { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); width: 78px; text-align: right; }
.sp-track { position: relative; flex: 1; height: 14px; background: rgba(120,160,220,.06); border-radius: 4px; }
.sp-track::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(120,160,220,.25); }
.sp-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.sp-bar.pos { background: linear-gradient(90deg, rgba(94,234,212,.35), var(--persistent)); }
.sp-bar.neg { background: linear-gradient(270deg, rgba(251,113,133,.35), var(--threat)); }
.sp-val { font-family: var(--mono); font-size: 12px; color: var(--ink); width: 96px; }
.sp-val .sp-n { color: var(--ink-faint); font-size: 10px; margin-left: 7px; }

.muted { color: var(--ink-faint); }
.foot { margin-top: 40px; text-align: center; font-size: 11px; color: var(--ink-faint); letter-spacing: .05em; }
.foot b { color: var(--ink-dim); }