:root{
    --bg:#0a0a0c; --bg-2:#141416; --bg-3:#1d1d21;
    --card:#1d1d21; --line:rgba(255,255,255,.08);
    --text:#f4f1ec; --muted:#8f8880;
    --accent:#ff7802; --accent-2:#ffb43d;
    --grad:linear-gradient(135deg,#ff7802,#ffb43d);
    --btn:#ff7802;   /* заливка кнопок = цвет шкал/логотипа (заказчик выбрал именно его) */
    --r:16px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  [hidden]{display:none!important}   /* иначе display:flex у .crt-menu/.gems перебивает атрибут hidden */
  /* Inter был объявлен, но нигде не грузился - весь текст и так шёл системным.
     Не тянем 130 КБ ради почти того же рисунка: пишем стек честно */
  body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
  button{font-family:inherit;cursor:pointer}

  /* ---------- шапка ---------- */
  .head{position:sticky;top:0;z-index:50;background:rgba(10,10,12,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
  .head-row{display:flex;align-items:center;gap:12px;padding:13px 12px 13px 14px}
  /* бургер: сворачивает сайдбар до иконок (как в girli), состояние в localStorage */
  .burger{width:42px;height:42px;flex-shrink:0;border-radius:11px;background:none;border:none;display:grid;place-items:center;color:var(--text);transition:.15s}
  .burger:hover{background:rgba(255,255,255,.06)}
  .burger svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
  .logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
  .logo img{height:30px;width:auto;display:block}
  @media(max-width:430px){
    .head-row{gap:8px;padding:11px 12px}
    .logo img{height:24px}
  }
  /* ---- шапка на телефоне ----------------------------------------------------
     Селекторы намеренно с префиксом `.head `: базовые правила объявлены НИЖЕ по файлу,
     и без запаса по весу медиазапрос им проигрывает. */
  @media(max-width:460px){
    /* у залогиненного в шапке ещё «Создать», баланс и аватар - надпись логотипа
       перестаёт помещаться. Оставляем значок: в PNG 426x80 он занимает первые 88px,
       поэтому cover + object-position:left, второй файл не нужен */
    .head .head-row{gap:6px;padding:10px 8px}
    .head .head-right{gap:6px}
    .head .burger{width:36px;height:36px}
    .head .burger svg{width:23px;height:23px}
    .head .gems,.head .swc-pill{padding:6px 9px;font-size:12.5px}
    .head .btn-head,.head .btn-grad{padding:9px 12px;font-size:12.5px}
    .head .crt-chev{display:none}
  }
  @media(max-width:380px){
    .head .head-row{gap:5px;padding:9px 6px}
    .head .burger{width:32px;height:32px}
    .head .burger svg{width:21px;height:21px}
  }
  @media(max-width:340px){
    /* 320px (старые SE, дешёвые андроиды): «Создать» ужимается до плюса - текст
       и баланс одновременно тут не живут */
    .head .btn-head{font-size:0;padding:9px 11px}
    .head .btn-head::before{content:"+";font-size:19px;font-weight:800;line-height:1}
  }
  .head-right{margin-left:auto;display:flex;align-items:center;gap:12px}
  .gems{display:flex;align-items:center;gap:6px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;color:#ffd77a;white-space:nowrap}
  .bell{position:relative;width:38px;height:38px;flex-shrink:0;border-radius:11px;background:var(--bg-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted)}
  .bell::after{content:"";position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--accent-2)}
  .me-slot{display:flex;align-items:center;flex-shrink:0}
  /* до ответа /api/auth/me шапку не показываем частями - иначе мелькают заглушки */
  html:not(.auth-known) .head-right .btn-grad,html:not(.auth-known) .head-right .btn-head{visibility:hidden}
  .btn-grad{background:var(--btn);color:#fff;border:none;font-weight:700;font-size:13.5px;padding:10px 20px;border-radius:12px;box-shadow:0 2px 12px rgba(255,120,2,.18);transition:transform .15s;white-space:nowrap}
  /* меню «Создать» (общее с creation.html): три типа генерации */
  .crt-wrap{position:relative;flex-shrink:0}
  .crt-chev{width:13px;height:13px;margin-left:2px;flex-shrink:0;opacity:.9;transition:transform .18s}
  .crt-wrap.open .crt-chev{transform:rotate(180deg)}
  #createBtn{display:inline-flex;align-items:center;gap:4px}
  .crt-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:120;width:236px;
    background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:7px;
    box-shadow:0 18px 44px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:3px}
  .crt-menu a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;
    text-decoration:none;color:var(--text);transition:background .13s}
  .crt-menu a:hover{background:rgba(255,255,255,.05)}
  .crt-menu a.on{background:rgba(255,120,2,.12)}
  .crt-menu .ic{width:34px;height:34px;flex-shrink:0;border-radius:10px;background:var(--bg);
    border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
  .crt-menu .ic svg{width:21px;height:21px}
  .crt-menu a.on .ic{color:var(--accent);border-color:rgba(255,120,2,.45)}
  .crt-menu b{display:block;font-size:13.5px;font-weight:700}
  .crt-menu a.on b{color:var(--accent)}
  .crt-menu .sb{font-size:11.5px;color:var(--muted)}
  .btn-grad:hover{transform:translateY(-1px)}
  .btn-ghost{background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:12px}

  /* ---------- вкладки типов: второй этаж шапки (двойное верхнее меню) ---------- */
  .head-tabs{border-top:1px solid var(--line);padding:0 12px 0 14px;display:flex;align-items:stretch;gap:18px}
  .head-search{margin:10px 0 10px auto;flex:1 1 auto;min-width:230px;max-width:576px;min-height:44px;
    display:flex;align-items:center;gap:11px;background:var(--bg-2);
    border:1px solid var(--line);border-radius:999px;padding:0 22px;color:var(--muted);
    transition:border-color .15s,background .15s}
  .head-search:focus-within{border-color:rgba(255,120,2,.55);background:var(--bg-3)}
  .head-search svg{width:17px;height:17px;flex-shrink:0}
  .head-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);
    font-family:inherit;font-size:14.5px}
  .head-search input::placeholder{color:var(--muted)}
  @media(max-width:900px){.head-search{display:none}}

  /* ---------- слайдер запросов на странице категории ---------- */
  .qslide{position:relative;margin:0 0 16px}
  .qslide-row{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;
    scrollbar-width:none;padding:2px 0}
  .qslide-row::-webkit-scrollbar{display:none}
  .qslide-row button{flex:none;background:var(--bg-2);border:1px solid var(--line);
    color:var(--text);font-family:inherit;font-size:13px;font-weight:600;
    padding:9px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.15s}
  .qslide-row button:hover{border-color:rgba(255,120,2,.5);color:#ffc078}
  .qslide-row button.on{background:rgba(255,120,2,.16);border-color:rgba(255,120,2,.55);color:#ffc078}
  .qslide-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
    background:var(--bg-2);color:var(--text);cursor:pointer;display:grid;place-items:center;
    box-shadow:0 4px 14px rgba(0,0,0,.4)}
  .qslide-nav.l{left:-6px}
  .qslide-nav.r{right:-6px}
  .qslide-nav[hidden]{display:none}

  /* счётчик найденного над лентой */
  .found{font-size:13px;color:var(--muted);margin:0 0 12px}
  .found b{color:var(--text);font-weight:700}
  /* вкладки разделов переехали в общий swap_tabs.css - он один на весь сайт */

  /* ---------- каркас с сайдбаром (метрики один в один с girli: 220px / 20px 14px / 11px 12px) ---------- */
  .shell{display:flex;align-items:flex-start}
  .side{width:220px;flex-shrink:0;position:sticky;top:var(--head-h,112px);height:calc(100vh - var(--head-h,112px));display:flex;flex-direction:column;gap:4px;padding:20px 14px;border-right:1px solid var(--line);overflow-y:auto;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .sn{flex:none;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;background:none;border:none;color:var(--muted);font-size:14px;font-weight:500;text-align:left;width:100%;transition:all .15s;text-decoration:none;cursor:pointer;box-sizing:border-box}
  .sn .ic{width:20px;height:20px;flex:none;display:grid;place-items:center}
  .sn .ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .sn:hover{color:var(--text);background:rgba(255,255,255,.04)}
  .sn.on{color:var(--text);background:rgba(255,120,2,.12)}
  .sn.on .ic{color:var(--accent)}
  .sf.on{border-color:rgba(255,120,2,.5);color:var(--text)}
  .sn .new{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.05em;background:var(--grad);color:#fff;border-radius:6px;padding:2px 6px}
  .side .foot{flex:none;margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:9px;padding-top:16px}
  .sf{flex:none;display:flex;align-items:center;gap:11px;background:none;border:1px solid var(--line);border-radius:14px;color:var(--text);font-size:13px;font-weight:600;padding:12px 15px;text-decoration:none;transition:.15s}
  .sf:hover{border-color:rgba(255,120,2,.45);background:var(--bg-2)}
  .sf .ic{width:22px;height:22px;flex:none;display:grid;place-items:center;font-size:15px;line-height:1}
  .sf img.ic{object-fit:contain}
  .side-legal{display:flex;align-items:center;gap:8px;padding:10px 4px 0;font-size:11px;font-weight:500;color:var(--muted)}
  .side-legal i{font-style:normal;font-size:8px}
  .side-legal.lnks{padding-top:6px;flex-wrap:nowrap;white-space:nowrap;gap:5px;font-size:10px}
  .side-legal.lnks i{font-size:6px}
  .side-legal.lnks a{color:var(--muted);text-decoration:none}
  .side-legal.lnks a:hover{color:var(--text)}
  /* свёрнутое меню: рейка с иконками-плитками (как html.nav-min в girli) */
  html.nav-min .side{width:88px;padding:20px 12px;gap:10px;align-items:center}
  html.nav-min .sn{width:48px;height:48px;justify-content:center;padding:0;gap:0;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
  html.nav-min .sn:hover{background:var(--bg-3)}
  html.nav-min .sn.on{background:rgba(255,120,2,.16);border-color:rgba(255,120,2,.45)}
  html.nav-min .sn .ic{width:24px;height:24px}
  html.nav-min .sn .ic svg{width:24px;height:24px}
  html.nav-min .side .foot{align-items:center}
  html.nav-min .sf{width:48px;height:48px;justify-content:center;padding:0;gap:0;border-radius:14px}
  html.nav-min .sn .txt,html.nav-min .sn .new,html.nav-min .sn-crt .chev,
  html.nav-min .sf .txt,html.nav-min .side-legal{display:none}
  /* узкий экран: сайдбар не исчезает, а выезжает шторкой по бургеру */
  @media(max-width:960px){
    .side{position:fixed;left:0;top:var(--head-h,112px);bottom:0;width:252px;z-index:90;
      background:var(--bg);border-right:1px solid var(--line);
      transform:translateX(-105%);transition:transform .22s ease;display:flex}
    html.mnav-open .side{transform:none;box-shadow:0 0 40px rgba(0,0,0,.6)}
    html.mnav-open{overflow:hidden}
    .mbackdrop{display:none}
    html.mnav-open .mbackdrop{display:block;position:fixed;left:0;right:0;bottom:0;
      top:var(--head-h,112px);z-index:80;background:rgba(6,6,8,.6)}
    /* в шторке всегда полные пункты, даже если на десктопе меню было свёрнуто */
    html.nav-min .side{width:252px;padding:20px 14px;gap:4px;align-items:stretch}
    html.nav-min .sn{width:100%;height:auto;justify-content:flex-start;padding:11px 12px;gap:11px;
      border-radius:12px;background:none;border:none}
    html.nav-min .sn .txt,html.nav-min .sn .new,html.nav-min .sn-crt .chev,html.nav-min .sf .txt,html.nav-min .side-legal{display:revert}
    html.nav-min .sf{width:100%;height:auto;justify-content:flex-start;padding:12px 15px;gap:11px}
  }

  /* контент на всю ширину рядом с сайдбаром (кап 1480px убран - на широком мониторе
     он оставлял пустые поля справа); колонок больше по мере роста экрана */
  .body{--pad-x:28px;--pad-b:60px;flex:1;min-width:0;padding:24px var(--pad-x) var(--pad-b)}
  @media(max-width:700px){.body{--pad-x:16px;--pad-b:40px;padding:18px var(--pad-x) var(--pad-b)}}
  .page{display:none}
  .page.show{display:block}
  /* мягкий вход контента при переключении вкладок (ставит goPage) - «страница приехала» */
  @keyframes pgIn2{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .page.pg-in{animation:pgIn2 .38s ease}
  @media(prefers-reduced-motion:reduce){.page.pg-in{animation:none}}

  /* ---------- фильтры ---------- */
  .chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;white-space:nowrap;transition:all .15s}
  .chip:hover{color:var(--text)}
  .chip.active{background:rgba(255,120,2,.14);border-color:rgba(255,120,2,.55);color:#ffc078}
  .chiprow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
  .chiprow::-webkit-scrollbar{display:none}
  .sort{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
  .sort button{background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;padding:7px 12px;border-radius:9px}
  .sort button.on{color:var(--text);background:var(--bg-2)}
  .filterline{display:flex;align-items:center;gap:12px;margin:20px 0 16px}

  /* ---------- сетка работ ---------- */
  .grid{columns:4;column-gap:14px}
  @media(min-width:1700px){.grid{columns:5}}
  @media(min-width:2200px){.grid{columns:6}}
  @media(max-width:1200px){.grid{columns:3}}
  @media(max-width:800px){.grid{columns:2}}
  /* место под картинку резервируем ДО её загрузки: у аватарок и значков не было
     ни width/height, ни пропорции, и на медленной сети они двигали вёрстку.
     Все эти классы квадратные, поэтому одного правила достаточно */
  .ava-pic,.ic,.gs-ic,.cn,.bc-pmimg{aspect-ratio:1/1}
  .work{break-inside:avoid;margin-bottom:14px;border-radius:var(--r);overflow:hidden;position:relative;background:var(--card);border:1px solid var(--line);cursor:pointer;transition:transform .2s,box-shadow .2s}
  .work:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(255,120,2,.18)}
  /* ссылка-накладка: краулеру нужен настоящий href на /work/rN, человеку - прежний
     клик по всей плитке. Отдельным слоем, а не обёрткой: внутри плитки живут кнопки
     (лайк, крестик админа, замок), а кнопка внутри ссылки - невалидная разметка.
     z-index 2 - выше картинки и затемнения, ниже кнопок (у них 3..6) */
  .wlink{position:absolute;inset:0;z-index:2;border-radius:inherit;text-decoration:none}
  /* Масонри: высота идёт от пропорций файла. height:auto ОБЯЗАТЕЛЕН - у img и video
     атрибут height работает как CSS-высота, и ролик 1920x1080 получал высоту 1080,
     обрезанную до max-height: горизонтальное видео выглядело растянутым по вертикали.
     Совсем вытянутые кадры (1:3) всё же подрезаем, иначе один снимок занимает всю колонку. */
  .thumb{width:100%;height:auto;display:block;max-height:520px;
    object-fit:cover;object-position:center top}
  /* нет размеров у старых работ - не даём схлопнуться в стандартные 150px */
  video.thumb:not([width]){aspect-ratio:3/4}
  .work .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.85),rgba(8,8,10,0) 45%)}
  /* крестик владельца: удалить работу из ленты в один клик. Существует
     только для админа (класс sw-adm на html после проверки /api/auth/me) */
  .adm-x{position:absolute;top:10px;right:10px;z-index:6;width:27px;height:27px;
    display:none;align-items:center;justify-content:center;border-radius:9px;
    background:rgba(8,8,10,.6);backdrop-filter:blur(8px);color:#fff;font-size:13px;
    border:1px solid rgba(255,255,255,.22);cursor:pointer;transition:background .15s}
  html.sw-adm .adm-x{display:flex}
  .adm-only{display:none!important}
  html.sw-adm .adm-only{display:inline-flex!important}
  .adm-x:hover{background:#e8574d;border-color:#e8574d}
  .badge{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:5px;background:rgba(8,8,10,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;z-index:3}
  /* Лайк - живая кнопка в правом НИЖНЕМ углу плитки (раньше сверху висел мёртвый счётчик).
     Не лайкнуто - тёмная плашка с контуром, лайкнуто - фирменная оранжевая заливка. */
  .likes{position:absolute;right:10px;bottom:14px;z-index:4;display:flex;align-items:center;gap:5px;
    font-family:inherit;font-size:11.5px;font-weight:700;line-height:1;color:#fff;
    background:rgba(8,8,10,.55);backdrop-filter:blur(8px);padding:6px 10px;border-radius:999px;
    border:1px solid rgba(255,255,255,.18);cursor:pointer;
    transition:transform .16s,background .16s,border-color .16s}
  .likes .hrt{font-size:12.5px;line-height:1}
  .likes .n{font-variant-numeric:tabular-nums}
  button.likes:hover{background:rgba(255,120,2,.3);border-color:rgba(255,120,2,.6);transform:scale(1.08)}
  button.likes:active{transform:scale(.92)}
  .likes.on{background:var(--btn);border-color:var(--accent-2);box-shadow:0 4px 14px rgba(255,120,2,.4)}
  button.likes.on:hover{background:var(--accent-2);color:#1a1102}
  .likes.ro{cursor:default;opacity:.6}          /* своя работа: лайкать нельзя - остаётся просто счётчик */
  @media(prefers-reduced-motion:reduce){
    .likes{transition:none}
    button.likes:hover,button.likes:active{transform:none}
  }
  /* padding справа - место под кнопку лайка: подпись не должна заезжать в её угол */
  .meta{position:absolute;left:0;right:0;bottom:0;padding:12px 66px 12px 12px;display:flex;align-items:center;gap:8px;z-index:3}
  .ava{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);flex-shrink:0}
  /* min-width:0 обязателен: по умолчанию флекс-элемент не ужимается уже содержимого,
     и длинное название вылезало за плитку вместо многоточия */
  .meta .mtx{min-width:0;overflow:hidden}
  .w-title{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .w-user{font-size:11px;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* оригинал-фото на оживших работах */
  .orig{
    position:absolute;top:10px;left:10px;z-index:4;
    width:64px;border-radius:11px;overflow:hidden;
    border:2px solid rgba(255,255,255,.85);
    box-shadow:0 4px 14px rgba(0,0,0,.5);
    transition:transform .2s;
  }
  .orig svg{display:block;width:100%}
  .orig .lbl{
    position:absolute;left:0;right:0;bottom:0;
    background:rgba(8,8,10,.75);color:#fff;
    font-size:8.5px;font-weight:700;text-align:center;
    padding:2.5px 0;letter-spacing:.3px;text-transform:uppercase;
  }
  .work:hover .orig{transform:scale(1.6);transform-origin:top left}
  .work[data-type="animate"] .badge{left:auto;right:10px;top:auto;bottom:52px;background:rgba(255,180,61,.4);border-color:rgba(255,180,61,.5)}

  /* видео-карточки */
  .play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
    width:46px;height:46px;border-radius:50%;
    background:rgba(8,8,10,.55);backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.35);
    display:flex;align-items:center;justify-content:center;
    transition:transform .2s,background .2s;
  }
  .play svg{width:17px;height:17px;margin-left:2px}
  .work:hover .play{transform:translate(-50%,-50%) scale(1.12);background:rgba(255,120,2,.5)}
  .dur{position:absolute;bottom:52px;right:10px;z-index:3;background:rgba(8,8,10,.7);color:#fff;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:7px;font-variant-numeric:tabular-nums}

  /* ---------- главный баннер (стиль girli): текст слева, 3 кнопки справа ---------- */
  .g-hero{
    position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);
    display:flex;align-items:stretch;gap:20px;padding:30px 28px;min-height:264px;
    background:
      radial-gradient(ellipse 75% 130% at 88% 8%,rgba(255,120,2,.30),transparent 55%),
      radial-gradient(ellipse 60% 110% at 6% 95%,rgba(255,180,61,.14),transparent 60%),
      linear-gradient(120deg,#151210,#33200e 55%,#1b1512);
  }
  /* баннер вместо хиро (арт грузится в админке: Swaplse -> Интерфейс -> Баннеры).
     Текст НЕ впечён в картинку: он живёт HTML-оверлеем - масштабируется clamp'ом и
     переводится через I18N (растровые буквы не умели ни того, ни другого). */
  /* размер ОДИН на все баннеры - эталон полосы «Видео»: 1920x300, кап 250px.
     У главной раньше была своя высота 340 - текст в ней болтался в пустоте */
  .vit-banner{position:relative;display:block;border-radius:var(--r);overflow:hidden;
    margin-bottom:22px;border:1px solid var(--line);background:var(--bg-2);
    aspect-ratio:1920/300;max-height:250px;text-decoration:none}
  .vit-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .vit-banner::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(8,8,10,.93) 0%,rgba(8,8,10,.8) 34%,rgba(8,8,10,0) 66%)}
  .vb-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
    justify-content:center;align-items:flex-start;gap:10px;padding:0 clamp(20px,4vw,54px)}
  .vb-chip{background:var(--btn);color:#1a0d00;font-weight:800;font-size:clamp(10px,1vw,13px);
    padding:6px 13px;border-radius:999px;letter-spacing:.2px}
  /* строго одна строка: перенос заголовка ломал композицию и выдавливал кнопку из кадра.
     Тексты подобраны короткими (и в RU, и в EN), шрифт сам ужимается по vw */
  .vb-h{color:#fff;font-weight:800;line-height:1.1;letter-spacing:-.5px;margin:0;
    font-size:clamp(18px,2.2vw,34px);white-space:nowrap}
  .vb-s{color:#e7e0d6;font-size:clamp(11px,1.1vw,15px);line-height:1.4;white-space:nowrap}
  .vb-cta{background:var(--btn);color:#fff;font-weight:800;font-size:clamp(12px,1.15vw,16px);
    padding:clamp(8px,1vw,13px) clamp(16px,2vw,28px);border-radius:12px;margin-top:2px;
    box-shadow:0 2px 14px rgba(255,120,2,.25)}
  .vit-banner:hover .vb-cta{transform:translateY(-1px)}
  /* промо-бонус (гостям): золотой чип и пульс кнопки - это главный вход в воронку */
  .vit-banner.promo{cursor:pointer;border-color:rgba(255,120,2,.45)}
  .vit-banner.promo .vb-chip{background:linear-gradient(90deg,#ffd77a,#ff9b2f);color:#2a1400}
  .vit-banner.promo .vb-h{color:#fff}
  /* сама анимация живёт на ::after (см. выше) - здесь только базовый вид */
  /* было: анимация box-shadow - её браузер перерисовывает каждый кадр на главном
     потоке. Стало: свечение лежит на псевдоэлементе, мигает прозрачность - это
     умеет видеокарта, главный поток свободен */
  .vit-banner.promo .vb-cta{position:relative;box-shadow:0 2px 14px rgba(255,120,2,.25)}
  .vit-banner.promo .vb-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;
    box-shadow:0 2px 22px rgba(255,120,2,.6);opacity:0;pointer-events:none;
    animation:vbPulse 2.6s ease-in-out infinite;will-change:opacity}
  @keyframes vbPulse{0%,100%{opacity:0}50%{opacity:1}}
  @media(prefers-reduced-motion:reduce){.vit-banner.promo .vb-cta::after{animation:none}}

  /* ======== creator economy (макет swapise-creator-economy) ======== */
  @keyframes ecoShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
  @keyframes ecoGlow{0%,100%{box-shadow:0 0 24px rgba(255,201,77,.25)}50%{box-shadow:0 0 44px rgba(255,201,77,.5)}}

  /* --- экран 1: чипы на медиа + полоса заработка --- */
  .wm-media{flex:1;min-width:0;display:flex;flex-direction:column}
  .wm-ov{position:absolute;left:0;right:0;bottom:0;padding:14px;display:flex;justify-content:space-between;
    align-items:flex-end;gap:10px;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none}
  .wm-chips{display:flex;gap:8px;flex-wrap:wrap}
  .wm-chip{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);
    border-radius:18px;padding:6px 12px;font-size:12.5px;display:flex;align-items:center;gap:6px;color:#eee}
  .wm-chip.hot{border-color:var(--btn);color:#ff9433}
  .earn-strip{display:flex;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
    overflow:hidden;margin-top:14px}
  .earn-cell{flex:1;padding:14px;text-align:center;border-right:1px solid var(--line)}
  .earn-cell:last-child{border-right:none}
  .earn-cell .v{font-size:20px;font-weight:800}
  .earn-cell .v.green{color:#3ddc84} .earn-cell .v.gold{color:#ffc94d} .earn-cell .v.orange{color:var(--btn)}
  .earn-cell .k{font-size:11px;color:var(--muted);margin-top:3px}

  /* --- экран 1: правая колонка карточками (как .card в макете) --- */
  .eco-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
  .eco-au{display:flex;align-items:center;gap:12px}
  .eco-au .ava{width:52px;height:52px;border-radius:50%;position:relative;flex:none}
  .eco-au .ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid #ffc94d;opacity:.9}
  .eco-au .lvl{position:absolute;bottom:-4px;right:-4px;background:#ffc94d;color:#231400;font-size:10px;
    font-weight:700;border-radius:10px;padding:2px 6px;border:2px solid var(--bg-2);font-style:normal}
  .eco-au .info{flex:1;min-width:0;text-decoration:none;color:inherit}
  .eco-au .nm{font-weight:600;font-size:15px;display:flex;align-items:center;gap:6px}
  .eco-au .mt{font-size:12px;color:var(--muted);margin-top:2px}
  .btn-follow{background:transparent;border:1px solid var(--btn);color:var(--btn);font-family:inherit;
    font-weight:600;font-size:13px;padding:7px 14px;border-radius:10px;cursor:pointer;white-space:nowrap}
  .btn-follow:hover{background:var(--btn);color:#fff}
  .btn-follow.on{border-color:var(--line);color:var(--muted)}
  .eco-cta{width:100%;background:var(--btn);color:#fff;border:none;border-radius:10px;padding:12px 16px;
    font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;
    justify-content:center;gap:8px}
  .eco-cta:hover{background:#ff9433}
  .price-note{text-align:center;font-size:12px;color:var(--muted);margin-top:8px}
  .price-note b{color:#3ddc84}
  .row-btns{display:flex;gap:8px;margin-top:10px}
  .row-btns button{position:relative;flex:1;background:var(--bg-3);color:var(--text);
    border:1px solid var(--line);border-radius:10px;padding:11px 10px;font-family:inherit;
    font-size:17px;line-height:1;font-weight:600;cursor:pointer}
  .row-btns button:hover{border-color:var(--muted)}
  /* подпись кнопки - по наведению: четыре названия в ряд не помещались и жались.
     Атрибут data-hint, а не data-tip: тот в карточке уже занят чаевыми автору */
  .row-btns button[data-hint]::after{content:attr(data-hint);position:absolute;
    left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
    background:var(--bg);border:1px solid var(--line);border-radius:8px;
    padding:5px 9px;font-size:11.5px;font-weight:700;color:var(--text);
    white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:6}
  .row-btns button[data-hint]:hover::after,
  .row-btns button[data-hint]:focus-visible::after{opacity:1}
  @media(hover:none){.row-btns button[data-hint]::after{display:none}}
  .sec-title{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;
    margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
  .sec-title .lnk{color:var(--btn);cursor:pointer;text-transform:none;letter-spacing:0;font-size:12px}
  .prompt-box{position:relative;background:var(--bg-3);border:1px solid var(--line);border-radius:10px;
    padding:12px;font-size:13px;color:var(--muted);line-height:1.5;min-height:74px}
  .prompt-blur{filter:blur(5px);user-select:none}
  .prompt-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:8px;background:rgba(20,20,20,.35);border-radius:10px}
  .prompt-lock .eco-cta{width:auto;padding:8px 16px;font-size:13px}
  .lock-note{font-size:11px;color:var(--muted)}
  .lock-note b{color:#ffc94d}
  .tip-row{display:flex;gap:8px}
  .tip{flex:1;background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:9px 0;
    text-align:center;font-size:13px;cursor:pointer;color:#ffc94d;font-weight:600;font-family:inherit}
  .tip:hover{border-color:#ffc94d}
  .rmx{display:flex;gap:8px;flex-wrap:wrap}
  .rmx a{width:64px;height:80px;border-radius:8px;overflow:hidden;display:block;background:var(--bg-3)}
  .rmx a img,.rmx a video{width:100%;height:100%;object-fit:cover;display:block}
  .rmx .more{width:64px;height:80px;border-radius:8px;background:var(--bg-3);display:flex;
    align-items:center;justify-content:center;color:var(--muted);font-size:12px}
  .remix-src{display:block;background:rgba(255,120,2,.10);border:1px solid rgba(255,120,2,.35);
    border-radius:10px;padding:9px 12px;margin-bottom:12px;font-size:12.5px;color:#ffb43d;text-decoration:none}
  .remix-src:hover{border-color:var(--btn)}
  .remix-src b{color:#fff}
  .lora-lock{background:rgba(255,120,2,.12)!important;border-color:rgba(255,120,2,.4)!important;
    color:#ffb43d!important;cursor:pointer}
  .lora-lock:hover{border-color:var(--btn)!important}
  .stars{display:flex;justify-content:center;gap:6px;margin-top:6px}
  .stars button{background:none;border:none;font-size:34px;line-height:1;cursor:pointer;
    color:#3a3a40;transition:color .12s;padding:0 2px}
  .stars button.on{color:#ffc94d}

  /* --- экран 2: профиль (cover2 + prof-panel из макета) --- */
  .cover2{height:220px;border-radius:var(--r) var(--r) 0 0;position:relative;overflow:hidden;
    border:1px solid var(--line);border-bottom:none;
    background:linear-gradient(115deg,#1a0e05 0%,#3d1f0a 35%,#241105 70%,#120903 100%)}
  .cover2::before{content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:36px 36px}
  .cover2 .orb{position:absolute;border-radius:50%;filter:blur(50px)}
  .cover2 .o1{width:340px;height:340px;background:rgba(255,120,2,.30);top:-140px;right:6%}
  .cover2 .o2{width:220px;height:220px;background:rgba(176,107,255,.16);bottom:-120px;left:16%}
  .cover2 .o3{width:160px;height:160px;background:rgba(255,201,77,.18);top:-40px;left:44%}
  .cover-stats{position:absolute;top:16px;right:16px;display:flex;gap:8px;flex-wrap:wrap}
  .cover-chip{background:rgba(0,0,0,.45);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
    border-radius:20px;padding:7px 14px;font-size:12px;display:flex;align-items:center;gap:6px}
  .cover-chip b{color:#ffc94d}
  .prof-panel{background:var(--bg-2);border:1px solid var(--line);border-top:none;
    border-radius:0 0 var(--r) var(--r);padding:0 24px 22px;position:relative;margin-bottom:18px}
  .prof-head{display:flex;gap:22px;align-items:flex-end;margin-top:-56px;position:relative;z-index:2;flex-wrap:wrap}
  .ava-big{width:118px;height:118px;border-radius:50%;position:relative;flex-shrink:0;
    background:conic-gradient(#ffc94d,var(--btn),#b06bff,#ffc94d);padding:4px;animation:ecoGlow 4s ease-in-out infinite}
  .ava-big .inner{width:100%;height:100%;border-radius:50%;border:4px solid var(--bg-2)}
  .ava-big .lvl-badge{position:absolute;bottom:2px;right:2px;background:#ffc94d;color:#231400;
    font-size:12px;font-weight:700;border-radius:10px;padding:3px 9px;border:2px solid var(--bg-2)}
  .prof-id{flex:1;min-width:220px;padding-bottom:8px}
  .prof-id .name{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .rank-pill{background:linear-gradient(90deg,#ffc94d 25%,#fff3d0 50%,#ffc94d 75%);background-size:200% 100%;
    animation:ecoShimmer 3s linear infinite;color:#231400;font-size:11px;font-weight:800;padding:4px 12px;
    border-radius:12px;letter-spacing:.5px}
  .streak-pill{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.4);color:#ff8a6a;
    font-size:11px;font-weight:700;padding:4px 10px;border-radius:12px}
  .prof-id .bio{font-size:13px;color:var(--muted);margin-top:6px;max-width:480px}
  .prof-id .quick{display:flex;gap:18px;margin-top:10px;font-size:13px;color:var(--muted);flex-wrap:wrap}
  .prof-id .quick b{color:var(--text);font-size:14px}
  .prof-actions{display:flex;gap:8px;padding-bottom:10px}
  .prof-actions .btn-ghost{background:var(--bg-3);color:var(--text);border:1px solid var(--line);
    border-radius:10px;padding:7px 14px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
  .prof-actions .btn-ghost:hover{border-color:var(--muted)}
  .prof-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:22px 0}
  @media(max-width:900px){.prof-stats{grid-template-columns:repeat(3,1fr)}}
  .pstat{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:14px 12px;
    position:relative;overflow:hidden;transition:.2s}
  .pstat:hover{transform:translateY(-2px);border-color:var(--muted)}
  .pstat{text-align:center}
  .pstat .v{font-size:21px;font-weight:800}
  .pstat .k{font-size:11px;color:var(--muted);margin-top:2px}
  .delta{font-size:11px;font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:3px;
    border-radius:8px;padding:2px 7px}
  .delta.up{color:#3ddc84;background:rgba(61,220,132,.1)}
  .delta.zero{color:var(--muted);background:rgba(255,255,255,.05)}
  .pstat.hl{border-color:rgba(255,120,2,.5);background:linear-gradient(180deg,rgba(255,120,2,.10),var(--bg-2))}
  .pstat.hl2{border-color:rgba(255,201,77,.5);background:linear-gradient(180deg,rgba(255,201,77,.10),var(--bg-2))}
  .level-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap;position:relative;overflow:hidden;
    background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:16px}
  .level-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,#ffc94d,var(--btn),transparent)}
  .level-num{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .level-num .inner{width:58px;height:58px;border-radius:50%;background:var(--bg-2);display:flex;
    flex-direction:column;align-items:center;justify-content:center}
  .level-num .n{font-size:19px;font-weight:800;color:#ffc94d}
  .level-num .s{font-size:9px;color:var(--muted);text-transform:uppercase}
  .level-info{flex:1;min-width:240px}
  .level-info .t{font-weight:700;font-size:16px}
  .level-info .t span{color:#ffc94d}
  .level-info .d{font-size:12px;color:var(--muted);margin-top:3px}
  .bar{height:9px;background:var(--bg-3);border-radius:6px;margin-top:10px;overflow:hidden}
  .bar>div{height:100%;background:linear-gradient(90deg,#ffc94d,var(--btn));border-radius:6px}
  .bar-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:5px}
  .perk{background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:10px 14px;
    font-size:12px;color:var(--muted)}
  .perk b{color:#3ddc84;display:block;font-size:14px;margin-bottom:2px}
  .perk.next{border-style:dashed;opacity:.7}
  .perk.next b{color:var(--muted)}
  .badges{display:flex;gap:10px;flex-wrap:wrap}
  /* .ach, а НЕ .badge: класс .badge занят значком типа на плитке работы */
  .ach{border-radius:12px;padding:10px 14px;font-size:13px;display:flex;align-items:center;gap:9px;
    background:var(--bg-3);border:1px solid var(--line)}
  .ach .b-ic{font-size:20px}
  .ach .b-t{font-weight:600;font-size:12.5px}
  .ach .b-r{display:block;font-size:10px;margin-top:1px;text-transform:uppercase;letter-spacing:.5px}
  .ach.epic{border-color:rgba(176,107,255,.5);background:linear-gradient(180deg,rgba(176,107,255,.10),var(--bg-3))}
  .ach.epic .b-r{color:#b06bff}
  .ach.legend{border-color:rgba(255,201,77,.55);background:linear-gradient(180deg,rgba(255,201,77,.12),var(--bg-3));
    animation:ecoGlow 5s ease-in-out infinite}
  .ach.legend .b-r{color:#ffc94d}
  .ach.rare{border-color:rgba(77,163,255,.45);background:linear-gradient(180deg,rgba(77,163,255,.08),var(--bg-3))}
  .ach.rare .b-r{color:#4da3ff}
  .ach.locked{opacity:.35;filter:grayscale(1)}
  .ach.locked .b-r{color:var(--muted)}
  .tabs2{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:24px 0 18px;flex-wrap:wrap}
  .tabs2 .t{padding-bottom:10px;font-size:14px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
  .tabs2 .t.on{color:var(--text);border-color:var(--btn);font-weight:600}
  .tabs2 .t .cnt{font-size:11px;color:var(--muted);margin-left:4px}
  .work .earn-tag{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
    color:#3ddc84;font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px;
    border:1px solid rgba(61,220,132,.4);z-index:3}

  /* --- экран 3: лидерборд --- */
  .lb-hero{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid rgba(255,201,77,.35);
    padding:26px 28px;margin-bottom:26px;background:linear-gradient(115deg,#1c1205 0%,#2e1c07 45%,#181005 100%)}
  .lb-hero::before{content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 80% 0%,rgba(255,201,77,.22),transparent 55%),
      radial-gradient(ellipse at 10% 100%,rgba(255,120,2,.16),transparent 50%)}
  .lb-hero-in{position:relative;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .lb-hero .cup{font-size:52px;filter:drop-shadow(0 0 18px rgba(255,201,77,.5))}
  .lb-hero .txt{flex:1;min-width:240px}
  .lb-hero .t{font-size:20px;font-weight:800}
  .lb-hero .t span{color:#ffc94d}
  .lb-hero .d{font-size:13px;color:var(--muted);margin-top:4px}
  .countdown{display:flex;gap:8px}
  .cd{background:rgba(0,0,0,.45);border:1px solid rgba(255,201,77,.3);border-radius:10px;padding:10px 14px;
    text-align:center;min-width:62px}
  .cd .n{font-size:20px;font-weight:800;color:#ffc94d}
  .cd .l{font-size:10px;color:var(--muted);text-transform:uppercase;margin-top:2px}
  .lb-filters{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}
  .seg{display:flex;background:var(--bg-3);border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .seg button{padding:8px 16px;font-size:13px;color:var(--muted);cursor:pointer;background:none;
    border:none;font-family:inherit}
  .seg button.on{background:var(--btn);color:#fff;font-weight:600}
  .podium{display:flex;align-items:flex-end;gap:16px;margin-bottom:30px;justify-content:center;flex-wrap:wrap}
  .pod{flex:1;min-width:220px;max-width:300px;background:var(--bg-2);border:1px solid var(--line);
    border-radius:16px;padding:20px 16px 16px;text-align:center;position:relative;transition:.2s;
    text-decoration:none;color:inherit;display:block}
  .pod:hover{transform:translateY(-4px)}
  .pod .p-ava{width:72px;height:72px;border-radius:50%;margin:0 auto;position:relative;padding:3px}
  .pod .p-ava .in{width:100%;height:100%;border-radius:50%;border:3px solid var(--bg-2)}
  .pod .crown{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:26px}
  .pod .p-place{position:absolute;top:12px;left:14px;font-size:26px;font-weight:900;opacity:.9}
  .pod .p-name{font-weight:700;font-size:15px;margin-top:12px}
  .pod .p-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
  .pod .p-stats{display:flex;justify-content:center;gap:14px;margin-top:12px;font-size:12px;color:var(--muted)}
  .pod .p-stats b{display:block;font-size:15px;color:var(--text)}
  .pod .p-prize{margin-top:14px;border-radius:10px;padding:8px;font-weight:800;font-size:14px}
  .pod1{max-width:330px;padding-top:30px;border-color:#ffc94d;
    background:linear-gradient(180deg,rgba(255,201,77,.12),var(--bg-2) 55%);animation:ecoGlow 4s ease-in-out infinite;z-index:2}
  .pod1 .p-ava{width:88px;height:88px;background:conic-gradient(#ffc94d,#fff3d0,#ffc94d)}
  .pod1 .p-place{color:#ffc94d}
  .pod1 .p-prize{background:linear-gradient(90deg,#ffc94d,#ffaa00);color:#231400}
  .pod2{border-color:#9fb2c8;background:linear-gradient(180deg,rgba(159,178,200,.08),var(--bg-2) 55%)}
  .pod2 .p-ava{background:linear-gradient(135deg,#c8d4e2,#7a8ea6)}
  .pod2 .p-place{color:#b9c8da}
  .pod2 .p-prize{background:rgba(159,178,200,.15);color:#c8d6e6;border:1px solid rgba(159,178,200,.4)}
  .pod3{border-color:#c98d5a;background:linear-gradient(180deg,rgba(201,141,90,.08),var(--bg-2) 55%)}
  .pod3 .p-ava{background:linear-gradient(135deg,#e0a878,#9a6236)}
  .pod3 .p-place{color:#d99a63}
  .pod3 .p-prize{background:rgba(201,141,90,.15);color:#e6b88a;border:1px solid rgba(201,141,90,.4)}
  @media(max-width:800px){.podium{flex-direction:column;align-items:stretch}.pod{max-width:none}
    .pod1{order:1}.pod2{order:2}.pod3{order:3}}
  .lb-sec{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;flex-wrap:wrap}
  .lb-sec.tbl{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
  .lb-sec b{font-size:16px;font-weight:800}
  .lb-sec span{font-size:12.5px;color:var(--muted)}
  /* строки таблицы одинаковые: призовые места отличает только медалька, без рамок и заливок */
  .lb-row.top1 .lb-place,.lb-row.top2 .lb-place,.lb-row.top3 .lb-place{font-size:20px}
  .lb-row{display:flex;align-items:center;gap:14px;background:var(--bg-2);border:1px solid var(--line);
    border-radius:var(--r);padding:12px 16px;margin-bottom:10px;transition:.15s;text-decoration:none;color:inherit}
  .lb-row:hover{border-color:var(--muted);transform:translateX(3px)}
  .lb-place{width:34px;text-align:center;font-weight:800;font-size:16px;color:var(--muted)}
  .move{font-size:11px;font-weight:700;width:34px;text-align:center}
  .move.up{color:#3ddc84} .move.dn{color:#ff5a5a} .move.same{color:var(--muted)}
  .lb-ava{width:38px;height:38px;border-radius:50%;position:relative;flex:none}
  .lb-ava .lvl-badge{position:absolute;bottom:-3px;right:-3px;background:#ffc94d;color:#231400;
    font-size:9px;font-weight:800;border-radius:9px;padding:1px 5px;border:2px solid var(--bg-2)}
  .lb-name{flex:1;font-weight:600;font-size:14px;min-width:0}
  .lb-name span{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}

  /* своя строка в топе: подсветка вместо отдельной карточки, которая ездила по экрану */
  .lb-row.is-me{background:rgba(255,148,51,.10);
    box-shadow:inset 0 0 0 1px rgba(255,148,51,.35)}
  .lb-metric{text-align:right;font-size:12px;color:var(--muted);min-width:90px}
  .lb-metric b{display:block;color:var(--text);font-size:15px}
  .lb-prize{min-width:100px;text-align:right;color:#ffc94d;font-weight:700;font-size:14px}
  .me-card{border:1px solid var(--btn);border-radius:var(--r);padding:16px;margin-top:20px;position:sticky;
    bottom:12px;background:linear-gradient(90deg,rgba(255,120,2,.12),var(--bg-2) 40%);backdrop-filter:blur(8px);
    box-shadow:0 8px 32px rgba(0,0,0,.6)}
  .me-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .me-bar{margin-top:12px}
  @media(max-width:760px){
    /* 7 колонок в 356px не влезают: разрешаем перенос, метрики уводим во второй ряд,
       min-width убираем - иначе .lb-name схлопывается в ноль и текст лезет поверх */
    .lb-row,.me-top{flex-wrap:wrap;gap:8px 10px;padding:12px}
    .lb-row .move,.me-top .move{display:none}
    .lb-name{flex:1 1 auto;min-width:110px}
    .lb-metric{min-width:0;flex:0 0 auto;text-align:left;font-size:11.5px}
    .lb-metric b{display:inline;font-size:13px;margin-left:4px}
    .lb-row .lb-metric,.me-top .lb-metric{order:2}
    .lb-prize{min-width:0;order:2;margin-left:auto;font-size:13px}
    .prof-panel{padding:0 14px 18px}
  }

  /* ---------- мобильные доводки (02.08.2026) ---------- */
  @media(max-width:760px){
    /* 1. вкладки разделов: в 360px влезала одна «Главная», остальные уезжали за край
       без всякого признака прокрутки - ужимаем и снимаем счётчики */
  }
  @media(max-width:620px){
    /* Пять подписей в 360px не помещаются ни при каком шрифте: на узком экране
       оставляем только иконки, подпись показываем у активной вкладки. Прокрутка
       вбок тут не годится - человек просто не догадывается, что там что-то есть. */
    /* 2. подвал: девять юридических ссылок в строку читались как каша */
    .vf-links{justify-content:center;gap:6px 14px;text-align:center;line-height:2}
    .vf-bottom{flex-direction:column;align-items:center;text-align:center;gap:10px}
    /* 4. строка турнира: два ряда с понятным порядком, а не свалка переносов */
    .lb-row,.me-top{align-items:flex-start}
    .lb-name{flex:1 1 100%;min-width:0}
    .lb-row .lb-metric,.me-top .lb-metric{order:3}
    .lb-prize{order:4}
  }
  @media(max-width:960px){
    /* 3. в шторке последний пункт обрезался нижним краем экрана */
    .side{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:26px}
    .side .foot{padding-bottom:10px}
  }

  /* серверный блок контента (h1 + описание) для краулера и для первого экрана:
     клиент снимает его, когда нарисует свою шапку категории/профиля/работы */
  .ssr-head{padding:18px 28px 0;max-width:900px}
  .ssr-head h1{font-size:26px;font-weight:800;letter-spacing:-.4px;margin:0 0 8px}
  /* серверный плеер: живёт секунду до отрисовки клиента, поэтому скромно */
  .ssr-video{width:100%;max-width:420px;border-radius:14px;display:block;margin:0 0 14px}
  .ssr-head p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 6px}
  .ssr-head .ssr-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .ssr-head .ssr-tags a{font-size:12px;color:var(--muted);text-decoration:none;
    border:1px solid var(--line);border-radius:999px;padding:5px 12px}
  @media(max-width:760px){.ssr-head{padding:14px 14px 0}.ssr-head h1{font-size:21px}}
  /* SEO-блок под кадром: та же карточка, что у соседних блоков страницы работы */
  .ssr-head.ssr-below{max-width:none;margin:14px 0 0;padding:16px 18px;
    background:var(--bg-2);border:1px solid var(--line);border-radius:14px}
  .ssr-head.ssr-below h1{font-size:18px;line-height:1.3;margin:0 0 6px;font-weight:800}
  .ssr-head.ssr-below p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}
  .ssr-head.ssr-below .ssr-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
  .ssr-head.ssr-below .ssr-tags a{font-size:11.5px;color:#cfc7bd;text-decoration:none;
    background:var(--bg-3);border:1px solid var(--line);border-radius:999px;
    padding:5px 11px;transition:border-color .15s,color .15s}
  .ssr-head.ssr-below .ssr-tags a:hover{color:#fff;border-color:var(--btn)}
  /* аватарка поверх градиентной подложки: элемент общий для ленты, карточки,
     профиля и лидерборда - размер задаёт родитель */
  .ava-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
  /* свой профиль: и аватар, и обложка кликабельны - иначе непонятно, что их можно менять */
  .cover2.me{cursor:pointer}
  .cover2 .cover-edit{position:absolute;right:14px;top:14px;display:flex;gap:8px;align-items:center;
    z-index:3;font-size:12px;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);
    border-radius:999px;padding:7px 13px;backdrop-filter:blur(6px);transition:.15s}
  .cover2.me:hover .cover-edit{background:rgba(255,120,2,.85);border-color:transparent}
  .cover2 .cover-drag{opacity:.75;border-left:1px solid rgba(255,255,255,.3);padding-left:8px}
  .ava-big.me{cursor:pointer}
  .ava-big .ava-edit{position:absolute;left:0;right:0;bottom:0;z-index:3;text-align:center;
    font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);padding:5px 0;
    border-radius:0 0 999px 999px;opacity:0;transition:.15s}
  .ava-big.me:hover .ava-edit{opacity:1}
  .feed-more{display:flex;justify-content:center;padding:18px 0 26px}
  .feed-more button{background:var(--bg-2);border:1px solid var(--line);color:var(--text);
    font-family:inherit;font-size:13.5px;font-weight:600;padding:12px 26px;border-radius:12px;
    cursor:pointer;transition:.15s}
  .feed-more button:hover{border-color:var(--btn);color:#fff}
  /* скелетоны сетки: мерцающие плитки, пока работы едут с сервера */
  .sk-card{border-radius:14px;break-inside:avoid;margin-bottom:14px;
    background:linear-gradient(100deg,#141416 40%,#1d1d22 50%,#141416 60%);
    background-size:200% 100%;animation:skSh 1.3s linear infinite}
  @keyframes skSh{to{background-position:-200% 0}}
  @media(prefers-reduced-motion:reduce){.sk-card{animation:none}}
  @media(max-width:760px){
    .vit-banner{aspect-ratio:1080/560;max-height:300px}
    .vit-banner::after{background:linear-gradient(90deg,rgba(8,8,10,.94) 0%,rgba(8,8,10,.72) 52%,rgba(8,8,10,.18) 100%)}
    .vb-h{font-size:clamp(17px,5vw,24px)}
    /* заголовок держим в одну строку, поэтому длинный ужимаем ступенями по числу
       символов. Короткие не трогаем - им уменьшаться незачем */
    .vb-h.vb-h2{font-size:clamp(15px,4.4vw,21px)}
    .vb-h.vb-h3{font-size:clamp(14px,3.9vw,19px)}
    .vb-h.vb-h4{font-size:clamp(12px,3.3vw,17px);letter-spacing:-.6px}
    .vb-s{font-size:clamp(10px,2.9vw,13px)}
  }
  .g-hero::before{content:"";position:absolute;right:-70px;top:-90px;width:330px;height:330px;border-radius:50%;background:rgba(255,120,2,.16);filter:blur(6px)}
  .gh-left{flex:1;min-width:0;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}
  .gh-kick{font-size:12px;font-weight:800;letter-spacing:1.6px;color:#ff9b3d;text-transform:uppercase;margin-bottom:10px}
  .gh-left h1{font-size:33px;font-weight:800;letter-spacing:-.5px;line-height:1.13;max-width:560px}
  .gh-left h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .gh-cta{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
  .gh-cta .note{font-size:13px;color:rgba(255,255,255,.8);font-weight:600}
  .gh-cta .note b{color:#fff}
  .gh-checks{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
  .gh-checks span{font-size:12.5px;color:rgba(255,255,255,.7);font-weight:600}
  .gh-right{width:256px;flex-shrink:0;position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;justify-content:center}
  @media(max-width:900px){.g-hero{flex-direction:column}.gh-right{width:100%}.gh-left h1{font-size:25px}}
  .a-side{display:flex;flex-direction:column;gap:10px}
  .a-mini{
    flex:1;position:relative;overflow:hidden;text-align:left;
    border-radius:14px;border:1px solid var(--line);padding:11px 14px;
    display:flex;align-items:center;gap:11px;color:#fff;
    transition:transform .2s,box-shadow .2s;
  }
  .a-mini:hover{transform:translateX(4px);box-shadow:0 10px 28px rgba(255,120,2,.22)}
  .a-mini .ic{width:32px;height:32px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14)}
  .a-mini .ic svg{width:16px;height:16px}
  .a-mini b{font-size:13.5px;font-weight:800;display:block}
  .a-mini span{font-size:11px;opacity:.7}
  .a-mini .go{margin-left:auto;opacity:.55;font-size:16px}
  .a-mini.c1{background:linear-gradient(135deg,#2a1a0c,#8a4512)}
  .a-mini.c2{background:linear-gradient(135deg,#31200e,#b9601a)}
  .a-mini.c3{background:linear-gradient(135deg,#241a12,#6b4520)}

  /* герой типовой страницы: полоса создания */
  .t-hero{
    position:relative;overflow:hidden;
    border-radius:20px;border:1px solid var(--line);
    padding:24px 26px;display:flex;align-items:center;gap:22px;
  }
  .t-hero .txt{flex:1;min-width:0}
  .t-hero h1,.t-hero .hx1{font-size:23px;font-weight:800;letter-spacing:-.3px}
  .t-hero p{color:rgba(255,255,255,.75);font-size:13.5px;margin-top:5px;max-width:520px}
  .t-hero .cost{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:rgba(8,8,10,.4);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;color:#ffd77a}
  .t-hero .acts{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
  .t-hero.h-img{background:radial-gradient(ellipse 70% 130% at 85% 0%,rgba(255,120,2,.32),transparent),linear-gradient(135deg,#1a1410,#33200e)}
  .t-hero.h-vid{background:radial-gradient(ellipse 70% 130% at 85% 0%,rgba(255,180,61,.32),transparent),linear-gradient(135deg,#1d1610,#3d2410)}
  .t-hero.h-anim{background:radial-gradient(ellipse 70% 130% at 85% 0%,rgba(255,200,140,.26),transparent),linear-gradient(135deg,#171310,#2c2116)}

  /* демка before/after в герое «Оживить» */
  .ba{display:flex;align-items:center;gap:10px;flex-shrink:0}
  .ba .fr{width:92px;border-radius:14px;overflow:hidden;border:2px solid rgba(255,255,255,.3);position:relative}
  .ba .fr svg{display:block;width:100%}
  .ba .fr .l{position:absolute;left:0;right:0;bottom:0;background:rgba(8,8,10,.7);font-size:9px;font-weight:700;text-align:center;padding:3px 0;text-transform:uppercase;letter-spacing:.3px}
  .ba .arrow{font-size:20px;color:rgba(255,255,255,.6)}
  .ba .fr.live{border-color:rgba(255,180,61,.7);box-shadow:0 0 18px rgba(255,180,61,.35)}
  @media(max-width:900px){.ba{display:none}}

  .presets{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:16px}
  .presets::-webkit-scrollbar{display:none}
  .preset{flex-shrink:0;width:104px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);text-align:center;transition:border-color .15s,transform .15s}
  .preset:hover{border-color:rgba(255,120,2,.5);transform:translateY(-2px)}
  .preset .pv{height:64px}
  .preset .nm{font-size:11px;font-weight:700;color:var(--text);padding:7px 4px}

  /* ---------- категории ---------- */
  .cats-bar{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
  .cats-search{flex:1;min-width:220px;max-width:520px;display:flex;align-items:center;gap:10px;
    background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:12px 18px;color:var(--muted)}
  .cats-search svg{width:17px;height:17px;flex-shrink:0}
  .cats-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);
    font-family:inherit;font-size:14px}
  .cats-search input::placeholder{color:var(--muted)}
  .cats-search input::-webkit-search-cancel-button{filter:invert(.6)}
  .cats-seg{margin-left:auto;display:flex;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:4px}
  .cats-seg button{background:none;border:none;color:var(--muted);font-family:inherit;font-size:13.5px;
    font-weight:700;padding:9px 22px;border-radius:999px;transition:.15s;white-space:nowrap}
  .cats-seg button:hover{color:var(--text)}
  .cats-seg button.on{background:var(--btn);color:#fff;box-shadow:0 2px 10px rgba(255,120,2,.16)}
  .cats-h{font-size:18px;font-weight:800;letter-spacing:-.2px;margin:0 0 14px}
  .cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;margin-bottom:30px}
  .cats-empty{grid-column:1/-1;color:var(--muted);font-size:14px;padding:10px 2px}
  .cat{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);height:150px;
    display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;
    padding:14px 16px;text-align:right;
    color:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
  .cat:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(255,120,2,.22);
    border-color:rgba(255,120,2,.45)}
  /* картинка отдельным слоем: её можно приглушить и оживить наведением, не трогая текст */
  /* тон едва заметный: чуть снимаем яркость и насыщенность, чтобы сетка выглядела
     одним стилем, а не сборником чужих ярких картинок. При наведении - как в оригинале. */
  .cat-img{position:absolute;inset:0;background-size:cover;background-position:center;
    filter:saturate(.92) brightness(.9);transform:scale(1.01);
    transition:filter .35s ease,transform .5s ease}
  .cat:hover .cat-img{filter:none;transform:scale(1.05)}
  /* лёгкая подложка только в правом нижнем углу - ровно под название */
  .cat-sh{position:absolute;inset:0;background:linear-gradient(300deg,
    rgba(8,6,4,.55) 0%,rgba(8,6,4,.22) 34%,rgba(8,6,4,0) 62%);transition:opacity .35s}
  .cat:hover .cat-sh{opacity:.75}
  .cat b{position:relative;z-index:2;font-size:16.5px;font-weight:800;letter-spacing:-.2px;
    text-shadow:0 1px 12px rgba(0,0,0,.75),0 0 3px rgba(0,0,0,.5);transition:color .2s}
  .cat:hover b{color:#ffd7ad}
  .cat .glow{position:absolute;right:-30px;top:-40px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.1)}

  /* ---------- шапка ленты категории: имя, описание, теги (это читает поисковик) ---------- */
  .cat-head{margin:0 0 16px}
  .cat-head h1,.cat-head .hx1{font-size:26px;font-weight:800;letter-spacing:-.4px}
  .cat-head p{color:var(--muted);font-size:14px;line-height:1.65;max-width:760px;margin-top:6px}
  .cat-head .tg{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
  .cat-head .tg span{background:var(--bg-2);border:1px solid var(--line);color:var(--muted);
    font-size:12px;padding:5px 11px;border-radius:999px}

  /* ---------- кабинет: настройки / монеты / пригласить ---------- */
  .cab{max-width:640px;margin:0 auto}   /* колонка кабинета по центру, как в girli */
  .cab h1,.cab .hx1{font-size:26px;font-weight:800;letter-spacing:-.4px;margin-bottom:6px}
  .cab-note{color:var(--muted);font-size:14px;margin-bottom:18px}
  .cab h1 + .cab-card,.cab .hx1 + .cab-card{margin-top:18px}
  .cab-card{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:12px}
  .cab-lb{display:block;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
  .cab-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:14px}
  .cab-row b{font-weight:600;color:var(--muted)}
  .cab-inline{display:flex;gap:10px;flex-wrap:wrap}
  .cab-in{flex:1;min-width:180px;background:var(--bg);border:1px solid var(--line);border-radius:12px;
    color:var(--text);font-family:inherit;font-size:14px;padding:11px 14px;outline:none}
  .cab-in:focus{border-color:rgba(255,120,2,.5)}
  .ava-grid{display:flex;flex-wrap:wrap;gap:10px}
  .ava-grid button{width:52px;height:52px;border-radius:14px;overflow:hidden;border:2px solid var(--line);background:var(--bg);padding:0}
  .ava-grid button img{width:100%;height:100%;object-fit:cover;display:block}
  .ava-grid button.on{border-color:var(--accent)}
  .opt-row{display:flex;gap:8px}
  .opt-row button{background:var(--bg);border:1px solid var(--line);color:var(--muted);font-family:inherit;
    font-size:13px;font-weight:700;padding:9px 18px;border-radius:11px}
  .opt-row button.on{background:rgba(255,120,2,.14);border-color:rgba(255,120,2,.5);color:#ffc078}
  .cab-out{width:100%;background:none;border:1px solid rgba(255,120,2,.35);color:#ffc078;font-family:inherit;
    font-size:14px;font-weight:700;padding:13px;border-radius:14px;margin-top:6px}
  .cab-out:hover{background:rgba(255,120,2,.1)}
  .cab-bal{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .cab-bal b{font-size:30px;font-weight:800;color:#ffc078}
  .cmini{width:1em;height:1em;vertical-align:-0.14em;display:inline-block;flex-shrink:0}
  .cb2-row b .cmini{width:1.05em;height:1.05em}
  /* шапка «кредиты + план» на странице монет (референс владельца) */
  .coins-bal2{padding:0;margin-top:16px}
  .cb2-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:13px 18px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted)}
  .cb2-row:last-child{border-bottom:none}
  .cb2-row b{font-size:15px;font-weight:800;color:var(--text)}
  .cb2-row b.acc{color:var(--accent)}
  .cab-soon{font-size:12.5px;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:8px 16px}
  .cab-log{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
  .cab-log div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
  .cab-log div:last-child{border-bottom:none}
  .cab-log .plus{color:#7fd48a;font-weight:700}
  .cab-log .minus{color:#ff9d8a;font-weight:700}
  .cab-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .cab-stat{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center}
  .cab-stat b{display:block;font-size:24px;font-weight:800;color:#ffc078}
  .cab-stat span{font-size:12px;color:var(--muted)}

  /* ---------- приглашения: две двери ----------
     Значения взяты из утверждённого макета: радиус 20, отступы 24, кнопка-пилюля
     высотой 50, шкала заголовка clamp(30-48). Своё тут только палитра (оранжевый
     сайта вместо макетного - на одной странице кабинета не должно быть своего
     оттенка бренда) и ширина колонки: кабинет 640px душил две карточки. */
  #p-invite .cab{max-width:880px}
  #p-invite{font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

  /* Плавное раскрытие как в макете. Анимируем не высоту (её мы не знаем), а
     строку сетки: 0fr -> 1fr. Внутренний слой обязателен - он держит
     min-height:0 и прячет перелив, пока карточка растёт. Раньше тут стоял
     атрибут hidden: переключалось мгновенно, рывком (возврат к макету 26.08). */
  .rf-view{display:grid;grid-template-rows:0fr;opacity:0;pointer-events:none;
           transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1),opacity .35s}
  .rf-view.open{grid-template-rows:1fr;opacity:1;pointer-events:auto}
  .rf-view>.rf-inner{min-height:0;overflow:hidden}
  /* когда раскрылось - перелив снова виден: иначе свечение карточки обрезается */
  .rf-view.open>.rf-inner{overflow:visible}
  /* восстановление сохранённого выбора не должно проигрывать анимацию */
  #p-invite.no-anim *{transition:none!important}
  @media (prefers-reduced-motion:reduce){.rf-view,.rf-col{transition:none!important}}

  .rf-hero{text-align:center;margin-bottom:44px}
  .rf-hero h1,.rf-hero .hx1{font-size:clamp(30px,5vw,48px);font-weight:800;letter-spacing:-.03em;
              line-height:1.1;text-wrap:balance}
  .rf-hero h1 .g,.rf-hero .hx1 .g{background:linear-gradient(90deg,var(--accent),#ffc46b);
                 -webkit-background-clip:text;background-clip:text;color:transparent}
  .rf-hero p{color:var(--muted);margin-top:12px;font-size:17px;line-height:1.5}

  .rf-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
  @media(max-width:720px){.rf-compare{grid-template-columns:1fr}}
  .rf-col{background:var(--bg-2);border:1px solid var(--line);border-radius:20px;
          overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
          transition:border-color .3s,box-shadow .3s,transform .2s}
  .rf-col:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.28)}
  .rf-col--hot{border-color:rgba(255,120,2,.5);box-shadow:0 0 56px rgba(255,120,2,.10)}
  .rf-col--hot:hover{border-color:var(--accent);box-shadow:0 0 64px rgba(255,120,2,.18)}
  .rf-head{padding:24px 24px 20px;border-bottom:1px solid var(--line)}
  .rf-ico{font-size:26px;line-height:1}
  .rf-head h2{font-size:20px;font-weight:800;margin-top:8px;white-space:nowrap}
  .rf-head p{color:var(--muted);font-size:14px;margin-top:4px}
  .rf-rows{padding:8px 24px;flex:1}
  .rf-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;
          border-bottom:1px solid var(--line);font-size:14px}
  .rf-row:last-child{border-bottom:0}
  .rf-row>span{color:var(--muted)}
  .rf-row>b{font-weight:700;text-align:right}
  .rf-row>b.hot{color:var(--accent)}
  .rf-foot{padding:20px 24px 24px}

  .rf-btn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;
          border:0;border-radius:999px;font:inherit;font-size:15px;font-weight:700;
          cursor:pointer;transition:.15s;text-decoration:none}
  .rf-btn--main{background:linear-gradient(135deg,var(--accent),#ff5f00);color:#1c1200}
  .rf-btn--main:hover{filter:brightness(1.08)}
  .rf-btn--soft{background:var(--bg-3);color:var(--text);border:1px solid var(--line)}
  .rf-btn--soft:hover{border-color:rgba(255,255,255,.24)}
  .rf-note{text-align:center;font-size:12px;color:var(--muted);margin-top:10px}

  .rf-card{background:var(--bg-2);border:1px solid var(--line);border-radius:20px}
  .rf-card--hot{border-color:rgba(255,120,2,.5);box-shadow:0 0 56px rgba(255,120,2,.12)}
  .rf-chead{display:flex;align-items:center;gap:14px;padding:22px 24px;
            border-bottom:1px solid var(--line)}
  .rf-chead h2{font-size:19px;font-weight:800}
  .rf-sub{color:var(--muted);font-size:13px;margin-top:2px}
  .rf-sub b{color:var(--accent);font-weight:700}
  .rf-change{margin-left:auto;flex:none;height:36px;padding:0 16px;border-radius:999px;
             border:1px solid var(--line);background:transparent;color:var(--muted);
             font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
  .rf-change:hover{color:var(--text);border-color:rgba(255,255,255,.24)}
  .rf-body{padding:24px;display:flex;flex-direction:column;gap:18px}

  .rf-lb{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
         color:var(--muted);margin-bottom:8px}
  .rf-linkrow{display:flex;gap:10px}
  .rf-linkrow input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);
                    border-radius:10px;color:var(--text);font:inherit;font-size:14px;
                    padding:0 14px;height:48px}
  .rf-copy{height:48px;padding:0 22px;border:0;border-radius:999px;font:inherit;
           font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;
           background:linear-gradient(135deg,var(--accent),#ff5f00);color:#1c1200}
  .rf-copy:hover{filter:brightness(1.08)}
  .rf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .rf-stat{background:var(--bg-3);border-radius:12px;padding:16px 8px;text-align:center}
  .rf-stat b{display:block;font-size:24px;font-weight:800;color:var(--accent);
             font-variant-numeric:tabular-nums}
  .rf-stat span{font-size:12px;color:var(--muted)}
  .rf-chips{display:flex;gap:8px;flex-wrap:wrap}
  .rf-chip{font-size:13px;font-weight:600;color:var(--text);background:var(--bg-3);
           border:1px solid var(--line);border-radius:999px;padding:8px 14px}
  .rf-chip.hot{color:var(--accent);border-color:rgba(255,120,2,.35);
               background:rgba(255,120,2,.08)}
  .rf-fine{font-size:13px;color:var(--muted);line-height:1.5;margin:0}

  /* ---------- настройки: разделы слева, содержимое справа ---------- */
  .set-wrap{display:flex;gap:18px;align-items:flex-start;margin-top:18px}
  .set-nav{width:210px;flex-shrink:0;display:flex;flex-direction:column;gap:4px}
  .set-tab{display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--muted);
    font-family:inherit;font-size:14px;font-weight:600;text-align:left;padding:11px 13px;border-radius:12px;transition:.15s}
  .set-tab span{font-size:15px;line-height:1}
  .set-tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
  .set-tab.on{color:var(--text);background:rgba(255,120,2,.12)}
  .set-body{flex:1;min-width:0}
  .set-sec{display:none}
  .set-sec.on{display:block;animation:pgIn .2s ease}
  .set-mail{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .set-mail b{font-size:15px;font-weight:700}
  .set-badge{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px}
  .set-badge.ok{background:rgba(94,215,140,.16);border:1px solid rgba(94,215,140,.4);color:#8ef0b4}
  .set-badge.no{background:rgba(255,120,2,.14);border:1px solid rgba(255,120,2,.4);color:#ffc078}
  .set-link{background:none;border:none;color:var(--accent);font-family:inherit;font-size:13px;
    font-weight:700;padding:8px 0 0;text-decoration:underline}
  .set-hint{color:var(--muted);font-size:12.5px;margin-top:10px;line-height:1.5}
  .set-upload{display:inline-flex;align-items:center;justify-content:center;background:var(--btn);color:#fff;
    font-weight:700;font-size:13.5px;padding:11px 20px;border-radius:12px;cursor:pointer;
    box-shadow:0 2px 12px rgba(255,120,2,.18)}
  .set-del{background:none;border:1px solid var(--line);color:var(--muted);font-family:inherit;
    font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:12px}
  .set-del:hover{color:var(--text);border-color:rgba(255,120,2,.45)}
  @media(max-width:820px){
    .set-wrap{flex-direction:column}
    .set-nav{width:100%;flex-direction:row;overflow-x:auto;scrollbar-width:none}
    .set-tab{flex-shrink:0}
  }

  /* ---------- магазин монет и тарифы ---------- */
  .cab-wide{max-width:980px}
  .packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
  .pack{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;
    padding:18px;text-align:center;transition:transform .18s,border-color .18s}
  .pack:hover{transform:translateY(-3px);border-color:rgba(255,120,2,.5)}
  .pack .coins{display:flex;align-items:center;justify-content:center;gap:8px;font-size:22px;font-weight:800;color:#ffc078}
  .pack .coins svg{width:26px;height:26px}
  .pack .price{font-size:15px;font-weight:700;color:var(--text);margin-top:8px}
  .pack .bonus{position:absolute;top:10px;right:10px;background:rgba(255,120,2,.16);border:1px solid rgba(255,120,2,.45);
    color:#ffc078;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px}
  .pack .buy{width:100%;margin-top:14px;background:var(--btn);color:#fff;border:none;font-family:inherit;
    font-weight:700;font-size:13.5px;padding:11px;border-radius:12px;box-shadow:0 2px 12px rgba(255,120,2,.18)}
  .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
  .plan{background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:22px;position:relative}
  .plan.best{border-color:rgba(255,120,2,.55)}
  .plan .tag{position:absolute;top:-11px;left:22px;background:var(--btn);color:#fff;font-size:11px;
    font-weight:800;padding:4px 12px;border-radius:999px}
  .plan h3{font-size:19px;font-weight:800}
  .plan .p{font-size:30px;font-weight:800;color:#ffc078;margin:10px 0 2px}
  .plan .p span{font-size:14px;font-weight:600;color:var(--muted)}
  .plan ul{list-style:none;margin:14px 0 18px;display:flex;flex-direction:column;gap:9px}
  .plan li{font-size:13.5px;color:#cfc7bd;display:flex;gap:9px}
  .plan li::before{content:"✓";color:var(--accent);font-weight:800}
  .plan .go{width:100%;background:var(--btn);color:#fff;border:none;font-family:inherit;font-weight:800;
    font-size:14.5px;padding:13px;border-radius:13px;box-shadow:0 2px 12px rgba(255,120,2,.18)}
  .plan .go.cur{background:none;border:1px solid var(--line);color:var(--muted);box-shadow:none}
  .plan-list{list-style:none;display:flex;flex-direction:column;gap:9px}
  .plan-list li{font-size:13.5px;color:#cfc7bd;display:flex;gap:9px}
  .plan-list li::before{content:"✓";color:var(--accent);font-weight:800}

  /* ---------- настройки v2: drill-down панели (порт girli-settings, наш чёрно-оранжевый) ---------- */
  .gs-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--bg-2);
    border:1px solid var(--line);border-radius:22px;padding:24px 26px;margin-top:22px;margin-bottom:20px}
  .gs-avwrap{position:relative;width:92px;height:92px;border-radius:50%;padding:0;
    border:2px solid rgba(255,120,2,.5);background:var(--bg);overflow:hidden;cursor:pointer;flex-shrink:0}
  .gs-av{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    font-size:32px;font-weight:800;color:#ffc078}
  .gs-av img{width:100%;height:100%;object-fit:cover;display:block}
  .gs-avhover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(10,10,12,.62);color:#fff;font-size:11px;font-weight:700;opacity:0;transition:.15s}
  .gs-avwrap:hover .gs-avhover{opacity:1}
  .gs-id{min-width:0}
  .gs-id b{display:block;font-size:25px;font-weight:800;letter-spacing:-.3px}
  .gs-id span{font-size:14px;color:var(--muted)}
  .gs-badges{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
  .gs-badge{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--line);
    color:var(--muted);font-size:13px;font-weight:700;padding:9px 15px;border-radius:999px}
  .gs-badge.gold{border-color:rgba(255,120,2,.45);color:#ffc078;background:rgba(255,120,2,.1)}
  .gs-pane{display:none}
  .gs-pane.on{display:block;animation:pgIn .18s ease}
  .gs-cap{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin:26px 4px 10px}
  .gs-cap.red{color:#ff8d7a}
  .gs-list{background:var(--bg-2);border:1px solid var(--line);border-radius:20px;overflow:hidden}
  .gs-row{display:flex;align-items:center;gap:15px;width:100%;background:none;border:none;
    border-bottom:1px solid var(--line);color:var(--text);font-family:inherit;font-size:15.5px;font-weight:600;
    text-align:left;padding:18px 20px;cursor:pointer;transition:background .12s}
  .gs-row:last-child{border-bottom:none}
  .gs-row:hover{background:rgba(255,120,2,.06)}
  .gs-row.static{cursor:default}
  .gs-row.static:hover{background:none}
  .gs-ic{width:38px;height:38px;flex-shrink:0;border-radius:11px;object-fit:cover}
  .gs-ric{width:38px;text-align:center;font-size:21px;flex-shrink:0}
  .gs-rt{flex:1;min-width:0}
  .gs-rt small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:3px;line-height:1.45}
  .gs-val{font-size:14px;font-weight:600;color:var(--muted);flex-shrink:0;max-width:45%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gs-val.acc{color:#ffc078}
  .gs-chev{color:var(--muted);font-size:18px;flex-shrink:0}
  .gs-check{color:var(--accent);font-weight:800;font-size:17px;flex-shrink:0}
  .gs-head{display:flex;align-items:center;gap:10px;margin-top:20px}
  .gs-back{background:none;border:none;color:var(--muted);font-family:inherit;font-size:13px;
    font-weight:700;padding:8px 10px 8px 0;cursor:pointer}
  .gs-back:hover{color:#ffc078}
  .gs-title{font-size:24px;font-weight:800;letter-spacing:-.3px;margin-bottom:4px}
  .gs-tog{position:relative;width:50px;height:29px;border-radius:999px;background:rgba(255,255,255,.14);
    border:none;cursor:pointer;flex-shrink:0;transition:background .15s}
  .gs-tog::after{content:"";position:absolute;top:3.5px;left:3.5px;width:22px;height:22px;border-radius:50%;
    background:#fff;transition:left .15s}
  .gs-tog.on{background:var(--accent)}
  .gs-tog.on::after{left:24.5px}
  .gs-hint{font-size:13px;color:var(--muted);margin:12px 4px 0;line-height:1.6}
  .gs-warn{background:rgba(255,90,60,.08);border:1px solid rgba(255,90,60,.3);border-radius:14px;
    padding:14px 16px;font-size:13px;line-height:1.55;color:#f3d9d2;margin-top:14px}
  .gs-warn b{display:block;color:#ff9c86;margin-bottom:4px}
  .gs-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
  .gs-pad{padding:18px 20px}
  .gs-fld{margin-bottom:12px}
  .gs-fld label{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
  /* история монет: свёрнута по умолчанию, внутри - своя прокрутка */
  .gs-ledger{max-height:300px;overflow-y:auto;border-top:1px solid var(--line);scrollbar-width:thin}
  .gs-le{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
  .gs-le:last-child{border-bottom:none}
  .gs-le .ic{width:38px;height:38px;flex-shrink:0;border-radius:11px;background:var(--bg);
    display:grid;place-items:center;font-size:17px}
  .gs-le .tx{flex:1;min-width:0}
  .gs-le b{display:block;font-size:14.5px;font-weight:600}
  .gs-le span{font-size:12.5px;color:var(--muted)}
  .gs-le .amt{font-size:15px;font-weight:800;flex-shrink:0}
  .gs-le .amt.plus{color:#7fd48a}
  .gs-le .amt.minus{color:#ff9d8a}
  .gs-ledger .empty{padding:20px;text-align:center;color:var(--muted);font-size:12.5px}
  .gs-row.open .gs-chev{transform:rotate(180deg);display:inline-block}
  .gs-chev{transition:transform .18s}

  .gs-plancard{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg-2);
    border:1px solid rgba(255,120,2,.4);border-radius:20px;padding:20px 22px}
  .gs-plancard b{display:block;font-size:17px}
  .gs-plancard small{color:var(--muted);font-size:13.5px}
  .gs-overlay{position:fixed;inset:0;z-index:250;background:rgba(6,6,8,.72);backdrop-filter:blur(7px);
    display:flex;align-items:center;justify-content:center;padding:20px}
  .gs-overlay[hidden]{display:none}  /* display:flex сильнее атрибута hidden - без этого шит открыт всегда */
  .gs-sheet{width:100%;max-width:430px;background:var(--bg-2);border:1px solid var(--line);
    border-radius:22px;padding:22px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:none}
  .gs-sheet h3{font-size:16.5px;font-weight:800}
  .gs-sheet .sub{font-size:12.5px;color:var(--muted);margin:4px 0 14px}
  .gs-avgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
  @media(max-width:640px){.gs-avgrid{grid-template-columns:repeat(4,1fr)}}
  .gs-avgrid button{aspect-ratio:1;border-radius:14px;overflow:hidden;border:2px solid var(--line);
    background:var(--bg);padding:0;cursor:pointer}
  .gs-avgrid button img{width:100%;height:100%;object-fit:cover;display:block}
  .gs-avgrid button.on{border-color:var(--accent)}

  /* ---------- монеты: дизайн girli-магазина в оранже + живые подсветки ---------- */
  @property --spang{syntax:'<angle>';initial-value:120deg;inherits:false}
  @keyframes swDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(34px,20px) scale(1.07)}}
  @keyframes swHue{to{background-position:220% 0}}
  @keyframes swSheen{0%,55%{left:-70%}100%{left:150%}}
  @keyframes swSpin{to{--spang:480deg}}
  @keyframes swPulse{0%,100%{opacity:.7}50%{opacity:1}}
  .coins-wrap{position:relative}
  .coins-orbs{position:absolute;inset:-30px 0 auto;height:520px;pointer-events:none;z-index:0}
  .coins-orbs i{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(90px);opacity:.4}
  .coins-orbs i:nth-child(1){left:-180px;top:-60px;background:rgba(255,120,2,.30);animation:swDrift 16s ease-in-out infinite}
  .coins-orbs i:nth-child(2){right:-200px;top:120px;background:rgba(255,180,61,.24);animation:swDrift 21s ease-in-out -8s infinite reverse}
  .coins-orbs i:nth-child(3){left:32%;top:320px;background:rgba(255,90,43,.15);animation:swDrift 25s ease-in-out -13s infinite}
  /* :not(.coins-orbs) обязателен: без него правило перебивает absolute у слоя орбов
     (равная специфичность, позже в файле) - 520px-слой вставал В ПОТОК и ронял контент вниз */
  .coins-wrap>*:not(.coins-orbs){position:relative;z-index:1}
  .coins-head{text-align:center}
  .coins-head h1,.coins-head .hx1{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.5px;
    background:linear-gradient(92deg,#f4f1ec,#ffb43d 32%,#ff7802 58%,#f4f1ec 85%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:swHue 7s linear infinite}
  .coins-head p{color:var(--muted);font-size:14px;margin:6px 0 20px}
  .coins-head .hot{color:#ffc078;font-weight:800}
  .coins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media(max-width:760px){.coins-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:420px){.coins-grid{grid-template-columns:1fr}}
  .coin-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
    padding:22px 14px 16px;border-radius:18px;text-align:center;cursor:pointer;
    background:radial-gradient(80% 58% at 50% 30%,rgba(255,192,84,.13),transparent 72%),var(--bg-2);
    border:1px solid var(--line);transition:transform .16s,border-color .18s,box-shadow .18s}
  .coin-card:hover{transform:translateY(-3px);border-color:rgba(255,206,90,.5);box-shadow:0 14px 34px rgba(0,0,0,.4)}
  .coin-badge{position:absolute;top:-10px;right:14px;z-index:2;white-space:nowrap;
    font-size:11px;font-weight:800;color:#fff;padding:4px 12px;border-radius:99px;background:var(--btn);
    box-shadow:0 4px 12px rgba(255,120,2,.4);overflow:hidden}
  /* наведение раздвигает бейдж: «+133%» -> «+133% монет». Ширина едет через max-width,
     чтобы не дёргалась вся карточка */
  .cb-more{display:inline-block;max-width:0;opacity:0;overflow:hidden;vertical-align:bottom;
    white-space:nowrap;
    /* разворот медленнее и мягче: короткий рывок читался как дёрганье вёрстки */
    transition:max-width .55s cubic-bezier(.22,.61,.24,1),opacity .38s ease .08s}
  .coin-card:hover .cb-more,.coin-card:focus-visible .cb-more{max-width:140px;opacity:1}
  @media (hover:none){.cb-more{max-width:110px;opacity:1}}
  @media (prefers-reduced-motion:reduce){.cb-more{transition:none}}
  .coin-badge::after{content:"";position:absolute;top:0;bottom:0;width:46%;left:-70%;transform:skewX(-18deg);
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);animation:swSheen 3.4s ease-in-out infinite}
  /* скелетон верхней кнопки кассы: место занято, кликать нечего */
  .pb-card.pbc-skel{pointer-events:none;position:relative;overflow:hidden}
  .pb-card.pbc-skel .pbc-txt,.pb-card.pbc-skel .pbc-tag,.pb-card.pbc-skel .pbc-marks{opacity:.28}
  .pb-card.pbc-skel::after{content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
    transform:translateX(-100%);animation:pbcSkel 1.15s ease-in-out infinite}
  @keyframes pbcSkel{to{transform:translateX(100%)}}
  @media (prefers-reduced-motion:reduce){.pb-card.pbc-skel::after{animation:none}}
  .coin-art-wrap{width:100%;max-width:116px;position:relative;margin:4px auto 0}
  .coin-art-wrap::before{content:"";position:absolute;inset:-22% -30%;border-radius:50%;
    background:radial-gradient(50% 52% at 50% 58%,rgba(255,198,92,.42),rgba(255,170,60,.14) 55%,transparent 76%);
    filter:blur(16px);pointer-events:none}
  .coin-art{position:relative;width:100%;height:auto;display:block}
  .coin-amt{display:flex;align-items:center;justify-content:center;gap:7px;font-size:22px;font-weight:800;
    color:#ffc078;font-variant-numeric:tabular-nums}
  .coin-amt svg{width:22px;height:22px}
  /* плашка цены заливается брендовым градиентом на ховере - фирменный ход girli */
  .coin-price{width:100%;text-align:center;padding:10px;border-radius:11px;font-size:14px;font-weight:800;
    color:var(--text);background:rgba(255,255,255,.06);border:1px solid var(--line);margin-top:2px;
    transition:background .18s,border-color .18s,color .18s}
  .coin-price s{color:var(--muted);font-weight:600;font-size:12.5px;margin-right:6px}
  .coin-card:hover .coin-price{background:var(--grad);border-color:transparent;color:#160f05}
  .coin-card:hover .coin-price s{color:rgba(22,15,5,.55)}
  /* лучший пак: вращающаяся conic-рамка + дышащий glow (в старых Firefox рамка статична) */
  .coin-best{position:relative;border-radius:19.5px;padding:1.6px;
    background:conic-gradient(from var(--spang),#ff7802,#ffb43d,#ff5a2b,#ff7802);
    animation:swSpin 7s linear infinite}
  .coin-best::after{content:"";position:absolute;inset:-20px;border-radius:36px;z-index:-1;
    background:radial-gradient(55% 65% at 50% 30%,rgba(255,130,20,.22),transparent 72%);
    filter:blur(22px);animation:swPulse 4.5s ease-in-out infinite;pointer-events:none}
  .coin-best .coin-card{height:100%;border-color:transparent;
    background:radial-gradient(80% 58% at 50% 30%,rgba(255,192,84,.17),transparent 72%),#161210}
  .coins-promo{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;overflow:hidden;
    background:radial-gradient(120% 180% at 90% 20%,rgba(255,120,2,.22),rgba(24,19,13,.9) 60%),#151009;
    border:1px solid rgba(255,120,2,.35);border-radius:18px;padding:16px 20px;margin-top:16px}
  .cp-tag{position:relative;overflow:hidden;background:var(--grad);color:#160f05;font-size:11px;
    font-weight:800;padding:5px 13px;border-radius:999px;flex-shrink:0}
  .cp-tag::after{content:"";position:absolute;top:0;bottom:0;width:46%;left:-70%;transform:skewX(-18deg);
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:swSheen 4.2s ease-in-out infinite}
  .cp-txt{flex:1;min-width:200px}
  .cp-txt b{display:block;font-size:14.5px}
  .cp-txt span{font-size:12.5px;color:var(--muted)}
  .coins-foot{text-align:center;color:var(--muted);font-size:12.5px;margin-top:18px}
  @media(prefers-reduced-motion:reduce){
    .coins-orbs i,.coins-head h1,.coins-head .hx1,.coin-badge::after,.cp-tag::after,.coin-best,.coin-best::after{animation:none}
  }

  /* ---------- премиум: КОПИЯ girli-биллинга 1в1 (та же геометрия/строки), палитра swaplse.
     Решение владельца 07.08: старая версия (разные списки, 3 периода, «итого») путала людей. */
  /* Свечение фона ДО КРАЁВ колонки (просьба владельца). История граблей: орбы с
     минус-inset давали скроллбары, клип - швы, градиент на центрированном блоке - «плиту».
     Рабочий приём = как у .vfoot: страница минус-марджинами растягивает себя на паддинги
     .body, границы элемента совпадают с реальными краями макета - шву неоткуда взяться,
     а градиент внутри мягко гаснет, не доходя до низа. */
  #p-premium{margin:-24px calc(var(--pad-x,28px) * -1) calc(var(--pad-b,60px) * -1);
    padding:30px var(--pad-x,28px) 24px;
    background:radial-gradient(56% 460px at 50% -80px,rgba(255,120,2,.07),transparent 72%)}
  @media(max-width:700px){#p-premium{margin-top:-18px;padding-top:24px}}
  /* компакт-режим для невысоких окон (ноуты, зум 110%): страница обязана влезать без
     скролла - режем воздух, не трогая состав. Иначе владелец видит скроллбар «на пустом
     месте»: контент-то весь на экране, вылезал только нижний паддинг и щедрые отступы */
  @media(max-height:880px){
    .pm3-hero h2{font-size:clamp(20px,2vw,24px)}
    .pm3-hero>p{font-size:13.5px;margin-top:5px}
    .pm3-togglewrap{margin:8px 0 10px}
    .pm3-tg{padding:9px 22px}
    .pm3-tier{padding:14px 18px}
    .pm3-pr{margin:8px 0 0;padding-bottom:8px}
    .pm3-pr b{font-size:30px}
    .pm3-tier ul{margin:6px 0 10px}
    .pm3-tier ul li{padding:6px 4px 6px 28px}
    .pm3-tbtn{padding:10px 16px}
    .pm3-trust{margin:14px 0 0}
    .pm3-note{margin:9px 0 0}
    #p-premium{padding-top:18px;padding-bottom:14px}
  }
  /* совсем низкие окна (ноут + зум браузера): масштабируем блок целиком - пропорции
     сохраняются, скроллбара нет. zoom не знает только Firefox - там просто скролл */
  @media(max-height:800px){.pm3-wrap{zoom:.84}}
  .pm3-wrap{position:relative;isolation:isolate;max-width:1120px;margin-inline:auto}
  /* шапка по макету владельца (07.08): 2 строки заголовка + подзаголовок + строка доверия;
     вся страница обязана влезать в экран без скролла - карточки ужаты */
  .pm3-hero{text-align:center;padding:0}
  .pm3-hero h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.03em;margin:0;line-height:1.22;white-space:nowrap}
  .pm3-hero .g{background:linear-gradient(92deg,#ffb43d,#ff7802 40%,#ffd77a 75%,#ffb43d);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pm3Hue 7s linear infinite}
  @keyframes pm3Hue{to{background-position:220% 0}}
  /* слоган - ОДНОЙ строкой под названием раздела, строка доверия - ПОД карточками */
  .pm3-hero>p{font-size:15px;font-weight:600;color:#d9d2c9;margin:8px auto 0;line-height:1.5;white-space:nowrap}
  .pm3-togglewrap{display:flex;justify-content:center;margin:12px 0 16px}
  .pm3-note{text-align:center;font-size:12.5px;color:var(--muted);margin:26px 0 0}
  .pm3-trust{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;
    margin:26px 0 0;font-size:12.5px;color:var(--muted)}
  .pm3-trust span{display:inline-flex;align-items:center;gap:6px}
  .pm3-trust svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;flex:none}
  /* бейджи оплат: карты - в белой плашке (логотипы тёмные), крипто-монеты - цветные PNG.
     Между Visa и MC - разделитель, иначе логотипы сливаются */
  .pm3-pays{gap:8px}
  .pm3-pays em{display:inline-flex;align-items:center;background:#fff;border-radius:8px;
    padding:4px 10px;margin-right:2px}
  .pm3-pays em img{height:15px;width:auto;display:block}
  .pm3-pays em img+img{border-left:1px solid rgba(0,0,0,.16);padding-left:10px;margin-left:10px}
  .pm3-pays .cn{height:18px;width:18px;display:block}
  .pm3-toggle{position:relative;display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:5px;background:rgba(255,255,255,.04)}
  .pm3-pill{position:absolute;top:5px;bottom:5px;border-radius:99px;background:var(--grad);box-shadow:0 8px 22px rgba(255,120,2,.5),inset 0 1px 0 rgba(255,255,255,.28);transition:all .32s ease}
  .pm3-tg{position:relative;z-index:2;font-size:13px;font-weight:800;padding:11px 26px;border-radius:99px;color:var(--muted);transition:color .25s;white-space:nowrap;background:none;border:none;cursor:pointer;font-family:inherit}
  .pm3-tg.on{color:#fff}
  /* бейдж скидки - «ценник», слегка вылезающий за угол кнопки (просьба владельца) */
  .pm3-tg .sv{position:absolute;top:-11px;right:-14px;font-size:10.5px;font-weight:800;
    color:#3a2200;background:linear-gradient(135deg,#ffd77a,#ffb43d);border-radius:99px;
    padding:3px 8px;transform:rotate(8deg);letter-spacing:.02em;pointer-events:none;
    box-shadow:0 4px 14px rgba(255,180,61,.5),inset 0 1px 0 rgba(255,255,255,.55);z-index:3}
  .pm3-strike{color:var(--muted);text-decoration:line-through;font-weight:600;font-size:14px}
  .pm3-tiers{display:grid;grid-template-columns:1fr 1.16fr 1fr;gap:16px;align-items:stretch;max-width:980px;margin-inline:auto}
  .pm3-tier{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 46%),var(--bg-2);padding:20px 20px;display:flex;flex-direction:column;transition:transform .28s,border-color .28s,box-shadow .28s}
  .pm3-tier::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent)}
  .pm3-tier:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(0,0,0,.38)}
  .pm3-tn{font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:8px;margin:0}
  .pm3-bestfor{font-size:10.5px;color:var(--muted);margin-top:4px;letter-spacing:.02em}
  .pm3-pr{margin:12px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-bottom:11px;border-bottom:1px solid var(--line)}
  .pm3-pr b{font-size:36px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff 30%,#cfc8bf);-webkit-background-clip:text;background-clip:text;color:transparent}
  .pm3-pr b.bump{animation:pm3Bump .38s ease}
  @keyframes pm3Bump{0%{transform:scale(.9);opacity:.3}100%{transform:scale(1);opacity:1}}
  .pm3-pr .per{font-size:12px;color:var(--muted)}
  .pm3-tier ul{list-style:none;display:grid;gap:0;font-size:12.5px;color:#d9d2c9;margin:8px 0 14px;padding:0}
  .pm3-tier ul li{display:block;padding:8px 4px 8px 28px;line-height:1.4;border-bottom:1px solid var(--line)}
  .pm3-tier ul li:last-child{border-bottom:none}
  .pm3-tier ul .chk{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:15px;height:15px;border-radius:50%;font-size:8px;color:#3ee6a4;background:rgba(62,230,164,.1);border:1px solid rgba(62,230,164,.35);font-weight:800;margin:-1px 9px 0 -24px;vertical-align:middle}
  .pm3-tier ul b{color:#fff;font-weight:700}
  .pm3-tbtn{margin-top:auto;width:100%;text-align:center;justify-content:center;display:inline-flex;align-items:center;gap:8px;border-radius:13px;padding:12px 18px;font-size:13.5px;font-weight:800;transition:transform .22s,box-shadow .22s;cursor:pointer;border:none;background:none;color:inherit;font-family:inherit;letter-spacing:.01em}
  .pm3-tbtn:hover{transform:translateY(-2px)}
  .pm3-tb-ghost{border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.03)}
  .pm3-tb-gold{border:1px solid rgba(255,209,102,.5);color:#ffd166;background:linear-gradient(180deg,rgba(255,209,102,.12),rgba(255,209,102,.03))}
  .pm3-tb-gold:hover{box-shadow:0 12px 34px rgba(255,196,102,.22)}
  .pm3-tb-cta2{border:1px solid rgba(255,120,2,.55);color:var(--accent-2);background:linear-gradient(180deg,rgba(255,120,2,.14),rgba(255,120,2,.04))}
  .pm3-tb-cta2:hover{box-shadow:0 12px 34px rgba(255,120,2,.25)}
  .pm3-tb-cta{position:relative;overflow:hidden;background:var(--grad);color:#fff;box-shadow:0 14px 40px rgba(255,120,2,.5),inset 0 1px 0 rgba(255,255,255,.28)}
  .pm3-tb-cta::after{content:'';position:absolute;top:0;bottom:0;width:38%;left:-56%;transform:skewX(-18deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);animation:pm3Sheen 3.8s ease-in-out 1.2s infinite}
  @keyframes pm3Sheen{0%,55%{left:-56%}100%{left:140%}}
  @property --pm3ang{syntax:'<angle>';initial-value:0deg;inherits:false}
  .pm3-herotier{position:relative;padding:1.6px;border-radius:24px;background:conic-gradient(from var(--pm3ang,0deg),#ff7802,#ffd77a,#ff9e2c,#ff7802);animation:pm3Spin 7s linear infinite;transition:transform .28s;z-index:1}
  @keyframes pm3Spin{to{--pm3ang:480deg}}
  .pm3-herotier::after{content:'';position:absolute;inset:-26px;z-index:-1;border-radius:44px;background:radial-gradient(55% 65% at 50% 30%,rgba(255,120,2,.26),transparent 72%);filter:blur(22px);animation:pm3Pulse 4.5s ease-in-out infinite}
  @keyframes pm3Pulse{0%,100%{opacity:.75}50%{opacity:1}}
  .pm3-herotier .pm3-tier{border:none;border-radius:22.5px;height:100%;background:linear-gradient(180deg,rgba(255,120,2,.1),rgba(255,180,61,.04) 42%,transparent 68%),var(--bg-2)}
  .pm3-herotier:hover{transform:translateY(-5px)}
  .pm3-herotier .pm3-tier:hover{transform:none;box-shadow:none}
  .pm3-proof{display:flex;justify-content:center;gap:12px;margin:34px 0 0;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
  .pm3-proof span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:99px;padding:9px 16px}
  @media(max-width:960px){.pm3-tiers{grid-template-columns:1fr}.pm3-herotier{transform:none}.pm3-hero h2{font-size:clamp(20px,5.6vw,26px);white-space:normal}.pm3-hero>p{white-space:normal;max-width:44ch}}
  @media(prefers-reduced-motion:reduce){.pm3-hero .g,.pm3-tb-cta::after,.pm3-herotier,.pm3-herotier::after{animation:none}}

  /* ---------- подвал: описание, FAQ, карта сайта ---------- */
  /* подвал распирается на всю ширину колонки и вплотную садится на её низ */
  /* список авторов приезжает запросом, и подвал уезжал вниз на всю его высоту -
     сдвиг 0.61 при пороге Google 0.1. Пока список пуст, держим место: подвал
     сразу оказывается ниже экрана, а сдвиги вне видимой области не считаются */
  /* :empty не годится - скрипт кладёт шапку рейтинга ещё до прихода списка */
  #p-creators.show{min-height:190vh}
  .vfoot{border-top:1px solid var(--line);background:#08080a;
    padding:42px var(--pad-x,28px) 26px;
    margin:44px calc(var(--pad-x,28px) * -1) calc(var(--pad-b,60px) * -1)}
  .vfoot h2{font-size:22px;font-weight:800;letter-spacing:-.3px;margin-bottom:14px}
  /* SEO-навигация внутри подвала главной (17.09): раздел над копирайтом, без своего фона */
  .vfoot .sw-foot{border-top:1px solid var(--line);background:transparent;
    padding:26px 0 6px;margin:30px 0 22px}
  .vfoot .sw-foot .swf-in{max-width:none}
  .vfoot .sw-foot .swf-g b{font-size:13px;font-weight:600;color:var(--muted)}
  /* блок перелинковки: обычная навигация по разделам, её же читает краулер */
  .sw-xlinks{border-top:1px solid var(--line);background:#08080a;
    padding:24px 28px 30px;display:flex;flex-direction:column;gap:18px}
  @media(max-width:760px){.sw-xlinks{padding:20px 14px 24px}}
  .sw-xlinks .sw-xg b{display:block;font-size:13px;font-weight:700;margin-bottom:9px;
    color:var(--text)}
  .sw-xlinks .sw-xw{display:flex;flex-wrap:wrap;gap:7px 9px}
  .sw-xlinks .sw-xw a{font-size:12.5px;color:var(--muted);text-decoration:none;
    border:1px solid var(--line);border-radius:999px;padding:4px 11px;line-height:1.35;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sw-xlinks .sw-xw a:hover{color:var(--text);border-color:var(--accent)}
  @media(max-width:600px){.sw-xlinks .sw-xw a{font-size:12px;padding:3px 9px}}
  .vf-about{margin:0 0 38px}
  .vf-about p{color:var(--muted);font-size:13.5px;line-height:1.75;margin-bottom:10px;max-width:900px}
  .vf-faq{margin:0 0 40px}
  .vf-q{border-bottom:1px solid var(--line)}
  .vf-q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
    background:none;border:none;color:var(--text);font-family:inherit;font-size:14.5px;font-weight:700;
    text-align:left;padding:16px 2px;transition:color .15s}
  .vf-q button:hover{color:#ffc078}
  .vf-q button i{font-style:normal;font-size:19px;color:var(--muted);flex-shrink:0;transition:transform .2s}
  .vf-q.on button i{transform:rotate(45deg);color:var(--accent)}
  .vf-q>div{display:none;padding:0 2px 16px}
  .vf-q.on>div{display:block}
  .vf-q p{color:var(--muted);font-size:13.5px;line-height:1.75;max-width:900px}
  .vf-cols{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:30px;
    padding-top:44px;border-top:1px solid var(--line)}
  @media(max-width:980px){.vf-cols{grid-template-columns:repeat(2,1fr);gap:22px}}
  @media(max-width:560px){.vf-cols{grid-template-columns:1fr}}
  .vf-brand img{height:34px;width:auto;display:block;margin-bottom:14px}
  .vf-brand p{color:var(--muted);font-size:14.5px;line-height:1.65;max-width:360px}
  .vf-contacts{margin-top:20px;font-size:13px;color:var(--muted);line-height:1.65}
  .vf-contacts b{display:block;color:var(--text);font-weight:600;margin-bottom:4px}
  .vf-contacts a{color:var(--muted);text-decoration:none}
  .vf-contacts a:hover{color:#ffc078}
  .vf-legal{margin-top:20px;font-size:12.5px;color:var(--muted);opacity:.8}
  .vf-legal a{color:var(--muted);text-decoration:none}
  .vf-legal a:hover{color:#ffc078;text-decoration:none}
  .vf-col{display:flex;flex-direction:column}
  .vf-col b{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:18px}
  /* область касания: было 14 px при рекомендованных 44-48. Растим отступами,
     размер текста не трогаем */
  .vf-col a{display:block;color:var(--text);font-size:15px;font-weight:600;margin-bottom:6px;
    padding:9px 0;min-height:44px;box-sizing:border-box;
    text-decoration:none;transition:color .15s,transform .15s}
  .vf-col a:hover{color:#ffc078;transform:translateX(2px)}
  .vf-links{display:flex;flex-wrap:wrap;gap:0 16px;align-items:center}
  .vf-links a{color:var(--muted);text-decoration:none;position:relative}
  .vf-links a+a::before{content:"·";position:absolute;left:-9px;color:var(--line)}
  .vf-links a:hover{color:#ffc078}
  .vf-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
    margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line);
    text-align:center;color:var(--muted);font-size:14px}

  /* ---------- коллекция ---------- */
  .col-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
  .col-head h1,.col-head .hx1{font-size:26px;font-weight:800;letter-spacing:-.4px}
  .col-head .col-acts{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:10px}
  .btn-soft{display:inline-flex;align-items:center;gap:8px;background:var(--bg-2);border:1px solid var(--line);
    color:var(--text);font-family:inherit;font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:12px;
    cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
  .btn-soft:hover{border-color:rgba(255,120,2,.55);color:#ffc078}
  .btn-soft svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}
  .btn-soft.busy{opacity:.55;pointer-events:none}

  /* окно публикации */
  .pub-sheet{max-width:520px}
  .pub-top{display:flex;gap:14px;align-items:flex-start}
  .pub-thumb{width:96px;height:120px;flex-shrink:0;border-radius:14px;overflow:hidden;
    border:1px solid var(--line);background:var(--bg)}
  .pub-thumb img,.pub-thumb video{width:100%;height:100%;object-fit:cover;display:block}
  .pub-main{flex:1;min-width:0}
  .pub-lb{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;
    letter-spacing:.7px;margin:16px 2px 8px}
  .pub-top .pub-lb{margin-top:2px}
  .pub-tline{display:flex;gap:8px}
  .pub-tline .cab-in{flex:1;min-width:0}
  .pub-wide{width:100%;flex:none}
  .pub-auto{display:inline-flex;align-items:center;gap:6px;background:rgba(255,120,2,.14);
    border:1px solid rgba(255,120,2,.45);color:#ffc078;font-family:inherit;font-weight:700;
    font-size:12.5px;padding:0 13px;height:42px;border-radius:12px;cursor:pointer;white-space:nowrap}
  .pub-auto:hover{background:rgba(255,120,2,.22)}
  .pub-auto svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
    stroke-linejoin:round;flex-shrink:0}
  .pub-auto.busy{opacity:.6;pointer-events:none}
  .pub-auto.busy svg{animation:pubspin 1.1s linear infinite}
  @keyframes pubspin{to{transform:rotate(360deg)}}
  .pub-cnt{font-size:11.5px;color:var(--muted);text-align:right;margin-top:6px}
  .pub-cats{display:flex;flex-wrap:wrap;gap:8px}
  .pub-cat{background:var(--bg);border:1px solid var(--line);color:var(--muted);font-family:inherit;
    font-size:13px;font-weight:600;padding:9px 15px;border-radius:999px;cursor:pointer;transition:.15s}
  .pub-cat:hover{color:var(--text);border-color:rgba(255,255,255,.22)}
  .pub-cat.on{background:rgba(255,120,2,.16);border-color:rgba(255,120,2,.55);color:#ffc078}
  /* основная категория - та, что попадёт в ленту рубрики; отмечаем звёздочкой */
  .pub-cat.main{background:rgba(255,120,2,.3);border-color:var(--accent);color:#fff}
  .pub-cat.main::before{content:"★ ";font-size:11px}
  .pub-lb i{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
  .pub-hint{font-size:12px;color:var(--muted);margin:9px 2px 0;line-height:1.55}
  @media(max-width:560px){
    .pub-top{flex-direction:column}
    .pub-thumb{width:100%;height:150px}
  }
  .col-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
  .col-stat{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:15px 17px}
  .col-stat b{display:block;font-size:24px;font-weight:800;color:#ffc078;line-height:1.2}
  .col-stat span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
  .col-stat.acc b{color:var(--accent)}
  .col-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
  .col-tabs{display:flex;gap:3px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:4px}
  .col-tabs button{background:none;border:none;color:var(--muted);font-family:inherit;font-size:13px;
    font-weight:700;padding:8px 15px;border-radius:9px;transition:.15s}
  .col-tabs button:hover{color:var(--text)}
  .col-tabs button.on{background:rgba(255,120,2,.14);color:#ffc078}
  .col-search{flex:1;min-width:200px;max-width:340px;display:flex;align-items:center;gap:9px;
    background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:0 14px}
  .col-search svg{width:15px;height:15px;color:var(--muted);flex-shrink:0}
  .col-search input{flex:1;min-width:0;height:40px;background:none;border:none;outline:none;
    color:var(--text);font-family:inherit;font-size:13.5px}
  .col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
  @media(max-width:640px){.col-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
  .col-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
    background:var(--bg-2);aspect-ratio:3/4;transition:transform .18s,border-color .18s,box-shadow .18s}
  .col-card:hover{transform:translateY(-3px);border-color:rgba(255,120,2,.5);box-shadow:0 14px 34px rgba(0,0,0,.45)}
  .col-card img,.col-card video{width:100%;height:100%;object-fit:cover;display:block}
  .col-card .badge{position:absolute;top:9px;left:9px;display:flex;gap:5px}
  .col-card .badge span{background:rgba(8,8,10,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);
    color:#fff;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px}
  .col-card .badge .pub{background:rgba(94,215,140,.24);border-color:rgba(94,215,140,.45);color:#8ef0b4}
  .col-card .ttl{position:absolute;left:0;right:0;bottom:0;padding:26px 11px 10px;font-size:12px;
    color:#fff;background:linear-gradient(to top,rgba(6,5,8,.92),transparent);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .col-card .acts{position:absolute;left:9px;right:9px;bottom:9px;opacity:0;
    transform:translateY(6px);transition:opacity .18s,transform .18s}
  .col-card:hover .acts{opacity:1;transform:none}
  .col-card:hover .ttl{opacity:0}
  .col-empty{grid-column:1/-1;border:1.5px dashed var(--line);border-radius:18px;padding:44px 20px;
    text-align:center;color:var(--muted);font-size:13.5px;line-height:1.7}
  .col-empty b{display:block;color:var(--text);font-size:15px;margin-bottom:6px}

  /* приватный просмотрщик коллекции: свои работы листаются БЕЗ ворк-пейджа -
     публичная страница (лайки/просмотры/шаринг) только у опубликованных.
     Карточка с воздухом, а не в края; медиа с жёсткой цепочкой высот -
     кнопки ВСЕГДА видны (max-height:100%% работает только от definite height) */
  .cv-ov{position:fixed;inset:0;z-index:1200;background:rgba(5,4,7,.78);display:flex;
    align-items:center;justify-content:center;padding:26px;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .cv-card{width:min(1060px,100%);height:100%;max-height:840px;display:flex;flex-direction:column;
    min-height:0;background:linear-gradient(180deg,#16141a,#0e0d11);border:1px solid var(--line);
    border-radius:22px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.65)}
  .cv-top{display:flex;align-items:center;gap:10px;padding:13px 16px;flex:none;min-width:0;
    border-bottom:1px solid var(--line)}
  .cv-top .t{font-size:14px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .cv-top .k{font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;flex:none}
  .cv-top .k.pub{color:#8ef0b4;border-color:rgba(94,215,140,.45);background:rgba(94,215,140,.12)}
  .cv-x{margin-left:auto;flex:none;width:34px;height:34px;border-radius:11px;border:1px solid var(--line);
    background:var(--bg-2);color:#fff;font-size:15px;cursor:pointer;transition:border-color .15s,transform .15s}
  .cv-x:hover{border-color:rgba(255,120,2,.6);transform:rotate(90deg)}
  .cv-mid{flex:1;min-height:0;position:relative;padding:16px 60px;display:flex}
  #cvMedia{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
  .cv-mid img,.cv-mid video{max-width:100%;max-height:100%;border-radius:14px;object-fit:contain;
    box-shadow:0 14px 44px rgba(0,0,0,.5)}
  .cv-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;z-index:2;
    border:1px solid var(--line);background:rgba(14,13,17,.9);color:#fff;font-size:19px;cursor:pointer;
    transition:border-color .15s,background .15s}
  .cv-nav:hover{border-color:rgba(255,120,2,.6);background:rgba(255,120,2,.16)}
  .cv-nav:disabled{opacity:.22;cursor:default}
  .cv-prev{left:11px}.cv-next{right:11px}
  .cv-bot{flex:none;padding:12px 16px 15px;display:flex;flex-direction:column;gap:10px;align-items:center;
    border-top:1px solid var(--line);background:rgba(8,7,10,.55)}
  .cv-pr{font-size:12px;color:var(--muted);max-width:660px;text-align:center;overflow:hidden;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical}
  .cv-pr:empty{display:none}
  .cv-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .cv-acts .b{display:inline-flex;align-items:center;gap:7px;border-radius:12px;border:1px solid var(--line);
    background:var(--bg-2);color:#fff;font-size:12.5px;font-weight:600;padding:9px 15px;cursor:pointer;
    text-decoration:none;transition:border-color .15s,transform .15s}
  .cv-acts .b:hover{border-color:rgba(255,120,2,.6);transform:translateY(-1px)}
  .cv-acts .b.acc{background:var(--btn);border-color:var(--btn);color:#151007}
  .cv-acts .b.acc:hover{filter:brightness(1.08)}
  .cv-acts .b.danger:hover{border-color:rgba(255,116,98,.9);color:#ff9d8a}
  @media(max-width:640px){
    .cv-ov{padding:10px}
    .cv-card{border-radius:16px;max-height:none}
    .cv-mid{padding:10px}
    .cv-nav{display:none}
  }

  /* ---------- поддержка: чат с командой ---------- */
  /* ---------- поддержка: нормальный чат вместо формы ---------- */
  .sup-box{display:flex;flex-direction:column;padding:0;overflow:hidden}
  .sup-hd{display:flex;align-items:center;gap:12px;padding:14px 16px;
    border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
  .sup-ava{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
    background:linear-gradient(135deg,#ff9b2f,#ff6a00);color:#2a1400;font-weight:900;font-size:15px}
  .sup-hd-tx{min-width:0;flex:1}
  .sup-hd-tx b{display:block;font-size:14.5px;line-height:1.25}
  .sup-hd-tx span{font-size:12px;color:var(--muted)}
  .sup-live{display:inline-flex;align-items:center;gap:6px;color:#5fd39a}
  .sup-live i{width:7px;height:7px;border-radius:50%;background:#5fd39a;display:inline-block;
    box-shadow:0 0 0 0 rgba(95,211,154,.55);animation:supPulse 2.4s ease-out infinite}
  @keyframes supPulse{70%{box-shadow:0 0 0 7px rgba(95,211,154,0)}100%{box-shadow:0 0 0 0 rgba(95,211,154,0)}}
  @media(prefers-reduced-motion:reduce){.sup-live i{animation:none}}
  .sup-msgs{display:flex;flex-direction:column;gap:10px;padding:18px 16px;
    min-height:300px;max-height:52vh;overflow-y:auto;scrollbar-width:thin}
  .sup-day{align-self:center;font-size:11px;color:var(--muted);background:var(--bg-2);
    border:1px solid var(--line);border-radius:999px;padding:3px 12px;margin:2px 0}
  .sup-msgs .sm{position:relative;max-width:76%;padding:10px 14px;border-radius:16px;
    font-size:13.5px;line-height:1.55;background:var(--bg-2);border:1px solid var(--line);
    white-space:pre-wrap;overflow-wrap:anywhere;animation:supIn .18s ease-out}
  @keyframes supIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.sup-msgs .sm{animation:none}}
  .sup-msgs .sm{align-self:flex-start;border-bottom-left-radius:5px}
  .sup-msgs .sm.me{align-self:flex-end;border-bottom-left-radius:16px;border-bottom-right-radius:5px;
    background:linear-gradient(180deg,rgba(255,120,2,.20),rgba(255,120,2,.12));
    border-color:rgba(255,120,2,.42)}
  .sup-msgs .sm .who{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  .sup-msgs .sm.me .who{color:#ffb066}
  .sup-msgs .sm .tm{display:block;font-size:10.5px;color:var(--muted);margin-top:5px}
  .sup-empty{margin:auto;text-align:center;color:var(--muted);font-size:13px;
    padding:18px 14px;line-height:1.6;display:flex;flex-direction:column;align-items:center;gap:14px}
  .sup-empty .se-ic{font-size:30px;line-height:1}
  .sup-quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .sup-quick button{background:var(--bg-2);border:1px solid var(--line);color:var(--text);
    font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:999px;
    cursor:pointer;transition:border-color .15s,background .15s}
  .sup-quick button:hover{border-color:rgba(255,120,2,.55);background:rgba(255,120,2,.08)}
  .sup-input{display:flex;gap:10px;padding:12px;border-top:1px solid var(--line);
    align-items:flex-end;background:rgba(255,255,255,.015)}
.sup-clip{flex:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--muted);cursor:pointer;display:grid;place-items:center;
  transition:.15s;align-self:flex-end}
.sup-clip:hover{color:var(--accent);border-color:var(--accent)}
.sup-clip svg{width:19px;height:19px}
.sup-att{display:flex;align-items:center;gap:9px;margin:8px 0 0;padding:7px 10px;
  border:1px solid var(--line);border-radius:11px;background:var(--bg-2);font-size:12.5px;color:var(--muted)}
.sup-att img{width:34px;height:34px;border-radius:7px;object-fit:cover}
.sup-att span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-att button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:15px}
.sup-att button:hover{color:#ff8fb0}
.sup-msgs .msg img.shot{display:block;margin-top:6px;max-width:230px;max-height:260px;
  border-radius:10px;cursor:zoom-in;border:1px solid rgba(255,255,255,.08)}
  .sup-input textarea{flex:1;resize:none;min-width:0;min-height:46px;max-height:140px;
    overflow-y:auto;line-height:1.45}
  @media(max-width:520px){
    .sup-input{padding:10px;gap:8px}
    .sup-input .btn-grad{min-width:96px;padding-left:14px;padding-right:14px}
    .sup-msgs{padding:14px 12px;max-height:58vh}
    .sup-msgs .sm{max-width:88%}
  }
  .sup-input .btn-grad{flex:none;min-width:112px}
  .sup-input .btn-grad:disabled{opacity:.55;cursor:default}
  /* две колонки: слева переписка, справа справочник. На узком - друг под другом */
  #p-support .cab{max-width:1080px}
  .sup-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;
    align-items:start}
  .sup-side .sup-faq{margin-top:0;position:sticky;top:86px}
  @media(max-width:900px){
    #p-support .cab{max-width:640px}
    .sup-grid{grid-template-columns:1fr}
    .sup-side .sup-faq{position:static;margin-top:18px}
  }
  .sup-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
    font-size:11.5px;color:var(--faint);padding:0 2px;margin-top:8px}
  /* приветствие в пустом чате - обычный пузырь: пустая коробка выглядела так,
     будто тут никого нет */
  .sup-hi{align-self:flex-start;max-width:76%}
  .sup-faq{margin-top:22px}
  .sup-faq-h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);margin-bottom:10px}
  .sup-faq details{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
    margin-bottom:8px;overflow:hidden}
  .sup-faq summary{cursor:pointer;padding:13px 16px;font-size:13.5px;font-weight:600;
    list-style:none;display:flex;align-items:center;gap:10px}
  .sup-faq summary::-webkit-details-marker{display:none}
  .sup-faq summary::after{content:'+';margin-left:auto;color:var(--muted);
    font-size:17px;line-height:1;transition:transform .18s}
  .sup-faq details[open] summary::after{transform:rotate(45deg)}
  .sup-faq details[open] summary{color:#ffb066}
  .sup-faq p{margin:0;padding:0 16px 14px;font-size:13px;line-height:1.6;color:var(--muted)}
  .sup-dot{display:inline-block;min-width:17px;height:17px;border-radius:999px;background:var(--btn);color:#fff;
    font-size:10.5px;font-weight:800;line-height:17px;text-align:center;padding:0 4px;margin-left:auto}
  /* --- список диалогов слева (мультитреды, как в мессенджере) --- */
  /* страница = ровно в экран, без скролла: высота вьюпорта минус шапка/паддинги,
     футер сайта на этой странице прячем, FAQ - третья колонка внутри чата */
  .body:has(#p-support.show) #vfoot{display:none}
  .body:has(#p-support.show){padding-bottom:18px}
  #p-support.pg-in{animation:none}   /* въезд с translateY даёт мигающий скроллбар */
  #p-support .cab{max-width:none;height:calc(100dvh - var(--head-h,112px) - 42px);
    min-height:430px;display:flex;flex-direction:column}
  #p-support h1,#p-support .hx1{margin:0 0 4px}
  #p-support .cab-note{margin:0 0 14px}
  #p-support .sup-box{flex:1;min-height:0}
  .sup-wrap{display:flex;min-width:0;height:100%;min-height:0}
  .sup-chat .sup-msgs{flex:1;min-height:0;max-height:none}
  .sup-faqcol{width:300px;flex:none;border-left:1px solid var(--line);overflow-y:auto;
    scrollbar-width:thin;padding:14px;display:flex;flex-direction:column;gap:12px}
  .sup-faqcol .sup-faq{margin-top:0}
  .sup-hint{font-size:11.5px;color:var(--muted);margin-top:auto;padding-top:10px;line-height:1.5}
  @media(max-width:1100px){.sup-faqcol{display:none}}
  .sup-dlgs{width:280px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line)}
  .sup-dlgs-h{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:12px 13px;border-bottom:1px solid var(--line)}
  .sup-dlgs-h b{font-size:13.5px}
  .sup-new{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(255,120,2,.5);
    background:rgba(255,120,2,.12);color:#ffb066;border-radius:11px;font-size:11.5px;font-weight:700;
    padding:6px 10px;cursor:pointer;font-family:inherit;transition:background .15s}
  .sup-new:hover{background:rgba(255,120,2,.22)}
  .sup-list{flex:1;overflow-y:auto;scrollbar-width:thin;min-height:0}
  .sup-item{padding:10px 13px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
  .sup-item:hover{background:rgba(255,255,255,.03)}
  .sup-item.on{background:rgba(255,120,2,.10)}
  .sup-item .t1{display:flex;align-items:center;gap:8px}
  .sup-item .t1 b{flex:1;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sup-item .t1 .tm{flex:none;font-size:10.5px;color:var(--muted)}
  .sup-item .t2{display:flex;align-items:center;gap:8px;margin-top:3px}
  .sup-item .t2 span{flex:1;min-width:0;font-size:11.5px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sup-item .t2 .sup-dot{margin-left:0}
  .sup-chat{flex:1;min-width:0;display:flex;flex-direction:column}
  .sup-st{flex:none;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);
    border-radius:999px;padding:3px 9px;margin-left:8px}
  .sup-back{display:none;flex:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
    background:var(--bg-2);color:#fff;font-size:15px;cursor:pointer;align-items:center;justify-content:center}
  @media(max-width:760px){
    .sup-dlgs{width:100%;border-right:0}
    .sup-wrap:not(.chat) .sup-chat{display:none}
    .sup-wrap.chat .sup-dlgs{display:none}
    .sup-wrap.chat .sup-back{display:inline-flex}
  }
  /* плавающая кнопка «Поддержка» на страницах оплаты (подписка/монеты) */
  .sup-fab{position:fixed;right:22px;bottom:22px;z-index:200;display:inline-flex;align-items:center;gap:9px;
    background:var(--btn);color:#fff;border:none;border-radius:999px;padding:12px 19px;
    font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;
    box-shadow:0 10px 28px rgba(255,120,2,.38);transition:filter .15s,transform .15s}
  .sup-fab:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .sup-fab svg{width:18px;height:18px;flex:none}
  .sup-fab .sup-dot{margin-left:2px;background:#fff;color:var(--btn)}
  @media(max-width:640px){.sup-fab{right:14px;bottom:14px;padding:11px 16px}}
  /* виджет-чат: разворачивается над кнопкой прямо на странице оплаты (как интеркомы) */
  .sup-pop{position:fixed;right:22px;bottom:88px;z-index:235;width:min(392px,calc(100vw - 28px));
    height:min(580px,calc(100dvh - 130px));display:flex;flex-direction:column;background:var(--bg-2);
    border:1px solid var(--line);border-radius:18px;overflow:hidden;
    box-shadow:0 24px 64px rgba(0,0,0,.55);animation:supPopIn .18s ease-out}
  @keyframes supPopIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.sup-pop{animation:none}}
  .sup-pop-hd{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.02)}
  .sup-pop-hd .sup-hd-tx{flex:1;min-width:0}
  .sup-pop-x{flex:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
    background:var(--bg-2);color:var(--muted);font-size:14px;line-height:1;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
  .sup-pop-x:hover{border-color:rgba(255,120,2,.55);color:#fff}
  .sup-pop .sup-msgs{flex:1;min-height:0;max-height:none}
  @media(max-width:640px){.sup-pop{right:10px;left:10px;bottom:80px;width:auto;height:min(72dvh,580px)}}

  /* модалка оплаты */
  .pay-ov{position:fixed;inset:0;z-index:240;background:rgba(6,6,8,.75);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;padding:20px}
  .pay-box{position:relative;width:100%;max-width:640px;background:var(--bg-2);border:1px solid var(--line);
    border-radius:24px;padding:30px 34px 26px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:none}
  .pay-box::-webkit-scrollbar{display:none}
  .pay-box h3{font-size:19px;font-weight:800;margin-bottom:10px;text-align:center;letter-spacing:.01em}
  /* когда в шапке есть страна - название уходит влево, как на референсе */
  .pay-box h3:has(.pay-hd-row){text-align:left}
  @media(max-width:640px){.pay-box{padding:22px 18px 20px}}
  .pay-sum{font-size:13.5px;color:var(--muted);margin-bottom:16px}
  .pay-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:9px;
    background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);font-size:12px}
  .pay-x:hover{color:#fff}
  /* когда крестик перенесён в шапку - он обычный элемент строки, а не абсолют */
  .pay-x.in-row{position:static;width:32px;height:32px;border-radius:10px;flex:0 0 auto}
  .pay-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
    color:var(--text);font-family:inherit;font-size:14px;font-weight:700;margin-bottom:10px;transition:.15s}
  .pay-btn:hover{border-color:rgba(255,120,2,.5);background:rgba(255,120,2,.06)}
  .pay-btn small{font-weight:600;color:var(--muted);font-size:12px}
  .pay-note{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px;
    font-size:13.5px;line-height:1.6;color:#cfc7bd}

  /* выбор способа оплаты: две крупные кнопки + итог снизу (паритет с girli-модалкой) */
  .payb{display:flex;flex-direction:column;gap:13px;padding-top:10px}
  .payb .pb{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;
    width:100%;border-radius:16px;padding:18px 20px;font-family:inherit;font-size:15.5px;
    font-weight:800;letter-spacing:.01em;cursor:pointer;border:1px solid var(--line);background:var(--bg);
    color:var(--text);transition:transform .15s,filter .15s,border-color .15s}
  .payb .pb:hover{transform:translateY(-1px);border-color:rgba(255,120,2,.5)}
  .payb .pb.card{background:var(--grad);border-color:transparent;color:#160f05}
  .payb .pb.card:hover{filter:brightness(1.06)}
  /* Apple Pay: белая кнопка с чёрной маркой (гайдлайн Apple для тёмного фона) */
  .payb .pb.apay{background:#fff;border-color:transparent;color:#000;gap:5px;padding:16px 20px}
  .payb .pb.apay:hover{filter:brightness(.96);border-color:transparent}
  .payb .pb.apay .ap-logo{width:22px;height:22px;fill:#000;display:block;margin-top:-2px}
  .payb .pb.apay b{font-size:17.5px;font-weight:600;font-family:-apple-system,'Segoe UI',Inter,sans-serif;letter-spacing:0}
  .pm-badges{display:inline-flex;gap:7px;align-items:center;flex:none}
  .pm-img{height:24px;width:auto;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.3))}
  .pm-img.coin{height:23px}
  .pay-summ{text-align:center;color:var(--muted);font-size:13.5px;margin-top:14px;line-height:1.5}
  .pay-summ b{color:var(--text)}

  /* биллинг: карточка подписки + модалки отмены (паритет с большими кабинетами) */
  .bill-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;
    background:linear-gradient(160deg,rgba(255,120,2,.07),rgba(16,14,18,.6) 55%),var(--bg-2)}
  .bc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 18px}
  .bc-lbl{font-size:13.5px;font-weight:800}
  .bc-plan{color:var(--btn);font-size:15px;font-weight:800}
  .bc-mid{padding:0 18px 14px}
  .bc-pm{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);
    border-radius:14px;background:var(--bg)}
  .bc-cap2{font-size:14px;font-weight:800;margin:2px 0 10px}
  .bc-pmics{display:inline-flex;gap:6px;flex:none}
  .bc-pmimg{height:27px;width:auto;flex:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.3))}
  .bc-pm .t{flex:1;min-width:0;font-size:13.5px;font-weight:700}
  .bc-pm .t small{display:block;font-weight:500;color:var(--muted);font-size:11.5px;margin-top:2px}
  .bc-note{margin-top:10px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.04);
    border:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.55}
  .bc-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 18px;
    border-top:1px solid var(--line);font-size:13px;color:var(--muted);background:rgba(8,7,10,.45)}
  .bc-foot b{color:var(--text);font-weight:800}
  .bc-left{color:#ffb672;font-weight:700}
  .bc-def{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:11.5px;font-weight:700;
    color:#8ef0b4;padding:4px 10px;border-radius:999px;border:1px solid rgba(94,215,140,.35);
    background:rgba(94,215,140,.08)}
  .bc-cancel{background:none;border:none;color:var(--muted);font-size:12.5px;font-weight:600;
    cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px 2px}
  .bc-cancel:hover{color:#ff9d8a}
  .cnl-ic{width:64px;height:64px;border-radius:50%;background:var(--grad);display:flex;
    align-items:center;justify-content:center;font-size:30px;color:#160f05;margin:6px auto 16px}
  .cnl-t{font-size:19px;font-weight:800;text-align:center;margin-bottom:12px}
  .cnl-p{font-size:13.5px;color:var(--muted);text-align:center;line-height:1.65;margin-bottom:8px}
  .cnl-p b{color:var(--text)}
  .cnl-btns{display:flex;flex-direction:column;gap:10px;margin-top:18px}
  .cnl-btns .keep{width:100%;border:none;border-radius:15px;padding:16px;font-family:inherit;
    font-size:14.5px;font-weight:800;cursor:pointer;background:var(--grad);color:#160f05}
  .cnl-btns .keep:hover{filter:brightness(1.06)}
  .cnl-btns .drop{width:100%;border-radius:15px;padding:14px;font-family:inherit;font-size:13px;
    font-weight:700;cursor:pointer;background:none;border:1px solid var(--line);color:var(--muted)}
  .cnl-btns .drop:hover{border-color:rgba(255,116,98,.7);color:#ff9d8a}
  .pay-field{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 14px;
    margin-bottom:10px;display:flex;align-items:center;gap:10px}
  .pay-field div{flex:1;min-width:0}
  .pay-field span{display:block;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase}
  .pay-field b{display:block;font-size:13.5px;word-break:break-all;font-weight:600}
  .pay-field button{background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer}
  .pay-field button:hover{color:#ffc078}
  .pay-wait{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-top:14px}
  /* окно карточной оплаты (27.08): раньше тут был голый спиннер со строчкой текста.
     Одна центральная ось - крошка, сумма, значок, кнопка, статус */
  .pay-box h3:empty{display:none;margin:0}
  .pv-head{text-align:center;margin:2px 0 16px}
  .pv-crumb{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em}
  .pv-crumb span{opacity:.5;margin:0 4px}
  .pv-usd{font-size:34px;font-weight:900;letter-spacing:-.02em;margin-top:4px;
    font-variant-numeric:tabular-nums}
  .pv-top{display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:12px;margin-bottom:6px}
  .pv-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    box-shadow:0 6px 18px rgba(255,120,2,.3);flex:none}
  .pv-ic svg{width:21px;height:21px;display:block}
  /* звезда рисуется знаком: своей картинки у способа нет. Синий - фирменный
     цвет Telegram; жирность обязательна, иначе знак выходит тоньше соседних
     значков и выглядит бледной чёрточкой */
  .pv-ic-star{background:#229ED9;box-shadow:0 6px 18px rgba(34,158,217,.35)}
  .pv-ic-star img{width:60%;height:60%;object-fit:contain;display:block}
  .pm-star{display:inline-grid;place-items:center;width:24px;height:24px;
    border-radius:5px;background:#229ED9;color:#fff;font-size:15px;line-height:1;
    font-weight:900;filter:drop-shadow(0 2px 5px rgba(0,0,0,.3))}
  .pv-top b{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;
    text-transform:uppercase;color:var(--muted)}
  .pv-amt{display:block;margin-top:4px;font-size:20px;font-weight:800;
    font-variant-numeric:tabular-nums}
  .pv-cta{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
    background:linear-gradient(135deg,var(--accent),#ff9a3d);border:none;border-radius:14px;
    padding:15px 16px;color:#fff;font-family:inherit;font-size:15px;font-weight:800;
    cursor:pointer;margin:12px 0 4px;transition:.15s}
  .pv-cta:hover{filter:brightness(1.07)}
  .pv-status{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;
    margin-top:6px;background:rgba(255,180,61,.1);border:1px solid rgba(255,180,61,.28);
    font-size:13px;font-weight:700;color:var(--accent-2)}
  .pv-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;
    border-top-color:transparent;animation:pvSpin .9s linear infinite;flex:none}
  .pv-note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:8px}
  /* значки платёжных систем - те же, что в студии */
  .pm-brands{display:inline-flex;align-items:center;gap:5px}
  .pm-visa{display:inline-grid;place-items:center;height:20px;padding:0 6px;border-radius:4px;
    background:#fff;color:#1a1f71;font:900 10px/1 Arial,sans-serif;letter-spacing:.02em}
  .pm-mc{position:relative;display:inline-flex;width:30px;height:20px}
  .pm-mc i{position:absolute;top:2px;width:16px;height:16px;border-radius:50%}
  .pm-mc i:first-child{left:0;background:#eb001b}
  .pm-mc i:last-child{right:0;background:#f79e1b;mix-blend-mode:screen}

  a.pv-cta{text-decoration:none}
  .pay-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:payp 1s infinite}
  @keyframes payp{0%,100%{opacity:.3}50%{opacity:1}}

  /* ================= КРИПТО-ОПЛАТА: выбор монеты → сети → счёт (06.08.2026) =================
     Было: плоский список из 11 строк, где USDT повторялся трижды - свалка, в которой легко
     отправить не в ту сеть. Стало: сначала монета, потом сеть (только если их больше одной).
     Кружок монеты (.cw-ic) - место под будущие PNG-иконки: подложим <img> внутрь, размеры
     и радиус уже заданы, разметку менять не придётся. */
  .cw-back{display:inline-flex;align-items:center;gap:7px;background:none;border:none;padding:6px 4px;
    margin:-4px 0 6px -4px;color:var(--muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
  .cw-back:hover{color:var(--text)}
  .cw-list{display:flex;flex-direction:column;gap:8px;max-height:min(56vh,440px);overflow-y:auto;
    scrollbar-width:thin;padding-right:2px;margin:0 -2px}
  .cw-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
    background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:12px 14px;
    min-height:64px;font-family:inherit;color:var(--text);cursor:pointer;transition:.15s}
  .cw-row:hover{border-color:rgba(255,120,2,.55);background:rgba(255,120,2,.05);transform:translateY(-1px)}
  .cw-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* Кружок монеты: рисованная иконка (coin-*.png со своим свечением) поверх цветного
     фолбэка. Картинка не загрузилась - onerror снимает класс .ic-img, возвращая цветной
     круг с символом: пустого места не остаётся никогда. */
  .cw-ic{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;
    place-items:center;font-size:18px;font-weight:900;color:#fff;line-height:1}
  .cw-ic img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:contain}
  .cw-ic.ic-img{background:none!important}
  .cw-ic.ic-img>.cw-sym{visibility:hidden}
  .cw-ic.usdt{background:#26a17b}.cw-ic.usdc{background:#2775ca}.cw-ic.btc{background:#f7931a}
  .cw-ic.eth{background:#627eea}.cw-ic.bnb{background:#f0b90b;color:#1c1a10}
  .cw-ic.ton{background:#0098ea}.cw-ic.sol{background:linear-gradient(135deg,#9945ff,#14f195)}
  .cw-ic.ltc{background:#a6a9aa}
  /* фирменные цвета сетей: пока значка нет, кружок всё равно узнаётся */
  .cw-ic.net-tron{background:#eb0029}
  .cw-ic.net-base{background:#0052ff}
  .cw-ic.net-polygon{background:#8247e5}
  .cw-ic.net-arbitrum{background:#213147}
  .cw-ic.net-optimism{background:#ff0420}
  .cw-ic.net-bitcoin{background:#f7931a}
  .cw-ic.net-litecoin{background:#a6a9aa}
  .cw-ic.net-ethereum{background:#627eea}
  .cw-ic.net-bsc{background:#f0b90b;color:#1c1a10}
  .cw-ic.net-solana{background:linear-gradient(135deg,#9945ff,#14f195)}
  .cw-ic.net-ton{background:#0098ea}
  /* у POL своей картинки нет - кружок фирменным фиолетовым Polygon */
  .cw-ic.pol{background:#8247e5}
  .cw-nm{flex:1;min-width:0}
  .cw-nm b{display:block;font-size:14.5px;font-weight:800;letter-spacing:.01em}
  .cw-nm span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
  .cw-amt{flex:none;text-align:right;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
  .cw-amt small{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
  .cw-chev{flex:none;color:var(--muted);font-size:15px}
  /* ВАЖНО селектор с .cw-nm: правило «.cw-nm span{display:block}» иначе растягивает бейдж
     во всю строку серой полосой (так и вышло на первом прогоне) */
  .cw-nm .cw-tag{display:inline-block;width:auto;font-size:10.5px;font-weight:800;letter-spacing:.03em;
    padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.07);color:#d9d2c8;margin-left:8px}

  /* ---- компактная форма оплаты: сумма крупно + два бара выбора + кнопка ----
     Длинный скроллящийся список монет заменён на бары «Валюта» и «Сеть»: экран не
     распирает, есть поиск, а сеть подставляется сама, если она у монеты одна. */
  .cf-head{text-align:center;padding:2px 0 4px}
  .cf-kind{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;color:#ffc078;background:rgba(255,120,2,.12);
    border-radius:99px;padding:6px 13px}
  .cf-amt{font-size:38px;font-weight:800;line-height:1.1;margin-top:12px;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums}
  .cf-item{font-size:13px;color:var(--muted);margin-top:5px}
  .cf-sel{position:relative;margin-top:12px}
  .cf-lb{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:var(--muted);margin-bottom:7px}
  .cf-bar{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:11px 14px;
    background:var(--bg);border:1px solid var(--line);border-radius:15px;color:var(--text);
    font-family:inherit;text-align:left;cursor:pointer;transition:.15s}
  .cf-bar:hover:not(:disabled){border-color:rgba(255,120,2,.5)}
  .cf-bar.on{border-color:rgba(255,120,2,.75);background:rgba(255,120,2,.05)}
  .cf-bar:disabled{opacity:.45;cursor:not-allowed}
  /* правило общее для бара И для строки списка: без display:block имя и подпись
     склеиваются в «USDTTether · TRC-20…» (ловилось живьём на первом прогоне) */
  .cf-txt{flex:1;min-width:0}
  .cf-txt b{display:block;font-size:14.5px;font-weight:800;line-height:1.25}
  .cf-txt span{display:block;font-size:12px;color:var(--muted);margin-top:3px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cf-bar .cf-ph{font-size:14px;color:var(--muted);font-weight:600}
  .cf-opt .cw-amt,.cf-bar .cw-amt{flex:none;text-align:right;white-space:nowrap}
  .cf-bar .cf-arr{flex:none;color:var(--muted);font-size:12px;transition:transform .2s}
  .cf-bar.on .cf-arr{transform:rotate(180deg)}
  .cf-pop{margin-top:8px;background:var(--bg);border:1px solid var(--line);border-radius:15px;
    overflow:hidden;animation:cfIn .16s ease}
  @keyframes cfIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .cf-search{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line)}
  .cf-search svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2.2;flex:none}
  .cf-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);
    font-family:inherit;font-size:14px}
  .cf-search input::placeholder{color:var(--muted)}
  .cf-opts{max-height:min(42vh,300px);overflow-y:auto;padding:6px}
  /* тонкий аккуратный скроллбар вместо системного «рубильника» на пол-экрана */
  .cf-opts{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
  .cf-opts::-webkit-scrollbar{width:6px}
  .cf-opts::-webkit-scrollbar-track{background:transparent}
  .cf-opts::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}
  .cf-opts::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
  .cf-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:9px 10px;
    background:none;border:none;border-radius:12px;color:var(--text);font-family:inherit;
    text-align:left;cursor:pointer}
  .cf-opt:hover,.cf-opt:focus-visible{background:rgba(255,255,255,.05);outline:none}
  .cf-opt.sel{background:rgba(255,120,2,.1)}
  .cf-opt .cf-txt b{font-size:14px}
  .cf-empty{padding:18px 14px;text-align:center;font-size:13px;color:var(--muted)}
  .cf-go{width:100%;margin-top:16px;min-height:54px;border:none;border-radius:15px;
    background:var(--grad);color:#160f05;font-family:inherit;font-size:15.5px;font-weight:800;
    cursor:pointer;transition:.15s}
  .cf-go:hover:not(:disabled){filter:brightness(1.06)}
  .cf-go:disabled{background:rgba(255,255,255,.07);color:var(--muted);cursor:not-allowed}
  .cf-trust{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
    font-size:11.5px;color:var(--muted);line-height:1.5;text-align:center}

  /* ---- экран счёта: QR + поля с копированием + живой статус ---- */
  /* Композиция ПО ЦЕНТРУ, одной осью: QR → сумма → сеть → поля. Раньше QR стоял слева, а
     текст справа - блоки разной высоты не выравнивались ни по верху, ни по центру, и экран
     выглядел кривым. Симметрия ещё и одинакова на телефоне - отдельной раскладки не нужно. */
  .iv-wrap{display:flex;flex-direction:column;gap:12px}
  .iv-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
    padding:2px 0 2px}
  .iv-qr{flex:none;width:168px;height:168px;background:#fff;border-radius:18px;padding:10px;
    display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.35)}
  .iv-qr svg{width:100%;height:100%;display:block}
  .iv-sum{min-width:0}
  .iv-sum .lb{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .iv-sum .val{font-size:30px;font-weight:800;line-height:1.15;margin-top:5px;word-break:break-all;
    font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .iv-sum .val em{font-style:normal;font-size:17px;color:var(--muted);margin-left:7px}
  .iv-net{display:inline-flex;align-items:center;gap:8px;margin-top:11px;font-size:12.5px;
    font-weight:700;padding:6px 13px 6px 6px;border-radius:99px;background:rgba(255,120,2,.12);color:#ffc078}
  .iv-net .cw-ic{width:26px;height:26px;font-size:13px}
  .iv-fld{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);
    border-radius:14px;padding:12px 14px}
  .iv-fld>div{flex:1;min-width:0}
  .iv-fld .lb{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted)}
  .iv-fld code{display:block;font-size:13px;font-family:var(--mono,ui-monospace,monospace);
    word-break:break-all;margin-top:3px;line-height:1.45}
  .iv-cp{flex:none;min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:11px;
    background:rgba(255,255,255,.06);border:1px solid var(--line);color:#d9d2c8;font-size:15px;cursor:pointer}
  .iv-cp:hover{border-color:rgba(255,120,2,.55);color:#ffc078}
  .iv-cp.done{background:rgba(94,215,140,.15);border-color:rgba(94,215,140,.5);color:#5ed78c}
  .iv-warn{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.55;
    color:#e9c9a0;background:rgba(255,160,40,.09);border:1px solid rgba(255,160,40,.25);
    border-radius:12px;padding:11px 13px}
  .iv-warn b{color:#ffd9a8}
  .iv-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
  .iv-status{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:#d9d2c8;
    background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .iv-status.seen{border-color:rgba(255,160,40,.45);color:#ffc078}
  .iv-status.ok{border-color:rgba(94,215,140,.5);color:#5ed78c}
  .iv-timer{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800;color:var(--muted)}
  .iv-timer.low{color:#ff9d8a}

  /* ---------- страница работы (не модалка: свой URL /work/<uid>, назад - History API) ---------- */
  .wp-back{position:absolute;left:12px;top:12px;z-index:6;display:inline-flex;align-items:center;gap:9px;background:rgba(8,8,10,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:13.5px;font-weight:600;padding:10px 16px;border-radius:12px;transition:.15s}
  .wp-back:hover{color:var(--text);border-color:rgba(255,120,2,.45);transform:translateX(-2px)}
  .wp-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .wm-box{position:relative;display:flex;gap:18px;align-items:flex-start}
  .wm-pic{position:relative;flex:1;min-width:0;background:#08080a;min-height:min(68vh,520px);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;max-height:calc(100vh - var(--head-h,112px) - 130px)}
  .wm-pic:empty{background:linear-gradient(100deg,#0d0d10 30%,#16161a 50%,#0d0d10 70%);background-size:220% 100%;animation:wmload 1.25s linear infinite}
  @keyframes wmload{0%{background-position:120% 0}100%{background-position:-20% 0}}
  @media(prefers-reduced-motion:reduce){.wm-pic:empty{animation:none}}
  .wm-pic img,.wm-pic svg,.wm-pic video{max-width:100%;max-height:calc(100vh - var(--head-h,112px) - 130px);display:block;object-fit:contain}
  .wm-side{width:392px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:20px}
  /* Заголовок работы: он же H1 страницы. Серверный блок для краулера клиент
     снимает при открытии, поэтому свой заголовок обязателен - иначе в готовой
     странице названия нет ни для человека, ни для поиска (23.08) */
  /* Заморозка: полотно поверх всего. Закрыть его нельзя намеренно - это не
     уведомление, а состояние аккаунта. Живой остаётся одна кнопка - поддержка */
  .frz-ov{position:fixed;inset:0;z-index:9999;background:rgba(8,8,10,.94);
    display:flex;align-items:center;justify-content:center;padding:20px}
  .frz-box{max-width:440px;text-align:center;background:var(--bg-2);
    border:1px solid rgba(255,90,90,.5);border-radius:20px;padding:28px 24px}
  .frz-box h2{font-size:20px;margin:0 0 10px}
  .frz-box p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 18px}
  .frz-box .btn-grad{width:100%;justify-content:center}
  /* подзаголовка «автор · стиль» тут больше нет (27.08): автор идёт ниже
     своей карточкой, стиль - в «Параметрах». Отступ переехал на заголовок */
  .wm-h1{font-size:20px;line-height:1.25;font-weight:800;margin:0 0 14px;
    letter-spacing:-.01em;word-break:break-word}
  @media(max-width:900px){.wm-h1{font-size:17px}}
  /* плавность: страница работы проявляется, галерея так же мягко возвращается */
  .wm-media{overflow:hidden}
  .wm-pic{position:relative}
  #p-work{opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease}
  #p-work.in{opacity:1;transform:none}
  .page.back-in{animation:pgIn .22s ease}
  @keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media(max-width:900px){
    .wm-box{flex-direction:column}
    .wm-side{width:100%}
    .wm-pic{max-height:52vh}.wm-pic img,.wm-pic svg,.wm-pic video{max-height:52vh}
  }
  .wm-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-right:44px}
  .wm-top .ava{width:34px;height:34px}
  .wm-top b{display:block;font-size:14.5px;font-weight:800}
  .wm-top span{font-size:11.5px;color:var(--muted)}
  .wm-top .lk{margin-left:auto;font-size:12.5px;font-weight:700;color:#ff9b3d}
  .wm-cta{width:100%;background:var(--btn);color:#fff;border:none;font-weight:800;font-size:14.5px;padding:13px;border-radius:13px;box-shadow:0 2px 12px rgba(255,120,2,.18);margin-bottom:10px}
  .wm-cta:hover{transform:translateY(-1px)}
  .wm-acts{display:flex;gap:8px;margin-bottom:18px}
  .wm-acts button{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:600;padding:9px 4px;border-radius:11px}
  .wm-acts button:hover{color:var(--text);border-color:rgba(255,120,2,.45)}
  .wm-f{margin-bottom:14px}
  .wm-f .lb{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:6px;display:block}
  .wm-val{display:flex;align-items:flex-start;gap:9px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.5;color:#ece7e0;max-height:132px;overflow-y:auto;scrollbar-width:none}
  .wm-val::-webkit-scrollbar{display:none}
  .wm-val.empty{color:var(--muted)}
  .wm-copy{flex-shrink:0;background:none;border:none;color:var(--muted);font-size:13px;padding:0;line-height:1.4}
  .wm-copy:hover{color:#ffc078}
  .wm-tags{display:flex;flex-wrap:wrap;gap:6px}
  .wm-tag{background:rgba(255,120,2,.12);border:1px solid rgba(255,120,2,.4);color:#ffc078;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px}
  .wm-report{display:block;width:100%;background:none;border:none;color:#8f8880;font-family:inherit;font-size:12px;padding:14px 0 2px;cursor:pointer;text-align:center}
  .wm-report:hover{color:#ff9db1}
  .rep-box{display:flex;flex-direction:column;gap:8px}
  .rep-box button{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:#f4f1ec;font-family:inherit;font-size:13.5px;padding:11px 14px;border-radius:11px;cursor:pointer;text-align:left}
  .rep-box button:hover{border-color:rgba(255,120,2,.5)}
  .wm-meta{display:flex;flex-wrap:wrap;gap:6px}
  .wm-meta span{background:var(--bg);border:1px solid var(--line);color:var(--muted);font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px}
  /* список LoRA под промптом: строкой на каждую, чтобы длинные названия не
     рвались чипами и вес читался в одном столбце */
  .wm-loras{display:flex;flex-direction:column;gap:6px}
  .lora-empty{font-size:12.5px;color:var(--muted);padding:2px 0}
  .lora-row{display:flex;align-items:center;gap:10px;background:var(--bg);
    border:1px solid var(--line);border-radius:10px;padding:9px 12px}
  .lora-dot{width:7px;height:7px;border-radius:50%;background:#ffa94d;flex:none}
  .lora-nm{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lora-w{flex:none;font-size:11px;font-weight:800;color:var(--muted);
    font-variant-numeric:tabular-nums}
  .wm-sim{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .wm-sim .s{border-radius:11px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;cursor:pointer;background:var(--bg-3)}
  .wm-sim .s img,.wm-sim .s svg,.wm-sim .s video{width:100%;height:100%;object-fit:cover;display:block}
  .wm-sim .s:hover{border-color:rgba(255,120,2,.55)}
  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:300;background:#1d1d21;border:1px solid rgba(255,120,2,.45);color:#f4f1ec;font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.5);max-width:min(540px,calc(100vw - 36px));text-align:center}
  /* ---------- красивые уведомления (тосты v2, правый нижний угол) ---------- */
  #vtoasts{position:fixed;right:22px;bottom:22px;z-index:320;display:flex;flex-direction:column;
    gap:12px;align-items:flex-end;pointer-events:none}
  .vt{pointer-events:auto;position:relative;overflow:hidden;width:min(380px,calc(100vw - 44px));
    background:rgba(26,25,28,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px 16px 14px 18px;
    box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
    opacity:0;transform:translateX(28px) scale(.97);
    transition:opacity .38s ease,transform .38s cubic-bezier(.22,.9,.3,1.2)}
  .vt.show{opacity:1;transform:translateX(0) scale(1)}
  .vt.hide{opacity:0;transform:translateX(34px) scale(.96);transition:opacity .45s ease,transform .45s ease}
  .vt::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--vt-acc,#3ddc96)}
  .vt.warn::before{background:#ffb020}
  .vt-row{display:flex;gap:11px;align-items:flex-start}
  .vt-ic{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
    background:rgba(61,220,150,.14);color:#3ddc96;font-size:14px;font-weight:800}
  .vt.warn .vt-ic{background:rgba(255,176,32,.14);color:#ffb020}
  .vt-tx{flex:1;min-width:0}
  .vt-t{font-size:13.5px;font-weight:800;color:#f4f1ec;display:flex;gap:8px;align-items:baseline}
  .vt-t small{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}
  .vt-b{font-size:12.5px;color:#cfc8bf;line-height:1.5;margin-top:3px;overflow-wrap:anywhere}
  .vt-x{flex:none;background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;
    padding:2px 4px;border-radius:6px}
  .vt-x:hover{color:#fff}
  .vt-acts{display:flex;gap:8px;margin-top:11px}
  .vt-go{background:var(--btn);color:#fff;border:none;font-family:inherit;font-weight:800;
    font-size:12.5px;padding:8px 14px;border-radius:9px;cursor:pointer;
    box-shadow:0 4px 14px rgba(255,120,2,.3)}
  .vt-go:hover{transform:translateY(-1px)}
  .vt-skip{background:none;border:none;color:var(--muted);font-family:inherit;font-weight:700;
    font-size:12.5px;padding:8px 10px;cursor:pointer;border-radius:9px}
  .vt-skip:hover{color:#f4f1ec}


/* ---------- заглушка плитки, пока не приехала картинка ----------
   Владелец видел на месте работы пустой тёмный прямоугольник и решил, что сайт
   сломан. Мерцание показывает, что идёт загрузка. Трафика не стоит ни байта:
   это градиент на самой плитке, картинка закрывает его собой. Класс `ok`
   ставится в слушателе load (vit-app.js) - без него анимация крутилась бы под
   каждой уже загруженной плиткой. */
.work:not(.ok){
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.055) 50%,
    rgba(255,255,255,0) 70%);
  background-size:220% 100%;
  animation:vit-wait 1.25s ease-in-out infinite;
}
@keyframes vit-wait{from{background-position:120% 0}to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){.work:not(.ok){animation:none}}


/* ---------- строка фильтров на телефоне ----------
   Категории прокручиваются вбок, сортировка стоит справа в том же ряду - и на
   узком экране категория обрезается ровно там, где начинается «Топ». Замер:
   `.chiprow` кончается на 258, а кнопки внутри уходят до 729, то есть режутся
   посередине слова и читаются как наезд. Разводим по строкам. */
@media(max-width:620px){
  /* ОДИН ряд: сортировка первой и неподвижна, категории прокручиваются после неё.
     Изначально было наоборот - категории слева, сортировка справа, и категория
     обрезалась ровно там, где начинается «Топ»: выглядело как наезд. Теперь это
     соседние блоки, наложиться они не могут. */
  .filterline{flex-wrap:nowrap;gap:10px;margin:14px 0 12px}
  /* сортировка - компактная капсула, а не две кнопки во всю ширину */
  .sort{order:0;margin-left:0;flex:0 0 auto;width:auto;gap:0;padding:3px;
    background:var(--bg-2);border:1px solid var(--line);border-radius:999px}
  .sort button{flex:0 0 auto;padding:7px 14px;border-radius:999px;
    font-size:12.5px;font-weight:700;color:var(--muted);background:none;white-space:nowrap}
  .sort button.on{color:#fff;background:linear-gradient(160deg,#ff8f26,#f56a00);
    box-shadow:0 2px 8px rgba(255,120,2,.32)}
  /* категории занимают остаток строки; min-width:0 обязателен, иначе flex-элемент
     не даст себя сжать и вытолкнет сортировку за экран */
  .chiprow{order:1;flex:1 1 auto;min-width:0;width:auto}
  /* обрезанная кнопка должна выглядеть как продолжение списка, а не как обрубок */
  .chiprow{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
           mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
}