/* Theme: "sss" by milixxxxx (21st.dev, shadcn/ui) — tokens copied 1:1; layout follows the user's reference video. */
:root{
  --background:oklch(0.137 0.036 258.526); --foreground:oklch(0.984 0.003 247.858);
  --card:oklch(0.137 0.036 258.526); --card-foreground:oklch(0.984 0.003 247.858);
  --primary:oklch(0.984 0.003 247.858); --primary-foreground:oklch(0.208 0.04 265.727);
  --secondary:oklch(0.28 0.037 259.974); --secondary-foreground:oklch(0.984 0.003 247.858);
  --muted:oklch(0.28 0.037 259.974); --muted-foreground:oklch(0.711 0.035 256.788);
  --accent:oklch(0.28 0.037 259.974); --accent-foreground:oklch(0.984 0.003 247.858);
  --destructive:oklch(0.637 0.208 25.326); --destructive-foreground:oklch(0.984 0.003 247.858);
  --border:oklch(0.28 0.037 259.974); --input:oklch(0.28 0.037 259.974); --ring:oklch(0.869 0.02 252.847);
  --chart-1:oklch(0.677 0.157 35.19); --chart-2:oklch(0.631 0.101 183.491); --chart-3:oklch(0.379 0.044 225.539);
  --chart-4:oklch(0.834 0.119 88.146); --chart-5:oklch(0.783 0.126 58.749);
  --radius:0.375rem; --radius-sm:calc(var(--radius) - 2px);
  --shadow:0 4px 8px -1px hsl(0 0% 0% / 0.1); --shadow-xs:0 1px 3px 0 rgb(0 0 0 / .05), 0 1px 2px -1px rgb(0 0 0 / .05);
  --font-sans:ui-sans-serif, system-ui, sans-serif; --font-mono:ui-monospace, SFMono-Regular, monospace; --font-fa:Vazirmatn, var(--font-sans);
  --up:var(--chart-2); --dn:var(--destructive);                                    /* polarity: data roles from the chart/destructive tokens */
  --ease-out:cubic-bezier(0,0,.2,1); --ease-in-out:cubic-bezier(.4,0,.2,1); --dur-fast:120ms; --dur:200ms; --dur-slow:320ms;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-mono);font-size:12px;letter-spacing:0}
.frame{max-width:1280px;margin:0 auto;padding:20px 20px 10px}

/* ---------- header ---------- */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
h1{margin:0}
.leak{position:relative;display:inline-block;font:500 clamp(56px,9.5vw,132px)/.9 var(--font-sans);letter-spacing:.12em;color:var(--foreground);padding-right:.02em}
.leak-fx,.leak-glow{position:absolute;inset:0;pointer-events:none}
.leak-fx i,.leak-glow i{position:absolute;inset:0;font-style:normal;background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.leak-fx{z-index:2}.leak-glow{z-index:0;filter:blur(16px);mix-blend-mode:screen}
.l1{background-image:linear-gradient(118deg,transparent 12%,#f97316 34%,#fcd34d 44%,#fff 48%,transparent 62%);animation:leak1 4.4s ease-in-out infinite}
.l2{background-image:linear-gradient(248deg,transparent 18%,#22d3ee 38%,#d946ef 48%,transparent 68%);animation:leak2 5.6s ease-in-out infinite}
.leak-fx .l1{filter:blur(.35px)}
.leak-ink{position:relative;z-index:1}
@keyframes leak1{0%{background-position:130% 0;opacity:.12}42%{background-position:-30% 0;opacity:1}100%{background-position:130% 0;opacity:.12}}
@keyframes leak2{0%{background-position:-30% 0;opacity:.1}55%{background-position:130% 0;opacity:.95}100%{background-position:-30% 0;opacity:.1}}
h2{font:500 12px/1.3 var(--font-mono);letter-spacing:.22em;color:var(--muted-foreground);margin:12px 0 0}
h2 span{color:var(--foreground)}
.head-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.tag{color:var(--muted-foreground);font-size:10px;letter-spacing:1px;display:flex;align-items:center}

/* ---------- buttons (shadcn variants, theme tokens) ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button,.btn{height:28px;padding:0 12px;border-radius:var(--radius-sm);font:500 14px/1 var(--font-sans);cursor:pointer;
  background:var(--background);color:var(--foreground);border:1px solid var(--border);box-shadow:var(--shadow-xs);
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform 90ms var(--ease-out)}
.tabs button:hover,.btn:hover{background:var(--accent);color:var(--accent-foreground)}
.tabs button:active,.btn:active{transform:scale(.98)}
.tabs button:focus-visible,.btn:focus-visible,select:focus-visible,input:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)}
.tabs button.on,.btn.primary{background:var(--primary);color:var(--primary-foreground);border-color:transparent}
.tabs button.on:hover,.btn.primary:hover{background:color-mix(in oklch,var(--primary) 90%,transparent)}
.btn.secondary{background:var(--secondary);color:var(--secondary-foreground);border-color:var(--secondary)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.destructive{background:var(--destructive);color:var(--destructive-foreground);border-color:transparent}

/* ---------- live dot (NumberTicker ping, numbers-only role) ---------- */
.ping{position:relative;display:inline-flex;width:9px;height:9px;margin-right:7px;vertical-align:middle;flex:none}
.ping i{position:absolute;inset:0;border-radius:50%;background:#10b981}
.ping i:first-child{animation:ping 1s cubic-bezier(0,0,.2,1) infinite;opacity:.75;background:#34d399}
.ping.dn i{background:var(--destructive)}.ping.dn i:first-child{background:var(--destructive)}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
number-flow{font-variant-numeric:tabular-nums}

/* ---------- strips ---------- */
.strip{display:grid;grid-template-columns:1fr 1.6fr 1.2fr;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:16px}
.strip .cell{padding:10px 14px;border-right:1px solid var(--border);min-width:0}
.strip .cell:last-child{border-right:0}
.lbl{font-size:10px;letter-spacing:1px;color:var(--muted-foreground);margin-bottom:8px;text-transform:uppercase}
.dim{color:var(--muted-foreground)}
.mag{color:var(--muted-foreground)}
.live{display:flex;gap:12px;align-items:flex-end}
.bars{display:flex;gap:3px;align-items:flex-end;height:30px}
.bars i{display:block;width:6px;background:var(--up);border-radius:1px}
.bars i.dn{background:var(--secondary)}
.spot{font:600 20px var(--font-mono);display:flex;align-items:center}
.stages{display:flex;gap:6px;flex-wrap:wrap}
.stages span{height:28px;display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;font:500 12px var(--font-sans);color:var(--muted-foreground);
  transition:background-color var(--dur) var(--ease-in-out),color var(--dur) var(--ease-in-out)}
.stages span.on{color:var(--secondary-foreground);background:var(--secondary)}
.pbar{height:8px;background:var(--secondary);border-radius:var(--radius-sm);overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--primary);transition:width var(--dur-slow) var(--ease-out)}
.prow{display:flex;justify-content:space-between;margin-top:8px;font-size:11px}

/* ---------- stage: brain + columns ---------- */
.stage{position:relative;height:660px;margin:6px 0}
#mesh{position:absolute;inset:0;width:100%;height:100%}
.col{position:absolute;top:22px;display:flex;flex-direction:column;gap:9px;width:206px;z-index:2}
.col.left{left:0}.col.right{right:0}
.box{border:1px solid var(--border);background:color-mix(in oklch,var(--card) 85%,transparent);border-radius:var(--radius);padding:6px 9px;cursor:pointer;box-shadow:var(--shadow);
  transition:border-color var(--dur) var(--ease-in-out),background-color var(--dur) var(--ease-in-out)}
.box:hover{background:var(--accent)}
.box b{display:block;font-weight:700;font-size:11px;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box b em{font-style:normal;color:var(--muted-foreground);margin-right:6px}
.box small{display:block;color:var(--muted-foreground);font-size:9px;margin-top:3px;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.box.on{border-color:var(--ring);background:var(--secondary)}
.box.on b em{color:var(--foreground)}
.box .st{float:right;font-size:9px;color:var(--muted-foreground)}
.st.UP,.st.LONG,.st.CHEAP,.st.LOW,.st.GREED,.pos{color:var(--up)!important}
.st.DOWN,.st.SHORT,.st.RICH,.st.HIGH,.st.FEAR,.neg{color:var(--dn)!important}
.sel{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:min(400px,46%);border:1px solid var(--ring);background:color-mix(in oklch,var(--card) 92%,transparent);
  border-radius:var(--radius);padding:10px 14px 12px;z-index:3;box-shadow:var(--shadow)}
.sel-k{color:var(--muted-foreground);font-size:10px;letter-spacing:1px}
.sel-t{font:600 18px/1.25 var(--font-sans);margin:4px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.sel-v{font-size:12px}
.sel-n{color:var(--muted-foreground);font-size:10px;margin-top:3px}
.sel-u{display:block;width:42px;height:2px;background:var(--primary);margin-top:8px}

/* ---------- signal stream reel ---------- */
.reel-wrap{gap:6px}
.reel-head{display:flex;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:.6px;color:var(--muted-foreground);white-space:nowrap}
.reel{position:relative;height:540px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.reel-track{position:absolute;left:0;right:0;top:0;will-change:transform}
.reel-track.go{transition:transform var(--dur-slow) var(--ease-in-out)}
.ritem{height:54px;margin-bottom:6px;border:1px solid var(--border);border-radius:var(--radius);padding:6px 9px;background:color-mix(in oklch,var(--card) 85%,transparent);overflow:hidden}
.ritem .rk{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.6px;color:var(--muted-foreground)}
.ritem .rk b{font-weight:500}
.ritem .rt{font-size:11px;font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ritem .rv{font-size:10px;margin-top:2px;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ritem.intake{border-color:var(--ring);background:var(--secondary)}
.reel-slot{position:absolute;left:-5px;right:-5px;top:240px;height:58px;border-left:2px solid var(--ring);pointer-events:none}

/* ---------- bottom strip ---------- */
.bottom{grid-template-columns:240px 1.25fr 1.2fr}
#mini{width:220px;height:120px}
.steps div{display:grid;grid-template-columns:28px 92px 1fr;gap:6px;padding:4px 0;color:var(--muted-foreground);font-size:11px}
.steps div.on{color:var(--foreground);border-bottom:1px solid var(--ring)}
.steps div.on span:nth-child(2){color:var(--chart-4)}
.dec-t{font:600 19px var(--font-sans)}
.dec-t.LONG{color:var(--up)}.dec-t.SHORT{color:var(--dn)}
.dec-s{color:var(--muted-foreground);margin:3px 0 6px;font-size:11px}
.kpis{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--muted-foreground);margin:2px 0 6px}
.kpis span{display:inline-flex;align-items:center;gap:5px}
.kpis b{color:var(--foreground);font-weight:700;font-size:13px}
.fa{font-family:var(--font-fa);direction:rtl;text-align:right;font-size:13px;line-height:1.9;color:var(--foreground)}
.seg{display:flex;gap:3px;margin-top:8px}
.seg i{display:block;width:10px;height:10px;background:var(--secondary);border-radius:2px}
.seg i.on{background:var(--primary)}
.foot{display:flex;justify-content:space-between;color:var(--muted-foreground);font-size:10px;letter-spacing:1px;padding:10px 0 2px;flex-wrap:wrap;gap:6px}

/* ---------- panes ---------- */
.panes{padding-top:4px}
.tabs.big{border-bottom:1px solid var(--border);padding-bottom:12px}
.pane{display:none;padding:14px 0 30px}
.pane.on{display:block}
table{width:100%;border-collapse:collapse;font-size:11px}
th{color:var(--muted-foreground);font-weight:500;text-align:right;padding:6px 8px;border-bottom:1px solid var(--border);letter-spacing:.5px;font-size:10px}
td{padding:6px 8px;border-bottom:1px solid color-mix(in oklch,var(--border) 60%,transparent);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
tr.hi td{background:color-mix(in oklch,var(--secondary) 55%,transparent)}
.scroll{overflow-x:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;background:var(--card);box-shadow:var(--shadow)}
.card h3{margin:0 0 10px;font:600 14px var(--font-sans)}
.news a{color:var(--foreground);text-decoration:none}
.news a:hover{color:var(--ring);text-decoration:underline}
.news div{padding:6px 0;border-bottom:1px solid color-mix(in oklch,var(--border) 60%,transparent);display:grid;grid-template-columns:44px 1fr 90px;gap:8px}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.form label{display:block;color:var(--muted-foreground);font-size:10px;letter-spacing:.6px;margin-bottom:5px}
.form input[type=range]{width:100%;accent-color:var(--primary)}
.form input[type=number],.form select{width:100%;height:32px;background:var(--background);color:var(--foreground);border:1px solid var(--input);border-radius:var(--radius);padding:0 8px;font:13px var(--font-mono)}
.form .val{float:right;color:var(--foreground)}
.note{border:1px solid var(--border);background:color-mix(in oklch,var(--secondary) 40%,transparent);border-radius:var(--radius);padding:10px 14px;margin:12px 0}

@media (max-width:900px){
  .strip,.bottom{grid-template-columns:1fr}
  .strip .cell{border-right:0;border-bottom:1px solid var(--border)}
  .stage{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:400px;padding-bottom:230px}
  .col{position:static;width:auto}
  #mesh{inset:auto;top:0;left:0;right:0;height:390px}
  .sel{width:calc(100% - 8px)}
  .grid2{grid-template-columns:1fr}
  .reel{height:380px}.reel-slot{top:180px}
  .leak{letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){.leak-fx,.leak-glow{display:none}.ping i:first-child{animation:none}.reel-track.go{transition:none}}

/* market selector + settings (bilingual rows with info popovers) */
.tabs.market button{font-size:12px;height:26px}
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.set{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;background:var(--card)}
.set-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;position:relative}
.set-h .en{font:500 11px var(--font-mono);color:var(--foreground);letter-spacing:.3px}
.set-h .fa-l{font:600 12px var(--font-fa);color:var(--muted-foreground);margin-left:auto;direction:rtl}
.set-h .val{font:600 12px var(--font-mono);color:var(--foreground);min-width:34px;text-align:right}
.info{width:18px;height:18px;border-radius:50%;border:1px solid var(--ring);background:transparent;color:var(--ring);font:700 11px/1 var(--font-sans);cursor:help;padding:0;flex:none;
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.info:hover,.info:focus-visible,.info.open{background:var(--ring);color:var(--primary-foreground);outline:none}
.tip{position:absolute;z-index:20;top:26px;right:0;left:0;background:var(--popover,var(--card));border:1px solid var(--ring);border-radius:var(--radius);padding:10px 12px;
  box-shadow:var(--shadow);font-size:12.5px;line-height:1.9;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.tip b{display:block;color:var(--chart-4);font-weight:600;margin-top:4px}
.info:hover+.tip,.info:focus-visible+.tip,.info.open+.tip{opacity:1;transform:none;pointer-events:auto}
.set select,.set input[type=number]{width:100%;height:32px;background:var(--background);color:var(--foreground);border:1px solid var(--input);border-radius:var(--radius);padding:0 8px;font:13px var(--font-mono)}
.set input[type=range]{width:100%;accent-color:var(--primary)}
.set.dim-set{opacity:.45}
.plan-kpis{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;font-size:12px;color:var(--muted-foreground)}
.plan-kpis b{color:var(--foreground)}

/* simplified pickers (shadcn select look) */
.pickers{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pick{display:flex;flex-direction:column;gap:4px;font-size:10px;letter-spacing:.6px;color:var(--muted-foreground)}
.pick .fa-i,.fa-i{font:600 11px var(--font-fa);font-style:normal}
.pick select{height:32px;min-width:170px;background:var(--background);color:var(--foreground);border:1px solid var(--input);border-radius:var(--radius);padding:0 10px;font:500 13px var(--font-sans);box-shadow:var(--shadow-xs);cursor:pointer}
.pick select:hover{background:var(--accent)}
.mode-switch{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);padding:2px;gap:2px;background:var(--background)}
.mode-switch button{height:26px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--muted-foreground);font:500 13px var(--font-sans);cursor:pointer}
.mode-switch button.on{background:var(--secondary);color:var(--foreground)}
.bot{border:1px solid var(--ring);border-radius:var(--radius);padding:12px 14px;margin:12px 0;background:var(--card)}
.bot h3{margin:0 0 8px;font:600 14px var(--font-sans);display:flex;align-items:center;gap:8px}
.live-off{display:inline-flex;align-items:center;gap:8px;color:var(--muted-foreground);font-size:12px}

/* tagline + creator: the title's light-leak gradient on the glyphs */
.leak-sm{margin:0;display:inline-block;background-image:linear-gradient(118deg,#f8fafc 12%,#f97316 34%,#fcd34d 44%,#fff 48%,#22d3ee 56%,#d946ef 62%,#f8fafc 74%);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:leak1 4.4s ease-in-out infinite;animation-name:leaksm}
@keyframes leaksm{0%{background-position:130% 0}42%{background-position:-30% 0}100%{background-position:130% 0}}
.brand{display:flex;flex-direction:column;align-items:flex-start}
.tagline{font:500 clamp(16px,2vw,22px)/1.2 var(--font-sans);letter-spacing:.32em;text-transform:uppercase;margin-top:12px}
.creator{margin:7px 0 0;font:500 10px/1.4 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:#f5d0fe;
  text-shadow:0 0 1px #fff,0 0 5px #d946ef,0 0 12px rgba(217,70,239,.6)}
@media (prefers-reduced-motion:reduce){.leak-sm{animation:none;background-position:0 0}}

/* brand: logo = a live miniature of the centre brain; display font Unbounded */
.brand-row{display:flex;align-items:center;gap:clamp(12px,1.8vw,24px)}
.logo{display:flex;flex-direction:column;align-items:center;flex:none}
#logoBrain{width:clamp(84px,10vw,132px);height:auto;aspect-ratio:24/19}
.logo-t{font:700 clamp(14px,1.5vw,19px)/1 "Unbounded",var(--font-sans);letter-spacing:.06em;margin-top:2px;
  background:linear-gradient(100deg,#f8fafc 10%,#fcd34d 40%,#f97316 55%,#f8fafc 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.leak,.tagline{font-family:"Unbounded",var(--font-sans)!important}
.leak{font-weight:500!important;font-size:clamp(46px,8vw,112px)!important}
.tagline{font-weight:400!important;font-size:clamp(12px,1.5vw,17px)!important;letter-spacing:.28em!important}
.leak{letter-spacing:0}
.leak b{font-weight:inherit}
.t3m{letter-spacing:-.04em;margin-right:.26em}
.tbr{letter-spacing:.06em}

/* control panel */
.cp-h{margin:22px 0 10px;font:600 15px var(--font-sans);display:flex;gap:8px;align-items:center}
.set input[type=text],.set input:not([type]),.set input[type=password]{width:100%;height:32px;background:var(--background);color:var(--foreground);border:1px solid var(--input);border-radius:var(--radius);padding:0 8px;font:13px var(--font-mono)}