/* ═══════════ ТЕМА ПАНЕЛІ (спільна для index / bot / login) ═══════════
   Кольори — ЛИШЕ тут, як змінні. Сторінки й JS беруть їх через var(--x) або
   panelTheme.css('--x') (для canvas-графіків). Нова сторінка = <script src="/static/theme.js">
   + <link rel="stylesheet" href="/static/theme.css"> у <head>, без власних кольорів.
   Тему ставить theme.js атрибутом <html data-theme="dark|light"> ДО першого малювання.
   ⚠️ Значення, які читають графіки (Chart.js, lightweight-charts), — лише hex/rgba:
   canvas не розуміє color-mix() і var(). */

:root, :root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0f17; --panel:#121722; --panel2:#1a2030; --hover:#1c2334;
  --border:#252d3f; --border-soft:#1e2534;
  --txt:#e6e9ef; --muted:#8e97aa; --faint:#5f687c;
  --green:#26a69a; --red:#ef5350; --yellow:#ffb300; --blue:#5b8def; --accent:#5b8def; --violet:#b388ff;
  --green-soft:rgba(38,166,154,.14); --red-soft:rgba(239,83,80,.12); --yellow-soft:rgba(255,179,0,.12);
  --blue-soft:rgba(91,141,239,.14); --muted-soft:rgba(142,151,170,.14); --violet-soft:rgba(179,136,255,.14);
  --chip:rgba(255,255,255,.06);
  --on-color:#0b0f17;              /* текст на заливці green/red/yellow/muted */
  --accent-fill:#3d6fd6; --on-accent:#ffffff;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.18);
  --shadow-lg:0 20px 60px rgba(0,0,0,.45);
  --code-bg:#080b12; --code-txt:#a7b0c0;
  --grid:rgba(140,150,170,.10); --zero:rgba(140,150,170,.45); --wick:#c9cfdb;
}
/* Без JS (theme.js не завантажився) — хоча б системна тема */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    color-scheme:light;
    --bg:#f3f5f9; --panel:#ffffff; --panel2:#f1f4f8; --hover:#f5f7fb;
    --border:#dfe4ec; --border-soft:#e9edf3;
    --txt:#141a24; --muted:#5d687a; --faint:#8a94a6;
    --green:#0a7d62; --red:#d03a37; --yellow:#a35f00; --blue:#2f68d8; --accent:#2f68d8; --violet:#6f42d6;
    --green-soft:rgba(10,125,98,.10); --red-soft:rgba(208,58,55,.09); --yellow-soft:rgba(163,95,0,.10);
    --blue-soft:rgba(47,104,216,.09); --muted-soft:rgba(93,104,122,.10); --violet-soft:rgba(111,66,214,.10);
    --chip:rgba(15,23,42,.05);
    --on-color:#ffffff; --accent-fill:#2f68d8; --on-accent:#ffffff;
    --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.07);
    --shadow-lg:0 20px 50px rgba(16,24,40,.12);
    --code-bg:#f7f9fc; --code-txt:#334155;
    --grid:rgba(15,23,42,.07); --zero:rgba(15,23,42,.35); --wick:#6b7280;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f5f9; --panel:#ffffff; --panel2:#f1f4f8; --hover:#f5f7fb;
  --border:#dfe4ec; --border-soft:#e9edf3;
  --txt:#141a24; --muted:#5d687a; --faint:#8a94a6;
  --green:#0a7d62; --red:#d03a37; --yellow:#a35f00; --blue:#2f68d8; --accent:#2f68d8; --violet:#6f42d6;
  --green-soft:rgba(10,125,98,.10); --red-soft:rgba(208,58,55,.09); --yellow-soft:rgba(163,95,0,.10);
  --blue-soft:rgba(47,104,216,.09); --muted-soft:rgba(93,104,122,.10); --violet-soft:rgba(111,66,214,.10);
  --chip:rgba(15,23,42,.05);
  --on-color:#ffffff; --accent-fill:#2f68d8; --on-accent:#ffffff;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.07);
  --shadow-lg:0 20px 50px rgba(16,24,40,.12);
  --code-bg:#f7f9fc; --code-txt:#334155;
  --grid:rgba(15,23,42,.07); --zero:rgba(15,23,42,.35); --wick:#6b7280;
}

/* ── ОСНОВА ── один шрифт (Inter, якщо встановлений, інакше системний) + рівні цифри */
:root{
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font:14px/1.5 var(--font);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em}
code{font:12px var(--mono);background:var(--chip);padding:1px 5px;border-radius:4px}
b,strong{font-weight:600}
.muted{color:var(--muted)}
.hide{display:none}
.pos{color:var(--green)} .neg{color:var(--red)}

/* ── ШАПКА + МЕНЮ (однакові на всіх сторінках) ── */
.app-header{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;
  flex-wrap:wrap;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt);font-size:17px;font-weight:650;
  letter-spacing:-.01em;text-decoration:none!important;min-width:0}
.brand svg{width:28px;height:28px;flex:none}
.brand .logo-bg{fill:var(--panel2);stroke:var(--border)}
.brand .logo-line{stroke:var(--green)} .brand .logo-dot{fill:var(--accent)}
.brand .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.hdr-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.clock{color:var(--muted);font-size:12.5px;margin-right:4px}
.icon-btn,.hdr-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;
  border-radius:9px;border:1px solid var(--border);background:var(--panel);color:var(--txt);
  cursor:pointer;font:600 13px var(--font);box-shadow:var(--shadow);transition:border-color .15s,background .15s}
.icon-btn{width:34px;font-size:16px;line-height:1}
.hdr-btn{padding:0 14px}
.icon-btn:hover,.hdr-btn:hover{border-color:var(--accent)}

.tabs{display:flex;gap:4px;margin-bottom:18px;padding:4px;background:var(--panel);
  border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:7px 14px;border-radius:8px;color:var(--muted);cursor:pointer;white-space:nowrap;
  font-weight:550;font-size:13.5px;border:1px solid transparent;text-decoration:none!important;
  transition:color .15s,background .15s}
.tab:hover{color:var(--txt);background:var(--hover)}
.tab.active{background:var(--panel2);color:var(--txt);border-color:var(--border)}

/* ── КАРТКИ, КНОПКИ, ПОЛЯ, ТАБЛИЦІ ── */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);min-width:0}
.btn{flex:1;padding:7px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);
  color:var(--txt);cursor:pointer;font:600 12px var(--font);transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--accent)}
select,input{background:var(--panel2);border:1px solid var(--border);color:var(--txt);
  padding:8px 10px;border-radius:8px;font:13px var(--font);font-variant-numeric:tabular-nums;max-width:100%}
select:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--blue-soft)}
input::placeholder{color:var(--faint)}
.badge{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600;white-space:nowrap}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;padding:9px 10px;border-bottom:1px solid var(--border);background:var(--panel2)}
td{padding:9px 10px;border-bottom:1px solid var(--border-soft)}
tbody tr:last-child td{border-bottom:none}
tr:hover td{background:var(--hover)}
/* таблиця в картці зі своїм горизонтальним скролом — сторінка на телефоні не їде вбік */
.tbl-wrap{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap td,.tbl-wrap th{white-space:nowrap}
.tbl-wrap th:first-child{border-top-left-radius:var(--radius)}
.tbl-wrap th:last-child{border-top-right-radius:var(--radius)}

@media (max-width:600px){
  .brand{font-size:15.5px}
  .clock{display:none}
}