/* Токены: SPEC §2. Цвета и размеры берём только отсюда. */
@font-face{font-family:'Onest';src:url(/img/fonts/onest.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* ТЁМНАЯ (по умолчанию) */
:root{
  color-scheme:dark;
  /* поверхности */
  --bg:#0F0B16;            /* фон страницы */
  --bg-2:#150F1F;          /* шапка, подвал, нижняя панель вкладок, мобильная панель покупки */
  --surface:#1B1527;       /* плитки, панели, модалки, корзина */
  --surface-hover:#211A2F; /* плитка при наведении */
  --surface-2:#251D35;     /* поля, чипы, вторичные кнопки, плашка баланса, тост */
  --surface-3:#30264A;     /* hover для surface-2 */
  --slot:#231B33;          /* основа слота предмета; поверх неё --tint цвета редкости */
  --tint:9%;              /* доля цвета редкости в слоте (светлая: 10%) */
  --line:#2C2340;          /* разделители */
  --line-2:#43375E;        /* обводка ghost-кнопок */
  --field-line:#7F71A3;    /* рамка полей ввода: 3.67 на surface-2, 4.05 на surface (WCAG 1.4.11, ≥3:1). Вне таблицы SPEC §2, ждёт ОК владельца */
  /* текст: на surface 16.1 / 9.6 / 6.4; на surface-2 14.6 / 8.7 / 5.8 */
  --ink:#F6F2FC; --ink-2:#C4BAD6; --ink-3:#A197B6;
  /* бренд = действие */
  --brand:#7C2BE8;         /* белый текст 6.2:1 */
  --brand-hover:#8F45F5; --brand-press:#6A1FD1;
  --brand-text:#B794FF;    /* ссылки и фиолетовый текст: 7.3 на surface, 6.2 на brand-soft */
  --brand-soft:rgba(124,43,232,.22);
  --on-brand:#FFFFFF;
  /* золото = деньги */
  --gold:#FFC93C;          /* фон «+», «Пополнить»; текст --on-gold */
  --gold-hover:#FFD466; --gold-press:#E8B420;
  --gold-text:#FFC93C;     /* баланс, итоги и цены */
  --gold-soft:rgba(255,201,60,.14);
  --on-gold:#2B1A04;
  --price:var(--gold-text);/* цена на плитке, в строке, на странице предмета */
  /* янтарный = осторожно (только фейк-боты и проверка ника) */
  --warn:#FFA629; --warn-hover:#FFB84D;
  --warn-text:#FFC46B;     /* 8.9 на warn-soft */
  --warn-soft:rgba(255,166,41,.13);
  --on-warn:#2A1600;       /* 8.9 на warn */
  /* статусы */
  --ok:#3FD467; --ok-text:#62E186; --ok-soft:rgba(63,212,103,.14);     /* ok-text на ok-soft 8.3 */
  --err:#FF5A5F; --err-text:#FF8A8D; --err-soft:rgba(255,90,95,.14);   /* err-text на surface 7.8 */
  --focus:#FFD27A;         /* кольцо фокуса 2px, отступ 2px; 13.7 к bg */
  --scrim:rgba(7,4,12,.72);
  --shadow-pop:0 16px 40px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  --shadow-tile:none; --tile-edge:transparent;
  --item-shadow:drop-shadow(0 8px 10px rgba(0,0,0,.4));
  --cat-on-bg:#F6F2FC; --cat-on-ink:#150F1F;      /* выбранная категория и пресет: инверсия */
  --stamp-bg:rgba(12,8,19,.66); --stamp-ink:#EDE7F7;
  --avatar-bg:#4A2F7A; --avatar-ink:#FFFFFF; --avatar-img-bg:#D8D2E0;   /* аватар: буква под headshot; одинаковы в обеих темах */
  --knob:#FFFFFF;          /* бегунок переключателя .sw */
  --on-ok:#06210F; --on-err:#FFFFFF;               /* значок в круге статуса тоста */
  --on-chroma:#1A0F24;     /* текст на радужном бейдже «Chroma» */
  --seg-shadow:0 1px 2px rgba(0,0,0,.25);          /* выбранная кнопка сегмента */
  --knob-shadow:0 1px 2px rgba(0,0,0,.3);
  /* редкость: текст (--rc-txt). На surface ≥5.8, на surface-2 ≥5.3 */
  --r-godly:#F25CF2; --r-ancient:#A57BFF; --r-legendary:#FF5C5C; --r-unique:#FF9D3B;
  --r-rare:#3BD65C; --r-uncommon:#2BE5E5; --r-common:#B0B0B0; --r-vintage:#F2E24B;
  /* редкость: заливка слота, полоса, точка чипа (--rc-glow). Одинаковы в обеих темах */
  --r-godly-glow:#F25CF2; --r-ancient-glow:#7A3BFF; --r-legendary-glow:#FF4D4D; --r-unique-glow:#FF9D3B;
  --r-rare-glow:#3BD65C; --r-uncommon-glow:#2BE5E5; --r-common-glow:#A6A6A6; --r-vintage-glow:#F2E24B;
  --chroma:linear-gradient(90deg,#FF6B8B,#FFB45E,#F2E24B,#7EE38A,#5CC8FF,#B18CFF);
  /* шрифт, сетка, радиусы */
  --f:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Roboto Mono',monospace;   /* только ник бота */
  --gut:24px;              /* 16px при ≤900 */
  --maxw:1600px;
  --tabbar-h:0px;          /* 78px при ≤900 (капсула 64 + 10 от низа + 4), 66px у телефона лёжа */
  --r-sm:6px; --r-md:10px; --r-12:12px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
}

/* СВЕТЛАЯ */
html.light{
  --slot-deep:#F4F0F9; --glow-a:24%; --spark-a:.24;
  /* стекло .72: #4B405C на нём ≥4.8 и над чёрным, и над насыщенным красным; тонкая тёмная кромка
     отделяет белую капсулу от белых плиток маркета */
  --glass-bg:rgba(255,255,255,.46); --glass-solid:rgba(255,255,255,.97);
  --glass-fx:blur(20px) saturate(1.8) brightness(1.06);
  --glass-rim:rgba(255,255,255,.95); --glass-hi:rgba(255,255,255,.9); --glass-lo:rgba(26,18,36,.07);
  --glass-shadow:0 0 0 .5px rgba(26,18,36,.14),0 12px 30px -10px rgba(40,20,70,.28),0 1px 4px rgba(40,20,70,.10);
  --glass-sheen:rgba(255,255,255,.55);
  --lens-bg:rgba(26,18,36,.07); --lens-rim:rgba(255,255,255,.8); --lens-press:rgba(83,33,151,.15);
  color-scheme:light;
  --bg:#F6F3EE; --bg-2:#FFFFFF;                  /* тёплая «бумага» */
  --surface:#FFFFFF; --surface-hover:#FFFFFF; --surface-2:#F1ECF7; --surface-3:#E5DDF0;
  --slot:#F4F0F9; --tint:7%;                    /* 10%, чтобы годли-сетка не становилась розовой */
  --line:#E6E0EC; --line-2:#CDC3DA;
  --field-line:#857A98;                           /* 4.01 на белом, 3.45 на surface-2 */
  --seg-shadow:0 1px 3px rgba(40,20,70,.14);
  --ink:#1A1224; --ink-2:#4B405C; --ink-3:#645975;   /* на белом 18.2 / 9.6 / 6.5 */
  --brand:#7C2BE8; --brand-hover:#6A1FD1; --brand-press:#5A17B8;
  --brand-text:#6420CC;                           /* 8.0 на белом, 6.8 на brand-soft */
  --brand-soft:rgba(124,43,232,.10); --on-brand:#FFFFFF;
  --gold:#FFC93C; --gold-hover:#F5BC2A; --gold-press:#E0AA18;
  --gold-text:#7A4A00;                            /* баланс и итоги, 7.5 на белом */
  --gold-soft:rgba(255,201,60,.22); --on-gold:#2B1A04;
  --price:var(--ink);                             /* цены в светлой теме чернильные, золото только у денег */
  --warn:#F59E0B; --warn-hover:#E08E00; --warn-text:#8A4B00; --warn-soft:rgba(245,158,11,.15); --on-warn:#2A1600;
  --ok:#1F9A45; --ok-text:#16713A; --ok-soft:rgba(31,154,69,.12);
  --err:#D93036; --err-text:#B3242A; --err-soft:rgba(217,48,54,.10);
  --focus:#5A17B8;                                /* темнее кнопки, отделён от неё зазором 2px */
  --scrim:rgba(26,18,36,.45);
  --shadow-pop:0 16px 40px rgba(40,20,70,.18),0 2px 6px rgba(40,20,70,.08);
  --shadow-tile:0 1px 2px rgba(40,20,70,.06); --tile-edge:#ECE6F1;   /* белая плитка + inset 1px */
  --item-shadow:drop-shadow(0 6px 8px rgba(40,20,70,.18));
  --cat-on-bg:#1A1224; --cat-on-ink:#FFFFFF;
  --stamp-bg:rgba(255,255,255,.92); --stamp-ink:#3A3048;
  /* на белом ≥5.4, на surface-2 ≥4.7 */
  --r-godly:#9E169E; --r-ancient:#551AC8; --r-legendary:#BF1F27; --r-unique:#965300;
  --r-rare:#1F7A2E; --r-uncommon:#0A7377; --r-common:#666666; --r-vintage:#756300;
  /* --r-*-glow не переопределяем */
}

/* Редкость: класс на .it / .crow / .srow / .lrow / #itempg / .mitem задаёт обе переменные.
   rarClass(r) в JS даёт имя класса; rvars(r) пишет то же inline. */
.r-godly{--rc-txt:var(--r-godly);--rc-glow:var(--r-godly-glow)}
.r-ancient{--rc-txt:var(--r-ancient);--rc-glow:var(--r-ancient-glow)}
.r-legendary{--rc-txt:var(--r-legendary);--rc-glow:var(--r-legendary-glow)}
.r-unique{--rc-txt:var(--r-unique);--rc-glow:var(--r-unique-glow)}
.r-rare{--rc-txt:var(--r-rare);--rc-glow:var(--r-rare-glow)}
.r-uncommon{--rc-txt:var(--r-uncommon);--rc-glow:var(--r-uncommon-glow)}
.r-common{--rc-txt:var(--r-common);--rc-glow:var(--r-common-glow)}
.r-vintage{--rc-txt:var(--r-vintage);--rc-glow:var(--r-vintage-glow)}

/* Служебные размеры и слои (не цвета). Слои по SPEC §5.12, кроме тостов:
   SPEC ставит их (70) ниже листа фильтров (80), у нас 90 нарочно — ошибка
   загрузки и «Вход сбросился» должны быть видны и поверх листа (аудит B-19). */
:root{
  --hdr-h:68px;            /* 60px при ≤900 */
  --z-sticky:20; --z-header:30; --z-buybar:35; --z-tabbar:40;
  --z-ddov:44; --z-dd:45;  /* затемнение под выпадашкой-листом и само меню .ddm */
  --z-cartov:58; --z-cart:60; --z-modal:62; --z-sheet:80; --z-toast:90;
  /* Liquid glass для нижней панели на телефоне. Стекло .78 без осветления фона: подпись --ink-2
     на нём ≥4.7 даже над сплошным белым (при .52 и brightness над светлой картинкой падало к 2–3). */
  --glass-bg:rgba(27,21,39,.42); --glass-solid:rgba(27,21,39,.96);
  --glass-fx:blur(20px) saturate(1.6);
  --glass-rim:rgba(255,255,255,.34); --glass-hi:rgba(255,255,255,.14); --glass-lo:rgba(0,0,0,.28);
  --glass-shadow:0 12px 32px -8px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.28);
  --glass-sheen:rgba(255,255,255,.10);
  --lens-bg:rgba(255,255,255,.17); --lens-rim:rgba(255,255,255,.26);
  --lens-press:rgba(207,177,246,.24);   /* линза под пальцем: чуть фиолетовее (было color-mix с --brand 9%) */
  --slot-deep:#17111F;    /* основа слота: тёмная, сверху тусклый оттенок редкости */
  --glow-a:38%; --spark-a:.26;
  --toast-lift:0px;        /* экран с фиксированной панелью снизу поднимает тосты на её высоту */
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:900px){
  :root{--gut:16px;--tabbar-h:78px;--hdr-h:60px}   /* нижняя «капсула»: 64 + 10 от низа + 4 воздух */
}
@media (max-width:900px) and (max-height:500px){
  :root{--tabbar-h:66px}                            /* телефон лёжа: капсула 52 */
}
/* База: сброс, типографика, фокус, служебные классы. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:calc(var(--hdr-h) + 16px);scroll-padding-bottom:calc(var(--tabbar-h) + 16px)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--f);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0}
h1,h2,h3,h4{text-wrap:balance;line-height:1.2}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:var(--brand-text);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
a{-webkit-tap-highlight-color:transparent}
summary{cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
b,strong{font-weight:700}
small{font-size:13px}
hr{border:0;border-top:1px solid var(--line);margin:0}
table{border-collapse:collapse}
::selection{background:var(--brand);color:var(--on-brand)}

/* Фокус: кольцо 2px --focus с зазором 2px у всего, что фокусируется с клавиатуры.
   Поля могут заменить его своей рамкой, но только на заметную (см. .inp, .find). */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
/* Заголовки и контейнеры, которым фокус ставит роутер (tabindex=-1), кольца не рисуют. */
[tabindex="-1"]:focus{outline:none}

/* Скроллбары */
/* Стилизованный ::-webkit-scrollbar в Chrome всегда занимает 12px, даже там, где полосы обычно
   поверх страницы. Место под полосу держим всегда: иначе при блокировке прокрутки (корзина,
   модалка) и при переходе между короткой и длинной страницей шапка прыгает на 12px. */
html{scrollbar-color:var(--line-2) var(--bg);scrollbar-gutter:stable}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--ink-3)}

/* Скрытие: единственный механизм */
[hidden],.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.skip-link{position:fixed;left:16px;top:-80px;z-index:calc(var(--z-toast) + 1);display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none;box-shadow:var(--shadow-pop)}
.skip-link:focus{top:calc(12px + env(safe-area-inset-top))}

/* Смена темы: на два кадра гасим все переходы, чтобы не было «перелива» */
html.theming *,html.theming *::before,html.theming *::after{transition:none!important}

/* Блокировка прокрутки под модалкой, корзиной, выпадашкой-листом и листом фильтров.
   body{overflow:visible}: при html{overflow:hidden} свой overflow-x у body делает его
   прокручиваемым контейнером, и липкая шапка уезжает вместе со страницей. */
html.cartlock,html.ddlock,html.catalog-filter-lock{overflow:hidden}
html.cartlock body,html.ddlock body,html.catalog-filter-lock body{overflow:visible;overscroll-behavior:none}

/* Поля 16px на телефонах: иначе iOS Safari увеличивает страницу при фокусе */
@media (max-width:900px),(pointer:coarse){
  input,select,textarea{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
/* Общие компоненты: SPEC §5.1–5.11. Экранные стили живут в 30-…90-*.css. */

/* Иконки без размеров в шаблонах не должны растягиваться на всю ширину.
   :where() даёт нулевую специфичность: любой класс переопределяет. */
:where(svg:not([width]):not([height])){width:20px;height:20px;flex:none}
:where(svg[viewBox="0 0 24 24"]:not([fill])){fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ───────── 5.1 Кнопки ───────── */
.b{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:0;border-radius:var(--r-md);
  background:var(--surface-2);color:var(--ink);font:700 15px/1 var(--f);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color .12s,color .12s,box-shadow .12s,transform .06s}
/* Наведение и нажатие — только у доступной кнопки. :where() не добавляет специфичности,
   зато :disabled и aria-disabled="true" под курсором и при нажатии выглядят недоступными. */
.b:where(:not(:disabled,[aria-disabled=true])):hover{background:var(--surface-3)}
.b:where(:not(:disabled,[aria-disabled=true])):active{transform:translateY(1px)}
.b.pri{background:var(--brand);color:var(--on-brand)}
.b.pri:where(:not(:disabled,[aria-disabled=true])):hover{background:var(--brand-hover)}
.b.pri:where(:not(:disabled,[aria-disabled=true])):active{background:var(--brand-press)}
.b.soft{background:var(--brand-soft);color:var(--brand-text)}
.b.soft:where(:not(:disabled,[aria-disabled=true])):hover{background:var(--brand);color:var(--on-brand)}
.b.gold{background:var(--gold);color:var(--on-gold)}
.b.gold:where(:not(:disabled,[aria-disabled=true])):hover{background:var(--gold-hover)}
.b.gold:where(:not(:disabled,[aria-disabled=true])):active{background:var(--gold-press)}
.b.warnb{background:var(--warn);color:var(--on-warn)}
.b.warnb:where(:not(:disabled,[aria-disabled=true])):hover{background:var(--warn-hover)}
.b.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.b.ghost:where(:not(:disabled,[aria-disabled=true])):hover{background:var(--surface-2)}
.b.sm{height:40px;padding:0 14px;font-size:14px}
.b.lg{height:52px;padding:0 24px;font-size:16px}
.b.wide{width:100%;height:auto;min-height:44px;padding-block:12px;line-height:1.25;white-space:normal;text-align:center}
.b.wide.sm{min-height:40px;padding-block:10px}
.b.wide.lg{min-height:52px}
.b:disabled:not(.loading),.b[aria-disabled=true]{background:var(--surface-2);color:var(--ink-3);box-shadow:none;cursor:not-allowed;transform:none}
.b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Загрузка: текст прячем, крутим кольцо цвета текста кнопки */
.b.loading{color:transparent;pointer-events:none}
.b.loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2.5px solid var(--ink);border-right-color:transparent;animation:spin .7s linear infinite}
.b.pri.loading::after,.b.soft.loading::after{border-color:var(--on-brand);border-right-color:transparent}
.b.soft.loading{background:var(--brand)}
.b.gold.loading::after{border-color:var(--on-gold);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}

/* Иконочная кнопка: 40×40, всегда с aria-label. .mx — старое имя закрытия в модалке и корзине. */
.ib,.mx{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:var(--r-md);
  background:transparent;color:var(--ink-2);font-size:18px;line-height:1;cursor:pointer;transition:background-color .12s,color .12s}
:is(.ib,.mx):where(:not(:disabled,[aria-disabled=true])):hover{background:var(--surface-2);color:var(--ink)}
.ib.soft{background:var(--surface-2);color:var(--ink)}
.ib.soft:where(:not(:disabled,[aria-disabled=true])):hover{background:var(--surface-3)}
.ib svg,.mx svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Текстовая кнопка-ссылка. .auth-link — старое имя, используется в нескольких экранах. */
.linkb,.auth-link{display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--brand-text);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
  text-decoration-color:color-mix(in srgb,var(--brand-text) 45%,transparent)}
.linkb:hover,.auth-link:hover{text-decoration-color:currentColor}

/* ───────── 5.2 Поля ───────── */
.inp,
.fld input,.fld select,.fld textarea,
.field input,.field select,.field textarea,
.modal-field input,.modal-field select,.modal-field textarea{
  display:block;width:100%;height:48px;padding:0 14px;border:1.5px solid var(--field-line);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--ink);font-size:16px;line-height:1.3;-webkit-appearance:none;appearance:none;
  transition:border-color .12s,box-shadow .12s}
textarea.inp,.fld textarea,.field textarea,.modal-field textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical}
/* Рамка --field-line и рамка фокуса --brand-hover держат 3:1 к фону поля в обеих темах (WCAG 1.4.11):
   у --line-2 было 1.5:1, у --brand в тёмной 2.6:1. Фокус: рамка + кольцо 3px, это видимая замена outline. */
.inp:focus,
.fld :is(input,select,textarea):focus,
.field :is(input,select,textarea):focus,
.modal-field :is(input,select,textarea):focus{border-color:var(--brand-hover);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.inp.bad,.inp[aria-invalid=true],
.fld.bad :is(input,select,textarea),.fld :is(input,select,textarea)[aria-invalid=true],
.field :is(input,select,textarea)[aria-invalid=true],
.modal-field :is(input,select,textarea)[aria-invalid=true]{border-color:var(--err)}
.inp:disabled,.fld :is(input,select,textarea):disabled,.field :is(input,select,textarea):disabled,.modal-field :is(input,select,textarea):disabled{opacity:.6;cursor:not-allowed}
.fld,.field,.modal-field{display:block;min-width:0}
.fld+.fld,.field+.field,.modal-field+.modal-field{margin-top:14px}
/* Подпись всегда над полем */
.fld>label,.field>label,.modal-field>label,.lbl,.picker-label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin-bottom:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.fld>label .rule{font-size:13px;font-weight:500;color:var(--ink-3)}
.ferr{margin-top:6px;font-size:13px;font-weight:600;color:var(--err-text)}
.fhint,.field-hint{margin-top:6px;font-size:13px;color:var(--ink-2)}
/* Поле с кнопкой внутри (пароль): .fld .wrap или .pwwrap */
.fld .wrap,.pwwrap{position:relative}
.fld .wrap>svg{display:none}
.fld .wrap input,.pwwrap input{padding-right:52px}
.eye,.pwwrap .ib{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:8px;
  background:transparent;color:var(--ink-3);cursor:pointer}
.eye:hover,.pwwrap .ib:hover{background:var(--surface-3);color:var(--ink)}
.eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.eye:disabled{opacity:.5}

/* Выпадающий список с шевроном. У <select> нет ::after, а в data-URI нельзя var(),
   поэтому шеврон задан дважды: цветом --ink-3 тёмной (#A197B6) и светлой (#645975) темы. */
.select,select.inp{height:44px;padding:0 38px 0 14px;border:0;border-radius:var(--r-md);-webkit-appearance:none;appearance:none;cursor:pointer;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A197B6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center/18px no-repeat;
  color:var(--ink);font-size:15px;font-weight:700}
html.light :is(.select,select.inp){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23645975' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
select.inp{border:1.5px solid var(--field-line);height:48px;font-weight:500}
.select:hover{background-color:var(--surface-3)}
.select.sm{height:40px;font-size:14px}

/* Поиск: 44, лупа слева, крестик очистки справа */
.find{position:relative;min-width:0}
.find>svg,.find .mag{position:absolute;left:14px;top:22px;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;pointer-events:none}
.find input{display:block;width:100%;height:44px;padding:0 44px 0 42px;border:1.5px solid transparent;border-radius:var(--r-md);background:var(--surface-2);
  color:var(--ink);font-size:15px;-webkit-appearance:none;appearance:none;transition:border-color .12s,background-color .12s,box-shadow .12s}
.find input::-webkit-search-decoration,.find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.find input:hover{border-color:var(--field-line)}
.find input:focus{border-color:var(--brand-hover);background:var(--surface);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.find .xq{position:absolute;right:2px;top:2px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:8px;background:none;color:var(--ink-3);font-size:20px;line-height:1;cursor:pointer}
.find .xq:hover{color:var(--ink);background:var(--surface-3)}
.find kbd{display:none}
@media (max-width:900px),(pointer:coarse){.find input{font-size:16px}}

/* Денежное поле: 56, 24/800, суффикс «₽» справа */
.money-in{position:relative}
.money-in input{display:block;width:100%;height:56px;padding:0 44px 0 16px;border:1.5px solid var(--field-line);border-radius:var(--r-12);background:var(--surface-2);
  color:var(--ink);font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;-moz-appearance:textfield}
.money-in input::-webkit-outer-spin-button,.money-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.money-in input:focus{border-color:var(--brand-hover);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.money-in>span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:700;color:var(--ink-3);pointer-events:none}

/* ───────── 5.3 Сегменты, чипы, переключатель ───────── */
.seg{display:inline-flex;max-width:100%;padding:3px;border-radius:var(--r-12);background:var(--surface-2)}
.seg button{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 13px;border:0;border-radius:9px;
  background:transparent;color:var(--ink-2);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.seg button:hover{color:var(--ink)}
.seg button:is(.on,[aria-pressed=true],[aria-selected=true],[aria-checked=true]){background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--seg-shadow)}
.seg button svg{width:16px;height:16px}
.seg button b{margin-left:4px;font-weight:800;color:var(--ink-3)}
@media (max-width:900px){.seg button{height:40px}}

/* Активный фильтр в пустом состоянии: вся пилюля — кнопка «Убрать» */
.achip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 8px 0 14px;border:0;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer}
.achip:hover{background:var(--surface-3)}
.achip svg{width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:2.4;stroke-linecap:round}

/* Переключатель: <label class="sw"><input type="checkbox"><span></span></label> */
.sw{position:relative;display:inline-block;flex:none;width:44px;height:26px}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sw span{position:absolute;inset:0;border-radius:13px;background:var(--surface-3);transition:background-color .15s;pointer-events:none}
.sw span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--knob);box-shadow:var(--knob-shadow);transition:transform .15s}
.sw input:checked+span{background:var(--brand)}
.sw input:checked+span::after{transform:translateX(18px)}
.sw input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}

/* Выпадашка .dd: кнопка .ddb, меню .ddm. Открытое меню позиционирует JS
   (positionDropdown пишет left/top/width/max-height), при ≤760 это нижний лист. */
.dd{position:relative}
.ddb{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px 0 14px;border:0;border-radius:var(--r-md);background:var(--surface-2);
  color:var(--ink-2);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.ddb:hover{background:var(--surface-3)}
.ddb b{color:var(--ink);font-weight:700}
.ddb .ddi{display:none}
.ddb .chev{width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.dd.open .ddb .chev,.ddb[aria-expanded=true] .chev{transform:rotate(180deg)}
.ddb.on,.dd.active>.ddb{background:var(--brand-soft);box-shadow:inset 0 0 0 1.5px var(--brand)}
.ddm{display:none;position:absolute;left:0;top:calc(100% + 8px);z-index:var(--z-dd);min-width:220px;max-width:min(340px,calc(100vw - 24px));max-height:min(62vh,460px);
  overflow-y:auto;overscroll-behavior:contain;padding:8px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-pop)}
html.light .ddm{box-shadow:var(--shadow-pop),inset 0 0 0 1px var(--line)}
.dd.open .ddm{display:block;position:fixed;animation:ddin .14s var(--ease)}
@keyframes ddin{from{opacity:0;transform:translateY(-4px)}}
.ddh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:2px 4px 6px 10px;font-size:14px;font-weight:700;color:var(--ink-2)}
.ddclose{display:none}
.ddm .ddo{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-md);background:none;
  color:var(--ink-2);font-size:15px;font-weight:600;text-align:left;cursor:pointer}
.ddm .ddo:hover{background:var(--surface-2);color:var(--ink)}
.ddm .ddo:is(.on,[aria-pressed=true]){color:var(--ink);font-weight:700;background:var(--surface-2)}
.ddm .ddo .tick{width:16px;height:16px;flex:none;color:var(--brand-text);opacity:0}
.ddm .ddo:is(.on,[aria-pressed=true]) .tick{opacity:1}
.ddm .ddo .fi{width:18px;height:18px;flex:none;object-fit:contain;fill:currentColor;color:var(--rc-txt,var(--ink-3))}
.ddm .ddo .rname{color:var(--rc-txt,inherit)}
.ddm .ddo u{margin-left:auto;padding-left:10px;text-decoration:none;font-size:13px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ddsep{height:1px;margin:6px 4px;background:var(--line)}
.ddbackdrop{display:none}
@media (max-width:760px){
  .dd.open>.ddbackdrop{display:block;position:fixed;inset:0;z-index:var(--z-ddov);width:100%;height:100%;padding:0;border:0;border-radius:0;background:var(--scrim)}
  .dd.open .ddm{max-width:none;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:8px 12px calc(12px + env(safe-area-inset-bottom));animation:sheetup .2s var(--ease)}
  .dd.open .ddclose{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r-md);background:none;color:var(--ink-2);font-size:22px;cursor:pointer}
}

/* ───────── 5.4 Плитка предмета и сетка ───────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px}
@media (max-width:900px){.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}}
.it{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge);overflow:hidden;container-type:inline-size;transition:transform .14s var(--ease),background-color .14s}
@media (hover:hover){.it:hover{transform:translateY(-3px);background:var(--surface-hover)}}
.it.hid{display:none}
.item-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none;border-radius:var(--r-lg)}
.item-link:focus-visible{outline-offset:-2px}
.stage{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--slot);
  background:color-mix(in srgb,var(--rc-glow,var(--r-common-glow)) var(--tint),var(--slot-deep))}
/* сияние цветом редкости за предметом и звёздочки того же цвета (у Chroma — радуга) */
.stage::before,.ipstage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 58% 56% at 50% 46%,color-mix(in srgb,var(--rc-glow,var(--r-common-glow)) var(--glow-a),transparent),transparent 72%);
  opacity:.85;transition:opacity .2s var(--ease)}
.stage::after,.ipstage::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--rc-glow,var(--r-common-glow));opacity:var(--spark-a);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 192'%3E%3Cpath d='m44 40 3 9 9 3-9 3-3 9-3-9-9-3 9-3Zm150-14 2.4 7 7 2.4-7 2.4-2.4 7-2.4-7-7-2.4 7-2.4Zm12 116 3.6 10 10 3.6-10 3.6-3.6 10-3.6-10-10-3.6 10-3.6ZM62 150l2 5.6 5.6 2-5.6 2-2 5.6-2-5.6-5.6-2 5.6-2Z'/%3E%3Ccircle cx='30' cy='118' r='1.8'/%3E%3Ccircle cx='214' cy='70' r='1.6'/%3E%3Ccircle cx='120' cy='176' r='1.4'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 192'%3E%3Cpath d='m44 40 3 9 9 3-9 3-3 9-3-9-9-3 9-3Zm150-14 2.4 7 7 2.4-7 2.4-2.4 7-2.4-7-7-2.4 7-2.4Zm12 116 3.6 10 10 3.6-10 3.6-3.6 10-3.6-10-10-3.6 10-3.6ZM62 150l2 5.6 5.6 2-5.6 2-2 5.6-2-5.6-5.6-2 5.6-2Z'/%3E%3Ccircle cx='30' cy='118' r='1.8'/%3E%3Ccircle cx='214' cy='70' r='1.6'/%3E%3Ccircle cx='120' cy='176' r='1.4'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.is-chroma .stage::after,.ip-chroma .ipstage::after{background:var(--chroma)}
@media (hover:hover){.it:hover .stage::before{opacity:1}}
.stage img{position:absolute;z-index:1;left:11%;top:9%;width:78%;height:80%;object-fit:contain;filter:var(--item-shadow);transition:transform .2s var(--ease)}
.stage .noimg{position:absolute;inset:0;margin:auto;width:40%;height:40%;stroke:var(--ink-3)}
@media (hover:hover){.it:hover .stage img{transform:scale(1.05) rotate(-2deg)}}
.it .info{display:flex;flex-direction:column;gap:2px;flex:1;padding:11px 14px 14px}
.it .nm{font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Узкая плитка (телефон, тесная сетка): имя в две строки, иначе «Chroma Gemsto…» теряет ту часть,
   что отличает предметы. Место под две строки держат все плитки ряда, цены стоят вровень. */
@container (max-width:200px){
  .it .nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;min-height:2.6em;white-space:normal;overflow-wrap:anywhere}
}
@supports not (container-type:inline-size){
  @media (max-width:640px){.it .nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:2.6em;white-space:normal;overflow-wrap:anywhere}}
}
.item-meta{font-size:13px;line-height:1.35;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-meta span+span::before{content:" · ";color:var(--ink-3);font-weight:400}
.item-meta .rar{color:var(--rc-txt);font-weight:700}
.it .price{display:flex;align-items:center;min-width:0;min-height:40px;margin-top:8px;padding-right:96px}
/* --pf ставит tileFit() (15-ui.js), когда длинная цена не помещается рядом с кнопкой */
.it .price .from{margin-right:5px;font-size:13px;font-weight:600;color:var(--ink-2)}
.it .price b{font-size:var(--pf,19px);font-weight:800;letter-spacing:-.01em;color:var(--price);white-space:nowrap}
.it .price em{display:none}
.it .card-actions{position:absolute;right:12px;bottom:14px}
.buyb{height:40px;padding:0 15px;font-size:14px;background:var(--brand-soft);color:var(--brand-text)}
.buyb:where(:not(:disabled,[aria-disabled=true],.added)):focus-visible{background:var(--brand);color:var(--on-brand)}
/* Наведение только там, где есть курсор: на телефоне нажатая плитка держит :hover, и кнопка оставалась бы фиолетовой */
@media (hover:hover){
  .buyb:where(:not(:disabled,[aria-disabled=true],.added)):hover,
  .it:hover .buyb:where(:not(:disabled,[aria-disabled=true],.added)){background:var(--brand);color:var(--on-brand)}
}
/* «В корзине» зелёная всегда, и под курсором (.b.soft:hover её не перекрашивает); наведение и фокус дают обводку */
.b.buyb.added,.b.buyb.added:hover{background:var(--ok-soft);color:var(--ok-text)}
.b.buyb.added:focus-visible{box-shadow:inset 0 0 0 1.5px currentColor}
@media (hover:hover){.b.buyb.added:hover{box-shadow:inset 0 0 0 1.5px currentColor}}
.it.oos .stage img{filter:grayscale(1);opacity:.55}
.it.oos .price b{color:var(--ink-3)}
@container (max-width:200px){
  .it .price{padding-right:0;margin-top:4px;min-height:32px}
  .it .card-actions{position:static;padding:0 12px 12px}
  .it .buyb{width:100%}
  .it .info{padding-bottom:8px}
}
/* Цена с кнопкой в ряд не влезает даже мельче (от миллиона ₽): кнопка встаёт под цену, как на узкой плитке */
.it.pr-col .price{padding-right:0;margin-top:4px;min-height:32px}
.it.pr-col .card-actions{position:static;padding:0 12px 12px}
.it.pr-col .buyb{width:100%}
.it.pr-col .info{padding-bottom:8px}
@supports not (container-type:inline-size){
  @media (max-width:640px){
    .it .price{padding-right:0;margin-top:4px;min-height:32px}
    .it .card-actions{position:static;padding:0 12px 12px}
    .it .buyb{width:100%}
  }
}
/* Слот-миниатюра для строк (корзина, подсказки, история, сдача): размер задаёт экран */
.slotic{position:relative;flex:none;width:44px;height:44px;border-radius:var(--r-md);overflow:hidden;
  background:var(--slot);background:color-mix(in srgb,var(--rc-glow,var(--r-common-glow)) var(--tint),var(--slot));box-shadow:inset 0 -2px 0 var(--rc-glow,var(--r-common-glow))}
.slotic img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain}
/* Аватар: буква, поверх — картинка (если загрузилась) */
.av{position:relative;display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;
  background:var(--avatar-bg);color:var(--avatar-ink);font-weight:800;font-size:16px;line-height:1}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--avatar-img-bg)}

/* ───────── 5.5 Бейджи ───────── */
.stamp,.chr,.tag-own,.st,.tg{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:var(--r-sm);font-size:12px;font-weight:700;line-height:1;white-space:nowrap}
.stamp{background:var(--stamp-bg);color:var(--stamp-ink)}
.chr{background:var(--chroma);color:var(--on-chroma);font-weight:800}
/* бейджи выше картинки (у картинки z-index 1): непрозрачный квадрат арта их не закрывает */
.stage .stamp{position:absolute;right:8px;top:8px;z-index:2}
.stage .chr{position:absolute;left:8px;top:8px;z-index:2}
.stage .st{position:absolute;left:8px;top:8px;z-index:2}
.tag-own{height:20px;padding:0 6px;margin-left:6px;background:var(--brand-soft);color:var(--brand-text);vertical-align:1px}
.st{font-weight:800}
.st.sale{background:var(--gold-soft);background:color-mix(in srgb,var(--gold) 22%,var(--surface));color:var(--gold-text)}
.st.out{background:var(--brand-soft);background:color-mix(in srgb,var(--brand) 24%,var(--surface));color:var(--brand-text)}
.tg{background:var(--surface-3);color:var(--ink-2)}
.tg.ok{background:var(--ok-soft);color:var(--ok-text)}
.tg.no,.tg.bad{background:var(--err-soft);color:var(--err-text)}
.tg.ac{background:var(--brand-soft);color:var(--brand-text)}
/* Счётчики: корзина и «Фильтры» */
.cnt,.fcount{display:inline-block;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--brand);color:var(--on-brand);
  font-size:12px;font-weight:800;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.fcount{min-width:22px;height:22px;border-radius:11px;line-height:22px;padding:0 6px}
.cnt.zero,.cnt:empty{display:none}

/* ───────── 5.6 Модалка #modal > .mbox ───────── */
#modal{position:fixed;left:0;right:0;top:var(--visible-top,0px);height:var(--visible-height,100dvh);z-index:var(--z-modal);display:none;place-items:center;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:var(--scrim);overscroll-behavior:contain}
#modal.open{display:grid;animation:fade .15s ease}
@keyframes fade{from{opacity:0}}
.mbox{display:flex;flex-direction:column;width:min(560px,100%);min-height:0;max-height:calc(var(--visible-height,100dvh) - 40px);
  background:var(--surface);color:var(--ink);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);overflow:hidden;animation:rise .2s var(--ease)}
html.light .mbox{box-shadow:var(--shadow-pop),inset 0 0 0 1px var(--line)}
.mbox.sm{width:min(440px,100%)}
.mbox.lg{width:min(720px,100%)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.mhead{flex:none;display:flex;align-items:flex-start;gap:8px;padding:16px 12px 4px 22px}
.mhead>h3,.mhead>div{flex:1;min-width:0;padding-top:8px}
.mhead h3{font-size:20px;line-height:1.25;font-weight:800;letter-spacing:-.015em}
.mhead .sub{margin-top:4px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.mhead>.mx,.mhead>.ib{margin-left:auto}
.mpad,.mbody{min-height:0;padding:18px 22px 22px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mbody>p:where(:not(.ferr)){color:var(--ink-2)}   /* :where — прежняя специфичность; ошибка .ferr остаётся красной */
.mbody>p+p,.mbody>p+.b,.mpad>p+.b{margin-top:12px}
.mfoot{flex:none;display:flex;gap:10px;flex-wrap:wrap;padding:0 22px 22px}
/* Низкий экран (телефон лёжа, клавиатура): окно прокручивается целиком, шапка липкая */
html.short-dialog .mbox{display:block;overflow-y:auto;scroll-padding-top:var(--dialog-head,80px);scroll-padding-bottom:16px}
html.short-dialog .mbox>.mhead{position:sticky;top:0;z-index:2;background:var(--surface);padding-bottom:10px}
html.short-dialog .mbox>.mpad,html.short-dialog .mbox>.mbody{overflow:visible}
@media (max-width:560px){
  #modal{place-items:end stretch;padding:max(8px,env(safe-area-inset-top)) 0 0}
  .mbox,.mbox.sm,.mbox.lg{width:100%;max-height:min(90dvh,calc(var(--visible-height,100dvh) - 8px));border-radius:var(--r-xl) var(--r-xl) 0 0;animation:sheetup .22s var(--ease)}
  .mbox>:last-child{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}
@keyframes sheetup{from{transform:translateY(24px);opacity:.4}}

/* ───────── 5.7 Корзина: только оболочка дровера ───────── */
.cartov{position:fixed;inset:0;z-index:var(--z-cartov);background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s ease}
.cartov.open{opacity:1;pointer-events:auto}
.cartp{position:fixed;right:0;top:var(--visible-top,0px);z-index:var(--z-cart);display:flex;flex-direction:column;width:min(400px,100vw);height:var(--visible-height,100dvh);
  padding-right:env(safe-area-inset-right);background:var(--surface);color:var(--ink);border-radius:var(--r-xl) 0 0 var(--r-xl);box-shadow:var(--shadow-pop);
  overscroll-behavior:contain;transform:translateX(105%);visibility:hidden;transition:transform .26s var(--ease),visibility 0s linear .26s}
.cartp.open{transform:none;visibility:visible;transition:transform .26s var(--ease)}
html.light .cartp{box-shadow:var(--shadow-pop),inset 1px 0 0 var(--line)}
.chead{flex:none;display:flex;align-items:center;gap:10px;min-height:64px;padding:max(12px,env(safe-area-inset-top)) 12px 12px 22px;border-bottom:1px solid var(--line)}
.chead h3{font-size:20px;line-height:1.2;font-weight:800;letter-spacing:-.015em}
.chead .n{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--surface-2);font-size:13px;font-weight:800;line-height:24px;text-align:center;font-variant-numeric:tabular-nums}
.chead>.mx,.chead>.ib{margin-left:auto}
.cartp .clist{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.cartp .cfoot{flex:none;padding-bottom:max(22px,calc(12px + env(safe-area-inset-bottom)))}
.cartp .cempty{flex:1}
html.short-dialog .cartp{display:block;overflow-y:auto}
html.short-dialog .cartp .chead{position:sticky;top:0;z-index:2;background:var(--surface)}
html.short-dialog .cartp .clist{overflow:visible}
@media (max-width:480px){.cartp{width:100vw;border-radius:0}}

/* ───────── 5.8 Тосты ───────── */
/* --toast-lift: экран с панелью, прижатой к низу (лоток вывода, панель покупки, кнопка оплаты), поднимает тосты на её высоту */
#toasts{position:fixed;right:24px;bottom:calc(24px + var(--toast-lift,0px) + env(safe-area-inset-bottom));z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px;
  width:min(440px,calc(100vw - 32px));pointer-events:none}
.tst{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 8px 8px 14px;border-radius:var(--r-lg);background:var(--surface-2);color:var(--ink);
  box-shadow:var(--shadow-pop);pointer-events:auto;overflow:hidden;cursor:default;animation:tin .18s var(--ease);
  transition:opacity .16s,transform .16s,height .2s var(--ease),min-height .2s,padding .2s,margin .2s}
html.light .tst{background:var(--surface);box-shadow:var(--shadow-pop),inset 0 0 0 1px var(--line)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
.tst.out{opacity:0;transform:translateY(8px);min-height:0;padding-top:0;padding-bottom:0;margin-top:-10px;pointer-events:none}
.tsi{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-3);color:var(--ink)}
.tsi svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tst.ok .tsi{background:var(--ok);color:var(--on-ok)}
.tst.err .tsi{background:var(--err);color:var(--on-err)}
.tsm{flex:1;min-width:0;padding:6px 0;font-size:15px;line-height:1.4;font-weight:500;overflow-wrap:anywhere}
.tsm b{font-weight:800}
.tsa{flex:none;height:40px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--brand-text);font-size:15px;font-weight:700;cursor:pointer}
.tsa:hover{background:var(--surface-3)}
html.light .tsa:hover{background:var(--surface-2)}
.tsx{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:8px;background:transparent;color:var(--ink-3);cursor:pointer}
.tsx:hover{background:var(--surface-3);color:var(--ink)}
.tsx svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* ПК: пока открыта корзина, тосты встают левее дровера и не закрывают «Оплатить».
   Пока открыто окно, колонка тостов сужается до места справа от него (окно 440/560/720 по центру),
   чтобы не лечь на его кнопки; уже 280 не бывает. */
@media (min-width:901px){
  html.cart-open #toasts{right:calc(min(400px,100vw) + 24px)}
  #modal.open~#toasts{width:clamp(280px,calc((100vw - 560px) / 2 - 48px),440px)}
  #modal.open:has(>.mbox.sm)~#toasts{width:clamp(280px,calc((100vw - 440px) / 2 - 48px),440px)}
  #modal.open:has(>.mbox.lg)~#toasts{width:clamp(280px,calc((100vw - 720px) / 2 - 48px),440px)}
}
/* Телефон: над нижней панелью (и над панелью экрана, если он поднял --toast-lift);
   при открытой модалке или листе — сверху. */
@media (max-width:900px){
  #toasts{left:16px;right:16px;width:auto;bottom:calc(var(--tabbar-h) + 12px + var(--toast-lift,0px) + env(safe-area-inset-bottom))}
  html:is(.cartlock,.ddlock,.catalog-filter-lock) #toasts{top:calc(12px + env(safe-area-inset-top));bottom:auto}
  /* Корзина: под её шапкой (64), чтобы не закрывать «Корзина» и крестик */
  html.cart-open #toasts{top:calc(72px + env(safe-area-inset-top));bottom:auto}
}
/* Корзина дровером 400px (481–900): тосты внутри дровера, не поверх страницы за ним */
@media (min-width:481px) and (max-width:900px){
  html.cart-open #toasts{left:auto;right:16px;width:min(368px,calc(100vw - 32px))}
}

/* ───────── 5.9 Вкладки ───────── */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
/* Вкладкам тесно: край, за которым есть ещё вкладки, гаснет. Классы ставит tabsFade() в 15-ui.js. */
.tabs.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.tabs.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.tabs.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.tabs>:is(button,a){position:relative;flex:none;display:inline-flex;align-items:center;height:48px;padding:0 14px;border:0;background:none;
  color:var(--ink-2);font-size:15px;font-weight:700;white-space:nowrap;text-decoration:none;cursor:pointer}
.tabs>:is(button,a):hover{color:var(--ink)}
.tabs>:is(button,a):focus-visible{outline-offset:-2px}
.tabs>:is(.on,[aria-selected=true],[aria-pressed=true],[aria-current=page]){color:var(--ink)}
.tabs>:is(.on,[aria-selected=true],[aria-pressed=true],[aria-current=page])::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}

/* ───────── 5.10 Строки ───────── */
.lrow{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 0;border-bottom:1px solid var(--line)}
.lrow:first-child,.dgh+.lrow{border-top:1px solid var(--line)}
.lrow .lic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-md);background:var(--surface-2);color:var(--ink-2);font-size:16px;font-weight:800}
.lrow .lic svg{width:20px;height:20px}
.lrow .lic.up{background:var(--ok-soft);color:var(--ok-text)}
.lrow .lic.dn{background:var(--err-soft);color:var(--err-text)}
.lrow .lic.ac{background:var(--brand-soft);color:var(--brand-text)}
.lrow .lic.wa{background:var(--surface-3);color:var(--ink)}
.lrow :is(.ltx,.inf){flex:1;min-width:0}
.lrow :is(.ltx b,.t){display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow :is(.ltx,.inf) small{display:block;font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow :is(.lrt,.amt){flex:none;text-align:right}
.lrow .lrt>b,.lrow .amt{display:block;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.lrow :is(.lrt .tm,.lrt small,time){display:block;font-size:13px;font-weight:500;color:var(--ink-3)}
.lrow .in,.lrow .amt.in{color:var(--ok-text)}
.lrow>.b{flex:none;min-width:124px}
.dgh{margin:22px 0 4px;font-size:14px;font-weight:700;color:var(--ink-2)}
.foot-note{margin-top:14px;font-size:13px;color:var(--ink-3)}

/* ───────── 5.11 Пусто, загрузка, ошибка ───────── */
.empty{grid-column:1/-1;max-width:720px;padding:28px 0 8px}
.empty>svg{display:none}
.empty h3{font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.empty h4{font-size:20px;line-height:1.25;font-weight:800}
.empty>p,.empty>div>p{margin-top:8px;max-width:56ch;color:var(--ink-2)}
.empty q{quotes:"«" "»";color:var(--ink);font-weight:700}
.empty>.row,.empty>.b{margin-top:20px}
/* Скелет плитки: та же геометрия, пульсация opacity .6↔1 за 1.2 с */
.sk{border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge)}
.sk i,.skl{display:block;border-radius:6px;background:var(--surface-2);animation:pulse 1.2s ease-in-out infinite alternate}
.sk :is(.sk-art,.a){aspect-ratio:5/4;border-radius:0}
.sk .sk-info{padding:14px 14px 16px}
.sk :is(.sk-name,.l1){height:12px;width:62%;margin:0 0 8px}
.sk :is(.sk-meta,.l2){height:12px;width:40%;margin:0 0 16px}
.sk :is(.sk-price,.l3){height:20px;width:34%;margin:0}
.sk .a+.l1{margin:14px 14px 8px}
.sk .l2,.sk .l3{margin-left:14px}
.sk .l3{margin-bottom:16px}
.sk .sk-action{display:none}
.skl{height:12px;width:60%}
.sk-row{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 0;border-bottom:1px solid var(--line)}
.sk-row>i:first-child{flex:none;width:44px;height:44px;border-radius:var(--r-md)}
.sk-row>div{flex:1;display:grid;gap:8px}
.sk-row i{display:block;border-radius:6px;background:var(--surface-2);animation:pulse 1.2s ease-in-out infinite alternate}
.sk-row>div>i{height:12px;width:50%}
.sk-row>div>i+i{width:30%}
@keyframes pulse{from{opacity:.6}to{opacity:1}}
.dim{opacity:.5;transition:opacity .15s}

/* Полоса загрузки под шапкой (#nprog): появляется, если ответ дольше 200 мс */
#nprog{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .16s}
#nprog i{display:block;width:35%;height:100%;background:var(--brand);transform:translateX(-100%)}
#nprog.on{opacity:1}
#nprog.on i{animation:sweep 1.2s ease-in-out infinite}
#nprog.done{opacity:0;transition:opacity .16s .08s linear}
#nprog.done i{width:100%;animation:none;transform:none}
@keyframes sweep{to{transform:translateX(290%)}}
@media (prefers-reduced-motion:reduce){#nprog.on i{width:100%;transform:none;opacity:.55}}

/* ───────── Общие мелочи для экранов ───────── */
.head{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;margin:28px 0 20px}
.head .h,.pageh{font-size:32px;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.head .h small,.pageh small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink-3)}
h2.s,.sech{font-size:20px;line-height:1.2;font-weight:800;letter-spacing:-.015em}
@media (max-width:900px){.head{margin:22px 0 16px}.head .h,.pageh{font-size:26px}}
.panel{padding:20px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge)}
.panel+.panel{margin-top:16px}
.note{font-size:14px;line-height:1.5;color:var(--ink-2)}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mut{color:var(--ink-3)}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.grow{flex:1}
/* Каркас: шапка, нижняя панель вкладок, контейнер, подвал, 404. SPEC §5.12–5.13. */
.shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.wrap,.bar-in,.ft-in,.content{width:100%;max-width:var(--maxw);margin:0 auto;
  padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}
.content{flex:1 0 auto;overflow-x:clip}   /* широкий блок экрана не раздвигает страницу на телефоне */
.content:focus{outline:none}

/* Ссылка «К содержимому» ждёт фокуса за верхом экрана: без тени, иначе её тень пятном под логотипом */
.skip-link:not(:focus){box-shadow:none}

/* ───────── Шапка ───────── */
.bar{position:sticky;top:0;z-index:var(--z-header);padding-top:env(safe-area-inset-top);background:var(--bg-2);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:8px;height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:8px;flex:none;min-height:44px;margin-right:24px;border-radius:var(--r-md);color:var(--ink);text-decoration:none}
.brand .logo{width:auto;height:36px}
.logo-l{display:none}
html.light .logo-l{display:block}
html.light .logo-d{display:none}
.wm{font-size:22px;font-weight:800;line-height:1;letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.wm i{font-style:normal;color:var(--brand)}   /* ровно цвет логотипа #7C2BE8 */
.nav{display:flex;align-self:stretch;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
/* Пунктам тесно (админ при 901–1080): край, за которым есть ещё ссылки, уходит в прозрачность.
   Классы ставит navFade() в 03-shell.js по scrollWidth/scrollLeft. */
.nav.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.nav.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.nav.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.nav a{position:relative;display:flex;align-items:center;flex:none;padding:0 14px;color:var(--ink-2);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a:focus-visible{outline-offset:-4px;border-radius:var(--r-md)}
.nav a[aria-current=page]{color:var(--ink)}
.nav a[aria-current=page]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
.bar .grow{flex:1;min-width:0}
.ic-sun{display:none}
html.light .ic-sun{display:inline}
html.light .ic-moon{display:none}
/* Кошелёк: сумма + золотой «+» одной плашкой */
.wallet{display:flex;align-items:stretch;flex:none;height:40px;margin-left:4px}
.money{display:flex;align-items:center;padding:0 12px 0 14px;border-radius:var(--r-md) 0 0 var(--r-md);background:var(--surface-2);
  color:var(--gold-text);font-size:15px;font-weight:800;white-space:nowrap;text-decoration:none}
.money:hover{background:var(--surface-3)}
.plus{display:grid;place-items:center;width:40px;border-radius:0 var(--r-md) var(--r-md) 0;background:var(--gold);color:var(--on-gold);text-decoration:none}
.plus:hover{background:var(--gold-hover)}
.plus svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.money:focus-visible,.plus:focus-visible{position:relative;z-index:1}
.authbtns{display:flex;flex:none;gap:8px}
.cartb{position:relative;background:var(--surface-2);color:var(--ink)}
.cartb:hover{background:var(--surface-3)}
.cartb .cnt{position:absolute;top:-5px;right:-5px;box-shadow:0 0 0 2px var(--bg-2)}
.who{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;margin-left:4px;padding:0;border:0;border-radius:50%;
  overflow:hidden;background:var(--avatar-bg);color:var(--avatar-ink);font-size:16px;font-weight:800;text-decoration:none;cursor:pointer}
.who .av{width:100%;height:100%;font-size:16px}
.who:focus-visible{outline-offset:2px}
/* Вход сохранён, но /api/auth/me ещё не ответил (html.auth-wait): на месте баланса и аватара каркас */
.hsk{display:none;flex:none;height:40px;border-radius:var(--r-md);background:var(--surface-2);animation:pulse 1.2s ease-in-out infinite alternate}
.hsk-money{width:128px;margin-left:4px}
.hsk-who{width:40px;margin-left:4px;border-radius:50%}
html.auth-wait .hsk{display:block}

/* ───────── Нижняя панель вкладок (телефон) ───────── */
.tabbar{display:none}
.tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.nav .ns{display:none}
/* Тесная шапка (901–1199): короткие подписи («Сдать» вместо «Сдать боту»), «Боты» у админа прячется —
   он открывается из «Админки», на его экране подсвечена «Админка». Пункты drawNav() в 03-shell.js. */
@media (max-width:1199px){
  .nav .nl,.nav a[data-tab=ops]{display:none}
  .nav .ns{display:inline}
  .nav:has(a[data-tab=ops][aria-current=page]) a[data-tab=adm]{color:var(--ink)}
  .nav:has(a[data-tab=ops][aria-current=page]) a[data-tab=adm]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
}
@media (max-width:1080px){
  .nav{gap:2px}
  .nav a{padding:0 8px;font-size:14px}
  .nav a[aria-current=page]::after,.nav:has(a[data-tab=ops][aria-current=page]) a[data-tab=adm]::after{left:8px;right:8px}
  .brand{margin-right:10px}
}
/* У админа шесть пунктов: уже 1000px «Профиль» прячется, профиль открывает аватар справа */
@media (max-width:999px){
  .nav:has(a[data-tab=adm]) a[data-tab=profile]{display:none}
}
@media (max-width:900px){
  .nav,.who,html.auth-wait .hsk-who{display:none}
  .brand{margin-right:8px}
  /* Liquid glass: плавающая капсула, под ней видно размытый и насыщенный контент страницы.
     Слои: фон-стекло (backdrop-filter) → блик ::before → ободок ::after → линза .tb-lens → пункты.
     Шире 480px не растёт (планшет, телефон лёжа): по центру, как в iOS. */
  .tabbar{position:fixed;left:max(12px,env(safe-area-inset-left),50% - 240px);right:max(12px,env(safe-area-inset-right),50% - 240px);
    bottom:calc(10px + env(safe-area-inset-bottom));z-index:var(--z-tabbar);height:64px;padding:4px;
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-radius:999px;isolation:isolate;   /* равные колонки: на это рассчитан tbGeo() */
    background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-fx);backdrop-filter:var(--glass-fx);
    box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 1px var(--glass-lo),var(--glass-shadow);
    touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
  .tabbar:empty{visibility:hidden}   /* до drawNav() пустой капсулы не видно */
  .tabbar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:radial-gradient(120% 90% at 50% -35%,var(--glass-sheen),transparent 62%),
      linear-gradient(180deg,var(--glass-sheen),transparent 46%)}
  .tabbar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;padding:1px;
    background:linear-gradient(135deg,var(--glass-rim),transparent 28%,transparent 62%,var(--glass-rim) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  /* Своего backdrop-filter у линзы нет: панель с backdrop-filter — граница того, что видят потомки,
     линза видела бы только заливку панели, а платили бы мы вторым проходом размытия на каждом кадре. */
  .tb-lens{position:absolute;top:4px;bottom:4px;left:0;z-index:1;width:var(--lens-w,0px);border-radius:999px;pointer-events:none;
    transform:translateX(var(--lens-x,0px)) scale(var(--lens-s,1));opacity:var(--lens-o,0);
    background-color:var(--lens-bg);box-shadow:inset 0 0 0 .5px var(--lens-rim),inset 0 1px 0 var(--lens-rim),0 2px 10px -4px rgba(0,0,0,.35);
    transition:transform .52s cubic-bezier(.3,1.45,.45,1),width .52s cubic-bezier(.3,1.45,.45,1),opacity .2s,background-color .2s}
  .tabbar.is-press .tb-lens{--lens-s:1.08;background-color:var(--lens-press)}
  .tabbar.is-drag .tb-lens{--lens-s:1.14;transition:transform .12s ease-out,width .2s,opacity .2s,background-color .2s}
  .tabbar.no-anim .tb-lens{transition:none}
  .tabbar a{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;height:56px;
    border-radius:999px;color:var(--ink-2);font-size:12px;font-weight:700;line-height:1.2;text-decoration:none;
    -webkit-user-drag:none;-webkit-touch-callout:none;   /* ни перетаскивания ссылки, ни её превью по долгому нажатию */
    transition:color .2s,transform .2s cubic-bezier(.3,1.45,.45,1)}
  .tabbar a:active{transform:scale(.94)}
  .tabbar a span{max-width:100%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar a[aria-current=page]{color:var(--brand-text)}
  .tabbar a[aria-current=page] svg{stroke:var(--brand-text)}
  /* кольцо — скруглённый прямоугольник, а не почти круг вокруг узкого пункта */
  .tabbar a:focus-visible{outline-offset:-2px;border-radius:18px}
  /* без размытия (старые браузеры), «Уменьшить прозрачность» и «Увеличить контраст» — плотное стекло */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .tabbar{background:var(--glass-solid)} }
  @media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
    .tabbar{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
    .tabbar::before{display:none}
  }
  @media (prefers-contrast:more){ .tabbar{box-shadow:inset 0 0 0 1px var(--line-2),var(--glass-shadow)} }
  /* Windows «Контрастные темы»: фон линзы гасится, активный пункт — обводкой */
  @media (forced-colors:active){
    .tabbar{outline:1px solid CanvasText}
    .tabbar a[aria-current=page]{outline:2px solid Highlight;outline-offset:-4px;border-radius:18px}
  }
  @media (prefers-reduced-motion:reduce){
    .tabbar .tb-lens,.tabbar.is-drag .tb-lens,.tabbar a{transition:none}
    .tabbar a:active{transform:none}
    .tabbar.is-press .tb-lens,.tabbar.is-drag .tb-lens{--lens-s:1}
  }
  /* Телефон лёжа: ниже капсула (--tabbar-h там 66px, 00-tokens.css) */
  @media (max-height:500px){
    .tabbar{height:52px}
    .tabbar a{height:44px}
  }
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  /* Фокус и якоря не уходят под капсулу и на iPhone с полоской «домой» (10-base.css считает без неё) */
  html{scroll-padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px)}
  /* Подвал продолжается под капсулой до низа страницы: без шва --bg-2/--bg за стеклом */
  .siteft{box-shadow:0 calc(var(--tabbar-h) + env(safe-area-inset-bottom)) 0 var(--bg-2)}
  /* Липкие панели над капсулой (покупка на экране предмета, «Оплатить» на /pay): фон уходит под капсулу
     до низа экрана, капсула лежит на нём. Иначе между плоской полосой и плавающей капсулой щель,
     в которой едет контент. Следствие формы нижней панели, поэтому здесь; html — чтобы перебить
     правила 40-item.css и 85-pay.css, которые идут в сборке позже. */
  html .ipbar:not([hidden]){bottom:0;padding-bottom:calc(8px + var(--tabbar-h) + env(safe-area-inset-bottom))}
  html .pay-cta.stuck::after{content:"";position:absolute;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));top:100%;
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));background:var(--bg);pointer-events:none}
}
/* Пять пунктов у всех: подписи 12px до 360 включительно («Инвентарь» 64px и «Blox Fruits» 62px
   в пункт 67px влезают). Уже 375 — без отступов у подписи и капсула ближе к краям. */
@media (max-width:374px){
  .tabbar{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}
  .tabbar a span{padding:0}
}
@media (max-width:339px){
  .tabbar:has(>a:nth-of-type(5)) a{font-size:10.5px}
}
@media (max-width:440px){
  .bar .wm{display:none}
  .money{padding:0 10px 0 12px}
  .hsk-money{width:112px}
}
/* кнопка темы теперь и в шапке телефона: на узких экранах гостю не хватало 15px */
@media (max-width:400px){
  .bar-in{gap:6px}
  .authbtns{gap:6px}
  .authbtns .b{padding:0 11px;font-size:14px}
  .bar .themebtn,.bar #cartb{width:36px;min-width:36px}
}
@media (max-width:374px){
  body.guest .bar .themebtn{display:none}   /* маленький телефон: гостю важнее «Войти» и «Регистрация» */
}
@media (max-width:359px){
  .authbtns .b{padding:0 9px}
}

/* ───────── Каркас экрана (#t-wait) ─────────
   Виден с первой отрисовки, пока грузится app.js, и когда закрытый экран ждёт проверки входа.
   Подвал под каркасом спрятан (html.booting до первого экрана, html.auth-hold пока экран ждёт входа):
   иначе на телефоне он выглядел бы всей страницей. Сообщение о сбое связи подвал уже не прячет. */
.wait-sk{display:grid;gap:16px;padding:28px 0 8px}
.wait-sk .skl{width:100%;border-radius:var(--r-lg)}
.wait-sk .wait-h{width:min(260px,60%);height:34px;margin-bottom:4px;border-radius:var(--r-md)}
.wait-sk .wait-a{height:clamp(150px,24vw,260px)}
.wait-sk .wait-b{height:88px}
@media (max-width:900px){.wait-sk{gap:12px;padding-top:22px}.wait-sk .wait-h{height:28px}}
html:is(.booting,.auth-hold) .siteft{visibility:hidden}

/* ───────── Подвал ───────── */
.siteft{margin-top:96px;background:var(--bg-2);border-top:1px solid var(--line)}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:40px 0 28px}
.ft-brand{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--ink);text-decoration:none;border-radius:var(--r-md)}
.ft-brand .logo{width:auto;height:32px}
.ft-tag{margin-top:14px;max-width:36ch;color:var(--ink-2);font-size:15px}
.ft-tag a{color:var(--brand-text);font-weight:700}
.ft-h{margin:0 0 6px;font-size:15px;font-weight:800;line-height:1.5;letter-spacing:0;color:var(--ink)}
.ft-col a{display:block;width:fit-content;padding:6px 0;border-radius:var(--r-sm);color:var(--ink-2);font-size:15px;text-decoration:none}
.ft-col a:hover{color:var(--ink);text-decoration:underline}
.ft-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;padding:16px 0 28px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:13px;line-height:1.5}
.ft-bottom a{color:inherit}
.ft-bottom .seg button{height:34px}
@media (max-width:900px){
  .siteft{margin-top:64px}
  .ft-top{grid-template-columns:1fr 1fr;gap:24px}
  .ft-top>:first-child{grid-column:1/-1}
  .ft-col a{padding:9px 0}
  .ft-bottom .seg button{height:40px}
}

/* ───────── 404 ───────── */
.nf{max-width:560px;padding:64px 0 24px}
.nf h1{font-size:32px;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.nf p{margin:12px 0 24px;color:var(--ink-2);font-size:15px}
@media (max-width:900px){.nf{padding-top:40px}.nf h1{font-size:26px}}
/* Маркет: SPEC §6.1, §5.3, §5.11. Разметка — <section id="t-market" class="mkt">.
   Плитку .it, сетку .grid, кнопки, поиск .find, выпадашку .dd, .seg, .sw, .achip, .empty, скелеты даёт основа. */

/* ───────── Баннеры (#hero) ─────────
   По умолчанию (≤900 и 3+ баннера) — лента карточек: арт сверху, сплошная панель снизу.
   ≥901 и не больше двух — сетка, арт на всю карточку, подпись на затемнении. */
.promo{display:flex;gap:12px;margin:10px calc(-1 * var(--gut)) 0;padding:4px var(--gut) 6px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none}
.promo::-webkit-scrollbar{display:none}
.promo .hs{position:relative;flex:0 0 min(calc(100% - 20px),440px);display:flex;flex-direction:column;min-width:0;border-radius:16px;overflow:hidden;
  background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge);scroll-snap-align:start}
.promo img.bg{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;object-position:center 32%;background:var(--slot)}
.promo .cap{flex:1;display:flex;align-items:center;gap:12px;padding:12px 14px 14px}
.promo .tx{flex:1;min-width:0}
.promo .ht{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:17px;line-height:1.2;font-weight:800;letter-spacing:-.015em}
.promo .hp{display:none}
/* «Кнопка» — подпись ссылки-баннера: нажимается вся карточка */
.promo .hs .b{flex:none;height:40px;padding:0 14px;font-size:14px;pointer-events:none}
.promo a.hs:hover .b.pri{background:var(--brand-hover)}
.promo a.hs:hover .b.warnb{background:var(--warn-hover)}
.promo a.hs:focus-visible{outline-offset:2px}
/* Фейк-боты: янтарная панель, кнопка тёмная (8.9:1 в обе стороны) */
.promo .hs.warn{background:var(--warn);color:var(--on-warn);box-shadow:none}
.promo .hs.warn .b.warnb,.promo a.hs.warn:hover .b.warnb{background:var(--on-warn);color:var(--on-brand)}
/* Пока баннеры грузятся — место под них, чтобы маркет не прыгал вниз */
.promo .hs-sk{aspect-ratio:3/2;background:var(--surface-2);box-shadow:none;animation:pulse 1.2s ease-in-out infinite alternate}

@media (min-width:901px){
  .promo{margin:20px 0 0;padding:0}
  .promo.many{padding:4px 0 6px;margin-top:16px}
  .promo:not(.many){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;overflow:visible;scroll-snap-type:none}
  .promo.one{grid-template-columns:minmax(0,1fr)}
  .promo:not(.many) .hs{display:block;height:248px;border-radius:var(--r-xl);background:var(--slot);color:var(--on-brand);box-shadow:none}
  .promo:not(.many) .hs-sk{background:var(--surface-2);aspect-ratio:auto}
  .promo:not(.many) img.bg{position:absolute;inset:0;height:100%;aspect-ratio:auto;transition:transform .4s var(--ease)}
  .promo:not(.many) a.hs:hover img.bg{transform:scale(1.02)}
  /* Подпись на всю карточку с затемнением снизу (SPEC §6.1.1): одинаковое в обеих темах, текст на нём белый.
     .cap идёт в разметке после картинки, поэтому рисуется поверх без z-index */
  .promo:not(.many) .cap{position:absolute;inset:0;align-items:flex-end;gap:16px;padding:20px 22px;
    background:linear-gradient(180deg,rgba(14,8,24,0) 30%,rgba(14,8,24,.62) 56%,rgba(14,8,24,.92) 100%)}
  .promo:not(.many) .ht{font-size:25px;line-height:1.12;letter-spacing:-.02em}
  .promo:not(.many) .hp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;max-width:46ch;margin-top:6px;
    font-size:15px;line-height:1.35;color:var(--on-brand);opacity:.9}
  .promo:not(.many) .hs .b{height:44px;padding:0 18px;font-size:15px}
  .promo:not(.many) .hs.warn .b.warnb{background:var(--warn);color:var(--on-warn)}
  .promo:not(.many) a.hs.warn:hover .b.warnb{background:var(--warn-hover)}
}
@media (min-width:901px) and (max-width:1240px){
  .promo:not(.many) .ht{font-size:21px}
  .promo:not(.many) .hp{display:none}
}
@media (max-width:440px){
  .promo .cap{flex-direction:column;align-items:stretch;gap:10px}
  .promo .hs .b{align-self:flex-start}
}

/* ───────── Заголовок, категории, поиск ───────── */
.mkhead{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin:28px 0 14px}
.mkhead h1{display:flex;align-items:baseline;gap:10px;font-size:32px;line-height:1.05;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.mkhead h1 small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink-3)}
/* Счётчик у «Маркет» то есть, то нет: место под него держим, иначе категории прыгают под курсором */
@media (min-width:901px){ .mkhead h1{min-width:7.7em} }
.mkcats{display:flex;gap:4px}
.mkcats button{flex:none;height:40px;padding:0 16px;border-radius:var(--r-pill);color:var(--ink-2);font-size:15px;font-weight:700;white-space:nowrap;
  transition:background-color .12s,color .12s}
.mkcats button:hover{background:var(--surface-2);color:var(--ink)}
.mkcats button[aria-pressed=true]{background:var(--cat-on-bg);color:var(--cat-on-ink)}
.mfind{flex:0 1 420px;margin-left:auto}
.mfind input:placeholder-shown{padding-right:14px}   /* крестика нет — подсказке нужно всё место */

/* ───────── Строка фильтров ───────── */
.fbar{display:flex;align-items:center;gap:8px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.vsep{flex:none;width:1px;height:24px;margin:0 2px;background:var(--line-2)}
.rchips{display:flex;flex-wrap:wrap;gap:5px}
/* В строке фильтров чипы не переносятся: если места мало, они листаются, а сортировка остаётся справа */
.fbar .rchips{flex:0 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px;margin:-4px}   /* поля — место под кольцо фокуса */
.fbar .rchips::-webkit-scrollbar{display:none}
/* Не влезли: правый край тает, чтобы обрезанный чип читался как лента, а не как поломка (класс ставит mktChipsFit) */
.fbar .rchips.ovf{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.fbar .ddb b{max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Ширина под самую длинную подпись («Цена 150–500 ₽», «Редкость Legendary»): выбор не сдвигает чипы справа */
.fbar #dd-price .ddb{min-width:162px}
.fbar #dd-rare .ddb{min-width:196px}
.fbar .ddb .chev{flex:none;margin-left:auto}
/* Чипы редкости и Chroma (SPEC §5.3): одиночный выбор, повторное нажатие снимает */
.mkt .ddo{display:inline-flex;align-items:center;gap:6px;width:auto;height:40px;min-height:0;padding:0 10px;border-radius:var(--r-pill);background:var(--surface-2);
  color:var(--ink-2);font-size:14px;font-weight:600;white-space:nowrap;transition:background-color .12s,color .12s}
.mkt .ddo i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--rc-glow)}
.mkt .ddo:hover{background:var(--surface-3);color:var(--ink)}
.mkt .ddo[aria-pressed=true]{color:var(--rc-txt);font-weight:700;background:var(--surface-2);
  background:color-mix(in srgb,var(--rc-glow) 16%,var(--surface));box-shadow:inset 0 0 0 1.5px var(--rc-glow)}
.mkt .ddo.chroma i{background:var(--chroma)}
.mkt .ddo.chroma[aria-pressed=true]{position:relative;color:var(--ink);background:var(--surface);box-shadow:none}
.mkt .ddo.chroma[aria-pressed=true]::before{content:"";position:absolute;inset:0;padding:1.5px;border-radius:inherit;background:var(--chroma);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mkt .ddo.stockb{--rc-txt:var(--brand-text);--rc-glow:var(--brand)}
.mkt .freset{min-height:40px;padding:0 8px;border-radius:var(--r-md);font-size:14px;text-decoration:none}
.mkt .freset:hover{background:var(--surface-2)}
.msort{flex:none;margin-left:auto}
.msort button{padding:0 11px}
.selw{display:block;min-width:0}
.selw select{width:100%}
/* ≥1440 — чипы и сегмент; 1241–1439 — «Редкость ▾» и select (правило ниже чипов: перебивает их display).
   SPEC ставит границу на 1341, но полной строке с «Сбросить» нужно 1368px: при 1341–1439 сортировка
   переезжала бы на вторую строку при каждом включении фильтра. */
.fbar .f-fold{display:none}

/* Меню «Цена»: 6 пресетов 3×2 и поля от/до; ширину и место задаёт positionDropdown() */
.mkt .pmenu{padding:14px}
.psteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px}
.psteps button{height:40px;padding:0 6px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);font-size:14px;font-weight:700;white-space:nowrap}
.psteps button:hover{background:var(--surface-3);color:var(--ink)}
.psteps button[aria-pressed=true]{background:var(--cat-on-bg);color:var(--cat-on-ink)}
.pgroup{display:flex;align-items:center;gap:8px}
.pw{position:relative;flex:1;min-width:0}
.pw>span[aria-hidden]{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:700;color:var(--ink-3);pointer-events:none}
.pinp{display:block;width:100%;height:40px;padding:0 30px 0 12px;border:1.5px solid var(--field-line);border-radius:var(--r-md);background:var(--surface-2);
  color:var(--ink);font-size:14px;font-weight:600;-webkit-appearance:none;appearance:none;transition:border-color .12s,box-shadow .12s}
.pinp::placeholder{color:var(--ink-3);font-weight:500}
.pinp:hover{border-color:var(--ink-3)}
.pinp:focus{border-color:var(--brand-hover);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.pdash{color:var(--ink-3)}
/* «Редкость ▾» (1241–1439): те же чипы, переносятся внутри меню */
.mkt .rlist{display:none;flex-wrap:wrap;gap:6px;padding:12px}
.mkt .dd.open .rlist{display:flex}

@media (max-width:1439px){
  .fbar .f-wide{display:none}
  .fbar .dd.f-fold,.fbar .selw.f-fold{display:block}
  .fbar .ddo.f-fold{display:inline-flex}
  .fbar .selw{margin-left:auto}
}
@media (max-width:1240px){
  .mfind{order:3;flex:1 1 100%;margin-left:0}
}

/* ───────── Телефон: «Фильтры» + сортировка ───────── */
.mobile-f{display:none}
@media (max-width:900px){
  .mkhead{margin:22px 0 12px;gap:12px}
  .mkhead h1{font-size:26px}
  .mfind{order:1}
  .mkcats{order:2;flex:0 0 calc(100% + 2 * var(--gut));margin:-3px calc(-1 * var(--gut));padding:3px var(--gut);overflow-x:auto;scrollbar-width:none}
  .mkcats::-webkit-scrollbar{display:none}
  /* Не влезли: правый край тает, видно, что лента листается дальше (класс ставит mktChipsFit) */
  .mkcats.ovf{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .fbar{display:none}
  .mobile-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:16px}
  .mobile-f .b{width:100%;height:44px}
  .mobile-f select{height:44px;padding:0 32px 0 12px;font-size:16px;font-weight:600;background-position:right 8px center}
}
@media (max-width:900px),(pointer:coarse){
  .pinp{font-size:16px}
}
/* 360 и уже: чипы поуже, чтобы из-за края выглядывало начало «Прочее» */
@media (max-width:380px){
  .mkcats button{padding:0 12px}
}

/* ───────── Сетка и «Показать ещё» ───────── */
/* «В корзине» остаётся зелёным и при наведении на плитку; без галочки и с узкими полями
   кнопка укладывается в 96px, которые плитка держит справа от цены */
.mkt .it .buyb.added,.mkt .it:hover .buyb.added{padding:0 12px;background:var(--ok-soft);color:var(--ok-text)}
.mkt .it .buyb.added:hover,.mkt .it .buyb.added:focus-visible{box-shadow:inset 0 0 0 1.5px currentColor}
.mkt .it.oos .price{gap:8px;flex-wrap:wrap}
.mkt .it.oos .price small{font-size:13px;color:var(--ink-2)}
/* Самый дешёвый лот твой: под ценой «твой лот», высота строки цены та же (40) */
.mkt .it.mine .price{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px}
.mkt .it.mine .price b{line-height:1.1}
.mkt .it .price .tag-own{height:18px;margin:0;padding:0 6px}
.mkmore{display:flex;justify-content:center;margin:28px 0 8px}

/* ───────── Пусто: активные фильтры и подсказки ───────── */
.mkchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.mksugg{margin-top:22px}
.mksugg h4{margin-bottom:6px;font-size:15px;font-weight:700;color:var(--ink-2)}
.mkt .srows{display:grid;gap:2px;max-width:480px;margin:14px 0 0 -8px}
.mksugg .srows{margin-top:0}
.mkt .srow{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 10px 8px 8px;border-radius:var(--r-12);color:inherit;text-decoration:none}
.mkt .srow:hover{background:var(--surface-2)}
.mkt .srow:focus-visible{outline-offset:0}
.mkt .srow .slotic{width:48px;height:48px}
.mkt .srow .inf{flex:1;min-width:0}
.mkt .srow .nm{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt .srow small{display:block;font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkt .srow .rar{color:var(--rc-txt);font-weight:700}
.mkt .srow .pr{flex:none;font-weight:800;color:var(--price);white-space:nowrap}

/* ───────── Нижний лист фильтров ─────────
   <dialog> открыт через .show(): он не в top layer, поэтому тосты (--z-toast) видны поверх листа. */
.fsheet{position:fixed;inset:0;z-index:var(--z-sheet);width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:var(--ink);overflow:hidden}
.fsheet[open]{display:flex;align-items:flex-end;justify-content:center}
.fsheet-scrim{position:absolute;inset:0;background:var(--scrim);animation:fade .15s ease}
.fsheet-box{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:min(88dvh,calc(var(--visible-height,100dvh) - 24px));
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-pop);animation:sheetup .22s var(--ease)}
html.light .fsheet-box{box-shadow:var(--shadow-pop),inset 0 0 0 1px var(--line)}
.fsheet-head{flex:none;display:flex;align-items:center;gap:8px;min-height:60px;padding:10px 10px 10px 20px;border-bottom:1px solid var(--line)}
.fsheet-head h2{flex:1;font-size:20px;line-height:1.2;font-weight:800;letter-spacing:-.015em}
.fsheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 20px}
.fsheet-body h3{margin:20px 0 10px;font-size:15px;font-weight:800}
.fsheet-body h3:first-child{margin-top:0}
.fsheet .pinp{height:44px}
.fsheet .rchips{gap:8px}
.swrow{display:flex;align-items:center;gap:12px;min-height:52px;margin-top:10px;font-weight:700;cursor:pointer}
.swrow .sw{margin-left:auto}
.swrow .cdot{flex:none;width:14px;height:14px;border-radius:50%;background:var(--chroma)}
.fsheet-foot{flex:none;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
/* body{overflow-x:hidden} при html{overflow:hidden} сам становится прокруткой, и липкая шапка уезжает
   под затемнением. Пока лист открыт, горизонтальную прокрутку и так держит html. */
html.catalog-filter-lock body{overflow:visible}
/* Blox Fruits: перм фрукты, геймпассы, страница товара, «Мои покупки», заказ, склад. Разметку рисует 16-bloxfruits.js.
   Плитка, слот, крошки, страница товара и окно покупки — общие классы (20-components, 40-item):
   .it/.stage, .crumbs, .ipgrid/.ipstage/.ipbest/.ipbtns, .ipconf-item/.ipconf-sum, .ipdesc, .iprel.
   Здесь только то, чего у них нет. */

/* Редкость фрукта: цвета Blox Fruits (Common серый, Uncommon синий, Rare фиолетовый, Legendary розовый, Mythical красный).
   Свои значения, у MM2 другая шкала. --rc-glow — слот, сияние, звёздочки, точка чипа (яркий, одинаков в обеих темах,
   в слоте его приглушает --tint основы). --rc-txt — подпись: тёмная тема ≥6.4 на surface, ≥5.8 на surface-2, ≥5.4 на
   выбранном чипе; светлая ≥5.7 на белом, ≥4.9 на surface-2 и выбранном чипе.
   Геймпассы без редкости — янтарный: цвет, которого нет ни у одной редкости (фирменный фиолетовый почти равен Rare,
   266° против 267°), и под золотой ободок их значков. Подписи редкости у геймпассов нет, --rc-txt — на всякий случай. */
.bf-r-common{--rc-glow:#A6A6A6;--rc-txt:#B0B0B0}
.bf-r-uncommon{--rc-glow:#3D8BFF;--rc-txt:#6FA9FF}
.bf-r-rare{--rc-glow:#9D4DFF;--rc-txt:#B98CFF}
.bf-r-legendary{--rc-glow:#F23DDB;--rc-txt:#FF6FEA}
.bf-r-mythical{--rc-glow:#FF3B3B;--rc-txt:#FF6B6B}
html.light .bf-r-common{--rc-txt:#666666}
html.light .bf-r-uncommon{--rc-txt:#1D5FC4}
html.light .bf-r-rare{--rc-txt:#6B2BCF}
html.light .bf-r-legendary{--rc-txt:#A3168C}
html.light .bf-r-mythical{--rc-txt:#BF1F27}
.bf-r-pass{--rc-glow:#E0A526;--rc-txt:var(--brand-text)}

/* ───────── Шапка раздела ───────── */
.bf .bf-head{align-items:center;margin-bottom:12px}
.bf-lead{max-width:62ch;margin:0 0 16px;color:var(--ink-2)}
.bf-tabs{margin-bottom:20px}
.bf-note{display:flex;align-items:flex-start;gap:10px;max-width:760px;margin:0 0 16px;padding:12px 16px;border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge);font-size:15px;color:var(--ink-2)}
.bf-note svg{flex:none;width:20px;height:20px;margin-top:1px;stroke:var(--ink-3)}
.bf-h1s{font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em}

/* ───────── Витрины ───────── */
.bf-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.bf-find{flex:0 1 360px}
.bf-find input:placeholder-shown{padding-right:14px}
.bf-sortw{margin-left:auto}
/* Чипы редкости, как в маркете (SPEC §5.3): точка цвета редкости, выбранный — подпись цветом, заливка и кольцо */
.bf-rchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.bf-rchips button{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 13px;border:0;border-radius:var(--r-pill);background:var(--surface-2);
  color:var(--ink-2);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .12s,color .12s}
.bf-rchips i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--rc-glow)}
.bf-rchips button:hover{background:var(--surface-3);color:var(--ink)}
.bf-rchips button[aria-pressed=true]{color:var(--rc-txt);font-weight:700;background:var(--surface-2);
  background:color-mix(in srgb,var(--rc-glow) 16%,var(--surface));box-shadow:inset 0 0 0 1.5px var(--rc-glow)}
.bf-rchips .bf-rall{--rc-txt:var(--ink);--rc-glow:var(--ink-3)}
.bf .it.oos .price small{font-size:13px;color:var(--ink-2)}
/* Геймпассы: круглый значок чуть меньше слота, иначе он упирается в края (плитки, страница, окна не трогаем).
   На странице — не крупнее 160px: файлы значков 150×150, растянутый вдвое и больше, он мылится */
.bf .it.bf-r-pass .stage img{left:18%;top:13%;width:64%;height:74%}
.bf-fruit.bf-r-pass .ipstage img{inset:0;margin:auto;width:min(56%,160px);height:min(66%,160px)}
/* подпись вида под именем в окнах и на заказе не рвётся внутри («Перманентный / фрукт») */
.bf-nw{white-space:nowrap}
/* скелет слота без сияния и звёздочек */
.bf .ipsk-stage::before,.bf .ipsk-stage::after{display:none}

/* Вопросы внизу каталога и страницы фрукта */
.bf-faq{max-width:760px;margin-top:64px}
.bf-faq .sech{margin-bottom:6px}
.bf-faq .ipdesc{margin-top:0}
.bf-faq .ipdesc+.ipdesc{border-top:0}
.bf-faq .ipdesc{border-bottom:1px solid var(--line)}
.bf-faq-help{margin-top:14px;font-size:15px;color:var(--ink-2)}
.bf-faq-help a{color:var(--brand-text);font-weight:700}

/* ───────── Страница фрукта ───────── */
.bf-fruit .bf-note{margin:18px 0 0}
.bf-fruit .ipbtns .b.lg:not(.pri){flex:none}
.bf-fruit .ipbtns .b.pri:only-child{flex:0 1 auto;min-width:min(320px,100%)}
/* строка «В игре стоит 5 000 R$» — вторичная: сильнее .ipbest .k из 40-item (он позже в сборке). ink-3 на фоне: 7.0 тёмная, 5.9 светлая */
.bf-fruit .ipbest .bf-robux{margin-top:10px;font-size:14px;color:var(--ink-3)}
.bf .iprel{margin-top:64px}

/* ───────── Мои покупки ───────── */
.bf-invbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-bottom:20px}
.bf-invbar .seg button[aria-pressed=true] b{color:var(--ink-2)}
.bf-invsum{font-size:14px;color:var(--ink-2)}
.bf-invr{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-left:auto}
.bf-invbar .bf-headb{gap:8px;margin-left:auto}
.bf-invsum b{color:var(--ink)}
/* статус поверх картинки (выше неё, у картинки z-index 1): плотная подложка, как у бейджей основы (.st) */
.bf-inv .stage .tg{position:absolute;left:8px;top:8px;z-index:2;background:var(--surface-3);background:color-mix(in srgb,var(--ink-3) 22%,var(--surface))}
.bf-inv .stage .tg.ok{background:color-mix(in srgb,var(--ok) 22%,var(--surface))}
.bf-inv .stage .tg.ac{background:color-mix(in srgb,var(--brand) 24%,var(--surface))}
.bf-inv .stage .tg.no{background:color-mix(in srgb,var(--err) 22%,var(--surface))}
.bf-paid{margin-top:8px;font-size:17px;font-weight:800;color:var(--price);white-space:nowrap}
.bf-acts{display:flex;gap:8px;padding:0 12px 12px}
.bf-acts .b{flex:1}

/* ───────── Заказ ───────── */
.bf-order{max-width:760px}
.bf-ohead{display:flex;align-items:center;gap:16px;min-width:0}
.bf-oslot,.bf-sk-slot{width:72px;height:72px;border-radius:var(--r-lg)}
.bf-ot{flex:1;min-width:0}
.bf-ot .sk-h{width:60%;height:32px;border-radius:var(--r-md)}
.bf-ot .sk-m{width:36%;height:14px;margin-top:10px}
.bf-oname{font-size:32px;line-height:1.1;font-weight:800;letter-spacing:-.03em;overflow-wrap:anywhere}
.bf-osub{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:6px;font-size:14px;color:var(--ink-2)}
.bf-osub .rar,.bf-lot .inf small .rar{color:var(--rc-txt);font-weight:700}
.bf-oamt{flex:none;margin-left:auto;font-size:24px;font-weight:800;color:var(--price);white-space:nowrap}
.bf-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:24px 0 0;padding:0;list-style:none}
.bf-steps li{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:13px;line-height:1.3;color:var(--ink-3);overflow-wrap:anywhere}
.bf-steps li::before{content:"";height:4px;border-radius:2px;background:var(--surface-3)}
.bf-steps li:is(.done,.now)::before{background:var(--brand)}
.bf-steps li.done{color:var(--ink-2)}
.bf-steps li.now{color:var(--ink);font-weight:700}
.bf-steps .bf-ss{display:none}
.bf-onote{max-width:62ch;margin-top:20px;font-size:15px;color:var(--ink-2)}
.bf-orefresh{display:flex;width:fit-content;margin-top:4px}   /* своя строка под пояснением, зона нажатия 40px от .linkb */
.bf-oacts{margin-top:16px}
.bf-ometa{margin-top:28px;border-top:1px solid var(--line)}
.bf-ometa>div{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--line)}
.bf-ometa dt{flex:none;font-size:14px;color:var(--ink-2)}
.bf-ometa dd{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:4px 12px;min-width:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
.bf-ometa dd small{font-size:13px;font-weight:500;color:var(--ink-3)}
.bf-oid{font-size:14px;font-variant-numeric:tabular-nums;word-break:break-all}
.bf-mgr{margin-top:28px}
.bf-mgr .note{margin:4px 0 14px}
.bf-hist{margin-top:20px}
.bf-events{margin:0 0 8px;padding:0;list-style:none}
.bf-events li{padding:10px 0;border-top:1px solid var(--line)}
.bf-ev{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
.bf-ev b{font-size:15px}
.bf-ev time{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bf-events p{max-width:62ch;margin:4px 0 0;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}

/* ───────── Склад ───────── */
.bf-admsum{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;justify-content:space-between}
.bf-admsum>.skl{width:50%;height:20px}
.bf-admst{display:flex;align-items:flex-start;gap:12px;min-width:0}
.bf-admst b{font-size:16px;font-weight:800}
.bf-admst p{display:flex;flex-wrap:wrap;gap:2px 0;margin-top:4px;font-size:14px;color:var(--ink-2)}
.bf-admst p span+span::before{content:"·";margin:0 8px;color:var(--ink-3)}
.bf-admst p b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.bf-dot{flex:none;width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--ink-3)}
.bf-dot.on{background:var(--ok)}
.bf-admnote{max-width:80ch;margin-top:14px}
.bf-admnote b{color:var(--ink)}
.bf-admsec{margin-top:36px}
.bf-sech{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-bottom:10px}
.bf-sech .sech small{font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink-3)}
.bf-sech .seg{margin-left:auto}
.bf-none{padding:14px 0;border-top:1px solid var(--line);color:var(--ink-2)}
/* полоски снизу у слота в разделе нет нигде, как у плиток: строки, заказ, окна */
.bf-list .slotic,.bf-orow .slotic,.bf-oslot,.bf-dlg .slotic{box-shadow:none}
.bf-lot .inf .t{color:var(--ink);text-decoration:none}
.bf-lot .inf .t:hover{text-decoration:underline}
.bf-lotacts{display:flex;gap:8px;flex:none}
.bf-orow{color:inherit;text-decoration:none}
.bf-orow:hover .t{text-decoration:underline}
.bf-orow:focus-visible{outline-offset:-2px;border-radius:var(--r-sm)}
.bf-oamt-s{flex:none;min-width:88px;text-align:right;font-size:15px;font-weight:800;color:var(--price);font-variant-numeric:tabular-nums;white-space:nowrap}
.bf-pages{justify-content:center;gap:16px;margin-top:24px;font-size:14px;color:var(--ink-2)}

/* ───────── Окна ───────── */
.bf-form>.ipconf-item{margin-bottom:18px}
.bf-form>.b{margin-top:18px}
.bf-form>.note{margin-top:12px;font-size:13px}
.bf-form>p:not(.ferr,.note,.fhint){color:var(--ink-2)}
.bf-form .fhint{margin-top:10px}
.bf-dlg-btns{margin-top:18px}
.bf-notef{margin-top:16px}
.bf-lotf{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;margin-top:14px}
.bf-lotf .fld+.fld{margin-top:0}
/* Галочка подтверждения: вся строка — зона нажатия */
.bf-check{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:12px 14px;border-radius:var(--r-12);background:var(--surface-2);
  font-size:14px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.bf-check b{color:var(--ink);overflow-wrap:anywhere}
.bf-check input{flex:none;display:grid;place-items:center;width:22px;height:22px;margin:0;border:1.5px solid var(--field-line);border-radius:6px;
  background:var(--surface);-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .12s,border-color .12s}
.bf-check input:checked{background:var(--brand);border-color:var(--brand)}
.bf-check input:checked::after{content:"";width:6px;height:11px;border:solid var(--on-brand);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.bf-check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bf-check input:disabled{opacity:.6;cursor:default}
.bf-check:has(input:disabled){cursor:default}

/* Окно вывода: получателя ищут, как аккаунт в MM2 (.pick-field, .pick-list, .urow — 60-deposit.css).
   Форма — колонка окна: список прокручивается, подтверждение и кнопка внизу остаются на месте */
.bf-wdf{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}
.bf-wd .pick-field.manual .mag{display:none}
.bf-wd .pick-list{margin-top:10px}
.bf-recent{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px;font-size:14px;color:var(--ink-2)}
.bf-rchip{height:40px;max-width:100%;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);
  font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.bf-rchip:hover{background:var(--surface-3)}
.bf-rchip[aria-pressed=true]{background:var(--brand-soft);box-shadow:inset 0 0 0 1.5px var(--brand)}
.bf-rmode{margin-top:6px}
.bf-wd .bf-form>.note{margin-top:4px}
.bf-wdfoot{flex-direction:column;align-items:stretch;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.bf-wdfoot .bf-check{margin-top:0}
.bf-wdfoot .ferr{margin:0}
html.short-dialog .bf-wdf>.mbody{overflow:visible}

/* Экран пополнения: ссылка назад к товару */
.bf-payback{margin:-8px 0 12px}

/* Инвентарь MM2: ссылка на «Мои покупки» Blox Fruits в строке заголовка */
.head.inv-head .inv-bf{flex:none;min-height:40px}

@media (max-width:900px){
  .bf .bf-head{margin-bottom:10px}
  /* поиск и порядок в одну строку, чипы редкости — лентой во всю ширину экрана */
  .bf-tools{flex-wrap:nowrap;gap:8px}
  .bf-find{flex:1 1 auto;min-width:0}
  .bf-sortw{flex:0 1 164px;min-width:0;margin-left:0}
  .bf-sortw .select{width:100%;height:46px;padding:0 28px 0 12px;background-position:right 6px center;text-overflow:ellipsis}
  .bf-rchips{flex-wrap:nowrap;margin:-4px calc(-1 * var(--gut)) 12px;padding:4px var(--gut);overflow-x:auto;scrollbar-width:none}   /* поля — место под кольцо фокуса */
  .bf-rchips::-webkit-scrollbar{display:none}
  .bf-rchips button{padding:0 12px}
  .bf-faq{margin-top:48px}
  .bf .iprel{margin-top:48px}
  .bf-oname{font-size:26px}
  /* «Купить за …» одна в ряду — во всю ширину, как ряд кнопок на странице предмета */
  .bf-fruit .ipbtns .b.pri:only-child,.bf-fruit .ipbtns .b:only-child{flex:1 1 100%}
}
/* порядок: 16px на телефоне, иначе iPhone приближает страницу при нажатии (как .inv-head .select.sm) */
@media (max-width:900px),(pointer:coarse){.bf-sortw .select.sm{font-size:16px}}
@media (max-width:700px){
  .bf-lot{flex-wrap:wrap}
  .bf-lot .inf{flex-basis:calc(100% - 58px - 14px - 110px)}
  .bf-lotacts{width:100%;padding-left:58px}
  .bf-lotacts .b{flex:1}
  .bf-orow{flex-wrap:wrap}
  .bf-orow .inf{flex-basis:calc(100% - 58px)}
  .bf-orow .tg{margin-left:58px}
  .bf-orow .bf-oamt-s{margin-left:auto}
}
@media (max-width:560px){
  .bf-ohead{flex-wrap:wrap;gap:12px 14px}
  .bf-oslot,.bf-sk-slot{width:56px;height:56px}
  .bf-oamt{flex-basis:100%;margin-left:0;font-size:22px}
  .bf-oacts .b{flex:1 1 100%}
  /* короткие подписи шагов, без переноса внутри слова и по центру колонки: «Проверка» жирным на 1px
     шире колонки при 360, по центру запас соседей разводит подписи */
  .bf-steps{gap:4px}
  .bf-steps li{overflow-wrap:normal;text-align:center}
  .bf-steps .bf-sl{display:none}
  .bf-steps .bf-ss{display:inline}
  .bf-mgr .row .b{flex:1 1 100%}
  .bf-ometa>div{flex-wrap:wrap;align-items:flex-start}
  .bf-ometa dd{justify-content:flex-start;text-align:left}
  .bf-lotf{grid-template-columns:minmax(0,1fr)}
  .bf-lotf .fld+.fld{margin-top:14px}
  .bf-dlg-btns .b{flex:1 1 100%}
  /* нижний лист: отступ под полосу «домой» — у подвала окна вывода, а не у формы вокруг него */
  .mbox.bf-wd>.bf-wdf:last-child{padding-bottom:0}
  .bf-wdfoot{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  /* порядок по ширине самой длинной короткой подписи («По редкости»), поиск забирает остальное */
  .bf-sortw{flex:none}
  .bf-sortw .select{width:auto}
  .bf-invbar .bf-headb{width:100%;margin-left:0}
  .bf-invbar .bf-headb .b{flex:1}
  .bf-sech .seg{width:100%;margin-left:0}
  .bf-sech .seg button{flex:1;padding:0 6px}
  .bf-admsum>.b{width:100%}
  .bf-admst p{flex-direction:column}
  .bf-admst p span+span::before{display:none}
  .head.inv-head{flex-wrap:wrap}
  .head.inv-head .inv-bf{order:3;flex-basis:100%;margin-top:-4px}
}
@media (max-width:440px){
  /* три вкладки раздела целиком от 360: «Мои покупки» не уходит под гашение края */
  .bf-tabs{gap:0}
  .bf-tabs>a{padding:0 9px;font-size:14px}
  .bf-tabs>a[aria-current=page]::after{left:9px;right:9px}
  .bf-invbar .seg{width:100%}
  .bf-invbar .seg button{flex:1}
}

/* Заказ на широком экране: сведения справа, ход заказа и действия слева */
@media (min-width:1081px){
  .bf-order{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:48px;max-width:1180px}
  .bf-order>*{grid-column:1}
  .bf-order>.bf-ometa{grid-column:2;grid-row:1/span 8;align-self:start;margin-top:0;padding:4px 20px;border-top:0;border-radius:var(--r-lg);
    background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge)}
  .bf-order>.bf-ometa>div{flex-direction:column;align-items:flex-start;gap:2px;min-height:0;padding:12px 0}
  .bf-order>.bf-ometa>div:last-child{border-bottom:0}
  .bf-order>.bf-ometa dd{justify-content:flex-start;text-align:left}
}

/* Карточки товаров (готовый арт: рамка, «Permanent»/«Gamepass», название) — целиком, квадратом,
   без тонировки слота, сияния и звёздочек. У товаров без такой карточки остаётся прежний слот. */
.bf :is(.stage,.ipstage,.slotic):has(>img.card){aspect-ratio:1/1;background:none;box-shadow:none}
.bf :is(.stage,.ipstage,.slotic):has(>img.card)::before,.bf :is(.stage,.ipstage,.slotic):has(>img.card)::after{content:none}
.bf img.card,.bf .it .stage img.card,.bf .it.bf-r-pass .stage img.card,.bf .ipstage img.card,.bf .slotic img.card{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none;border-radius:inherit}
@media (hover:hover){.bf .it:hover .stage img.card{transform:scale(1.03)}}
/* Телефон стоя: карточка на странице товара — квадрат во всю ширину колонки (не больше 420px). Общий .ipstage на ≤900
   даёт высоту 0.9 ширины (под слот 1/.9), а квадрат карточки брал ширину от высоты и выходил на 10% уже: справа оставалось
   пустое место. 100vh − 200px (шапка, крошки, нижнее меню) — только для почти квадратных окон (разделённый экран),
   на телефонах не срабатывает. Скелет загрузки — тем же квадратом, чтобы страница не прыгала, когда карточка загрузится */
@media (max-width:900px) and (orientation:portrait){
  .bf .ipstage:has(>img.card),.bf .ipsk-stage{width:min(100%,420px,calc(100vh - 200px));height:auto;aspect-ratio:1/1}
}
/* Чат (17-chat.js): кнопка в шапке, панель #chatp, переписка .chv (панель, заказ Blox Fruits, админка),
   просмотр фото #chatimg. Цвета только из токенов; свои пузырьки — brand-soft, чужие — surface-2
   (в светлой теме чужие на «бумаге» --bg: иначе лаванда к лаванде). */

/* ───────── кнопка в шапке ───────── */
.chatb{position:relative;background:var(--surface-2);color:var(--ink)}
.chatb:where(:not(:disabled)):hover{background:var(--surface-3)}
.chatb .cnt{position:absolute;top:-5px;right:-5px;box-shadow:0 0 0 2px var(--bg-2)}
@media (max-width:400px){ .bar #chatb{width:36px;min-width:36px} }
/* 320 px: у гостя в шапке ещё «Войти» и «Регистрация» — чат и так ведёт ко входу */
@media (max-width:350px){ body.guest .bar #chatb{display:none} }
/* Шапка не влезает (chatHdrFit в 17-chat.js): на телефоне уходит кнопка темы (она есть в подвале
   и настройках), на ПК — надпись rohubgg у логотипа, знак остаётся */
@media (max-width:900px){ .bar-in.hdr-tight .themebtn{display:none} }
/* гость на 360: «Войти» и «Регистрация» рядом с чатом и корзиной заходили на 1 px в поле страницы */
@media (max-width:374px){ .bar-in.hdr-tight .authbtns .b{padding:0 10px} }
@media (min-width:901px){ .bar-in.hdr-tight .brand .wm{display:none} }
/* Число на пункте «Админка» и вкладках админки; у сотрудника на телефоне — на «Профиле» в нижней панели */
.nav a .nav-cnt{margin-left:6px}
.adm-tabs .cnt{margin-left:7px}
.tabbar a .tb-cnt{position:absolute;top:3px;left:calc(50% + 6px);box-shadow:0 0 0 2px var(--bg-2)}

/* ───────── панель ───────── */
.chatov{position:fixed;inset:0;z-index:var(--z-cartov);background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s ease}
.chatov.open{opacity:1;pointer-events:auto}
.chatp{position:fixed;right:0;top:var(--visible-top,0px);z-index:var(--z-cart);display:flex;flex-direction:column;width:min(420px,100vw);height:var(--visible-height,100dvh);
  padding-right:env(safe-area-inset-right);background:var(--surface);color:var(--ink);border-radius:var(--r-xl) 0 0 var(--r-xl);box-shadow:var(--shadow-pop);
  overscroll-behavior:contain;transform:translateX(105%);visibility:hidden;transition:transform .26s var(--ease),visibility 0s linear .26s}
.chatp.open{transform:none;visibility:visible;transition:transform .26s var(--ease)}
html.light .chatp{box-shadow:var(--shadow-pop),inset 1px 0 0 var(--line)}
/* Телефон: на весь экран поверх нижней панели */
@media (max-width:560px){ .chatp,html.light .chatp{width:100vw;border-radius:0;box-shadow:none} }
.chp-head{gap:6px}
.chp-head:has(>.chp-back:not([hidden])){padding-left:10px}
.chp-ttl{flex:1;min-width:0}
.chp-ttl h2{font-size:20px;line-height:1.2;font-weight:800;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chp-ttl h2:focus{outline:none}
.chp-sub{margin-top:1px;font-size:13px;line-height:1.35;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chp-body{flex:1;min-height:0;display:flex;flex-direction:column}
.chp-body>.chp-fail{padding:8px 22px}
.chp-conv{flex:1;min-height:0;display:flex;flex-direction:column}
.chp-ord{flex:none;display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)}
.chp-ordt{flex:1;min-width:0}
.chp-ordt b{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chp-ordt small{display:block;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* «Присылать ответы на почту» над перепиской с поддержкой */
.chp-pref{flex:none;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 16px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.4;color:var(--ink-2)}
.chp-pref-t{flex:1;min-width:0;margin:0;cursor:pointer;overflow-wrap:anywhere}
p.chp-pref-t{cursor:auto}
.chp-pref-t b{color:var(--ink);font-weight:600}
.chp-pref-t a{color:var(--brand-text);text-decoration:underline;text-underline-offset:2px}
/* готовые карточки товаров Blox Fruits — целиком, без тонировки слота */
:is(.chatp,.ach) .slotic:has(>img.card){background:none;box-shadow:none}
:is(.chatp,.ach) .slotic img.card{inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Тосты при открытом чате: на ПК левее панели, на телефоне под её шапкой */
@media (min-width:901px){ html.chat-open #toasts{right:calc(min(420px,100vw) + 24px)} }
@media (max-width:900px){ html.chat-open #toasts{top:calc(72px + env(safe-area-inset-top));bottom:auto} }
@media (min-width:561px) and (max-width:900px){ html.chat-open #toasts{left:auto;right:16px;width:min(388px,calc(100vw - 32px))} }

/* Список диалогов */
.chl{flex:1;min-height:0;margin:0;padding:6px 0;list-style:none;overflow-y:auto;overscroll-behavior:contain}
.chl-row{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:10px 16px;border:0;background:none;text-align:left;color:var(--ink);cursor:pointer}
.chl-row:hover{background:var(--surface-2)}
.chl-row:focus-visible{outline-offset:-2px;border-radius:var(--r-md)}
.chl li+li .chl-row{box-shadow:inset 0 1px 0 var(--line)}
.chl-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-md)}
.chl-ic.sup{background:var(--brand-soft);color:var(--brand-text)}
.chl-ic.sup svg{width:22px;height:22px}
.chl-tx{flex:1;min-width:0}
.chl-t{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chl-p{display:block;font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chl-row.unread .chl-p{color:var(--ink);font-weight:600}
.chl-rt{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:13px;color:var(--ink-3)}
.chl-sk{padding:10px 16px}

/* ───────── переписка ───────── */
.chv{--chv-mine:var(--brand-soft);--chv-their:var(--surface-2);position:relative;flex:1;min-height:0;display:flex;flex-direction:column;min-width:0}
html.light .chv{--chv-their:var(--bg)}
.chv-wrap{position:relative;flex:1;min-height:0;display:flex}
.chv-log{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 14px;-webkit-overflow-scrolling:touch}
.chv-log:focus-visible{outline-offset:-3px;border-radius:var(--r-md)}
.chv.drop .chv-log{box-shadow:inset 0 0 0 2px var(--brand-hover);border-radius:var(--r-md)}
.chv-top{display:flex;align-items:center;justify-content:center;min-height:36px}
.chv-tl{font-size:13px;color:var(--ink-3)}
.chv-top .linkb{font-size:14px}
.chv-sk{display:grid;gap:10px;padding-top:8px}
.chv-sk .skl{width:64%;height:44px;border-radius:var(--r-lg)}
.chv-sk .skl.r{justify-self:end;width:46%}
.chv-list>.empty{padding:16px 0}
.chv-empty{display:flex;flex-direction:column;align-items:center;padding:28px 4px 8px;text-align:center}
.chv-hi{max-width:34ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
.chv-topics{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.chday{display:flex;justify-content:center;margin:14px 0 4px}
.chday span{padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);font-size:13px;font-weight:600;line-height:1.4}
html.light .chday span{background:var(--bg)}
/* сообщение: свои справа, собеседник слева; первое в группе — с подписью и отступом */
.chm{display:flex;flex-direction:column;align-items:flex-start;margin-top:3px}
.chm.first{margin-top:12px}
.chm.mine{align-items:flex-end}
.chb{position:relative;max-width:min(84%,540px);min-width:72px;padding:7px 12px 8px;border-radius:var(--r-lg);background:var(--chv-their);color:var(--ink);
  font-size:15px;line-height:1.45}
.chm.mine .chb{background:var(--chv-mine)}
.chm.their.first .chb{border-top-left-radius:6px}
.chm.mine.first .chb{border-top-right-radius:6px}
.cha{display:block;margin-bottom:2px;font-size:13px;font-weight:700;line-height:1.35;color:var(--brand-text)}
.cht{white-space:pre-wrap;overflow-wrap:anywhere}
.cht::after{content:"";display:inline-block;width:46px;height:1px}   /* место под время в последней строке */
.cht a{color:var(--brand-text);text-decoration:underline;text-underline-offset:2px}
.chtm{position:absolute;right:10px;bottom:8px;font-size:13px;line-height:1;color:var(--ink-3);font-variant-numeric:tabular-nums;pointer-events:none}
.chb.only-img{padding:4px;min-width:0}
.chb.only-img .cha{padding:2px 6px 0}
.chb.only-img .chtm{right:10px;bottom:10px;padding:3px 6px;border-radius:var(--r-pill);background:var(--stamp-bg);color:var(--stamp-ink)}
.chst{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 12px;max-width:min(84%,540px);margin:3px 4px 0;font-size:13px;line-height:1.35;color:var(--ink-3);text-align:right}
.chst.bad{color:var(--err-text)}
.chst .linkb{min-height:32px;font-size:13px}
.chm.pend.sending .chb{opacity:.72}
.chm.pend.failed .chb{box-shadow:inset 0 0 0 1.5px var(--err)}
/* фото в сообщении: размер задаёт разметка (ширина и высота по пропорциям), картинка — как обложка */
.chimg{position:relative;display:block;max-width:100%;margin:2px 0 4px;padding:0;border:0;border-radius:var(--r-md);overflow:hidden;background:var(--surface-3);cursor:zoom-in}
.chb.only-img .chimg{margin:0}
.chimg:not([style]):not(.gone){width:200px;height:150px}
.chimg img{display:block;width:100%;height:100%;object-fit:cover}
.chimg img:not([src]){visibility:hidden}
.chimg.wait{animation:pulse 1.2s ease-in-out infinite alternate}
.chimg.fail{cursor:pointer}
.chimg.fail::after{content:"Не загрузилось. Повторить";position:absolute;inset:0;display:grid;place-items:center;padding:8px;font-size:13px;font-weight:700;color:var(--ink-2);text-align:center}
.chimg:focus-visible{outline-offset:2px}
.chimg.gone{display:flex;align-items:center;min-height:40px;margin:2px 0 6px;padding:8px 12px;font-size:14px;color:var(--ink-3);cursor:default}
/* «N новых сообщений»: человек читает историю выше, новое пришло снизу */
.chv-new{position:absolute;left:50%;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 10px;border:0;border-radius:var(--r-pill);
  background:var(--brand);color:var(--on-brand);font:700 14px/1 var(--f);box-shadow:var(--shadow-pop);transform:translateX(-50%);cursor:pointer}
.chv-new:hover{background:var(--brand-hover)}
.chv-new svg{width:18px;height:18px;stroke-width:2.4}
/* поле ввода */
.chv-form{flex:none;padding:10px 12px max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
.chv.embed .chv-form{padding-bottom:10px}
.chv-row{display:flex;align-items:flex-end;gap:6px}
.chv-ta{flex:1;min-width:0;height:44px;min-height:44px;max-height:calc(5 * 1.4em + 25px);padding:10px 14px;border:1.5px solid var(--field-line);border-radius:var(--r-12);
  background:var(--surface-2);color:var(--ink);font:400 15px/1.4 var(--f);resize:none;overflow-y:hidden;-webkit-appearance:none;appearance:none;transition:border-color .12s,box-shadow .12s}
.chv-ta:focus{border-color:var(--brand-hover);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.chv-ta:disabled{opacity:.6;cursor:not-allowed}
@media (max-width:900px),(pointer:coarse){ .chv-ta{font-size:16px} }
.chv-row .ib{width:44px;height:44px}
.chv-send{background:var(--brand);color:var(--on-brand)}
.chv-send:where(:not(:disabled)):hover{background:var(--brand-hover);color:var(--on-brand)}
.chv-send:disabled{background:var(--surface-2);color:var(--ink-3);cursor:default}
.chv-send svg{width:20px;height:20px;stroke-width:2}
.chv-clip:disabled{opacity:.5;cursor:default}
.chv-err{margin:0 4px 8px;font-size:14px;line-height:1.4;color:var(--err-text)}
/* счётчик знаков: появляется у предела (1800 из 2000) */
.chv-cnt{margin:4px 52px 0 0;font-size:13px;line-height:1.3;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.chv-cnt.over{color:var(--err-text);font-weight:700}
/* «Сообщим об ответе» — уведомления браузера по явному согласию */
.chv-nt{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;margin:0 4px 8px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.chv-nt p{flex:1 1 220px;margin:0}
.chv-nt .linkb{min-height:32px;font-size:14px}
/* Поддержка ограничила отправку: вместо поля ввода — строка, переписку читать можно */
.chv-mute{display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 8px;font-size:14px;line-height:1.45;color:var(--ink-2);text-align:center;text-wrap:balance}
.chv-mute:focus{outline:none}
.chv-form.muted>:not(.chv-mute){display:none}
.chv-att{margin:0 0 8px}
.chv-attp{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:4px 4px 4px 4px;border-radius:var(--r-md);background:var(--surface-2);font-size:14px;color:var(--ink-2)}
.chv-attp img{flex:none;width:40px;height:40px;border-radius:8px;object-fit:cover}
.chv-attp.busy{padding:4px 14px 4px 4px}
.chv-attp.busy .skl{width:40px;height:40px;border-radius:8px}
.chv-attp .ib{width:36px;height:36px}

/* ───────── блок «Чат с менеджером» на странице заказа Blox Fruits ───────── */
.bf-chat{margin-top:28px}
.bf-chat .sech{margin-bottom:12px}
.bf-chatbox{display:flex;height:min(560px,72vh);min-height:380px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge);overflow:hidden}
html:not(.light) .bf-chatbox{box-shadow:inset 0 0 0 1px var(--line)}
.bf-chatbox>.chv{flex:1}
@media (max-width:900px){ .bf-chatbox{height:min(520px,calc(var(--visible-height,100dvh) - var(--hdr-h) - var(--tabbar-h) - 48px))} }
.bf-faq-help .linkb{display:inline;min-height:0;font-size:inherit}

/* ───────── подвал: чат главный, Telegram мелко ───────── */
.ft-help .linkb{min-height:0;font-size:15px;text-align:left}
.ft-tg{margin-top:6px;font-size:13px;color:var(--ink-3)}
.ft-tg a{color:var(--ink-2)}

/* ───────── просмотр фото ───────── */
.chatimg{position:fixed;inset:0;z-index:var(--z-sheet);display:flex;flex-direction:column;background:var(--bg)}
.chatimg[hidden]{display:none}
html.civ-open{overflow:hidden}
.civ-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left))}
.civ-t{font-size:15px;font-weight:700;color:var(--ink-2)}
.civ-x{background:var(--surface-2);color:var(--ink)}
.civ-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 16px max(16px,env(safe-area-inset-bottom));cursor:zoom-out}
/* маленький скриншот не крошечный: до двойного размера, но не больше экрана */
.civ-stage img{max-width:100%;max-height:100%;min-width:min(240px,100%);object-fit:contain;border-radius:var(--r-md);box-shadow:var(--shadow-pop);cursor:default}

@media (prefers-reduced-motion:reduce){ .chatp,.chatp.open,.chatov{transition:none} }
/* Страница предмета: SPEC §6.2. Разметку рисует 05-item.js. */

/* ───────── Крошки ───────── */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;margin:20px 0 18px;font-size:14px;line-height:1.4;color:var(--ink-3)}
.crumbs a{color:var(--ink-2);font-weight:600;text-decoration:none;border-radius:var(--r-sm)}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs .here{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ───────── Сетка: слот | инфо ───────── */
.ipgrid{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:48px;align-items:start}
.ipl{min-width:0}
.ipstage{position:relative;aspect-ratio:1/.9;border-radius:var(--r-xl);overflow:hidden;
  background:var(--slot);background:color-mix(in srgb,var(--rc-glow,var(--r-common-glow)) var(--tint),var(--slot-deep))}
.ipstage img{position:absolute;z-index:1;left:17%;top:12%;width:66%;height:72%;object-fit:contain;filter:var(--item-shadow)}
.ipstage .noimg{position:absolute;inset:0;width:28%;height:28%;margin:auto;stroke:var(--ink-3)}
.ipru{margin:10px 2px 0;font-size:14px;color:var(--ink-2)}
.ipru b{color:var(--ink)}

.ipc{min-width:0;max-width:680px}
.iptop{display:flex;align-items:flex-start;gap:12px}
.ipname{min-width:0;font-size:44px;line-height:1.02;font-weight:800;letter-spacing:-.035em;overflow-wrap:anywhere}
.iptop .ipshare{margin-left:auto;background:var(--surface-2);color:var(--ink)}
.iptop .ipshare:hover{background:var(--surface-3)}
.iptop .ipshare.done{color:var(--ok-text)}
.ipmeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:15px;color:var(--ink-2)}
.ipmeta .rar{color:var(--rc-txt);font-weight:700}
.ipmeta .dot{color:var(--ink-3)}

/* ───────── Цена и покупка ───────── */
.ipbest{margin-top:28px}
.ipbest .v{font-size:40px;line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--price);white-space:nowrap}
.ipbest .k{margin-top:8px;max-width:60ch;font-size:15px;color:var(--ink-2)}
.ipbest .k b{color:var(--ink)}
.ipbest .none{font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ipbtns{display:flex;gap:10px;margin-top:18px}
.ipbtns .pri{flex:1}
.ipbtns .b.lg{min-width:0}
.iptrust{margin-top:16px;max-width:60ch;font-size:15px;line-height:1.55;color:var(--ink-2)}
/* «В корзине»: зелёная, нажатие открывает корзину */
.b.incart{background:var(--ok-soft);color:var(--ok-text)}
.b.incart:hover{background:var(--ok-soft);background:color-mix(in srgb,var(--ok) 24%,transparent)}

/* Скелет, пока грузятся лоты */
.ipsk{display:grid;gap:12px;margin-top:28px}
.ipsk .skl{border-radius:var(--r-md)}
.ipsk .sk-v{width:38%;height:40px}
.ipsk .sk-k{width:72%;height:14px}
.ipsk .sk-k2{width:54%;height:14px}
.ipsk .sk-btn{width:100%;height:52px;margin:6px 0}
.ipc>.sk-h{width:70%;height:44px;border-radius:var(--r-md)}
.ipc>.sk-m{width:30%;height:14px;margin-top:16px}
.ipstage.ipsk-stage{background:var(--surface-2);box-shadow:none;animation:pulse 1.2s ease-in-out infinite alternate}

/* ───────── Продавцы ───────── */
.ipoffers{margin-top:36px}
.ipc .sech,.iprel .sech{display:flex;align-items:baseline;gap:8px}
.ipc .sech{margin-bottom:10px}
.sech small{font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink-3)}
.iprow{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 0;border-top:1px solid var(--line)}
.iprow:last-child{border-bottom:1px solid var(--line)}
.iprow .tx{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
.iprow .sl{display:flex;align-items:center;min-width:0;font-size:15px;font-weight:700}
.iprow .slnm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iprow .tag-own{flex:none}
.iprow .tx>b{grid-row:1/span 2;grid-column:2;font-size:17px;font-weight:800;color:var(--price);font-variant-numeric:tabular-nums;white-space:nowrap}
.iprow small{font-size:13px;color:var(--ink-2)}
.iprow small .best{color:var(--ok-text);font-weight:700}
.iprow small a{color:var(--brand-text);font-weight:600}
.iprow .ipadd{flex:none;min-width:124px}
/* Сколько лотов этой строки в корзине: [− 2 +] */
.ipqty{display:inline-flex;align-items:center;flex:none;width:124px;height:40px;border-radius:var(--r-md);background:var(--ok-soft);color:var(--ok-text)}
.ipqty button{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-md);color:inherit;transition:background-color .12s}
.ipqty button:hover:not(:disabled){background:var(--ok-soft)}
.ipqty button:disabled{color:var(--ink-3)}
.ipqty svg{width:18px;height:18px;stroke-width:2.4}
.ipqty .n{flex:1;text-align:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.ipofoot{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:14px}
.ipostatus{font-size:13px;color:var(--ink-3)}
.ipostatus:empty{display:none}

/* ───────── О предмете ───────── */
.ipdesc{margin-top:18px;border-top:1px solid var(--line)}
.ipoffers:not([hidden])+.ipdesc{border-top:0}
.ipdesc summary{display:flex;align-items:center;min-height:48px;font-weight:700;list-style:none;border-radius:var(--r-sm)}
.ipdesc summary::-webkit-details-marker{display:none}
.ipdesc summary::after{content:"";width:9px;height:9px;margin-left:auto;margin-right:4px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.ipdesc[open] summary::after{transform:rotate(-135deg)}
.ipdesc p{max-width:62ch;margin:0 0 12px;color:var(--ink-2)}

/* ───────── Похожие ───────── */
.iprel{margin-top:64px}
.iprel-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.iprel-head .linkb{margin-left:auto}
.iprel .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.iprel-none{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:var(--ink-2)}
.b.incart svg{width:16px;height:16px}
/* «В корзине» на плитке: зелёная и при наведении, поля уже, чтобы уложиться в 96px справа от цены (как в маркете) */
.iprel .it .buyb.added,.iprel .it:hover .buyb.added{padding:0 12px;background:var(--ok-soft);color:var(--ok-text)}
.iprel .it .buyb.added:hover,.iprel .it .buyb.added:focus-visible{box-shadow:inset 0 0 0 1.5px currentColor}

/* ───────── Ошибка загрузки ───────── */
.ipfail .empty h1{font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em}

/* ───────── Окно «Купить …» ───────── */
.ipconf-item{display:flex;align-items:center;gap:14px}
.ipconf-item .slotic{width:64px;height:64px}
.ipconf-item .inf{flex:1;min-width:0}
.ipconf-item .inf b{display:block;font-size:17px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.ipconf-item small{display:block;margin-top:2px;font-size:13px;color:var(--ink-2)}
.ipconf-item .rar{color:var(--rc-txt);font-weight:700}
.ipconf-item .pr{flex:none;font-size:17px;font-weight:800;color:var(--price);font-variant-numeric:tabular-nums;white-space:nowrap}
.ipconf-sum{display:grid;gap:6px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.ipconf-sum .rw{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;color:var(--ink-2)}
.ipconf-sum .rw b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ipconf-sum .rw.lack :is(span,b){color:var(--err-text);font-weight:700}
.ipconf>.b{margin-top:18px}
.ipconf>.note{margin-top:12px;font-size:13px}

/* ───────── Панель покупки (телефон) ───────── */
.ipbar{display:none}

@media (max-width:1240px){
  .iprel .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .iprel .grid>:nth-child(n+5){display:none}
}
@media (max-width:1080px){
  .ipgrid{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:28px}
  .ipname{font-size:36px}
}
@media (max-width:900px){
  .crumbs{margin:12px 0 10px}
  .crumbs a{padding:10px 4px;margin:-10px -4px}
  .ipgrid{grid-template-columns:minmax(0,1fr);gap:20px}
  /* во всю ширину, но на планшете и телефоне лёжа не выше 420 и половины экрана */
  .ipstage{aspect-ratio:auto;height:min(420px,56vh,calc((100vw - 2 * var(--gut)) * .9))}
  .ipc{max-width:none}
  .ipname{font-size:30px}
  .ipbest{margin-top:18px}
  .ipbest .v{font-size:32px}
  .iprow{scroll-margin-bottom:72px}
  .iprel .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ipbar:not([hidden]){position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));z-index:var(--z-buybar);
    display:flex;align-items:center;gap:8px;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));
    background:var(--bg-2);box-shadow:0 -1px 0 var(--line);animation:ipbarin .16s var(--ease)}
  .ipbar .inf{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
  .ipbar .inf b{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ipbar .inf span{font-size:17px;font-weight:800;color:var(--price);white-space:nowrap}
  .ipbar .b{flex:none}
}
@keyframes ipbarin{from{transform:translateY(8px);opacity:0}}
@media (max-width:440px){
  .iprow{gap:10px}
  .iprow .ipadd{min-width:0}
  .iprow .xs-hide{display:none}
  .ipbtns .b.lg{padding:0 14px}
  .ipbar .ipcartb{padding:0 12px}
}
/* Корзина: содержимое дровера #cartp (оболочка — основа, 20-components.css). SPEC §5.7. */
.cartp .clist{padding:6px 10px}
.crow{position:relative;display:flex;align-items:center;gap:12px;padding:8px 6px 8px 12px;border-radius:var(--r-12)}
.crow .slotic{width:56px;height:56px}
.crow .inf{flex:1;min-width:0}
.crow .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;
  color:var(--ink);font-size:15px;font-weight:700;line-height:1.25;text-decoration:none;border-radius:var(--r-sm)}
.crow a.nm:hover{text-decoration:underline}
/* Предмет открывает вся строка (миниатюра, имя, цена), кроме «Убрать» справа */
.crow a.nm::after{content:"";position:absolute;inset:0 52px 0 0;border-radius:inherit}
.crow .sub{margin-top:2px;font-size:13px;line-height:1.35;color:var(--ink-2)}
.crow .sub b{color:var(--rc-txt);font-weight:700}
.crow .pr{flex:none;font-size:16px;font-weight:800;color:var(--price);font-variant-numeric:tabular-nums;white-space:nowrap}
/* «Убрать» — корзина-урна, а не крестик: крестик в том же столбце закрывает дровер (MT-14) */
.crow .del{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-md);color:var(--ink-3);transition:background-color .12s,color .12s}
.crow .del:hover:not(:disabled){background:var(--surface-3);color:var(--err-text)}
.crow .del:disabled{opacity:.5}
.crow .del svg{width:19px;height:19px;stroke-width:1.9}
.cartp .clist[aria-busy=true]{opacity:.6;transition:opacity .15s}

.cartp .cfoot{display:grid;gap:8px;padding-top:16px;padding-left:22px;padding-right:22px;border-top:1px solid var(--line)}
.cfoot .rw{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;color:var(--ink-2)}
.cfoot .rw b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cfoot .rw.tot{margin-top:2px;color:var(--ink);font-size:16px;font-weight:700}
.cfoot .rw.tot b{font-size:24px;font-weight:800;color:var(--gold-text)}
.cfoot .rw.lack :is(span,b){color:var(--err-text);font-weight:700}
.cfoot .b{margin-top:8px}
.cfoot .note{margin-top:4px;font-size:13px}

.cartp .cempty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 28px;text-align:center}
.cempty h4{font-size:20px;line-height:1.25;font-weight:800}
.cempty p{max-width:30ch;margin:6px 0 18px;color:var(--ink-2)}

@media (hover:hover){.crow:hover{background:var(--surface-2)}}
@media (max-width:440px){
  .crow{gap:10px;padding-left:8px}
  .crow .slotic{width:48px;height:48px}
}
/* Вход, регистрация, сброс и смена пароля, подтверждение почты: SPEC §6.4.
   Окно .mbox.sm.auth (440, на телефоне нижний лист) из общей модалки; поля — .fld основы. */

.auth-seg{display:flex;width:100%;margin-bottom:18px}
.auth-seg button{flex:1 1 0;height:40px;font-size:15px}

.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form .fld+.fld{margin-top:0}
.auth-lead{color:var(--ink-2)}
.auth-lead b{color:var(--ink);font-weight:700;overflow-wrap:anywhere}
/* Почта (authMail): влезает в строку — переносится целиком (один блок в строке);
   шире строки — рвётся после «@», домен с точкой после него не делится */
.auth-lead .auth-mail{display:inline-block;max-width:100%}
.auth-lead .auth-dom{white-space:nowrap}

/* Под полем: слева ошибка, Caps Lock, подсказка; справа «Забыл пароль?» */
.auth-under{display:flex;align-items:flex-start;gap:12px}
.auth-notes{flex:1;min-width:0}
.auth-under>.linkb{flex:none;margin:-2px 0 -6px auto}
.auth-caps{font-weight:600;color:var(--ink)}
.auth-caps:empty{margin-top:0}
.auth .ferr .linkb,.auth-formerr .linkb{min-height:0;font-size:inherit;vertical-align:baseline}

/* Код из письма: крупные цифры с разрядкой */
.auth .fld input.auth-code{font-size:20px;font-weight:700;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.auth-devcode{font-size:28px;line-height:1.2;font-weight:800;letter-spacing:.16em;color:var(--ink)}

.auth-note,.auth-formerr{font-size:14px;line-height:1.45;font-weight:600}
.auth-note{color:var(--ok-text)}
.auth-formerr{color:var(--err-text)}
.auth-go{margin-top:6px}
.auth-alt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 16px;margin-top:-6px}
.auth-alt .auth-br{flex-basis:100%;height:0}
.auth .linkb[aria-disabled=true]{color:var(--ink-3);text-decoration:none;cursor:default}
.auth .linkb.is-busy{cursor:progress}
.auth-foot{font-size:13px;line-height:1.5;color:var(--ink-2)}
.auth-foot a{font-weight:600}

@media (max-width:440px){
  .auth-under{flex-wrap:wrap}
}
/* Сдать вещи боту: стартовый экран, карточка бота (сдача и вывод), выбор аккаунта Roblox,
   памятка про фейк-ботов. SPEC §6.5. Карточка вывода живёт в #invsess инвентаря,
   поэтому здесь только классы, без привязки к экрану. */

/* ───────── Сетка ───────── */
.dp-intro{margin:-8px 0 24px;max-width:60ch;color:var(--ink-2)}
.dep{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:start}
.dp-sess.is-wd{margin-bottom:40px}
.dp-wdh{margin:0 0 16px}

/* ───────── Карточка бота ───────── */
.botcard{min-width:0;padding:24px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge)}
.bc-state{display:flex;align-items:center;gap:10px;min-height:28px;font-size:15px;font-weight:600;color:var(--ink-2)}
.bc-state .dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ok)}
.bc-state[data-st=off] .dot{background:var(--err)}
.bc-state[data-st=hop] .dot{background:var(--ink-3)}
.bc-state[data-st=trade] .dot{background:var(--brand-text)}
.bc-time{margin-left:auto;height:28px;padding:0 10px;border-radius:var(--r-pill);background:var(--gold-soft);color:var(--gold-text);
  font-weight:800;line-height:28px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bc-time.low{background:var(--err-soft);color:var(--err-text)}

/* ник бота и аккаунт игрока: один блок */
.bc-id{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:18px;padding:16px;border-radius:var(--r-lg);background:var(--surface-2)}
.bc-id .av{width:56px;height:56px;font-size:22px}
.bc-who{flex:1 1 160px;min-width:0}
.bc-id .lbl{font-size:14px;color:var(--ink-2)}
.bc-id .nick{font:700 28px/1.15 var(--mono);letter-spacing:.01em;color:var(--ink);overflow-wrap:anywhere}
.bc-id .b{flex:none}

/* предупреждение про фейк-ботов: единственное место с янтарём */
.warnote{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;margin-top:14px;padding:14px 16px;border-radius:var(--r-lg);
  background:var(--warn-soft);color:var(--ink);font-size:15px;line-height:1.5}
.warnote svg{width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--warn-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.warnote b{font-weight:800}
.warnote code{padding:2px 6px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--warn-text) 14%,transparent);
  font:700 15px/1 var(--mono);white-space:nowrap}
.warnote a{color:var(--warn-text);font-weight:700;text-underline-offset:3px}

.bc-step{margin-top:22px}
.bc-step .k{font-size:14px;font-weight:600;color:var(--ink-3)}
.bc-step h2{margin-top:4px;font-size:20px;line-height:1.25;font-weight:800;letter-spacing:-.015em}
.bc-step p{margin-top:6px;max-width:56ch;color:var(--ink-2)}
.bc-step p b{color:var(--ink)}
.bc-notes{display:grid;gap:8px;margin-top:14px}
.bc-notes:empty{display:none}
.bc-n{padding:12px 14px;border-radius:var(--r-12);background:var(--surface-2);color:var(--ink);font-size:14px;line-height:1.45}
.bc-n.err{background:var(--err-soft)}
.bc-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.bc-ask{margin-top:18px}
.bc-ask p{color:var(--ink-2)}
.bc-ask b{color:var(--ink);font-weight:800}
.bc-ask .bc-btns{margin-top:12px}
.bc-fin{margin-top:10px;font-size:13px;color:var(--ink-2)}
.bc-fin:empty{display:none}
.bc-help{margin-top:16px;border-top:1px solid var(--line)}
.bc-help summary{display:flex;align-items:center;gap:12px;min-height:48px;border-radius:var(--r-md);font-weight:700;list-style:none}
.bc-help summary::-webkit-details-marker{display:none}
.bc-help summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-3px) rotate(45deg);transition:transform .15s}
.bc-help[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.bc-help p{max-width:60ch;color:var(--ink-2)}
.bc-links{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:4px}

/* ───────── Справа: «Бот принял» / «Бот отдаёт» ───────── */
.got{min-width:0}
.got h3,.dp-safe h2{margin:4px 0 12px;font-size:20px;line-height:1.2;font-weight:800;letter-spacing:-.015em}
.got p:empty{display:none}
.got-empty{color:var(--ink-2)}
.got .note{margin:12px 0 14px}
.got .dgh{margin:20px 0 8px}
.glist{list-style:none;margin:0;padding:0}
.glist li{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0;border-bottom:1px solid var(--line)}
.glist li:first-child{border-top:1px solid var(--line)}
.glist .inf{flex:1;min-width:0}
.glist .nm{font-size:15px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.glist small{display:block;font-size:13px;font-weight:700;color:var(--rc-txt,var(--ink-3))}
.glist small:empty{display:none}
.glist .q{flex:none;color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}

/* ───────── Итог сдачи и вывода ───────── */
.dp-done h2{font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.dp-done-t{margin-top:8px;max-width:56ch;color:var(--ink-2)}
.dp-done.solo{max-width:720px}
.dp-done .glist{margin-top:16px}

/* ───────── Стартовый экран ───────── */
.dp-acct{margin-top:0}
.dp-nick{font-size:20px;line-height:1.25;font-weight:700;overflow-wrap:anywhere}
.dp-av.none{background:var(--surface-3);color:var(--ink-2)}
.dp-av.none svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.dp-lead{margin-top:14px;max-width:56ch;color:var(--ink-2)}
.dp-msg{margin-top:14px;padding:12px 14px;border-radius:var(--r-12);background:var(--surface-2);color:var(--ink);font-size:14px;line-height:1.45}
.dp-msg.err{background:var(--err-soft)}
.dp-msg .linkb{font-size:14px;vertical-align:middle}
.dp-safe{padding-top:4px}
.dp-safe p{margin-top:8px;max-width:48ch;color:var(--ink-2)}
.dp-safe .linkb{margin-top:4px}
/* выбор бота (только администратору): строки — .pay-m из 85-pay.css; .botcard — сильнее .pay-meth{margin}
   из 85-pay.css, он в сборке позже. Недоступный бот — бледная строка без подсветки (DESIGN-SPEC: opacity .55) */
.botcard .dp-bots{margin-top:18px}
.dp-bots .pay-m{min-height:56px}
.dp-bots .pay-m.off{opacity:.55;cursor:not-allowed}
.dp-bots .pay-m.off:not(.on):hover{box-shadow:inset 0 0 0 1.5px var(--line)}
html.light .dp-bots .pay-m.off:not(.on):hover{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.dp-bots .pay-off .linkb{font-size:13px}
.dp-sk .sk-row{min-height:0;padding:0;border:0}
.dp-sk .sk-row>i:first-child{width:56px;height:56px;border-radius:50%}
.dp-sk .skl{height:14px;width:70%;margin-top:22px}
.dp-sk .dp-skb{width:200px;height:52px;border-radius:var(--r-md)}

/* ───────── Выбор аккаунта Roblox ───────── */
.pick .mbody{padding-top:14px}
.pick-field{position:relative}
.pick-field .mag{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;pointer-events:none}
.pick-field .inp{padding-left:42px}
.pick-field.manual .inp{padding-left:14px}
.pick .fhint,.pick .ferr{margin-top:8px}
.pick .ferr{color:var(--err-text)}   /* .mbody>p из основы перекрашивает ошибку в серый */
.pick-list{display:grid;gap:4px;margin-top:14px}
.pick-list:empty{display:none}
.pick-list .sk-row{min-height:60px;padding:8px 10px;border:0}
.pick-list .sk-row>i:first-child{width:40px;height:40px;border-radius:50%}
.pick-cap{margin:10px 0 2px;font-size:14px;font-weight:700;color:var(--ink-2)}
.pick-empty{padding:8px 0;color:var(--ink-2)}
.pick-empty b{display:block;color:var(--ink);font-size:16px;font-weight:800}
.pick-empty p{margin-top:4px}
.pick-empty .b{margin-top:12px}
.pick-miss{padding-bottom:4px}
.urow{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 10px;border:0;border-radius:var(--r-12);
  background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.urow:hover{background:var(--surface-2)}
.urow.sel{background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.urow:disabled{cursor:default}
.urow .un{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.urow .un b{font-size:16px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.urow .un small{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.urow .tg{margin-top:2px}
.urow .chk{flex:none;width:22px;height:22px;fill:none;stroke:var(--brand-text);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.urow.sel .chk{opacity:1}
.pick-foot{flex-direction:column;align-items:stretch;gap:6px}
.pick-foot .linkb{align-self:center}

/* ───────── Памятка про фейк-ботов ───────── */
.scam-list{display:grid;gap:18px;margin:0;padding:0;list-style:none;counter-reset:scam}
.scam-list li{position:relative;min-height:30px;padding-left:44px;counter-increment:scam}
.scam-list li::before{content:counter(scam);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--surface-2);color:var(--ink);font-size:14px;font-weight:800}
.scam-list b{display:block;font-size:16px;line-height:1.3;font-weight:800}
.scam-list p{margin-top:4px;color:var(--ink-2)}
.scam-list p b{display:inline;font-size:inherit;color:var(--ink)}

@media (max-width:1080px){
  .dep{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:560px){
  .botcard{padding:18px}
  .bc-id .b,.bc-btns .b{width:100%}
  .bc-id .nick{font-size:24px}
  .dp-done h2{font-size:22px}
}
/* Инвентарь, продажа, вывод: SPEC §6.6. Разметка: #t-inv, окна .mbox.invm. */

/* ───────── Строки над сеткой: идёт сдача, итог вывода ───────── */
.inv-notes:not(:empty){display:grid;gap:10px;margin-bottom:20px}
.inv-sess:not(:empty){margin-bottom:32px}
.inv-note{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;max-width:760px;padding:10px 10px 10px 16px;border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge)}
.inv-note p{flex:1 1 260px;min-width:0;color:var(--ink-2)}
.inv-note p b{color:var(--ink)}
.inv-note.ok p::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:var(--ok);vertical-align:1px}

/* ───────── Заголовок с порядком, сегмент, поиск ───────── */
.inv-head{align-items:center;flex-wrap:nowrap}
/* На телефоне подписи короче (09-inventory.js invSortLabels), а если и так не влезет — select сжимается, а не вылезает за поле */
.inv-head .h{flex:none}
.inv-head .select{flex:0 1 auto;min-width:0;margin-left:auto;text-overflow:ellipsis}
@media (max-width:900px),(pointer:coarse){.inv-head .select.sm{font-size:16px}}
.invtools{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.invtools .find{flex:0 1 360px}
.invtools .seg button[aria-pressed=true] b{color:var(--ink-2)}

/* ───────── Плитка: .it из основы + ряд кнопок снизу ───────── */
.inv .info{padding-bottom:10px}
.inv .price{align-items:baseline;gap:6px;min-height:32px;margin-top:6px;padding-right:0}
.inv .price span{font-size:13px;color:var(--ink-2)}
.inv .ref{display:flex;align-items:center;min-height:32px;margin-top:6px;font-size:13px;color:var(--ink-2)}
.inv-tags{position:absolute;right:8px;top:8px;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.inv-tags .stamp{position:static}
.inv-acts{display:flex;gap:8px;padding:0 12px 12px}
.inv-acts .b{flex:1 1 0;min-width:0;padding:0 10px}
@container (max-width:180px){
  .inv-acts{flex-direction:column}
  .inv-acts .b{flex:none;width:100%}
}
@supports not (container-type:inline-size){
  @media (max-width:440px){.inv-acts{flex-direction:column}.inv-acts .b{flex:none;width:100%}}
}
/* Галочка 24 в углу слота, зона нажатия 44 */
.inv-pick{position:absolute;left:0;top:0;z-index:2;display:grid;place-items:center;width:44px;height:44px;cursor:pointer}
.inv-pick input{position:absolute;inset:0;width:44px;height:44px;margin:0;opacity:0;cursor:pointer}
.inv-pick span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--stamp-bg);box-shadow:inset 0 0 0 2px var(--ink-3);pointer-events:none;transition:background-color .12s}
.inv-pick:hover span{box-shadow:inset 0 0 0 2px var(--ink-2)}
.inv-pick input:checked+span,.inv-pick input:indeterminate+span{background:var(--brand);box-shadow:none}
.inv-pick input:checked+span::after{content:"";width:6px;height:11px;border:solid var(--on-brand);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.inv-pick input:indeterminate+span::after{content:"";width:12px;height:3px;border:0;border-radius:2px;background:var(--on-brand);transform:none}
.inv-pick input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.it.sel::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--brand);pointer-events:none}
/* Как .mkmore у маркета: 28 от сетки (вместе с её gap 16, на телефоне 10) */
.inv-more{grid-column:1/-1;display:flex;justify-content:center;margin:12px 0 8px}

/* ───────── Панель вывода: липнет к низу своей секции ───────── */
.tray{position:sticky;bottom:16px;z-index:var(--z-sticky);margin-top:20px}
.tray-in{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;max-width:760px;margin:0 auto;padding:10px 10px 10px 20px;
  border-radius:var(--r-lg);background:var(--surface-2);box-shadow:var(--shadow-pop)}
html.light .tray-in{background:var(--surface);box-shadow:var(--shadow-pop),inset 0 0 0 1px var(--line)}
.tray-in>b{font-size:16px;font-weight:800;white-space:nowrap}
/* «Снять выбор» ссылкой вместо «Выбрать всё» — только на телефоне, где ghost-кнопка скрыта */
.tray-in .tray-clr{display:none}
/* Пока панель видна, тосты на ПК тоже встают над ней (на телефоне это делает основа) */
@media (min-width:901px){html.inv-tray #toasts{bottom:calc(24px + var(--toast-lift,0px) + env(safe-area-inset-bottom))}}

/* ───────── Окна: продажа, снятие, вывод ───────── */
.invm .inv-mitem{display:flex;align-items:center;gap:14px;padding:12px 22px 4px}
.invm .inv-mitem .slotic{width:76px;height:76px;border-radius:var(--r-12);box-shadow:inset 0 -3px 0 var(--rc-glow)}
.invm .inv-mitem h4{font-size:17px;line-height:1.25;font-weight:800;overflow-wrap:anywhere}
.invm .inv-mitem .rr{font-size:14px;font-weight:700;color:var(--rc-txt)}
.invm .inv-mitem .have{font-size:13px;color:var(--ink-2)}
.invm .ferr:empty{display:none}
/* aria-disabled вместо disabled: Enter в поле всё равно доходит до проверки и объясняет, что не так */
.invm .b[aria-disabled=true],.invm .b[aria-disabled=true]:hover{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed;transform:none}
.inv-hints{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:10px;font-size:14px;color:var(--ink-2)}
.inv-hints b{color:var(--ink);font-weight:700;white-space:nowrap}
.inv-pill{height:36px;padding:0 12px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);font-size:13px;font-weight:700}
.inv-pill:hover{background:var(--surface-3)}
.inv-qty{margin-top:16px}
.inv-step{display:inline-flex;align-items:stretch;border-radius:var(--r-md);background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--field-line)}
.inv-step button{width:44px;height:44px;border-radius:var(--r-md);color:var(--ink);font-size:20px;font-weight:700;line-height:1}
.inv-step button:hover:not(:disabled){background:var(--surface-3)}
.inv-step button:disabled{color:var(--ink-3);opacity:.55}
.inv-step input{width:52px;height:44px;padding:0;border:0;background:transparent;color:var(--ink);text-align:center;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.inv-step input:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:6px}
.inv-sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-weight:700}
.inv-sum b{font-size:22px;font-weight:800;color:var(--gold-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-sum.none b{color:var(--ink-3)}
.invm .mpad>.b.lg{margin-top:18px}
.inv-foot{margin-top:12px;font-size:13px;color:var(--ink-2);text-align:center}

/* Подтверждение вывода */
.wdc .mbody{padding-top:12px}
.wdc-list{max-height:min(320px,38vh);margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;list-style:none}
.wdc-list li{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 0;border-bottom:1px solid var(--line)}
.wdc-list li:first-child{border-top:1px solid var(--line)}
.wdc-inf{flex:1;min-width:0}
.wdc-inf b{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wdc-inf small{display:block;overflow:hidden;font-size:13px;color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap}
.wdc-inf .rar{color:var(--rc-txt);font-weight:700}
.wdc-one{padding:0 8px;font-size:14px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.wdc-acc{display:flex;align-items:center;flex-wrap:wrap;gap:0 12px;min-height:40px;margin-top:14px;font-size:15px;color:var(--ink-2)}
.wdc-acc b{color:var(--ink);font-weight:800;overflow-wrap:anywhere}
.wdc-note{margin-top:8px;font-size:14px;color:var(--ink-2)}
.wdc-err{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-top:14px;padding:12px 14px;border-radius:var(--r-12);background:var(--surface-2)}
.wdc-err p{flex:1 1 220px;font-weight:600}
.wdc-err a{font-weight:700}

@media (max-width:900px){
  .tray{bottom:calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom))}
  .inv-pill{height:40px}
  .inv-more{margin-top:18px}
}
@media (max-width:560px){
  .invtools .seg{width:100%}
  .invtools .seg button{flex:1;padding:0 6px}
  .invtools .find{flex:1 1 100%}
  .tray-in{padding:10px 10px 10px 14px}
  .tray-in .ghost{display:none}
  .tray-in .tray-clr{display:inline-flex}
  .tray-in .b.pri{flex:1 1 100%}
  .wdc-list li{gap:10px}
}
/* Узкий телефон: у строки со степпером имя на всю ширину, степпер и крестик строкой ниже,
   под именем (иначе имя сжимается до «Red Lu…», а редкость ломается в три строки) */
@media (max-width:400px){
  .wdc-list li.wdc-multi{flex-wrap:wrap;row-gap:6px}
  .wdc-list li.wdc-multi .wdc-inf{flex:1 1 calc(100% - 54px)}
  .wdc-list li.wdc-multi .inv-step{margin-left:54px}
  .wdc-list li.wdc-multi .ib{margin-left:auto}
}
/* Пока идёт вывод, у сегмента четвёртая кнопка «Выводятся»: на телефоне это сетка 2×2,
   иначе трёхзначные числа не влезают в строку */
@media (max-width:440px){
  .invtools .seg:has(>button:nth-child(4)){display:grid;grid-template-columns:1fr 1fr;gap:3px}
}
/* Профиль: карточка слева, вкладки «Сделки / Баланс / Настройки» справа. SPEC §6.7.
   Одна точка перестройки: при ≤900 карточка встаёт сверху. */
.pf{display:grid;grid-template-columns:320px minmax(0,1fr);gap:40px;align-items:start;margin:32px 0 0}

/* ───── карточка ───── */
.pfcard{padding:22px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge)}
@media (min-width:901px) and (min-height:760px){.pfcard{position:sticky;top:calc(var(--hdr-h) + 24px)}}
.pfwho{display:flex;align-items:center;gap:14px;min-width:0}
.pfwho-t{flex:1;min-width:0}
.pfav{display:block;flex:none;width:64px;height:64px}
.pfav .av{width:100%;height:100%;font-size:24px}
.pfnm{font-size:20px;line-height:1.25;font-weight:800;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfsince{margin-top:2px;font-size:14px;color:var(--ink-2);text-wrap:balance}
.pfbal{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.pfbal .k{display:block;font-size:14px;color:var(--ink-2)}
/* Сумма никогда не переносится: NBSP от rub2() + nowrap; не влезает — pfFitBal() ставит шаг мельче */
.pfbal .v{display:block;margin:2px 0 12px;font-size:32px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--gold-text);white-space:nowrap;overflow:hidden}
.pfbal .v.l2{font-size:26px}
.pfbal .v.l3{font-size:22px}
.pflinks{margin-top:18px;border-top:1px solid var(--line)}
.pfln{display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:none;color:var(--ink-2);font:inherit;font-size:15px;text-align:left;text-decoration:none}
.pfln>span{flex:none}
.pfln b{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:700}
.pfln b.ok{color:var(--ok-text)}
.pfln b.ac{color:var(--brand-text)}
.pfln svg{width:16px;height:16px;stroke:var(--ink-3);stroke-width:2.2}
:is(a,button).pfln{cursor:pointer}
:is(a,button).pfln:hover svg{stroke:var(--ink)}
:is(a,button).pfln:hover span{color:var(--ink)}
.pfln:focus-visible{outline-offset:-2px;border-radius:var(--r-sm)}
.pfnote{margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.pfacc>.b.wide{margin-top:18px}

/* ───── правая колонка ───── */
.pfmain{min-width:0}
.pfstats{min-height:23px;margin:0 0 10px;font-size:15px;color:var(--ink-2)}
.pfstats b{color:var(--ink);font-weight:800}
.pfstats .skl{width:min(420px,80%);height:14px;margin-top:5px}
/* Пары переносятся целиком. Точка стоит в отступе перед парой, а отступ первой пары
   каждой строки уходит под обрезку слева: ни «·» в конце строки, ни в начале. */
.pfsl{display:block;overflow:hidden}
.pfsl>span{display:flex;flex-wrap:wrap;row-gap:2px;margin-left:-21px}
.pfsl .nw{position:relative;padding-left:21px;white-space:nowrap}
.pfsl .nw::before{content:"·";position:absolute;left:8px}
.pftabs{margin-bottom:4px}
.pfpane:focus-visible{outline-offset:4px;border-radius:var(--r-sm)}
.pftools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 6px}
.pffind{flex:0 1 300px;margin-left:auto}
.pflist>.empty{padding-top:24px}
.pflist>.lrow:first-child{border-top:0}
.pffoot{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:16px}
.pffoot .foot-note{margin:0}

/* Строки сделок и истории: слот 44 или значок операции, текст, сумма и время */
.pfrow .pfdl{display:flex;align-items:center;gap:14px;flex:1;min-width:0;align-self:stretch;margin:-10px 0;padding:10px 0;color:inherit;text-decoration:none}
.pfrow a.pfdl:hover .t{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.pfrow .pfdl:focus-visible{outline-offset:-2px;border-radius:var(--r-md)}
.pfrow .inf{display:block;flex:1;min-width:0}
/* Вторая строка переносится (до двух строк), а не режется: сумма в ней не должна пропадать.
   Сама сумма вместе с «за» — в .nw, поэтому уходит на новую строку целиком. */
.pfrow .inf small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}
.pfrow .rar{color:var(--rc-txt);font-weight:700}
.pfrow .qty{color:var(--ink-2)}
.pfrow .slotic .noimg{position:absolute;inset:0;margin:auto;width:60%;height:60%;stroke:var(--ink-3)}
.pfrow.is-chroma .slotic{box-shadow:none}
.pfrow.is-chroma .slotic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--chroma)}
.pfrow .amt{margin-left:auto}
.pfrow .amt.fee{color:var(--ink-3)}
.pfrow .amt.zero{font-size:15px;font-weight:600;color:var(--ink-3)}

/* ───── настройки ───── */
.pfset{flex-wrap:wrap;column-gap:14px;row-gap:10px}
.pfset .inf{flex:1 1 140px}
.pfsets{max-width:760px}
.pfset .inf small{white-space:normal}
.pfset .seg,.pfset>.b{flex:none}
.pfok{font-size:14px;font-weight:700;color:var(--ok-text)}
.pfnickf{padding:14px 0 16px;border-bottom:1px solid var(--line)}
.pfnick-in{display:flex;flex-wrap:wrap;gap:8px}
.pfnick-in .inp{flex:1 1 220px;width:auto;min-width:0}
.pfnick-in .b{height:48px}
.pfnickf .ferr+.fhint{margin-top:4px}

/* ───── ширины ───── */
@media (max-width:1080px){
  .pf{grid-template-columns:280px minmax(0,1fr);gap:28px}
  .pfcard{padding:20px}
}
@media (max-width:900px){
  .pf{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:20px}
}
/* Планшет: карточка во всю ширину, поэтому в две колонки */
@media (min-width:561px) and (max-width:900px){
  .pfcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:start}
  .pflinks{margin-top:0;border-top:0}
}
@media (max-width:560px){
  .pfcard{padding:18px}
  .pfbal{display:flex;align-items:center;flex-wrap:wrap;column-gap:12px;margin-top:18px;padding-top:14px}
  .pfbal .k{flex-basis:100%}
  .pfbal .v{flex:1;min-width:0;margin:0}
  .pfbal .b{flex:none}
  .pftools .seg{width:100%}
  .pftools .seg button{flex:1 1 0}
  .pffind{flex:1 1 100%;margin-left:0}
  .pfrow{gap:10px}
  .pfrow .pfdl{gap:10px}
  .pfnick-in .b{flex:1 1 0}
}
/* Пополнение: SPEC §6.8. Одна колонка 560 по центру. Разметка — 12-pay.js. */
.pay{max-width:560px;margin:0 auto}
.pay-head{gap:4px 16px}
.pay-now{margin-left:auto;font-size:15px;color:var(--ink-2);white-space:nowrap}
.pay-now b{color:var(--gold-text);font-weight:800}

/* ───── сумма ───── */
.pay-amt .money-in input[aria-invalid=true]{border-color:var(--err)}
.pay-amt .money-in input[aria-invalid=true]:focus{box-shadow:0 0 0 3px var(--err-soft)}
.pay-amt .ferr:empty{display:none}
.pay-pre{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pay-pre button{height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);
  font-size:14px;font-weight:700;white-space:nowrap;transition:background-color .12s,color .12s}
.pay-pre button:hover{background:var(--surface-3);color:var(--ink)}
.pay-pre button[aria-pressed=true]{background:var(--cat-on-bg);color:var(--cat-on-ink)}
.pay-pre button:disabled{cursor:not-allowed}
.pay-cartnote{margin-top:10px}

/* ───── способы: радио-строки ───── */
.pay-meth{min-width:0;margin:24px 0 0;padding:0;border:0}
.pay-meth legend{float:left;width:100%;padding:0}   /* float: legend встаёт в поток и слушается отступов */
.pay-ms{clear:both;display:grid;gap:8px}
.pay-m{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px 10px 14px;border-radius:var(--r-lg);
  background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;transition:box-shadow .12s,background-color .12s}
html.light .pay-m:not(.on):not(:hover){box-shadow:inset 0 0 0 1.5px var(--line-2)}
.pay-m:hover{box-shadow:inset 0 0 0 1.5px var(--field-line)}
/* Радио во всю строку: при переходе по Tab в окно прокручивается вся строка, а не точка в ней */
.pay-m input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;
  scroll-margin:calc(var(--hdr-h) + 12px) 0 calc(var(--tabbar-h) + 104px)}
.pay-mi{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-md);background:var(--surface-2);color:var(--ink-2)}
.pay-mi svg{width:20px;height:20px}
.pay-mt{flex:1;min-width:0}
.pay-mt b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.pay-mt small{display:block;margin-top:1px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.pay-rd{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--field-line);transition:box-shadow .12s}
/* Выбранная: рамка и точка --brand-hover (3.7:1 к фону строки в тёмной; у --brand 2.9) */
.pay-m.on{background:var(--surface);background:color-mix(in srgb,var(--brand) 6%,var(--surface));box-shadow:inset 0 0 0 2px var(--brand-hover)}
.pay-m.on .pay-rd{box-shadow:inset 0 0 0 7px var(--brand-hover)}
.pay-m.on .pay-mi{background:var(--brand-soft);color:var(--brand-text)}
.pay-m:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.pay-m:focus-within:not(:has(:focus-visible)){outline:none}
.pay-m:has(input:disabled){cursor:not-allowed}
.pay-off{margin-top:10px;font-size:13px;color:var(--ink-2)}

/* ───── сводка и кнопка ─────
   Блок липнет к низу окна, если форма длиннее экрана: итог и «Оплатить» видны сразу
   на 1100×800. На телефоне липнет одна кнопка (в ней та же сумма), над нижней панелью. */
.pay-foot{position:sticky;bottom:0;z-index:var(--z-sticky);margin-top:8px;padding:12px 0 16px;background:var(--bg)}
.pay-foot.stuck,.pay-cta.stuck{box-shadow:0 -1px 0 var(--line)}   /* висит над способами: видно край */
.pay-end{display:block;height:0}
.pay-sum{padding:16px 18px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge)}
.pay-sum dl{display:grid;gap:8px}
.pay-sum dl>div,.pay-res-sum>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;color:var(--ink-2)}
.pay-sum dd,.pay-res-sum dd{margin:0;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pay-sum .tot{margin-top:2px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink);font-weight:700}
.pay-sum .tot dd{font-size:22px;font-weight:800;color:var(--gold-text)}
.pay-sum dd.none{color:var(--ink-3)}   /* сумма не указана: прочерк без золота */
.pay-rate{margin-top:2px;font-size:13px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.pay-cta{margin-top:14px}
.pay-msg{margin:0 0 10px}
.pay-msg:empty{display:none}
/* Кнопка с объяснением («Минимум 50 ₽ для Kaspi») нажимается и показывает ошибку у поля */
.pay-cta .b[aria-disabled=true]:hover{background:var(--surface-2)}
.pay-cta .b[aria-disabled=true]:active{transform:none}
.pay-note{font-size:13px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}

/* ───── незавершённый счёт над формой ───── */
.pay-pend-slot:empty{display:none}
.pay-pend-slot{margin-bottom:20px}
.pay-pend{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:12px 8px 12px 16px;border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1.5px var(--line-2)}
.pay-pend-t{flex:1 1 260px;min-width:0}
.pay-pend-t b{display:block;font-size:15px;font-weight:700;line-height:1.35}
.pay-pend-t small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.pay-pend.ok b{color:var(--ok-text)}
.pay-pend-a{display:flex;align-items:center;gap:4px 12px;margin-left:auto}
.pay-pend-a .b{min-width:112px}

/* ───── итог счёта ───── */
.pay-res{padding:24px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge)}
.pay-res-t{display:flex;align-items:center;gap:10px;font-size:20px;line-height:1.25;font-weight:800;letter-spacing:-.015em}
.pay-ri{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--surface-3);color:var(--ink)}
.pay-ri svg{width:14px;height:14px;stroke-width:3}
.pay-ri.ok{background:var(--ok);color:var(--on-ok)}
.pay-ri.bad{background:var(--err);color:var(--on-err)}
.pay-res-p{margin-top:8px;max-width:52ch;color:var(--ink-2);text-wrap:pretty}
.pay-res-sk{display:grid;gap:10px;margin-top:14px}
.pay-res-sk .skl{height:14px;width:72%}
.pay-res-sk .skl+.skl{width:44%}
.pay-res-sum{display:grid;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pay-res-n{margin-top:12px;font-size:14px;color:var(--ink-2)}
.pay-res-a{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:20px}
.pay-res-id{margin-top:18px;font-size:13px;color:var(--ink-3)}
.pay-res-id span{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums;-webkit-user-select:all;user-select:all}

/* ───── загрузка способов ───── */
.pay-sk{display:grid;gap:8px}
.pay-sk .skl{width:auto}
.pay-sk-l{height:14px;max-width:120px;margin-top:6px}
.pay-sk-f{height:56px;border-radius:var(--r-12)}
.pay-sk-p{display:flex;gap:8px;margin-bottom:18px}
.pay-sk-p .skl{width:72px;height:40px;border-radius:var(--r-pill)}
.pay-sk-m{height:64px;border-radius:var(--r-lg)}
.pay-sk-s{height:132px;margin-top:12px;border-radius:var(--r-lg)}

/* Невысокое окно ПК (1100×800 с незавершённым счётом и Kaspi): плотнее, чтобы итог не наезжал на способы */
@media (min-width:901px) and (max-height:860px){
  .pay-head{margin:20px 0 14px}
  .pay-pend-slot{margin-bottom:14px}
  .pay-pend{padding-block:8px}
  .pay-pre{margin-top:8px}
  .pay-meth{margin-top:18px}
  .pay-m{min-height:58px;padding-block:8px}
  .pay-sum{padding:12px 18px}
  .pay-sum dl{gap:6px}
  .pay-sum .tot{padding-top:8px}
  .pay-foot{padding:10px 0 12px}
  .pay-cta{margin-top:12px}
}
@media (min-width:901px){
  .pay-m input{scroll-margin-bottom:280px}   /* высота липкого итога с запасом */
}
@media (max-width:900px){
  .pay-foot{display:contents}
  .pay-sum{margin-top:20px}
  .pay-cta{position:sticky;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));z-index:var(--z-sticky);margin-top:0;padding:12px 0;background:var(--bg)}
  .pay-note{margin-top:4px}
}
@media (max-width:560px){
  .pay-now{margin-left:0}
  .pay-res{padding:20px 18px}
  .pay-res-a .b{flex:1 1 100%}
  .pay-pend{position:relative;padding-right:48px}
  .pay-pend-a{margin-left:0}
  .pay-pend .pay-x{position:absolute;top:6px;right:6px}
}
@media (max-width:440px){
  .pay-pre{gap:6px}
  .pay-pre button{flex:1 1 0;padding:0 6px}
}
/* Админка (/test/admin) и «Боты и склад» (/test/ops): SPEC §6.9.
   Те же токены, плотнее: строки 40–44, текст 14, таблицы с липкой шапкой. */

/* ───────── каркас экрана ───────── */
.adm .head{align-items:center}
.adm-refresh{display:flex;align-items:center;gap:12px;margin-left:auto}
.adm-upd{font-size:13px;color:var(--ink-3);white-space:nowrap}
.adm-tabs{margin:0 0 20px}
.adm h2.s{font-size:18px}
.adm-card{padding:16px 20px 18px}
.adm-card,.adm-an,.adm-kpis{margin-top:16px}
.adm-pane>:first-child,.adm-users .adm-card,.adm-an-h+.adm-kpis{margin-top:0}
.adm-ph{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:40px;margin-bottom:12px}
.adm-ph>h2{margin-right:auto}
.adm-note{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.adm-kpis+.adm-note{margin-top:12px}
.adm-sub{margin:2px 0 0;font-size:13px;color:var(--ink-3)}
.adm-empty{margin:0;padding:12px 0;font-size:14px;color:var(--ink-2)}
.adm-kv{font-size:14px;color:var(--ink-2)}
.adm-kv b{color:var(--ink);font-weight:800}
.adm-h3{margin:0 0 12px;font-size:16px;font-weight:800}
.adm-tags{gap:6px;margin:8px 0}
.adm-alert:not([hidden]){margin-bottom:16px}
.adm-warn{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-md);background:var(--err-soft);color:var(--ink);font-size:14px}
/* Ошибка загрузки (failBox) внутри плотных панелей: мельче, чем на витрине */
.adm .empty{padding:8px 0 4px}
.adm .empty h3{font-size:18px;letter-spacing:-.01em}
.adm .empty>p{font-size:14px}
.adm .empty>.row{margin-top:12px}
.adm .foot-note{margin-top:10px}
/* Скелет таблицы */
.adm-sk>div{display:flex;align-items:center;height:44px;border-bottom:1px solid var(--line)}
.adm-sk .skl{height:12px}

/* ───────── таблицы ───────── */
/* Колесо и свайп, дойдя до края коробки, листают страницу дальше: overscroll-behavior не задаём */
.adm-tw{max-height:520px;overflow:auto;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line)}
.adm-tw.short{max-height:360px}
.adm-tw.tall{max-height:640px}
.adm-t{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.35}
.adm-t th{position:sticky;top:0;z-index:var(--z-sticky);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);font-size:13px;font-weight:600;text-align:left;white-space:nowrap}
.adm-t td{height:44px;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-t tbody tr:last-child td{border-bottom:0}
.adm-t tfoot td{position:sticky;bottom:0;border-top:1px solid var(--line);border-bottom:0;background:var(--surface-2);font-weight:700}
.adm-t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.adm-t td small{display:block;margin-top:2px;font-size:13px;color:var(--ink-2)}
.adm-t td b{font-weight:700}
.adm-t .tg{vertical-align:1px}
.adm-t tr.on td{background:var(--brand-soft)}
.adm-in{color:var(--ok-text)}
.adm-rar{color:var(--rc-txt,var(--ink-2))}
.adm-t td small.adm-rar{color:var(--rc-txt,var(--ink-2));font-weight:700}
.adm-items span{display:block}
.adm-items span+span{margin-top:2px}
.adm-items small{display:inline;color:var(--ink-3)}
.adm-items .unk{color:var(--err-text);font-weight:600}
.adm-items .unk em{font-style:normal;font-weight:500;font-size:13px;color:var(--ink-2)}
.adm-prod{display:flex;align-items:center;gap:10px}
.adm-prod .slotic{width:32px;height:32px;border-radius:var(--r-sm)}

/* Имя человека: кнопка, ведёт во вкладку «Пользователи» */
.adm-who{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:32px;max-width:100%;padding:0;border:0;
  border-radius:var(--r-sm);background:none;color:var(--ink);text-align:left;cursor:pointer}
.adm-who b{font-weight:700;overflow-wrap:break-word}
.adm-who.inl{display:inline;min-height:0;font:inherit;color:inherit}
.adm-who.inl:hover{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px}
.adm-who small,.adm-t td .adm-who small{margin:0;font-size:13px;color:var(--ink-3);font-weight:500}
.adm-who:hover b{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px}
/* Короткий код и копирование */
.adm-code{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.adm-cp{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-3);cursor:pointer}
.adm-cp:hover{background:var(--surface-2);color:var(--ink)}
.adm-cp svg{width:16px;height:16px}

/* ───────── плитки чисел ───────── */
.adm-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.adm-kpi{min-width:0;padding:14px 16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge)}
.adm-kpi .k{font-size:14px;font-weight:600;color:var(--ink-2)}
.adm-kpi .v{margin-top:4px;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.adm-kpi .d{margin-top:4px;font-size:13px;color:var(--ink-3)}
.adm-kpi .c{margin-top:4px;font-size:13px;color:var(--ink-2)}
.adm-kpi .c.up{color:var(--ok-text)}

/* ───────── обзор ───────── */

/* Аналитика */
.adm-an-bar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 16px}
.adm-an-per{flex-wrap:wrap}
.adm-an-sel{display:grid;gap:4px;font-size:13px;color:var(--ink-2)}
.adm-an-sel .select{min-width:180px}
.adm-an-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:24px 0 12px}
.adm-an-h>h2{margin-right:auto}
.adm-an-h .mut{font-size:13px}
.adm-an-h+.adm-note{margin:-4px 0 12px}
.adm-an-charts,.adm-an-two{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
@media (min-width:1101px){.adm-an-charts,.adm-an-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.adm-an-card{min-width:0;padding:16px 18px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge)}
.adm-an-card h3{margin:0 0 8px;font-size:16px;font-weight:800}
.adm-chart{min-height:200px}
.adm-svg{display:block;max-width:100%;height:auto;overflow:visible}
.adm-svg text{fill:var(--ink-2);font:500 12px var(--f);font-variant-numeric:tabular-nums}
.adm-svg .g{stroke:var(--line);stroke-width:1}
.adm-svg .b1,.adm-svg .p1{fill:var(--brand-text)}
.adm-svg .p2{fill:var(--gold-text)}
.adm-svg .l1,.adm-svg .l2{fill:none;stroke-width:2.5;stroke-linejoin:round}
.adm-svg .l1{stroke:var(--brand-text)}
.adm-svg .l2{stroke:var(--gold-text);stroke-dasharray:6 4}
.adm-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 8px;font-size:13px;color:var(--ink-2)}
.adm-legend span::before{content:"";display:inline-block;width:14px;height:3px;margin:0 6px 3px 0;border-radius:2px;vertical-align:middle;background:var(--brand-text)}
.adm-legend .s2::before{background:repeating-linear-gradient(90deg,var(--gold-text) 0 6px,transparent 6px 9px)}
.adm-an-t{max-height:480px;background:var(--surface)}
.adm-an-t .adm-t{min-width:680px}
.adm-an-t .adm-t th{background:var(--surface)}
.adm-an-t .adm-t td:first-child{white-space:nowrap}
.adm-an-row{padding:10px 0;border-bottom:1px solid var(--line)}
.adm-an-row:last-child{border-bottom:0}
.adm-an-row .r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}
.adm-an-row .r b:last-child{white-space:nowrap}
.adm-an-row small{display:block;margin-top:2px;font-size:13px;color:var(--ink-3)}
.adm-bar{height:6px;margin:8px 0 4px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.adm-bar i{display:block;height:100%;border-radius:3px;background:var(--brand)}
.adm-defs{margin-top:16px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.adm-defs summary{display:inline-flex;align-items:center;min-height:40px;color:var(--brand-text);font-weight:700}
.adm-defs p{max-width:80ch;margin:0 0 8px}

/* ───────── пользователи ───────── */
.adm-users{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:1081px){
  .adm-users{grid-template-columns:minmax(0,1fr) 380px}
  .adm-ucard{position:sticky;top:calc(var(--hdr-h) + 16px)}
}
.adm-find{max-width:480px;margin-bottom:12px}
.adm-ph .adm-find{flex:0 1 260px;margin:0}
.adm-find.sm input{height:40px}
.adm-pick{display:flex;flex-direction:column;align-items:flex-start;min-height:36px;padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);text-align:left;cursor:pointer}
.adm-pick b{font-weight:700;overflow-wrap:anywhere}
.adm-pick small,.adm-t td .adm-pick small{margin:0;font-size:13px;color:var(--ink-3)}
.adm-pick:hover b{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px}
.adm-ut .adm-pick{display:inline-flex;vertical-align:middle;margin-right:4px}
.adm-contact{overflow-wrap:anywhere}
.adm-ucard{padding:18px 20px 20px}
.adm-uc-top{display:flex;align-items:center;gap:12px}
.adm-uc-top .av{width:48px;height:48px;font-size:20px}
.adm-uc-top h2{overflow-wrap:anywhere}
.adm-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:16px 0 0}
.adm-dl dt{font-size:13px;color:var(--ink-3)}
.adm-dl dd{margin:2px 0 0;font-size:14px;overflow-wrap:anywhere}
.adm-dl .adm-bal{font-size:24px;font-weight:800;color:var(--gold-text)}
.adm-dl>div:first-child{grid-column:1/-1}
.adm-adj{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.adm-sign{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-bottom:14px}
.adm-adj .fld+.fld{margin-top:14px}
.adm-after{margin:12px 0;font-size:14px;color:var(--ink-2)}
.adm-formerr:not([hidden]){margin:0 0 12px}
/* Окно подтверждения суммы */
.adm-sum{display:grid;gap:8px;margin:0}
.adm-sum>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.adm-sum>div:last-child{border-bottom:0}
.adm-sum dt{color:var(--ink-2)}
.adm-sum dd{margin:0;text-align:right;overflow-wrap:anywhere}
.adm-sum dd b{font-size:18px;font-weight:800}
.mbody .ferr:not([hidden]){margin-top:12px}

/* ───────── баннеры ───────── */
.adm-bnrow{display:flex;align-items:center;gap:16px;padding:12px;border-bottom:1px solid var(--line);border-radius:var(--r-md)}
.adm-bnrow:first-child{border-top:1px solid var(--line);border-radius:0}
.adm-bnrow.on{box-shadow:inset 0 0 0 2px var(--brand);border-bottom-color:transparent;border-radius:var(--r-md)}
.adm-bnthumb{flex:none;width:128px;aspect-ratio:16/7;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)}
.adm-bnthumb img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.adm-bninfo{flex:1;min-width:0}
.adm-bninfo h3{font-size:15px;font-weight:700;overflow-wrap:anywhere}
.adm-bninfo>p{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.adm-bninfo .adm-tags{margin:6px 0 0;font-size:13px}
.adm-bnact{display:flex;flex-wrap:wrap;gap:8px;flex:none}
.adm-bnedit{margin-top:24px;scroll-margin-top:calc(var(--hdr-h) + 16px)}
.adm-bnform{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 32px}
@media (min-width:1181px){
  .adm-bnform{grid-template-columns:minmax(300px,440px) minmax(0,1fr)}
  .adm-bnsave{grid-column:1/-1}
}
.adm-bnfields .fld+.fld,.adm-bnfields .fld+.adm-swrow,.adm-bnfields .adm-swrow+.fld,.adm-bnfields .fld+.adm-bnrow2{margin-top:14px}
.adm .fld>label .rule{font-variant-numeric:tabular-nums}
.adm .fld>label .rule.over{color:var(--err-text);font-weight:700}
.adm-swrow{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px}
.adm-swrow>label:first-child{font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.adm-swrow small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--ink-3)}
.adm-bnrow2{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:16px;align-items:start}
.adm-bnrow2 .adm-swrow{margin-top:26px}
.adm-bnpv{min-width:0}
.adm-pvl{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.adm-pvl~.adm-pvl{margin-top:16px}
.adm-bnsave .row{margin-top:4px}
.adm-bnsave .ferr:not([hidden]){margin:0 0 12px}

/* Превью баннера разметкой маркета (.hs), SPEC §6.1. Карточка всегда тёмная,
   затемнение и белый текст как на маркете в обеих темах. Свойства заданы полностью,
   чтобы правила маркета для телефона не меняли превью «на компьютере» и наоборот. */
.bnpv-d{width:100%;max-width:664px;height:248px;overflow:hidden}
.bnpv-m{width:320px;max-width:100%}
.adm-bnpv .hs{position:relative;overflow:hidden;isolation:isolate;margin:0;text-decoration:none;pointer-events:none;user-select:none}
.bnpv-m .hs{transform:none}
.bnpv-d .hs{display:block;flex:none;width:664px;height:248px;transform:scale(var(--pv-s,1));transform-origin:0 0;border-radius:var(--r-xl);background:#1A1426;color:var(--on-brand);box-shadow:none}
.bnpv-d .hs img.bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 32%}
.bnpv-d .hs::before{content:"";display:block;position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,8,24,0) 30%,rgba(14,8,24,.62) 56%,rgba(14,8,24,.92) 100%)}
.bnpv-d .hs .cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:row;align-items:flex-end;gap:16px;padding:20px 22px}
.adm-bnpv .hs .cap>div{flex:1;min-width:0}
.adm-bnpv .hs h2{margin:0;color:inherit;font-weight:800;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.bnpv-d .hs h2{font-size:25px;line-height:1.12}
.bnpv-d .hs p{display:-webkit-box;max-width:46ch;margin:6px 0 0;font-size:15px;line-height:1.35;color:rgba(255,255,255,.9);-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.bnpv-d .hs .b{flex:none;height:44px;padding:0 18px;font-size:15px}
.bnpv-m .hs{display:flex;flex-direction:column;width:auto;height:auto;border-radius:16px;background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-tile),inset 0 0 0 1px var(--tile-edge)}
html:not(.light) .bnpv-m .hs{box-shadow:inset 0 0 0 1px var(--line)}
.bnpv-m .hs img.bg{position:static;z-index:0;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;object-position:center 32%}
.bnpv-m .hs::before{display:none}
.bnpv-m .hs .cap{position:static;display:flex;flex:1;flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px 14px}
.bnpv-m .hs h2{font-size:17px;line-height:1.2}
.bnpv-m .hs p{display:none}
.bnpv-m .hs .b{align-self:flex-start;height:40px;padding:0 14px;font-size:14px}
.bnpv-m .hs.warn{background:var(--warn);color:var(--on-warn);box-shadow:none}
.bnpv-m .hs.warn .b.warnb{background:var(--on-warn);color:var(--on-brand)}

/* ───────── склад, боты ───────── */
.adm-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:12px 0}
.adm-tools .find{flex:1 1 240px;max-width:380px}
.adm-more{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:10px}
.adm-more .foot-note{margin:0}
.adm-audit-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 8px;font-size:14px}
.adm-list{margin:8px 0 0;padding-left:20px;font-size:14px;line-height:1.5}
.adm-list li+li{margin-top:4px}
.adm-list.bad{color:var(--err-text)}
.adm .mono{font-size:14px}
.ops-bi{scroll-margin-top:calc(var(--hdr-h) + 16px)}
.ops-bi-wait{margin-bottom:8px}

/* ───────── телефон ───────── */
@media (max-width:900px),(pointer:coarse){
  .adm-cp{width:40px;height:40px}
  .adm-who,.adm-pick{min-height:40px}
  .adm-ext{display:inline-flex;align-items:center;min-height:40px}
}
@media (max-width:760px){
  .adm-card,.adm-ucard{padding:14px 14px 16px}
  /* строки идут прямо по странице: коробка на весь экран отнимала прокрутку */
  .adm-tw,.adm-tw.short,.adm-tw.tall{max-height:none}
  .adm-refresh{margin-left:0;width:100%;justify-content:space-between}
  /* Таблицы «stack» становятся строками: главное слева, сумма справа, остальное ниже с подписью */
  .adm-t.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .adm-t.stack,.adm-t.stack tbody{display:block}
  .adm-t.stack tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .adm-t.stack tbody tr:last-child{border-bottom:0}
  .adm-t.stack td{display:block;height:auto;min-width:0;padding:0;border:0;text-align:left;white-space:normal}
  .adm-t.stack td.c-main{grid-column:1;grid-row:1}
  .adm-t.stack td.c-side{grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
  .adm-t.stack td:not(.c-main):not(.c-side){grid-column:1/-1}
  .adm-t.stack td[data-l]:not(.c-main):not(.c-side)::before{content:attr(data-l) ": ";color:var(--ink-3)}
  .adm-t.stack td.c-act .b{width:100%}
  .adm-bnrow{flex-wrap:wrap;align-items:flex-start;padding:12px 0}
  .adm-bnrow.on{padding:12px}
  .adm-bnthumb{width:96px}
  .adm-bnact{width:100%}
  .adm-bnact .b{flex:1 1 auto}
  .adm-ph .adm-find{flex:1 1 100%}
  .adm-an-per{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .adm-an-sel{flex:1 1 160px}
  .adm-an-sel .select{width:100%;min-width:0}
  .adm-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .adm-kpi{padding:12px}
  .adm-kpi .v{font-size:20px}
  .adm-bnrow2{grid-template-columns:minmax(0,1fr)}
  .adm-bnrow2 .adm-swrow{margin-top:0}
}
@media (max-width:440px){
  .adm-dl{grid-template-columns:minmax(0,1fr)}
  .adm-kpi .v{font-size:18px}
}

/* ───────── чаты и выдача Blox Fruits (13-admin.js + ChatView из 17-chat.js) ─────────
   ПК: список слева, переписка справа, обе колонки на высоту окна со своей прокруткой.
   Телефон: по очереди (.has-sel), переписка на высоту экрана над нижней панелью. */
.ach{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:16px;align-items:stretch;
  height:calc(var(--visible-height,100dvh) - var(--hdr-h) - 196px);min-height:520px}   /* под шапкой, заголовком и вкладками: поле ввода видно без прокрутки */
.ach>.panel{display:flex;flex-direction:column;min-height:0;min-width:0;margin:0;padding:0;overflow:hidden}
.ach-tools{flex:none;display:flex;flex-direction:column;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.ach-tools .seg{width:100%}
.ach-tools .seg button{flex:1;padding:0 8px}
.ach-tools .adm-find{width:100%}
.ach-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ach-list>.adm-empty,.ach-list>.empty{padding:16px}
.ach-list>.adm-sk{padding:0 16px}
.ach-rows,.abq-rows{margin:0;padding:0;list-style:none}
.ach-rows li+li .ach-row,.abq-rows li+li{box-shadow:inset 0 1px 0 var(--line)}
.ach-row{display:grid;gap:4px;width:100%;padding:11px 16px 12px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.ach-row:hover{background:var(--surface-2)}
.ach-row.on{background:var(--brand-soft)}
.ach-row:focus-visible{outline-offset:-2px;border-radius:var(--r-sm)}
.ach-l1{display:flex;align-items:baseline;gap:8px;min-width:0}
.ach-l1 b{flex:1;min-width:0;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ach-tm{flex:none;font-size:13px;color:var(--ink-3)}
.ach-l2{display:flex;align-items:center;gap:8px;min-width:0}
.ach-l2 .tg{flex:none;max-width:48%;overflow:hidden;text-overflow:ellipsis}
.ach-pv{flex:1;min-width:0;font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ach-row.unread .ach-pv{color:var(--ink);font-weight:600}
.ach-l3{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-height:20px}
.ach-wait{font-size:13px;font-weight:700;color:var(--brand-text)}
.ach-closed{font-size:13px;color:var(--ink-3)}
.ach-muted{font-size:13px;font-weight:700;color:var(--warn-text)}
.ach-more{margin:8px 16px 16px}
.ach-none{margin:auto;max-width:380px;padding:24px;text-align:center}
.ach-none h3{font-size:20px;font-weight:800;letter-spacing:-.015em}
.ach-none p{margin-top:8px;font-size:14px;color:var(--ink-2)}
.ach-head{flex:none;display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line)}
.ach-head>.b{flex:none}
.ach-back{display:none}
.ach-ht{flex:1;min-width:0}
.ach-ht h3{font-size:18px;font-weight:800;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ach-ht h3:focus{outline:none}
.ach-ht .adm-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ach-body{flex:1;min-height:0;display:flex;flex-direction:column}
.ach-chat{flex:1;min-height:0;display:flex}
.ach-side{order:-1;flex:none;max-height:45%;overflow-y:auto;border-bottom:1px solid var(--line)}   /* карточка над перепиской */
.ach-side:empty{display:none}
.ach-card>summary{display:flex;align-items:center;min-height:44px;padding:0 18px;font-size:14px;font-weight:700;color:var(--ink-2)}
.ach-card>summary:hover{color:var(--ink)}
.ach-card>summary:focus-visible{outline-offset:-2px}
.ach-card[open]{padding-bottom:14px}
.ach-card>:not(summary){margin-left:18px;margin-right:18px}
.ach-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:2px 18px 6px;font-size:14px}
.ach-dl>div{display:contents}
.ach-dl dt{color:var(--ink-3)}
.ach-dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ach-h4{margin-top:12px;margin-bottom:4px;font-size:14px;font-weight:800}
.ach-h4 small{margin-left:4px;color:var(--ink-3);font-weight:600}
.ach-ords{margin:0;padding:0;list-style:none}
.ach-ords a{display:flex;flex-direction:column;padding:6px 0;color:var(--ink);text-decoration:none;font-size:14px}
.ach-ords a:hover span{color:var(--brand-text);text-decoration:underline}
.ach-ords small{color:var(--ink-2)}
.ach-ords .linkb{min-height:36px;font-size:14px;text-align:left}
/* сводка о человеке в карточке чата */
.ach-sum{margin-top:2px;margin-bottom:8px;font-size:14px;font-weight:700}
.ach-line{margin-top:0;margin-bottom:4px;font-size:14px;color:var(--ink-2)}
.ach-inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;margin:6px 0 0;padding:0;list-style:none}
.ach-inv li{display:flex;align-items:center;gap:6px;min-width:0;min-height:36px;padding:3px 8px 3px 3px;border-radius:var(--r-md);background:var(--surface-2);font-size:13px}
.ach-inv img{flex:none;width:28px;height:28px;object-fit:contain}
.ach-inv span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ach-inv b{flex:none;margin-left:auto;color:var(--ink-2);font-weight:700}
.ach-sess li{display:flex;flex-direction:column;padding:6px 0;font-size:14px}
/* ограничение отправки: строка «Сообщения» в карточке, выбор срока с подтверждением */
.ach-dl dd.ach-mutedd{color:var(--warn-text);font-weight:700}
.ach-mutel{min-height:36px;font-size:14px}
.ach-mute{display:grid;gap:8px;margin-top:6px;margin-bottom:4px;padding:12px;border-radius:var(--r-md);background:var(--surface-2)}
.ach-mute-h{margin:0;font-size:14px;font-weight:800}
.ach-mute .seg{width:100%;background:var(--surface-3)}
.ach-mute .seg button{flex:1;padding:0 6px;white-space:nowrap}
.ach-mute .adm-note{font-size:13px;line-height:1.45}
.ach-macts{display:flex;flex-wrap:wrap;gap:8px}
.ach-macts .b{flex:1 1 auto}
@media (min-width:1400px){
  .ach-body{display:grid;grid-template-columns:minmax(0,1fr) 300px}
  .ach-side{max-height:none;border-bottom:0;border-left:1px solid var(--line)}
  .ach-side{grid-column:2;grid-row:1}
  .ach-chat{grid-column:1;grid-row:1}
}
/* очередь выдачи */
.abq-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:start;padding:12px 16px}
.abq-row:hover{background:var(--surface-2)}
.abq-row.on{background:var(--brand-soft)}
.abq-row.dispute{box-shadow:inset 3px 0 0 var(--err)}
.abq-rows li+li.dispute{box-shadow:inset 3px 0 0 var(--err),inset 0 1px 0 var(--line)}
.ach .abq-img{width:48px;height:48px;border-radius:var(--r-md)}
.abq-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.abq-l1{display:flex;align-items:baseline;gap:10px;min-width:0}
.abq-pick{flex:1;min-width:0;padding:0;border:0;background:none;color:var(--ink);font-size:15px;font-weight:700;text-align:left;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abq-pick::after{content:"";position:absolute;inset:0;border-radius:var(--r-sm)}
.abq-pick:focus-visible{outline:none}
.abq-pick:focus-visible::after{outline:2px solid var(--focus);outline-offset:-2px}
.abq-amt{flex:none;font-size:14px;font-weight:800}
.abq-rc{display:flex;align-items:center;gap:2px;min-width:0;font-size:14px;color:var(--ink-2)}
.abq-rc b{min-width:0;margin-left:4px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abq-row .adm-cp,.abq-row a{position:relative;z-index:1}
.abq-l3{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:2px;font-size:13px}
.abq-wait{color:var(--ink-3);white-space:nowrap}
.abq-buyer{min-width:0;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abq-chat{border-top:1px solid var(--line)}
/* группы очереди: «Ждут менеджера» и «Ждут покупателя»; «Показаны 500 из N» — над ними */
.abq-gh{display:flex;align-items:baseline;gap:6px;margin:0;padding:10px 16px 8px;background:var(--surface);
  border-bottom:1px solid var(--line);font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink-2)}
.abq-gh span{color:var(--ink-3);font-weight:700}
.abq-rows+.abq-gh{border-top:1px solid var(--line)}
.abq-total{padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px}
@media (min-width:901px){ .abq-gh{position:sticky;top:0;z-index:2} }   /* на ПК список прокручивается сам: заголовок группы держится сверху */
/* шапка заказа компактная: кнопки рядом с названием (переносятся, если не влезают), данные строкой,
   подсказка и история под «Подробнее» — переписке остаётся высота даже на ноутбуке */
#abq-head{flex:none;padding:0 0 10px}
#abq-head .ach-head{flex-wrap:wrap;row-gap:8px;border-bottom:0;padding-bottom:2px}
.abq-hd .ach-ht{flex:1 1 160px}
.abq-hd .adm-sub{display:flex;align-items:center;gap:8px}
.abq-acts{display:flex;flex-wrap:wrap;gap:8px;flex:0 1 auto}
.abq-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;margin:0 18px;padding:0;list-style:none;font-size:14px;line-height:1.5}
.abq-meta li{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-width:0}
.abq-meta small{color:var(--ink-3)}
.abq-nick{font-size:15px;font-weight:800;overflow-wrap:anywhere}
.abq-rbx{font-size:13px}
.abq-why{max-height:4.6em;margin:8px 18px 0;padding:6px 10px;border-radius:var(--r-md);background:var(--err-soft);font-size:14px;line-height:1.45;
  white-space:pre-wrap;overflow-wrap:anywhere;overflow-y:auto}
.abq-why b{color:var(--err-text)}
.abq-more{margin:2px 18px 0}
.abq-more>summary{display:flex;align-items:center;min-height:32px;font-size:14px;font-weight:700;color:var(--ink-2);cursor:pointer;border-radius:var(--r-sm)}
.abq-more>summary:hover{color:var(--ink)}
.abq-more[open]{max-height:min(260px,32vh);overflow-y:auto;overscroll-behavior:contain}
.abq-note{margin:0 0 6px}
.abq-last{margin:0 0 6px;font-size:14px;overflow-wrap:anywhere}
.abq-events{margin:0}
@media (max-width:1240px) and (min-width:901px){
  .ach{grid-template-columns:minmax(280px,320px) minmax(0,1fr)}
}
@media (max-width:900px){
  .ach{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
  .ach.has-sel>.ach-in{display:none}
  .ach:not(.has-sel)>.ach-conv{display:none}
  .ach-list{overflow:visible}
  .ach>.ach-conv{height:calc(var(--visible-height,100dvh) - var(--hdr-h) - var(--tabbar-h) - 24px);min-height:420px}
  .abq>.ach-conv{height:auto;min-height:0}
  .abq-chat{height:calc(var(--visible-height,100dvh) - var(--hdr-h) - var(--tabbar-h) - 40px);min-height:400px;flex:none}
  .ach-back{display:inline-grid}
  .ach-head{padding-left:6px}
  .ach-head>.b{padding:0 12px}
  /* телефон: назад, фото, название и «Заказ» — одной строкой, кнопки статуса — строкой ниже на всю ширину */
  #abq-head .abq-hd .ach-ht{flex:1 1 0;min-width:0}
  .abq-hd .abq-ord{order:1}
  .abq-acts{order:2;flex:1 1 100%}
  .abq-acts .b{flex:1 1 auto}
}
@media (max-width:440px){
  .abq-row{grid-template-columns:44px minmax(0,1fr);gap:10px}
  .ach .abq-img{width:44px;height:44px}
  .ach-head{flex-wrap:wrap}
  .ach-head .ach-ht{flex-basis:calc(100% - 60px)}
}
.adm-ref-form{display:grid;grid-template-columns:minmax(160px,2fr) minmax(140px,1fr) minmax(180px,1fr);gap:16px;align-items:start}
.adm-ref-form>.b{grid-column:1/-1;justify-self:start}
.adm-ref-form .fld{min-width:0;margin:0}
.adm-ref-actions{display:flex;align-items:center;gap:8px}
.adm-ref-actions input{flex:1;min-width:0}
.adm-ref-code{display:block;overflow-wrap:anywhere}
#adm-ref-created{margin-top:16px}
#adm-ref-created>label{display:block;margin-bottom:8px}
#adm-ref-report{margin-top:24px;min-width:0}
@media(max-width:700px){.adm-ref-form{grid-template-columns:1fr}.adm-ref-form>.b{width:100%}#adm-ref-created .adm-ref-actions{flex-wrap:wrap}#adm-ref-created .adm-ref-actions input{flex-basis:100%}}