:root{
  --bg:#0b0e13; --panel:#141a22; --panel2:#1b232d; --line:#222b38;
  --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:
    radial-gradient(130% 70% at 50% -12%,
      rgba(57,197,207,.22) 0%, rgba(57,197,207,.07) 26%, transparent 55%),
    linear-gradient(180deg, #0c1118 0%, #080b11 45%, #05070b 100%);
  background-attachment:fixed;
  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-head{padding:28px 18px 14px}
.logo{font-size:30px;font-weight:800;letter-spacing:.5px}
.logo .a{color:var(--accent)}
.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,#171f29,#121821);
  border:1px solid var(--line);border-radius:16px;color:var(--txt);cursor:pointer}
.tile:active{border-color:var(--accent)}
.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:var(--accent);background:linear-gradient(180deg,#1f2c34,#172029)}
.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:var(--accent);color:#04222a}
.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:#04222a;background:var(--accent);border-color:var(--accent)}
.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:var(--accent);color:#04222a;font-size:16px;font-weight:800;cursor:pointer}
.go:disabled{opacity:.5}
.go.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.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 var(--accent);
  background:var(--panel);color:var(--accent);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.lst-toobit{background:rgba(57,197,207,.16);color:var(--accent)}
.pill.lst-edgex{background:rgba(176,122,208,.2);color:#c79ae0}
.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}

/* ── оверлеи (стакан / карточка) ── */
.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)}
.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:var(--accent);transform:translateY(-2px);
    box-shadow:0 0 0 1px rgba(57,197,207,.35), 0 10px 32px -12px rgba(57,197,207,.55)}
  .tile:hover .tile-arr{color:var(--accent);transform:translateX(2px)}
  .chip:hover:not(.on){border-color:var(--accent);color:var(--txt);
    box-shadow:0 0 0 1px rgba(57,197,207,.25)}
  .seg-btn:hover:not(.on){color:var(--txt);background-color:rgba(57,197,207,.09)}
  .tg:hover:not(.on){border-color:var(--accent);color:var(--txt)}
  .go:not(:disabled):not(.ghost):hover{filter:brightness(1.07);
    box-shadow:0 0 0 1px rgba(57,197,207,.5), 0 10px 28px -8px rgba(57,197,207,.6)}
  .go.ghost:hover{border-color:var(--accent);color:var(--accent);
    box-shadow:0 0 0 1px rgba(57,197,207,.3)}
  .row-item:hover{border-color:var(--accent);background-color:var(--panel2);
    box-shadow:0 0 0 1px rgba(57,197,207,.22)}
  .back:hover{filter:brightness(1.25)}
  .sel:hover{border-color:var(--accent)}
}
.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}
/* строки результатов слегка «вплывают» каскадом */
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.results .row-item,.results .sec,.results .idx-card{animation:rowIn .26s ease both}
@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)}

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