/* Trading system website. Same tokens as the control room's lab screen; chart colors were validated
   there with the dataviz validator on both surfaces (light #FFFFFF, dark #161A22). */
:root {
  --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#F0F2F5; --surface-3:#E4E8EE;
  --ink:#151A22; --ink-2:#465061; --ink-3:#566072; --line:#E3E6EB; --line-2:#CBD1DA; --ctl:#767F90;
  --primary:#1D4ED8; --on-primary:#FFFFFF; --primary-soft:#EBF1FF; --attn:#9A4309; --attn-soft:#FFF4E5; --attn-line:#EDB874;
  --danger:#B42318; --danger-soft:#FEF3F2; --ok:#157F3B; --ok-soft:#ECFDF3; --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
  --bar-bg:rgba(255,255,255,.94); --s-port:#AE8E30; --s-bench:#6187E8;
  --font:"Noto Sans Hebrew","Segoe UI",Arial,sans-serif; --mono:"Fira Code",ui-monospace,Consolas,monospace;
  --r:12px; --r-l:16px; color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#0E1117; --surface:#161A22; --surface-2:#1D222C; --surface-3:#272D39;
  --ink:#ECEFF4; --ink-2:#B6BECB; --ink-3:#A3ACBA; --line:#262C37; --line-2:#39414F; --ctl:#808A9B;
  --primary:#8DB2FF; --on-primary:#0E1117; --primary-soft:#1B2640; --attn:#F3B765; --attn-soft:#2A2116; --attn-line:#6E5128;
  --danger:#FF968C; --danger-soft:#2C1715; --ok:#72D49C; --ok-soft:#12261A; --shadow:0 1px 2px rgba(0,0,0,.35);
  --bar-bg:rgba(14,17,23,.94); color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#0E1117; --surface:#161A22; --surface-2:#1D222C; --surface-3:#272D39;
    --ink:#ECEFF4; --ink-2:#B6BECB; --ink-3:#A3ACBA; --line:#262C37; --line-2:#39414F; --ctl:#808A9B;
    --primary:#8DB2FF; --on-primary:#0E1117; --primary-soft:#1B2640; --attn:#F3B765; --attn-soft:#2A2116; --attn-line:#6E5128;
    --danger:#FF968C; --danger-soft:#2C1715; --ok:#72D49C; --ok-soft:#12261A; --shadow:0 1px 2px rgba(0,0,0,.35);
    --bar-bg:rgba(14,17,23,.94); color-scheme:dark;
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.6; margin:0; -webkit-font-smoothing:antialiased; }
.wrap { max-width:1200px; margin-inline:auto; padding-inline:16px; }
h1,h2,h3 { margin:0; line-height:1.3; text-wrap:balance; }
h1 { font-size:28px; } h2 { font-size:20px; } h3 { font-size:17px; }
p { margin:0; }
a { color:var(--primary); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }
main:focus { outline:none; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }
.muted { color:var(--ink-2); }
.small { font-size:14px; }
.skip { position:absolute; inset-inline-start:16px; top:-100px; z-index:50; background:var(--primary); color:var(--on-primary); padding:10px 16px; border-radius:8px; font-weight:600; }
.skip:focus { top:8px; }
.ico { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.loading { padding:48px 0; color:var(--ink-2); }

.bar { position:sticky; top:0; z-index:10; background:var(--bar-bg); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.bar-in { display:flex; align-items:center; gap:12px; min-height:64px; flex-wrap:wrap; padding-block:6px; }
.mark { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.mark img { border-radius:9px; flex:none; }
.mark b { display:block; font-size:17px; line-height:1.25; }
.mark small { display:block; font-size:13px; color:var(--ink-2); line-height:1.25; }
.nav { display:flex; gap:2px; flex-wrap:wrap; }
.nav a { display:inline-flex; align-items:center; min-height:44px; padding-inline:12px; border-radius:10px; color:var(--ink-2); text-decoration:none; font-weight:500; }
.nav a:hover { background:var(--surface-2); color:var(--ink); }
.nav a[aria-current="page"] { background:var(--primary-soft); color:var(--primary); font-weight:700; }
.bar-end { margin-inline-start:auto; display:flex; align-items:center; gap:6px; }
.pulse { display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink-2); padding-inline:8px; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--ctl); flex:none; }
.pulse.ok .dot { background:var(--ok); }
.pulse.bad .dot { background:var(--danger); }
.iconbtn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:0; background:none; color:var(--ink-2); cursor:pointer; }
.iconbtn:hover { background:var(--surface-2); color:var(--ink); }
.ghost { min-height:44px; padding-inline:14px; border:1px solid var(--line-2); border-radius:10px; background:none; color:var(--ink); font:inherit; cursor:pointer; }
.ghost:hover { background:var(--surface-2); }
.ghost[aria-pressed="true"] { background:var(--primary-soft); border-color:var(--primary); color:var(--primary); font-weight:600; }

main.wrap { padding-block:24px 48px; display:grid; gap:24px; }
main.wrap > * { min-width:0; }
.head { display:grid; gap:6px; }
.head p { color:var(--ink-2); max-width:72ch; }
.card { background:var(--surface); border-radius:var(--r-l); box-shadow:var(--shadow); padding:20px; display:grid; gap:12px; min-width:0; }
.card > * { min-width:0; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.note { display:flex; gap:10px; padding:12px 16px; border:1px solid var(--attn-line); background:var(--attn-soft); border-radius:var(--r); color:var(--ink); font-size:15px; }
.note svg { color:var(--attn); margin-top:2px; }
.hero { display:grid; gap:12px; background:var(--surface); border-radius:var(--r-l); box-shadow:var(--shadow); padding:24px; }
.hero h1 { font-size:26px; }
.hero p { font-size:17px; color:var(--ink-2); max-width:80ch; }
.tiles { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.tile { background:var(--surface-2); border-radius:var(--r); padding:12px 14px; display:grid; gap:2px; }
.tile dt { font-size:14px; color:var(--ink-2); }
.tile dd { margin:0; display:grid; gap:2px; }
.tile-v { font-size:24px; font-weight:600; }
.tile small { font-size:14px; color:var(--ink-2); }
dl { margin:0; }

.acc { text-decoration:none; color:inherit; transition:box-shadow .2s; }
.acc:hover { box-shadow:0 6px 18px rgba(16,24,40,.14); }
.acc-top { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.acc-val { font-size:26px; font-weight:600; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:14px; font-weight:600; background:var(--surface-3); color:var(--ink-2); width:fit-content; }
.chip.good { background:var(--ok-soft); color:var(--ok); }
.chip.warn { background:var(--attn-soft); color:var(--attn); }
.chip.bad { background:var(--danger-soft); color:var(--danger); }
.chip.info { background:var(--primary-soft); color:var(--primary); }
.up { color:var(--ok); } .down { color:var(--danger); }
.holds { font-size:15px; color:var(--ink-2); }

.ins { display:grid; gap:6px; padding:14px 16px; border-radius:var(--r); background:var(--surface-2); }
.ins b { font-size:16px; }
.list { display:grid; gap:10px; }

.tablewrap { overflow-x:auto; border-radius:var(--r); }
table { border-collapse:collapse; width:100%; font-size:15px; }
th { text-align:start; font-weight:600; color:var(--ink-2); padding:8px 10px; border-bottom:1px solid var(--line-2); white-space:nowrap; }
td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
tbody tr:last-child td { border-bottom:0; }
tr.link { cursor:pointer; }
tr.link:hover td { background:var(--surface-2); }
td a { font-weight:600; }
details > summary { cursor:pointer; color:var(--primary); font-weight:500; min-height:32px; }
.term { border:0; background:none; font:inherit; color:inherit; padding:0; text-decoration:underline dotted; text-underline-offset:4px; cursor:help; }

.chart { position:relative; direction:ltr; touch-action:pan-y; }
.chart svg { display:block; width:100%; }
.chart text { fill:var(--ink-3); font-size:12px; font-family:var(--mono); }
.chart .grid-l { stroke:var(--line); stroke-width:1; }
.chart .base-l { stroke:var(--ctl); stroke-width:1; }
.chart .cross { stroke:var(--ctl); stroke-width:1; stroke-dasharray:3 3; }
.tip { position:absolute; pointer-events:none; background:var(--surface); border:1px solid var(--line-2); box-shadow:0 8px 20px rgba(16,24,40,.18); border-radius:10px; padding:8px 10px; font-size:14px; direction:rtl; min-width:150px; z-index:5; display:none; }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--ink-2); }
.legend span { display:inline-flex; align-items:center; gap:7px; }
.swatch { width:18px; height:3px; border-radius:2px; display:inline-block; }
.swatch.round { width:10px; height:10px; border-radius:50%; }
.ranges { display:flex; gap:6px; flex-wrap:wrap; }
.meter { position:relative; height:8px; border-radius:4px; background:var(--surface-3); margin-block:6px 2px; }
.meter i { position:absolute; top:-3px; width:14px; height:14px; border-radius:50%; background:var(--ink); border:2px solid var(--surface); transform:translateX(50%); }
.bars { display:grid; gap:10px; }
.bar-row { display:grid; gap:3px; }
.bar-row .lab { display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--ink-2); }
.bar-track { height:10px; background:var(--surface-3); border-radius:5px; overflow:hidden; }
.bar-track i { display:block; height:100%; border-radius:5px; }
.cols { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); }
.back { display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.doc { display:grid; gap:12px; padding-block:32px; max-width:800px; }
.doc ul { margin:0; padding-inline-start:22px; }
.doc h2 { margin-top:12px; }
.glossary dt { font-weight:700; margin-top:14px; }
.glossary dd { margin:2px 0 0; color:var(--ink-2); }
.foot { padding-block:16px 40px; font-size:14px; color:var(--ink-2); display:grid; gap:6px; }
.foot p { max-width:90ch; }
@media (max-width:760px) {
  .bar { position:static; }
  h1,.hero h1 { font-size:23px; }
  .nav { order:3; width:100%; overflow-x:auto; flex-wrap:nowrap; }
  .nav a { white-space:nowrap; }
  .mark small { display:none; }
  .pulse #pulse-text { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }
.form { display:grid; gap:6px; max-width:560px; }
.form label { font-weight:600; margin-top:10px; }
.form input { min-height:44px; padding:8px 12px; border-radius:10px; border:1px solid var(--ctl); background:transparent; color:var(--ink); font:inherit; width:100%; }
.primary { min-height:44px; margin-top:14px; padding-inline:18px; border:0; border-radius:10px; background:var(--primary); color:var(--on-primary); font:inherit; font-weight:700; cursor:pointer; width:fit-content; }
.steps { margin:0; padding-inline-start:22px; display:grid; gap:6px; }
.err { padding:10px 12px; border-radius:10px; border:1px solid var(--danger); color:var(--danger); }