:root{
  --bg:#000; --panel:#16171a; --panel2:#1f2024; --line:#2a2a2e;
  --txt:#e8eef5; --muted:#8a98ab; --accent:#39C5CF;
  --green:#7CD992; --green-bar:rgba(124,217,146,.16);
  --red:#ff7a7a;   --red-bar:rgba(255,122,122,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:#000;
  color:var(--txt);
  font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

.screen{display:none;min-height:100vh}
.screen.on{display:block}
.pad{padding:12px}
.hidden{display:none !important}

/* ── главный экран ── */
#home{position:relative;overflow:hidden}
#rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#home .home-head,#home .tiles{position:relative;z-index:1}
.home-head{padding:28px 18px 14px}
.logo{font-size:30px;font-weight:800;letter-spacing:.5px}
.logo .a{color:#ff3b30}
.logo-sub{color:var(--muted);font-size:13px;margin-top:4px}
.tiles{padding:8px 14px;display:flex;flex-direction:column;gap:12px}
.tile{display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  padding:18px 16px;background:linear-gradient(180deg,#161719,#0e0e10);
  border:1px solid #2a2a2d;border-radius:16px;color:var(--txt);cursor:pointer}
.tile:active{border-color:#fff}
.tile-ic{font-size:30px;flex:none;width:46px;text-align:center}
.tile-t{font-size:17px;font-weight:700;margin-bottom:3px}
.tile-d{font-size:12px;color:var(--muted);line-height:1.45}
.tile-arr{font-size:26px;color:var(--muted);flex:none}

/* ── шапка раздела ── */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;
  background:var(--bg);padding:12px;border-bottom:1px solid var(--line)}
.bar-t{font-size:17px;font-weight:700}
.back{background:none;border:0;color:var(--accent);font-size:26px;line-height:1;
  font-weight:700;cursor:pointer;padding:0 6px 0 0;min-width:26px}

/* ── фильтры ── */
.lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;margin:12px 2px 6px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{flex:1;min-width:90px;padding:11px 8px;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);border-radius:12px;font-size:14px;
  font-weight:700;cursor:pointer}
.chip.on{color:#fff;border-color:rgba(255,255,255,.8);background:linear-gradient(180deg,#2a2b2f,#1a1b1e);
  box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 4px 14px -9px rgba(255,255,255,.3)}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin-top:10px}
.seg-btn{flex:1;padding:11px;background:transparent;border:0;color:var(--muted);
  font-size:14px;font-weight:700;cursor:pointer}
.seg-btn.on{background:linear-gradient(180deg,#e8ecef,#b9c2ca);color:#0b1015;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.nums{display:flex;gap:10px;margin-top:10px}
.nums label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.nums input,.sel{width:100%;padding:11px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;color:var(--txt);font-size:15px;font-weight:600}
.sel{margin-top:0}
.toggles{display:flex;gap:8px;margin-top:12px}
.tg{flex:1;padding:11px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);border-radius:12px;font-size:13px;font-weight:700;cursor:pointer}
.tg.on{color:#0b1015;background:linear-gradient(180deg,#e8ecef,#b9c2ca);border-color:rgba(255,255,255,.7);
  box-shadow:0 4px 14px -9px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.55)}
.hint{color:var(--muted);font-size:12px;margin:10px 2px 0;line-height:1.5}

.go{width:100%;margin-top:14px;padding:14px;border:0;border-radius:14px;
  background:linear-gradient(180deg,#e8ecef 0%,#b9c2ca 100%);color:#0b1015;
  font-size:16px;font-weight:800;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 6px 18px -12px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.55)}
.go:disabled{opacity:.5;box-shadow:none}
.go.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);box-shadow:none}
.lk-row{display:flex;gap:10px}
.lk-row .go{flex:1}

.status{margin:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;color:var(--muted);font-size:13px;white-space:pre-line}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;
  vertical-align:-2px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── результаты ── */
.results{padding:4px 12px 30px}
.summary{color:var(--muted);font-size:12px;margin:8px 2px 10px;line-height:1.6}
.sortbtn{display:block;margin:0 0 12px auto;padding:8px 14px;border:1px solid rgba(255,255,255,.55);
  background:var(--panel);color:#fff;border-radius:10px;font-size:13px;
  font-weight:700;cursor:pointer}
.sortbtn:active{background:var(--panel2)}
.summary b{color:var(--txt)}
.sec{margin-bottom:16px}
.sec-h{display:flex;gap:8px;font-size:15px;font-weight:700;margin:6px 2px 8px;
  padding-bottom:6px;border-bottom:1px solid var(--line)}
.sec-h .cnt{color:var(--muted);font-weight:600;font-size:12px}
.kind-h{font-size:11px;letter-spacing:.06em;color:var(--muted);font-weight:700;
  text-transform:uppercase;margin:10px 2px 6px}
.empty{color:var(--muted);text-align:center;padding:40px 10px}

.row-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:13px;margin-bottom:8px;cursor:pointer}
.row-item:active{background:var(--panel2)}
.row-item .b{font-weight:700;font-size:16px}
.row-item .r{text-align:right;font-size:12px;color:var(--muted)}
.row-item .liq{color:var(--txt);font-weight:700;font-size:14px}
.pill{font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;margin-left:7px;vertical-align:1px}
.pill.s{background:var(--green-bar);color:var(--green)}
.pill.f{background:rgba(57,197,207,.18);color:var(--accent)}
.pill.src{background:rgba(57,197,207,.16);color:var(--accent)}
.pill.rwa{background:rgba(176,122,208,.2);color:#c79ae0}
.pill.ver{background:rgba(255,180,84,.18);color:#ffb454}
.pill.ver-v2{background:rgba(99,206,128,.18);color:#63ce80}
.pill.stk{background:rgba(120,140,180,.18);color:#9fb0d0}
.pill.lst-toobit{background:rgba(57,197,207,.16);color:var(--accent)}
.pill.lst-edgex{background:rgba(176,122,208,.2);color:#c79ae0}
.pill.lst-var{background:rgba(255,180,84,.18);color:#ffb454}
.pill.lst-grvt{background:rgba(120,200,140,.18);color:#7fd39a}
.pill.lst-hl{background:rgba(151,252,228,.16);color:#97fce4}
.pill.lst-lighter{background:rgba(207,212,218,.16);color:#cfd4da}
.pill.lst-alphax{background:rgba(88,101,242,.18);color:#8b95f5}
/* гейт доступа (ввод ключа) */
.gate{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:#000;padding:24px}
.gate.hidden{display:none}
.gate-box{width:100%;max-width:340px;text-align:center}
.gate-lock{font-size:44px;line-height:1;margin-bottom:12px}
.gate-title{font-size:20px;font-weight:800;margin-bottom:6px}
.gate-sub{color:var(--muted);font-size:14px;line-height:1.4;margin-bottom:18px}
.gate #gateKey{text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.gate .go{width:100%}
.gate-msg{margin-top:14px;font-size:13px;color:#ff6b6b}
.gate-msg.hidden{display:none}
/* мини-лого биржи (favicon; при промахе — монограмма на фирменном цвете) */
.ex-logo{position:relative;display:inline-block;width:1.15em;height:1.15em;flex:none;
  vertical-align:-.22em;border-radius:50%;overflow:hidden;background:var(--b,#39C5CF);margin-right:.38em}
.ex-logo i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-weight:800;font-size:.6em;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.45)}
.ex-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.pill .ex-logo{width:1.3em;height:1.3em;margin-right:.28em;vertical-align:-.32em}
.trk-x{flex:none;background:transparent;border:1px solid var(--line);color:var(--muted);
  width:34px;height:34px;border-radius:9px;font-size:14px;cursor:pointer}
.trk-x:hover{border-color:var(--red);color:var(--red)}
.thin{color:#ffb454}
/* ── карточки бирж в «Где торгуется»: бренд-полоса + баннер при наведении ── */
.wh-row{position:relative;overflow:hidden;border-left:3px solid var(--b, var(--accent))}
.wh-row>.b,.wh-row>.r{position:relative;z-index:2}
.wh-row .wh-bg{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s ease;
  background:
    radial-gradient(120% 140% at 100% 50%, var(--b) -70%, rgba(12,13,16,0) 42%),
    linear-gradient(105deg, var(--b) -60%, rgba(11,12,15,.9) 38%, #0b0c0f 100%)}
.wh-row .wh-mark{position:absolute;z-index:1;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.92);opacity:0;pointer-events:none;white-space:nowrap;
  font-weight:900;font-size:28px;letter-spacing:.5px;text-transform:uppercase;
  background:linear-gradient(100deg, var(--b) 18%, #ffffff 46%, var(--b) 74%);
  background-size:260% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  transition:opacity .32s ease, transform .32s ease}
@keyframes whSheen{to{background-position:-140% 0}}
@media (hover:hover){
  .wh-row:hover{border-color:#fff;border-left-color:var(--b)}
  .wh-row:hover .wh-bg{opacity:.6}
  .wh-row:hover .wh-mark{opacity:.5;transform:translate(-50%,-50%) scale(1);
    animation:whSheen 2.2s linear infinite}
  .wh-row:hover .b{color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.9)}
  .wh-row:hover .r{text-shadow:0 1px 5px rgba(0,0,0,.9)}
}
.wh-row:active .wh-bg{opacity:1}      /* тач: баннер по нажатию */

/* бейдж скора уязвимости в радаре */
.score{display:inline-block;min-width:36px;text-align:center;font-weight:900;font-size:16px;
  padding:3px 9px;border-radius:10px;font-variant-numeric:tabular-nums}
.score.hi{background:rgba(255,90,90,.18);color:#ff8a8a;box-shadow:0 0 0 1px rgba(255,90,90,.35)}
.score.mid{background:rgba(255,180,84,.16);color:#ffb454}
.score.lo{background:rgba(150,160,175,.14);color:#aeb6c2}

/* ── оверлеи (стакан / карточка) ── */
.book{position:fixed;inset:0;z-index:20;background:var(--bg);display:flex;flex-direction:column}
.book-head{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line)}
.book-title{flex:1;font-weight:700;font-size:16px;text-align:center}
.book-head .open{color:var(--accent);text-decoration:none;font-size:20px;font-weight:700;min-width:24px;text-align:center}
.book-body{flex:1;display:flex;overflow:hidden}
.book-info{width:300px;flex:none;padding:14px;border-right:1px solid var(--line);
  overflow:auto;font-size:13px}
.book-info .ititle{font-size:13px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;margin:14px 0 6px}
.book-info .ititle:first-child{margin-top:0}
.book-info .irow{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--line)}
.book-info .ik{color:var(--muted)}
.book-info .iv{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.book-info .iv.green{color:var(--green)} .book-info .iv.red{color:var(--red)}
.book-info .iv.lo{color:#ffd23f}
.ladder-wrap{flex:1;overflow:auto;display:flex;justify-content:center}
@media (max-width:680px){
  .book-body{flex-direction:column}
  .book-info{width:auto;border-right:none;border-bottom:1px solid var(--line)}
}
.ladder{width:100%;max-width:440px;padding:4px 8px;font-variant-numeric:tabular-nums}

.lrow{position:relative;display:flex;justify-content:flex-end;align-items:center;
  gap:20px;padding:2px 12px;font-size:13px;line-height:1.5;border-radius:3px;margin:0;overflow:hidden}
.lrow .bar{position:absolute;top:0;bottom:0;right:0;z-index:0}
.lrow.ask .bar{background:var(--red-bar)}
.lrow.bid .bar{background:var(--green-bar)}
.lrow .sz,.lrow .px{position:relative;z-index:1}
.lrow .sz{color:var(--muted);text-align:right;min-width:56px}
/* подсветка мелкой ликвы (≤$6k) в карточках/списках */
.lo{color:#ffd23f;font-weight:700}
.warn{color:#ff3b3b;font-weight:900;margin-right:3px}
.lrow .px{min-width:92px;text-align:right}
.lrow.ask .px{color:var(--red);font-weight:600}
.lrow.bid .px{color:var(--green);font-weight:600}
.lrow.empty .px{color:#566173;font-weight:400}
.lmid{display:flex;justify-content:center;gap:10px;padding:9px;margin:5px 0;font-weight:800;
  color:var(--txt);background:var(--panel);border-radius:7px;border:1px solid var(--line)}
.book-empty{color:var(--muted);text-align:center;padding:30px}

/* ── карточка индекса ── */
.idx-card{width:100%;max-width:520px;padding:16px}
.idx-card .big{font-size:22px;font-weight:800;margin-bottom:4px}
.idx-card .sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.comp{display:flex;justify-content:space-between;padding:12px 14px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.comp .ex{font-weight:700}
.comp .w{color:var(--muted)}
.comp.lk{cursor:pointer}
.comp.lk .ex{color:var(--accent,#3aa0ff)}
.comp .lkarrow{margin-left:6px;font-size:12px;color:var(--muted);vertical-align:1px}
.kv{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:1px solid var(--line);font-size:14px}
.kv .k{color:var(--muted)}

/* ───────── интерактив: плавность + подсветка при наведении ───────── */
.tile,.chip,.seg-btn,.tg,.go,.row-item,.comp,.back,.sel{
  transition:border-color .18s ease, background-color .18s ease, color .18s ease,
    box-shadow .22s ease, transform .12s ease, filter .18s ease}

@media (hover:hover){
  .tile:hover{border-color:rgba(255,255,255,.75);transform:translateY(-2px);
    box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 10px 32px -12px rgba(255,255,255,.45)}
  .tile:hover .tile-arr{color:#fff;transform:translateX(2px)}
  .chip:hover:not(.on){border-color:rgba(255,255,255,.6);color:var(--txt);
    box-shadow:0 0 0 1px rgba(255,255,255,.25)}
  .seg-btn:hover:not(.on){color:var(--txt);background-color:rgba(255,255,255,.07)}
  .tg:hover:not(.on){border-color:rgba(255,255,255,.6);color:var(--txt)}
  .go:not(:disabled):not(.ghost):hover{filter:brightness(1.05);
    box-shadow:0 0 0 1px rgba(255,255,255,.3), 0 8px 22px -10px rgba(255,255,255,.3)}
  .go.ghost:hover{border-color:#fff;color:#fff;
    box-shadow:0 0 0 1px rgba(255,255,255,.3)}
  .row-item:hover{border-color:rgba(255,255,255,.55);background-color:var(--panel2);
    box-shadow:0 0 0 1px rgba(255,255,255,.22)}
  .back:hover{filter:brightness(1.25)}
  .sel:hover{border-color:rgba(255,255,255,.6)}
}
.tile:active{transform:translateY(0)}
.go:not(:disabled):active{transform:translateY(1px)}
.row-item:active{transform:scale(.995)}

/* ───────── анимации переходов между разделами ───────── */
@keyframes screenIn{
  from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(2px)}
  to{opacity:1;transform:none;filter:blur(0)}}
@keyframes screenOut{
  from{opacity:1;transform:none;filter:blur(0)}
  to{opacity:0;transform:translateY(-10px) scale(.99);filter:blur(2px)}}
.screen.on{animation:screenIn .34s cubic-bezier(.22,.68,.32,1) both}
.screen.leaving{display:block!important;animation:screenOut .16s ease-in both;pointer-events:none}
/* строки результатов «вплывают» каскадом: JS проставляет --i каждому элементу.
   fill-mode backwards (не both) — чтобы после анимации работали hover/active transform */
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.results .row-item,.results .sec,.results .idx-card,.results .summary,.results .sortbtn{
  animation:rowIn .3s cubic-bezier(.22,.68,.32,1) backwards;
  animation-delay:calc(min(var(--i,0),18)*26ms)}
@keyframes overlayIn{from{opacity:0;transform:translateY(14px) scale(.992)}to{opacity:1;transform:none}}
.book:not(.hidden){animation:overlayIn .26s cubic-bezier(.2,.7,.3,1)}

/* ── скелетон-строки на время скана (вместо пустого экрана) ── */
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.skel-row{height:58px;border-radius:13px;margin-bottom:8px;border:1px solid var(--line);
  background:linear-gradient(100deg,var(--panel) 38%,#202b37 50%,var(--panel) 62%);
  background-size:200% 100%;
  animation:shimmer 1.25s linear infinite, rowIn .3s ease backwards;
  animation-delay:calc(var(--i,0)*120ms), calc(var(--i,0)*50ms)}

/* ── бегущая полоска «идёт работа» под текстом статуса ── */
.status .pbar{position:relative;height:3px;margin-top:10px;border-radius:3px;
  background:var(--line);overflow:hidden}
.status .pbar::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:38%;
  border-radius:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:pslide 1.15s ease-in-out infinite}
@keyframes pslide{to{left:102%}}

/* ── главный экран: шапка и плитки вплывают каскадом ── */
@keyframes tileIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
#home .home-head{animation:tileIn .4s cubic-bezier(.22,.68,.32,1) backwards}
#home .tile{animation:tileIn .45s cubic-bezier(.22,.68,.32,1) backwards}
#home .tile:nth-child(1){animation-delay:.06s}
#home .tile:nth-child(2){animation-delay:.12s}
#home .tile:nth-child(3){animation-delay:.18s}
#home .tile:nth-child(4){animation-delay:.24s}
#home .tile:nth-child(5){animation-delay:.30s}

/* 👀 рисованные глаза: зрачки живут своей жизнью, веки моргают */
.logo .eyes{display:inline-flex;gap:3px;margin-left:9px;vertical-align:-2px}
.logo .eye{position:relative;display:inline-block;width:14px;height:21px;
  background:linear-gradient(180deg,#f8f4fb 0%,#dcd4e5 100%);
  border-radius:48%;overflow:hidden;
  box-shadow:inset 0 -2px 3px rgba(70,55,90,.28)}
.logo .pupil{position:absolute;top:5px;left:3px;width:8px;height:11px;border-radius:50%;
  background:#544361;will-change:transform;
  animation:pupilLook 8s cubic-bezier(.45,.05,.35,1) infinite}
.logo .pupil::after{content:"";position:absolute;top:1.5px;left:1.5px;width:3px;height:3px;
  border-radius:50%;background:rgba(255,255,255,.9)}
@keyframes pupilLook{
  0%,12%  {transform:translateX(-2.5px)}            /* смотрят влево, пауза */
  20%,38% {transform:translateX(2.5px)}             /* плавно перевели вправо */
  46%,58% {transform:translateX(-2.5px)}            /* обратно влево */
  64%,70% {transform:translate(2.5px,-2px)}         /* взгляд вверх-вправо */
  76%,88% {transform:translate(-2.5px,0)}           /* вернулись */
  100%    {transform:translateX(-2.5px)}
}
/* веко опускается — короткое моргание дважды за цикл */
.logo .eye::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:#000;
  transform:translateY(-102%);animation:eyeBlink 8s ease-in-out infinite}
@keyframes eyeBlink{
  0%,41%,45%,73.5%,77.5%,100%{transform:translateY(-102%)}
  43%,75.5%{transform:translateY(0)}
}

/* блик, пробегающий по акценту логотипа */
.logo .a{background:linear-gradient(90deg,#ff3b30 20%,#ff9a90 40%,#ff3b30 60%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:sheen 3.6s linear infinite}
@keyframes sheen{to{background-position:-250% 0}}

/* «!» у мелкой ликвы мягко пульсирует */
@keyframes wpulse{0%,100%{opacity:1}50%{opacity:.35}}
.warn{animation:wpulse 1.5s ease-in-out infinite}

/* пружинка при включении чипа / тогла / сегмента */
@keyframes pop{0%{transform:scale(.94)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
.chip.on,.tg.on,.seg-btn.on{animation:pop .24s ease}

/* бары стакана растут от цены волной от mid (JS проставляет --i) */
.lrow .bar{transform-origin:right;animation:barGrow .5s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay:calc(min(var(--i,0),40)*14ms)}
@keyframes barGrow{from{transform:scaleX(0)}}
.lmid{animation:rowIn .3s ease backwards}

@media (prefers-reduced-motion:reduce){
  *,.screen.on,.book:not(.hidden),.results .row-item{animation:none!important;transition:none!important}
}