/* VOLTEX AI design system — shared by website, investor app / Telegram Mini App.
   Layout concept: exchange-grade dark console; thin charcoal hairlines, red reserved for action, green/red only for P&L. */
:root{
  --bg:#050608; --bg-2:#0B0C10; --card:#101116; --raised:#16171D; --line:#25262E; --line-2:#1C1D24;
  --red:#FF2638; --red-d:#B90F24; --red-tint:rgba(255,38,56,.10); --red-line:rgba(255,38,56,.35);
  --fg:#F5F5F7; --fg-2:#9A9CA8; --fg-3:#6B6D78;
  --up:#00D6A0; --up-tint:rgba(0,214,160,.10); --down:#FF3548; --down-tint:rgba(255,53,72,.10);
  --warn:#F0B429; --warn-tint:rgba(240,180,41,.10); --info:#8C93A8;
  /* strategy identity hues (validated order for adjacency: arb, lev, btc, alt) */
  --s-arb:#FF2638; --s-lev:#1E94D2; --s-btc:#C8770E; --s-alt:#A274FF;
  --f-display:"Archivo","Inter",system-ui,sans-serif;
  --f-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --t-xs:11px; --t-sm:12.5px; --t-md:14px; --t-lg:16px; --t-xl:20px; --t-2xl:28px; --t-3xl:40px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--f-ui);font-size:var(--t-md);line-height:1.5;-webkit-font-smoothing:antialiased;margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.num,.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-size:.92em;letter-spacing:-.01em}
.up{color:var(--up)} .down{color:var(--down)} .muted{color:var(--fg-2)} .faint{color:var(--fg-3)}
h1,h2,h3,h4{margin:0;line-height:1.15;text-wrap:balance;font-weight:650;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- brand ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;letter-spacing:.14em;font-size:17px;font-stretch:112%}
.brand img{width:30px;height:30px;object-fit:contain}
.brand b{color:var(--red);font-weight:800}
.ch-flag{margin-left:2px;flex-shrink:0;opacity:.85;vertical-align:middle}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--raised);color:var(--fg);font-weight:600;font-size:var(--t-md);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{border-color:#3a3b45;background:#1b1c23}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:#ff3d4d;border-color:#ff3d4d}
.btn-ghost{background:transparent}
.btn-outline-red{background:transparent;border-color:var(--red-line);color:var(--fg)}
.btn-outline-red:hover{border-color:var(--red);background:var(--red-tint)}
.btn-sm{height:32px;padding:0 12px;font-size:var(--t-sm)}
.btn-lg{height:50px;padding:0 24px;font-size:15px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;border:1px solid var(--line);color:var(--fg-2);background:var(--bg-2);white-space:nowrap}
.badge-demo{border-color:rgba(240,180,41,.45);color:var(--warn);background:var(--warn-tint);text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.badge-live{border-color:rgba(0,214,160,.4);color:var(--up);background:var(--up-tint)}
.badge-stale{border-color:rgba(240,180,41,.45);color:var(--warn);background:var(--warn-tint)}
.badge-down{border-color:rgba(255,53,72,.45);color:var(--down);background:var(--down-tint)}
.risk{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:var(--t-xs);font-weight:600;border:1px solid var(--line)}
.risk::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.risk-low{color:#7ED6B8;border-color:rgba(126,214,184,.35)}
.risk-medium{color:var(--warn);border-color:rgba(240,180,41,.35)}
.risk-high{color:#FF6B78;border-color:rgba(255,107,120,.35)}
.risk-veryhigh{color:#fff;background:var(--red-d);border-color:var(--red-d)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}

/* ---------- surfaces ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.eyebrow{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:700}
.label{font-size:var(--t-xs);color:var(--fg-2);letter-spacing:.02em}
.divider{height:1px;background:var(--line);border:0;margin:0}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:var(--t-sm)}
.kv:last-child{border-bottom:0}
.kv>span:first-child{color:var(--fg-2)}
.kv>span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.na{color:var(--fg-3);font-style:normal}

/* ---------- demo / data source indicators ---------- */
.demo-strip{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 16px;font-size:var(--t-xs);color:var(--warn);background:#16120a;border-bottom:1px solid rgba(240,180,41,.25);text-align:center}
.src{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--fg-3)}
.src .dot{width:6px;height:6px}

/* ---------- forms ---------- */
.field{display:grid;gap:6px}
.field>label{font-size:var(--t-sm);color:var(--fg-2)}
.input,.select{height:44px;width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px;color:var(--fg);outline:none;transition:border-color .15s}
.input:focus,.select:focus{border-color:var(--red-line)}
.input.err{border-color:var(--down)}
.help{font-size:var(--t-xs);color:var(--fg-3)}
.errtxt{font-size:var(--t-xs);color:var(--down)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);color:var(--fg-2);cursor:pointer}
.check input{accent-color:var(--red);width:18px;height:18px;margin-top:1px;flex:none}

/* ---------- segmented chips ---------- */
.chips{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:3px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:1 0 auto;height:28px;min-width:40px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:var(--fg-2);font-size:var(--t-sm);font-weight:600;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--red-tint);color:var(--fg);box-shadow:inset 0 0 0 1px var(--red-line)}
.chip[disabled]{opacity:.35;cursor:not-allowed}
.pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg-2);font-size:var(--t-sm);font-weight:600;cursor:pointer;white-space:nowrap}
.pill[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-weight:600;color:var(--fg-3);font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl tr:hover td{background:rgba(255,255,255,.015)}
.tbl .r{text-align:right}

/* ---------- strategy icon tiles ---------- */
.sicon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--raised);border:1px solid var(--line)}
.sicon svg{width:22px;height:22px}
.sicon[data-s="ai-exchange-arbitrage"]{color:var(--s-arb);background:linear-gradient(160deg,rgba(255,38,56,.18),rgba(255,38,56,.04));border-color:rgba(255,38,56,.3)}
.sicon[data-s="ai-bitcoin"]{color:var(--s-btc);background:linear-gradient(160deg,rgba(200,119,14,.2),rgba(200,119,14,.04));border-color:rgba(200,119,14,.32)}
.sicon[data-s="ai-altcoin"]{color:var(--s-alt);background:linear-gradient(160deg,rgba(162,116,255,.2),rgba(162,116,255,.04));border-color:rgba(162,116,255,.32)}
.sicon[data-s="ai-leverage"]{color:var(--s-lev);background:linear-gradient(160deg,rgba(30,148,210,.2),rgba(30,148,210,.04));border-color:rgba(30,148,210,.32)}

/* ---------- charts ---------- */
.chart{position:relative;width:100%}
.chart svg{display:block;width:100%;overflow:visible}
.chart .tt{position:absolute;pointer-events:none;background:var(--raised);border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:var(--t-xs);white-space:nowrap;transform:translate(-50%,-110%);opacity:0;transition:opacity .1s;z-index:3}
.chart .tt b{display:block;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.chart-empty{display:grid;place-items:center;height:100%;min-height:120px;color:var(--fg-3);font-size:var(--t-sm);border:1px dashed var(--line);border-radius:var(--r-sm);text-align:center;padding:16px}

/* ---------- modal / toast / skeleton ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.66);display:grid;place-items:center;z-index:80;padding:16px}
.modal{width:min(440px,100%);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;gap:14px;max-height:90vh;overflow:auto}
.modal h3{font-size:var(--t-lg)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:var(--t-sm);z-index:90;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:calc(100% - 32px)}
.skel{background:linear-gradient(90deg,var(--card),var(--raised),var(--card));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:6px}
@keyframes sk{to{background-position:-200% 0}}
.empty{padding:28px 16px;text-align:center;color:var(--fg-2);display:grid;gap:8px;justify-items:center}
.notice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg-2);font-size:var(--t-sm);color:var(--fg-2)}
.notice strong{color:var(--fg);display:block;margin-bottom:2px}
.notice-warn{border-color:rgba(240,180,41,.3);background:#13100a}
.notice-red{border-color:rgba(255,53,72,.35);background:#160a0d}
.notice .icon{margin-top:2px}