/* 10-19 (speed): Inter з власного сервера (/static/fonts/) замість fonts.googleapis.com — мінус DNS+TLS до двох чужих доменів
   і блокуючий CSS. Inter v20 зі змінною вагою: один woff2 на набір символів (ваги 400–700 з нього ж); unicode-range — як у Google
   (fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700, 2026-10-19). Ліцензія шрифту: SIL OFL 1.1. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/fonts/inter-v20-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/fonts/inter-v20-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/fonts/inter-v20-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/fonts/inter-v20-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/fonts/inter-v20-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/fonts/inter-v20-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/fonts/inter-v20-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Спільні токени трьох макетів редизайну (09-21). Ніч за замовчуванням, день через [data-theme="light"]. */
:root {
  color-scheme: dark;
  --bg: #0a0c11; --bg-2: #0e1117; --s1: #12151c; --s2: #171b23; --s3: #1e232d;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.12);
  --t1: #f3f5f9; --t2: #b3b8c3; --t3: #8b919d;
  --accent: #22d3ee; --accent-2: #34d399; --accent-bg: rgba(34,211,238,.10); --accent-ring: rgba(34,211,238,.45);
  --up: #2fd46e; --down: #ff5a5f; --up-bg: rgba(47,212,110,.12); --down-bg: rgba(255,90,95,.12);
  --long: #f59e0b; --short: #3b82f6; --warn: #f5a524;
  --glass: rgba(10,12,17,.72);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* 09-21 (Владік): моно-цифри читались гірше — числа тим самим Inter з tabular-nums */
  --r: 12px; --r-sm: 8px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.6);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f9; --bg-2: #eef1f5; --s1: #ffffff; --s2: #f7f8fa; --s3: #eceff3;
  --line: rgba(10,12,17,.08); --line-2: rgba(10,12,17,.14);
  --t1: #0e1116; --t2: #3f4650; --t3: #6b7280;
  --accent: #0891b2; --accent-2: #059669; --accent-bg: rgba(8,145,178,.10); --accent-ring: rgba(8,145,178,.4);
  --up: #16a34a; --down: #dc2626; --up-bg: rgba(22,163,74,.10); --down-bg: rgba(220,38,38,.10);
  --long: #d97706; --short: #2563eb;
  --glass: rgba(244,246,249,.72);
  --shadow: 0 1px 2px rgba(10,12,17,.06), 0 8px 24px -14px rgba(10,12,17,.25);
}
* { box-sizing: border-box; }
html { scrollbar-color: var(--s3) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--t1); font: 13px/1.45 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
/* 10-02: тап без затримки подвійного тапу (pinch лишається), без сірого спалаху на тачі */
body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent-bg); color: var(--t1); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.num { font-family: var(--mono); font-weight: 500; letter-spacing: -.01em; }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--t3); }
.lg { color: var(--long); } .sh { color: var(--short); }

/* ── шапка на склі ── */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 20px;
  background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; }
.brand i { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; }
.brand i.logo { position: relative; width: 54px; height: 40px; border-radius: 0; background: none; }   /* 09-22: лого Владіка двома масками — тіло і стрілка окремо, колір = акцент палітри */
.brand i.logo::before, .brand i.logo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-mask: url(/static/v2/logo-body.png?v=3) center / contain no-repeat; mask: url(/static/v2/logo-body.png?v=3) center / contain no-repeat; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.brand i.logo::after { -webkit-mask-image: url(/static/v2/logo-arrow.png?v=3); mask-image: url(/static/v2/logo-arrow.png?v=3); animation: arrowin .7s .15s cubic-bezier(.2,.8,.2,1) backwards; }
.brand:hover i.logo::after { transform: translate(3px, -4px); } .brand:hover i.logo::before { transform: translate(1px, 1px); }
.brand i.logo s { position: absolute; inset: 0; background: var(--accent); -webkit-mask: url(/static/v2/logo-btc.png?v=3) center / contain no-repeat; mask: url(/static/v2/logo-btc.png?v=3) center / contain no-repeat; transition: background-color .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease; transform-origin: 23.5% 36%; }
.brand i.logo s.eth { -webkit-mask-image: url(/static/v2/logo-eth.png?v=3); mask-image: url(/static/v2/logo-eth.png?v=3); transform-origin: 11.7% 43.5%; transition-delay: .12s; }
/* монети загоряються своїм кольором: суцільний колір → плавно (градієнт не інтерполюється, тому й «мигало»), ледь підростають, м'яке сяйво */
.brand:hover i.logo s.btc, .brand.hov i.logo s.btc { background: #f7931a; transform: scale(1.06); filter: drop-shadow(0 0 2px rgba(247,147,26,.55)) drop-shadow(0 0 6px rgba(247,147,26,.35)); }
.brand:hover i.logo s.eth, .brand.hov i.logo s.eth { background: #627eea; transform: scale(1.06); filter: drop-shadow(0 0 2px rgba(98,126,234,.55)) drop-shadow(0 0 6px rgba(98,126,234,.35)); }
@keyframes arrowin { from { opacity: 0; transform: translate(-8px, 8px); } }
@media (prefers-reduced-motion: reduce) { .brand i.logo::after { animation: none; } .brand i.logo::before, .brand i.logo::after { transition: none; } }
.brand i svg { width: 13px; height: 13px; }
.top .pair { display: flex; align-items: baseline; gap: 8px; margin-left: 6px; }
.top .pair b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.top .pair span { color: var(--t3); }
.top .grow { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--t2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px var(--up-bg); }
.chip.live { border-color: rgba(255,90,95,.45); color: var(--down); }
.chip.live .dot { background: var(--down); box-shadow: 0 0 0 3px var(--down-bg); }
.ibtn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--t2); transition: background .15s, color .15s; }
.ibtn:hover { background: var(--s3); color: var(--t1); }
.ibtn svg { width: 16px; height: 16px; }

/* ── пілюлі-вкладки (з референсу: градієнт «росте» з центру при наведенні) ── */
.pills { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line); }
.pill { position: relative; isolation: isolate; height: 28px; padding: 0 13px; border-radius: 999px; color: var(--t3); font-weight: 600; font-size: 12.5px; transition: color .2s; }
.pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0; transform: scaleX(.55); transition: opacity .22s, transform .22s cubic-bezier(.4,0,.2,1); }
.pill:hover { color: var(--t1); } .pill:hover::before { opacity: .12; transform: scaleX(1); }
.pill[aria-selected="true"] { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.pill[aria-selected="true"]::before { opacity: .1; transform: scaleX(1); }
.tf { display: inline-flex; gap: 2px; }
.tf button { height: 26px; padding: 0 9px; border-radius: 6px; color: var(--t3); font-weight: 600; font-size: 12px; }
.tf button:hover { color: var(--t1); background: var(--s3); }
.tf button[aria-selected="true"] { color: var(--accent); background: var(--accent-bg); }

/* ── кнопки ── */
.btn { height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--s2); color: var(--t1); font-weight: 600; transition: border-color .15s, background .15s, transform .15s; }
.btn:hover { border-color: var(--accent-ring); }
.btn.primary { border: 0; color: #06141a; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 2px 6px -2px rgba(0,0,0,.45); }
.btn.primary:hover { transform: translateY(-1px); }
.btn.wide { width: 100%; height: 40px; font-size: 14px; }

/* ── підпис розділу: капс з розрядкою (з референсу) ── */
.lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.lbl.ac { color: var(--accent); }

/* ── стакан ── */
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.book .side { display: grid; gap: 2px; }
.book .row { position: relative; display: flex; justify-content: space-between; padding: 3px 8px; border-radius: 4px; font-family: var(--mono); font-size: 12px; overflow: hidden; }
.book .row i { position: absolute; inset: 0; z-index: -1; opacity: .16; }
.book .ask i { background: var(--down); right: auto; } .book .bid i { background: var(--up); left: auto; }
.book .ask b { color: var(--down); font-weight: 500; } .book .bid b { color: var(--up); font-weight: 500; }
.book .row { isolation: isolate; }

/* ── форма ── */
.form { display: grid; gap: 10px; }
.field { display: grid; gap: 4px; }
.field label { font-size: 12px; color: var(--t3); }
.field .in { height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--s1); display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); }
.field .in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.field .in span { color: var(--t3); font-family: var(--sans); font-size: 12px; }
.calc { display: grid; gap: 5px; font-size: 12.5px; color: var(--t2); }
.calc div { display: flex; justify-content: space-between; }
.calc b { color: var(--t1); font-weight: 500; font-family: var(--mono); }

/* ── таблиця ── */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 9px 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: inherit; }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
td:first-child, th:first-child { padding-left: 4px; } td:last-child, th:last-child { padding-right: 4px; }
td .ex { font-family: var(--sans); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
td .ex i { width: 7px; height: 7px; border-radius: 50%; }
tr.sel td { background: var(--accent-bg); }
tr:hover td { background: var(--s2); }
.spr { display: inline-block; min-width: 66px; text-align: center; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
.spr.up { background: var(--up-bg); } .spr.down { background: var(--down-bg); }

/* ── графік (SVG-заглушка) ── */
.plot { position: relative; width: 100%; height: 100%; min-height: 240px; }
.plot svg { width: 100%; height: 100%; display: block; }
.plot .axis { position: absolute; right: 8px; top: 14px; display: grid; gap: 34px; font-family: var(--mono); font-size: 11.5px; color: var(--t3); text-align: right; }
.plot .tag { position: absolute; right: 6px; padding: 2px 7px; border-radius: 4px; font: 700 11px var(--mono); color: #06141a; }
.plot .ohlc { position: absolute; left: 12px; top: 10px; font-size: 11px; color: var(--t2); display: flex; gap: 14px; }
.plot .ohlc b { color: var(--t1); }
.plot .ohlc i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.grid line { stroke: var(--line); stroke-width: 1; }

/* ── нахил KPI-плиток від курсора ── */
.tilt { transform-style: preserve-3d; transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s; will-change: transform; }
.tilt.on { transition: transform .06s linear; }

/* ── перемикач теми ── */
.theme { position: relative; }
.theme .sun, .theme .moon { position: absolute; transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1); }
:root:not([data-theme="light"]) .theme .sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="light"] .theme .moon { opacity: 0; transform: rotate(90deg) scale(.5); }

/* ── підсвітка активного блоку: тонке ціанове кільце + м'яке сяйво ── */
.active-ring { box-shadow: inset 0 0 0 1px var(--accent-ring), 0 0 0 4px var(--accent-bg), var(--shadow); }
@media (prefers-reduced-motion: reduce) { .pill::before, .tilt, .theme .sun, .theme .moon { transition: none; } }
/* телефон: шапка не переносить бренд, службові чіпи ховаються, лишається LIVE і тема */
@media (max-width: 640px) {
  .top { gap: 8px; padding: 0 12px; }
  .brand { font-size: 0; gap: 0; } .brand i.logo { width: 40px; height: 30px; }
  .top .pair span:first-child { display: none; }
  .top .chip:not(.live) { display: none; }
  .tf { overflow-x: auto; scrollbar-width: none; }
}

/* ── альтернативні палітри (перемикач у шапці): індиго і графіт; ніч/день працюють для кожної ── */
:root[data-palette="indigo"] { --bg: #0b0b15; --bg-2: #0e0e1a; --s1: #141426; --s2: #1a1a30; --s3: #22223c; --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.13);
  --accent: #a78bfa; --accent-2: #f472b6; --accent-bg: rgba(167,139,250,.12); --accent-ring: rgba(167,139,250,.5); --long: #fbbf24; --short: #38bdf8; --glass: rgba(11,11,21,.72); }
:root[data-palette="indigo"][data-theme="light"] { --bg: #f5f4fb; --bg-2: #efeef8; --s1: #fff; --s2: #f8f7fd; --s3: #eeecf7; --accent: #6d4fd6; --accent-2: #db2777; --accent-bg: rgba(109,79,214,.10); --accent-ring: rgba(109,79,214,.4); --long: #d97706; --short: #0284c7; --glass: rgba(245,244,251,.72); }
:root[data-palette="graphite"] { --bg: #0a0a0b; --bg-2: #0d0d0f; --s1: #131315; --s2: #18181b; --s3: #202024; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --accent: #f4f4f5; --accent-2: #a1a1aa; --accent-bg: rgba(244,244,245,.09); --accent-ring: rgba(244,244,245,.45); --long: #f59e0b; --short: #60a5fa; --glass: rgba(10,10,11,.72); }
:root[data-palette="graphite"] .btn.primary, :root[data-palette="graphite"] .brand i:not(.logo) { background: var(--accent); color: #0a0a0b; }
:root[data-palette="graphite"][data-theme="light"] { --bg: #f5f5f6; --bg-2: #eeeef0; --s1: #fff; --s2: #f7f7f8; --s3: #ececee; --accent: #18181b; --accent-2: #52525b; --accent-bg: rgba(24,24,27,.08); --accent-ring: rgba(24,24,27,.4); --glass: rgba(245,245,246,.72); }
:root[data-palette="graphite"][data-theme="light"] .btn.primary, :root[data-palette="graphite"][data-theme="light"] .brand i:not(.logo) { color: #fff; }
.pal { display: inline-flex; gap: 6px; align-items: center; padding: 0 6px; height: 32px; border-radius: 8px; }
.pal button { width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.pal button:hover { transform: scale(1.15); }
.pal button[aria-pressed="true"] { border-color: var(--t1); }