/* tSignals — графитовый терминал. Тёмная тема по умолчанию, светлая через [data-theme=light]. */
:root{
  --bg:#0E1116; --elevated:#161A21; --surface:#1C222B; --border:#333B47;
  --text:#E6EAF0; --muted:#9AA4B2; --accent:#4C8DF5; --accent-hover:#6BA1F7;
  --pos:#46C89A; --neg:#EC5D64; --warn:#E0A93B; --hot:#E0A93B; --hot-ink:#161007; --focus:#7CB0FF; --vwap:#8b9df7; --cvd:#4fd0dc;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono","IBM Plex Mono",monospace;
  --radius:13px;
}
[data-theme=light]{
  --bg:#EEF1F6; --elevated:#F7F9FC; --surface:#FFFFFF; --border:#D3DAE4;
  --text:#111621; --muted:#586172; --accent:#2E6BE0; --accent-hover:#1A4DC0;
  --pos:#0C9160; --neg:#D23440; --warn:#C2540C; --hot:#C2540C; --hot-ink:#FFFFFF; --focus:#2E6BE0; --vwap:#6d5ae0; --cvd:#0e8fa0;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--text); font:14px/1.45 var(--font); font-variant-numeric:tabular-nums; padding-bottom:54px}
a{color:var(--accent); text-decoration:none}
b{font-weight:700}
.mut{color:var(--muted)}

/* ---------- header ---------- */
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:11px 20px; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.brand{display:flex; align-items:center; gap:11px}
.logo{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--accent); color:#fff; font-weight:800; font-size:20px}
.wm{font-size:17px; font-weight:800; letter-spacing:.3px}
.wm .a{color:var(--accent)}
.sub{font-size:11px; color:var(--muted); margin-top:1px}
.tabs{display:flex; gap:6px; margin-left:4px}
.tab{font-size:13px; font-weight:600; color:var(--muted); padding:7px 14px; border-radius:9px; border:1px solid transparent; cursor:pointer; background:none}
.tab:hover{color:var(--text)}
.tab.on{color:var(--text); background:color-mix(in srgb,var(--accent) 14%,transparent); border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.hspace{flex:1}
.hbtn{background:var(--elevated); border:1px solid var(--border); color:var(--muted); border-radius:9px; padding:7px 11px; cursor:pointer; font:inherit; font-size:13px}
.hbtn:hover{color:var(--text); border-color:var(--accent)}
.status{display:flex; gap:8px; flex-wrap:wrap; width:100%; padding-top:2px}
.chip{font-size:11px; color:var(--muted); background:var(--elevated); border:1px solid var(--border); padding:5px 10px; border-radius:999px; white-space:nowrap}
.chip .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--muted); margin-right:5px; vertical-align:middle}
.chip .dot.live{background:var(--pos); animation:pulse 1.6s infinite}
.chip .dot.scan{background:var(--warn); animation:pulse 1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pos) 50%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- controls ---------- */
.controls{display:flex; gap:16px 20px; flex-wrap:wrap; align-items:flex-end; padding:14px 20px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--elevated),transparent)}
.ctl{display:flex; flex-direction:column; gap:6px}
.ctl.grow{flex:1 1 220px; min-width:200px}
.ctl>label{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}
.ctl>label b{color:var(--accent); font-size:13px}
.rangewrap{display:flex; align-items:center; gap:10px}
input[type=range]{width:130px; accent-color:var(--accent)}
input[type=number],input[type=search],select{background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:9px; padding:8px 10px; font:inherit; font-variant-numeric:tabular-nums}
input[type=number]{width:64px; text-align:center}
input[type=search]{flex:1; min-width:120px}
select{cursor:pointer}
input:focus,select:focus{outline:none; border-color:var(--accent)}
.dual{display:flex; align-items:center; gap:6px; color:var(--muted)}
.row{display:flex; gap:8px; align-items:center}
.togglecol{gap:8px}
.switch{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text); cursor:pointer}
.switch input{display:none}
.switch span{width:34px; height:20px; border-radius:999px; background:var(--surface); border:1px solid var(--border); position:relative; transition:.15s; flex:none}
.switch span::after{content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--muted); transition:.15s}
.switch input:checked+span{background:color-mix(in srgb,var(--accent) 25%,transparent); border-color:var(--accent)}
.switch input:checked+span::after{left:16px; background:var(--accent)}
.chips{display:flex; gap:8px}
.chipbtn{background:var(--surface); border:1px solid var(--border); color:var(--muted); padding:8px 13px; border-radius:9px; cursor:pointer; font:inherit; font-weight:600}
.chipbtn.on{border-color:var(--accent); color:var(--text); background:color-mix(in srgb,var(--accent) 14%,transparent)}

/* ---------- grid + cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:13px; padding:18px 20px 24px}
.card{position:relative; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--muted); border-radius:var(--radius); padding:12px 13px 11px; cursor:pointer; transition:border-color .12s, transform .06s, box-shadow .12s}
@keyframes in{from{opacity:0; transform:translateY(5px)}to{opacity:1}}
.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); transform:translateY(-1px)}
.card.bull{border-left-color:var(--pos)}
.card.warn{border-left-color:var(--warn)}
.card.bear{border-left-color:var(--neg)}
.card.fresh,.card.fire{border-left-color:var(--hot); border-color:color-mix(in srgb,var(--hot) 45%,var(--border)); box-shadow:0 0 0 1px color-mix(in srgb,var(--hot) 20%,transparent)}
.hot-badge{margin-left:auto; align-self:center; background:var(--hot); color:var(--hot-ink); font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; letter-spacing:.4px; white-space:nowrap}
.chead{display:flex; align-items:center; gap:8px; margin-bottom:9px}
.ex-chip{font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:2px 7px; display:inline-flex; gap:5px; align-items:center; background:var(--elevated)}
.ex-dot{width:6px; height:6px; border-radius:50%}
.tfb{font-size:11px; color:var(--muted); background:var(--elevated); border:1px solid var(--border); padding:2px 7px; border-radius:6px}
.sym{font-size:15px; font-weight:700; margin-left:1px; letter-spacing:.2px}
.ctime{margin-left:auto; font-size:11px; color:var(--muted); font-family:var(--mono)}
.headline{display:flex; align-items:baseline; gap:8px; font-size:14px; font-weight:600; margin-bottom:9px}
.headline .pc{font-size:18px; font-weight:700; font-family:var(--mono); color:var(--pos)}
.headline .pc.neg{color:var(--neg)}
.headline .usd{color:var(--muted); font-size:12px; font-family:var(--mono)}
.roll{font-size:12px; padding:6px 9px; border-radius:8px; margin-bottom:10px; background:var(--elevated)}
.roll.fire{background:color-mix(in srgb,var(--neg) 14%,transparent); color:var(--neg)}
.roll.wait{color:var(--muted)}
.metrics{display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; margin-bottom:12px}
.m{display:flex; align-items:baseline; gap:6px; font-size:12px; color:var(--muted)}
.m .lbl{text-transform:uppercase; font-size:10px; letter-spacing:.04em}
.m .v{margin-left:auto; font-weight:600; color:var(--text); font-family:var(--mono)}
.m .v.up,.good .v{color:var(--pos)} .m .v.down{color:var(--neg)}
.daybadge{font-family:var(--mono); font-weight:700; font-size:11px; padding:1px 7px; border-radius:6px}
.daybadge.lo{background:color-mix(in srgb,var(--pos) 20%,transparent); color:var(--pos)}
.daybadge.mid{background:color-mix(in srgb,var(--warn) 24%,transparent); color:var(--warn)}
.daybadge.hi{background:color-mix(in srgb,var(--neg) 20%,transparent); color:var(--neg)}
.cfoot{display:flex; gap:8px}
.btn{flex:1; text-align:center; font-weight:600; font-size:12px; padding:8px 0; border-radius:9px; border:1px solid var(--border); color:var(--text); background:var(--elevated); cursor:pointer; transition:.12s}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.chart{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:transparent}

.empty{text-align:center; color:var(--muted); padding:64px 20px; font-size:15px}
.empty .big{font-size:40px; margin-bottom:10px}

/* ---------- footer ---------- */
.foot{position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:11px 26px; font-size:11.5px; color:var(--muted); background:color-mix(in srgb,var(--bg) 92%,transparent); border-top:1px solid var(--border); backdrop-filter:blur(8px)}
.foot a{color:var(--muted)} .foot a:hover{color:var(--accent)}
.foot .fb{cursor:pointer; margin-right:10px}

/* ---------- modal (общий) ---------- */
.modal{position:fixed; inset:0; display:none; z-index:100}
.modal.open{display:block}
.modal .backdrop{position:absolute; inset:0; background:rgba(3,5,8,.6)}
.modal .panel{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.5); display:flex; flex-direction:column; overflow:hidden}
.modal.chartm .panel{width:min(960px,95vw); height:min(640px,88vh)}
.modal.fbm .panel{width:min(460px,94vw)}
.mhead{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border)}
.mtitle{font-weight:700; font-size:15px}
.tf-btns{display:flex; gap:4px; margin-left:6px; flex-wrap:wrap}
.tf-btns b{font-size:11px; padding:4px 8px; border-radius:7px; border:1px solid var(--border); color:var(--muted); cursor:pointer; font-weight:600}
.tf-btns b:hover{color:var(--text)}
.tf-btns b.on{color:var(--accent); border-color:var(--accent)}
.ind-toggles{display:flex; gap:4px; flex-wrap:wrap}
.ind-tg{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:4px 8px; border-radius:7px; border:1px solid var(--border); background:var(--elevated); color:var(--text); cursor:pointer}
.ind-tg i{width:9px; height:9px; border-radius:2px; display:inline-block; flex:none}
.ind-tg.off{opacity:.45; text-decoration:line-through}
.ind-tg:hover{border-color:var(--accent)}
.ch-ex-btn{margin-left:auto; font-size:12px; font-weight:600; padding:6px 12px; border-radius:8px; border:1px solid var(--accent); color:var(--accent); text-decoration:none; white-space:nowrap}
.ch-ex-btn:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.mclose{margin-left:10px; cursor:pointer; font-size:16px; color:var(--muted); padding:2px 6px}
.mclose:hover{color:var(--text)}
.chart-wrap{position:relative; flex:1; min-height:0}
#chart{position:absolute; inset:0}
.draw-tools{position:absolute; top:30px; left:8px; z-index:6; display:flex; flex-direction:column; gap:2px; padding:4px; border-radius:10px; background:var(--elevated); border:1px solid var(--border); box-shadow:0 4px 16px rgba(0,0,0,.28)}
.draw-tool{width:28px; height:28px; display:grid; place-items:center; border:none; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; padding:0}
.draw-tool svg{width:16px; height:16px; display:block}
.draw-tool:hover{background:var(--surface); color:var(--text)}
.draw-tool.on{background:var(--accent); color:#fff}
.draw-sep{height:1px; margin:2px 3px; background:var(--border)}
.chart-wrap.dr-hit canvas{cursor:pointer !important}
.chart-wrap.dr-drag canvas{cursor:grabbing !important}
.watermark{position:absolute; right:14px; bottom:42px; z-index:4; font-size:13px; font-weight:700; letter-spacing:.3px; color:var(--muted); opacity:.5; pointer-events:none}
.chart-fallback{display:grid; place-items:center; height:100%; padding:30px; text-align:center; color:var(--muted); font-size:13px}
.mfoot{padding:8px 16px; font-size:11px; color:var(--muted); border-top:1px solid var(--border); display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* feedback modal */
.fb-body{padding:16px}
.fb-body h3{margin:0 0 6px; font-size:16px}
.fb-body p{margin:0 0 12px; color:var(--muted); font-size:13px}
.fb-body textarea{width:100%; min-height:96px; resize:vertical; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:10px; font:inherit}
.fb-body input[type=text]{width:100%; margin-top:8px; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:9px 10px; font:inherit}
.fb-hp{position:absolute; left:-9999px}
.fb-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}
.fb-send{background:var(--accent); color:#fff; border:none; border-radius:10px; padding:9px 18px; font:inherit; font-weight:700; cursor:pointer}
.fb-ok{color:var(--pos); font-weight:600}
.fbm.sent #fbText, .fbm.sent #fbInput, .fbm.sent #fbContact, .fbm.sent .fb-send{display:none}
.fbm.sent .fb-ok{display:block; text-align:center; font-size:15px; line-height:1.5; padding:18px 6px}
.fbm.sent .fb-actions{justify-content:center}

.toast{position:fixed; bottom:52px; left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--accent); color:var(--text); padding:9px 16px; border-radius:10px; z-index:120; box-shadow:0 8px 24px rgba(0,0,0,.4)}
[hidden]{display:none !important}