/* ───────────────────────────────────────────────────────────────────────────
   SpellBook · СТИЛИ МАРКЕТПЛЕЙСА
   КУДА КЛАСТЬ:  /css/marketplace.css   (подключается из includes/marketplace_head.php)
   Монохром + две темы (dark/light через [data-theme]). Извлечено из инлайн-<style>.
   Кэш-бастинг: при изменениях бамп версии в <link ... marketplace.css?v=N>.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Метрически согласованные фоллбэки шрифтов (анти-CLS) ──────────────────────
   Пока грузятся веб-шрифты, текст рисуется Arial'ом с подогнанными метриками
   (size-adjust / ascent / descent), поэтому занимает РОВНО столько же места, сколько
   Exo 2 / Chakra Petch. Когда веб-шрифт догрузился — подмена БЕЗ переверстки → текст
   не дёргает вёрстку (CLS). Метрики сгенерированы из @capsizecss/metrics. */
@font-face {
  font-family: "Exo 2 Fallback";
  src: local('Arial'), local('ArialMT');
  font-display: swap;
  ascent-override: 97.8802%;
  descent-override: 19.6936%;
  line-gap-override: 0%;
  size-adjust: 102.0635%;
}
@font-face {
  font-family: "Chakra Petch Fallback";
  src: local('Arial'), local('ArialMT');
  font-display: swap;
  ascent-override: 96.769%;
  descent-override: 30.0452%;
  line-gap-override: 0%;
  size-adjust: 102.5122%;
}

/* ════════════════════════════════════════════════════════════════════════
   БЕСШОВНАЯ НАВИГАЦИЯ 2026 (SOTA): Cross-document View Transitions.
   Даёт плавный переход между ОБЫЧНЫМИ серверными страницами — без SPA.
   Работает в паре со Speculation Rules в <head> (мгновенная подготовка страниц).
   Чтобы переходы работали, ЭТОТ же CSS (или хотя бы этот блок) должен быть
   подключён на ВСЕХ страницах сайта. SEO при этом остаётся нативным.
   ──────────────────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

/* Persistent shell: хедер и сайдбар не «мигают» при переходе — они морфятся.
   view-transition-name должен быть УНИКАЛЕН в пределах страницы. */
.apphdr { view-transition-name: app-header; }
.appnav { view-transition-name: app-sidebar; }

/* Контент кроссфейдится мягко. */
::view-transition-old(root) { animation-duration: .18s; }
::view-transition-new(root) { animation-duration: .22s; }

/* Уважение к настройке «меньше движения» (доступность). */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ── Сайдбар при переходе между страницами: убираем «зум» ──────────────────────
   На десктопе сайдбар разворачивается по ховеру (64→248px). Если кликнуть пункт меню
   при наведённом (развёрнутом) сайдбаре, view-transition морфит развёрнутый снимок в
   свёрнутый на новой странице → визуально это масштабирование (зум). Поэтому прямо
   перед снимком (событие pageswap в marketplace.js) «пиним» сайдбар в свёрнутом виде:
   снимок = свёрнутый = как на новой странице → морфить нечего, зум уходит, остаётся
   чистый кроссфейд. Только для устройств с ховером (десктоп) — на мобиле сайдбар-drawer. */
@media (hover: hover) and (pointer: fine) {
  .appnav.vt-pin{ width:var(--rail-w) !important; box-shadow:none !important; transition:none !important; }
  .appnav.vt-pin .nav-head{ justify-content:center !important; padding:0 !important; }
  .appnav.vt-pin .nav-logo-sq{ display:block !important; }
  .appnav.vt-pin .nav-logo-h{ display:none !important; }
  .appnav.vt-pin .ni-tx{ opacity:0 !important; }
}

/* ===== Токены (зеркало /css/market.css - монохром + две темы) ===== */
:root, body{
  --void:#0e0e10; --canvas:#141416; --surface:#1c1c1f; --raised:#26262a; --wash:#303034;
  --modal:#101011; --tip-bg:#2a2a2e; --tip-text:#ececec; --tip-border:rgba(255,255,255,0.1);
  --rag-fg:#8fb3d9; --rag-bg:rgba(120,162,205,0.14); --rag-bd:rgba(120,162,205,0.34); --ag-fg:#c2aae8; --ag-bg:rgba(160,128,210,0.15); --ag-bd:rgba(160,128,210,0.36);
  --text:#f0f0f0; --text-2:#9a9a9a; --text-3:#6a6a6a; --text-4:#4f4f4f;
  --ring:rgba(255,255,255,0.08); --line:rgba(255,255,255,0.06); --line-2:rgba(255,255,255,0.14);
  --btn:#f0f0f0; --btn-hover:#fff; --btn-text:#0d0d0d;
  --verified:#3b9eff; --pos:#2ebd85; --neg:#e5484d;
  /* «pro»/апселл: тёплое золото — единственный цветной акцент в монохроме (не фиолетовый). Тёмная тема. */
  --pro:#f5b301; --pro-fg:#fbbf24; --pro-text:#0d0d0d; --pro-glow:rgba(245,179,1,0.35); --pro-grad:linear-gradient(180deg,#fcd34d 0%,#f5b301 100%);
  --skeleton:#202020; --skeleton-sheen:rgba(255,255,255,0.06);
  --font-display:"Chakra Petch","Chakra Petch Fallback",system-ui,sans-serif; --font-body:"Exo 2","Exo 2 Fallback",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px;
  --ease:cubic-bezier(0.4,0,0.2,1); --dur:200ms; --gutter:12px;
  color-scheme:dark;
}
[data-theme="light"]{
  --void:#fff; --canvas:#f6f6f7; --surface:#fff; --raised:#f0f0f1; --wash:#e8e8ea;
  --modal:#ffffff; --tip-bg:#ffffff; --tip-text:#1a1a1a; --tip-border:#e3e3e5;
  --rag-fg:#3a6da3; --rag-bg:rgba(58,109,163,0.1); --rag-bd:rgba(58,109,163,0.32); --ag-fg:#6a4ea3; --ag-bg:rgba(106,78,163,0.1); --ag-bd:rgba(106,78,163,0.32);
  --text:#18181b; --text-2:#5c5c66; --text-3:#8a8a93; --text-4:#a8a8b0;
  --ring:rgba(0,0,0,0.10); --line:rgba(0,0,0,0.07); --line-2:rgba(0,0,0,0.16);
  --btn:#18181b; --btn-hover:#000; --btn-text:#fff;
  --verified:#2b8aef; --pos:#1a9e6b; --neg:#d83a3f;
  /* «pro»/апселл на светлой теме: янтарь глубже, чтобы читался на белом (яркое золото на белом теряется). */
  --pro:#d97706; --pro-fg:#b45309; --pro-text:#0d0d0d; --pro-glow:rgba(217,119,6,0.28); --pro-grad:linear-gradient(180deg,#f59e0b 0%,#d97706 100%);
  --skeleton:#e7e7ea; --skeleton-sheen:rgba(255,255,255,0.6);
  color-scheme:light;
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }
/* мгновенное переключение темы - гасим все переходы на момент свапа */
.no-anim, .no-anim *{ transition:none !important; }

/* iOS зумит экран при фокусе на инпут, только если его шрифт < 16px. Форсим 16px на телефонах для всех
   текстовых полей (исключая крупные OTP-боксы и поле модалки поиска — им размер важен и они и так >=16px).
   Специфичность из :not() + !important гарантированно бьёт классовые/ID-правила (.ex-searchbar input и т.п.). */
@media (max-width:900px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.am-otp-box):not(.sm-field),
  textarea, select{ font-size:16px !important; }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--canvas); }
.page{ min-height:100vh; background:var(--canvas); padding-top:var(--hdr-h); }
body{ color:var(--text); font-family:var(--font-body); font-size:0.875rem; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh; }
.mkt-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; color:var(--text); letter-spacing:-0.01em; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:2200px; margin:0 auto; padding:14px var(--wrap-px, clamp(16px,2.2vw,44px)) 80px; }
/* market.php: вдвое меньший отступ контента от краёв на десктопе (мобильный оверрайд ниже всё равно ставит 14px) */
.mkt-market{ --wrap-px: clamp(8px,1.1vw,22px); }

/* verified badge (печать + белый чек) */
.verified{ display:inline-block; width:15px; height:15px; flex-shrink:0; vertical-align:middle; object-fit:contain; position:relative; top:0.5px; }

/* skeleton */
.sk{ position:relative; overflow:hidden; background:var(--skeleton); border-radius:var(--r-xs); }
.sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, var(--skeleton-sheen), transparent); animation:shimmer 1.6s ease-in-out infinite; }
@keyframes shimmer{ 100%{ transform:translateX(100%); } }

/* ===== Превью-карточка ассистента (hover на tcard, только десктоп) — широкий прямоугольник ФИКС. размера, обе темы ===== */
.cardprev{ position:fixed; left:0; top:0; z-index:150; display:flex; gap:15px; width:470px; height:194px; max-width:calc(100vw - 20px); padding:16px; background:var(--canvas); border:1px solid var(--line); border-radius:4px; box-shadow:0 6px 20px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.09); opacity:0; transform:translateY(7px) scale(.985); transition:opacity .15s var(--ease), transform .15s var(--ease); pointer-events:none; overflow:hidden; }
.cardprev.show{ opacity:1; transform:translateY(0) scale(1); }
.cardprev .cp-av{ width:162px; height:162px; flex-shrink:0; border-radius:4px; overflow:hidden; background:var(--raised); border:1px solid var(--ring); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:2.6rem; color:var(--text-3); }
.cardprev .cp-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.cardprev .cp-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cardprev .cp-name{ display:flex; align-items:center; gap:6px; min-width:0; font-family:var(--font-display); font-weight:700; font-size:1.0625rem; line-height:1.2; color:var(--text); }
.cardprev .cp-nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cardprev .cp-name .verified{ flex-shrink:0; width:15px; height:15px; }
.cardprev .cp-author{ margin-top:4px; font-size:0.8125rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cardprev .cp-stats{ display:flex; align-items:center; gap:14px; margin-top:11px; }
.cardprev .cp-stat{ display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:0.75rem; color:var(--text-2); }
.cardprev .cp-stat i{ font-size:0.8125rem; line-height:1; color:var(--text-3); }
.cardprev .cp-cat{ margin-left:auto; max-width:44%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 10px; border-radius:3px; border:1px solid var(--line); color:var(--text-2); font-size:0.6875rem; font-weight:500; flex-shrink:0; }
.cardprev .cp-desc{ flex:1 1 auto; min-height:0; margin-top:12px; font-size:0.8125rem; line-height:1.45; color:var(--text-2); overflow:hidden; }
@media (hover: none), (pointer: coarse){ .cardprev{ display:none !important; } }
@media (prefers-reduced-motion: reduce){ .cardprev{ transition:opacity .12s linear; transform:none; } .cardprev.show{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .sk::after{ animation:none; } }
/* скелетоны: видны во время загрузки (body.loading), скрыты когда контент готов */
body:not(.loading) .skel-only{ display:none !important; }
body.loading .load-only{ display:none !important; }
/* кросс-фейд: контент мягко проявляется единым файлом после загрузки */
body:not(.loading) .load-only{ animation:mkt-reveal .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes mkt-reveal{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ body:not(.loading) .load-only{ animation:none; } }
/* иконки в пилюлях категорий и в аватарах строк/подборок */
.pill i{ font-size:14px; line-height:1; }
.avatar i{ font-size:1.2rem; line-height:1; color:var(--text-2); }
.sm-static{ display:flex; align-items:center; font-family:var(--font-display); font-weight:600; font-size:0.9375rem; color:var(--text); cursor:default; min-width:0; }

/* context strip (контролы превью) */
.ctx{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin-bottom:14px; }
.ctx .tag{ font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-4); }
.ctrl{ display:flex; gap:8px; }
.btn-sm{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:var(--r-sm); border:1px solid var(--ring); background:var(--surface); color:var(--text-2); font-family:var(--font-display); font-weight:500; font-size:0.75rem; cursor:pointer; transition:all var(--dur); }
.btn-sm:hover{ color:var(--text); border-color:var(--line-2); }
.btn-sm svg{ width:14px; height:14px; }
.ic-sun,.ic-moon{ display:none; }
[data-theme="dark"] .ic-sun{ display:inline-flex; }
[data-theme="light"] .ic-moon{ display:inline-flex; }

/* поиск - широкая отдельная строка */
.searchbar{ display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--ring); border-radius:var(--r-sm); padding:9px 14px; width:min(400px, 100%); flex-shrink:1; margin:0; cursor:pointer; transition:border-color var(--dur); }
.searchbar:focus-within{ border-color:var(--line-2); }
.searchbar svg{ width:18px; height:18px; color:var(--text-4); flex-shrink:0; }
.searchbar input{ flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font-family:var(--font-body); font-size:0.9375rem; cursor:pointer; }
.searchbar input::placeholder{ color:var(--text-4); }
/* Шапка + левый сайдбар */
:root{ --hdr-h:58px; --rail-w:52px; --rail-w-open:248px; }

/* ── сайдбар: на всю высоту, свёрнут; раскрывается по наведению ── */
.appnav{ position:fixed; top:0; left:0; bottom:0; width:var(--rail-w); z-index:135; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:0 0 8px; overflow:hidden; transition:width 0.22s cubic-bezier(0.22,1,0.36,1); }
.appnav:hover{ width:var(--rail-w-open); box-shadow:18px 0 50px rgba(0,0,0,0.34); }
.nav-head{ display:flex; align-items:center; height:var(--hdr-h); padding:0; justify-content:center; flex-shrink:0; overflow:hidden; }
.appnav:hover .nav-head{ justify-content:flex-start; padding:0 18px; }
.nav-brand{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.nav-logo-sq{ display:block; width:34px; height:34px; flex-shrink:0; background-color:#fff; -webkit-mask:url("/images/sb-logosvg.svg") center / contain no-repeat; mask:url("/images/sb-logosvg.svg") center / contain no-repeat; }
[data-theme="light"] .nav-logo-sq{ background-color:#141416; }
.nav-logo-h{ display:none; height:27px; width:auto; max-width:172px; }
.appnav:hover .nav-logo-sq{ display:none; }
.appnav:hover .nav-logo-h.nl-dark{ display:block; }
[data-theme="light"] .appnav:hover .nav-logo-h.nl-dark{ display:none; }
[data-theme="light"] .appnav:hover .nav-logo-h.nl-light{ display:block; }
.nav-close{ display:none; }

.nav-list{ display:flex; flex-direction:column; gap:2px; padding:8px 9px; flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.nav-list::-webkit-scrollbar{ display:none; }
.nav-foot{ padding:4px 10px 2px; }
.nav-item{ display:flex; align-items:center; gap:12px; height:40px; padding:0 6px; border-radius:var(--r-sm); text-decoration:none; color:var(--text-2); font-family:var(--font-display); font-weight:500; font-size:0.9375rem; white-space:nowrap; border:none; background:none; cursor:pointer; width:100%; transition:background var(--dur), color var(--dur); }
.nav-item:hover{ background:var(--raised); color:var(--text); }
.nav-item.is-active{ background:var(--raised); color:var(--text); }
.ni-ic{ width:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.ni-tx{ opacity:0; transition:opacity 0.16s; min-width:0; overflow:hidden; }
.appnav:hover .ni-tx{ opacity:1; }
.nav-sep{ height:1px; background:var(--line); margin:8px 4px; }
.nav-theme{ position:relative; }
.nav-switch{ margin-left:auto; width:38px; height:22px; border-radius:11px; background:var(--ring); position:relative; flex-shrink:0; transition:background var(--dur), opacity 0.16s; opacity:0; }
.appnav:hover .nav-switch{ opacity:1; }
.ns-dot{ position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform var(--dur); box-shadow:0 1px 3px rgba(0,0,0,0.3); }
[data-theme="light"] .nav-switch{ background:#3ea66f; }
[data-theme="light"] .ns-dot{ transform:translateX(16px); }
.nav-scrim{ position:fixed; inset:0; z-index:115; background:rgba(0,0,0,0.5); opacity:0; pointer-events:none; transition:opacity 0.22s; }
.appnav:hover ~ .nav-scrim{ opacity:1; }

/* ── шапка: справа от свёрнутой рейки ── */
.apphdr{ position:fixed; top:0; left:var(--rail-w); right:0; height:var(--hdr-h); z-index:130; display:flex; align-items:center; gap:10px; padding:0 var(--wrap-px, clamp(16px,2.2vw,44px)); background:var(--surface); border-bottom:1px solid var(--line); }
.hdr-burger, .hdr-sicon{ display:none; }
.hdr-logo{ display:none; align-items:center; flex-shrink:0; text-decoration:none; }
.hdr-logo img{ height:26px; width:auto; object-fit:contain; }
.hdr-logo .hl-light{ display:none; }
[data-theme="light"] .hdr-logo .hl-dark{ display:none; }
[data-theme="light"] .hdr-logo .hl-light{ display:block; }
.hdr-sb{ width:min(440px, 42vw); margin-left:6px; }
.hdr-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
/* Апселл подписки в шапке: у бесплатника «Купить подписку» (заливка), у платного «Обновить» (контур).
   На десктопе стоит первым в .hdr-actions → визуально слева от колокольчика (иконка поиска скрыта). */
/* Апселл (Подписка/Обновить — гость, free и платный) — единый призрачный золотой стиль (понравился на
   «Обновить» у партнёра): лёгкая золотая заливка + золотой контур + золотой текст. Тема-нейтрально через --pro. */
.hdr-upsell{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 15px; margin-right:6px; border-radius:10px; font-family:var(--font-display); font-weight:600; font-size:0.86rem; line-height:1; white-space:nowrap; text-decoration:none; background:color-mix(in srgb, var(--pro) 12%, transparent); color:var(--pro-fg); border:1px solid color-mix(in srgb, var(--pro) 48%, transparent); transition:background 0.15s var(--ease), border-color 0.15s var(--ease); }
.hdr-upsell:hover{ background:color-mix(in srgb, var(--pro) 18%, transparent); border-color:color-mix(in srgb, var(--pro) 62%, transparent); }
.hdr-upsell:focus-visible{ outline:2px solid var(--pro); outline-offset:2px; }
.hdr-upsell i{ font-size:1.05em; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
/* .hdr-upsell-up (платный «Обновить») наследует базовый призрачный стиль — отдельные правила больше не нужны. */
/* «Вход» — тихая вторичная кнопка (контур), чтобы единственным ярким акцентом в шапке была золотая
   «Подписка» (как у авторизованного: золото + тихие иконки). Тема-нейтральна через токены. */
.hdr-login{ display:inline-flex; align-items:center; height:38px; padding:0 20px; border-radius:var(--r-sm); background:transparent; color:var(--text); font-family:var(--font-display); font-weight:600; font-size:0.9375rem; text-decoration:none; border:1px solid var(--line-2); transition:background var(--dur), border-color var(--dur); white-space:nowrap; }
.hdr-login:hover{ background:var(--wash); border-color:var(--ring); }
/* ── Тарифные цвета (ободок аватара + бейдж) + ховер-токен ── */
:root{ --tier-free:rgba(255,255,255,0.22); --tier-pro:#3b9eff; --tier-premium:#4ade80; --tier-partner:#f4c63d; --hdr-hover:rgba(255,255,255,0.05); }
[data-theme="light"]{ --tier-free:rgba(0,0,0,0.18); --hdr-hover:rgba(0,0,0,0.045); }

/* ── Аватар-кнопка профиля с ободком по тарифу ── */
.hdr-acct-wrap, .hdr-bell-wrap{ position:relative; display:flex; align-items:center; }
.hdr-acct{ display:flex; align-items:center; gap:5px; background:none; border:none; padding:0; cursor:pointer; flex-shrink:0; }
.hdr-acct-av{ position:relative; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--raised); color:var(--text); font-family:var(--font-display); font-weight:600; font-size:0.85rem; flex-shrink:0; transition:box-shadow var(--dur) var(--ease); }
.hdr-acct-av img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.hdr-acct-dot{ position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:var(--neg); border:2px solid var(--surface); display:none; }
.hdr-acct-chev{ color:var(--text-3); font-size:0.7rem; flex-shrink:0; -webkit-text-stroke:0.6px currentColor; transition:transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.hdr-acct[aria-expanded="true"] .hdr-acct-chev{ transform:rotate(180deg); color:var(--text-2); }
.hdr-acct[data-tier="free"]    .hdr-acct-av{ box-shadow:0 0 0 2px var(--tier-free); }
.hdr-acct[data-tier="pro"]     .hdr-acct-av{ box-shadow:0 0 0 2px color-mix(in srgb, var(--tier-pro) 75%, transparent); }
.hdr-acct[data-tier="premium"] .hdr-acct-av{ box-shadow:0 0 0 2px color-mix(in srgb, var(--tier-premium) 75%, transparent); }
.hdr-acct[data-tier="partner"] .hdr-acct-av{ box-shadow:0 0 0 2px color-mix(in srgb, var(--tier-partner) 75%, transparent); }

/* ── Колокольчик ── */
.hdr-bell{ position:relative; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--text-2); border-radius:var(--r-md); cursor:pointer; flex-shrink:0; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.hdr-bell:hover{ background:var(--raised); color:var(--text); }
.hdr-bell svg{ width:20px; height:20px; }
.hdr-bell-badge{ position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px; display:flex; align-items:center; justify-content:center; background:var(--neg); color:#fff; font-family:var(--font-body); font-size:0.62rem; font-weight:700; line-height:1; border-radius:9px; border:2px solid var(--surface); pointer-events:none; }
.hdr-bell-badge[hidden]{ display:none; }

/* ── Общий контейнер выпадашек ── */
.hdr-dd{ position:absolute; top:calc(100% + 10px); right:0; background:var(--void); border:1px solid var(--line); border-radius:8px; padding:0; overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-8px) scale(0.97); transform-origin:top right; transition:opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s; z-index:200; box-shadow:0 16px 48px rgba(0,0,0,0.55); }
.hdr-dd.open{ opacity:1; visibility:visible; transform:none; }

/* ── Меню профиля ── */
.hdr-acct-dd{ width:min(236px, calc(100vw - 24px)); }
.hdr-acct-card{ display:flex; align-items:center; gap:11px; padding:13px 15px; text-decoration:none; transition:background 0.15s var(--ease); }
.hdr-acct-card:hover{ background:var(--hdr-hover); }
.hdr-acct-card-av{ width:30px; height:30px; border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--wash); color:var(--text); font-family:var(--font-display); font-weight:600; font-size:0.78rem; }
.hdr-acct-card-av img{ width:100%; height:100%; object-fit:cover; }
.hdr-acct-card-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.hdr-acct-card-arr{ color:var(--text-4); font-size:0.85rem; flex-shrink:0; transition:color 0.15s var(--ease); }
.hdr-acct-card:hover .hdr-acct-card-arr{ color:var(--text-2); }
.hdr-acct-name{ color:var(--text); font-family:var(--font-display); font-weight:600; font-size:0.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hdr-tier{ font-family:var(--font-body); font-weight:600; font-size:0.8rem; line-height:1.2; }
.hdr-tier-free{ color:var(--text-3); }
.hdr-tier-pro{ color:#3b9eff; }
.hdr-tier-premium{ color:#36c97a; }
.hdr-tier-partner{ color:#e0b13a; }

.hdr-dd-sep{ height:1px; background:var(--line); margin:0; }
.hdr-dd-item{ display:flex; align-items:center; gap:13px; padding:11px 15px; color:var(--text); text-decoration:none; font-family:var(--font-body); font-size:0.925rem; transition:background 0.14s var(--ease), color 0.14s var(--ease); }
.hdr-dd-item:hover{ background:var(--hdr-hover); color:var(--text); }
.hdr-dd-item i{ font-size:1.05rem; width:20px; text-align:center; color:var(--text-2); flex-shrink:0; }
.hdr-dd-item:hover i{ color:var(--text); }
.hdr-dd-notif{ display:none; }
.hdr-dd-count{ margin-left:auto; min-width:18px; height:18px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; background:var(--neg); color:#fff; font-family:var(--font-body); font-size:0.7rem; font-weight:700; line-height:1; border-radius:9px; flex-shrink:0; }
.hdr-dd-count[hidden]{ display:none; }
.hdr-dd-logout{ color:var(--neg); }
.hdr-dd-logout i{ color:var(--neg); }
.hdr-dd-logout:hover{ background:rgba(229,72,77,0.1); color:var(--neg); }
.hdr-dd-logout:hover i{ color:var(--neg); }
/* Выход — это POST-форма; form не должна влиять на раскладку меню, а кнопка обязана
   выглядеть как обычный пункт .hdr-dd-item (сбрасываем дефолты кнопки). */
.hdr-dd-logout-form{ display:contents; }
.hdr-dd-logout-form > button{ appearance:none; -webkit-appearance:none; border:0; background:transparent; width:100%; margin:0; cursor:pointer; text-align:left; }

/* ── Дропдаун уведомлений ── */
.hdr-notif-dd{ width:min(384px, calc(100vw - 24px)); padding:0; overflow:hidden; }
.hdr-notif-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px 11px; border-bottom:1px solid var(--line); }
.hdr-notif-title{ font-family:var(--font-display); font-weight:600; font-size:0.95rem; color:var(--text); }
.hdr-notif-readall{ border:none; background:none; color:var(--text-3); font-size:1.05rem; cursor:pointer; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:background 0.15s var(--ease), color 0.15s var(--ease); }
.hdr-notif-readall:hover{ background:var(--hdr-hover); color:var(--text); }
.hdr-notif-list{ max-height:min(420px, 60vh); overflow-y:auto; }
.hdr-notif-load{ display:flex; align-items:center; justify-content:center; padding:34px; }
.hdr-spin{ width:26px; height:26px; border:2px solid var(--line-2); border-top-color:var(--text-2); border-radius:50%; animation:hdrSpin 0.7s linear infinite; }
@keyframes hdrSpin{ to{ transform:rotate(360deg); } }
.hdr-notif-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:34px 20px; color:var(--text-3); text-align:center; }
.hdr-notif-empty[hidden]{ display:none; }
.hdr-notif-empty i{ font-size:1.7rem; }
.hdr-notif-empty span{ font-size:0.85rem; }
.hdr-notif-item{ display:flex; gap:11px; padding:12px 16px; width:100%; cursor:pointer; text-align:left; background:none; border:none; border-bottom:1px solid var(--line); transition:background 0.14s var(--ease); }
.hdr-notif-item:last-child{ border-bottom:none; }
.hdr-notif-item:hover{ background:var(--hdr-hover); }
.hdr-notif-item.unread{ background:rgba(59,158,255,0.06); }
.hdr-notif-item.unread:hover{ background:rgba(59,158,255,0.1); }
.hdr-notif-ic{ width:34px; height:34px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.95rem; background:var(--wash); }
.hdr-notif-tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.hdr-notif-t{ font-family:var(--font-body); font-size:0.85rem; font-weight:600; color:var(--text); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hdr-notif-m{ font-size:0.8rem; color:var(--text-2); line-height:1.35; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hdr-notif-time{ font-size:0.72rem; color:var(--text-3); margin-top:4px; }
.hdr-notif-dot{ width:7px; height:7px; border-radius:50%; background:var(--verified); flex-shrink:0; margin-top:6px; }
.hdr-notif-all{ display:block; padding:12px 16px; text-align:center; border-top:1px solid var(--line); color:var(--text-2); font-family:var(--font-body); font-size:0.85rem; font-weight:600; text-decoration:none; transition:background 0.15s var(--ease), color 0.15s var(--ease); }
.hdr-notif-all:hover{ background:var(--hdr-hover); color:var(--text); }

/* ===== Мобильная шторка уведомлений (bottom sheet) ===== */
.hdr-sheet{ position:fixed; inset:0; z-index:300; display:none; }
.hdr-sheet-scrim{ position:absolute; inset:0; background:rgba(0,0,0,0.5); opacity:0; transition:opacity 0.25s var(--ease); }
.hdr-sheet.open .hdr-sheet-scrim{ opacity:1; }
.hdr-sheet-panel{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; max-height:85vh; background:var(--void); border-top:1px solid var(--line); border-radius:18px 18px 0 0; box-shadow:0 -8px 40px rgba(0,0,0,0.5); transform:translateY(100%); transition:transform 0.32s cubic-bezier(0.22,1,0.36,1); padding-bottom:env(safe-area-inset-bottom,0px); will-change:transform; }
.hdr-sheet.open .hdr-sheet-panel{ transform:translateY(0); }
.hdr-sheet-handle{ width:40px; height:4px; flex-shrink:0; margin:10px auto 4px; border-radius:2px; background:var(--line-2); }
.hdr-sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 8px 12px 18px; border-bottom:1px solid var(--line); flex-shrink:0; }
.hdr-sheet-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--text); }
.hdr-sheet-readall{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; border:none; background:none; border-radius:var(--r-sm); color:var(--text-3); font-size:1.25rem; cursor:pointer; transition:background 0.15s var(--ease), color 0.15s var(--ease); }
.hdr-sheet-readall:hover{ background:var(--hdr-hover); color:var(--text); }
.hdr-sheet-list{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.hdr-sheet .hdr-notif-all{ flex-shrink:0; }

/* офсет контента */
.page{ padding-left:var(--rail-w); }

@media (max-width:900px){
  .page{ padding-left:0; }
  /* Мобилка: боковые поля шапки плавные и меньше — освобождают место кнопкам на узких экранах (iPhone mini). */
  .apphdr{ left:0; padding:0 clamp(8px,2.8vw,14px); gap:clamp(5px,1.6vw,10px); }
  .hdr-sb{ display:none; }
  .hdr-burger{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-left:-6px; border-radius:var(--r-sm); border:none; background:none; color:var(--text); cursor:pointer; flex-shrink:0; }
  .hdr-burger svg{ width:25px; height:25px; }
  .hdr-sicon{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:var(--r-sm); border:none; background:none; color:var(--text-2); cursor:pointer; flex-shrink:0; }
  .hdr-sicon svg{ width:22px; height:22px; }
  .hdr-logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; pointer-events:none; }
  .hdr-logo img{ height:24px; max-width:46vw; }
  .hdr-actions{ gap:4px; }
  /* Апселл на мобилке: текст сохраняем, размеры плавные (clamp) — влезает от 320px до 430px без иконки-only. */
  .hdr-upsell{ height:clamp(34px,9.4vw,38px); padding:0 clamp(9px,2.8vw,15px); margin-right:clamp(2px,1vw,4px); gap:clamp(4px,1.4vw,6px); font-size:clamp(0.75rem,3.1vw,0.86rem); }
  .hdr-upsell i{ font-size:1.05em; }
  /* Лого прижато влево к бургеру; высота плавная (весь логотип виден, просто мельче), и ужимается ПЕРВЫМ,
     чтобы правые кнопки никогда не уезжали за экран (min-width:0 — несущая строка). */
  .apphdr .hdr-logo{ position:static; transform:none; left:auto; top:auto; pointer-events:auto; margin-left:-2px; flex:0 1 auto; min-width:0; overflow:hidden; }
  .apphdr .hdr-logo img{ height:clamp(16px,4.8vw,24px); width:auto; max-width:100%; }
  .hdr-bell-wrap{ display:none; }
  .hdr-acct-chev{ display:none; }
  .hdr-dd-notif{ display:flex; }
  .hdr-acct-dot:not([hidden]){ display:block; }
  .hdr-sheet.open{ display:block; }
  .hdr-login{ height:clamp(34px,9.4vw,38px); padding:0 clamp(10px,3vw,17px); font-size:clamp(0.78rem,3.1vw,0.875rem); }
  /* сайдбар -> off-canvas drawer */
  .appnav{ width:100%; transform:translateX(-100%); transition:transform 0.28s cubic-bezier(0.22,1,0.36,1); box-shadow:none; z-index:150; padding-top:env(safe-area-inset-top,0px); }
  .appnav.is-open{ transform:translateX(0); }
  .appnav:hover{ width:100%; box-shadow:none; }
  .nav-head{ justify-content:flex-start; padding:0 18px; position:relative; }
  .nav-logo-sq{ display:none; }
  .nav-logo-h.nl-dark{ display:block; }
  [data-theme="light"] .nav-logo-h.nl-dark{ display:none; }
  [data-theme="light"] .nav-logo-h.nl-light{ display:block; }
  .nav-close{ display:flex; align-items:center; justify-content:center; position:absolute; top:50%; right:14px; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; border:none; background:var(--raised); color:var(--text-2); cursor:pointer; flex-shrink:0; }
  .nav-close svg{ width:16px; height:16px; }
  .ni-tx, .nav-switch{ opacity:1; }
  .nav-item{ height:50px; font-size:1.0625rem; }
  .ni-ic{ font-size:1.2rem; width:26px; }
  .nav-scrim{ z-index:145; }
  .appnav:hover ~ .nav-scrim{ opacity:0; }
  body.nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
}
.sb-key{ flex-shrink:0; font-family:var(--font-mono); font-size:0.8125rem; line-height:1; color:var(--text-4); border:1px solid var(--line-2); border-radius:5px; padding:3px 8px; }

/* категории - адаптивный скролл-ряд */
.pillcarousel{ grid-area:cats; position:relative; min-width:0; }
.pills{ display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; margin-bottom:0; -webkit-overflow-scrolling:touch; }
.pills::-webkit-scrollbar{ display:none; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--r-sm); border:1px solid var(--ring); background:transparent; color:var(--text-2); font-family:var(--font-display); font-weight:500; font-size:0.8125rem; white-space:nowrap; cursor:pointer; flex-shrink:0; transition:all var(--dur); }
.pill:hover{ color:var(--text); border-color:var(--line-2); }
.pill .n{ color:var(--text-4); font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:0.75rem; }
.pill.active{ background:var(--raised); border-color:var(--line-2); color:var(--text); }
.pill.active .n{ color:var(--text-2); }
.pill svg{ width:14px; height:14px; }

/* оболочка */
.shell{ display:grid; grid-template-columns:minmax(0,1fr) clamp(360px, 26vw, 500px); gap:18px 28px; align-items:start; grid-template-areas:"cats rail" "hero rail" "sections rail"; }
.hero-area{ grid-area:hero; min-width:0; }
.sections{ grid-area:sections; min-width:0; }
.rail{ grid-area:rail; min-width:0; align-self:stretch; }
@media (max-width:1100px){ .shell{ grid-template-columns:minmax(0,1fr); grid-template-areas:"cats" "hero" "rail" "sections"; } }
/* мобилка: секции - горизонтальный скролл с подглядыванием следующей карточки (как у OpenSea) */
@media (max-width:680px){
  .wrap{ padding-left:14px; padding-right:14px; }
  .tgrid{ grid-auto-columns:84%; }
  .pgrid{ grid-auto-columns:66%; }
  .ngrid{ grid-auto-columns:46%; }
  .agrid{ grid-auto-columns:82%; }
  .tarrow{ display:none; }
  [class*="carousel"].show-right .ctrack{ -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 60px), transparent 100%); mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 60px), transparent 100%); }
}

/* ===== HERO-СЛАЙДЕР (scroll-snap, адаптивный, тема-зависимый) ===== */
/* ===== ГЕРОЙ-СЛАЙДЕР в стиле OpenSea: обложка-арт + инфо слева-внизу + превью + стрелки + точки ===== */
.hero{ position:relative; border-radius:var(--r-lg); overflow:hidden; }
.htrack{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.htrack::-webkit-scrollbar{ display:none; }
.hslide{ position:relative; flex:0 0 100%; scroll-snap-align:center; height:clamp(300px,30vw,392px); overflow:hidden; }
.hcover{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; isolation:isolate; }
.hcover .wm{ position:absolute; right:6%; top:50%; transform:translateY(-50%); width:clamp(150px,22vw,260px); height:clamp(150px,22vw,260px); color:#fff; opacity:0.07; pointer-events:none; }
.hcover .wm svg{ width:100%; height:100%; }
.hc-video{ background:#0c0c0e; }
.hvposter{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; z-index:1; opacity:1; transition:opacity 0.7s ease; }
.hvposter.is-hidden{ opacity:0; pointer-events:none; }
.hvideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; z-index:0; }
.hc1{ background:linear-gradient(135deg,#2b3056,#46365e 52%,#6a4566); }
.hc2{ background:linear-gradient(135deg,#1f3a3a,#2c5048 58%,#3a6450); }
.hc3{ background:linear-gradient(135deg,#3a2e28,#5e4636 54%,#6e5240); }
[data-theme="light"] .hc1{ background:linear-gradient(135deg,#5a5f86,#6e5a86 52%,#8a6586); }
[data-theme="light"] .hc2{ background:linear-gradient(135deg,#3f6a6a,#4c7a70 58%,#5a9078); }
[data-theme="light"] .hc3{ background:linear-gradient(135deg,#6a564a,#8a6a52 54%,#9e7a60); }
.hscrim{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.82) 14%, rgba(0,0,0,0.62) 34%, rgba(0,0,0,0.46) 55%, rgba(0,0,0,0.34) 76%, rgba(0,0,0,0.25) 100%); }
.hinfo{ position:absolute; left:0; right:0; bottom:0; padding:clamp(18px,3vw,32px); }
.hstretch{ position:absolute; inset:0; z-index:1; }
.hinfo .htitle{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.45rem,3.8vw,2.1rem); line-height:1.12; color:#fff; max-width:72%; }
.hinfo .htitle .verified{ width:0.62em; height:0.62em; margin-left:8px; vertical-align:middle; }
.hinfo .htitle .verified{ width:22px; height:22px; }
.hinfo .hby{ color:rgba(255,255,255,0.82); font-size:0.875rem; margin-top:6px; display:flex; align-items:center; gap:5px; }
.hinfo .hby span{ font-weight:500; color:#fff; }
.hinfo .hby .hby-author{ position:relative; z-index:2; font-weight:500; color:#fff; text-decoration:none; }
.hinfo .hby .hby-author:hover{ text-decoration:underline; }
.hinfo .hby .verified{ width:14px; height:14px; }
.hstrip{ display:flex; background:rgba(0,0,0,0.42); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.14); border-radius:var(--r-md); max-width:100%; overflow:hidden; flex-shrink:1; min-width:0; }
.hstrip .hs{ padding:10px 18px; border-right:1px solid rgba(255,255,255,0.12); }
.hstrip .hs:last-child{ border-right:none; }
.hstrip .hl{ font-size:0.625rem; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.62); margin-bottom:4px; white-space:nowrap; }
.hstrip .hv{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:0.9375rem; color:#fff; white-space:nowrap; }
.hbar{ display:flex; align-items:stretch; gap:16px; margin-top:16px; }
.hbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 24px; border-radius:var(--r-md); border:none; font-family:var(--font-display); font-weight:600; font-size:0.875rem; cursor:pointer; white-space:nowrap; text-decoration:none; transition:transform var(--dur), background var(--dur), box-shadow var(--dur), border-color var(--dur); }
.hbtn-primary{ position:relative; z-index:2; margin-left:auto; flex-shrink:0; background:#fff; color:#141414; box-shadow:0 6px 18px rgba(0,0,0,0.28); }
.hbtn-primary:hover{ background:#f0f0f0; transform:translateY(-1px); box-shadow:0 9px 24px rgba(0,0,0,0.34); }
.hbtn-primary svg{ width:17px; height:17px; }
.hbtn-icon{ width:46px; height:46px; padding:0; justify-content:center; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.3); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hbtn-icon:hover{ background:rgba(255,255,255,0.26); border-color:rgba(255,255,255,0.5); transform:translateY(-1px); }
.hbtn-icon svg{ width:19px; height:19px; }
.harrow{ position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; border:none; background:rgba(0,0,0,0.45); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:4; opacity:0; transition:opacity var(--dur), background var(--dur); }
.hero:hover .harrow{ opacity:1; }
.harrow:hover{ background:rgba(0,0,0,0.72); }
.harrow svg{ width:16px; height:16px; }
.hprev{ left:12px; } .hnext{ right:12px; }
.hdots{ display:flex; gap:7px; justify-content:center; margin-top:14px; }
.hdot{ width:32px; height:6px; border-radius:3px; border:none; background:var(--text-4); opacity:0.45; cursor:pointer; padding:0; transition:opacity var(--dur), background var(--dur); }
.hdot.active{ background:var(--text); opacity:1; }
@media (max-width:760px){ .hbar .hbtn-primary{ display:none; } .harrow{ display:none; } .hslide, .hero-sk{ height:clamp(380px, 100vw, 460px); } }
@media (max-width:980px){ .hstrip .hs-cat{ display:none; }
  .hstrip{ flex:1 1 0; min-width:0; }
  .hstrip .hs{ flex:1 1 0; min-width:0; padding:10px 12px; }
}
@media (max-width:560px){ .hstrip .hs{ padding:9px 10px; } }
.hero-sk{ display:block; position:relative; height:clamp(300px,30vw,392px); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.hero-sk .skinfo{ position:absolute; left:0; bottom:0; width:100%; padding:clamp(18px,3vw,32px); }

/* ===== заголовок секции (без иконок) ===== */
.section-block{ margin-top:40px; }
@media (min-width:1101px){ .sections > .section-block:first-child{ margin-top:8px; } } /* плотнее стык hero ↔ sections на десктопе */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.sec-head .h{ min-width:0; }
.sec-head h2{ font-size:clamp(1.125rem,2.5vw,1.25rem); }
.sec-head .sub{ font-size:0.8125rem; color:var(--text-3); margin-top:3px; }
.see-all{ font-family:var(--font-display); font-weight:500; font-size:0.8125rem; color:var(--text-2); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; flex-shrink:0; transition:color var(--dur); }
.see-all:hover{ color:var(--text); }
.see-all svg{ width:13px; height:13px; }

/* общее */
.avatar{ width:40px; height:40px; border-radius:var(--r-xs); flex-shrink:0; background:var(--raised); border:1px solid var(--ring); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--text-2); }
.chip{ display:inline-block; padding:3px 9px; border-radius:var(--r-xs); border:1px solid var(--line); color:#a0a0a0; font-size:0.75rem; font-weight:500; }
.delta{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:0.75rem; white-space:nowrap; }
.delta.pos{ color:var(--pos); } .delta.neg{ color:var(--neg); }
.name-row{ display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; }
.name-row .t{ font-family:var(--font-display); font-weight:600; font-size:0.875rem; color:var(--text); min-width:0; overflow:hidden; white-space:nowrap; }
.name-row .t .tx{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.tcard .t.is-marquee .tx{ max-width:none; overflow:visible; text-overflow:clip; animation:marquee var(--mq-dur,11s) linear infinite; }
@keyframes marquee{ 0%,12%{ transform:translateX(0); } 44%,56%{ transform:translateX(var(--mq-shift,0)); } 88%,100%{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){ .tcard .t.is-marquee .tx{ animation:none; } }

/* тренды - карточки со спарклайнами (ApexCharts) */
[class*="carousel"]{ position:relative; }
.ctrack{ overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; }
.ctrack::-webkit-scrollbar{ display:none; }
[class*="carousel"].show-right .ctrack{ -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 120px), transparent 100%); mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 120px), transparent 100%); }
@media (hover: none) and (pointer: coarse){ .harrow, .tarrow{ display:none !important; } }
.tgrid{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(2, auto); grid-auto-columns:300px; gap:var(--gutter); padding-bottom:2px; }
.tarrow{ position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; border:1px solid var(--ring); background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; box-shadow:0 2px 12px rgba(0,0,0,0.28); opacity:0; transition:opacity var(--dur), background var(--dur), border-color var(--dur); }
[class*="carousel"].show-left:hover .tprev, [class*="carousel"].show-right:hover .tnext{ opacity:1; }
.tarrow:hover{ background:var(--raised); border-color:var(--line-2); }
.tarrow svg{ width:15px; height:15px; }
.tprev{ left:8px; } .tnext{ right:8px; }
.tcard{ display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--ring); border-radius:var(--r-md); padding:14px 16px; scroll-snap-align:start; text-decoration:none; color:inherit; transition:border-color var(--dur), background var(--dur); }
.tcard .avatar{ width:46px; height:46px; }
.tcard:hover{ border-color:var(--line-2); background:var(--raised); }
.tcard .mid{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.tcard .mid .abadge{ margin-top:6px; }
.tcard .figs{ display:flex; align-items:baseline; flex-wrap:nowrap; white-space:nowrap; gap:6px; margin-top:3px; max-width:100%; }
.tcard .figs .v{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:0.875rem; color:var(--text); }
.tcard .figs .u{ font-size:0.75rem; color:#a0a0a0; }
.spark{ width:66px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:flex-end; cursor:default; }
.sk-svg{ display:block; overflow:visible; }
.sk-dot{ stroke:var(--raised); stroke-width:1.6; transition:opacity 0.1s ease; }

/* подборки */
.pgrid{ display:grid; grid-auto-flow:column; grid-auto-columns:300px; gap:var(--gutter); }
.pcard{ position:relative; display:block; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--ring); scroll-snap-align:start; transition:border-color var(--dur); }
.pcard:hover{ border-color:var(--line-2); }
.pcard .cover{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(130% 110% at 28% 0%, var(--wash) 0%, var(--raised) 45%, var(--surface) 100%); }
.pcard .cover svg{ width:62px; height:62px; color:var(--text-2); opacity:0.28; }
.pcard .cover::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.74) 15%, rgba(0,0,0,0.48) 36%, rgba(0,0,0,0.24) 57%, rgba(0,0,0,0.08) 77%, rgba(0,0,0,0) 100%); }
.pcard .pinfo{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:14px 14px 13px; }
.pcard .ttl{ font-family:var(--font-display); font-weight:600; font-size:0.9375rem; color:#fff; }
.pcard .fl{ margin-top:3px; font-size:0.8125rem; color:#cfcfcf; }
.pcard .fl .v{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:#fff; }

/* новинки */
.ngrid{ display:grid; grid-auto-flow:column; grid-auto-columns:190px; gap:var(--gutter); }
.ntile{ position:relative; background:var(--surface); border:1px solid var(--ring); border-radius:var(--r-md); padding:14px; scroll-snap-align:start; transition:border-color var(--dur), background var(--dur); }
.ntile:hover{ border-color:var(--line-2); background:var(--raised); }
.ntile .badge{ position:absolute; top:10px; right:10px; font-family:var(--font-mono); font-size:0.5625rem; letter-spacing:0.08em; padding:2px 6px; border-radius:var(--r-xs); color:var(--text-2); border:1px solid var(--line-2); }
.ntile .av{ margin-bottom:10px; }
.ntile .t2{ font-family:var(--font-display); font-weight:600; font-size:0.8125rem; color:var(--text); margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* авторы */
.agrid{ display:grid; grid-auto-flow:column; grid-auto-columns:300px; gap:var(--gutter); }
.acard{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--ring); border-radius:var(--r-md); padding:13px; scroll-snap-align:start; transition:border-color var(--dur), background var(--dur); }
.acard:hover{ border-color:var(--line-2); background:var(--raised); }
.acard .av{ width:44px; height:44px; border-radius:50%; }
.acard .info{ min-width:0; }
.acard .st{ margin-top:3px; font-size:0.8125rem; color:#a0a0a0; }
.acard .st .v{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-2); }

/* сайдбар */
/* Топ ассистентов - без рамки/карточки/паддингов, список встык (как floor-лист OpenSea) */
.side{ position:sticky; top:calc(var(--hdr-h) + 14px); height:calc(100vh - var(--hdr-h) - 28px); display:flex; flex-direction:column; }
.ranklist{ overflow-y:auto; overflow-x:hidden; flex:1; min-height:0; scrollbar-width:none; }
.ranklist::-webkit-scrollbar{ display:none; }
.ranklist::-webkit-scrollbar{ width:6px; }
.ranklist::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:3px; }
.ranklist::-webkit-scrollbar-track{ background:transparent; }
@media (max-width:1100px){ .side{ position:static; height:auto; max-height:none; display:block; } .ranklist{ overflow:visible; } }
.rail .sec-head{ align-items:center; margin-bottom:8px; padding:0 12px; } /* заголовок вровень с колонками/строками (у них паддинг 12px) */
.btn-pill{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:var(--r-sm); border:1px solid var(--ring); color:var(--text); font-family:var(--font-display); font-weight:500; font-size:0.75rem; white-space:nowrap; transition:all var(--dur); }
.btn-pill:hover{ border-color:var(--line-2); background:var(--raised); }
.rank-cols{ display:flex; align-items:center; justify-content:space-between; padding:2px 12px 9px; font-family:var(--font-mono); font-size:0.625rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-4); }
.rrow{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:var(--r-md); transition:background var(--dur); }
.rrow:hover{ background:var(--raised); }
.rrow .rk{ width:16px; text-align:center; font-family:var(--font-mono); font-size:0.8125rem; color:var(--text-4); flex-shrink:0; }
.rrow .rav{ width:42px; height:42px; border-radius:var(--r-xs); font-size:0.9375rem; }
.rrow .rn{ min-width:0; flex:1; }
.rrow .rn .nm{ display:flex; align-items:center; gap:5px; line-height:1.2; }
.rrow .rn .nm span{ font-family:var(--font-display); font-weight:500; font-size:1rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rrow .rn .cat{ font-size:0.875rem; color:#a0a0a0; margin-top:1px; line-height:1.25; }
.rrow .rt{ text-align:right; flex-shrink:0; }
.rrow .rt .v{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:1rem; color:var(--text); display:block; }
@media (max-width:1100px){ .rank-more{ display:none; } }

:focus-visible{ outline:2px solid var(--text-2); outline-offset:2px; }

/* ===== Модалка умного поиска (десктоп: центр; мобилка: на весь экран) ===== */
.searchmodal{ position:fixed; inset:0; z-index:200; display:none; }
.searchmodal.is-open{ display:block; }
.sm-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.sm-card{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:min(840px, 94vw); height:min(640px, calc(100vh - 110px)); background:var(--modal); border:1px solid var(--ring); border-radius:var(--r-lg); box-shadow:0 24px 64px rgba(0,0,0,0.42); display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:contain; }
.sm-top{ display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); }
.sm-ico{ width:20px; height:20px; color:var(--text-4); flex-shrink:0; }
.sm-field{ flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font-family:var(--font-display); font-weight:500; font-size:1.1875rem; }
.sm-field::placeholder{ color:var(--text-4); }
.sm-x{ width:32px; height:32px; border-radius:var(--r-sm); border:none; background:var(--raised); color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background var(--dur), color var(--dur); }
.sm-x:hover{ background:var(--wash); color:var(--text); }
.sm-x svg{ width:15px; height:15px; }
.sm-tabs{ display:flex; gap:8px; padding:13px 16px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.sm-tabs::-webkit-scrollbar{ display:none; }
.sm-tab{ padding:9px 17px; border-radius:var(--r-sm); border:1px solid var(--ring); background:none; color:var(--text-2); font-family:var(--font-display); font-weight:500; font-size:0.9375rem; cursor:pointer; white-space:nowrap; transition:all var(--dur); }
.sm-tab:hover{ border-color:var(--line-2); color:var(--text); }
.sm-tab.is-on{ background:var(--btn); color:var(--btn-text); border-color:transparent; }
.sm-scroll{ overflow-y:auto; overflow-x:hidden; padding:6px 12px 14px; flex:1; min-height:0; scrollbar-width:none; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.sm-scroll::-webkit-scrollbar{ display:none; }
.sm-label{ font-family:var(--font-mono); font-size:0.625rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-4); padding:12px 6px 8px; }
.sm-cards{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.sm-row{ display:flex; align-items:center; gap:13px; min-width:0; padding:13px 11px; border-radius:var(--r-md); cursor:pointer; transition:background var(--dur); }
.sm-row:hover{ background:var(--raised); }
.sm-row .avatar{ width:46px; height:46px; border-radius:10px; font-size:1.25rem; }
.sm-rn{ flex:1; min-width:0; }
.sm-rt{ display:flex; align-items:center; gap:5px; min-width:0; }
.sm-rt span{ font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sm-rt .verified{ width:14px; height:14px; flex-shrink:0; }
.sm-rs{ font-size:0.875rem; color:#a0a0a0; margin-top:4px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sm-row .delta{ flex-shrink:0; }
.sm-spark{ width:58px; height:34px; flex-shrink:0; }
.sm-spark .sk-svg{ width:100%; height:100%; }
.sm-empty{ text-align:center; color:var(--text-3); padding:44px 0; font-size:0.875rem; }
.sm-hint{ text-align:center; color:var(--text-3); padding:52px 24px; font-size:0.9375rem; line-height:1.5; }
.sm-discover[hidden], .sm-live[hidden], .sm-loading[hidden]{ display:none !important; }
.sm-loading{ padding:2px 0 14px; }
.sm-skblock{ margin-bottom:4px; }
.sm-skrow{ display:flex; align-items:center; gap:11px; padding:9px 8px; }
.sm-skav{ width:46px; height:46px; border-radius:50%; flex-shrink:0; }
.sm-sklines{ flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.sm-skl{ height:10px; border-radius:5px; }
.sm-skl-a{ width:58%; } .sm-skl-b{ width:34%; height:8px; }
.sm-sklabel{ display:block; height:9px; width:130px; border-radius:5px; margin:14px 6px 10px; }
/* раскрывающийся автор в поиске */
.sm-auth-list{ display:flex; flex-direction:column; }
.sm-auth-head{ display:flex; align-items:center; gap:2px; }
.sm-auth-head .sm-row{ flex:1; min-width:0; }
.sm-expand{ flex-shrink:0; width:36px; height:36px; border:none; background:none; color:var(--text-3); cursor:pointer; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; transition:background var(--dur), color var(--dur); }
.sm-expand:hover{ background:var(--raised); color:var(--text); }
.sm-expand svg{ width:18px; height:18px; transition:transform 0.25s ease; }
.sm-expand[aria-expanded="true"] svg{ transform:rotate(180deg); }
.sm-auth-kids{ margin:1px 0 7px 26px; padding-left:12px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:1px; }
.sm-auth-kids[hidden]{ display:none; }
.sm-auth-empty{ color:var(--text-3); font-size:0.8125rem; padding:8px 6px; }
.searchmodal.is-open .sm-overlay{ animation:smOverlay 0.22s ease backwards; }
@keyframes smOverlay{ from{ opacity:0; } to{ opacity:1; } }
.searchmodal.is-open .sm-card{ animation:smCard 0.24s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes smCard{ from{ opacity:0; transform:translate(-50%,-50%) scale(0.97); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@media (prefers-reduced-motion: reduce){ .searchmodal.is-open .sm-card, .searchmodal.is-open .sm-overlay{ animation:none; } }
@media (max-width:680px){
  /* плотный бэкдроп - страница за модалкой не просвечивает */
  .sm-overlay{ background:rgba(0,0,0,0.66); }
  /* карточка занимает всю видимую область (dvh учитывает панели браузера) */
  .sm-card{
    position:fixed; top:0; left:0; right:0; bottom:auto;
    width:100%; max-width:none;
    height:100vh; height:100dvh;
    max-height:100vh; max-height:100dvh;
    margin:0; border:none; border-radius:18px 18px 0 0;
    transform:none;
  }
  .sm-cards{ grid-template-columns:1fr; }
  /* шапка ниже выреза, скролл с отступом под домашний индикатор */
  .sm-top{ padding-top:calc(16px + env(safe-area-inset-top, 0px)); padding-left:16px; padding-right:16px; gap:13px; }
  .sm-scroll{ padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)); }

  /* список-модалки «Смотреть все» - bottom-sheet: выезд снизу + грабёр */
  .listmodal .sm-card::before{ content:""; position:absolute; top:calc(7px + env(safe-area-inset-top, 0px)); left:50%; transform:translateX(-50%); width:38px; height:4px; border-radius:3px; background:var(--line-2); z-index:4; pointer-events:none; }
  .listmodal.is-open .sm-card{ animation:smSheet 0.34s cubic-bezier(0.16,1,0.3,1) backwards; }
  @keyframes smSheet{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
  /* лист не на весь экран — небольшой зазор сверху (видно бэкдроп) + плавный возврат/закрытие пальцем */
  .listmodal .sm-card{ top:auto; bottom:0; height:auto; max-height:calc(100dvh - 34px - env(safe-area-inset-top, 0px)); border-radius:20px 20px 0 0; }
  .listmodal .sm-card.sheet-snap{ transition:transform 0.24s cubic-bezier(0.16,1,0.3,1); }

  /* ПОИСК - полноэкранная панель сверху как в OpenSea (без грабёра, без выезда снизу) */
  .searchmodal:not(.listmodal) .sm-card{ border-radius:0; }
  .searchmodal:not(.listmodal).is-open .sm-card{ animation:smSearchIn 0.26s cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes smSearchIn{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }

  /* крупнее элементы на мобилке */
  .sm-field{ font-size:1.1875rem; }
  .sm-x{ width:38px; height:38px; }
  .sm-x svg{ width:17px; height:17px; }
  .sm-tabs{ padding:14px 16px; gap:9px; }
  .sm-tab{ padding:11px 19px; font-size:1rem; }
  .sm-scroll{ padding-left:14px; padding-right:14px; }
  .sm-label{ font-size:0.6875rem; padding:16px 6px 10px; }
  .sm-row{ padding:14px 12px; gap:14px; }
  .sm-row .avatar{ width:54px; height:54px; border-radius:13px; font-size:1.45rem; }
  .sm-row .avatar i{ font-size:1.55rem; }
  .sm-rt span{ font-size:1.0625rem; }
  .sm-rt .verified{ width:17px; height:17px; }
  .sm-rs{ font-size:0.9375rem; margin-top:5px; }
}
.abadge{ display:inline-flex; align-items:center; justify-content:center; height:18px; padding:0 7px; border-radius:5px; font-family:var(--font-mono); font-weight:700; font-size:0.625rem; line-height:1; letter-spacing:0.02em; cursor:help; flex-shrink:0; white-space:nowrap; vertical-align:middle; user-select:none; border:1px solid transparent; transition:filter var(--dur); }
.abadge:hover{ filter:brightness(1.12); }
.abadge:focus-visible{ outline:2px solid currentColor; outline-offset:1px; }
.abadge.b-rag{ color:var(--rag-fg); background:var(--rag-bg); border-color:var(--rag-bd); }
.abadge.b-ag{ color:var(--ag-fg); background:var(--ag-bg); border-color:var(--ag-bd); }
.tip{ position:fixed; z-index:400; max-width:min(280px, calc(100vw - 24px)); background:var(--tip-bg); color:var(--tip-text); border:1px solid var(--tip-border); border-radius:8px; box-shadow:0 10px 34px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.16); opacity:0; transform:translateY(3px); pointer-events:none; transition:opacity 0.15s ease, transform 0.15s ease; }
.tip.show{ opacity:1; transform:translateY(0); }
.tip-label{ padding:9px 12px; font-family:var(--font-body); font-size:0.8125rem; line-height:1.5; }
.tip-arrow{ position:absolute; width:9px; height:9px; background:var(--tip-bg); border:1px solid var(--tip-border); }
.tip[data-pos="top"] .tip-arrow{ bottom:-5px; border-width:0 1px 1px 0; transform:rotate(45deg); }
.tip[data-pos="bottom"] .tip-arrow{ top:-5px; border-width:1px 0 0 1px; transform:rotate(45deg); }
@media (prefers-reduced-motion: reduce){ .tip{ transition-duration:0.08s; transform:none; } .tip.show{ transform:none; } }
.apexcharts-tooltip{ background:var(--tip-bg)!important; border:1px solid var(--tip-border)!important; box-shadow:0 6px 22px rgba(0,0,0,0.3)!important; color:var(--tip-text)!important; border-radius:7px!important; }
.apexcharts-tooltip-series-group{ background:transparent!important; padding:0!important; }
.apex-tip{ padding:6px 10px; font-family:var(--font-body); font-size:0.75rem; color:var(--tip-text); white-space:nowrap; }
/* Плавающий тултип спарклайнов (на уровне body - не режется каруселью), стиль как в OpenSea */
.spark-tip{ position:fixed; left:0; top:0; z-index:9000; pointer-events:none; opacity:0; transform:translate(-50%,-100%); transition:opacity 0.12s ease; background:var(--raised); border:1px solid var(--line); border-radius:10px; padding:6px 11px 7px; box-shadow:0 8px 26px rgba(0,0,0,0.36); display:flex; flex-direction:column; gap:1px; white-space:nowrap; }
.spark-tip.below{ transform:translate(-50%,0); }
.spark-tip.is-on{ opacity:1; }
.spark-tip .st-top{ display:flex; align-items:baseline; gap:4px; }
.spark-tip .st-v{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:0.9375rem; font-weight:700; color:var(--text); line-height:1.2; }
.spark-tip .st-u{ font-size:0.75rem; font-weight:500; color:var(--text-3); }
.spark-tip .st-t{ font-size:0.75rem; color:var(--text-3); line-height:1.25; }
.spark .apexcharts-tooltip{ display:none !important; }
.apexcharts-tooltip-marker{ display:none!important; }
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip{ display:none!important; }

/* ── интеграция с реальными данными ── */
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}
.pcard .cover i{font-size:60px;line-height:1;color:var(--text-2);opacity:.85;}

/* ═══════════════════════════════════════════════════════════════════════════
   АВТОРИЗАЦИЯ ПО ПОЧТЕ — модалка (десктоп) / bottom-sheet (мобилка)
   Единый поток вход+регистрация. Фикс. высота на обоих типах устройств, плавный
   кроссфейд между экранами «почта → код». Все цвета — из токенов (обе темы).
   Разметка: includes/marketplace_header.php · логика: /js/auth.js
   ═══════════════════════════════════════════════════════════════════════════ */
.authmodal{ position:fixed; inset:0; z-index:1000; display:none; }
.authmodal.is-open{ display:block; }
.am-scrim{ position:absolute; inset:0; background:rgba(0,0,0,0.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.authmodal.is-open .am-scrim{ animation:amScrim 0.26s var(--ease) both; }
@keyframes amScrim{ from{ opacity:0; } to{ opacity:1; } }

/* Панель — десктоп: центрированная карточка по высоте контента (без пустоты) */
.am-panel{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(468px, 92vw);
  height:auto; max-height:calc(100dvh - 28px);
  background:var(--modal); border:1px solid var(--ring); border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,0.46), 0 4px 16px rgba(0,0,0,0.28);
  display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:contain;
}
.authmodal.is-open .am-panel{ animation:amPop 0.30s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes amPop{ from{ opacity:0; transform:translate(-50%,-48%) scale(0.96); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }

/* Грабёр — только в режиме sheet (мобилка) */
.am-handle{ display:none; width:42px; height:4px; flex-shrink:0; margin:9px auto 0; border-radius:2px; background:var(--line-2); }

/* Верхняя панель: назад (слева, только на экране кода) + закрыть (справа) */
.am-bar{ position:relative; display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 12px 0; flex-shrink:0; height:48px; }
.am-iconbtn{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:var(--raised); color:var(--text-2); cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.am-iconbtn:hover{ background:var(--wash); color:var(--text); }
.am-iconbtn:active{ transform:scale(0.94); }
.am-iconbtn svg{ width:17px; height:17px; }
.am-back{ position:absolute; left:12px; top:0; }
.am-back[hidden]{ display:none; }

/* Тело фикс. высоты — две сцены стопкой (кроссфейд). isolation — чтобы свечение
   (псевдоэлементы .am-body) лежало в своём контексте ПОЗАДИ сцен. */
.am-body{ position:relative; display:grid; min-height:0; isolation:isolate; }
.authmodal.am-kb .am-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.authmodal.am-kb .am-body::-webkit-scrollbar{ display:none; }
.am-screen{
  grid-area:1 / 1; position:relative; z-index:1; padding:40px 28px 28px; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center;
  opacity:0; visibility:hidden; transform:translateY(6px) scale(0.99); pointer-events:none;
  transition:opacity 0.22s var(--ease), transform 0.26s var(--ease), visibility 0s linear 0.26s;
}
.am-screen.is-active{ opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity 0.26s var(--ease) 0.04s, transform 0.30s var(--ease) 0.04s, visibility 0s; }

/* Бренд-знак: без фона/обводки, крупный. Цвет — по теме (как .nav-logo-sq). */
.am-logo{ position:relative; z-index:1; width:140px; height:140px; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.am-logo-mark{
  width:96px; height:96px;
  background-color:#fff;
  -webkit-mask:url("/images/sb-logosvg.svg") center / contain no-repeat;
          mask:url("/images/sb-logosvg.svg") center / contain no-repeat;
}
[data-theme="light"] .am-logo-mark{ background-color:#141416; }

/* Тёплая «живая» подсветка ПОЗАДИ знака. Рисуем её на .am-body (он НЕ обрезает),
   а не внутри .am-screen — там overflow:auto резал ореол о верхний бар.
   Центрирована на лого (top = padding-top сцены 40px + полвысоты лого 70px = 110px).
   Два слоя: дышащее ядро (::before) + медленно вращающийся тёплый конус (::after). */
.am-body::before, .am-body::after{
  content:""; position:absolute; left:50%; top:110px; z-index:0; pointer-events:none;
  width:190px; height:190px; margin-left:-95px; margin-top:-95px; border-radius:50%;
  transition:opacity 0.2s var(--ease);
}
.am-body::before{
  background:radial-gradient(50% 50% at 50% 48%, rgba(255,150,60,0.85), rgba(255,120,30,0) 70%);
  filter:blur(20px); opacity:0.92; will-change:transform, filter;
  animation:amGlowPulse 3.5s ease-in-out infinite;
}
.am-body::after{
  background:conic-gradient(from 0deg,
     rgba(255,110,40,0), rgba(255,140,50,0.55), rgba(255,196,98,0.64),
     rgba(255,110,50,0.5), rgba(255,150,60,0.55), rgba(255,110,40,0));
  filter:blur(18px); opacity:0.82; will-change:transform;
  animation:amGlowSpin 5.5s linear infinite;
}
/* Светлая тема — голубое свечение вместо оранжевого */
[data-theme="light"] .am-body::before{
  opacity:0.74;
  background:radial-gradient(50% 50% at 50% 48%, rgba(74,160,255,0.76), rgba(40,120,255,0) 70%);
}
[data-theme="light"] .am-body::after{
  background:conic-gradient(from 0deg,
     rgba(40,120,255,0), rgba(70,150,255,0.55), rgba(120,205,255,0.64),
     rgba(60,140,255,0.5), rgba(90,175,255,0.55), rgba(40,120,255,0));
}
@keyframes amGlowPulse{
  0%,100%{ transform:scale(0.9); filter:blur(20px) brightness(0.9)  saturate(1);    }
  50%    { transform:scale(1.1); filter:blur(23px) brightness(1.38) saturate(1.2); }
}
@keyframes amGlowSpin{ to{ transform:rotate(360deg); } }

.am-title{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; line-height:1.2; color:var(--text); letter-spacing:-0.01em; margin:0 0 8px; }
.am-sub{ font-size:0.9375rem; line-height:1.5; color:var(--text-2); max-width:320px; margin:0 0 22px; }

/* Поле почты с инлайн-кнопкой (как в референсе) */
.am-form{ width:100%; max-width:340px; }
.am-field{ display:flex; align-items:center; gap:6px; height:52px; padding:5px 5px 5px 16px; border:1px solid var(--line-2); border-radius:13px; background:var(--surface); transition:border-color var(--dur) var(--ease); }
.am-field:focus-within{ border-color:var(--text-3); }
.am-input{ flex:1; min-width:0; background:none; border:none; outline:none; -webkit-tap-highlight-color:transparent; color:var(--text); font-family:var(--font-body); font-size:1rem; }
.am-input:focus, .am-input:focus-visible{ outline:none; box-shadow:none; }
.am-input::placeholder{ color:var(--text-4); }
.am-go{ position:relative; width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:none; border-radius:10px; background:var(--btn); color:var(--btn-text); cursor:pointer; transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.am-go:hover{ filter:brightness(0.92); }
.am-go:active{ transform:scale(0.95); }
.am-go:disabled{ cursor:default; }
.am-go-arrow{ width:19px; height:19px; transition:opacity 0.15s var(--ease); }
.am-spin{ position:absolute; width:18px; height:18px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; opacity:0; animation:amSpin 0.7s linear infinite; }
@keyframes amSpin{ to{ transform:rotate(360deg); } }
.authmodal.is-busy .am-go-arrow{ opacity:0; }
.authmodal.is-busy .am-spin{ opacity:1; }

/* Соглашение */
.am-agree{ font-size:0.75rem; line-height:1.55; color:var(--text-3); max-width:340px; margin:18px 0 0; }
.am-agree a{ color:var(--text-2); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur) var(--ease); }
.am-agree a:hover{ color:var(--text); }

/* Ошибка */
.am-error{ min-height:0; max-height:0; overflow:hidden; font-size:0.8125rem; line-height:1.4; color:var(--neg); margin:0; opacity:0; transition:opacity 0.2s var(--ease), max-height 0.2s var(--ease), margin 0.2s var(--ease); }
.am-error.is-on{ max-height:48px; opacity:1; margin:12px 0 0; }

/* OTP-боксы: 6 равных ячеек, адаптивная ширина под любое устройство */
.am-otp{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(6px,2.4vw,11px); width:100%; max-width:316px; margin:6px 0 0; }
.am-otp-box{ width:100%; height:56px; min-width:0; text-align:center; font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--text); background:var(--surface); border:1.5px solid var(--line-2); border-radius:11px; outline:none; -webkit-tap-highlight-color:transparent; caret-color:var(--text-2); transition:border-color 0.15s var(--ease), background 0.15s var(--ease); -moz-appearance:textfield; }
.am-otp-box::-webkit-outer-spin-button, .am-otp-box::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.am-otp-box.is-filled{ border-color:var(--text-3); background:var(--raised); }
.am-otp-box:focus, .am-otp-box:focus-visible{ border-color:var(--text); background:var(--raised); outline:none; box-shadow:none; }
.am-verifying .am-otp{ opacity:0.55; pointer-events:none; }

.am-sent{ font-size:0.875rem; line-height:1.5; color:var(--text-2); margin:20px 0 0; }
.am-sent b{ color:var(--text); font-weight:600; word-break:break-all; }
.am-resend-row{ font-size:0.8125rem; color:var(--text-3); margin:14px 0 0; }
.am-resend{ border:none; background:none; padding:0; font:inherit; font-weight:600; color:var(--text); cursor:pointer; text-decoration:underline; text-underline-offset:2px; transition:opacity var(--dur) var(--ease); }
.am-resend:hover:not(:disabled){ opacity:0.7; }
.am-resend:disabled{ color:var(--text-4); cursor:default; text-decoration:none; }
.am-resend-timer{ color:var(--text-4); font-variant-numeric:tabular-nums; }

/* Успех — галочка в духе Face ID: тонкое зелёное кольцо «прорисовывается» с вращением и
   угасающим motion-blur, затем рисуется галочка. Без свечения. Чёткий вектор, играется из
   /js/auth.js через Web Animations API — РОВНО один раз, редирект строго по .finished.
   stroke-dasharray намеренно 101 (>pathLength 100): так скрытое состояние полностью закрыто и
   нет точки-артефакта от round-cap (известный баг dashoffset). Высота/позиция окна НЕ меняется. */
.am-check{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:96px; height:96px; opacity:0; pointer-events:none; }
.authmodal.am-success .am-check{ opacity:1; transition:opacity 0.2s var(--ease); }
.am-check svg{ width:100%; height:100%; display:block; overflow:visible; }
.am-ring-draw{ fill:none; stroke:var(--pos); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:101; stroke-dashoffset:101; transform-box:fill-box; transform-origin:center; transform:rotate(-90deg);
  will-change:transform, stroke-dashoffset, filter; }
.am-tick{ fill:none; stroke:var(--pos); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:101; stroke-dashoffset:101; }
/* На экране успеха гасим всё прочее и фоновое свечение под лого (оно — только на входе). */
.authmodal.am-success .am-screen[data-screen="code"] > *:not(.am-check){ opacity:0; transition:opacity 0.22s var(--ease); }
.authmodal.am-success .am-body::before, .authmodal.am-success .am-body::after{ opacity:0; }

/* ── Bottom-sheet (мобилка / узкие экраны): фикс. высота ~чуть выше половины, смахивание ── */
@media (max-width:680px){
  .am-scrim{ background:rgba(0,0,0,0.62); }
  .am-handle{ display:block; }
  .am-bar{ height:40px; padding-top:6px; }
  .am-panel{
    top:auto; left:0; right:0; bottom:var(--am-kb, 0px);
    width:100%; max-width:none;
    height:auto; max-height:calc(100dvh - 12px);
    /* Стартовая позиция — за нижней кромкой. Выезд/возврат/свайп ведёт JS трансформом,
       поэтому CSS-анимацию здесь НЕ используем (иначе fill перебивает inline-transform и ломает свайп). */
    transform:translateY(100%);
    border-radius:22px 22px 0 0;
    border-left:none; border-right:none; border-bottom:none;
    box-shadow:0 -10px 44px rgba(0,0,0,0.5);
    transition:transform 0.42s cubic-bezier(0.16,1,0.3,1),
               bottom 0.30s cubic-bezier(0.22,1,0.36,1),
               height 0.30s cubic-bezier(0.22,1,0.36,1);
    padding-bottom:max(env(safe-area-inset-bottom, 0px), 10px);
    will-change:transform;
  }
  /* Отменяем десктопную amPop в режиме шторки — трансформом полностью управляет JS. */
  .authmodal.is-open .am-panel{ animation:none; }
  /* Контент на мобилке — вверху, а не по центру; компактнее, чтобы влезало без скролла и без пустоты. */
  .am-screen{ padding:50px 24px 30px; justify-content:flex-start; }
  .am-logo{ width:90px; height:90px; margin-bottom:4px; }
  .am-logo-mark{ width:60px; height:60px; }
  .am-body::before, .am-body::after{ top:95px; width:164px; height:164px; margin-left:-82px; margin-top:-82px; }
  .am-title{ font-size:1.34rem; margin-bottom:6px; }
  .am-sub{ font-size:0.9rem; margin-bottom:14px; }
  .am-agree{ margin-top:12px; font-size:0.72rem; }
  .am-otp-box{ height:52px; font-size:1.36rem; }
  .am-go{ width:44px; height:44px; }
  .am-input{ font-size:1.0625rem; }

  /* Клавиатура открыта: компактная раскладка, чтобы поля были видны и ничего не прыгало. */
  .authmodal.am-kb .am-handle{ opacity:0; }
  .authmodal.am-kb .am-bar{ height:34px; }
  .authmodal.am-kb .am-screen{ justify-content:flex-start; padding-top:10px; }
  .authmodal.am-kb .am-logo{ display:none; }
  .authmodal.am-kb .am-body::before, .authmodal.am-kb .am-body::after{ opacity:0; }
  .authmodal.am-kb .am-title{ margin-bottom:6px; }
  .authmodal.am-kb .am-sub{ margin-bottom:16px; }
  .authmodal.am-kb .am-agree{ margin-top:14px; }
  .authmodal.am-kb .am-sent{ margin-top:16px; }
}
/* Невысокие телефоны (iPhone SE/8 и старее): компактный контент, чтобы код и соглашение
   помещались. Высоту не фиксируем — шторка сама по контенту, при нехватке места тело скроллится. */
@media (max-width:680px) and (max-height:700px){
  .am-screen{ padding:18px 22px 18px; }
  .am-logo{ width:74px; height:74px; margin-bottom:2px; }
  .am-logo-mark{ width:50px; height:50px; }
  .am-body::before, .am-body::after{ top:55px; width:128px; height:128px; margin-left:-64px; margin-top:-64px; }
  .am-title{ font-size:1.25rem; margin-bottom:5px; }
  .am-sub{ font-size:0.875rem; margin-bottom:12px; }
  .am-otp-box{ height:48px; font-size:1.3rem; }
  .am-agree{ margin-top:10px; font-size:0.7rem; }
  .am-sent{ margin-top:14px; }
}
/* Совсем низкие вьюпорты (альбомная ориентация телефона): поджимаем отступы, тело скроллится */
@media (max-height:520px){
  .am-logo{ width:88px; height:88px; margin-bottom:12px; }
  .am-logo-mark{ width:60px; height:60px; }
  .am-title{ font-size:1.3rem; margin-bottom:6px; }
  .am-sub{ margin-bottom:16px; }
  .am-agree{ margin-top:12px; }
  .am-screen{ justify-content:flex-start; padding-top:22px; }
  .am-body::before, .am-body::after{ top:66px; width:138px; height:138px; margin-left:-69px; margin-top:-69px; }
}
@media (prefers-reduced-motion: reduce){
  .authmodal.is-open .am-scrim, .authmodal.is-open .am-panel{ animation-duration:0.01ms; }
  .am-screen, .am-check, .am-error, .am-go-arrow, .am-panel{ transition-duration:0.01ms; }
  .am-body::before, .am-body::after{ animation:none; }
  .authmodal.am-success .am-check{ opacity:1; }
}
.ntile{color:inherit;text-decoration:none;}