:root {
    --bg: #0a0d16; --card: #121728; --card2: #171d33;
    /* Цвет несёт смысл, а не украшает: cyan — единственный акцент приложения,
       gold — только PRO, подписка и партнёрский бонус, ok/warn — только результат.
       Прежние magenta и violet убраны: четыре акцента на одном экране не давали иерархии. */
    --neon: #00e5ff; --gold: #ffc93c;
    --text: #e6f1ff; --muted: #8ba3c7; --ok: #00e676; --warn: #ff5252;
    --radius: 18px;
  }
  /* ---------- иконки ----------
     Штриховая система используется в интерфейсе, эмодзи остаются на карточках
     прогнозов. Инлайновый спрайт (#icon-sprite) масштабируется от font-size и
     наследует currentColor, поэтому ведёт себя как обычный глиф и работает
     в существующих font-size-хуках. */
  .ic {
    width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.14em;
    fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
  }
  /* У части иконок есть залитые точки (центр мишени, кнопки геймпада): у SVG
     атрибут fill слабее любого CSS-правила, поэтому .ic{fill:none} стирал их.
     Возвращаем заливку точечно по атрибуту. */
  .ic [fill="currentColor"] { fill: currentColor; }
  /* У иконок своя нижняя граница размера — 14px. Текст может быть 11px, но
     штриховая иконка на 11–12px превращается в серое пятно: проверено по
     пикселям кадра, а не на глаз. Здесь иконка наследует кегль мелкой подписи,
     поэтому размер задаём явно; заодно чуть плотнее обводка в этих контекстах. */
  .stat .l .ic, .sg .l .ic, .h-item .o .ic, .ecosystem h4 .ic,
  .streak .l .ic, .section-title .ic, .verdict .ic,
  .p-top .sport .ic, .ai-tag .ic, .value-badge .ic, .soon-tag .ic,
  .time-chip .ic, .mybet-btn .ic, .bet-btn .ic, .swipe-hint .ic,
  .h-item .m .s .ic, .f-btn .ic, .sf-btn .ic, .cmp .t .ic,
  .botd-h .ic, .botd-lock .ic, .botd-leg > span:first-child .ic {
    font-size:14px;
    stroke-width:2.4;
  }
  /* Числа — главный герой продукта: табличные цифры, чтобы коэффициенты и проценты
     не «прыгали» при обновлении значений. */
  .stat .v, .sg .v, .vh-prob, .cmp .r, .streak .v, .h-item .o, .botd-sum .o,
  .botd-leg .lg-o, .promo-box .code b, .line-chip b, .mm-prob {
    font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1;
  }
  /* Кегль: 11px — нижняя граница, мельче на телефоне не читается. Все значения
     ниже подняты до неё по всему интерфейсу (было 8–10.5px). */
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html, body { height:100%; }
  /* [hidden] должен побеждать авторские display:flex — иначе пустые плашки
     (collect-chip, fresh-chip, botd-card) остаются на экране, хотя скрыты в JS */
  [hidden] { display:none !important; }
  body {
    background: var(--bg); color: var(--text);
    font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    padding-bottom: 78px; overscroll-behavior: none;
    user-select: none;
  }

  /* ---------- header ---------- */
  .header {
    position: sticky; top:0; z-index:10;
    background: linear-gradient(180deg, #0a0d16 78%, transparent);
    padding: 14px 16px 10px; backdrop-filter: blur(8px);
  }
  .brand { display:flex; align-items:center; gap:10px; }
  .logo {
    width:38px; height:38px; border-radius:12px; flex:none;
    background: linear-gradient(135deg, #0e2a3a, #0a0d16);
    border:1px solid rgba(0,229,255,.45);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 0 14px rgba(0,229,255,.22);
  }
  .logo svg { display:block; width:30px; height:30px; overflow:visible; }
  .logo-frame { fill:none; stroke:rgba(0,229,255,.58); stroke-width:1.3; stroke-linejoin:round; }
  .logo-mark { fill:none; stroke:var(--neon); stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 2px rgba(0,229,255,.5)); }
  .brand h1 { font-size:14.5px; letter-spacing:.03em; white-space:nowrap; }
  .brand h1 b { color: var(--neon); }
  .brand small { display:block; font-size:11px; color:var(--muted); font-weight:400; }
  .sub-badge {
    margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.08em;
    padding:5px 10px; border-radius:20px; text-transform:uppercase;
  }
  .sub-badge.free { color:#9fb3d4; background:rgba(139,163,199,.12); border:1px solid rgba(139,163,199,.3); }
  .sub-badge.pro  { color:#0a0d16; background:linear-gradient(135deg,var(--gold),#ffb01f); }

  /* ---------- AI disclaimer ---------- */
  .ai-disclaimer {
    margin: 10px 16px 0; padding: 9px 12px;
    background: rgba(255,82,82,.07);
    border: 1px solid rgba(255,82,82,.35); border-radius: 12px;
    font-size: 11px; line-height: 1.45; color: #ffb3b3;
    display: flex; gap: 8px; align-items: flex-start;
  }
  .ai-disclaimer .ico { flex:none; font-size:14px; line-height:1.2; }
  .ai-disclaimer b { color:#ff7b7b; }

  /* ---------- AI thinking ---------- */
  .ai-loading {
    margin: 14px 16px 6px; padding: 16px;
    background: var(--card); border-radius: var(--radius);
    border: 1px solid rgba(0,229,255,.15);
    display:flex; align-items:center; gap:12px;
  }
  .ai-loading .bot { font-size:26px; color:var(--neon); display:flex; }
  .ai-loading .txt { font-size:13px; color:var(--muted); }
  .ai-loading .txt b { color:var(--neon); }
  .dots span {
    display:inline-block; width:5px; height:5px; margin-left:3px;
    border-radius:50%; background:var(--neon); animation: dot 1.2s infinite;
  }
  .dots span:nth-child(2) { animation-delay:.15s; }
  .dots span:nth-child(3) { animation-delay:.3s; }
  @keyframes dot { 0%,60%,100% { opacity:.25; transform:translateY(0);} 30% { opacity:1; transform:translateY(-4px);} }

  /* ---------- mini stats ---------- */
  .stats { display:flex; gap:10px; padding: 12px 16px 2px; }
  .stat {
    flex:1; background:var(--card); border-radius:14px; padding:9px 11px;
    border:1px solid rgba(0,229,255,.12); text-align:center;
  }
  .stat .v { font-size:18px; font-weight:800; color:var(--neon); }
  .stat .l { font-size:11px; color:var(--muted); margin-top:2px; letter-spacing:.03em; }

  /* ---------- swipe deck (app-like) ---------- */
  .deck-wrap { padding: 6px 16px 0; }
  .deck { position:relative; overflow:hidden; border-radius:var(--radius); }
  .deck-track {
    display:flex; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .deck-track::-webkit-scrollbar { display:none; }
  .slide { min-width:100%; padding: 0 1px; scroll-snap-align: start; scroll-snap-stop: always; }
  .p-card {
    background: var(--card); border-radius: var(--radius);
    border: 1px solid rgba(0,229,255,.16);
    overflow:hidden; position:relative;
    box-shadow: 0 8px 26px rgba(0,0,0,.4);
    height: 100%;
  }
  .p-card.pro-card { border-color: rgba(255,201,60,.35); }
  /* неоновая верхняя кромка */
  .p-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
    background: linear-gradient(90deg, var(--neon), rgba(0,229,255,0) 70%);
    opacity:.9;
  }
  .pro-card::before { background: linear-gradient(90deg, var(--gold), rgba(255,201,60,0) 70%); }
  /* водяной знак вида спорта */
  /* Эмодзи, а не штриховая иконка: у глифа есть собственный цвет, форма и
     объём, из-за чего фон читается как «3D-наклейка», а не как контур.
     Штриховая иконка одним цветом сливалась с неоновой рамкой карточки.
     Размер задаётся font-size (глиф масштабируется сам), currentColor
     подставляется, но эмодзи его игнорирует — поэтому цвет не приписываем. */
  .wm {
    position:absolute; right:-14px; bottom:-24px; font-size:104px;
    line-height:1; opacity:.16; pointer-events:none; user-select:none; z-index:0;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    filter: saturate(.9);
  }
  .pro-card .wm { opacity:.2; }
  /* Водяной знак — позиционированный слой, а контент карточки идёт в потоке:
     без этого эмодзи рисовалось ПОВЕРХ текста разбора (позиционированные
     элементы красятся после потока). Поднимаем контент над знаком. */
  .p-card > .blur { position:relative; z-index:1; }
  .p-top {
    display:flex; align-items:center; gap:8px;
    padding:11px 14px; font-size:11px; color:var(--muted);
    background: rgba(0,229,255,.05); border-bottom:1px solid rgba(0,229,255,.08);
  }
  .pro-card .p-top { background: rgba(255,255,255,.025); border-bottom-color: rgba(255,201,60,.16); }
  .p-top .sport { display:inline-flex; align-items:center; font-size:16px; line-height:1; color:var(--neon); }
  .pro-card .p-top .sport { color:var(--gold); }
  .ai-tag {
    margin-left:auto; display:flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; letter-spacing:.08em;
    color:#9fb3d4; background:rgba(139,163,199,.1);
    padding:3px 8px; border-radius:12px; border:1px solid rgba(139,163,199,.28);
  }
  .ai-tag.pro { color:var(--gold); background:rgba(255,201,60,.09); border-color:rgba(255,201,60,.38); }
  .soon-tag {
    display:inline-flex; align-items:center; gap:4px;
    font-size:11px; font-weight:700; color:#ff8d8d;
    background:rgba(255,82,82,.1); border:1px solid rgba(255,82,82,.4);
    padding:3px 8px; border-radius:12px; white-space:nowrap;
  }
  .rel-tag {
    font-size:11px; font-weight:700; color:var(--muted);
    background:rgba(139,163,199,.1); border:1px solid rgba(139,163,199,.28);
    padding:3px 8px; border-radius:12px; white-space:nowrap;
  }
  .p-body { padding: 16px 14px 4px; text-align:center; position:relative; z-index:1; }
  .teams { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:13px; }
  .team { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; }
  .badge {
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:17px; color:#eaf6ff;
    background: radial-gradient(circle at 30% 25%, #24405f, #101a2c);
    border:1.5px solid rgba(0,229,255,.35);
    box-shadow: 0 0 14px rgba(0,229,255,.18), inset 0 0 10px rgba(0,229,255,.12);
  }
  .badge img { width:100%; height:100%; padding:5px; object-fit:contain; }
  .badge span { font-size:23px; line-height:1; }
  .team:last-child .badge {
    border-color: rgba(255,43,214,.35);
    box-shadow: 0 0 14px rgba(255,43,214,.15), inset 0 0 10px rgba(255,43,214,.1);
  }
  .tname { font-size:12.5px; font-weight:700; color:var(--text); line-height:1.2; max-width:112px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .vs-badge {
    flex:none; width:38px; height:38px; border-radius:50%;
    background:rgba(139,163,199,.1); border:1px solid rgba(139,163,199,.28);
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; color:var(--muted); letter-spacing:.05em;
  }
  .time-chip {
    display:inline-flex; align-items:center; gap:6px; margin-top:13px;
    padding:5px 13px; border-radius:20px; font-size:11px; color:var(--muted);
    background:rgba(0,229,255,.06); border:1px solid rgba(0,229,255,.18);
  }
  .pro-card .time-chip { background:rgba(255,201,60,.07); border-color:rgba(255,201,60,.22); }
  /* ---------- HERO-вердикт: рынок и вероятность в одном блоке со скосом ---------- */
  /* Отдельная рамка со срезанным углом — «киберпанк» без фоновых сеток.
     Неон для FREE, золото для PRO — как кант карточки. */
  .verdict-hero {
    position:relative; margin:14px 16px 0; padding:14px 15px 12px; z-index:1;
    background: linear-gradient(135deg, rgba(0,229,255,.10), rgba(0,229,255,.03));
    border:1px solid rgba(0,229,255,.34);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    box-shadow: 0 0 22px rgba(0,229,255,.10), inset 0 0 18px rgba(0,229,255,.05);
    overflow:hidden; /* пробежка свечения не должна расширять блок */
  }
  .pro-card .verdict-hero {
    background: linear-gradient(135deg, rgba(255,201,60,.12), rgba(255,201,60,.03));
    border-color: rgba(255,201,60,.42);
    box-shadow: 0 0 22px rgba(255,201,60,.12), inset 0 0 18px rgba(255,201,60,.05);
  }
  .vh-label {
    font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); font-weight:700;
  }
  .pro-card .vh-label { color:rgba(255,201,60,.85); }
  .vh-main { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:5px; }
  .vh-market { font-size:22px; font-weight:900; color:var(--neon); letter-spacing:.01em; line-height:1.1; text-shadow:0 0 14px rgba(0,229,255,.35); }
  .pro-card .vh-market { color:var(--gold); text-shadow:0 0 14px rgba(255,201,60,.35); }
  .vh-prob {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size:26px; font-weight:800; color:var(--text); flex:none;
  }
  .vh-bar { position:relative; height:6px; border-radius:5px; background:rgba(139,163,199,.15); overflow:hidden; margin-top:11px; }
  .vh-bar i {
    display:block; height:100%; width:0; border-radius:5px;
    background: linear-gradient(90deg, #0090b3, var(--neon));
    box-shadow: 0 0 10px rgba(0,229,255,.55);
    transition: width 1.1s cubic-bezier(.22,1,.36,1);
  }
  .pro-card .vh-bar i { background:linear-gradient(90deg,var(--gold),#ffe08a); box-shadow:0 0 10px rgba(255,201,60,.6); }
  /* свечение-пробежка по hero один раз при появлении карточки, затем статика */
  .verdict-hero::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
    transform: translateX(-120%); animation: vhSweep .75s ease-out .25s 1 both;
  }
  .pro-card .verdict-hero::after { background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.2) 50%, transparent 65%); }
  @keyframes vhSweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
  /* плейсхолдеры заблокированного hero — той же геометрии, что реальный блок */
  .locked-hero { background:rgba(139,163,199,.07); border-color:rgba(139,163,199,.16); box-shadow:none; }
  .locked-hero::after { animation:none; }
  .vh-ph-market { height:22px; width:46%; }
  .vh-ph-prob { height:24px; width:64px; }
  /* плейсхолдеры в hero идут в одну строку — сбрасываем общий .blur-отступ
     (правило ниже по файлу, поэтому селектор специфичнее) */
  .verdict-hero .vh-main .lock-ph + .lock-ph { margin-top:0; }
  /* ---------- доп. рынки: свёрнуты, чтобы не спорить с вердиктом ---------- */
  .more-markets { margin:10px 0 0; }
  .more-markets > summary {
    cursor:pointer; list-style:none; font-size:11.5px; font-weight:700;
    color:var(--muted); padding:8px 12px; border-radius:11px;
    background:rgba(139,163,199,.07); border:1px solid rgba(139,163,199,.16);
    display:flex; align-items:center; gap:7px;
  }
  .more-markets > summary::-webkit-details-marker { display:none; }
  .more-markets > summary::before { content:'＋'; color:var(--neon); font-weight:900; }
  .more-markets[open] > summary::before { content:'−'; }
  .pro-card .more-markets > summary::before { color:var(--gold); }
  .mm-list { padding:6px 0 0; }
  .mm-row {
    display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px;
    background:var(--card2); margin-top:6px; font-size:12px;
  }
  .mm-row .mm-name { flex:1; min-width:0; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mm-row .mm-prob { font-weight:800; color:var(--neon); }
  .pro-card .mm-row .mm-prob { color:var(--gold); }
  .mm-row .mm-odds { color:var(--muted); font-size:11px; }
  /* value-бейдж: модельная вероятность заметно выше линии */
  .value-badge {
    display:inline-flex; align-items:center; gap:4px; margin-left:auto;
    font-size:11px; font-weight:800; letter-spacing:.05em;
    color:#0a0d16; background:linear-gradient(135deg,#7bffb0,#00e676);
    padding:3px 8px; border-radius:10px;
  }
  .line-chip {
    display:flex; align-items:center; gap:8px; justify-content:space-between;
    margin:10px 16px 0; padding:8px 12px; border-radius:11px;
    background:rgba(139,163,199,.07); border:1px solid rgba(139,163,199,.16);
    font-size:11.5px; color:var(--muted);
  }
  .line-chip b { color:var(--text); }
  .line-chip .edge.up { color:var(--ok); font-weight:800; }
  .line-chip .edge.down { color:var(--warn); font-weight:800; }
  /* фильтр по видам спорта */
  .sport-filter { display:flex; gap:7px; overflow-x:auto; padding:8px 16px 0; scrollbar-width:none; }
  .sport-filter::-webkit-scrollbar { display:none; }
  .sf-btn {
    flex:none; display:inline-flex; align-items:center; gap:5px;
    padding:6px 13px; border-radius:20px; cursor:pointer;
    background:rgba(139,163,199,.1); border:1px solid rgba(139,163,199,.2);
    color:var(--muted); font-size:11px; font-weight:700; white-space:nowrap;
  }
  .sf-btn.on { border-color:var(--neon); color:var(--neon); background:rgba(0,229,255,.1); }
  .ai-note {
    margin: 4px 14px 14px; padding: 10px 12px;
    background: rgba(139,163,199,.06); border-radius:11px;
    border-left: 2px solid rgba(0,229,255,.45);
    font-size:12px; line-height:1.5; color:#cfd8f5; text-align:left;
  }
  .pro-card .ai-note { border-left-color:rgba(255,201,60,.55); background:rgba(255,201,60,.05); }
  .ai-note b { color:var(--text); font-weight:800; }
  .pro-card .ai-note b { color:var(--gold); }
  .res-chip {
    position:absolute; top:44px; right:12px; font-size:11px; font-weight:800;
    padding:4px 9px; border-radius:12px; letter-spacing:.05em; z-index:3;
  }
  .res-chip.hit  { color:var(--ok); background:rgba(0,230,118,.12); border:1px solid rgba(0,230,118,.4); }
  .res-chip.miss { color:var(--warn); background:rgba(255,82,82,.1); border:1px solid rgba(255,82,82,.4); }
  .res-chip.push { color:var(--gold); background:rgba(255,201,60,.1); border:1px solid rgba(255,201,60,.4); }

  /* Arcade Clash: контрастная пара cyan/magenta с мягкой живой подсветкой.
     PRO сохраняет золото, а движение карточки не смещает сам контент. */
  .p-card {
    border-radius:22px;
    border-color:rgba(102,111,190,.42);
    background:linear-gradient(150deg,#15182b 0%,#101522 48%,#0d131e 100%);
    box-shadow:0 10px 30px rgba(0,0,0,.42),0 0 20px rgba(0,229,255,.055);
    animation:clashPulse 5.5s ease-in-out infinite;
  }
  .p-card::before {
    height:2px;
    background:linear-gradient(90deg,transparent 0%,var(--neon) 24%,#9e72ff 52%,#ff39c6 78%,transparent 100%);
    background-size:220% 100%;
    animation:clashSweep 8s linear infinite;
  }
  .p-card.pro-card {
    border-color:rgba(255,201,60,.4);
    box-shadow:0 10px 30px rgba(0,0,0,.42),0 0 18px rgba(255,201,60,.07);
    animation-name:clashProPulse;
  }
  .pro-card::before {
    background:linear-gradient(90deg,transparent 0%,rgba(255,201,60,.25) 18%,var(--gold) 48%,#fff0ae 68%,rgba(255,201,60,.25) 84%,transparent 100%);
  }
  .p-top {
    background:linear-gradient(100deg,rgba(0,229,255,.08),rgba(117,69,160,.05) 52%,rgba(255,57,198,.07));
    border-bottom-color:rgba(143,112,200,.2);
  }
  .pro-card .p-top {
    background:linear-gradient(100deg,rgba(255,201,60,.08),rgba(255,255,255,.025) 55%,rgba(255,201,60,.04));
    border-bottom-color:rgba(255,201,60,.2);
  }
  .badge {
    border-radius:16px 7px 16px 7px;
    background:linear-gradient(145deg,rgba(0,229,255,.18),#111827 76%);
    border-color:rgba(0,229,255,.55);
    box-shadow:0 0 16px rgba(0,229,255,.13),inset 0 0 12px rgba(0,229,255,.08);
  }
  .team:last-child .badge {
    border-radius:7px 16px 7px 16px;
    background:linear-gradient(145deg,rgba(255,57,198,.17),#171321 76%);
    border-color:rgba(255,57,198,.55);
    box-shadow:0 0 16px rgba(255,57,198,.13),inset 0 0 12px rgba(255,57,198,.08);
  }
  .vs-badge {
    border-color:rgba(187,132,220,.36);
    background:linear-gradient(145deg,rgba(0,229,255,.08),rgba(255,57,198,.09));
    color:#e4dafa;
    box-shadow:0 0 14px rgba(180,105,219,.1);
  }
  .pro-card .badge,.pro-card .team:last-child .badge {
    border-radius:14px;
    border-color:rgba(255,201,60,.4);
    box-shadow:0 0 14px rgba(255,201,60,.1),inset 0 0 10px rgba(255,201,60,.06);
  }
  .pro-card .vs-badge { border-color:rgba(255,201,60,.3); color:var(--gold); }
  .time-chip {
    background:linear-gradient(90deg,rgba(0,229,255,.08),rgba(255,57,198,.06));
    border-color:rgba(164,122,213,.27);
  }
  .verdict-hero {
    border-radius:16px 5px 16px 5px;
    background:linear-gradient(105deg,rgba(0,229,255,.12),rgba(92,63,143,.09) 55%,rgba(255,57,198,.09));
    border-color:rgba(131,139,222,.5);
    box-shadow:0 0 20px rgba(0,229,255,.08),inset 0 0 20px rgba(255,57,198,.035);
  }
  .pro-card .verdict-hero {
    border-radius:16px 5px 16px 5px;
    background:linear-gradient(110deg,rgba(255,201,60,.13),rgba(114,73,129,.05) 65%);
    border-color:rgba(255,201,60,.48);
    box-shadow:0 0 20px rgba(255,201,60,.09),inset 0 0 18px rgba(255,201,60,.035);
  }
  .more-markets > summary {
    border-color:rgba(153,113,199,.24);
    background:linear-gradient(100deg,rgba(0,229,255,.055),rgba(255,57,198,.045));
  }
  .line-chip { border-color:rgba(151,117,194,.22); }
  .ai-note { border-left-color:rgba(0,229,255,.58); background:linear-gradient(100deg,rgba(0,229,255,.055),rgba(255,57,198,.035)); }
  .pro-card .ai-note { border-left-color:rgba(255,201,60,.65); background:rgba(255,201,60,.045); }
  @keyframes clashPulse {
    0%,100% { box-shadow:0 10px 30px rgba(0,0,0,.42),0 0 16px rgba(0,229,255,.045),0 0 8px rgba(255,57,198,.025); }
    50% { box-shadow:0 12px 34px rgba(0,0,0,.46),0 0 25px rgba(0,229,255,.105),0 0 17px rgba(255,57,198,.07); }
  }
  @keyframes clashProPulse {
    0%,100% { box-shadow:0 10px 30px rgba(0,0,0,.42),0 0 14px rgba(255,201,60,.05); }
    50% { box-shadow:0 12px 34px rgba(0,0,0,.46),0 0 23px rgba(255,201,60,.13); }
  }
  @keyframes clashSweep { from { background-position:100% 0; } to { background-position:-120% 0; } }

  /* ---------- «Поставил» — личный трекер ставок (localStorage) ---------- */
  .mybet-btn {
    display:inline-block; margin:2px 4px 12px; padding:7px 12px;
    border:1px dashed rgba(0,229,255,.35); border-radius:12px; background:transparent;
    color:var(--muted); font-size:11.5px; font-weight:700; cursor:pointer; transition:all .2s;
  }
  .mybet-btn:active { transform:scale(.96); }
  .mybet-btn.on { border-style:solid; border-color:var(--ok); color:var(--ok); background:rgba(0,230,118,.08); }
  /* ---------- «собираем данные» ---------- */
  .collect-chip {
    margin:8px 16px 0; padding:7px 12px; border-radius:11px;
    background:rgba(255,201,60,.06); border:1px solid rgba(255,201,60,.22);
    font-size:11px; color:var(--muted); display:flex; align-items:center; gap:8px;
  }
  .collect-chip b { color:var(--gold); font-weight:800; }
  .collect-chip .pulse {
    width:7px; height:7px; border-radius:50%; background:var(--gold);
    box-shadow:0 0 8px rgba(255,201,60,.7); flex:none;
  }
  /* ---------- «Ставка дня» (PRO) ---------- */
  .botd-card {
    margin:10px 16px 0; padding:14px; border-radius:14px; position:relative; overflow:hidden;
    background:linear-gradient(135deg, rgba(255,201,60,.09), rgba(255,201,60,.03));
    border:1px solid rgba(255,201,60,.3);
  }
  .botd-card .botd-h { font-size:12px; font-weight:900; letter-spacing:.06em; color:var(--gold); display:flex; align-items:center; gap:6px; }
  .botd-legs { margin-top:9px; display:flex; flex-direction:column; gap:6px; }
  .botd-leg {
    display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px;
    background:rgba(10,13,22,.55); border:1px solid rgba(255,201,60,.16); font-size:11.5px;
  }
  .botd-leg > span:first-child { display:flex; color:var(--muted); }

  .botd-leg .lg-m { color:var(--text); font-weight:800; flex:1; }
  .botd-leg .lg-o { color:var(--gold); font-weight:800; }
  .botd-leg .lg-p { color:var(--muted); font-size:11px; }
  .botd-sum { margin-top:9px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .botd-sum .o { font-size:20px; font-weight:900; color:var(--gold); }
  .botd-sum .d { font-size:11px; color:var(--muted); }
  .botd-lock { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:6px;
    background:rgba(10,13,22,.72); backdrop-filter:blur(3px); color:var(--gold); font-size:12px; font-weight:800; z-index:2; }
  /* ---------- мои ставки: профиль ---------- */
  .bet-stake-row {
    margin:8px 16px 0; padding:9px 12px; border-radius:11px;
    background:rgba(139,163,199,.07); border:1px solid rgba(139,163,199,.16);
    font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:8px;
  }
  .bet-stake-row input {
    width:74px; padding:5px 8px; border-radius:8px; border:1px solid rgba(0,229,255,.3);
    background:rgba(10,13,22,.6); color:var(--text); font-size:12.5px; font-weight:800; text-align:center;
  }
  .val-note {
    margin:6px 16px 0; padding:8px 12px; border-radius:11px;
    background:rgba(255,123,123,.06); border:1px solid rgba(255,123,123,.22);
    font-size:11px; line-height:1.45; color:var(--muted);
  }
  .val-note b { color:#ff9b9b; }
  .bStreak { margin:6px 16px 0; font-size:11.5px; color:var(--muted); }
  .bStreak b { color:var(--neon); }

  /* ---------- fresh chip: таймер до следующего обновления ---------- */
  .fresh-chip {
    margin: 10px 16px 0; padding: 7px 12px;
    background: rgba(0,229,255,.06); border: 1px solid rgba(0,229,255,.18);
    border-radius: 11px; font-size: 11px; color: var(--muted);
    display: flex; align-items: center; gap: 8px;
  }
  .fresh-chip b { color: var(--neon); font-weight: 800; }
  .fresh-chip .pulse {
    width: 7px; height: 7px; border-radius: 50%; background: var(--neon);
    box-shadow: 0 0 8px rgba(0,229,255,.7); flex: none;
  }

  /* ---------- скелетоны карточек при загрузке ---------- */
  @keyframes skPulse { 0%,100% { opacity:.35; } 50% { opacity:.75; } }
  .sk-slide { min-width:100%; padding:0 1px; scroll-snap-align:start; scroll-snap-stop:always; }
  .sk-card {
    border-radius: var(--radius); background: var(--card);
    border: 1px solid rgba(139,163,199,.12); padding: 20px 18px; position: relative; overflow: hidden;
  }
  .sk-line {
    height: 12px; border-radius: 6px; margin-bottom: 12px;
    background: rgba(139,163,199,.14); animation: skPulse 1.4s ease-in-out infinite;
  }
  .sk-line.w40 { width:40%; } .sk-line.w60 { width:60%; }
  .sk-line.w80 { width:80%; } .sk-line.w100 { width:100%; }
  .sk-teams { display:flex; align-items:center; justify-content:center; gap:18px; margin: 16px 0; }
  .sk-badge {
    width:44px; height:44px; border-radius:50%;
    background: rgba(139,163,199,.14); animation: skPulse 1.4s ease-in-out infinite;
  }
  .sk-vs { font-size:11px; color:var(--muted); font-weight:800; }
  .sk-bar { height:7px; border-radius:6px; background:rgba(139,163,199,.14); margin-top:18px; animation: skPulse 1.4s ease-in-out infinite; }

  /* (конфетти убрано) */

  /* ---------- онбординг ---------- */
  .ob-icon { text-align:center; font-size:44px; margin: 4px 0 10px; color:var(--neon); }
  .ob-title { font-size:16px; text-align:center; font-weight:800; margin-bottom:7px; }
  .ob-txt { font-size:12.5px; color:var(--muted); line-height:1.55; text-align:center; min-height: 58px; }
  .ob-dots { display:flex; gap:6px; justify-content:center; margin: 14px 0 14px; }
  .ob-dot { width:6px; height:6px; border-radius:4px; background:rgba(139,163,199,.3); transition: all .25s; }
  .ob-dot.on { width:18px; background:var(--neon); box-shadow:0 0 8px rgba(0,229,255,.6); }
  .ob-skip {
    display:block; margin: 12px auto 0; background:none; border:none;
    color:#5f7396; font-size:11.5px; cursor:pointer; letter-spacing:.04em;
  }

  /* swipe dots */
  .deck-nav { display:flex; align-items:center; justify-content:center; gap:7px; padding: 13px 0 4px; }
  .dn {
    width:7px; height:7px; border-radius:6px; background:rgba(139,163,199,.3);
    transition: all .3s; cursor:pointer; border:none; padding:0;
  }
  .dn.on { width:22px; background:var(--neon); box-shadow:0 0 10px rgba(0,229,255,.6); }
  .deck-nav.pro .dn.on { background:var(--gold); box-shadow:0 0 10px rgba(255,201,60,.6); }
  .swipe-hint {
    text-align:center; font-size:11px; color:var(--muted); letter-spacing:.06em;
    padding: 2px 0 0;
  }
  .swipe-hint .ar { display:inline-flex; color:var(--muted); }

  /* locked slide */
  /* Замок — не «размытие контента», а его отсутствие: раньше карточка рендерилась
     целиком и размывалась filter: blur(7px). Любой кадр, где blur ещё/уже не
     применился (старт анимации .blur, смена вкладки, отрисовка до layout), показывал
     VIP-прогноз почти читаемым — это и ловилось скриншотом. Теперь под .blur лежат
     только скрытые плейсхолдеры, а реальные рынок, кэф, перевес и разбор в DOM
     заблокированной карточки не попадают вовсе. */
  .slide.locked .blur { pointer-events:none; }
  .slide.locked .p-card { background: var(--card2); }
  .lock-ph { display:block; border-radius:6px; background:rgba(139,163,199,.16); }
  .blur .lock-ph + .lock-ph { margin-top:8px; }
  .lp-title { height:13px; width:58%; }
  .lp-teams { height:36px; width:100%; margin-top:10px; border-radius:10px; }
  .lp-line { height:30px; width:100%; margin-top:12px; border-radius:10px; }
  .lp-note { height:44px; width:100%; margin-top:12px; border-radius:10px; }
  .lock-overlay {
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    background: rgba(10,13,22,.82); backdrop-filter: blur(1px); overflow:hidden; border-radius:var(--radius);
  }
  .lock-overlay .ico { display:flex; color:var(--gold); }
  .lock-overlay .ico .ic { font-size:26px; }
  .lock-overlay span { font-size:12px; color:var(--muted); letter-spacing:.05em; }
  .lock-overlay button {
    margin-top:4px; border:none; cursor:pointer; position:relative; z-index:2;
    background: linear-gradient(135deg, var(--gold), #ffb01f);
    color:#0a0d16; font-weight:800; font-size:12.5px; letter-spacing:.06em;
    padding: 10px 20px; border-radius: 24px;
  }

  /* ---------- partner (аккуратно) ---------- */
  .bet-btn {
    display:inline-block; margin: 2px 16px 12px; padding: 9px 14px;
    border: 1px solid rgba(139,163,199,.3); border-radius: 12px;
    color: var(--muted); font-size: 12px; font-weight: 700;
    text-decoration: none; letter-spacing: .03em;
    transition: all .2s; cursor: pointer;
  }
  .bet-btn:active { transform: scale(.97); border-color: var(--neon); color: var(--neon); }
  .bet-wrap { text-align: center; }
  .promo-box {
    margin: 0 16px; padding: 14px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(0,229,255,.07), rgba(255,201,60,.07));
    border: 1px solid rgba(0,229,255,.25);
  }
  .promo-box .lbl { font-size:11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
  .promo-box .code {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 8px; padding: 10px 12px;
    background: rgba(10,13,22,.6); border: 1px dashed rgba(0,229,255,.4); border-radius: 10px;
  }
  .promo-box .code b { font-size: 16px; letter-spacing: .12em; color: var(--neon); }
  .promo-box .copy {
    border: none; cursor: pointer; padding: 7px 12px; border-radius: 9px;
    background: rgba(0,229,255,.12); color: var(--neon); font-weight: 700; font-size: 11px;
  }
  .promo-box .desc { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
  .promo-box .adv { font-size:11px; color: #5f7396; margin-top: 8px; letter-spacing: .08em; text-transform: uppercase; }

  /* ---------- partner ad banner ---------- */
  .ad-banner {
    margin: 16px 16px 0; padding: 13px 14px;
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(120deg, #101b33 0%, #1a1030 60%, #2a0f1e 100%);
    border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius);
    text-decoration: none; position: relative; overflow: hidden;
  }
  .ad-banner::before {
    content:''; position:absolute; top:-40px; right:-30px; width:120px; height:120px;
    background: radial-gradient(circle, rgba(255,68,68,.22), transparent 70%);
    pointer-events: none;
  }
  .ad-banner .logo1w {
    flex: none; padding: 7px 12px; border-radius: 9px;
    background: #04122b; border: 1px solid rgba(255,255,255,.12);
    font-weight: 900; font-size: 16px; letter-spacing: .02em; color: #fff;
  }
  .ad-banner .logo1w i { font-style: normal; color: #ff4450; }
  .ad-banner .txt { flex: 1; min-width: 0; }
  .ad-banner .txt .t { font-size: 13.5px; font-weight: 800; color: #fff; line-height: 1.3; }
  .ad-banner .txt .d { font-size: 11px; color: #9fb3d4; margin-top: 2px; }
  .ad-banner .go {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #ff4450, #ff2b6b);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 16px; box-shadow: 0 0 14px rgba(255,68,80,.4);
  }
  .ad-banner:active { transform: scale(.985); }
  .ad-mark {
    position: absolute; top: 5px; right: 8px;
    font-size:11px; letter-spacing: .1em; color: rgba(255,255,255,.45);
    text-transform: uppercase;
  }

  /* ---------- PRO view ---------- */
  /* Премиальность читается сдержанностью: тот же карт + тонкая золотая рамка.
     Пульсирующие рамки и цветные блики читаются как «акция», а не как PRO. */
  .pro-hero {
    margin: 12px 16px 0; padding: 15px 16px;
    border-radius: var(--radius); position:relative; overflow:hidden;
    background: rgba(255,201,60,.06);
    border: 1px solid rgba(255,201,60,.3);
  }
  .pro-hero h3 { font-size:16px; color:var(--gold); display:flex; align-items:center; gap:8px; }
  .pro-hero h3 .crown { display:inline-flex; }
  .pro-hero h3 .crown .ic { font-size:17px; }
  .pro-hero p { font-size:12px; color:#d8c9a8; line-height:1.5; margin-top:6px; }

  /* ---------- paywall ---------- */
  .paywall-cta {
    margin: 16px 16px 8px; padding: 16px;
    background: rgba(255,201,60,.06);
    border: 1px solid rgba(255,201,60,.32); border-radius: var(--radius);
    text-align:center;
  }
  .paywall-cta h3 { font-size:15px; margin-bottom:5px; color:var(--gold); }
  .paywall-cta p { font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:11px; }
  .btn-sub {
    width:100%; border:none; cursor:pointer;
    background: linear-gradient(135deg, var(--gold), #ffb01f);
    color:#0a0d16; font-weight:800; font-size:15px; letter-spacing:.04em;
    padding: 13px; border-radius: 14px;
    box-shadow: 0 4px 22px rgba(255,201,60,.4);
    transition: transform .12s ease;
  }
  .btn-sub:active { transform: scale(.97); }

  /* ---------- history ---------- */
  .h-list { display:flex; flex-direction:column; gap:9px; padding: 0 16px; }
  .h-item {
    display:flex; align-items:center; gap:12px;
    background:var(--card); border-radius:14px; padding:12px 14px;
    border:1px solid rgba(139,163,199,.12);
    animation: cardIn .4s cubic-bezier(.22,1,.36,1) both;
    animation-delay: var(--d, 0s);
  }
  .h-item .r { font-size:18px; display:flex; align-items:center; gap:5px; flex:none; }
  .h-item .m { flex:1; min-width:0; }
  .h-item .m .t { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .h-item .m .s { font-size:11px; color:var(--muted); margin-top:2px; }
  .h-item .m .s .ai { color:#9fb3d4; font-weight:700; }
  .h-item .m .s .pro { color:var(--gold); font-weight:700; }
  .h-item .o { font-size:12px; font-weight:800; color:var(--gold); }
  .h-item.hit  { border-left:3px solid var(--ok); }
  .h-item.miss { border-left:3px solid var(--warn); }
  .h-item.push { border-left:3px solid var(--gold); }

  .history-count { padding:0 16px 8px; color:var(--muted); font-size:11px; text-align:right; }
  .history-pager { display:flex; flex-direction:column; gap:6px; padding:8px 16px 12px; }
  .history-progress { color:var(--muted); font-size:11px; text-align:center; }
  .history-pager-actions { display:flex; gap:8px; }
  .history-pager-actions .f-btn { min-height:42px; }
  .history-pager[hidden] { display:none !important; }

  /* ---------- stats filter ---------- */
  .filter-row { display:flex; gap:8px; padding: 2px 16px 10px; }
  .f-btn {
    flex:1; border:1px solid rgba(139,163,199,.25); background:none;
    color:var(--muted); font-weight:700; font-size:11.5px; letter-spacing:.03em;
    padding:9px 4px; border-radius:11px; cursor:pointer; transition: all .2s;
  }
  .f-btn.on { border-color: var(--neon); color: var(--neon); background: rgba(0,229,255,.08); }
  .f-btn.vip.on { border-color: var(--gold); color: var(--gold); background: rgba(255,201,60,.08); }
  .f-btn .ic, .sf-btn .ic { vertical-align:-.18em; }

  /* ---------- level & achievements ---------- */
  .lvl-card { margin:12px 16px 0; padding:14px; background:var(--card); border-radius:var(--radius); border:1px solid rgba(0,229,255,.16); }
  .lvl-top { display:flex; align-items:center; gap:12px; }
  .lvl-badge { width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg,#1a2f4d,#0a0d16); border:1.5px solid rgba(0,229,255,.4); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--neon); box-shadow:0 0 16px rgba(0,229,255,.16); }
  .lvl-name { font-size:15px; font-weight:800; }
  .lvl-sub { font-size:11px; color:var(--muted); margin-top:2px; }
  .xp-bar { height:8px; border-radius:8px; background:rgba(139,163,199,.15); overflow:hidden; margin-top:12px; }
  .xp-bar i { display:block; height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,#0090b3,var(--neon)); transition: width 1.2s cubic-bezier(.22,1,.36,1); }
  .xp-lbl { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:5px; }
  .ach-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding: 2px 16px 0; }
  .ach { background:var(--card); border-radius:13px; padding:11px 6px; text-align:center; border:1px solid rgba(139,163,199,.14); opacity:.4; filter:grayscale(.8); }
  .ach.on { opacity:1; filter:none; border-color:rgba(0,229,255,.4); background:rgba(0,229,255,.07); animation:achPop .5s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes achPop { from { transform:scale(.6); opacity:0; } }
  .ach .i { font-size:22px; }
  .ach .t { font-size:11px; color:var(--muted); margin-top:4px; line-height:1.25; }
  .ach.on .t { color:var(--text); }
  .fun-row { display:flex; gap:9px; padding:2px 16px 0; }
  .fun { flex:1; background:var(--card); border-radius:13px; padding:11px 6px; border:1px solid rgba(139,163,199,.14); text-align:center; }
  .fun .i { font-size:18px; }
  .fun .v { font-size:12px; font-weight:700; margin-top:3px; }
  .fun .l { font-size:11px; color:var(--muted); margin-top:2px; }

  /* ---------- compare VIP vs free ---------- */
  .cmp-wrap { display:flex; gap:10px; padding: 2px 16px 0; }
  .cmp { flex:1; border-radius:14px; padding:12px; text-align:center; border:1px solid rgba(139,163,199,.18); background:var(--card); }
  .cmp.vip { border-color:rgba(255,201,60,.35); }
  .cmp .t { font-size:11px; font-weight:800; }
  .cmp .r { font-size:24px; font-weight:800; margin-top:4px; }
  .cmp .d { font-size:11px; color:var(--muted); margin-top:2px; }
  .verdict { margin:10px 16px 0; padding:10px 12px; border-radius:12px; font-size:12px; line-height:1.5; }
  .verdict.good { background:rgba(0,230,118,.08); border:1px solid rgba(0,230,118,.35); color:#9fe8c4; }
  .verdict.neutral { background:rgba(139,163,199,.07); border:1px solid rgba(139,163,199,.25); color:#9fb3d4; }
  .pre-note { margin:8px 16px 0; padding:8px 11px; border-radius:10px; font-size:11px; line-height:1.5;
    background:rgba(139,163,199,.06); border:1px solid rgba(139,163,199,.18); color:#8fa3c0; }
  .pre-note .ic { width:13px; height:13px; vertical-align:-2px; margin-right:3px; }

  /* ---------- банк бота (раздел в разработке) ---------- */
  .bank-off { display:inline-block; margin-top:8px; font-size:11px; color:var(--muted); }
  .bk-top { display:flex; gap:12px; align-items:stretch; margin:2px 16px 0; }
  .bk-bal {
    flex:1.1; background:var(--card); border-radius:var(--radius); padding:13px 15px;
    border:1px solid rgba(0,229,255,.2);
  }
  .bk-lbl { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .bk-num { font-size:30px; font-weight:900; margin-top:4px; line-height:1; font-variant-numeric:tabular-nums; }
  .bk-num span { font-size:13px; font-weight:700; opacity:.7; }
  .bk-num.up { color:var(--ok); } .bk-num.down { color:var(--warn); }
  .bk-num.locked-num { color:var(--muted); letter-spacing:.16em; }
  .bk-sub { font-size:11px; color:var(--muted); margin-top:5px; }
  .bk-kpis { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .bk-kpi {
    background:var(--card); border-radius:12px; padding:8px 9px; text-align:center;
    border:1px solid rgba(139,163,199,.14);
  }
  .bk-kpi b { display:block; font-size:15px; color:var(--neon); font-variant-numeric:tabular-nums; }
  .bk-kpi span { font-size:10.5px; color:var(--muted); }
  .bk-chart { margin:12px 16px 0; background:var(--card); border-radius:14px; padding:10px 8px 6px; border:1px solid rgba(139,163,199,.12); }
  .bk-chart svg { display:block; width:100%; height:76px; }
  .bk-base { stroke:rgba(139,163,199,.3); stroke-width:1; stroke-dasharray:4 4; }
  .bk-line { fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
  .bk-line.up { stroke:var(--ok); filter:drop-shadow(0 0 6px rgba(0,230,118,.5)); }
  .bk-line.down { stroke:var(--warn); filter:drop-shadow(0 0 6px rgba(255,82,82,.5)); }
  .bk-note { margin:10px 16px 0; font-size:11px; line-height:1.55; color:var(--muted); }
  .bank-warn {
    margin:9px 16px 0; padding:9px 11px; border-radius:11px; font-size:11.5px; line-height:1.5;
    background:rgba(255,201,60,.07); border:1px solid rgba(255,201,60,.28); color:#e3cf9a;
  }
  .bank-warn .ic { width:13px; height:13px; vertical-align:-2px; margin-right:4px; }
  .bk-pro {
    margin:2px 16px 0; padding:11px 14px; border-radius:12px; display:flex; justify-content:space-between;
    align-items:center; gap:10px; background:var(--card); border:1px solid rgba(255,201,60,.28); font-size:12px;
  }
  .bk-pro b { color:var(--gold); font-size:13px; font-variant-numeric:tabular-nums; }
  .bk-list { margin:2px 16px 0; display:flex; flex-direction:column; gap:6px; }
  .bk-row {
    display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:10px;
    background:var(--card); border-left:3px solid transparent; font-size:11.5px;
  }
  .bk-row.hit { border-left-color:var(--ok); } .bk-row.miss { border-left-color:var(--warn); }
  .bk-row .bk-d { color:var(--muted); font-variant-numeric:tabular-nums; flex:none; }
  .bk-row .bk-m { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bk-row .bk-k { color:var(--neon); font-weight:700; flex:none; }
  .bk-row .bk-o { color:var(--muted); font-variant-numeric:tabular-nums; flex:none; }
  .bk-row .bk-r { flex:none; font-weight:800; }
  .bk-row.hit .bk-r { color:var(--ok); } .bk-row.miss .bk-r { color:var(--warn); }

  /* кнопка «Банк бота» в разделе PRO (видна только подписчику) */
  #bankCta { padding: 12px 16px 0; }
  .bank-cta {
    width:100%; display:flex; align-items:center; gap:12px; text-align:left;
    padding:13px 14px; cursor:pointer; border-radius:var(--radius);
    background: linear-gradient(135deg, rgba(255,201,60,.10), rgba(255,201,60,.02));
    border:1px solid rgba(255,201,60,.34); color:var(--text);
    font-family:inherit; transition: transform .12s ease;
  }
  .bank-cta:not(.soon):active { transform: scale(.985); }
  .bank-cta .bc-ico {
    flex:none; width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,201,60,.12); border:1px solid rgba(255,201,60,.3); color:var(--gold); font-size:19px;
  }
  .bank-cta .bc-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .bank-cta .bc-txt b { font-size:13.5px; font-weight:800; color:var(--gold); }
  .bank-cta .bc-txt span { font-size:11px; color:var(--muted); }
  .bank-cta .bc-go { flex:none; display:flex; color:var(--gold); }
  .bank-cta .bc-soon {
    flex:none; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:#0a0d16; background:linear-gradient(135deg,var(--gold),#ffe08a);
    padding:3px 8px; border-radius:9px;
  }
  /* Недоступная кнопка: приглушена, но ОЧЕВИДНА — человек видит, что она будет.
     cursor:not-allowed и без :active-отклика: нажимать нечего, и это честно. */
  .bank-cta.soon { cursor:not-allowed; opacity:.72; border-style:dashed; }

  /* ---------- profile ---------- */
  .prof-head { display:flex; align-items:center; gap:13px; padding: 14px 16px; }
  .avatar {
    width:58px; height:58px; border-radius:50%; flex:none;
    background: linear-gradient(135deg, #14324a, #0a0d16);
    border: 2px solid rgba(0,229,255,.5);
    display:flex; align-items:center; justify-content:center;
    font-size:21px; font-weight:800; color:var(--neon);
    box-shadow: 0 0 18px rgba(0,229,255,.3);
    overflow:hidden;
  }
  .avatar img { width:100%; height:100%; object-fit:cover; }
  .prof-head h2 { font-size:17px; }
  .prof-head .since { font-size:11px; color:var(--muted); margin-top:3px; }
  .streak {
    margin-left:auto; text-align:center; padding:8px 12px;
    background:rgba(0,229,255,.06); border:1px solid rgba(0,229,255,.25); border-radius:14px;
  }
  .streak .v { font-size:19px; font-weight:800; color:var(--neon); }
  .streak .l { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:4px; justify-content:center; }
  .streak .l .ic { color:var(--warn); }
  .stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding: 2px 16px 0; }
  .sg {
    background:var(--card); border-radius:13px; padding:12px;
    border:1px solid rgba(139,163,199,.14); text-align:center;
  }
  .sg .v { font-size:20px; font-weight:800; }
  .sg .v.c-neon { color:var(--neon); } .sg .v.c-ok { color:var(--ok); }
  .sg .v.c-warn { color:var(--warn); } .sg .v.c-gold { color:var(--gold); }
  .sg .l { font-size:11px; color:var(--muted); margin-top:3px; letter-spacing:.04em; }
  .prof-actions { padding: 13px 16px 0; display:flex; flex-direction:column; gap:9px; }
  .btn-ghost {
    width:100%; border:1px dashed rgba(0,229,255,.4); background:none;
    color:var(--neon); font-weight:700; padding:11px; border-radius:12px;
    font-size:12.5px; cursor:pointer;
  }

  /* ---------- footer ---------- */
  .footer {
    margin: 18px 16px 10px; padding: 11px 14px;
    background: rgba(139,163,199,.06); border-radius: 12px;
    font-size:11px; line-height: 1.55; color: #7d92b5; text-align:center;
  }
  .footer b { color:#9fb3d4; }
  .age { display:inline-block; margin-top:6px; padding:2px 8px; border:1px solid #7d92b5; border-radius:8px; font-weight:800; font-size:11px; letter-spacing:.1em; }

  /* ---------- tabbar ---------- */
  .tabbar {
    position:fixed; bottom:0; left:0; right:0; z-index:20;
    display:flex; background: rgba(13,17,30,.92); backdrop-filter: blur(14px);
    border-top:1px solid rgba(0,229,255,.15); padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .tab {
    flex:1; border:none; background:none; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color:#6a7fa4; font-size:11px; font-weight:600; letter-spacing:.02em;
    padding:6px 0; border-radius:12px; transition: color .2s;
  }
  .tab .i { font-size:21px; display:flex; }
  .tab.active { color: var(--neon); }
  .tab.active .i { transform: translateY(-2px); }
  .tab.pro-tab.active { color: var(--gold); }

  /* ---------- view transitions ----------
     Анимация только по положению, без opacity. Старый экран при переключении уже
     снят (display:none), поэтому полупрозрачный новый экран ~0.35 с оставлял на
     месте контента пустоту, а липкие шапка и таббар с backdrop-filter в это время
     подмешивали в свой фон предыдущий кадр — под блюром на миг проявлялись VIP-ставки.
     Теперь новая вкладка непрозрачна с первого кадра. */
  .view { display:none; }
  .view.active { display:block; animation: viewIn .28s cubic-bezier(.22,1,.36,1); }
  @keyframes viewIn { from { transform: translateY(6px); } }
  @keyframes cardIn { from { opacity:0; transform: translateY(18px) scale(.98); } }

  .section-title {
    padding: 14px 16px 8px; font-size:12px; font-weight:800;
    letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
    display:flex; align-items:center; gap:8px;
  }
  .section-title::after { content:''; flex:1; height:1px; background:rgba(139,163,199,.15); }

  .toast {
    position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px);
    background:#1a2140; color:var(--text); font-size:12.5px;
    padding:10px 18px; border-radius:24px; border:1px solid rgba(0,229,255,.3);
    opacity:0; pointer-events:none; transition:.3s; z-index:50; white-space:nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
  }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
  .empty {
    text-align:center; color:var(--muted); padding: 28px 30px; font-size:13px; line-height:1.7;
    background:var(--card); border-radius:var(--radius); border:1px dashed rgba(139,163,199,.25);
    margin: 0 16px;
  }
  .empty .i { font-size:34px; display:block; margin-bottom:8px; }

  /* ---------- pull-to-refresh ---------- */
  .ptr {
    position:fixed; top:0; left:0; right:0; z-index:100;
    height:0; overflow:hidden;
    background:linear-gradient(180deg, rgba(0,229,255,.12), transparent);
    transition:height .2s ease-out;
    display:flex; align-items:center; justify-content:center;
  }
  .ptr-content {
    font-size:12px; color:var(--neon); opacity:0;
    transition:opacity .2s; display:flex; align-items:center; gap:8px;
  }
  .ptr.show { height:60px; }
  .ptr.show .ptr-content { opacity:1; }
  .ptr-spinner {
    width:20px; height:20px; border:2px solid rgba(0,229,255,.3);
    border-top-color:var(--neon); border-radius:50%;
    animation:spin .8s linear infinite;
  }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* ---------- manage subscription bottom-sheet ---------- */
  .modal-ov {
    position:fixed; inset:0; z-index:100; background:rgba(4,6,14,.78);
    backdrop-filter:blur(6px); display:flex; align-items:flex-end;
  }
  .modal {
    width:100%; background:#10141f; border-radius:22px 22px 0 0;
    border-top:1px solid rgba(0,229,255,.25);
    padding:20px 18px calc(18px + env(safe-area-inset-bottom));
    animation: sheetUp .32s cubic-bezier(.22,1,.36,1);
  }
  @keyframes sheetUp { from { transform:translateY(80px); opacity:0; } }
  .modal h3 { font-size:17px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
  .m-status {
    padding:13px 14px; border-radius:14px; margin-bottom:12px;
    background:rgba(0,230,118,.07); border:1px solid rgba(0,230,118,.35);
  }
  .m-status.off { background:rgba(139,163,199,.06); border-color:rgba(139,163,199,.25); }
  .m-status .s { font-size:14px; font-weight:800; }
  .m-status.on .s { color:var(--ok); }
  .m-status.off .s { color:var(--muted); }
  .m-status .d { font-size:12px; color:var(--muted); margin-top:4px; }
  .m-status .d b { color:var(--text); }
  .m-hist { margin-bottom:14px; }
  .m-hist .t { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
  .m-hist .row {
    display:flex; justify-content:space-between; font-size:12.5px;
    padding:8px 11px; border-radius:10px; background:rgba(139,163,199,.06); margin-bottom:5px;
  }
  .m-hist .row b { color:var(--gold); }
  .m-note { font-size:11px; color:#7d92b5; line-height:1.5; margin:10px 0 14px; }
  .m-close {
    width:100%; border:1px dashed rgba(139,163,199,.35); background:none;
    color:var(--muted); font-weight:700; padding:11px; border-radius:12px;
    font-size:12.5px; cursor:pointer; margin-top:9px;
  }
  .btn-trial {
    width:100%; border:none; cursor:pointer;
    background: linear-gradient(135deg, var(--neon), #00b3d4);
    color:#04121c; font-weight:800; font-size:14.5px; letter-spacing:.03em;
    padding: 13px; border-radius: 14px;
    box-shadow: 0 4px 22px rgba(0,229,255,.4);
    transition: transform .12s ease; margin-bottom: 10px;
  }
  .btn-trial:active { transform: scale(.97); }

  /* ---------- PXAX ecosystem ---------- */
  .ecosystem {
    margin: 16px 16px 0; padding: 16px; position: relative; overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid rgba(139,163,199,.16);
    background:
      radial-gradient(120% 130% at 0% 0%, rgba(0,229,255,.10), transparent 55%),
      radial-gradient(120% 130% at 100% 0%, rgba(255,201,60,.08), transparent 55%),
      rgba(18,23,40,.55);
  }
  /* тонкая сетка на фоне — «техно»-подложка */
  .ecosystem::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(139,163,199,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139,163,199,.055) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 50% 25%, #000, transparent 78%);
    mask-image: radial-gradient(circle at 50% 25%, #000, transparent 78%);
  }
  .ecosystem h4 {
    position:relative; font-size:11.5px; color:var(--neon); letter-spacing:.14em;
    text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:7px;
  }
  .ecosystem h4::after {
    content:''; flex:1; height:1px;
    background:linear-gradient(90deg, rgba(0,229,255,.35), transparent);
  }
  .eco-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; position:relative; }
  .eco-item {
    position:relative; overflow:hidden; isolation:isolate;
    --accent:#00e5ff;
    background:linear-gradient(180deg, rgba(23,29,51,.92), rgba(15,20,36,.92));
    border-radius:14px; padding:12px 11px 11px;
    border:1px solid rgba(139,163,199,.16); text-decoration:none;
    display:flex; flex-direction:column; gap:7px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  /* акцентное свечение в углу — цвет зависит от сервиса */
  .eco-item::before {
    content:''; position:absolute; top:-30%; right:-25%; width:110px; height:110px;
    background:radial-gradient(circle, var(--accent), transparent 68%);
    opacity:.16; pointer-events:none; transition:opacity .18s ease;
  }
  .eco-item:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 12px 26px -14px var(--accent); }
  .eco-item:hover::before { opacity:.3; }
  .eco-item .icon {
    width:34px; height:34px; border-radius:11px; flex:none;
    display:flex; align-items:center; justify-content:center; font-size:18px;
    background:rgba(139,163,199,.09); border:1px solid rgba(139,163,199,.2);
    box-shadow: inset 0 0 14px rgba(139,163,199,.06);
  }
  .eco-item .name { display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; color:var(--text); letter-spacing:.02em; }
  .eco-item .desc { font-size:11px; color:var(--muted); line-height:1.3; letter-spacing:.03em; }
  /* фирменные акценты сервисов */
  .eco-item.ai      { --accent:#9d6bff; }
  .eco-item.ai .icon      { background:rgba(157,107,255,.14); border-color:rgba(157,107,255,.32); }
  .eco-item.pay     { --accent:#ff4fd8; }
  .eco-item.pay .icon     { background:rgba(255,79,216,.13); border-color:rgba(255,79,216,.32); }
  .eco-item.coin    { --accent:#ffc93c; }
  .eco-item.coin .icon    { background:rgba(255,201,60,.14); border-color:rgba(255,201,60,.34); }
  .eco-item.coin .name    { color:var(--gold); }
  .eco-item.vpn     { --accent:#41e6c8; }
  .eco-item.vpn .icon     { background:rgba(65,230,200,.13); border-color:rgba(65,230,200,.3); }

  .eco-pill {
    font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:#0a0d16; background:linear-gradient(135deg,var(--gold),#ffe08a);
    padding:2px 6px; border-radius:8px;
  }
  .eco-badge {
    display:inline-block; margin-top:10px; padding:4px 11px; position:relative;
    background:rgba(255,201,60,.1); border:1px solid rgba(255,201,60,.28);
    border-radius:20px; font-size:11px; color:var(--gold); font-weight:700;
    letter-spacing:.06em;
  }
  /* ---------- узкие экраны и уважение к reduced-motion ---------- */
  /* Hero на 320px: рынок и вероятность не влезают в строку рядом — кладём
     процент под рынком слева, кегль уменьшаем, рамка становится ниже. */
  @media (max-width:360px) {
    .verdict-hero { margin:12px 12px 0; padding:12px 13px 11px; }
    .vh-main { flex-direction:column; align-items:flex-start; gap:2px; }
    .vh-market { font-size:19px; }
    .vh-prob { font-size:23px; }
    .line-chip { margin:10px 12px 0; }
    .more-markets { margin:10px 12px 0; }
    .ai-note { margin:4px 12px 14px; }
  }
  /* Кто просил не анимировать — не анимируем: пробежку убираем, полосы
     заполняем сразу (без transition), скос оставляем (он статичен). */
  @media (prefers-reduced-motion: reduce) {
    .verdict-hero::after { animation: none; opacity:0; }
    .vh-bar i { transition: none; }
    .p-card,.p-card::before { animation:none; }
  }