/* CSS вики OmniSkin. Вынесен из <style> в _wiki_base.html 09-08.
   ПРИЧИНА — ЗАМЕР, а не вкус: на каждой странице вики лежало 62 КБ инлайн-CSS. Внешних
   запросов это экономило, но кэша между переходами не давало: телефон качал и ПАРСИЛ эти
   килобайты заново на КАЖДОЙ странице, до первой отрисовки. На дешёвом андроиде это видно
   глазом (жалоба владельца, Redmi A5).
   Файл отдаётся через _CachedStatic с длинным Cache-Control, поэтому со второй страницы он
   берётся из кэша. Версия в ?v= — единственный способ его сбросить: ПОДНИМАЙ ЕЁ при каждой
   правке этого файла, иначе у людей останется старое оформление. */
    /* ── темы: копия дизайн-системы _base.html (light/dark/neon), только CSS-переменные ── */
    :root, [data-theme="light"]{
      --bg-grad: radial-gradient(1200px 600px at 80% -10%, #e8edf7 0%, rgba(232,237,247,0) 60%),
                 linear-gradient(170deg, #fbfbfd 0%, #eceef3 100%);
      --text:#1d1d1f; --muted:#6e6e73;
      --panel: rgba(255,255,255,.60); --panel-solid: rgba(247,248,250,.92);
      --border: rgba(0,0,0,.09); --hair: rgba(0,0,0,.06); --hover: rgba(0,0,0,.035);
      --accent:#0a9aac; --accent-press:#0b8395; --on-accent:#ffffff;
      --accent-soft:rgba(10,154,172,.14); --ring:rgba(10,154,172,.30);
      --green:#138a37; --green-bg:rgba(52,199,89,.16);
      --warn-bg:rgba(255,149,0,.15); --warn-fg:#9a5400;
      --hold-bg:rgba(255,204,0,.20); --hold-fg:#876a00;
      --field: rgba(255,255,255,.75); --shadow:0 10px 34px rgba(15,23,42,.12);
      --glass-edge: inset 0 1px 0 rgba(255,255,255,.65);
      --err-bg:rgba(255,59,48,.12); --err-fg:#c4271d;
      --popup:#ffffff; color-scheme:light;
    }
    [data-theme="dark"]{
      --bg-grad: radial-gradient(1200px 600px at 80% -10%, #34343a 0%, rgba(52,52,58,0) 60%),
                 linear-gradient(170deg, #2c2c2e 0%, #1b1b1d 100%);
      --text:#f5f5f7; --muted:#98989d;
      --panel: rgba(44,44,46,.55); --panel-solid: rgba(34,34,36,.90);
      --border: rgba(255,255,255,.13); --hair: rgba(255,255,255,.08); --hover: rgba(255,255,255,.055);
      --accent:#1fbfd6; --accent-press:#46cfe4; --on-accent:#06262b;
      --accent-soft:rgba(31,191,214,.16); --ring:rgba(31,191,214,.34);
      --green:#34d35e; --green-bg:rgba(48,209,88,.18);
      --warn-bg:rgba(255,159,10,.18); --warn-fg:#ffb84d;
      --hold-bg:rgba(255,214,10,.14); --hold-fg:#e3d27a;
      --field: rgba(255,255,255,.07); --shadow:0 10px 34px rgba(0,0,0,.45);
      --glass-edge: inset 0 1px 0 rgba(255,255,255,.10);
      --err-bg:rgba(255,69,58,.16); --err-fg:#ff9d94;
      --popup:#2b2b2e; color-scheme:dark;
    }
    [data-theme="neon"]{
      --bg-grad: radial-gradient(1100px 620px at 82% -12%, rgba(0,224,255,.10) 0%, rgba(0,224,255,0) 58%),
                 radial-gradient(900px 560px at 8% 110%, rgba(255,45,180,.10) 0%, rgba(255,45,180,0) 55%),
                 linear-gradient(165deg, #0b0f1a 0%, #070510 100%);
      --text:#e8f6ff; --muted:#8ea6c0;
      --panel: rgba(16,22,38,.55); --panel-solid: rgba(13,17,32,.90);
      --border: rgba(0,224,255,.22); --hair: rgba(0,224,255,.12); --hover: rgba(0,224,255,.07);
      --accent:#00e0ff; --accent-press:#57ecff; --on-accent:#04121a;
      --accent-soft:rgba(0,224,255,.15); --ring:rgba(0,224,255,.40);
      --green:#39ff9e; --green-bg:rgba(57,255,158,.16);
      --warn-bg:rgba(255,196,0,.16); --warn-fg:#ffd257;
      --hold-bg:rgba(255,45,180,.16); --hold-fg:#ff7ad0;
      --field: rgba(0,224,255,.06); --shadow:0 0 34px rgba(0,224,255,.14), 0 12px 40px rgba(0,0,0,.55);
      --glass-edge: inset 0 1px 0 rgba(0,224,255,.14);
      --err-bg:rgba(255,45,120,.18); --err-fg:#ff8fb4;
      --popup:#0d1120; color-scheme:dark;
    }
    /* --card: алиас на активный сплошной фон панели. Раньше не определён -> var(--card)
       резолвился в прозрачность на market/tradeup/inventory. Лениво по теме через --panel-solid. */
    :root{ --card: var(--panel-solid); }
    [data-theme="neon"] .bar .brand svg{ filter:drop-shadow(0 0 6px var(--accent)); }
    [data-theme="neon"] .btn:not(.ghost), [data-theme="neon"] button:not(.ghost){
      box-shadow:var(--glass-edge), 0 0 14px rgba(0,224,255,.35); }
    [data-theme="neon"] a{ text-shadow:0 0 10px rgba(0,224,255,.18); }

    *{box-sizing:border-box}
    html,body{margin:0}
    body{ font:13.5px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
      color:var(--text); background:var(--bg-grad) fixed; min-height:100vh; padding-top:var(--bar-h);
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
    a{ color:var(--accent); text-decoration:none; }
    a:hover{ text-decoration:underline; }
    .muted{ color:var(--muted); }
    select, option, input, button{ font-family:inherit; }
    select option{ background:var(--popup); color:var(--text); }
    /* QA17: кнопки были display:inline-block, у ghost добавлялась рамка .5px, а у основной border:0 ->
       разная высота и «съехавший» текст при переносе. Теперь общая геометрия: inline-flex по центру,
       min-height и прозрачная рамка той же толщины у обеих. */
    button, .btn{ background:var(--accent); color:var(--on-accent); border:.5px solid transparent;
      border-radius:9px; padding:8px 15px; cursor:pointer; font:inherit; font-weight:600;
      display:inline-flex; align-items:center; justify-content:center; gap:6px;
      min-height:36px; line-height:1.25; text-align:center; vertical-align:middle;
      box-shadow:var(--glass-edge); transition:.12s; }
    button:hover, .btn:hover{ background:var(--accent-press); text-decoration:none; }
    .btn.ghost, button.ghost{ background:var(--field); color:var(--text); border:.5px solid var(--border); }
    input, select{ background:var(--field); color:var(--text); border:.5px solid var(--border);
      border-radius:9px; padding:8px 10px; font:inherit; outline:none; transition:.12s; }
    input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
    .badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
      padding:3px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent);
      letter-spacing:.2px; line-height:1.5; }
    /* 08-21: часть бейджей стала ссылками (игра/редкость/категория -> каталог с фильтром).
       Подчёркивание убираем — вид бейджа не меняется, но курсор и ховер показывают, что кликабельно */
    a.badge{ text-decoration:none; cursor:pointer; transition:.12s; }
    a.badge:hover{ filter:brightness(1.15); transform:translateY(-1px); }
    @media (prefers-reduced-motion: reduce){ a.badge:hover{ transform:none; } }
    .seg{ display:inline-flex; background:var(--field); border:.5px solid var(--border);
      border-radius:9px; padding:2px; gap:2px; }
    .seg button, .seg a{ background:transparent; border:0; border-radius:7px; padding:5px 10px; cursor:pointer;
      color:var(--muted); font-size:13px; line-height:1.4; box-shadow:none; font-weight:500; }
    .seg button:hover, .seg a:hover{ background:transparent; color:var(--text); text-decoration:none; }
    .seg button.on, .seg a.on{ background:var(--panel-solid); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.12); }
    .card{ background:var(--panel-solid); border:.5px solid var(--border);
      border-radius:16px; padding:20px 22px; box-shadow:var(--shadow),var(--glass-edge); }

    /* ── шапка вики ── */
    .bar{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; gap:12px;
      padding:11px 20px; background:var(--panel); backdrop-filter:blur(22px) saturate(180%);
      -webkit-backdrop-filter:blur(22px) saturate(180%); border-bottom:.5px solid var(--border);
      box-shadow:var(--glass-edge); }
    .bar .brand{ font-weight:600; font-size:15px; color:var(--text);
      display:inline-flex; align-items:center; gap:8px; flex:none; }
    .bar .brand:hover{ text-decoration:none; }
    .bar .brand svg{ width:22px; height:22px; display:block; color:var(--accent); flex:none; }
    .bar .brand .wm{ font-weight:700; letter-spacing:-.2px; }
    .bar .brand .wm i{ font-style:normal; color:var(--accent); }
    .bar .sp{ flex:1; }
    .wsearch{ display:flex; position:relative; flex:0 1 300px; min-width:140px; margin:0; }
    .wsearch input{ width:100%; padding:6px 12px; border-radius:999px; font-size:13px; }
    .wcta{ white-space:nowrap; font-size:13px; padding:7px 14px; }
    /* аккаунт в правом верхнем углу шапки (владелец 08-18) */
    .wacct{ display:inline-flex; align-items:center; gap:7px; flex:none; white-space:nowrap;
      font-size:12.5px; font-weight:600; color:var(--text); padding:5px 11px 5px 6px;
      border:.5px solid var(--border); border-radius:999px; background:var(--field); }
    .wacct:hover{ text-decoration:none; background:var(--hover); }
    .wacct img{ width:20px; height:20px; border-radius:50%; display:block; flex:none; }
    .wacct svg{ width:15px; height:15px; display:block; flex:none; }
    .wacct-in{ padding:6px 12px; color:var(--muted); }
    .wacct-in:hover{ color:var(--accent); }
    .wacct-n{ max-width:120px; overflow:hidden; text-overflow:ellipsis; }
    @media (max-width:840px){
      .bar{ flex-wrap:wrap; gap:8px 10px; padding:9px 12px; }
      .bar .sp{ display:none; }
      .wsearch{ flex:1 1 100%; order:9; }
    }

    /* ── контент/сетки ── */
    .wwrap{ width:100%; max-width:1180px; margin:24px auto 48px; padding:0 22px; }
    .wwrap h1{ margin:6px 0 4px; font-size:26px; letter-spacing:-.3px; }
    .wwrap h2{ margin:26px 0 12px; font-size:19px; }
    .crumbs{ font-size:12.5px; color:var(--muted); margin:2px 0 10px; }
    .crumbs a{ color:var(--muted); }
    .crumbs a:hover{ color:var(--accent); }
    .crumbs .sep{ margin:0 5px; opacity:.6; }
    .wgrid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
    .wcard{ position:relative; display:flex; flex-direction:column; gap:6px; background:var(--panel-solid);
      border:.5px solid var(--border); border-radius:14px; padding:12px;
      box-shadow:var(--glass-edge); color:var(--text); transition:.12s; }
    .wcard:hover{ text-decoration:none; border-color:var(--accent); box-shadow:0 6px 20px rgba(0,0,0,.12),var(--glass-edge); }
    .wimg{ width:100%; height:104px; object-fit:contain; display:block; }
    .wimg-ph{ width:100%; height:104px; display:flex; align-items:center; justify-content:center;
      font-size:30px; color:var(--muted); background:var(--field); border-radius:10px; }
    /* нейтральная SVG-«картинка» вместо эмодзи-дартса в заглушках (просьба владельца 07-13) */
    .wimg-ph, .sug .ph, .trow .ph, .wpn .ph{
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ea0b5' stroke-width='1.5' opacity='0.45'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:center; background-size:30px; }
    .sug .ph, .trow .ph, .wpn .ph{ background-size:20px; min-height:26px; }
    .wname{ font-size:13px; font-weight:600; line-height:1.35; overflow:hidden;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.6em; }
    .wmeta{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; }
    .wprice{ font-weight:700; color:var(--green); font-variant-numeric:tabular-nums; }
    .adcell{ align-items:center; justify-content:center; text-align:center; }

    /* ── таблицы (цены на предмете) ── */
    table.wtab{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
    .wtab th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px;
      color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:.5px solid var(--border); }
    .wtab td{ padding:9px 10px; border-top:.5px solid var(--hair); }
    .wtab tr.best td{ background:var(--green-bg); }
    .wtab .num{ text-align:right; }
    /* иконки площадок — стиль как на основном сайте (макрос src_face из _macros.html) */
    .src-face{ display:inline-flex; align-items:center; gap:6px; max-width:100%; }
    .src-face .arr{ color:var(--muted); font-size:11px; }
    .src-name{ text-transform:capitalize; }
    .srcico{ width:18px; height:18px; border-radius:5px; flex:0 0 auto; display:block;
      object-fit:contain; box-shadow:0 1px 2px rgba(0,0,0,.18); }
    .src-badge{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
      width:18px; height:18px; border-radius:5px; color:#fff; font-size:9px; font-weight:700;
      letter-spacing:-.3px; line-height:1; text-transform:uppercase; box-shadow:0 1px 2px rgba(0,0,0,.18); }

    /* ── пагинация/категории/тулбар ── */
    .wtools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0; }
    .cats{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
    /* QA6: inline-flex + line-height — иначе у инлайн-<a> вертикальный паддинг не держит
       строку и текст «съезжает» с пилюли (особенно при переносе строк) */
    .cats a{ font-size:12px; padding:5px 11px; border-radius:999px; background:var(--field);
      border:.5px solid var(--border); color:var(--text);
      display:inline-flex; align-items:center; justify-content:center; line-height:1.25; }
    .cats a:hover{ text-decoration:none; border-color:var(--accent); }
    .cats a.on{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); font-weight:600; }
    .pager{ display:flex; align-items:center; gap:8px; justify-content:center; margin:22px 0 0; }
    .pager a, .pager span.cur{ padding:6px 12px; border-radius:9px; background:var(--field);
      border:.5px solid var(--border); color:var(--text); font-size:13px; }
    .pager a:hover{ text-decoration:none; border-color:var(--accent); }
    .pager span.cur{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); font-weight:600; }

    /* ── страница предмета ── */
    .itemgrid{ display:grid; gap:16px; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; }
    @media (max-width:760px){ .itemgrid{ grid-template-columns:1fr; } }
    .rarline{ font-size:12.5px; font-weight:600; }
    .fl-track{ position:relative; height:8px; border-radius:999px; background:var(--field);
      border:.5px solid var(--border); margin:6px 0 4px; }
    .fl-range{ position:absolute; top:0; bottom:0; border-radius:999px; background:var(--accent); opacity:.85; }
    .kv{ width:100%; border-collapse:collapse; font-size:13px; }
    .kv td{ padding:6px 0; border-top:.5px solid var(--hair); }
    .kv td:first-child{ color:var(--muted); width:46%; }
    .kv td:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
    .bestbox{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:4px 0 12px; }
    .bestbox .bp{ font-size:30px; font-weight:700; color:var(--green); font-variant-numeric:tabular-nums; }
    .wchart{ width:100%; height:170px; display:block; }
    .wchart-lbl{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:4px; }

    /* ── футер вики ── */
    .wfoot{ max-width:1180px; margin:40px auto 26px; padding:18px 22px 0; border-top:.5px solid var(--border);
      display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--muted); }
    .wfoot .sp{ flex:1; }
    .wfoot a{ color:var(--muted); margin-right:12px; }
    .wfoot a:hover{ color:var(--accent); }
    /* футер-навигация (перелинковка на все страницы: инструменты+разделы -> сигнал важности Google) */
    .wfootnav{ max-width:1180px; margin:44px auto 0; padding:0 22px; display:grid; gap:22px;
      grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
    .wfootnav h4{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
      margin:0 0 9px; font-weight:700; }
    .wfootnav a{ display:block; color:var(--muted); font-size:13px; padding:3px 0; }
    .wfootnav a:hover{ color:var(--accent); }
    /* рекламный контейнер: у пустого слота ни рамок, ни высоты — блок вообще не рендерится без ads_html */
    .adslot{ max-width:1180px; margin:14px auto; padding:0 22px; }

    /* ── гранд-редизайн (t80823058): 2-й цвет градиента per-theme ── */
    :root, [data-theme="light"]{ --g2:#6a5bff; }
    [data-theme="dark"]{ --g2:#8f7bff; }
    [data-theme="neon"]{ --g2:#ff2db4; }

    /* hero хаба */
    .whero{ text-align:center; padding:36px 0 6px; }
    .whero h1{ font-size:clamp(28px, 5vw, 42px); margin:0 0 10px; letter-spacing:-.8px; line-height:1.12; }
    .whero .sub{ color:var(--muted); font-size:15px; max-width:560px; margin:0 auto; }
    .gradtext{ background:linear-gradient(92deg, var(--gaccent,var(--accent)), var(--g2));
      -webkit-background-clip:text; background-clip:text; color:var(--accent); -webkit-text-fill-color:transparent; }
    [data-theme="neon"] .gradtext{ filter:drop-shadow(0 0 14px rgba(0,224,255,.30)); }

    /* большой поиск + автокомплит */
    .bsearch{ position:relative; max-width:640px; margin:22px auto 0; }
    .bsearch input{ width:100%; padding:13px 96px 13px 20px; border-radius:999px; font-size:15px;
      box-shadow:var(--shadow),var(--glass-edge); }
    .bsearch .go{ position:absolute; right:6px; top:50%; transform:translateY(-50%);
      border-radius:999px; padding:8px 16px; font-size:13.5px; }
    .sugbox{ position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:60; display:none;
      background:var(--panel-solid); border:.5px solid var(--border); border-radius:14px;
      box-shadow:var(--shadow); overflow:hidden; text-align:left; }
    .sugbox.open{ display:block; }
    .sug{ display:flex; align-items:center; gap:10px; padding:8px 14px; color:var(--text); font-size:13px; }
    .sug:hover, .sug.act{ background:var(--hover); text-decoration:none; }
    .sug img{ width:46px; height:32px; object-fit:contain; flex:none; }
    .sug .ph{ width:46px; text-align:center; font-size:18px; flex:none; }
    .sug .nm{ flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sug .gm{ font-size:10.5px; padding:2px 7px; flex:none; }
    .sug .pr{ font-weight:700; color:var(--green); font-variant-numeric:tabular-nums; flex:none; }

    /* стат-строка живых цифр */
    .statrow{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:26px 0 4px; }
    /* хаб: маленькие равные плитки (все одной ширины под самую длинную), компактные, по центру */
    .whero .statrow .stat{ flex:0 0 176px; width:176px; min-width:0; }
    .stat{ min-width:132px; padding:12px 18px; text-align:center; background:var(--panel-solid);
      border:.5px solid var(--border); border-radius:14px; box-shadow:var(--glass-edge);
      opacity:0; transform:translateY(10px); animation:statin .55s ease forwards; }
    .stat:nth-child(2){ animation-delay:.08s } .stat:nth-child(3){ animation-delay:.16s }
    .stat:nth-child(4){ animation-delay:.24s }
    .stat b{ display:block; font-size:21px; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
    .stat span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
    @keyframes statin{ to{ opacity:1; transform:none; } }
    @media (prefers-reduced-motion: reduce){ .stat{ animation:none; opacity:1; transform:none; } }

    /* бейдж изменения цены */
    .chg{ display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700;
      padding:2px 8px; border-radius:999px; font-variant-numeric:tabular-nums; line-height:1.5; }
    .chg.up{ color:var(--green); background:var(--green-bg); }
    .chg.down{ color:var(--err-fg); background:var(--err-bg); }
    .wcard .chg.ov{ position:absolute; top:9px; right:9px; z-index:2; }

    /* тренды хаба */
    .trgrid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); margin-top:8px; }
    .trow{ display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:10px;
      color:var(--text); font-size:13px; border-top:.5px solid var(--hair); }
    .trow:first-of-type{ border-top:0; }
    .trow:hover{ background:var(--hover); text-decoration:none; }
    .trow img{ width:46px; height:32px; object-fit:contain; flex:none; }
    .trow .ph{ width:46px; text-align:center; font-size:18px; flex:none; }
    .trow .nm{ flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .trow .pr{ font-weight:700; color:var(--green); font-variant-numeric:tabular-nums; }

    /* карточки игр: градиентная рамка + hover-glow */
    .gcard{ display:flex; align-items:center; gap:12px; padding:17px; border-radius:16px; color:var(--text);
      background:linear-gradient(var(--panel-solid),var(--panel-solid)) padding-box,
                 linear-gradient(135deg, var(--gaccent,var(--accent)), var(--g2)) border-box;
      border:1.5px solid transparent; box-shadow:var(--glass-edge); transition:.15s; }
    .gcard:hover{ text-decoration:none; transform:translateY(-2px);
      box-shadow:0 8px 26px var(--ring), var(--glass-edge); }
    /* фикс-слот иконки: текст карточек игр в одну колонку даже если иконка отсутствует/битая */
    .gcard .gislot{ flex:none; width:80px; height:34px; display:flex; align-items:center; justify-content:flex-start; }
    .gcard .gi{ font-size:27px; }
    .gcard img.gi{ height:34px; width:100%; border-radius:6px; object-fit:contain; object-position:left center; }

    /* панель фильтров каталога (t23361721: базово чистый интерфейс, фильтры в выдвижной панели) */
    .fpanel{ padding:12px 14px; margin:14px 0 10px;
      background:var(--panel-solid); border:.5px solid var(--border); border-radius:14px; box-shadow:var(--glass-edge); }
    .fpanel .lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
    .fpanel input.num{ width:86px; }
    .frow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .fbtn{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
    .fbtn svg{ width:14px; height:14px; flex:none; }
    .fbtn[aria-expanded="true"]{ border-color:var(--accent); color:var(--accent); }
    .fbtn .fcount{ min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--accent);
      color:var(--on-accent); font-size:11px; font-weight:700; line-height:1;
      display:inline-flex; align-items:center; justify-content:center; }
    .freset{ font-size:12.5px; white-space:nowrap; }
    /* выдвижение: grid-rows 0fr->1fr; у .fcinner НЕТ своих отступов (иначе торчат в свёрнутом виде) */
    .fcollapse{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
    .fcollapse.open{ grid-template-rows:1fr; }
    .fcinner{ overflow:hidden; min-width:0; }
    .fcinner .frow{ margin-top:12px; }
    .fcinner .chips, .fcinner .cats{ margin:12px 0 0; }
    @media (prefers-reduced-motion: reduce){ .fcollapse{ transition:none; } }
    .chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
    /* QA6: см. .cats a — inline-flex, чтобы текст не съезжал с чипа */
    .chip{ font-size:12px; padding:5px 11px; border-radius:999px; background:var(--field);
      border:1px solid var(--border); color:var(--text); white-space:nowrap; transition:.12s;
      display:inline-flex; align-items:center; justify-content:center; line-height:1.25; }
    .chip:hover{ text-decoration:none; border-color:currentColor; }
    .chip.on{ font-weight:700; background:var(--accent-soft); }
    @media (max-width:840px){
      /* видимая строка скроллится вбок; чипы ВНУТРИ панели переносятся вниз как есть */
      .frow{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
      .fcinner .frow{ flex-wrap:wrap; overflow:visible; padding-bottom:0; }
    }

    /* hero предмета: вьюер скина (Бренд-F2 t24903689) вместо простой картинки.
       Вкладки Рендер/Паттерн — radio-CSS без JS (:checked ~ показывает панель);
       вкладка Паттерн рендерится только при paint_seed лота; без неё .notabs держит рендер видимым. */
    .ihero{ display:flex; gap:28px; align-items:center; margin:10px 0 18px; }
    .ihero h1{ font-size:clamp(20px, 3.4vw, 30px); margin:0 0 8px; letter-spacing:-.5px; }
    .viewer{ position:relative; flex:0 0 360px; max-width:44%; background:var(--panel-solid);
      border:.5px solid var(--border); border-radius:16px; overflow:hidden;
      box-shadow:var(--shadow),var(--glass-edge); }
    .viewer > input{ position:absolute; opacity:0; pointer-events:none; }
    .vtabs{ display:flex; gap:2px; padding:8px 10px 0; border-bottom:.5px solid var(--border); }
    .vtabs label{ padding:8px 14px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer;
      border:.5px solid transparent; border-bottom:0; border-radius:10px 10px 0 0; }
    .vtabs label:hover{ color:var(--text); background:var(--hover); }
    #vt-render:checked ~ .vtabs label[for="vt-render"],
    #vt-pattern:checked ~ .vtabs label[for="vt-pattern"]{
      color:var(--gaccent,var(--accent)); background:var(--field); border-color:var(--border); }
    .vpane{ display:none; min-height:240px; padding:18px; align-items:center; justify-content:center; }
    #vt-render:checked ~ .vp-render, #vt-pattern:checked ~ .vp-pattern, .viewer.notabs .vp-render{ display:flex; }
    .vp-render{ position:relative; }
    .vp-render .glow{ position:absolute; inset:10%; border-radius:50%; filter:blur(46px); opacity:.45; }
    .vp-render img{ position:relative; width:100%; max-height:220px; object-fit:contain; display:block; }
    .vp-render .wimg-ph{ position:relative; width:100%; height:180px; font-size:46px; }
    .vp-pattern{ flex-direction:column; gap:4px; text-align:center; }
    .vp-pattern .plab{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
    .vp-pattern .seed{ font-size:46px; font-weight:700; letter-spacing:-1.5px; line-height:1.1;
      font-variant-numeric:tabular-nums; color:var(--gaccent,var(--accent)); }
    [data-theme="neon"] .vp-pattern .seed{ text-shadow:0 0 18px var(--ring); }
    .vp-pattern .prow{ font-size:13px; color:var(--muted); }
    .vp-pattern .prow b{ color:var(--text); font-variant-numeric:tabular-nums; }
    .vp-pattern .btn{ margin-top:10px; font-size:12.5px; }
    /* листалка износов под вьюером: стрелки-ссылки + подпись текущего износа */
    .vcar{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-top:.5px solid var(--border); }
    .vcar .varr{ flex:none; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
      border-radius:9px; background:var(--field); border:.5px solid var(--border); color:var(--text);
      font-size:16px; line-height:1; }
    .vcar a.varr:hover{ text-decoration:none; border-color:var(--gaccent,var(--accent)); color:var(--gaccent,var(--accent)); }
    .vcar .varr.off{ opacity:.35; }
    .vcar .wlab{ flex:1; text-align:center; font-weight:600; font-size:13px; min-width:0; }
    .vcar .wlab small{ display:block; font-weight:500; font-size:10.5px; color:var(--muted);
      text-transform:uppercase; letter-spacing:.4px; }
    @media (max-width:760px){
      .ihero{ flex-direction:column; align-items:stretch; text-align:center; gap:12px; }
      .viewer{ flex:none; max-width:100%; }
      .ihero .bestbox, .ihero .ctarow, .ihero .bdgrow{ justify-content:center; }
    }

    /* стат-панель предмета */
    /* R2: подпись плитки была white-space:nowrap при колонке 128px -> длинные («Максимум за всё
       время», «Диапазон 30д») вылезали за границу. Теперь подпись переносится на 2 строки,
       значение ужимается по ширине и все плитки одной высоты. */
    .stiles{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
      margin:10px 0 0; align-items:stretch; }
    .tile{ background:var(--panel-solid); border:.5px solid var(--border); border-radius:12px;
      padding:10px 12px; box-shadow:var(--glass-edge); min-width:0; overflow:hidden;
      display:flex; flex-direction:column; justify-content:space-between; }
    .tile .k{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;
      white-space:normal; overflow-wrap:anywhere; line-height:1.25; min-height:2.5em; }
    .tile .v{ font-size:clamp(13px, 1.35vw, 16px); font-weight:700; font-variant-numeric:tabular-nums;
      margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .tile .v.up{ color:var(--green); } .tile .v.down{ color:var(--err-fg); }
    .tile .v small{ font-size:11.5px; font-weight:600; color:var(--muted); }

    /* матрица вариантов износа */
    .vmwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    table.vmatrix{ width:100%; min-width:460px; border-collapse:collapse; font-variant-numeric:tabular-nums; }
    .vmatrix th{ text-align:center; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px;
      color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:.5px solid var(--border); }
    .vmatrix td{ padding:9px 10px; border-top:.5px solid var(--hair); text-align:center; font-size:13px; }
    .vmatrix th:first-child, .vmatrix td:first-child{ text-align:left; }
    .vmatrix td a{ font-weight:600; }
    .vmatrix td.cur{ background:var(--accent-soft); box-shadow:inset 0 0 0 1.5px var(--accent); border-radius:8px; }
    .vmatrix td.cur b{ color:var(--accent); }
    .vmatrix .dash{ color:var(--muted); opacity:.55; }

    /* float-шкала с зонами FN..BS */
    .flz{ position:relative; display:flex; height:14px; border-radius:8px; overflow:hidden;
      border:.5px solid var(--border); margin:6px 0 2px; }
    .flz i{ display:block; height:100%; opacity:.30; }
    .flz .rng{ position:absolute; top:0; bottom:0; border:2px solid var(--accent);
      background:var(--accent-soft); border-radius:4px; }
    .flz-lbl{ display:flex; font-size:10.5px; color:var(--muted); }
    .flz-lbl span{ text-align:center; overflow:hidden; }

    /* про-график: SVG + tooltip */
    .pchart-wrap{ position:relative; }
    .pchart{ width:100%; height:auto; display:block; }
    .ptip{ position:absolute; display:none; pointer-events:none; z-index:5; white-space:nowrap;
      background:var(--popup); border:.5px solid var(--border); border-radius:9px;
      padding:6px 10px; font-size:12px; box-shadow:var(--shadow); transform:translate(-50%,-110%); }
    .ptip b{ font-variant-numeric:tabular-nums; }

    /* таблица цен: логотип крупнее + кнопка к маркету */
    .wtab .srcico, .wtab .src-badge{ width:24px; height:24px; border-radius:6px; font-size:10.5px; }
    .mkbtn{ font-size:12px; padding:5px 11px; white-space:nowrap; }

    /* ── Бренд-D2 (t24903552): per-game акценты ПОВЕРХ трёх тем ──
       Меняется ТОЛЬКО пара --gaccent/--g2 (решение владельца); темы light/dark/neon не трогаем.
       [data-game] стоит на body игровых страниц (хаб — без атрибута, там --gaccent=--accent)
       и на карточках игр хаба — селектор общий. */
    :root{ --gaccent:var(--accent); }
    [data-game="cs2"]{ --gaccent:#8b5cf6; --g2:#a78bfa; }
    [data-game="tf2"]{ --gaccent:#f59e0b; --g2:#fbbf24; }
    [data-game="dota2"]{ --gaccent:#dc2626; --g2:#ef4444; }
    [data-game="rust"]{ --gaccent:#ea580c; --g2:#f97316; }

    /* оружейная навигация cs2: ряд классов под шапкой + дропдауны */
    .wnav{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; padding:4px 14px;
      background:var(--panel-solid); border-bottom:.5px solid var(--border); }
    .wnavi{ position:relative; }
    .wnavi > button{ background:transparent; border:0; box-shadow:none; color:var(--muted); font-weight:600;
      font-size:12.5px; padding:7px 11px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; }
    .wnavi > button:hover{ background:var(--hover); color:var(--text); }
    .wnavi > button .car{ width:7px; height:7px; border-right:1.5px solid currentColor;
      border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); }
    .wnavi.open > button{ color:var(--gaccent); background:var(--hover); }
    .wndd{ position:absolute; left:0; top:100%; z-index:55; display:none; min-width:230px;
      max-height:min(62vh,480px); overflow:auto; padding:6px; background:var(--panel-solid);
      border:.5px solid var(--border); border-radius:12px; box-shadow:var(--shadow); }
    .wnavi.open .wndd{ display:block; }
    @media (hover:hover) and (pointer:fine){
      .wnavi:hover .wndd{ display:block; }
      .wnavi:hover > button{ color:var(--gaccent); background:var(--hover); }
    }
    .wndd a{ display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:8px;
      color:var(--text); font-size:12.5px; white-space:nowrap; }
    .wndd a:hover{ background:var(--hover); color:var(--gaccent); text-decoration:none; }
    .wndd img{ width:36px; height:22px; object-fit:contain; flex:none; }
    /* иконка меню фоном из /nav-icons.css (09-08): в HTML остаётся класс, а не URL на 251 символ.
       Коробка задана здесь, поэтому раскладка не зависит от того, приехал ли файл с картинками. */
    .wndd a.nic::before{ content:""; width:36px; height:22px; flex:none;
                         background:center/contain no-repeat; }
    /* меню категорий «Другое» (08-15): заголовки групп + крупные картинки предметов.
       Плоский список из десяти пунктов читается хуже, чем три подписанные группы. */
    .wndd-cats{ min-width:262px; padding:8px 6px; }
    .wndd-grp{ display:block; padding:8px 9px 4px; font-size:10.5px; font-weight:700;
      letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
    .wndd-grp + .wndd-grp{ margin-top:2px; }
    .wndd-cats a{ font-size:13px; font-weight:600; padding:7px 9px; gap:11px; }
    .wndd-cats img{ width:34px; height:26px; }
    .wndd-cats a.nic::before{ width:34px; height:26px; }
    .wndd-cats .ph{ width:34px; height:26px; flex:none; border-radius:6px;
      background:var(--hover); }
    .wndd-cats hr{ border:0; border-top:.5px solid var(--border); margin:6px 4px; }
    .wnav-all{ font-size:12.5px; font-weight:600; color:var(--gaccent);
      padding:7px 11px; white-space:nowrap; border-radius:8px; }
    .wnav-all:hover{ text-decoration:none; background:var(--hover); }
    .wnav-mob{ display:none; font-weight:600; font-size:13px; color:var(--gaccent); padding:6px 4px; }

    /* ── Фидбек-G2 (t71995436): компактный выдвижной выбор игры в шапке ──
       .gamesel наследует .wnavi (тот же JS open/close/Esc/клик-мимо + hover-open),
       видна только ТЕКУЩАЯ игра + стрелка; клик раскрывает список остальных. */
    .gamesel, .utilsel{ flex:none; }
    .gamesel > button, .utilsel > button{ background:var(--field); border:.5px solid var(--border); box-shadow:none;
      color:var(--text); font-weight:600; font-size:13px; padding:6px 12px; border-radius:9px; }
    .gamesel > button:hover, .gamesel.open > button,
    .utilsel > button:hover, .utilsel.open > button{ background:var(--field);
      border-color:var(--gaccent,var(--accent)); color:var(--text); }
    .gamesel .wndd, .utilsel .wndd{ min-width:168px; }
    .utilsel .wndd{ right:0; left:auto; }  /* сверху справа — меню к правому краю, не за экран */
    .gamesel .wndd a{ font-weight:600; }
    .gamesel .wndd a.on{ color:var(--gaccent,var(--accent)); background:var(--hover); }
    .gamesel .wndd a.on::after{ content:'✓'; margin-left:auto; color:var(--gaccent,var(--accent)); font-size:12px; }

    /* каталожные пункты nav (Коллекции/Кейсы/Другое) — единый стиль пилюль, ховер-акцент */
    .wnav-cat{ font-size:12.5px; font-weight:600; color:var(--muted); padding:7px 11px;
      border-radius:8px; white-space:nowrap; flex:none; display:inline-flex; align-items:center; gap:5px; }
    .wni{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5;
      stroke-linecap:round; stroke-linejoin:round; flex:none; }
    .wnav-cat:hover{ text-decoration:none; background:var(--hover); color:var(--gaccent,var(--accent)); }
    .wnav-cat.on{ color:var(--gaccent,var(--accent)); background:var(--hover); }
    /* разделитель секции оружия и секции каталога */
    .wnav-div{ width:1px; align-self:stretch; margin:5px 6px; background:var(--border); flex:none; }

    @media (max-width:840px){
      /* nav компактнее + горизонтальный скролл; дропдауны классов прячем, каталожные пилюли остаются */
      .wnav{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 12px; }
      /* УТИЛИТЫ ОСТАЮТСЯ (08-25). Steam ID / Float / Blue-gem на десктопе живут в рейле, а рейл
         ниже скрыт — и до правки на телефоне эти три инструмента были недоступны ВООБЩЕ, ни
         через один элемент навигации. Это ровно те страницы, ради которых на вики и приходят
         (blue-gem снаружи качают тысячами запросов в сутки), а мобильных среди посевов —
         большинство. Прячем всё, кроме .utilsel: высоту шапки JS ниже пересчитает сам. */
      .wnavi:not(.utilsel), .wnav-all, .wnav-div{ display:none; }
      .wnav-mob{ display:inline-flex; }
    }

    /* hero главной игры (каталог без фильтров) */
    .ghero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:24px;
      align-items:center; padding:24px 0 8px; }
    .ghero .gh1{ font-size:clamp(30px,5.2vw,52px); line-height:1.05; letter-spacing:-1.2px;
      margin:0 0 12px; text-transform:uppercase; }
    .ghero .gh1 .gradtext{ display:block; }
    .ghero .sub{ color:var(--muted); font-size:14.5px; max-width:480px; }
    .ghero .statrow{ justify-content:flex-start; margin:20px 0 0; }
    .ghero .stat{ text-align:left; min-width:120px; }
    .ghpic{ position:relative; justify-self:center; width:min(100%,360px); text-align:center; }
    .ghpic:hover{ text-decoration:none; }
    .ghpic img{ width:100%; max-height:250px; object-fit:contain; display:block;
      filter:drop-shadow(0 14px 34px color-mix(in srgb, var(--gaccent) 50%, transparent));
      animation:ghfloat 5s ease-in-out infinite; }
    .ghpic .cap{ display:flex; justify-content:center; align-items:baseline; gap:10px;
      margin-top:12px; font-size:13px; min-width:0; }
    .ghpic .cap .nm{ font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden;
      text-overflow:ellipsis; max-width:230px; }
    .ghpic .cap .pr{ font-weight:700; color:var(--green); font-variant-numeric:tabular-nums; }
    @keyframes ghfloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
    @media (prefers-reduced-motion: reduce){ .ghpic img{ animation:none; } }
    /* ВЫДВИЖНЫЕ СПИСКИ ФИЛЬТРОВ (08-21): две стены чипов (17 редкостей + 17 категорий) занимали
       пол-экрана раньше самих предметов. Теперь это <details> — кнопка с выбранным значением,
       список раскрывается поверх страницы. Без JS: работает и с выключенными скриптами. */
    .fdrops{ gap:10px; flex-wrap:wrap; }
    .fdrop{ position:relative; }
    .fdrop > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center;
      gap:8px; padding:8px 12px; border:.5px solid var(--border); border-radius:10px;
      background:var(--field); font-size:13px; white-space:nowrap; }
    .fdrop > summary::-webkit-details-marker{ display:none; }
    .fdrop > summary::after{ content:"▾"; color:var(--muted); font-size:11px; }
    .fdrop > summary:hover{ border-color:var(--accent); }
    .fdrop > summary .lbl{ color:var(--muted); }
    .fdrop > summary b{ font-weight:600; }
    .fdrop > summary b.picked{ color:var(--accent); }
    .fdrop[open] > summary{ border-color:var(--accent); }
    .fdmenu{ position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:280px;
      max-width:min(92vw,560px); max-height:340px; overflow:auto; padding:12px;
      background:var(--popup,var(--panel-solid)); border:.5px solid var(--border);
      border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.28); }
    .fdmenu .chips, .fdmenu .cats{ margin:0; }
    @media (max-width:760px){
      .fdrop{ position:static; }
      .fdmenu{ position:static; max-width:100%; min-width:0; box-shadow:none; margin-top:8px; }
    }

    /* ШАПКА РАЗДЕЛА (08-21). Отдельный вид, а не копия hero игры: там один-два парящих скина
       и короткие подписи, а в разделе четыре карточки и цены вроде «1 150 553 ₴» — они ломали
       подпись на три строки (владелец прислал скрин). Поэтому здесь карточки с рамкой, имя в одну
       строку с многоточием, цена отдельной строкой и НИКОГДА не переносится. */
    .ghero.cathero{ padding:18px 0 6px; }
    .ghero.cathero .gh1{ text-transform:none; font-size:clamp(26px,4vw,40px); }
    .ghero.cathero .gh1 .gradtext{ display:inline; }
    .ghero.cathero .stat b{ white-space:nowrap; font-variant-numeric:tabular-nums;
      font-size:clamp(15px,1.6vw,19px); }
    .ghero.cathero .stat{ min-width:0; }
    /* 08-21: тот же парящий вид, что на главной игры (владельцу он нравится) — три предмета
       треугольником, без рамок и без цены в подписи: длинные цены её и ломали. Цифры живут
       в плитках слева, картинки остаются картинками. */
    .ghero.cathero .ghpic .cap .pr{ display:none; }
    .ghero.cathero .ghpic .cap .nm{ max-width:150px; }
    @media (max-width:760px){
      .ghero.cathero .ghpic{ text-align:center; }
      .ghero.cathero .ghpics{ gap:8px; }
    }

    /* hero_items (G2): несколько оперативников/скинов в ряд */
    .ghpics{ display:flex; gap:12px; justify-content:center; align-items:flex-start; flex-wrap:wrap; }
    .ghpics .ghpic{ width:min(100%,160px); }
    .ghpics .ghpic img{ max-height:160px; }
    @media (max-width:760px){
      .ghero{ grid-template-columns:1fr; text-align:center; padding-top:12px; }
      .ghero .sub{ margin:0 auto; }
      .ghero .statrow{ justify-content:center; }
      .ghero .stat{ text-align:center; }
      .ghpic{ width:min(78%,280px); }
      .ghpics .ghpic{ width:min(40%,140px); }
    }

    /* ── ОПТИМИЗАЦИЯ ДЛЯ СЛАБЫХ ТЕЛЕФОНОВ (08-21, владелец: вика лагает на Redmi A5) ──
       Правило отбора: не «мобильная ширина», а УКАЗАТЕЛЬ БЕЗ ХОВЕРА (hover:none) — это и есть
       телефон, включая планшет в альбомной. Отключаем ровно то, что заставляет GPU перерисовывать
       экран на каждом кадре скролла:
       1) backdrop-filter у ЗАКРЕПЛЁННОЙ шапки и рельса — самый дорогой эффект на слабом чипе:
          прозрачный слой поверх всей страницы пересчитывается при любом сдвиге. Меняем на
          непрозрачный фон: выглядит так же плотно, стоит ноль.
       2) бесконечную анимацию парения картинок hero — постоянная перерисовка даже в покое.
       3) длинные сетки (каталог, 300+ кейсов) получают content-visibility:auto — браузер не
          верстает карточки за пределами экрана. contain-intrinsic-size держит высоту, чтобы
          скроллбар не прыгал. */
    @media (hover:none) {
      .bar, .wrail{ backdrop-filter:none; -webkit-backdrop-filter:none;
        background:var(--panel-solid,var(--panel)); }
      .ghpic img{ animation:none; }
      .stat{ animation:none; opacity:1; transform:none; }
      .wcard, .colcard{ box-shadow:none; }
      .wgrid > *, .wpngrid > *{ content-visibility:auto; contain-intrinsic-size:auto 210px; }
      /* ховер-эффекты на тач-экране всё равно не видны, а перерисовку вызывают */
      .wcard:hover, .colcard:hover, .ghpic:hover{ box-shadow:none; transform:none; }
    }

    /* индекс оружия: сетка внутри секций классов */
    .wpngrid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); }
    .wpn{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--panel-solid);
      border:.5px solid var(--border); border-radius:12px; color:var(--text); font-weight:600;
      font-size:13px; box-shadow:var(--glass-edge); transition:.12s; min-width:0; }
    .wpn:hover{ text-decoration:none; border-color:var(--gaccent); color:var(--gaccent); }
    .wpn img{ width:52px; height:32px; object-fit:contain; flex:none; }
    .wpn .ph{ width:52px; text-align:center; font-size:17px; flex:none; }
    .wpn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* страница оружия: sticky-карточка слева + сетка семей справа */
    .weaplay{ display:grid; gap:16px; grid-template-columns:280px minmax(0,1fr); align-items:start; margin-top:14px; }
    .weapside{ position:sticky; top:74px; text-align:center; }
    .weapside img{ width:100%; max-height:170px; object-fit:contain;
      filter:drop-shadow(0 10px 26px color-mix(in srgb, var(--gaccent) 45%, transparent)); }
    @media (max-width:860px){ .weaplay{ grid-template-columns:1fr; } .weapside{ position:static; } }
    /* ФАКТЫ ОРУЖИЯ В САЙДБАРЕ (08-29, решение владельца по референсу cs.money).
       Было: абзац на 148 слов над сеткой — читатель упирался в стену текста вместо скинов.
       Стало: цифры живут слева строками, сетка начинается сразу. Слова со страницы не убраны
       (индексация хабов держится на них, замер 18-09) — проза уехала ПОД сетку. */
    .wfacts{ margin-top:14px; text-align:left; }
    .wfacts h3{ font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
      font-weight:600; margin:14px 0 6px; }
    .wfacts .row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px;
      padding:6px 0; border-top:.5px solid var(--hair); }
    .wfacts .row .lbl{ font-size:12.5px; color:var(--muted); min-width:0;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .wfacts .row .val{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
      white-space:nowrap; }
    .wfacts .row a.lbl{ color:var(--text); }
    .wfacts .row a.lbl:hover{ color:var(--accent); }
    .wfacts .bar{ display:block; height:4px; border-radius:2px; margin-bottom:5px;
      background:var(--rc,#9aa0a6); }
    .wfacts .note{ font-size:12px; color:var(--muted); padding:6px 0;
      border-top:.5px solid var(--hair); line-height:1.45; }
    /* На мобилке сайдбар встаёт НАД сеткой (одна колонка), и семь строк фактов снова отодвинули
       бы скины — ровно та беда, ради которой правка и делалась. Поэтому там же, но в две
       колонки: та же информация занимает вдвое меньше высоты. */
    @media (max-width:860px){
      .wfacts{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; align-items:start; }
      .wfacts h3{ grid-column:1 / -1; margin:10px 0 2px; }
      .wfacts .note{ grid-column:1 / -1; }
    }
    @media (max-width:420px){ .wfacts{ grid-template-columns:1fr; } }
    /* проза под сеткой: та же роль, что у сайдбара, но словами и без давки на первый экран */
    .wnote{ margin-top:18px; font-size:13px; color:var(--muted); line-height:1.6; }
    .wnote p{ margin:0 0 8px; }
    .wnote a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
    .wnote a:hover{ color:var(--accent); }
    /* карточка семьи: НЕ <a> (внутри своя ссылка на коллекцию — вложенные <a> невалидны),
       клик по карточке = растянутый .flink, ссылки поверх = .over */
    .famcard{ position:relative; overflow:hidden; cursor:pointer; }
    .famcard .flink{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
    .famcard .over{ position:relative; z-index:2; align-self:flex-start; }
    .rarstrip{ position:absolute; top:0; left:0; right:0; height:4px;
      background:linear-gradient(90deg, var(--rc,#9aa0a6), color-mix(in srgb, var(--rc,#9aa0a6) 20%, transparent)); }
    /* ТТХ оружия в sticky-карточке (Бренд-F2 t24903689): подпись капсом слева, значение крупно справа */
    table.ttx{ width:100%; border-collapse:collapse; margin-top:14px; text-align:left; }
    .ttx td{ padding:7px 0; border-top:.5px solid var(--hair); vertical-align:baseline; }
    .ttx td.k{ font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
      font-weight:600; padding-right:10px; }
    .ttx td.v{ text-align:right; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
    .ttx td.v small{ font-size:11px; font-weight:600; color:var(--muted); }
    .ttx td.v .sec{ font-size:12.5px; font-weight:600; color:var(--muted); }

    /* Бренд-E2 (t24903625): контролы валюты/языка — в шапке на десктопе, в футере на мобилке */
    .loc{ display:inline-flex; gap:8px; align-items:center; flex:none; }
    .lsel{ padding:5px 8px; border-radius:8px; font-size:12.5px; font-weight:600; max-width:110px;
      background:var(--field); color:var(--text); border:1px solid var(--border); }
    .lsel:hover{ border-color:var(--accent); }
    .lsel option{ background:var(--popup); color:var(--text); }
    .lseg a{ padding:5px 9px; font-size:12px; font-weight:600; }
    .wfoot .loc{ display:none; }
    @media (max-width:840px){
      .bar .loc{ display:none; }
      .wfoot .loc{ display:inline-flex; }
    }

    /* редкости состава коллекции/кейса: цветная точка + имя + счётчик */
    .rardots{ display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 0; }
    .rardots .rd{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
      padding:4px 11px; border-radius:999px; background:var(--field); border:.5px solid var(--border); }
    .rardots .rd i{ width:9px; height:9px; border-radius:50%; background:var(--rc,var(--muted)); flex:none;
      box-shadow:0 0 6px color-mix(in srgb, var(--rc,transparent) 60%, transparent); }
    .rardots .rd b{ color:var(--muted); font-weight:600; }

    /* ── мобильная адаптивность 360-768px (t11970489) ── */
    @media(max-width:600px){
      /* таблица цен на предмете: скролл вместо распирания body */
      table.wtab{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
      /* тренд-колонки: минимальная ширина может не вписаться на 360px — форсируем 1 col */
      .trgrid{ grid-template-columns:1fr; }
      /* статичные плитки: вертикально на совсем узких экранах */
      .stiles{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
      /* bsearch: убираем лишний правый отступ под кнопку */
      .bsearch input{ padding-right:74px; }
    }
    @media(max-width:480px){
      /* hero игры: компактнее на совсем узких */
      .ghpics .ghpic{ width:min(44%,130px); }
      /* карточки вики: минимум не более ширины экрана */
      .wgrid{ grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr)); }
    }

    /* ── Левый нав-рейл (десктоп, как на Таблице): разгружает верхнюю панель ── */
    /* --bar-h должен СРАЗУ совпадать с реальной высотой шапки: она fixed, а body держит
       под неё padding-top. Раньше стояли статичные 56px, JS мерил настоящую высоту только на
       'load' и разом сдвигал весь контент вниз на +131px -> CLS 0.15 на мобилке (замер
       Playwright 08-11). Значения ниже — замеренная высота на реальных ширинах; JS-подстройка
       осталась как страховка и теперь почти всегда no-op. */
    :root{ --rail-w:74px; --bar-h:65px; }
    @media (max-width:1023px){ :root{ --bar-h:147px; } }
    @media (max-width:479px) { :root{ --bar-h:187px; } }
    @media (max-width:374px) { :root{ --bar-h:228px; } }
    .wrail{ position:fixed; left:0; top:var(--bar-h); bottom:0; width:var(--rail-w); z-index:45;
      display:flex; flex-direction:column; gap:3px; padding:12px 8px;
      background:var(--panel); border-right:.5px solid var(--border);
      backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
      box-shadow:var(--glass-edge); overflow:visible; }
    .wrail::-webkit-scrollbar{ width:0; }
    .wrail a{ display:flex; flex-direction:column; align-items:center; gap:4px;
      padding:9px 4px; border-radius:12px; color:var(--muted); font-size:10.5px; font-weight:600;
      line-height:1.1; text-align:center; transition:.12s; }
    .wrail a:hover{ background:var(--hover); color:var(--text); text-decoration:none; }
    .wrail a.on{ background:var(--accent-soft); color:var(--accent); }
    .wrail a .ic{ font-size:18px; line-height:1; }
    .wrail a .ic svg{ width:20px; height:20px; display:block; }
    .wrail .rdiv{ height:1px; background:var(--border); margin:5px 6px; flex:none; }
    /* «Утилиты» в рейле: кнопка как пункт рейла + выдвижной ряд квадратов-утилит вправо (слева-направо) */
    .wrail-util{ position:relative; }
    .wrail-util > .wru-btn{ width:100%; display:flex; flex-direction:column; align-items:center; gap:4px;
      padding:9px 4px; border-radius:12px; color:var(--muted); font-size:10.5px; font-weight:600;
      line-height:1.1; text-align:center; background:transparent; border:0; cursor:pointer; transition:.12s; font-family:inherit; }
    .wrail-util > .wru-btn:hover, .wrail-util.open > .wru-btn{ background:var(--hover); color:var(--text); }
    .wru-btn .ic svg{ width:20px; height:20px; display:block; }
    /* флаут вправо; рейл overflow:visible -> не обрезается. Раскрытие — чистым CSS (hover/focus),
       не завязано на JS; JS-клик лишь дополнение (пин для тач). */
    .wru-fly{ position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:8px; display:none;
      grid-auto-flow:column; gap:8px; align-items:center;
      background:var(--panel-solid); border:1px solid var(--border); border-radius:14px; padding:8px;
      box-shadow:var(--glass-edge), 0 12px 34px rgba(0,0,0,.24); z-index:60; }
    .wrail-util.open > .wru-fly, .wrail-util:hover > .wru-fly, .wrail-util:focus-within > .wru-fly{ display:grid; }
    /* ровно как кнопка «Утилиты»/пункты рейла (.wrail a): width58/padding9x4/gap4/icon20, подпись 1 строка */
    .wru-fly a{ width:58px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
      padding:9px 4px; border-radius:12px; color:var(--muted); font-size:10.5px; font-weight:600; line-height:1.1;
      white-space:nowrap; background:var(--field); border:1px solid var(--hair); transition:.12s; }
    .wru-fly a:hover{ color:var(--accent); border-color:var(--accent); background:var(--hover); text-decoration:none; }
    .wru-fly a.on{ color:var(--accent); border-color:var(--accent); }
    .wru-fly a .ic svg{ width:20px; height:20px; display:block; }
    @media (min-width:841px){
      body{ padding-left:var(--rail-w); }
      /* дубли ушли в рейл — прячем каталожные пилюли, CTA и верхний дропдаун «Утилиты» из шапки */
      .bar > .wnav-cat, .bar > .wcta, .bar > .utilsel{ display:none; }
    }
    @media (max-width:840px){ .wrail{ display:none; } }

    /* ── Единый стиль справки: «основной инфо-блок» (широкий, панель+тень) VS «гайд-подсказки»
       (ряд вторичных квадратных карточек снизу). Общий для всех утилит (steam-id/float/blue-gem). ── */
    .guidesec{ margin-top:24px; }
    .guidesec > .gtitle{ font-size:11.5px; text-transform:uppercase; letter-spacing:.09em;
      color:var(--muted); margin:0 0 10px; display:flex; align-items:center; gap:7px; font-weight:700; }
    .guidesec > .gtitle::before{ content:""; width:15px; height:15px; flex:none; opacity:.8;
      background:currentColor; -webkit-mask:var(--ic-book) center/contain no-repeat; mask:var(--ic-book) center/contain no-repeat; }
    .guidegrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; }
    .guidecard{ background:var(--field); border:1px solid var(--hair); border-radius:14px;
      padding:14px 15px; }
    .guidecard h3{ font-size:13px; margin:0 0 6px; display:flex; gap:7px; align-items:center;
      color:var(--text); font-weight:700; }
    .guidecard h3 .gi{ width:17px; height:17px; flex:none; color:var(--accent); }
    .guidecard{ min-width:0; overflow-wrap:anywhere; }
    .guidecard p, .guidecard ol{ font-size:12.5px; margin:0; color:var(--muted); line-height:1.55; }
    .guidecard ol{ padding-left:17px; margin-top:5px; }
    .guidecard code{ background:var(--hover); border-radius:5px; padding:.5px 4px; font-size:11.5px;
      word-break:break-all; }
    .guidecard a{ color:var(--accent); }
    /* QA7: автоподсказка в панели фильтров каталога. Обёртка держит позиционирование,
       .sugbox с data-fixed уходит в position:fixed -> не режется .frow{overflow-x:auto} на мобилке */
    .sugwrap{ position:relative; display:flex; }
    .sugwrap input{ width:100%; }
    .sugbox[data-fixed]{ position:fixed; left:auto; right:auto; }
    :root{ --ic-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M2.5 3.5A1 1 0 0 1 3.5 2.5H7v11H3.5a1 1 0 0 0-1 1zM13.5 3.5A1 1 0 0 0 12.5 2.5H9v11h3.5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }

    /* Видимый фокус с клавиатуры. У input/select стоит outline:none (свой стиль рамки),
       из-за чего при табуляции не было видно, где курсор. :where() = нулевая специфичность
       у списка, сам :focus-visible перебивает outline:none. Мышью не появляется. */
    :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
      outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }