/* ============================================================
   BITBOSS · design tokens + base + shared atoms
   sci-fi trading terminal / big-screen aesthetic
   ============================================================ */
/* fallback notice: hidden once the stylesheet actually loads */
#load-help{display:none}

:root{
  /* ---- palette ---- */
  --bg-0:#00030a;
  --bg-1:#020a14;
  --bg-2:#04121f;
  --cyan:#38e1ff;
  --cyan-2:#22d3ee;
  --teal:#2dd4bf;
  --green:#00e58f;
  --red:#ff2d5e;
  --amber:#ffb62e;
  --violet:#8b7dff;
  --blue:#3f8cff;
  --txt:#cfe9f5;
  --txt-dim:#7b9bb1;
  --txt-faint:#40596c;
  --line:rgba(56,189,248,.13);
  --line-soft:rgba(56,189,248,.07);
  --line-strong:rgba(56,189,248,.34);
  --green-dim:rgba(0,229,143,.5);
  --red-dim:rgba(255,45,94,.5);

  /* ---- type ---- */
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  --sans:"PingFang SC","Hiragino Sans GB",-apple-system,"Helvetica Neue","Microsoft YaHei",sans-serif;

  /* ---- scale (set by js) ---- */
  --s:1;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#00040a;overflow:hidden;
  font-family:var(--sans);color:var(--txt);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  user-select:none;cursor:default;
}
h1,h2,h3,p{margin:0}
b,strong{font-weight:600}

/* ============================================================
   THE 1920x1080 SCREEN (uniformly scaled to viewport)
   ============================================================ */
#screen{
  position:fixed;left:50%;top:50%;
  width:var(--w,1920px);height:1080px;
  transform:translate(-50%,-50%) scale(var(--s));
  transform-origin:50% 50%;
  padding:12px 16px 8px;
  display:flex;flex-direction:column;
  gap:9px;
  background:
    radial-gradient(1300px 720px at 50% -8%, rgba(0,74,108,.34), transparent 62%),
    radial-gradient(1000px 640px at 52% 104%, rgba(0,88,120,.16), transparent 66%),
    radial-gradient(760px 520px at 88% 22%, rgba(0,60,110,.12), transparent 70%),
    linear-gradient(180deg,#01040c 0%,#00030a 46%,#010610 100%);
  overflow:hidden;
}

/* ---- background layers ---- */
.bg-grid,.bg-glow,.bg-scan,.bg-vignette,.bg-sweep{position:absolute;inset:0;pointer-events:none}
.bg-grid{
  background-image:
    linear-gradient(to right, rgba(56,189,248,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56,189,248,.055) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:center center;
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 46%, #000 32%, transparent 88%);
  mask-image:radial-gradient(ellipse 78% 78% at 50% 46%, #000 32%, transparent 88%);
  opacity:.62;
}
.bg-glow{
  background:
    radial-gradient(620px 620px at 50% 47%, rgba(20,140,190,.13), transparent 70%),
    radial-gradient(420px 300px at 50% 47%, rgba(56,225,255,.07), transparent 72%);
}
.bg-scan{
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  opacity:.5;mix-blend-mode:overlay;
}
.bg-vignette{
  background:radial-gradient(ellipse 78% 72% at 50% 50%, transparent 42%, rgba(0,1,4,.62) 100%);
}
.bg-sweep{
  background:linear-gradient(180deg, transparent 0%, rgba(56,225,255,.05) 46%, rgba(56,225,255,.09) 50%, rgba(56,225,255,.05) 54%, transparent 100%);
  height:180px;
  animation:sweep 9s cubic-bezier(.45,.05,.55,.95) infinite;
  opacity:.85;
}
@keyframes sweep{
  0%{transform:translateY(-20%) scaleY(.5);opacity:0}
  12%{opacity:.85}
  88%{opacity:.55}
  100%{transform:translateY(660%) scaleY(1.4);opacity:0}
}

/* ============================================================
   PANEL CHROME — the core visual language
   ============================================================ */
.panel{
  position:relative;
  display:flex;flex-direction:column;
  min-width:0;min-height:0;
  background:
    linear-gradient(180deg, rgba(8,28,46,.60) 0%, rgba(3,12,22,.80) 48%, rgba(2,8,16,.88) 100%);
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(88,200,255,.10),
    inset 0 0 70px rgba(0,80,120,.10),
    0 0 34px rgba(0,20,36,.55);
}
.panel::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;z-index:2;
  background-image:
    linear-gradient(var(--line-strong),var(--line-strong)),linear-gradient(var(--line-strong),var(--line-strong)),
    linear-gradient(var(--line-strong),var(--line-strong)),linear-gradient(var(--line-strong),var(--line-strong)),
    linear-gradient(var(--line-strong),var(--line-strong)),linear-gradient(var(--line-strong),var(--line-strong)),
    linear-gradient(var(--line-strong),var(--line-strong)),linear-gradient(var(--line-strong),var(--line-strong));
  background-repeat:no-repeat;
  background-size:11px 1px,1px 11px, 11px 1px,1px 11px, 11px 1px,1px 11px, 11px 1px,1px 11px;
  background-position:left top,left top, right top,right top, left bottom,left bottom, right bottom,right bottom;
  opacity:.85;
}
/* faint inner hatch on the right edge */
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(90deg, rgba(34,211,238,.045), transparent 22%),
    linear-gradient(270deg, rgba(34,211,238,.03), transparent 18%);
}

.panel-hd{
  position:relative;z-index:3;flex:0 0 27px;height:27px;
  display:flex;align-items:center;gap:8px;
  padding:0 9px 0 8px;
  border-bottom:1px solid rgba(56,189,248,.10);
  background:linear-gradient(90deg, rgba(34,211,238,.11), rgba(34,211,238,.025) 46%, transparent 72%);
}
.panel-hd::after{
  content:"";position:absolute;left:0;bottom:-1px;width:120px;height:1px;
  background:linear-gradient(90deg, rgba(56,225,255,.85), transparent);
}
.ph-accent{
  flex:0 0 3px;width:3px;height:11px;background:var(--cyan);
  box-shadow:0 0 9px rgba(56,225,255,.9);
}
.ph-title{
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.15em;color:#c4ebfa;white-space:nowrap;
}
.ph-cn{font-size:10.5px;color:var(--txt-dim);letter-spacing:.05em;white-space:nowrap;padding-top:1px}
.ph-meta{
  margin-left:auto;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;color:var(--txt-faint);white-space:nowrap;
}
.panel-body{position:relative;z-index:1;flex:1;min-height:0;overflow:hidden}
.pnl-canvas{position:absolute;inset:0;display:block}

/* ============================================================
   SHARED ATOMS (available to every panel)
   ============================================================ */
.c-cyan{color:var(--cyan)!important}
.c-green{color:var(--green)!important}
.c-red{color:var(--red)!important}
.c-amber{color:var(--amber)!important}
.c-violet{color:var(--violet)!important}
.c-dim{color:var(--txt-dim)!important}
.c-faint{color:var(--txt-faint)!important}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.tag{
  display:inline-flex;align-items:center;height:14px;padding:0 4px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;
  border:1px solid currentColor;opacity:.9;white-space:nowrap;
}
.tag--long{color:var(--green);background:rgba(0,229,143,.10)}
.tag--short{color:var(--red);background:rgba(255,45,94,.10)}
.tag--watch{color:var(--cyan);background:rgba(56,225,255,.08)}
.pill{
  display:inline-flex;align-items:center;gap:4px;height:15px;padding:0 6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  color:var(--green);border:1px solid rgba(0,229,143,.35);
  background:rgba(0,229,143,.08);
}
.pill i{width:4px;height:4px;background:currentColor;box-shadow:0 0 6px currentColor;border-radius:50%}

/* ============================================================
   BOOT SEQUENCE
   ============================================================ */
#boot-veil{
  position:absolute;inset:0;z-index:60;pointer-events:none;
  background:#00040a;
  opacity:1;
  transition:opacity .7s ease .15s;
}
#screen.booted #boot-veil{opacity:0}
.booting .panel,.booting #hdr,.booting #ticker,.booting #ftr{opacity:0}
#screen.booted .panel,#screen.booted #hdr,#screen.booted #ticker,#screen.booted #ftr{
  opacity:1;
  animation:riseIn .62s cubic-bezier(.16,.84,.3,1) both;
}
#screen.booted #hdr{animation-delay:.10s}
#screen.booted #ticker{animation-delay:.18s}
#screen.booted .p-inputs{animation-delay:.26s}
#screen.booted .p-pnl{animation-delay:.30s}
#screen.booted .p-globe{animation-delay:.34s}
#screen.booted .p-orderflow{animation-delay:.42s}
#screen.booted .p-positions{animation-delay:.44s}
#screen.booted .p-causal{animation-delay:.50s}
#screen.booted .p-iteration{animation-delay:.56s}
#screen.booted .p-spread{animation-delay:.58s}
#screen.booted .p-leadtime{animation-delay:.62s}
#screen.booted #ftr{animation-delay:.70s}
@keyframes riseIn{
  from{opacity:0;transform:translateY(7px);filter:blur(2px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* ============================================================
   STATIC / SCREENSHOT MODE (?shot=1) — determinism for capture
   ============================================================ */
.noanim *, .noanim *::before, .noanim *::after{
  animation:none!important;
  transition:none!important;
}
.noanim #boot-veil{display:none!important}
.noanim .panel,.noanim #hdr,.noanim #ticker,.noanim #ftr{opacity:1!important}