/* Стили слоя сообщества (cabinet/market/admin/community). Наследует токены landing.css.
   Buildless: подключается <link>, поверх /landing.css. Бренд BunnySplit:
   ink/graphite + бирюза #19E3D6, тёплый морковный для reward. */

/* ── shell ── */
.cm-app-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.6rem;
  max-width:var(--maxw);margin:0 auto;padding:.85rem 1.5rem;backdrop-filter:blur(12px)}
.cm-app-nav::before{content:"";position:fixed;inset:0 0 auto 0;height:62px;background:rgba(10,10,11,.82);z-index:-1;border-bottom:1px solid var(--line)}
.cm-nav-links{display:flex;gap:1.2rem;margin-left:1rem;font-size:.94rem;color:var(--mut);align-items:center}
.cm-nav-links a{padding:.25em .15em;border-radius:6px;transition:.18s;white-space:nowrap}
.cm-nav-links a:hover{color:var(--accent)}
.cm-nav-active{color:var(--accent)!important;font-weight:600}
.cm-nav-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.cm-nav-user{display:inline-flex;align-items:center;gap:.5rem;padding:.4em .8em;border:1px solid var(--line);border-radius:999px;transition:.18s}
.cm-nav-user:hover{border-color:var(--line-neon)}
.cm-nav-bal{color:var(--carrot);font-weight:700;font-variant-numeric:tabular-nums}
.cm-nav-email{color:var(--txt);font-size:.9rem}

.cm-wrap{max-width:var(--maxw);margin:0 auto;padding:2rem 1.5rem 5rem}
.cm-wrap-narrow{max-width:var(--read-max)}
.cm-page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.cm-page-head h1{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em}
.cm-page-head p{color:var(--mut);font-size:.95rem;margin-top:.2rem}

/* ── cards / surfaces ── */
.cm-card{background:var(--surface);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.4rem}
.cm-card+.cm-card{margin-top:1rem}
.cm-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* ── Люди: каталог авторов + follow (P4 петля подписок) ─────────────────── */
.cm-search{width:100%;max-width:420px;padding:.6rem .95rem;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--txt);font-size:.92rem;font-family:inherit}
.cm-search:focus{outline:none;border-color:#7C5CFF;box-shadow:0 0 0 3px rgba(124,92,255,.15)}
.cm-people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.9rem}
.cm-person{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.7rem;transition:transform .2s var(--ease),border-color .2s}
.cm-person:hover{transform:translateY(-3px);border-color:var(--line-neon)}
.cm-person.is-top{border-color:rgba(124,92,255,.35);box-shadow:0 4px 18px rgba(124,92,255,.12)}
.cm-person-medal{position:absolute;top:-8px;right:12px;font-size:1.3rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.cm-person-top{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.cm-person-ava{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,#FF5E7E,#7C5CFF)}
.cm-person-ava img{width:100%;height:100%;object-fit:cover}
.cm-person-init{color:#fff;font-weight:800;font-size:1.2rem}
.cm-person-id{display:flex;flex-direction:column;min-width:0}
.cm-person-name{font-weight:700;font-size:.98rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-person-handle{color:var(--mut);font-size:.82rem}
.cm-person-tag{color:var(--mut);font-size:.85rem;line-height:1.35;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-person-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto}
.cm-person-followers{color:var(--mut);font-size:.8rem;white-space:nowrap}
.cm-person-you{color:var(--mut);font-size:.82rem;font-style:italic}
.cm-follow-btn{border:0;cursor:pointer;padding:.4rem .85rem;border-radius:999px;font-size:.82rem;font-weight:700;
  color:#fff;background:linear-gradient(135deg,#FF5E7E,#7C5CFF);box-shadow:0 2px 8px rgba(124,92,255,.3);
  transition:filter .15s,opacity .15s;white-space:nowrap}
.cm-follow-btn:hover{filter:brightness(1.06)}
.cm-follow-btn:disabled{opacity:.6;cursor:default}
.cm-follow-btn.is-following{background:var(--bg2);color:var(--txt);border:1px solid var(--line);box-shadow:none}
.cm-author-link{color:#7C5CFF;font-weight:600;text-decoration:none}
.cm-author-link:hover{text-decoration:underline}

/* карточка заказа/публикации */
.cm-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease),border-color .25s}
.cm-tile:hover{transform:translateY(-3px);border-color:var(--line-neon)}
.cm-tile-media{position:relative;aspect-ratio:16/10;background:var(--bg2);display:grid;place-items:center;overflow:hidden}
.cm-tile-media img,.cm-tile-media model-viewer{width:100%;height:100%;object-fit:cover}
.cm-tile-media .cm-noimg{color:var(--dim);font-size:2rem}
/* Моат каталога: «🧩 N деталей» — candy-стикер поверх превью (главный месседж витрины). */
.cm-parts-badge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;
  gap:.3rem;padding:.32rem .6rem;font-size:.78rem;font-weight:800;letter-spacing:.01em;color:var(--card);
  background:var(--grad-hero);border-radius:999px;
  box-shadow:0 4px 14px rgba(124,92,255,.4);border:1.5px solid rgba(255,255,255,.85);transform:rotate(-2deg)}
.cm-parts-badge svg{width:14px;height:14px;flex:none}
/* Витрина-грид P4: табы сортировки (Свежие / Популярные) — pill-переключатель. */
.cm-sort{display:inline-flex;gap:.2rem;padding:.2rem;background:var(--bg2);border-radius:999px;border:1px solid var(--line)}
.cm-sort-tab{border:0;background:transparent;cursor:pointer;padding:.34rem .85rem;border-radius:999px;
  font-size:.84rem;font-weight:700;color:var(--mut);transition:all .15s}
.cm-sort-tab:hover{color:var(--txt)}
.cm-sort-tab.cm-sort-active{color:#fff;background:linear-gradient(135deg,#FF5E7E,#7C5CFF);box-shadow:0 2px 8px rgba(124,92,255,.35)}
.cm-tile-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.cm-tile-title{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;line-height:1.25}
.cm-tile-meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;color:var(--mut);font-size:.85rem}
.cm-tile-meta b{color:var(--txt);font-weight:600}
.cm-tile-desc{color:var(--mut);font-size:.9rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-tile-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-top:.4rem}

/* ── status pills ── */
.cm-pill{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;letter-spacing:.02em;
  padding:.3em .7em;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.cm-pill-accent{color:var(--accent);background:var(--accent-soft);border-color:var(--line-neon)}
.cm-pill-ok{color:var(--ok);background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3)}
.cm-pill-warn{color:var(--warn);background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.3)}
.cm-pill-err{color:var(--err);background:rgba(251,113,133,.1);border-color:rgba(251,113,133,.3)}
.cm-pill-mut{color:var(--mut);background:rgba(255,255,255,.04);border-color:var(--line)}

/* теги (need_model / need_print / город) */
.cm-tag{display:inline-flex;align-items:center;gap:.3em;font-size:.74rem;color:var(--mut);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;padding:.25em .55em}
.cm-tag-accent{color:var(--accent);border-color:var(--line-neon);background:var(--accent-soft)}

/* ── tabs ── */
.cm-tabs{display:flex;gap:.3rem;background:var(--bg2);border:1px solid var(--line);border-radius:999px;
  padding:.3rem;margin-bottom:1.5rem;flex-wrap:wrap}
.cm-tab{border:0;background:transparent;color:var(--mut);font:inherit;font-weight:600;font-size:.9rem;
  padding:.55em 1.1em;border-radius:999px;cursor:pointer;transition:.16s;display:inline-flex;align-items:center;gap:.45em}
.cm-tab:hover{color:var(--txt)}
.cm-tab.cm-tab-active{background:var(--accent);color:var(--accent-ink)}
.cm-tab-count{font-size:.72rem;background:rgba(255,255,255,.12);border-radius:999px;padding:.05em .5em;font-variant-numeric:tabular-nums}
.cm-tab.cm-tab-active .cm-tab-count{background:rgba(6,43,41,.25)}
.cm-tabpanel{animation:cmFade .25s var(--ease)}
@keyframes cmFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── forms ── */
.cm-field{display:block;margin-bottom:1rem}
.cm-field>span{display:block;font-size:.82rem;color:var(--mut);margin-bottom:.35rem;font-weight:500}
.cm-field input,.cm-field textarea,.cm-field select{width:100%;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--txt);font:inherit;padding:.7em .9em;transition:.15s}
.cm-field textarea{resize:vertical;min-height:92px;line-height:1.5}
.cm-field input:focus-visible,.cm-field textarea:focus-visible,.cm-field select:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.cm-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.cm-check{display:flex;gap:.55em;align-items:flex-start;font-size:.9rem;color:var(--txt);margin-bottom:.8rem;cursor:pointer}
.cm-check input{margin-top:.25em;accent-color:var(--accent)}
.cm-check small{color:var(--mut);display:block}
.cm-warn{font-size:.82rem;color:var(--warn);background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3);
  border-radius:var(--radius-sm);padding:.6em .8em;margin-bottom:.9rem}
.cm-formmsg{font-size:.88rem;min-height:1.2em;margin:.2rem 0 .8rem}
.cm-formmsg.err{color:var(--err)} .cm-formmsg.ok{color:var(--ok)}

/* ── buttons ── (наследуем .btn из landing.css; добавляем размеры/варианты) */
.btn-sm{padding:.5em .9em;font-size:.86rem}
.btn-danger{background:rgba(251,113,133,.14);color:var(--err);border:1px solid rgba(251,113,133,.35)}
.btn-danger:hover{background:rgba(251,113,133,.22)}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap}

/* ── tables (admin) ── */
.cm-table{width:100%;border-collapse:collapse;font-size:.9rem}
.cm-table th{text-align:left;color:var(--mut);font-weight:600;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.04em;padding:.7em .8em;border-bottom:1px solid var(--line)}
.cm-table td{padding:.7em .8em;border-bottom:1px solid var(--line);vertical-align:middle}
.cm-table tr:hover td{background:rgba(255,255,255,.02)}
.cm-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.cm-mono{font-variant-numeric:tabular-nums;color:var(--mut);font-size:.85rem}

/* ── empty/loading/error states ── */
.cm-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;
  padding:3rem 1.5rem;color:var(--mut)}
.cm-mascot{width:140px;height:auto;opacity:.95;filter:drop-shadow(0 12px 28px rgba(0,0,0,.4))}
.cm-state-title{font-size:1.2rem;color:var(--txt)}
.cm-state-txt{font-size:.95rem;max-width:42ch}
.cm-state .btn{margin-top:.4rem}
.cm-spinner{width:38px;height:38px;border:3px solid var(--line2);border-top-color:var(--accent);
  border-radius:50%;animation:cmSpin .8s linear infinite}
@keyframes cmSpin{to{transform:rotate(360deg)}}

/* ── toasts ── */
/* bottom учитывает --bs-bottom-reserve: тост не должен вставать на мобильную панель
   разделов / cookie-плашку (tokens.css). Нет ни того, ни другого → 0, как было. */
.cm-toasts{position:fixed;right:1.2rem;bottom:calc(1.2rem + var(--bs-bottom-reserve,0px));z-index:200;display:flex;flex-direction:column;gap:.6rem;pointer-events:none}
.cm-toast{pointer-events:auto;min-width:220px;max-width:340px;padding:.8em 1em;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:500;color:var(--txt);background:var(--surface-solid);border:1px solid var(--line);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);opacity:0;transform:translateX(20px);transition:.3s var(--ease)}
.cm-toast-in{opacity:1;transform:none}
.cm-toast-ok{border-color:rgba(52,211,153,.4)}
.cm-toast-err{border-color:rgba(251,113,133,.45)}
.cm-toast-warn{border-color:rgba(251,191,36,.4)}

/* ── modal ── */
.cm-modal-back{position:fixed;inset:0;z-index:150;background:rgba(5,5,7,.72);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:1.5rem;animation:cmFade .2s var(--ease)}
.cm-modal{width:100%;max-width:520px;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;
  background:var(--surface-solid);border:1px solid var(--line2);border-radius:var(--radius);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);overflow:hidden}
.cm-modal-wide{max-width:760px}
.cm-modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.cm-modal-head h2{font-size:1.2rem}
.cm-modal-x{background:none;border:0;color:var(--mut);font-size:1.6rem;line-height:1;cursor:pointer;padding:.1em .3em;border-radius:8px;transition:.15s}
.cm-modal-x:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.cm-modal-body{padding:1.4rem;overflow-y:auto}
.cm-modal-foot{padding:1rem 1.4rem;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:.6rem}

/* ── profile / cabinet specifics ── */
.cm-profile{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.cm-avatar{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent-h));
  color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:1.5rem;flex-shrink:0}
.cm-profile-main{flex:1;min-width:180px}
.cm-profile-main h2{font-size:1.25rem}
.cm-profile-main .cm-email{color:var(--mut);font-size:.9rem}
.cm-roles{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.cm-balance{text-align:right}
.cm-balance .cm-bal-num{font-size:1.8rem;font-weight:800;color:var(--carrot);font-variant-numeric:tabular-nums;line-height:1}
.cm-balance .cm-bal-lbl{color:var(--mut);font-size:.8rem}

.cm-tg-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-top:1rem}
.cm-tg-info{display:flex;align-items:center;gap:.8rem}
.cm-tg-ico{width:40px;height:40px;border-radius:12px;background:rgba(34,158,217,.14);display:grid;place-items:center;color:#34a9e6}
.cm-tg-info b{display:block}
.cm-tg-info span{color:var(--mut);font-size:.86rem}

/* notifications */
.cm-notif{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1.1rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.6rem;transition:.18s}
.cm-notif.cm-notif-pending{border-color:var(--line-neon)}
.cm-notif-dot{width:8px;height:8px;border-radius:50%;background:var(--mut);margin-top:.45em;flex-shrink:0}
.cm-notif-pending .cm-notif-dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.cm-notif-body{flex:1}
.cm-notif-body p{font-size:.92rem;line-height:1.4}
.cm-notif-time{color:var(--dim);font-size:.78rem;margin-top:.2rem}
.cm-notif-read{background:none;border:0;color:var(--accent);font:inherit;font-size:.82rem;cursor:pointer;white-space:nowrap}

/* offers list (order detail) */
.cm-offer{border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.1rem;margin-bottom:.7rem;background:var(--surface)}
.cm-offer-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.5rem}
.cm-offer-master{font-weight:600}
.cm-offer-meta{display:flex;gap:1.1rem;flex-wrap:wrap;color:var(--mut);font-size:.86rem;margin-bottom:.5rem}
.cm-offer-meta b{color:var(--txt)}
.cm-offer-comment{color:var(--txt);font-size:.92rem;line-height:1.5;white-space:pre-wrap}

/* reactions */
.cm-react{display:inline-flex;align-items:center;gap:.35em;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:999px;padding:.35em .8em;font:inherit;font-size:.84rem;color:var(--mut);cursor:pointer;transition:.16s}
.cm-react:hover{border-color:var(--line-neon);color:var(--accent)}
.cm-react.cm-react-on{color:var(--accent);border-color:var(--line-neon);background:var(--accent-soft)}
.cm-react-row{display:flex;gap:.5rem;flex-wrap:wrap}

/* filter bar */
.cm-filters{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.4rem;align-items:center}
.cm-filters input,.cm-filters select{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--txt);font:inherit;font-size:.9rem;padding:.55em .8em}
.cm-filters input:focus-visible,.cm-filters select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}

/* WP-REG-04: утилита-выгрузка сквозного реестра заказов — вторична к списку ниже */
.cm-export{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.1rem;margin-bottom:1.4rem}
.cm-export-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.cm-export-head b{font-size:.95rem}
.cm-export-head .cm-mono{font-size:.78rem;color:var(--mut)}
.cm-export-f{display:inline-flex;align-items:center;gap:.4em;color:var(--mut);font-size:.85rem}

/* detail layout */
.cm-detail{display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem;align-items:start}
.cm-detail-meta{display:grid;gap:.7rem}
.cm-detail-meta .cm-row{display:flex;justify-content:space-between;gap:1rem;padding:.5em 0;border-bottom:1px solid var(--line)}
.cm-detail-meta .cm-row span:first-child{color:var(--mut)}
.cm-back{display:inline-flex;align-items:center;gap:.4em;color:var(--mut);font-size:.9rem;margin-bottom:1rem}
.cm-back:hover{color:var(--accent)}

@media(max-width:760px){
  .cm-detail{grid-template-columns:1fr}
  .cm-field-row{grid-template-columns:1fr}
  .cm-nav-links{display:none}
  .cm-mascot{width:110px}
}

/* ════════════════════════════════════════════════════════════════════
   POP design на платформе (Биржа/Сообщество/Кабинет/Админка) = ТОТ ЖЕ
   светлый Gen-Z, что профиль/группы/витрина. Страницы грузят pop.css
   (хедер pp-nav, токены, шрифты Inter/Unbounded, мягкие тени), а тут
   cm-* компоненты ВЫРОВНЕНЫ под pop.css: карточки с soft-shadow и
   радиусом 22px, заголовки Unbounded, кнопки-пилюли коралл→фиолет.
   pop.css задаёт --bg/--ink/--line/--card/--grad-hero/--r/шрифты;
   тут — только cm-only токены + выравнивание cm-компонентов.
   Редактор /app остаётся ТЁМНЫМ (инструмент).
   ════════════════════════════════════════════════════════════════════ */
:root{
  --surface:#FFFFFF; --surface2:#FFFFFF; --surface-solid:#FFFFFF; --panel:#FFFFFF;
  --txt:#141414; --mut:#5B5B66; --dim:#8A8A92; --muted:#8A8A92;
  --line-neon:rgba(124,92,255,.42);
  --accent:#7C5CFF; --accent-h:#6B4AEE; --accent-ink:#FFFFFF;
  --cyan:#7C5CFF; --carrot:#FF7A1A; --magenta:#FF5E7E; --accent2:#FF7A1A;
  --accent-soft:rgba(124,92,255,.10); --accent-ring:rgba(124,92,255,.22);
  --radius:22px; --radius-sm:14px;
  --glow-blue:none; --glow-cyan:none; --glow-magenta:none;
}
/* фон НЕ задаём — candy-подсветки (radial коралл/фиолет) приходят из pop.css body */
body{color:var(--txt);font-family:'Inter',system-ui,-apple-system,sans-serif}

/* host шапки нейтрализуем: pp-nav (из pop.css) рисует mountNav внутрь него,
   у pp-nav свой sticky/фон — старый тёмный cm-бар не нужен */
.cm-app-nav{position:static;display:block;max-width:none;margin:0;padding:0;backdrop-filter:none}
.cm-app-nav::before{display:none}

/* заголовки → Unbounded (как в pop) */
.cm-page-head h1,.cm-card-title,.cm-tile-title,.cm-state-title,.cm-modal-head h2,
.cm-profile-main h2,.cm-balance .cm-bal-num{font-family:'Unbounded',system-ui,sans-serif;letter-spacing:-.02em}

/* карточки/поверхности → глубокая Pop-тень с фиолетовой подсветкой, крупный радиус */
.cm-card,.cm-tile,.cm-table-wrap,.cm-tg-row,.cm-notif,.cm-offer{
  background:#fff;border:1px solid var(--line);border-radius:24px;
  box-shadow:0 10px 34px -16px rgba(124,92,255,.20), 0 2px 10px rgba(20,20,20,.05)}
.cm-card{padding:1.6rem}
.cm-tile:hover{transform:translateY(-3px);border-color:var(--line);box-shadow:0 18px 44px -14px rgba(124,92,255,.30)}
.cm-tile-media{background:var(--bg2)}
.cm-wrap{padding-top:2.6rem}

/* кнопки → пилюли; primary = градиент коралл→фиолет с НЕОНОВОЙ подсветкой (канон lp-btn) */
.btn{border-radius:999px;font-weight:700}
.btn-primary{background:linear-gradient(135deg,#FF5E7E,#7C5CFF);color:#fff;border:none;
  box-shadow:0 12px 28px -10px rgba(124,92,255,.7);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s}
.btn-primary:hover{background:linear-gradient(135deg,#FF5E7E,#7C5CFF);box-shadow:0 18px 36px -10px rgba(124,92,255,.85);transform:translateY(-2px)}
.btn-ghost,.btn-secondary{background:#fff;color:var(--txt);border:1.5px solid var(--line2)}
.btn-ghost:hover{border-color:#7C5CFF;box-shadow:none}
.btn-danger{background:rgba(255,77,94,.10);color:var(--err);border:1px solid rgba(255,77,94,.30)}

/* табы → трек bg2, активная = белая пилюля с тенью (как pp-roleswitch) */
.cm-tabs{background:var(--bg2);border:1px solid var(--line)}
.cm-tab.cm-tab-active{background:#fff;color:var(--ink);box-shadow:0 8px 30px rgba(20,20,20,.06)}
.cm-tab-count{background:rgba(20,20,20,.07)}
.cm-tab.cm-tab-active .cm-tab-count{background:var(--accent-soft);color:var(--accent)}

/* поля ввода → pp-input (радиус, фиолетовый фокус) */
.cm-field input,.cm-field textarea,.cm-field select,.cm-filters input,.cm-filters select{
  background:#fff;border:1.5px solid var(--line);border-radius:14px;color:var(--ink)}
.cm-field input:focus-visible,.cm-field textarea:focus-visible,.cm-field select:focus-visible,
.cm-filters input:focus-visible,.cm-filters select:focus-visible{
  border-color:#7C5CFF;box-shadow:0 0 0 3px rgba(124,92,255,.15)}

/* статус-пилюли/теги/реакции — светлые подложки */
.cm-pill-mut{background:rgba(20,20,20,.05)}
.cm-tag{background:rgba(20,20,20,.04)}
.cm-react{background:#fff;border:1px solid var(--line2)}
.cm-react.cm-react-on{background:var(--accent-soft);border-color:#7C5CFF;color:var(--accent)}
.cm-table tr:hover td{background:rgba(124,92,255,.05)}
.cm-modal-x:hover{background:rgba(20,20,20,.06)}
.cm-avatar{background:linear-gradient(120deg,#2E6BFF,#7C5CFF)}
.cm-mascot{filter:drop-shadow(0 12px 28px rgba(124,92,255,.18))}
.cm-spinner{border-color:var(--line2);border-top-color:#7C5CFF}

/* ════════════════════════════════════════════════════════════════════
   КАНОН-БОГАТСТВО (эталон master_desktop.png): платформенный контент
   должен ощущаться так же сочно, как профиль pop.css — candy-стикеры
   статусов, градиент-акценты плиток, щедрые отступы, рейтинг-глубина.
   Только довыравнивание cm-* поверх светлого Pop-оверрайда выше.
   ════════════════════════════════════════════════════════════════════ */

/* — заголовок страницы: крупный Unbounded + воздух (как pp-name) — */
.cm-page-head{margin-bottom:2rem}
.cm-page-head h1{font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.1}
.cm-page-head p{font-size:1rem;margin-top:.4rem;max-width:52ch}
.cm-wrap{padding-top:3rem;padding-bottom:6rem}
.cm-grid{gap:1.2rem}

/* — плитка заказа/публикации: градиент-акцент сверху + глубже воздух/ховер — */
.cm-tile{position:relative;overflow:hidden}
.cm-tile::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#FF5E7E,#7C5CFF);
  opacity:0;transition:opacity .25s}
.cm-tile:hover::before{opacity:1}
.cm-tile-body{padding:1.3rem 1.4rem 1.5rem;gap:.7rem}
.cm-tile-title{font-family:'Unbounded',system-ui,sans-serif;font-size:1.08rem;letter-spacing:-.015em}

/* — candy-стикеры статусов (глубина профильного .sticker: белый inset + мягкая тень) — */
.cm-pill{box-shadow:0 0 0 1.5px #fff inset,0 3px 9px rgba(20,20,20,.10);font-weight:700;
  padding:.36em .8em}
.cm-pill-accent{color:#fff;background:linear-gradient(135deg,#7C5CFF,#6B4AEE);border-color:transparent}
.cm-pill-ok{color:#fff;background:linear-gradient(135deg,#1FBF75,#13A862);border-color:transparent}
.cm-pill-warn{color:#7a4a00;background:linear-gradient(135deg,#FFC53D,#FF9F1C);border-color:transparent}
.cm-pill-err{color:#fff;background:linear-gradient(135deg,#FF7A8E,#FF4D5E);border-color:transparent}
.cm-pill-mut{box-shadow:none;background:rgba(20,20,20,.05);color:var(--mut)}

/* — теги: акцентный = мягкий фиолетовый candy-чип — */
.cm-tag{border-radius:999px;font-weight:600;padding:.3em .7em}
.cm-tag-accent{color:#7C5CFF;background:rgba(124,92,255,.10);border-color:rgba(124,92,255,.28)}

/* — статус-бар рейтинга/прогресса в каноне (градиент-заливка) — */
.cm-bar i,.cm-progress i{background:linear-gradient(90deg,#2E6BFF,#7C5CFF)}

/* — фильтр-бар: чуть воздуха снизу — */
.cm-filters{margin-bottom:1.8rem;gap:.8rem}

/* — пустое состояние: крупнее заголовок (как pp-empty) — */
.cm-state-title{font-family:'Unbounded',system-ui,sans-serif;font-size:1.35rem}

/* ════════════════════════════════════════════════════════════════════
   МАСТЕР-ВИЗАРД СОЗДАНИЯ ЗАКАЗА (.ow-*) — B2C-first, дружелюбный.
   3 шага вместо стены из 13 полей: ведём новичка за руку, играюче.
   ════════════════════════════════════════════════════════════════════ */
.ow-wiz{display:flex;flex-direction:column;gap:1.5rem}

/* прогресс-шаги: candy-нумерация, активный = градиент-пилюля */
.ow-steps{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap}
.ow-step{display:inline-flex;align-items:center;gap:.45em;font-size:.85rem;font-weight:600;color:var(--mut)}
.ow-step i{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:999px;font-style:normal;
  font-size:.78rem;font-weight:800;background:rgba(20,20,20,.06);color:var(--mut);transition:.2s}
.ow-step.is-on{color:var(--ink)}
.ow-step.is-on i{background:linear-gradient(135deg,#FF5E7E,#7C5CFF);color:#fff;
  box-shadow:0 0 0 1.5px #fff inset,0 5px 14px -4px rgba(124,92,255,.7)}
.ow-step.is-done i{background:var(--accent-soft);color:var(--accent)}
.ow-step-sep{flex:0 0 20px;height:2px;border-radius:2px;background:rgba(20,20,20,.10)}

.ow-panel{animation:owIn .28s cubic-bezier(.22,1,.36,1)}
@keyframes owIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ow-q{font-family:'Unbounded',system-ui,sans-serif;font-size:1.3rem;letter-spacing:-.02em;line-height:1.15}
.ow-sub{color:var(--mut);font-size:.94rem;margin:.4rem 0 1.2rem;max-width:48ch;line-height:1.5}
.ow-tip{margin-top:1rem;font-size:.84rem;color:var(--mut);background:var(--accent-soft);
  border-radius:14px;padding:.6rem .9rem}
.ow-opt{font-style:normal;color:var(--mut);font-weight:400;opacity:.85}

/* большие выбор-карточки намерения */
.ow-cards{display:grid;gap:.75rem}
.ow-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:1rem;
  text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:1.05rem 1.2rem;cursor:pointer;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),border-color .16s,box-shadow .16s}
.ow-card:hover{transform:translateY(-2px);border-color:#7C5CFF;box-shadow:0 14px 32px -14px rgba(124,92,255,.42)}
.ow-card.is-on{border-color:#7C5CFF;box-shadow:0 0 0 3px rgba(124,92,255,.16)}
.ow-card-emo{grid-row:1/3;font-size:2rem;align-self:center;line-height:1}
.ow-card-t{font-weight:700;font-size:1.02rem}
.ow-card-d{color:var(--mut);font-size:.86rem;line-height:1.45}

/* пример-чипы для названия */
.ow-egs{display:flex;flex-wrap:wrap;gap:.45rem;margin:-.5rem 0 1.1rem}
.ow-eg{font-size:.82rem;font-weight:600;padding:.42em .85em;border-radius:999px;cursor:pointer;
  background:var(--accent-soft);color:var(--accent);border:1px solid rgba(124,92,255,.22);transition:.15s}
.ow-eg:hover{background:rgba(124,92,255,.18);transform:translateY(-1px)}

/* блоки деталей + выбор-чипы */
.ow-block{margin-bottom:1.2rem}
.ow-lbl{display:block;font-size:.84rem;color:var(--ink);font-weight:600;margin-bottom:.55rem}
.ow-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.ow-chip{font-size:.88rem;font-weight:600;padding:.52em .95em;border-radius:999px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);color:var(--txt);transition:.15s}
.ow-chip:hover{border-color:#7C5CFF}
.ow-chip.is-on{background:linear-gradient(135deg,#FF5E7E,#7C5CFF);color:#fff;border-color:transparent;
  box-shadow:0 6px 16px -6px rgba(124,92,255,.6)}
.ow-chip-soft{margin-top:.65rem;background:var(--bg2);border-style:dashed}
.ow-custom{margin-top:.7rem}
.ow-budget{display:grid;grid-template-columns:1fr auto;gap:.6rem;transition:.2s}
.ow-budget.is-off{opacity:.45;pointer-events:none}

/* тонкая настройка — свёрнутый аккордеон */
.ow-adv{margin-top:.4rem;border-top:1px dashed var(--line);padding-top:1rem}
.ow-adv>summary{cursor:pointer;font-weight:600;font-size:.92rem;list-style:none;display:flex;align-items:center;gap:.4em}
.ow-adv>summary::-webkit-details-marker{display:none}
.ow-adv>summary span{color:var(--mut);font-weight:400}
.ow-adv>summary::after{content:'＋';margin-left:auto;color:var(--mut);font-size:1.05em}
.ow-adv[open]>summary::after{content:'－'}
.ow-adv-body{padding-top:1.1rem}

/* — Кликко-компаньон: ведёт за руку, своя поза+реплика на каждом шаге — */
@keyframes owKlikkoPop{0%{transform:scale(.6) rotate(-6deg);opacity:0}60%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.ow-klikko{display:flex;align-items:flex-end;gap:11px;margin-bottom:1.2rem}
.ow-klikko-img{width:72px;height:72px;flex:none;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(124,92,255,.22))}
.ow-klikko-img.is-pop{animation:owKlikkoPop .5s cubic-bezier(.34,1.56,.64,1) both}
.ow-klikko-bubble{position:relative;flex:1;min-width:0;background:#fff;border:1.5px solid var(--line);
  border-radius:18px;box-shadow:0 8px 30px rgba(20,20,20,.06);padding:.7rem .95rem;
  font-weight:600;font-size:.93rem;color:var(--ink);line-height:1.35}
.ow-klikko-bubble::before{content:"";position:absolute;left:-8px;bottom:16px;width:14px;height:14px;background:#fff;
  border-left:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:rotate(45deg);border-bottom-left-radius:3px}
@media(max-width:560px){.ow-klikko-img{width:56px;height:56px}.ow-klikko-bubble{font-size:.86rem}}

/* — компактный анимированный маскот для loading-состояния — */
.cm-mascot-sm{width:96px;height:96px;object-fit:contain}

/* — мини-состояние ожидания (Кликко сторожит заказ, нет откликов) — */
.cm-mini{display:flex;align-items:center;gap:.9rem;padding:.2rem 0}
.cm-mini-img{width:72px;height:72px;flex:none;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(124,92,255,.18))}
.cm-mini p{color:var(--mut);font-size:.92rem;margin:0;line-height:1.4}

/* — банер «заказ выполнен» (celebrate) на детали заказа — */
.cm-done{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;padding:1rem 1.3rem;
  background:linear-gradient(135deg,rgba(31,191,117,.10),rgba(124,92,255,.10));
  border:1px solid rgba(31,191,117,.25);border-radius:24px}
.cm-done img{width:64px;height:64px;flex:none;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(31,191,117,.25))}
.cm-done b{display:block;font-family:'Unbounded',system-ui,sans-serif;font-size:1.02rem}
.cm-done span{color:var(--mut);font-size:.9rem}

/* ── гостевой CTA над публичной витриной биржи (незалогиненный видит ленту) ── */
.cm-guest-cta{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;padding:.9rem 1.2rem;
  background:linear-gradient(135deg,rgba(124,92,255,.12),rgba(233,74,140,.12));
  border:1px solid rgba(124,92,255,.28);border-radius:24px}
.cm-guest-cta-img{width:52px;height:52px;flex:none;object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(124,92,255,.25))}
.cm-guest-cta-text{flex:1;min-width:0}
.cm-guest-cta-text b{display:block;font-family:'Unbounded',system-ui,sans-serif;font-size:1rem}
.cm-guest-cta-text span{color:var(--mut);font-size:.88rem}
.cm-guest-cta .btn{flex:none}
@media(max-width:560px){.cm-guest-cta{flex-wrap:wrap}.cm-guest-cta .btn{width:100%}}

/* ── профиль-заполнение в кабинете (канон §2 LinkedIn-progress) ── */
.cm-fill{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.cm-fill-head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.6rem}
.cm-fill-lbl{font-family:'Unbounded',system-ui,sans-serif;font-size:.95rem;color:var(--txt)}
.cm-fill-lbl b{color:#7C5CFF}
.cm-fill-nudge{color:var(--mut);font-size:.84rem}
.cm-fill-bar{height:12px;border-radius:999px;background:var(--bg2,#F0ECE3);overflow:hidden}
.cm-fill-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#FF5E7E,#7C5CFF);
  transition:width .7s cubic-bezier(.34,1.56,.64,1)}

/* ── P2 форма отзыва: звёзды по категориям ── */
.rv-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0}
.rv-lbl{font-size:.92rem;color:var(--txt)}
.rv-divider{height:1px;background:var(--line);margin:.5rem 0}
.rv-stars{display:inline-flex;gap:.15rem}
.rv-star{border:none;background:none;cursor:pointer;font-size:1.5rem;line-height:1;
  color:var(--line2,#d9d4ca);padding:0 .05em;transition:transform .12s,color .12s}
.rv-star:hover{transform:scale(1.15)}
.rv-star.is-on{color:#FFC53D}
/* рейтинг на профиле (если профиль рисует .pp-rate-hero — уже в pop.css) */

/* ════════════════════════════════════════════════════════════════════
   ЛЕНТА — агрегированный домашний фид (Волна 1). Колонка, НЕ грид:
   момент/история «читай-открой», доминанта карточки — provenance
   «кто + почему ты это видишь». Разведение с Маркетплейсом (грид+цена).
   Префикс .fc-* (feed card). Реакции ленты → social; showcase-пабл → .cm-react.
   ════════════════════════════════════════════════════════════════════ */
/* Лента = VK-модель: читаемая колонка (--read-max=840, оптимум ~65-75 симв) + sticky-РЕЙЛ
   рекомендаций (320px) справа. Пара (840+рейл) центрируется в page-max 1360 → на широком
   экране правое поле занято КОНТЕНТОМ рейла, а не «зарезанной полосой в пустоте». Оболочка =
   page-max (nav-выравнивание, canon WIDTHS.md); реальная ширина тракта держится колонками
   (<1000 → width-guard чист). ≤1080 → одна колонка 840, рейл скрыт (рекомендации возвращаются
   inline в ленту). ≤760 → на всю ширину. «Билборд»-высота медиа гасится КАПОМ 360px. */
.cm-wrap-feed{max-width:var(--page-max);margin-inline:auto}
.fc-layout{display:grid;grid-template-columns:minmax(0,var(--read-max)) var(--fc-rail-w,320px);
  gap:2rem;justify-content:center;align-items:start}
.fc-main{min-width:0}
/* sticky-рейл: короткий (5 групп + 3 хита) → без внутреннего скролла; липнет под nav(56). */
.fc-rail{position:sticky;top:72px;align-self:start;display:flex;flex-direction:column;gap:1rem;min-width:0}
.fc-rail[hidden]{display:none}
.fc-head{margin-bottom:.9rem}
#newPub{display:inline-flex;align-items:center;gap:.4rem}
#newPub svg{flex:none}

/* — control-bar §15: ОДИН ярус, sticky под nav(56px). H1 НЕ sticky (уезжает). — */
.fc-bar{position:sticky;top:56px;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:.7rem;margin:0 0 1.3rem;padding:.6rem .2rem;
  background:rgba(255,253,247,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.fc-lenses{display:inline-flex;gap:.2rem;padding:.2rem;background:var(--bg2,#F1EDFB);
  border:1px solid var(--line);border-radius:999px;min-width:0;max-width:100%;overflow-x:auto}
.fc-lenses::-webkit-scrollbar{height:0}
.fc-lens{border:0;background:transparent;cursor:pointer;padding:.4em .95em;border-radius:999px;font:inherit;
  font-weight:700;font-size:.88rem;color:var(--mut);transition:.15s;white-space:nowrap;min-height:36px}
.fc-lens:hover{color:var(--txt)}
.fc-lens.is-on{background:#fff;color:var(--accent);box-shadow:0 4px 14px rgba(124,92,255,.20)}
.fc-lens:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.fc-show{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--mut);flex:none}
.fc-show-lbl{white-space:nowrap}
.fc-show select{background:#fff;border:1.5px solid var(--line);border-radius:12px;color:var(--txt);
  font:inherit;font-size:.88rem;padding:.5em .8em;min-height:38px;cursor:pointer}
.fc-show select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}

/* — колонка карточек (плотный вертикальный ритм, не «по посту на экран») — */
.fc-col{display:flex;flex-direction:column;gap:.8rem}
.fc-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 8px 28px -16px rgba(124,92,255,.20),0 2px 8px rgba(20,20,20,.04);
  transition:box-shadow .25s,border-color .25s}
.fc-card:hover{box-shadow:0 16px 40px -16px rgba(124,92,255,.28)}

/* — provenance-header «почему ты это видишь» (всегда первый) — */
.fc-prov{display:flex;align-items:center;gap:.7rem;padding:.8rem 1.2rem .3rem}
.fc-ava{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#FF5E7E,#7C5CFF);text-decoration:none}
.fc-ava img{width:100%;height:100%;object-fit:cover}
.fc-ava-init{color:#fff;font-weight:800;font-size:1.05rem}
.fc-prov-meta{min-width:0;display:flex;flex-direction:column;gap:.05rem}
.fc-prov-line{font-size:.92rem;color:var(--mut);line-height:1.3}
.fc-prov-actor{color:var(--txt);font-weight:700;text-decoration:none}
.fc-prov-actor:hover{color:var(--accent)}
.fc-prov-dot{color:var(--dim);margin:0 .12em}
.fc-prov-ctx{color:var(--mut)}
a.fc-prov-ctx{color:var(--accent);text-decoration:none;font-weight:600}
a.fc-prov-ctx:hover{text-decoration:underline}
.fc-prov-ctx--disco{display:inline-flex;align-items:center;gap:.28rem;color:var(--accent);font-weight:700}
.fc-prov-ctx--disco svg{width:14px;height:14px;flex:none}
.fc-prov-time{font-size:.78rem;color:var(--dim)}
.fc-prov--disco .fc-ava{background:var(--grad-hero)}

/* — ⋯ overflow-меню карточки (R-12): скрыть автора/группу — */
.fc-prov-more{margin-left:auto;position:relative;flex:none}
.fc-more-btn{display:grid;place-items:center;width:40px;height:40px;border:0;background:transparent;
  color:var(--mut);border-radius:50%;cursor:pointer;transition:.15s}
.fc-more-btn:hover{background:var(--accent-soft);color:var(--accent)}
.fc-more-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.fc-more-btn svg{fill:currentColor}
.fc-menu{position:absolute;top:44px;right:0;z-index:130;min-width:236px;padding:.35rem;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px -12px rgba(20,20,20,.28);
  display:flex;flex-direction:column;gap:.15rem;animation:cmFade .14s var(--ease)}
.fc-menu[hidden]{display:none}
.fc-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;font:inherit;
  font-size:.9rem;color:var(--txt);padding:.6rem .7rem;border-radius:10px;min-height:44px;transition:.12s}
.fc-menu-item:hover{background:var(--accent-soft);color:var(--accent)}
.fc-menu-item:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.fc-toast-undo{display:flex;align-items:center;gap:.9rem;justify-content:space-between}
.fc-undo-btn{flex:none;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:700;
  cursor:pointer;padding:.25em .45em;border-radius:8px;min-height:32px}
.fc-undo-btn:hover{text-decoration:underline}

/* — тело: заголовок Unbounded + текст-clamp — */
.fc-body{padding:.55rem 1.2rem .1rem;display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.fc-title{font-family:'Unbounded',system-ui,sans-serif;font-size:1.08rem;letter-spacing:-.015em;
  line-height:1.25;color:var(--txt)}
/* Пост-лента (VK-модель): текст поста читается ПОЛНОСТЬЮ, не режется в труху.
   Клэмп снят для текст-ведущих постов; overflow-wrap ловит длинные ссылки в широкой колонке. */
.fc-text{color:var(--txt);font-size:.95rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
/* На showcase-карточке (медиа-доминанта) текст — подпись под работой: мягкий кап 8 строк,
   чтобы медиа осталось звездой; полный текст — по «открыть». */
.fc-card--showcase .fc-text{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}

/* — медиа (showcase=доминанта 4:3; post-card=прикреплённое, ограничено) — */
.fc-media{position:relative;margin:.45rem 0 0;background:var(--bg2,#F4F1FB);display:grid;place-items:center;overflow:hidden}
.fc-media img,.fc-media model-viewer,.fc-media video{width:100%;display:block}
/* КАП высоты: showcase-медиа держит 4:3, но НЕ выше 360px → пост не билборд во весь экран
   (в колонке 760 без капа было ~510px = 1 пост на экран). object-fit:cover — кроп, не растяг. */
.fc-card--showcase .fc-media{width:100%;aspect-ratio:4/3;max-height:360px;margin-top:0}
.fc-card--showcase .fc-media:first-child{margin-top:0}
.fc-card--showcase .fc-media img,
.fc-card--showcase .fc-media model-viewer,
.fc-card--showcase .fc-media video,
.fc-card--showcase .fc-media .fc-pub-poster{height:100%;object-fit:cover}
.fc-card:not(.fc-card--showcase) .fc-media img{max-height:380px;object-fit:contain}
.fc-card:not(.fc-card--showcase) .fc-media model-viewer,
.fc-card:not(.fc-card--showcase) .fc-media video{height:320px}
.fc-media .fc-noimg{color:var(--dim);font-size:2.4rem;padding:2.4rem}
.fc-media-cap{position:absolute;left:0;right:0;bottom:0;padding:.5rem .85rem;font-size:.82rem;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.55))}
.fc-embed{display:block;padding:1.1rem;text-align:center;color:var(--accent);font-weight:600;text-decoration:none}
.fc-embed:hover{text-decoration:underline}

/* — действия: ♥ social-toggle · коммент/переход · открыть (§14 иерархия) — */
.fc-actions{display:flex;align-items:center;gap:.55rem;padding:.5rem 1rem .65rem}
.fc-react,.fc-act{display:inline-flex;align-items:center;gap:.35em;min-height:40px;padding:.4em .7em;
  border-radius:999px;border:1px solid transparent;background:transparent;color:var(--mut);
  font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:.15s;text-decoration:none}
.fc-react:hover,.fc-act:hover{background:var(--accent-soft);color:var(--accent)}
.fc-react .fc-ico{fill:none;stroke:currentColor;stroke-width:2}
.fc-react.fc-react-on{color:#FF4D6A}
.fc-react.fc-react-on .fc-ico{fill:#FF4D6A;stroke:#FF4D6A}
.fc-react:disabled{opacity:.55;cursor:default}
.fc-open{margin-left:auto;display:inline-flex;align-items:center;min-height:40px;padding:.4em .3em;
  color:var(--accent);font-weight:700;font-size:.88rem;text-decoration:none;white-space:nowrap}
.fc-open:hover{text-decoration:underline}
.fc-react:focus-visible,.fc-act:focus-visible,.fc-open:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.fc-ico{vertical-align:middle}
/* стопка: реакции (.rx-bar, стили в pop.css) сверху, коммент/открыть — рядом снизу */
.fc-actions--stack{flex-direction:column;align-items:stretch;gap:.5rem}
.fc-actions--stack .fc-actions-row{display:flex;align-items:center;gap:.55rem}
.fc-actions--stack .fc-actions-row .fc-open{margin-left:auto}

/* — встроенная карточка товара (product_share): горизонтальная, цена не доминанта — */
.fc-prod{display:flex;align-items:center;gap:.9rem;margin:.6rem 1.2rem .1rem;padding:.7rem;
  border:1px solid var(--line);border-radius:16px;background:var(--bg2,#F7F5FE);text-decoration:none;transition:.15s}
.fc-prod:hover{border-color:var(--accent);background:#fff;box-shadow:0 8px 22px -14px rgba(124,92,255,.4)}
.fc-prod-thumb{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none;background:#fff;display:grid;place-items:center}
.fc-prod-noimg{color:var(--dim);font-size:1.6rem}
.fc-prod-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.fc-prod-name{font-weight:700;color:var(--txt);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-prod-price{font-weight:700;color:var(--carrot);font-variant-numeric:tabular-nums;font-size:.95rem}
.fc-prod-free{color:#1FBF75}
.fc-prod-cta{flex:none;color:var(--accent);font-weight:700;font-size:.86rem;white-space:nowrap}

/* — Форма C: карточка-товар «хит» (Волна 3). Горизонтальная, цена не доминанта,
     системный (не amber) провенанс. Вся карточка = ссылка на PDP. — */
.fc-tp{display:block;text-decoration:none}
.fc-tp:hover{box-shadow:0 16px 40px -16px rgba(124,92,255,.28)}
.fc-tp-prov{display:flex;align-items:center;gap:.4rem;padding:.75rem 1.1rem .35rem;color:var(--mut);
  font-size:.82rem;font-weight:600}
.fc-tp-ico{display:inline-flex;align-items:center;color:var(--accent)}
.fc-tp-ico svg{width:15px;height:15px}
.fc-tp-row{display:flex;gap:.9rem;align-items:center;padding:.3rem 1.1rem 1rem}
.fc-tp-cover{width:88px;height:88px;border-radius:14px;object-fit:cover;flex:none;
  background:var(--bg2,#F4F1FB);display:grid;place-items:center}
.fc-tp-noimg{color:var(--dim);font-size:1.8rem}
.fc-tp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.28rem}
.fc-tp-title{font-weight:700;color:var(--txt);font-size:1rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fc-tp-cat{color:var(--mut);font-size:.82rem}
.fc-tp-foot{display:flex;align-items:center;gap:.7rem;margin-top:.1rem}
.fc-tp-price{font-weight:700;color:var(--txt);font-size:1.02rem;font-variant-numeric:tabular-nums}
.fc-tp-cta{margin-left:auto;color:var(--accent);font-weight:700;font-size:.9rem;white-space:nowrap}
.fc-tp:hover .fc-tp-cta{text-decoration:underline}

/* — репост: цитата на исходный пост — */
.fc-quote{display:block;margin:.5rem 1.2rem .1rem;padding:.7rem .9rem;border-left:3px solid var(--line-neon);
  background:var(--bg2,#F7F5FE);border-radius:0 12px 12px 0;text-decoration:none}
.fc-quote-head{font-weight:700;color:var(--txt);font-size:.86rem}
.fc-quote-title{font-weight:600;color:var(--txt);margin-top:.15rem}
.fc-quote-text{color:var(--mut);font-size:.9rem;line-height:1.45;margin-top:.15rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* — discovery: карточка-рекомендация группы (R-11). Бренд-обложка (не персиковая плашка):
     реальный cover ИЛИ генеративный градиент --cover-1..6 с моно-буквой; аватар перекрывает
     баннер (мини-профиль-хедер), акценты — фирменные violet/coral, без оранжевого. — */
.fc-greco{position:relative}
.fc-greco-cover{aspect-ratio:5/1;max-height:176px;background:var(--cover-5);background-size:cover;background-position:center;
  position:relative;overflow:hidden}
.fc-greco-cover--gen{background:var(--cover)}
.fc-greco-cover-mono{position:absolute;right:.7rem;bottom:-.6rem;font-family:'Unbounded',system-ui,sans-serif;
  font-weight:800;font-size:3.6rem;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.24);
  user-select:none;pointer-events:none}
.fc-greco-row{display:flex;align-items:center;gap:.85rem;padding:.85rem 1.1rem}
.fc-greco-ava{width:52px;height:52px;border-radius:15px;object-fit:cover;flex:none;margin-top:-34px;
  display:grid;place-items:center;background:var(--grad-hero);color:var(--card);font-weight:800;
  font-size:1.3rem;border:3px solid var(--card);box-shadow:0 6px 16px -4px rgba(124,92,255,.42);
  position:relative;z-index:2}
.fc-greco-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem}
.fc-greco-name{font-family:'Unbounded',system-ui,sans-serif;font-weight:700;color:var(--txt);text-decoration:none;
  font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-greco-name:hover{color:var(--accent)}
.fc-greco-why{display:inline-flex;align-items:center;gap:.32rem;color:var(--accent);font-weight:700;font-size:.84rem}
.fc-greco-why svg{width:15px;height:15px;flex:none}
.fc-greco-meta{color:var(--mut);font-size:.82rem;font-variant-numeric:tabular-nums}
.fc-greco-join{flex:none;align-self:center;min-height:40px;display:inline-flex;align-items:center;gap:.35rem}
.fc-greco-join svg{width:15px;height:15px}
.fc-greco--joined{opacity:.62}
.fc-disco-lbl{display:flex;align-items:center;gap:.42rem;font-family:'Unbounded',system-ui,sans-serif;
  font-size:.95rem;color:var(--txt);margin:.4rem .2rem -.2rem}
.fc-disco-lbl svg{width:18px;height:18px;color:var(--accent);flex:none}
/* never-blank постер работы без превью (тот же движок, что posterSurface товаров) */
.fc-pub-poster{display:grid;place-items:center;width:100%;height:100%}

/* ── sticky-рейл рекомендаций (десктоп ≥1081): группы «вступить» + хиты маркетплейса.
     Компактные карточки — плотность эталона кабинета (строки ~46px, паддинг 14px). ── */
.fc-rail-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:.85rem .9rem;
  box-shadow:0 8px 28px -20px rgba(124,92,255,.20),0 2px 8px rgba(20,20,20,.04)}
.fc-rail-h{display:flex;align-items:center;gap:.4rem;font-family:'Unbounded',system-ui,sans-serif;
  font-size:.86rem;color:var(--txt);margin:0 0 .5rem}
.fc-rail-h svg{width:16px;height:16px;color:var(--accent);flex:none}
/* строка группы */
.fc-rg{display:flex;align-items:center;gap:.6rem;padding:.45rem 0}
.fc-rg+.fc-rg{border-top:1px solid var(--line)}
.fc-rg-ava{width:38px;height:38px;border-radius:11px;flex:none;object-fit:cover;display:grid;place-items:center;
  background:var(--grad-hero);color:#fff;font-weight:800;font-size:1rem}
.fc-rg-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.08rem}
.fc-rg-name{font-weight:700;font-size:.86rem;color:var(--txt);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-rg-name:hover{color:var(--accent)}
.fc-rg-meta{color:var(--mut);font-size:.76rem;font-variant-numeric:tabular-nums}
.fc-rg-join{flex:none;border:1px solid var(--line-neon);background:var(--accent-soft);color:var(--accent);
  font:inherit;font-weight:700;font-size:.78rem;padding:.34em .72em;border-radius:999px;cursor:pointer;
  min-height:32px;transition:.15s}
.fc-rg-join:hover{background:var(--accent);color:#fff}
.fc-rg-join:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.fc-greco--joined,.fc-rg .fc-rg-join.btn-ghost{opacity:.62}
/* мини-строка товара-хита */
.fc-rp{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;text-decoration:none}
.fc-rp+.fc-rp{border-top:1px solid var(--line)}
.fc-rp-cover{width:44px;height:44px;border-radius:10px;flex:none;object-fit:cover;
  background:var(--bg2,#F4F1FB);display:grid;place-items:center}
.fc-rp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem}
.fc-rp-name{font-weight:600;font-size:.82rem;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-rp-price{font-weight:700;font-size:.8rem;color:var(--carrot);font-variant-numeric:tabular-nums}
.fc-rp:hover .fc-rp-name{color:var(--accent)}

/* Рейл виден только на широком экране; ≤1080 → одна колонка 840 (рекомендации возвращаются
   inline в ленту через interleaveForYou/discover). */
@media(max-width:1080px){ /* width-ok: breakpoint схлопывания рейла, не ширина оболочки */
  .fc-layout{grid-template-columns:minmax(0,var(--read-max))}
  .fc-rail{display:none}
}

/* — тумблер настроек уведомлений (WP-04) + iOS-switch (переиспользуемый) — */
.cm-notif-prefs{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;
  margin-bottom:1rem;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 28px -18px rgba(124,92,255,.18)}
.cm-notif-prefs-main{min-width:0}
.cm-notif-prefs-main b{display:block;font-size:.95rem;color:var(--txt)}
.cm-notif-prefs-main span{display:block;color:var(--mut);font-size:.84rem;line-height:1.4;margin-top:.15rem}
.cm-switch{position:relative;flex:none;display:inline-block;width:52px;height:32px;cursor:pointer}
.cm-switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cm-switch-track{position:absolute;inset:0;border-radius:999px;background:var(--line2,#DAD5E8);transition:.2s}
.cm-switch-thumb{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(20,20,20,.25);transition:.2s}
.cm-switch input:checked~.cm-switch-track{background:linear-gradient(135deg,#FF5E7E,#7C5CFF)}
.cm-switch input:checked~.cm-switch-track .cm-switch-thumb{transform:translateX(20px)}
.cm-switch input:focus-visible~.cm-switch-track{box-shadow:0 0 0 3px var(--accent-ring)}
.cm-switch input:disabled~.cm-switch-track{opacity:.55}

/* — cold-start онбординг + мультистрочные CTA пустых состояний — */
.fc-onboard{display:flex;gap:.9rem;align-items:center;padding:1rem 1.2rem;border-radius:20px;
  background:linear-gradient(135deg,rgba(124,92,255,.10),rgba(255,94,126,.10));border:1px solid rgba(124,92,255,.22);
  box-shadow:0 14px 40px -18px rgba(124,92,255,.30),0 2px 8px rgba(20,20,20,.04)}
.fc-onboard-img{width:60px;height:60px;flex:none;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(124,92,255,.22))}
.fc-onboard-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.fc-onboard-txt b{font-family:'Unbounded',system-ui,sans-serif;font-size:1.02rem}
.fc-onboard-txt span{color:var(--mut);font-size:.92rem;line-height:1.45}
.fc-onboard-ctas,.fc-empty-ctas{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.45rem}
.fc-empty-ctas{justify-content:center}
/* компактные CTA пустых состояний — не «баллоны»: 40px десктоп, 44px тач-таргет мобайл */
.fc-onboard-ctas .btn,.fc-empty-ctas .btn{padding:.5em 1.05em;font-size:.92rem;min-height:40px}

@media(max-width:760px){
  .cm-wrap-feed{max-width:none}
  .fc-layout{grid-template-columns:1fr;gap:0}
  /* ── 🔴 CONTROL-BAR ЛЕНТЫ: ДВА ЯРУСА (претензия владельца 2026-08-28, та же болезнь,
     что лечили на маркетплейсе). ЗАМЕР ДО, layout 375: трек .fc-lenses 221.6px при
     нужных 280 → переполнение 60px, «Интересное» обрезано; на 305 трек 151.6 против 280 →
     переполнение 130px, «Подписки» резалось ПОСРЕДИ СЛОВА. Плюс бежевая подложка трека
     обрывалась на середине ряда, а <select> стоял за ней на белом — два контрола одного
     ряда из разных вёрсток («разъехались»).
     ПРИЧИНА: сегмент и селект делили ОДИН ряд через justify-content:space-between. Селект
     занимает 91px (нативный select меряется по САМОЙ ШИРОКОЙ опции — «Товары»), и сегменту
     доставался огрызок, в котором три вкладки физически не помещаются ни на одной мобильной
     ширине. Сокращением подписей это не лечится: не хватало 60px на 375 и 130px на 305.
     ЛЕЧЕНИЕ — то же, что в тулбаре маркетплейса: ярус 1 = сегмент во ВСЮ ширину (трек-
     подложка теперь тоже во всю ширину — жалоба на обрыв фона уходит вместе с версткой),
     ярус 2 = селект правым якорем. На 375 три вкладки помещаются ЦЕЛИКОМ, обрезки нет
     вообще; ступень ≤340 ниже добирает узкие экраны кеглем и паддингом, а не многоточием. */
  /* top НЕ трогаем: на 561–760 полоса с логотипом ещё на месте (её снос начинается
     с 560), и бар обязан липнуть ПОД неё. Обнуление — ниже, в блоке ≤560. */
  .fc-bar{margin:0 0 .8rem;padding:.25rem .1rem;gap:6px;top:56px}
  .fc-lenses{padding:.15rem;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
  .fc-lenses::-webkit-scrollbar{width:0;height:0;display:none}
  .fc-lens{padding:.32em .72em;font-size:.84rem;min-height:32px}
  .fc-show-lbl{display:none}
  .fc-show select{min-height:32px;padding:.3em .65em;font-size:.85rem}
  .fc-head{margin-bottom:.7rem}
  .cm-page-head p{font-size:.88rem;margin-top:.25rem}
  /* — пустое состояние «Собери свою ленту» плотнее — */
  .fc-onboard{flex-direction:column;text-align:center;padding:1rem 1.05rem;gap:.6rem}
  .fc-onboard-img{width:56px;height:56px}
  .fc-onboard-txt b{font-size:1rem}
  .fc-onboard-txt span{font-size:.86rem;line-height:1.4}
  .fc-onboard-ctas{justify-content:center;margin-top:.3rem}
  .fc-onboard-ctas .btn,.fc-empty-ctas .btn{min-height:44px}
  /* — секция «Рекомендуем вступить» и cm-* пустышки компактнее — */
  .fc-disco-lbl{font-size:.88rem;margin:.3rem .1rem -.2rem}
  /* обложка рекомендации: на узкой колонке 5:1 схлопнулась бы в полоску (~75px) —
     даём 5:2, чтобы картинка читалась, но не билборд (~150-165px на телефоне) */
  .fc-greco-cover{aspect-ratio:5/2;max-height:170px}
  .cm-state{padding-top:1.6rem;padding-bottom:1.6rem;gap:.55rem}
  .cm-mascot{width:84px}
  .cm-state-title{font-size:1.1rem}
  .cm-state-txt{font-size:.88rem}
}

/* ── ДВА ЯРУСА — ТОЛЬКО ТЕЛЕФОН. Точка изгиба 560 — ТА ЖЕ, на которой pop.css снимает
   полосу с логотипом и включает нижнюю панель разделов: между «шапка есть» и «шапки нет»
   не должно быть ширины, где бар липнет не туда. На 561–760 ряд ≥513px, куда трек 282 и
   селект 90 садятся в ОДИН ряд без обрезки — ломать его на два яруса незачем. */
@media(max-width:560px){
  /* Шапки над баром больше нет — липнуть под несуществующие 56px значит оставить
     пустую полосу поверх контента. .pp-nav на этой же ширине переведён в static
     (pop.css), поэтому верхнюю кромку никто не занимает и коллизии нет. */
  .fc-bar{top:0}
  /* Бар липкий, а .cm-wrap даёт 24px боковых полей — без выпуска в край подложка бара
     обрывалась, и мимо неё в поля проезжал контент. Выпускаем на всю ширину экрана и
     возвращаем те же 24px внутренним паддингом: высота не меняется, читается как
     полноценная панель приложения, а не как вставка. */
  .fc-bar{flex-wrap:wrap;margin-inline:-1.5rem;padding-inline:1.5rem}
  .fc-lenses{flex:1 1 100%;order:1}      /* ярус 1: трек-подложка во ВСЮ ширину ряда */
  /* Вкладки делят трек между собой: flex:1 1 auto растит каждую на равную долю свободного
     места, СОХРАНЯЯ разницу их содержимого. Три следствия сразу: трек всегда заполнен (не
     остаётся 41px пустой бежевой подложки справа), обрезка невозможна в принципе (никто не
     ужимается ниже своего текста), и активная пилюля садится на честную треть — как в
     системном сегменте. Равные доли (flex:1 1 0) не годятся: «Интересное» шире трети трека
     на 305 и упёрлось бы в многоточие. */
  .fc-lens{flex:1 1 auto;min-width:0;text-align:center}
  /* Ярус 2: подпись слева, контрол справа — ряд-форма, а не одинокий селект, повисший
     справа над пустотой. Подпись возвращаем именно здесь (на планшете её скрывает
     блок ≤760): ярусу нужен левый якорь, иначе половина строки — воздух. */
  .fc-show{order:2;width:100%;justify-content:space-between;gap:.5rem}
  .fc-show-lbl{display:inline}
}

/* ≤340 layout (320px-вьюпорт с классическим скроллбаром = 305): даже полноширинный трек
   даёт 257px против нужных 280 — не хватает 23. Забираем их кеглем и паддингом вкладок,
   НЕ многоточием: обрезка подписи раздела читается как поломка (правило прошлой итерации,
   «влезает с запасом 0px» = красный). Замер после ступени — в отчёте задачи. */
@media(max-width:340px){
  /* Забираем миллиметры В ТАКОМ порядке: сначала «пустое» (зазор между вкладками и паддинг
     трека), потом паддинг вкладки, и только в последнюю очередь кегль — подпись раздела
     должна оставаться читаемой. Замер после ступени — в отчёте задачи. */
  .fc-lenses{gap:0;padding:.1rem}
  .fc-lens{padding:.3em .38em;font-size:.78rem}
  .fc-show select{min-height:32px;padding:.3em .55em;font-size:.8rem}
  .fc-show-lbl{font-size:.8rem}
}

/* ════════════════════════════════════════════════════════════════════
   Account Center — СГРУППИРОВАННЫЙ левый рейл кабинета (заменил плоский
   .cm-tabs «вповалку под H1»). Профиль/«Закрыть аккаунт» — bookends вне
   рейла. Плотность = эталон cabinet/@handle: компактные строки, 4px-ритм,
   контролы 38px (десктоп), 40px тач-таргет на мобилке.
   ════════════════════════════════════════════════════════════════════ */
.cm-acct{display:grid;grid-template-columns:224px 1fr;gap:1.4rem;align-items:start;margin-top:1.5rem}
.cm-acct-rail{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.1rem;
  background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:.5rem}
.cm-acct-glabel{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);padding:.75rem .7rem .3rem}
.cm-acct-rail>.cm-acct-glabel:first-child{padding-top:.35rem}
.cm-acct-btn{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;border:0;
  background:transparent;color:var(--mut);font:inherit;font-weight:600;font-size:.9rem;
  padding:.5rem .7rem;border-radius:12px;cursor:pointer;transition:.14s;min-height:38px}
.cm-acct-btn:hover{background:rgba(124,92,255,.07);color:var(--txt)}
.cm-acct-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.cm-acct-btn.is-active{background:#fff;color:var(--accent);box-shadow:0 4px 14px -6px rgba(124,92,255,.4)}
.cm-acct-ico{display:inline-flex;flex-shrink:0;color:currentColor;opacity:.85}
.cm-acct-btn.is-active .cm-acct-ico{opacity:1}
.cm-acct-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-acct-count{font-size:.72rem;font-weight:700;background:rgba(20,20,20,.07);color:var(--mut);
  border-radius:999px;padding:.05em .5em;font-variant-numeric:tabular-nums;flex-shrink:0}
.cm-acct-btn.is-active .cm-acct-count{background:var(--accent-soft);color:var(--accent)}
/* Админ-рейл (#rail): счётчик = ЯВНЫЙ знак уведомления — акцент-пилюля, читается с одного
   взгляда. Скоуп #rail, чтобы не трогать нейтральные счётчики кабинета. Высота 18px (D0). */
#rail .cm-acct-count,
#rail .cm-acct-btn.is-active .cm-acct-count{min-width:18px;height:18px;line-height:18px;padding:0 5px;
  background:var(--accent);color:#fff;font-weight:800;text-align:center;box-shadow:0 2px 6px -1px rgba(124,92,255,.45)}
.cm-acct-panel{min-width:0}

/* Кабинет: вертикальный поток блоков-секций. На мобиле переупорядочивается — меню разделов
   поднимается сразу под компактную шапку профиля, а «заполнение профиля» / Pro-уровень /
   «Закрыть аккаунт» уходят ниже панели (D0: находимость навигации без раздувания шапки). */
.cm-cab{display:flex;flex-direction:column}
.cm-cab-fill .cm-fill{margin-top:0;border-top:0;padding-top:0}
.cm-acct-railhead{display:none}
#reqBanner:empty,#dangerZone:empty{display:none}

/* секц-заголовок внутри панели (Интеграции / Токены) */
.cm-acct-sec{font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim);margin:0 0 .6rem}

/* витрина интеграций — компактные статус-плитки (auto-fill, D0-плотность) */
.cm-intg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem}
.cm-intg{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:.75rem .85rem}
.cm-intg-ico{width:34px;height:34px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent)}
.cm-intg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
.cm-intg-main b{font-size:.9rem;font-weight:600}
.cm-intg-cta{color:var(--accent);text-decoration:none;font-size:.82rem;font-weight:600;white-space:nowrap;flex-shrink:0}
.cm-intg-cta:hover{text-decoration:underline}
.cm-intg.is-soon{opacity:.6}
.cm-intg.is-soon .cm-intg-ico{background:rgba(20,20,20,.05);color:var(--mut)}

/* лента уведомлений: настройка вынесена в единый источник (openNotifSettings) */
.cm-notif-settings-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem}

@media(max-width:760px){
  /* D0-находимость: меню разделов поднято сразу под шапку профиля; «заполнение профиля»,
     Pro-уровень и «Закрыть аккаунт» переупорядочены ниже панели. Рейл читается как МЕНЮ
     (сетка 2 кол. + видимый заголовок), а не россыпь чипов; тап по разделу авто-скроллит
     к панели (activateTab в cabinet.js). Порядок: шапка → МЕНЮ+панель → заполнение → Pro → danger. */
  .cm-cab{gap:1rem}
  .cm-cab>*{margin-block:0}
  .cm-cab>.cm-card{margin-top:0}
  .cm-cab-id{order:1;padding:1rem}
  .cm-acct{order:2;margin-top:0;grid-template-columns:1fr;gap:1rem}
  .cm-cab-fill{order:3}
  .cm-cab-rep{order:4}
  #dangerZone{order:5}

  /* Плотная шапка профиля */
  .cm-cab-id .cm-avatar{width:48px;height:48px;font-size:1.2rem;border-radius:13px}
  .cm-cab-id .cm-profile{gap:.8rem}

  /* Pro-уровень — компактная строка (прогресс-бар дублирует текст-нудж → скрыт), не «конец страницы» */
  .cm-cab-rep{padding:.85rem 1rem}
  .cm-cab-rep .cm-fill-bar{display:none}
  .cm-cab-rep .cm-fill-head{margin-bottom:.35rem}

  /* Рейл = ЯВНОЕ меню разделов: 2 колонки, сгруппировано, с видимым заголовком; sticky снят (§7) */
  /* 🔴 minmax(0,1fr), а не 1fr: у «1fr» минимум = min-content колонки, а в кнопку
     входит неужимаемый бейдж-счётчик. На трёхзначном бейдже («342») min-content
     обеих колонок перерастал вьюпорт и тянул ВСЮ сетку .cm-acct — страница
     становилась шире экрана (394px при вьюпорте 390) без горизонтального скролла,
     и правый край админки просто обрезался. Ловится только на больших числах. */
  .cm-acct-rail{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;padding:.7rem}
  .cm-acct-railhead{display:block;grid-column:1/-1;margin:0;padding:.15rem .15rem .1rem;
    font-family:'Unbounded',system-ui,sans-serif;font-size:.92rem;color:var(--txt);letter-spacing:-.01em}
  .cm-acct-glabel{grid-column:1/-1;width:auto;padding:.5rem .2rem .05rem}
  .cm-acct-btn{width:auto;min-width:0;min-height:42px;border:1px solid var(--line);background:var(--card)}
  .cm-acct-btn.is-active{border-color:var(--line-neon)}
  .cm-acct-lbl{white-space:normal;flex:1}
  .cm-intg-grid{grid-template-columns:1fr}
}

/* Инлайн бренд-иконки (.pn-ico) для хаба store.html — оригинал в styles.css, которую хаб не грузит */
.pn-ico{ width:15px; height:15px; flex:none; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.pn-ico-sm{ width:13px; height:13px; vertical-align:-1px; }
.jb-hint .pn-ico, .step-hint .pn-ico{ stroke:currentColor; opacity:.85; }

/* ════════════════════════════════════════════════════════════════════
   АДМИН-КОКПИТ (.ad-*) — плотный staff-дашборд поверх cm-* хрома.
   Навигация разделов = СГРУППИРОВАННЫЙ рейл (.cm-acct*, тот же что кабинет,
   вместо 13 пилюль «вповалку»). Плотность = эталон cabinet/DENSITY.md:
   KPI-val 22px (не 30), карты paddings 12–14px, gap 8–10px, контролы 38px.
   Все иконки — line-SVG currentColor (бренд-набор), НИГДЕ emoji-контролы.
   ════════════════════════════════════════════════════════════════════ */
.ad-rail-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* HERO-вердикт обзора (одна фраза «что ждёт внимания») */
.ad-hero{display:flex;align-items:center;gap:.55rem;padding:.65rem .95rem;border-radius:14px;margin-bottom:1.1rem;
  font-weight:600;font-size:.92rem;border:1px solid var(--line);background:var(--card);line-height:1.3}
.ad-hero svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* тона вердикта — из рамп tokens.css, а не сырыми rgba/hex: на экране уже было
   ТРИ разных зелёных и два янтарных, из-за чего «цвет = статус» переставал читаться */
.ad-hero.is-ok{border-color:var(--emerald-200);background:var(--emerald-50);color:var(--emerald-800)}
.ad-hero.is-warn{border-color:var(--amber-300);background:var(--amber-50);color:var(--amber-900)}
.ad-hero.is-bad{border-color:var(--rose-200);background:var(--rose-50);color:var(--rose-800)}


/* секция обзора */
.ad-sec{margin-bottom:1.4rem}
.ad-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.6rem}
.ad-sec-title{display:inline-flex;align-items:center;gap:.42rem;font-family:'Unbounded',system-ui,sans-serif;
  font-size:.92rem;font-weight:700;color:var(--txt);letter-spacing:-.01em}
.ad-sec-title svg{width:16px;height:16px;color:var(--accent);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ad-sec-note{color:var(--mut);font-size:.8rem;font-variant-numeric:tabular-nums}

/* KPI-сетка (компактные ячейки, числа всегда видимы текстом) */
.ad-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.ad-kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.7rem .85rem;
  display:flex;flex-direction:column;gap:.12rem;min-width:0}
.ad-kpi-val{font-family:'Unbounded',system-ui,sans-serif;font-size:1.35rem;font-weight:700;color:var(--txt);
  font-variant-numeric:tabular-nums;line-height:1.12;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis}
.ad-kpi-lbl{font-size:.75rem;color:var(--mut);font-weight:600}
.ad-kpi-sub{font-size:.73rem;color:var(--dim);font-variant-numeric:tabular-nums}
.ad-kpi.is-good .ad-kpi-val{color:var(--emerald-700)}
.ad-kpi.is-bad .ad-kpi-val{color:var(--err)}
/* второстепенная метрика в KPI-сетке — гасим цветом, не размером (иерархия без ломки ритма) */
.ad-kpi.is-mut .ad-kpi-val{color:var(--mut)}

/* алерт-карты обзора (кликабельны → своя вкладка) */
.ad-alerts{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.6rem;margin-bottom:1.4rem}
.ad-alert{display:flex;align-items:center;gap:.65rem;text-align:left;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--line2);border-radius:14px;padding:.65rem .8rem;cursor:pointer;font:inherit;
  transition:.15s;min-height:56px;width:100%}
.ad-alert:hover{border-color:var(--line-neon);box-shadow:0 8px 22px -14px rgba(124,92,255,.4);transform:translateY(-1px)}
.ad-alert:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.ad-alert[disabled]{cursor:default}
.ad-alert-ico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent)}
.ad-alert-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ad-alert-main{min-width:0;display:flex;flex-direction:column;line-height:1.1;gap:.1rem}
.ad-alert-num{font-family:'Unbounded',system-ui,sans-serif;font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.ad-alert-lbl{font-size:.77rem;color:var(--mut);font-weight:600}
.ad-alert.is-warn{border-left-color:#FF9F1C}
.ad-alert.is-warn .ad-alert-ico{background:rgba(255,159,28,.12);color:#c26a00}
.ad-alert.is-ok{border-left-color:#1FBF75}
.ad-alert.is-ok .ad-alert-ico{background:rgba(31,191,117,.12);color:#0f9d58}

/* тонкая инфо-плашка (предзапуск/демо-исключение) — не абзац */
.ad-note{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--mut);
  background:var(--bg2);border:1px dashed var(--line);border-radius:12px;padding:.5rem .8rem;margin-top:.7rem;line-height:1.35}
.ad-note svg{width:15px;height:15px;flex:none;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* мини-распределение / топ-список (n_parts, топ-ошибки) */
.ad-dist{display:flex;flex-direction:column;gap:.4rem}
.ad-dist-row{display:grid;grid-template-columns:8.5ch 1fr auto;align-items:center;gap:.6rem;font-size:.82rem}
.ad-dist-key{color:var(--mut);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-dist-track{height:8px;border-radius:999px;background:var(--bg2);overflow:hidden}
.ad-dist-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#7C5CFF,#FF5E7E)}
.ad-dist-val{font-variant-numeric:tabular-nums;color:var(--txt);font-weight:600;min-width:3ch;text-align:right}

/* control-bar таблиц (§15 — ОДНА панель: поиск+фильтр+сорт в ряд) */
.ad-toolbar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:1rem}
.ad-toolbar input,.ad-toolbar select{background:#fff;border:1.5px solid var(--line);border-radius:12px;
  color:var(--txt);font:inherit;font-size:.88rem;padding:.5em .75em;min-height:38px}
.ad-toolbar input{min-width:min(240px,60vw)}
.ad-toolbar input:focus-visible,.ad-toolbar select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.ad-toolbar-sp{margin-left:auto}
.ad-toolbar-lbl{font-size:.82rem;color:var(--mut);font-weight:600}

/* ── Выбор периода (переиспользуемый) — плотность ПЛОТНЕЕ эталона .cm-sort (D0) ── */
.ad-period{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.ad-period svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ad-period-presets{display:inline-flex;flex-wrap:wrap;gap:.15rem;padding:.15rem;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--rad-pill)}
.ad-period-chip{display:inline-flex;align-items:center;gap:.25rem;border:0;cursor:pointer;
  background:transparent;color:var(--mut);font:inherit;font-size:.78rem;font-weight:600;
  line-height:1;padding:.24rem .55rem;border-radius:var(--rad-pill);transition:all .15s;
  font-variant-numeric:tabular-nums}
.ad-period-chip:hover{color:var(--txt)}
.ad-period-chip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.ad-period-chip.is-on{color:#fff;background:var(--grad-hero);
  box-shadow:0 1px 6px rgba(124,92,255,.3)}
.ad-period-toggle{padding-left:.5rem}
/* режим «Свой»: пресеты гаснут, поля дат показываются */
.ad-period.is-custom .ad-period-preset{opacity:.4}
.ad-period-custom{display:none}
.ad-period.is-custom .ad-period-custom{display:inline-flex;align-items:center;gap:.3rem}
.ad-period-date{background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad-md);color:var(--txt);font:inherit;font-size:.78rem;
  padding:.2rem .4rem;min-height:30px}
.ad-period-date:focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring)}
.ad-period-dash{color:var(--mut);font-weight:600}
.ad-period-apply{border:0;cursor:pointer;background:var(--grad-hero);color:#fff;
  font:inherit;font-size:.78rem;font-weight:600;padding:0 .7rem;min-height:30px;
  border-radius:var(--rad-md);box-shadow:0 1px 6px rgba(124,92,255,.3);
  transition:filter .15s}
.ad-period-apply:hover{filter:brightness(1.05)}
.ad-period-apply:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
@media(max-width:600px){
  .ad-period,.ad-period-custom{width:100%}
  .ad-period-date{flex:1;min-width:0}
}

/* числовые ячейки таблиц — вправо, tabular */
td.ad-num,th.ad-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ad-cellsub{display:block;color:var(--dim);font-size:.76rem;font-variant-numeric:tabular-nums}

/* дата+время регистрации в ячейке — компактно, не переносится */
td.ad-dt{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mut);font-size:.82rem}

/* строка-ссылка: клик по строке → профиль/товар. Внутри реальный <a class="ad-acct-link">
   для клавиатуры и «открыть в новой вкладке»; строку добивает делегирование в JS. */
tr.ad-rowlink{cursor:pointer}
.ad-acct-link{color:var(--txt);font-weight:700;text-decoration:none}
.ad-acct-link:hover{color:var(--accent);text-decoration:underline}
.ad-acct-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-radius:5px}
/* демо-бейдж рядом с email/кодом — приглушённый и компактнее статус-пилюль, чтобы живые
   аккаунты сразу отличались от тестовых, но метка не перетягивала внимание */
.ad-demo{margin-left:.4rem;vertical-align:middle;padding:.1em .5em;font-size:.66rem;font-weight:600;text-transform:lowercase}

/* LEGACY. Инпуты «Рег. с — по» во вкладке «Пользователи» заменены КАНОН-пикером
   периода (.dr-*, единый период экрана): два выбора дат на одном экране = шум.
   Правила оставлены на случай другого потребителя — кандидат на вычистку. */
.ad-dtf{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--mut);font-weight:600;white-space:nowrap}
.ad-dtf input[type=date]{font-size:.82rem}
.ad-dtf-dash{color:var(--dim)}

/* «показать ещё» */
.ad-more{display:flex;justify-content:center;margin-top:1rem}

/* ── инбокс поддержки = КАНБАН (Новые / В работе / Решённые) ──
   D0-плотность: колонки-дорожки на bg2, карточки компактные (~100px), контролы 30px.
   Клик по карте (.ad-kb-main) → тред; кнопка статуса (.ad-kb-act) — сиблинг, не вложена. */
.ad-kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;align-items:start}
.ad-kb-col{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:.5rem;
  display:flex;flex-direction:column;gap:.45rem;min-width:0}
.ad-kb-colhead{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.1rem .3rem}
.ad-kb-coltitle{font-weight:700;font-size:.82rem;color:var(--txt)}
.ad-kb-colcount{min-width:20px;height:18px;line-height:18px;padding:0 6px;text-align:center;border-radius:999px;
  background:rgba(20,20,20,.06);color:var(--mut);font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.ad-kb-cards{display:flex;flex-direction:column;gap:.4rem;min-height:36px}
.ad-kb-empty{color:var(--dim);font-size:.82rem;text-align:center;padding:.55rem 0}
.ad-kb-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.14s}
.ad-kb-card:hover{border-color:var(--line-neon);box-shadow:0 8px 20px -14px rgba(124,92,255,.35)}
.ad-kb-card.is-unread{border-left:3px solid var(--accent)}
.ad-kb-main{display:flex;flex-direction:column;gap:.28rem;width:100%;text-align:left;border:0;background:transparent;
  font:inherit;cursor:pointer;padding:.5rem .55rem}
.ad-kb-main:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent-ring)}
.ad-kb-r1{display:flex;align-items:center;gap:.4rem;min-width:0}
.ad-kb-ava{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#FF5E7E,#7C5CFF);color:#fff;font-weight:800;font-size:.72rem;overflow:hidden}
.ad-kb-ava img{width:100%;height:100%;object-fit:cover}
.ad-kb-who{flex:1;min-width:0;font-weight:600;font-size:.85rem;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-kb-card.is-unread .ad-kb-who{font-weight:800}
.ad-kb-badge{flex:none;min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.7rem;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.ad-kb-r2{display:flex;align-items:center;gap:.4rem;min-width:0}
.ad-kb-time{margin-left:auto;flex:none;font-size:.72rem;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.ad-kb-preview{font-size:.8rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-kb-card.is-unread .ad-kb-preview{color:var(--txt)}
.ad-kb-foot{display:flex;align-items:center;justify-content:flex-end;gap:.3rem;padding:.3rem .5rem;border-top:1px solid var(--line)}
.ad-kb-act{border:1px solid var(--line);background:#fff;color:var(--mut);font:inherit;font-size:.74rem;font-weight:600;
  padding:.3rem .6rem;border-radius:8px;cursor:pointer;min-height:30px;transition:.14s}
.ad-kb-act:hover{border-color:var(--line-neon);color:var(--accent)}
.ad-kb-act--done:hover{border-color:rgba(31,191,117,.45);color:#0f7a4d;background:rgba(31,191,117,.06)}
.ad-kb-act:disabled{opacity:.5;cursor:default}
/* drag-n-drop карточек: состояния (без drag-хэндла и без изменения размеров — D0 цел) */
.ad-kb-card[draggable="true"]{cursor:grab}
.ad-kb-card.is-dragging{opacity:.5;cursor:grabbing}
.ad-kb-col.is-droptarget{outline:1px dashed var(--line-neon);outline-offset:-3px}
.ad-kb-col.is-dragover{background:var(--accent-soft);border-color:var(--line-neon)}

/* ── шапка раздела «Поддержка»: ОДНА строка управления (§15.A) ──
   Слева сегмент-фильтр каналов, справа — вход в нитку сторожа прод-логов. Ряд не добавляет
   разделу ни одного лишнего пикселя высоты: чип садится в ту же строку, что фильтр. */
.ad-supbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:.7rem}

/* Чип «Монитор сервиса» — вход в нитку АВТОМАТИЧЕСКИХ тревог (@alerts).
   Разрыв W-12: вечная системная нитка сидела в канбане как обычный клиент и давала тот же
   бейдж «Новые», что человек в беде. Решение — не прятать, а СНИЗИТЬ ВЕС: приборный глиф
   вместо аватара, подложка дорожки (--bg2) вместо белой карточки, подпись --mut, счётчик
   НЕ фиолетовый (фиолетовый в этом разделе значит «клиент ждёт ответа»). Место постоянное
   (правый край строки управления) → мышечная память, но не перехват первого взгляда. */
.ad-supmon{margin-left:auto;display:inline-flex;align-items:center;gap:var(--sp-2);max-width:100%;
  min-height:34px;padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--rad-pill);
  background:var(--bg2);color:var(--mut);font:inherit;font-size:.78rem;font-weight:600;
  cursor:pointer;transition:.14s}
.ad-supmon:hover{border-color:var(--line-neon);color:var(--txt)}
.ad-supmon:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.ad-supmon-ico{display:inline-flex;flex:none;opacity:.8}
.ad-supmon-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ad-supmon-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-supmon-t{flex:none;font-weight:500;font-size:.72rem;color:var(--mut);font-variant-numeric:tabular-nums}
.ad-supmon-n{flex:none;min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:var(--rad-pill);
  background:var(--gray-300);color:var(--gray-900);font-size:.7rem;font-weight:800;text-align:center;
  font-variant-numeric:tabular-nums}
/* Есть неразобранные тревоги → ЯНТАРЬ. Это другая ступень значения, а не другая яркость:
   фиолетовый = «человек ждёт ответа», янтарь = «система просит взгляда». amber-900 на
   amber-50 = 10:1, счётчик #fff на amber-800 = 6.1:1 (AA с запасом). */
.ad-supmon.is-hot{border-color:var(--amber-300);background:var(--amber-50);color:var(--amber-900)}
.ad-supmon.is-hot .ad-supmon-ico{opacity:1;color:var(--amber-800)}
.ad-supmon.is-hot .ad-supmon-t{color:var(--amber-800)}
.ad-supmon.is-hot .ad-supmon-n{background:var(--amber-800);color:var(--card)}
/* пилюля «Системный канал» в шапке нитки: тот же глиф, что на чипе (одна тема — один знак) */
.ad-supmon-pill{gap:4px}
/* односторонний канал: вместо композера ответа — одна строка-объяснение (D0: поле «Ответ
   как Техподдержка» здесь врало бы и стоило бы ~150px пустоты) */
.ad-supmon-note{display:flex;align-items:center;gap:var(--sp-2);margin:0;
  padding:var(--sp-2) var(--sp-3);border:1px dashed var(--line2);border-radius:var(--rad-md);
  background:var(--bg2);color:var(--mut);font-size:.8rem;line-height:1.35}

/* тред поддержки */
.ad-thread-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem}
.ad-thread-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ad-thread-sub{font-family:'Unbounded',system-ui,sans-serif;font-size:1.05rem;letter-spacing:-.01em;line-height:1.2}
.ad-thread-meta{color:var(--mut);font-size:.82rem;margin-top:.2rem}
.ad-msgs{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1rem;max-height:52vh;overflow-y:auto;padding:.15rem}
.ad-msg{max-width:80%;padding:.55rem .8rem;border-radius:14px;font-size:.9rem;line-height:1.45;white-space:pre-wrap}
.ad-msg-who{font-size:.71rem;font-weight:700;margin-bottom:.15rem;opacity:.7}
.ad-msg-time{font-size:.7rem;color:var(--dim);margin-top:.25rem}
.ad-msg--user{align-self:flex-start;background:var(--bg2);border:1px solid var(--line);border-bottom-left-radius:5px}
.ad-msg--staff{align-self:flex-end;background:var(--accent-soft);border:1px solid var(--line-neon);border-bottom-right-radius:5px}
.ad-reply{display:flex;flex-direction:column;gap:.55rem}
.ad-reply textarea{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:12px;color:var(--txt);
  font:inherit;font-size:.92rem;padding:.55rem .75rem;min-height:70px;resize:vertical;line-height:1.45}
.ad-reply textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.ad-reply-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
/* ── Вложения-картинки в треде поддержки ────────────────────────────────────
   D0: миниатюра 104px — МЕНЬШЕ мессенджерских 160px (staff смотрит скриншот
   клиента в плотном инбоксе, клик открывает полный файл во вкладке).
   Пузырь .ad-msg — white-space:pre-wrap, поэтому ряду вложений возвращаем
   normal: иначе пробелы разметки становятся флекс-элементами и рвут ряд. */
.ad-msg-atts{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 0;white-space:normal}
.ad-msg-att{display:block;width:104px;height:104px;flex:none;border-radius:var(--rad-sm);overflow:hidden;
  background:var(--bg2);border:1px solid var(--line);transition:.14s}
.ad-msg-att img{width:100%;height:100%;object-fit:cover;display:block}
.ad-msg-att:hover{border-color:var(--line-neon)}
.ad-msg-att:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
/* композер: скрепка живёт в СУЩЕСТВУЮЩЕЙ строке действий рядом с «Ответить»
   (§14.B проксимити, D0 — без нового этажа под textarea). Ghost-иконка 32px:
   бордер только на hover/active (де-эмфазис §14.E — primary остаётся один). */
.ad-reply-acts{display:flex;align-items:center;gap:8px;margin-left:auto}
.ad-iconbtn{width:32px;height:32px;flex:none;display:grid;place-items:center;padding:0;
  border:1px solid transparent;border-radius:var(--rad-sm);background:transparent;color:var(--mut);
  cursor:pointer;transition:.14s}
.ad-iconbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ad-iconbtn:hover{border-color:var(--line-neon);color:var(--accent);background:var(--accent-soft)}
.ad-iconbtn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.ad-iconbtn:disabled{opacity:.45;cursor:default;border-color:transparent;background:transparent;color:var(--mut)}
/* чипы прикреплённого ДО отправки: 48px — ниже мессенджерских 56px */
.ad-reply-atts{display:flex;flex-wrap:wrap;gap:8px}
.ad-reply-atts[hidden]{display:none}
.ad-att-chip{position:relative;display:block;width:48px;height:48px;flex:none;border-radius:var(--rad-sm);
  overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.ad-att-chip img{width:100%;height:100%;object-fit:cover;display:block}
/* loading-состояние = скелет ТОГО ЖЕ размера, что готовый чип (§5), не спиннер */
.ad-att-chip.is-up{background:linear-gradient(90deg,var(--bg2),var(--gray-200),var(--bg2));
  background-size:220% 100%;animation:ad-att-sk 1.1s ease-in-out infinite}
@keyframes ad-att-sk{0%{background-position:160% 0}100%{background-position:-60% 0}}
.ad-att-x{position:absolute;top:2px;right:2px;width:18px;height:18px;padding:0;border:0;border-radius:999px;
  background:var(--ink);color:var(--card);opacity:.72;display:grid;place-items:center;cursor:pointer;transition:.14s}
.ad-att-x svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ad-att-x:hover{opacity:.92}
.ad-att-x:focus-visible{outline:none;opacity:.92;box-shadow:0 0 0 2px var(--accent-ring)}
@media(prefers-reduced-motion:reduce){.ad-att-chip.is-up{animation:none}}
/* ── Чип = кнопка «Разметка» ────────────────────────────────────────────────
   Весь квадрат 48×48 — тач-таргет (§14.D), крестик остаётся поверх угла. Второй
   кнопки-иконки на 48px не влезло бы, а прятать разметку в hover нельзя (тач). */
.ad-att-open{position:absolute;inset:0;display:block;padding:0;border:0;background:none;cursor:pointer}
.ad-att-open:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.ad-att-pen{position:absolute;left:2px;bottom:2px;width:16px;height:16px;border-radius:999px;
  background:var(--ink);color:var(--card);opacity:.6;display:grid;place-items:center;
  pointer-events:none;transition:.14s}
.ad-att-pen svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ad-att-open:hover .ad-att-pen{opacity:1}
.ad-att-chip.is-marked .ad-att-pen{background:var(--accent);opacity:1}   /* разметка уже есть */
.ad-att-x{z-index:2}
/* ── Вставка из буфера / перетаскивание в композер ──────────────────────────
   Оверлей АБСОЛЮТНЫЙ: подсказка не занимает высоты, пока не тащат (D0). */
.ad-reply{position:relative}
.ad-reply-drop{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;gap:8px;
  border:1.5px dashed var(--accent);border-radius:14px;color:var(--accent);
  /* НЕПРОЗРАЧНО (тон акцента поверх карточки): сквозь полупрозрачную заливку
     просвечивал плейсхолдер и подсказка читалась как каша */
  background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--card);
  font-size:.85rem;font-weight:700;pointer-events:none}
.ad-reply.is-drop .ad-reply-drop{display:flex}
.ad-reply-drop svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* ── Реакции ПЛОЩАДКИ на сообщение клиента ─────────────────────────────────
   Кнопка живёт в правом гуттере пузыря (padding-right), а не отдельной строкой:
   ряд «время + действие» стоил бы ~14px высоты КАЖДОМУ пузырю (D0). Десктоп —
   проявляется по hover; тач — видна всегда (§14.C, не hover-only). */
.ad-msg{position:relative}
.ad-msg--user{padding-right:2.2rem}
.ad-msg-rxbtn{position:absolute;top:4px;right:4px;width:26px;height:26px;padding:0;
  border:1px solid transparent;border-radius:999px;background:var(--card);color:var(--mut);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:.14s}
.ad-msg-rxbtn::before{content:"";position:absolute;inset:-9px}   /* тач-таргет 44×44 без роста пузыря */
.ad-msg-rxbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ad-msg:hover .ad-msg-rxbtn,.ad-msg-rxbtn:focus-visible{opacity:1}
.ad-msg-rxbtn:hover{border-color:var(--line-neon);color:var(--accent)}
.ad-msg-rxbtn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
@media(hover:none){.ad-msg-rxbtn{opacity:.8}}
.ad-msg-rx{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;white-space:normal}
.ad-msg-rx[hidden]{display:none}
.ad-msg-rxc{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:1px 7px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--txt);
  font:inherit;font-size:.78rem;font-weight:600;line-height:1.1;cursor:pointer;transition:.14s}
.ad-msg-rxc:hover{border-color:var(--line-neon)}
.ad-msg-rxc:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.ad-msg-rxc.is-mine{border-color:var(--line-neon);background:var(--accent-soft);color:var(--accent)}
.ad-msg-rxn{font-variant-numeric:tabular-nums;color:var(--mut)}
.ad-msg-rxc.is-mine .ad-msg-rxn{color:var(--accent)}
/* быстрый ряд реакций — поповер у кнопки (не модалка: staff не уходит из треда) */
.ad-rxpop{position:fixed;z-index:9400;display:flex;align-items:center;gap:2px;padding:4px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  box-shadow:var(--shadow-lg)}
.ad-rxpop button{width:32px;height:32px;padding:0;border:0;border-radius:999px;background:transparent;
  cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center;transition:.12s}
.ad-rxpop button:hover{background:var(--bg2);transform:scale(1.12)}
.ad-rxpop button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.ad-rxpop .ad-rxpop-more{color:var(--mut)}
.ad-rxpop .ad-rxpop-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.ad-rxpop button:hover{transform:none}}
.ad-status-seg{display:inline-flex;gap:.2rem;padding:.2rem;background:var(--bg2);border-radius:999px;border:1px solid var(--line)}
.ad-status-seg button{border:0;background:transparent;cursor:pointer;padding:.35em .8em;border-radius:999px;
  font:inherit;font-size:.82rem;font-weight:600;color:var(--mut);transition:.15s;min-height:32px}
.ad-status-seg button:hover{color:var(--txt)}
.ad-status-seg button.is-on{background:#fff;color:var(--accent);box-shadow:0 4px 12px rgba(124,92,255,.2)}
.ad-status-seg button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

@media(max-width:760px){
  .ad-kpis{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}
  .ad-alerts{grid-template-columns:1fr 1fr}
  .ad-msg{max-width:90%}
  .ad-msg-att{width:88px;height:88px}
  .ad-iconbtn{width:44px;height:44px}   /* тач-таргет 44×44 (§14.D), десктоп остаётся 32px */
  .ad-toolbar input{min-width:0;flex:1}
  /* канбан поддержки → колонки вертикально (компактно), а не 3 узких столбца */
  .ad-kb{grid-template-columns:1fr;gap:.5rem}
  /* чип монитора: своя строка во всю ширину + тач-таргет 44×44 (§14.D), десктоп 34px */
  .ad-supmon{margin-left:0;width:100%;min-height:44px;justify-content:flex-start}
  .ad-supmon-t{margin-left:auto}
}

/* ── Промокоды (атрибуция) ──────────────────────────────────────────────────
   Форма выдачи = компактный control-bar (§14/§16 D0: один ряд, НЕ форма на
   пол-экрана), поля 38px как у .ad-toolbar. Таблица — плотность admin-эталона. */
.ad-promo-bar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.8rem}
.ad-promo-bar input{background:#fff;border:1.5px solid var(--line);border-radius:12px;color:var(--txt);
  font:inherit;font-size:.88rem;padding:.5em .75em;min-height:38px}
.ad-promo-bar input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.ad-promo-code{width:150px;text-transform:uppercase}
.ad-promo-tag{width:180px}
.ad-promo-note{flex:1 1 180px;min-width:140px}

/* главная метрика в строке кода: qualified (жирно) + доля qualified/claimed */
.ad-promo-q{font-weight:800;color:var(--txt);font-size:1rem;font-variant-numeric:tabular-nums}
.ad-promo-rate{display:inline-block;margin-left:.5rem;font-weight:700;font-size:.82rem;font-variant-numeric:tabular-nums}
.ad-promo-rate.is-on{color:var(--accent)}
.ad-promo-rate.is-off{color:var(--dim)}
/* колонка тумблера активности — прижата, не растягивает строку */
td.ad-promo-toggle{width:1%;white-space:nowrap}

/* фильтр по промокоду в control-bar Пользователей (рядом с датой рег.) */
.ad-upromo{width:160px}

@media(max-width:760px){
  .ad-promo-code,.ad-promo-tag,.ad-promo-note{width:auto;flex:1 1 140px;min-width:0}
  .ad-upromo{flex:1 1 140px;min-width:0}
}

/* ── Интеграции (owner): доступы платёжки/доставки ──────────────────────────
   ВНИМАНИЕ: уникальный префикс .adm-intg* — НЕ .cm-intg (тот занят чужим чипом
   «интеграция» в кабинете, стр ~851: align-items:center + ico 34px → каскад ломал
   раскладку). D0 (DENSITY.md): опрятная ЛЕВАЯ колонка ~660px, карточки одной
   ширины одна под другой, поля 36px, ключи под аккордеон (не простыня).
   Один primary «Сохранить» на карточку. */
.adm-intg{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;max-width:660px}
.adm-intg-intro{color:var(--mut);font-size:.82rem;line-height:1.45;margin:0 0 .2rem;max-width:64ch}
.adm-intg-card{width:100%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.adm-intg-card.is-muted{background:var(--bg2);opacity:.94}
.adm-intg-head{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.adm-intg-ico{width:22px;height:22px;flex:none;display:inline-flex;color:var(--accent)}
.adm-intg-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.adm-intg-title{font-family:'Unbounded',system-ui,sans-serif;font-size:.95rem;font-weight:700;color:var(--txt);line-height:1.2}
.adm-intg-hspacer{margin-left:auto}
.adm-intg-resv{font-size:.7rem;color:var(--dim);margin-left:.15rem}
.adm-intg-state{color:var(--mut);font-size:.8rem;line-height:1.4;margin:.5rem 0 0}
.adm-intg-note{color:var(--mut);font-size:.76rem;line-height:1.45;margin:.5rem 0 0;max-width:70ch}
/* карточка-details ЮKassa: шапка = summary, свёрнуто по умолчанию */
details.adm-intg-card>summary.adm-intg-head{cursor:pointer;list-style:none}
details.adm-intg-card>summary.adm-intg-head::-webkit-details-marker{display:none}
details.adm-intg-card>summary::after{content:'＋';margin-left:auto;color:var(--mut);font-weight:400;font-size:1.05em}
details.adm-intg-card[open]>summary::after{content:'－'}
/* аккордеон ключей внутри карточки */
.adm-intg-acc{margin-top:.6rem;border-top:1px solid var(--line);padding-top:.35rem}
.adm-intg-acc>summary{cursor:pointer;list-style:none;display:flex;align-items:center;font-size:.82rem;font-weight:700;color:var(--txt);padding:.25rem 0}
.adm-intg-acc>summary::-webkit-details-marker{display:none}
.adm-intg-acc>summary::after{content:'＋';margin-left:auto;color:var(--mut);font-weight:400;font-size:1.05em}
.adm-intg-acc[open]>summary::after{content:'－'}
.adm-intg-fields{display:flex;flex-direction:column;gap:.6rem;padding:.5rem 0 .1rem}
.adm-intg-f{display:flex;flex-direction:column;gap:4px}
.adm-intg-fhead{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.adm-intg-fhead label{font-size:.75rem;font-weight:600;color:var(--ink2)}
.adm-intg-input{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:10px;color:var(--txt);
  font-size:.86rem;font-weight:500;padding:8px 11px;min-height:36px}
.adm-intg-input[readonly]{background:var(--bg2);color:var(--mut)}
.adm-intg-input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.adm-intg-secret{display:flex;gap:.4rem;align-items:stretch}
.adm-intg-secret .adm-intg-input{flex:1}
.adm-intg-secret .btn{flex:none;white-space:nowrap;min-height:36px;padding:.4em .8em}
.adm-intg-hint{color:var(--dim);font-size:.72rem;line-height:1.4}
.adm-intg-src{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:.12em .45em;border-radius:6px;white-space:nowrap;line-height:1.5}
.adm-intg-src--db{color:var(--accent);background:var(--accent-soft)}
.adm-intg-src--env{color:var(--mut);background:var(--bg2)}
.adm-intg-src--def{color:var(--dim);background:transparent;border:1px solid var(--line)}
.adm-intg-provrow{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--txt);
  font-weight:600;cursor:pointer;padding:.1rem 0 .3rem}
.adm-intg-foot{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.7rem}
/* WP-03 сегмент приёма оплаты (Боевой/Демо) */
.adm-intg-modes{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.adm-intg-modes-lbl{font-size:.78rem;color:var(--mut);font-weight:600}
/* M-02 подпись отложенного применения тумблеров/сегмента */
.adm-intg-apply{display:block;font-size:.7rem;color:var(--dim);margin-top:.3rem}
.adm-intg-foot .adm-intg-apply{flex:1 1 100%;margin-top:.15rem}
/* WP-05 durable-статус связи */
.adm-intg-lastcheck{display:flex;align-items:center;gap:.35rem;font-size:.75rem;line-height:1.35;margin-top:.5rem}
.adm-intg-lastcheck.is-ok{color:var(--ok)}
.adm-intg-lastcheck.is-bad{color:var(--err)}
.adm-intg-lastcheck.is-none{color:var(--dim)}
.adm-intg-lc-ico{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* WP-06 «изменено … · кто» + правый блок метаданных поля */
.adm-intg-meta{display:inline-flex;align-items:center;gap:.4rem;flex:none}
.adm-intg-chg{font-size:.64rem;color:var(--dim);white-space:nowrap}
/* WP-04 строка input + «Сбросить/Очистить» */
.adm-intg-inrow{display:flex;gap:.4rem;align-items:center}
.adm-intg-inrow .adm-intg-input{flex:1}
.adm-intg-clr{flex:none;background:none;border:none;color:var(--mut);font-weight:600;font-size:.72rem;
  cursor:pointer;padding:2px 4px;white-space:nowrap;text-decoration:underline;text-underline-offset:2px}
.adm-intg-clr:hover{color:var(--err)}
.adm-intg-secret-actions{margin-top:.2rem}
/* M-02 иконка-ключ в шапке аккордеона (discoverability «настроить ключи») */
.adm-intg-sumico{display:inline-flex;flex:none;margin-right:.35rem;color:var(--accent)}
.adm-intg-sumico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* WP-07 тело бренд-модалки подтверждения */
.adm-intg-confirm-line{font-size:.88rem;line-height:1.5;color:var(--txt);margin:0 0 .5rem}
.adm-intg-confirm-line:last-child{margin-bottom:0}

/* ── Нативный сплит Т-Банк (Мультирасчёты) — режим карточки Т-Банка ──────────────
   D0-плотность: аккордеон свёрнут по умолчанию; тумблеры стандартной высоты (52×32
   .cm-switch), таблица ShopCode плотными строками со своим скроллом. Только var(--*). */
.adm-intg-split{border-top:1px solid var(--line);margin-top:.3rem;padding-top:.15rem}
/* строка «текст + подсказка … переключатель» */
.adm-intg-tgl{display:flex;align-items:center;justify-content:space-between;gap:.9rem;padding:.5rem 0}
.adm-intg-tgl-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.adm-intg-tgl-lbl{display:inline-flex;align-items:center;gap:.35rem;font-size:.84rem;font-weight:600;color:var(--txt);line-height:1.25}
.adm-intg-tgl-ico{display:inline-flex;flex:none;color:var(--accent)}
.adm-intg-tgl-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.adm-intg-tgl-hint{font-size:.72rem;line-height:1.4;color:var(--mut)}
.adm-intg-splitmore{border-top:1px solid var(--line);margin-top:.1rem}
/* таблица ShopCode */
.adm-shopwrap{border-top:1px solid var(--line);padding-top:.5rem;margin-top:.1rem}
.adm-shop-cap{font-size:.78rem;font-weight:600;color:var(--txt);display:flex;flex-direction:column;gap:1px;margin-bottom:.35rem}
.adm-shop-cap small{font-size:.7rem;font-weight:400;color:var(--dim)}
.adm-shop-h,.adm-shop-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(92px,1fr) auto auto;gap:.5rem;align-items:center}
.adm-shop-h{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--dim);padding:0 2px .3rem}
.adm-shop-list{max-height:340px;overflow:auto}
.adm-shop-row{padding:6px 2px;border-top:1px solid var(--line)}
.adm-shop-who{min-width:0;display:flex;flex-direction:column;gap:0;line-height:1.3}
.adm-shop-who b{font-size:.82rem;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-shop-who .cm-mono{font-size:.7rem;color:var(--mut)}
.adm-shop-input{min-height:34px;padding:5px 9px;font-size:.82rem}
.adm-shop-badge{justify-self:start}
.adm-shop-save{justify-self:end;white-space:nowrap}

@media(max-width:560px){
  .adm-intg{max-width:none}
  .adm-intg-foot .btn{flex:1}
  .adm-intg-foot .adm-intg-apply{flex:1 1 100%}
  .adm-intg-secret{flex-wrap:wrap}
  .adm-intg-secret .adm-intg-input{flex:1 1 100%}
  .adm-shop-h{display:none}
  .adm-shop-row{grid-template-columns:1fr auto;gap:.35rem .5rem;padding:8px 2px}
  .adm-shop-who,.adm-shop-input{grid-column:1/-1}
}

/* ════════════════════════════════════════════════════════════════════════════
   ИСТОРИЯ активности каталога (.as-*) — «сколько кого скачали и купили».
   ОДИН вид на ДВУХ поверхностях: админка (вкладка «История») и управленка
   мастера (Магазин → Статистика). Разметку даёт src/ui/activity-stats.js.
   D0-плотность (замер): control-bar 31px · KPI 62px (эталон .ad-kpi админки) ·
   график 60px · ось 15px · строка таблицы ~39px · сноска 18px. Только var(--*).
   ════════════════════════════════════════════════════════════════════════════ */
/* ОДНА control-bar (§15.A): период слева, ось разбивки справа — не два этажа */
.as-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.as-bar-sp{flex:1 1 auto}
.as-bar-lbl{font-size:.78rem;color:var(--mut);font-weight:600}
/* сегмент осей ужат до 31px — в одном ряду с пикером периода (27px) разнобой высот
   читался как два разных этажа контролов; витринный .cm-sort (35px) не трогаем */
.as-bar .cm-sort{padding:.15rem}
.as-bar .cm-sort-tab{padding:.28rem .7rem;font-size:.78rem}
.as-sec{margin-bottom:1rem}
.as-sec:last-child{margin-bottom:0}
/* сноска-честность и первая секция — не слипаются */
.as-body .as-sec:first-of-type{margin-top:.7rem}
/* ── ФИЛЬТР статистики: кнопка в control-bar + панель ────────────────────────
   D0-замер (десктоп 1280×800): кнопка 28px (в один рост с сегментом периода .dr-seg
   28px — иначе ряд читается как два этажа контролов), ПАНЕЛЬ ≈354×274px = 28%×34%
   вьюпорта. Это МЕНЬШЕ соседнего поповера календаря (≈426×324) — панель фильтра не
   имеет права быть заметнее того, ради чего её открыли. Ось 26px (= .dr-side-btn),
   строка значения 28px, список 186px ≈ 6.6 строк: видно, что список продолжается.
   Мобайл: строка значения 40px (тач), панель min(94vw,340px) — как .dr-pop. */
.as-flt{position:relative;display:inline-block}
.as-flt-btn{display:inline-flex;align-items:center;gap:.3rem;min-height:28px;padding:0 .5rem;
  cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--mut);
  font:inherit;font-size:.78rem;font-weight:600;line-height:1;border-radius:var(--rad-pill);
  white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.as-flt-btn:hover{color:var(--txt);border-color:var(--line2)}
.as-flt-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
/* фильтр применён — тихая акцентная заливка, НЕ вторая primary-кнопка рядом с данными (§14.A) */
.as-flt-btn.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--violet-700)}
.as-flt-btn svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.as-flt-caret{opacity:.6}
.as-flt-n{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 3px;
  border-radius:var(--rad-pill);background:var(--violet-600);color:var(--card);
  font-size:.62rem;font-weight:700;font-variant-numeric:tabular-nums}

/* панель: тот же язык, что у поповера календаря рядом (z-index 60 — выше sticky-навигации 50,
   ниже модалок 150), лениво строится при открытии, флипается вправо у края экрана */
.as-flt-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:352px;
  padding:.6rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad-lg);box-shadow:var(--shadow)}
.as-flt-pop.is-right{left:auto;right:0}
.as-flt-cols{display:flex;gap:.55rem}
.as-flt-ax{width:104px;flex:none;display:flex;flex-direction:column;gap:.2rem}
.as-flt-ax-b{display:flex;align-items:center;justify-content:space-between;gap:.25rem;
  min-height:26px;padding:0 .45rem;cursor:pointer;border:1px solid var(--line);
  background:var(--card);color:var(--mut);font:inherit;font-size:.76rem;font-weight:600;
  line-height:1;border-radius:var(--rad-sm);text-align:left}
.as-flt-ax-b:hover{border-color:var(--line2);color:var(--txt)}
.as-flt-ax-b:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.as-flt-ax-b.is-on{background:var(--accent-soft);border-color:var(--accent);
  color:var(--violet-700);font-weight:700}
/* счётчик у оси — чтобы не щёлкать по всем осям в поисках «где же я нажал» */
.as-flt-axn:not(:empty){display:inline-grid;place-items:center;min-width:15px;height:15px;
  padding:0 3px;border-radius:var(--rad-pill);background:var(--violet-100);
  color:var(--violet-700);font-size:.62rem;font-weight:700;font-variant-numeric:tabular-nums}
.as-flt-vals{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.as-flt-find{display:flex;align-items:center;gap:.3rem;min-height:26px;padding:0 .45rem;
  border:1px solid var(--line);border-radius:var(--rad-pill);background:var(--bg2)}
.as-flt-find:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.as-flt-find svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--dim)}
.as-flt-find input{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:.76rem;color:var(--txt)}
.as-flt-list{max-height:186px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:1px}
.as-flt-opt{display:flex;align-items:center;gap:.4rem;min-height:28px;padding:0 .3rem;
  cursor:pointer;border-radius:var(--rad-xs);font-size:.78rem;color:var(--txt);line-height:1.2}
.as-flt-opt:hover{background:var(--bg2)}
.as-flt-opt input{width:14px;height:14px;flex:none;margin:0;cursor:pointer;
  accent-color:var(--violet-600)}
.as-flt-opt input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.as-flt-opt span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-flt-msg{padding:.5rem .3rem;font-size:.76rem;color:var(--mut);line-height:1.35}
.as-flt-retry{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:.76rem;
  font-weight:700;color:var(--violet-700);text-decoration:underline;text-underline-offset:2px}
.as-flt-sk{display:flex;flex-direction:column;gap:4px;padding:.2rem 0}
.as-flt-sk i{height:20px;border-radius:var(--rad-xs);background:var(--bg2)}
.as-flt-foot{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;margin-top:.5rem}
/* «Сбросить» — tertiary-текст: снять фильтр не равно применить его (§14.A) */
.as-flt-reset{border:0;background:none;cursor:pointer;font:inherit;font-size:.76rem;
  font-weight:600;color:var(--mut);min-height:30px;padding:0 .4rem;border-radius:var(--rad-sm)}
.as-flt-reset:hover{color:var(--txt);background:var(--bg2)}
.as-flt-apply{border:0;cursor:pointer;font:inherit;font-size:.76rem;font-weight:700;
  min-height:30px;padding:0 .85rem;border-radius:var(--rad-pill);
  background:var(--violet-600);color:var(--card)}
.as-flt-apply:hover{background:var(--violet-700)}
.as-flt-reset:focus-visible,.as-flt-apply:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

/* чипы ПРИМЕНЁННОГО фильтра — над KPI (фильтр сужает и итоги тоже) */
.as-fchips{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0 0 .6rem}
.as-fclear{border:0;background:none;cursor:pointer;font:inherit;font-size:.76rem;
  font-weight:600;color:var(--mut);min-height:26px;padding:0 .3rem;border-radius:var(--rad-sm)}
.as-fclear:hover{color:var(--txt);background:var(--bg2)}
.as-fclear:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

/* сноска-честность: скачивания моложе покупок (счётчик включён позже площадки) */
.as-since{display:flex;align-items:center;gap:.4rem;margin:.5rem 0 0;
  font-size:.76rem;line-height:1.35;color:var(--mut)}
.as-since svg,.as-err svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.as-since svg{color:var(--accent)}
/* окно захватывает дни ДО включения счётчика → это уже не шёпот, а предупреждение:
   иначе «0 скачиваний за июль» читается как «никто не качал» (а их не считали) */
/* .is-warn — тот же вид, но имя без привязки к блоку .as-* (общая плашка-предупреждение) */
.ad-note.as-note-warn,.ad-note.is-warn{border-style:solid;border-color:var(--amber-300);
  background:var(--amber-50);color:var(--amber-800)}
.ad-note.as-note-warn svg,.ad-note.is-warn svg{color:var(--amber-700)}

/* столбик-график: скачивания (violet) + покупки (coral) на общей шкале событий */
.as-chartwrap{width:100%}
.as-chart{height:60px;display:flex;align-items:flex-end;overflow-x:auto;
  overscroll-behavior-x:contain;border-bottom:1px solid var(--line2)}
/* space-between + потолок слота: столбики РАСХОДЯТСЯ на всю доступную ширину (первый
   у левого края, последний у правого), но не толстеют бесконечно — слот ≤120px,
   сам столбик ≤40px. Так 7 дней на 1360px читаются как намеренный недельный график,
   а 90 дней просто уплотняются (потолки перестают работать, слот < 120). */
.as-cols{display:flex;align-items:flex-end;justify-content:space-between;gap:2px;
  width:100%;min-width:100%;height:100%}
.as-col{flex:1 1 0;min-width:4px;max-width:120px;height:100%;display:flex;align-items:flex-end;
  justify-content:center;gap:1px;border-radius:3px 3px 0 0}
.as-col:hover{background:var(--accent-soft)}
.as-b{display:block;width:40%;max-width:40px;min-width:2px;border-radius:2px 2px 0 0}
.as-b-dl{background:var(--violet-500)}
.as-b-pu{background:var(--coral-600)}
/* регистрации (дашборд роста пользователей) — тот же язык графика, своя серия */
.as-b-reg{background:var(--violet-500)}
/* ось = только концы диапазона. Верх шкалы («макс N/день») переехал в шапку секции
   к легенде: по центру полной ширины он висел в пустоте между датами и читался как
   случайно уроненная подпись, а в шапке это один смысловой кластер «как читать график» */
.as-axis{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  margin-top:.25rem;font-size:.7rem;color:var(--dim);font-variant-numeric:tabular-nums}
.as-scale{color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums}
.as-scale::after{content:'·';margin-left:.5rem;color:var(--line2)}
/* легенда: цвет — не единственный признак, числа продублированы в «Числах по дням» */
.as-legend{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;
  color:var(--mut);font-weight:600}
.as-lg{display:inline-flex;align-items:center;gap:.28rem}
.as-lg-dot{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none}
.as-lg-dot.is-dl{background:var(--violet-500)}
.as-lg-dot.is-pu{background:var(--coral-600)}
.as-lg-dot.is-reg{background:var(--violet-500)}

/* точные числа = таблица-альтернатива графику (a11y), свёрнута по умолчанию (D0) */
.as-nums{margin-top:.55rem}
.as-nums>summary{cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;
  min-height:26px;padding:.15rem .1rem;font-size:.76rem;font-weight:600;color:var(--mut);list-style:none}
.as-nums>summary::-webkit-details-marker{display:none}
.as-nums>summary::after{content:'';width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.as-nums[open]>summary::after{transform:rotate(-135deg)}
.as-nums>summary:hover{color:var(--txt)}
.as-nums>summary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-radius:8px}
.as-nums-wrap{margin-top:.4rem;max-height:280px;overflow:auto}

/* строка разбивки → сузить дневной ряд (drill-down §1.8); повторный клик снимает */
/* Кликается вся строка (тач-таргет = высота строки); кнопка внутри — для клавиатуры.
   Пунктир обнимает ТЕКСТ (растянутый на ячейку читался как сломанная линия), паддинга
   нет — иначе строка распухала до 53px против ~42px эталона админ-таблиц. */
tr.as-rowfilter{cursor:pointer}
tr.as-rowfilter:hover td{background:var(--accent-soft)}
.as-drill{display:inline;max-width:100%;border:0;background:none;padding:0;
  font:inherit;font-weight:700;color:var(--txt);text-align:left;cursor:pointer;
  border-bottom:1px dashed var(--line2)}
.as-drill:hover{color:var(--accent);border-bottom-color:var(--accent)}
.as-drill:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-radius:6px}
.as-drill.is-on{color:var(--accent);border-bottom-style:solid;border-bottom-color:var(--accent)}
tr.as-row-on td{background:var(--accent-soft)}
td.as-mut{color:var(--mut)}

/* состояния: skeleton РОВНО в размер KPI-ячейки (62px), пусто/ошибка — компактно */
.as-skel{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.as-skel i{display:block;height:68px;border-radius:14px;
  background:linear-gradient(90deg,var(--bg2),var(--gray-100),var(--bg2));
  background-size:200% 100%;animation:as-sh 1.1s linear infinite}
@keyframes as-sh{to{background-position:-200% 0}}
.as-empty{border:1px dashed var(--line2);border-radius:var(--rad-md);
  padding:.7rem .85rem;background:var(--bg2)}
.as-empty-t{font-size:.88rem;font-weight:700;color:var(--txt)}
.as-empty-s{font-size:.76rem;color:var(--mut);line-height:1.4;margin-top:.15rem}
.as-err{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.82rem;
  color:var(--rose-700);background:var(--rose-50);border:1px solid var(--rose-200);
  border-radius:var(--rad-md);padding:.55rem .8rem}
/* «Повторить» — свой класс, а не .btn/.pp-btn: блок живёт на ДВУХ страницах с разными
   кнопочными языками, общая кнопка гарантирует одинаковый вид в обеих */
.as-retry{border:1px solid var(--rose-200);background:var(--card);color:var(--rose-700);
  font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;padding:0 .7rem;
  min-height:30px;border-radius:var(--rad-pill)}
.as-retry:hover{background:var(--rose-100)}
.as-retry:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

@media(prefers-reduced-motion:reduce){.as-skel i{animation:none}}
@media(max-width:600px){
  .as-bar-sp{display:none}
  .as-bar{gap:.45rem}
  /* панель фильтра на телефоне — тот же приём, что у поповера календаря рядом:
     ЯКОРНАЯ (не центральная модалка), колонкой, со скроллом внутри и тач-строкой 40px.
     Оси — одна строка с горизонтальным скроллом: минус ~34px высоты, «Группа/Вид»
     видны сразу, остальное подсказано обрезом. Замер 390px: панель 340×~345px. */
  .as-flt-pop{width:min(94vw,340px);
    max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow:auto}
  .as-flt-cols{flex-direction:column;gap:.45rem}
  .as-flt-ax{width:100%;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;
    overscroll-behavior-x:contain;gap:.3rem;padding-bottom:.1rem}
  .as-flt-ax-b{flex:0 0 auto;min-height:32px;white-space:nowrap}
  .as-flt-find{min-height:32px}
  .as-flt-list{max-height:200px}
  .as-flt-opt{min-height:40px}
  .as-flt-opt input{width:17px;height:17px}
  .as-flt-reset,.as-flt-apply{min-height:40px;flex:1 1 0}
  /* тело кнопки 32px (= .dr-side-btn, один ярус с пилюлями периода 20.8px рядом),
     а ЗОНА ТАПА добирается до 44px невидимым ::after — §14.D: тач-таргет растят
     паддингом/зоной, а не раздутым телом контрола (иначе фильтр стал бы вдвое
     заметнее пресетов периода, ради которых бар и существует) */
  .as-flt-btn{min-height:32px;position:relative}
  .as-flt-btn::after{content:'';position:absolute;inset:-6px -4px}
  .as-col{min-width:3px}
  .as-cols{gap:1px}
  /* на 390px четвёртая колонка «Купили» уезжала за край в горизонтальный скролл —
     прячем ВТОРОСТЕПЕННУЮ «в т.ч. беспл.» (её сумма есть в KPI и в «Числах по дням»),
     чтобы два главных числа читались без прокрутки (§7) */
  .as-col-free{display:none}
  /* «макс N/день» ронял шапку секции на вторую строку (+28px) — на узком это цена
     за необязательную подпись: верх шкалы виден в тултипе столбика и в «Числах по дням» */
  .as-scale{display:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   ТАБЛИЦА ТОВАРОВ (ось «Товары») — строка = ТОВАР со всеми метриками рядом,
   клик = карточка «что про него известно». Паттерн ArticlesDataTable/ArticleShell
   из wb-analytics. Разметку даёт src/ui/activity-stats.js.
   D0: строка таблицы остаётся ~43px (эталон админ-таблиц), поиск 30px,
   заголовок-сортировка не растит строку шапки (кнопка inline, без паддингов).
   ════════════════════════════════════════════════════════════════════════════ */
/* третья серия графика — ОТКРЫТИЯ карточки. Приглушённый серо-синий, а не третий
   яркий: открытий кратно больше скачиваний, ярким он перекричал бы обе цели (§14.E) */
.as-b-vw{background:var(--gray-300)}
.as-lg-dot.is-vw{background:var(--gray-300)}

/* заголовок-сортировка: кнопка ВНУТРИ th, чтобы шапка не превратилась в кликабельную
   полосу целиком и не выросла в высоте. Стрелка появляется только у активной колонки —
   6 постоянных стрелок в шапке читаются как шум (§14.E) */
.as-sort{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:.28rem;text-transform:inherit;letter-spacing:inherit}
.as-sort:hover{color:var(--txt)}
.as-sort:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-radius:6px}
.as-sort-i{width:0;height:0;border:3.5px solid transparent;display:none}
.as-sort.is-sorted{color:var(--accent)}
.as-sort.is-sorted .as-sort-i{display:inline-block}
.as-sort.is-desc .as-sort-i{border-top-color:currentColor;margin-top:3.5px}
.as-sort.is-asc .as-sort-i{border-bottom-color:currentColor;margin-bottom:3.5px}

/* микроподпись окна наблюдения в ШАПКЕ колонки («Скачали с 8 авг»). Колонки живут за
   РАЗНЫЕ окна (покупки — вся история, скачивания — с даты включения счётчика), и в
   строке «Купили 12 · Скачали 7» пара чисел читается как ошибка данных. Подпись стоит
   ИНЛАЙН в той же строке (вторая строка растила бы шапку на +11px) и видна БЕЗ ховера —
   на тач-устройстве тултип недоступен. Вес — третичный: строчные буквы против капса
   заголовка + var(--dim), поэтому подпись не спорит с названием колонки (§14.A). */
.as-th-since{font-size:.68rem;font-weight:500;color:var(--dim);text-transform:none;
  letter-spacing:0;white-space:nowrap}

/* строка-товар: кликается ВСЯ (тач-таргет = высота строки), внутри — настоящая
   кнопка для клавиатуры. Шеврон ПОСТОЯННЫЙ, а не по hover: на тач-устройстве
   hover'а нет, и кликабельность строки была бы невидимой (§1.6, §12) */
tr.as-rowopen{cursor:pointer}
tr.as-rowopen:hover td{background:var(--accent-soft)}
.as-open{display:inline-flex;align-items:center;gap:.3rem;max-width:100%;border:0;background:none;
  padding:0;font:inherit;font-weight:700;color:var(--txt);text-align:left;cursor:pointer}
.as-open>.as-open-i{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;color:var(--gray-400)}
.as-open:hover,tr.as-rowopen:hover .as-open{color:var(--accent)}
.as-open:hover>.as-open-i,tr.as-rowopen:hover .as-open-i{color:var(--accent)}
.as-open:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-radius:6px}

/* поиск по списку — появляется только когда строк >12 (иначе лишний контрол, Хик) */
.as-find{display:inline-flex;align-items:center;gap:.35rem;min-height:30px;padding:0 .55rem;
  border:1px solid var(--line);border-radius:var(--rad-pill);background:var(--card)}
.as-find svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;color:var(--mut)}
.as-find input{border:0;background:none;outline:none;font:inherit;font-size:.8rem;
  color:var(--txt);width:9.5rem;min-width:0}
.as-find:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.as-hint{margin:.4rem 0 0;font-size:.74rem;color:var(--dim)}
.as-norows td{color:var(--mut);font-size:.82rem}

/* ════════════════════════════════════════════════════════════════════════════
   .ps-* — КАРТОЧКА ТОВАРА «что про него известно» (src/ui/product-stats-card.js).
   Одна и та же карточка в админке (любой товар) и в управленке мастера (свой).

   D0-ПЛОТНОСТЬ: модалка min(680px,96vw) × max-height 88vh — «данные», самый
   широкий тип из DENSITY.md §1, потому что внутри воронка и график. Паспорт 44px,
   воронка на ОБЩЕМ .ov-flow (62px, уже принятый эталон «Обзора» — не плодим второй
   вид цепочки), мини-плитка 40px, «последний раз» одной строкой 18px, график 60px.
   ════════════════════════════════════════════════════════════════════════════ */
.pp-modal.ps-modal{width:min(680px,100%);max-height:88vh}
.ps-modal .pp-modal-body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
.ps{display:block}

/* паспорт: обложка + название + чипы-факты + охват. Одна строка, не карточка-герой */
.ps-id{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.ps-cover{width:44px;height:44px;flex:none;border-radius:10px;object-fit:cover;
  background:var(--bg2);border:1px solid var(--line)}
.ps-cover.is-ph{display:grid;place-items:center;color:var(--gray-400)}
.ps-cover.is-ph svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ps-id-t{flex:1 1 12rem;min-width:0}
.ps-title{font:800 15px var(--font-display,var(--font));color:var(--txt);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-meta{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin-top:.25rem}
.ps-chip{display:inline-flex;align-items:center;height:20px;padding:0 .45rem;border-radius:var(--rad-pill);
  background:var(--bg2);color:var(--mut);font-size:11px;font-weight:600;white-space:nowrap}
.ps-chip.is-art{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.ps-chip.is-pub{background:var(--emerald-50);color:var(--emerald-800)}
.ps-chip.is-draft{background:var(--amber-50);color:var(--amber-800)}
.ps-chip.is-hid{background:var(--rose-50);color:var(--rose-700)}
/* «снят площадкой» ≠ «продавец сам скрыл»: это разные факты и разный вес. Ярче is-hid
   (rose-100/800 против rose-50/700) — площадка вмешалась, а не тариф поджал. */
.ps-chip.is-td{background:var(--rose-100);color:var(--rose-800)}
.ps-chip.is-q{background:none;color:var(--dim)}
/* Артикул-ССЫЛКА на публичную карточку. Читается кликабельной БЕЗ ховера (§1.6: на тач
   ховера нет) — цветом акцента и постоянной стрелкой «уйдёт наружу», как постоянный шеврон
   в строке статистики. Геометрия чипа НЕ меняется: те же 20px, что у соседей, — ряд фактов
   и высота шапки остаются прежними (D0). */
.ps-chip.is-link{position:relative;gap:3px;text-decoration:none;cursor:pointer;
  background:var(--violet-50);color:var(--violet-700);
  transition:background .14s ease,color .14s ease}
.ps-chip.is-link svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.ps-chip.is-link:hover{background:var(--violet-100);color:var(--violet-800)}
.ps-chip.is-link:hover svg{opacity:1}
.ps-chip.is-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
/* тач-таргет 44px добираем НЕВИДИМОЙ зоной, а не ростом чипа (§14.D). Тянем только по
   вертикали: по ширине код уже ~76px, а соседние чипы неинтерактивны — перехватывать у
   них нечего; сегмент охвата стоит сбоку и по вертикали не пересекается. */
.ps-chip.is-link::after{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px}
/* подпись только для скринридера: вслух звучит код + «открыть в новой вкладке», а сам код
   остаётся видимым текстом ссылки (aria-label затёр бы его) */
.ps-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.ps-chip.is-link{transition:none}}
/* охват = ОДИН контрол карточки (§15.A): «за период» ↔ «за всё время» */
.ps-id .cm-sort{padding:.15rem;flex:none}
.ps-id .cm-sort-tab{padding:.26rem .6rem;font-size:.75rem}

.ps-body{margin-top:var(--sp-3)}
.ps-sec{margin-bottom:var(--sp-3)}
.ps-sec:last-of-type{margin-bottom:var(--sp-2)}
.ps-sec .ad-sec-title{font-size:13px}
.ps-note,.ps-since{margin-bottom:var(--sp-3)}
.ps-since{margin-top:0}
/* воронка наследует .ov-flow целиком — свои правки только на выравнивании и подписях.
   align-items:baseline вместо center: итог «Купили» крупнее соседей (это доминанта
   §1.1), и при центрировании его подпись уезжала на 4px ниже остальных — ряд читался
   как съехавший. По базовой линии числа стоят на одной строке, подписи тоже. */
@media(min-width:601px){.ps-funnel{align-items:baseline}}
.ps-funnel .ov-fs-l{font-size:11px}
/* окно ПРОЦЕНТОВ подписано рядом с процентами: абсолютные числа воронки — за весь
   период, а конверсии — только с window_from (раньше просмотры не писались). Третичный
   вес и точка-разделитель: это уточнение к проценту, а не второй показатель (§14.A).
   Живёт в шапке секции = ноль лишней высоты на десктопе. */
.ps-cw{color:var(--dim);font-weight:500}
.ps-cw::before{content:'·';margin:0 .3rem;color:var(--line2)}

/* мини-плитки: «что ещё известно» по одной цифре. 3 колонки × 40px = два ряда,
   а не шесть KPI-карточек по 68px (те съели бы пол-модалки) */
.ps-minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:var(--sp-1) var(--sp-2)}
.ps-mini{min-height:40px;display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding:.2rem .5rem;border-radius:var(--rad-sm);background:var(--bg2)}
.ps-mini-v{font:700 14px var(--font-display,var(--font));color:var(--txt);
  font-variant-numeric:tabular-nums;line-height:1.15}
.ps-mini-l{font-size:11px;font-weight:600;color:var(--mut);line-height:1.2}

/* «последний раз» — одна строка вместо трёх плиток: это контекст, а не метрика */
.ps-last{margin:var(--sp-2) 0 0;font-size:12px;color:var(--mut);line-height:1.45}
.ps-last-i{margin-left:.4rem}
.ps-last-i b{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums}
.ps-last-i.is-none b{color:var(--dim)}

/* три серии в столбике — уже столбики, чтобы колонка не расползалась */
.ps-chart .as-b{max-width:26px}

/* «чего мы не считаем» — ВИДИМОЙ строкой, не под раскрытием: владелец спрашивал
   именно про поиск и переходы, и «нечем измерить» честнее пустой колонки с нулём */
.ps-nt{display:flex;align-items:flex-start;gap:.4rem;margin:0;padding-top:var(--sp-2);
  border-top:1px dashed var(--line2);font-size:11.5px;line-height:1.4;color:var(--mut)}
.ps-nt svg{width:13px;height:13px;flex:none;margin-top:1px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}

/* скелет — РОВНО в размер будущих блоков (воронка/плитки/график), без скачка */
.ps-skel{display:grid;gap:var(--sp-2)}
.ps-skel i{display:block;border-radius:var(--rad-md);
  background:linear-gradient(90deg,var(--bg2),var(--gray-100),var(--bg2));
  background-size:200% 100%;animation:as-sh 1.1s linear infinite}
.ps-skel i.is-fl{height:62px}
.ps-skel i.is-mn{height:88px}
.ps-skel i.is-ch{height:76px}
@media(prefers-reduced-motion:reduce){.ps-skel i{animation:none}}

@media(max-width:600px){
  /* на телефоне карточка — лист во всю ширину: 680px там всё равно нет, а
     боковые поля backdrop'а съедали бы читаемую ширину воронки */
  .pp-modal.ps-modal{width:100%;max-height:92vh;max-height:92dvh}
  .ps-modal .pp-modal-body{padding:var(--sp-3)}
  .ps-id{gap:var(--sp-2)}
  /* название на узком НЕ обрезаем в многоточие, а даём две строки: обрезанное
     «Держатель для наушнико…» на первом же экране лишает карточку предмета */
  .ps-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  /* сегмент охвата НЕ растягиваем на всю ширину: залитая градиентом пилюля во весь
     экран становилась самым громким пятном карточки и перекрикивала воронку (§14.A) */
  .ps-minis{grid-template-columns:1fr 1fr}
  .ps-mini-l{font-size:10.5px}
  .as-find input{width:6.5rem}
  /* 6 колонок в 390px уезжали в горизонтальный скролл (строка распухала до 63px):
     прячем ВТОРИЧНУЮ конверсию — она целиком есть в карточке товара по клику,
     и ужимаем поля ячеек: оставшиеся «Открыли/Скачали/Купили» — главный ответ,
     они обязаны читаться без горизонтальной прокрутки (§7) */
  .as-tbl th,.as-tbl td{padding:.55em .4em;font-size:.82rem}
  .as-col-conv{display:none}
  /* «с 8 авг» ИНЛАЙН расширяло колонку «Скачали» на +41px и утаскивало «Купили» за
     край в горизонтальный скролл (замер 390px: 6px → 47px). Прятать подпись нельзя —
     на тач-устройстве тултипа нет, и пара «Купили 12 · Скачали 7» снова читалась бы
     как ошибка данных. Поэтому на узком она уходит ВТОРОЙ строкой шапки: +11px ОДИН
     раз на всю таблицу против 14 строк с прокруткой. `order` держит стрелку сортировки
     на первой строке рядом с названием колонки, а не уносит её на третью. */
  .as-sort{flex-wrap:wrap;justify-content:flex-end}
  .as-sort-i{order:1}
  .as-th-since{order:2;flex-basis:100%;line-height:1.15}
}

/* ════════════════════════════════════════════════════════════════════════════
   .dr-* — КАНОН выбора периода (порт wb-analytics DateRangePicker под ноль).
   Разметку даёт src/ui/date-range.js. Структура канонная 1:1: сегмент пресетов
   + badge-диапазон, поповер = календарь слева + боковая панель справа.
   Цвета — из wb-хардкода под ТЁМНУЮ тему переведены на tokens.css (только var(--*)).

   D0-ПЛОТНОСТЬ (замер против эталона wb и против .ad-period проекта):
     сегмент 28px (эталон .ad-period 27px, канон wb ~33px) · badge 24px ·
     день календаря 26px (канон wb 36px) · боковой пресет 26px (wb 35px) ·
     поле даты 28px (.ad-period-date 30px) · кнопки низа 30px (= .ad-period-apply) ·
     ПОПОВЕР ≈ 426×324px против канонных ~536×394 → ~33%×40% вьюпорта 1280×800,
     то есть треть экрана, а НЕ «окно на пол-страницы».
   ════════════════════════════════════════════════════════════════════════════ */
.dr{display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.dr-anchor{position:relative;display:inline-block}
.dr svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* сегмент пресетов: трек .bg2, активный — БЕЛАЯ пилюля с акцентным текстом
   (ровно как в каноне: surface + primaryHover + мягкая тень, не заливка градиентом) */
.dr-seg{display:inline-flex;flex-wrap:wrap;gap:.1rem;padding:.15rem;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--rad-pill)}
.dr-seg-btn{border:0;cursor:pointer;background:transparent;color:var(--mut);font:inherit;
  font-size:.78rem;font-weight:600;line-height:1;padding:.26rem .55rem;
  border-radius:var(--rad-pill);white-space:nowrap;transition:color .15s,background .15s}
.dr-seg-btn:hover{color:var(--txt)}
.dr-seg-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.dr-seg-btn.is-on{background:var(--card);color:var(--violet-700);font-weight:700;
  box-shadow:0 1px 3px var(--line2)}

/* badge-диапазон человеческим языком — тоже кнопка, открывает тот же поповер */
.dr-badge{border:1px solid var(--line);background:var(--bg2);color:var(--mut);cursor:pointer;
  font:inherit;font-size:.74rem;font-weight:600;line-height:1.35;padding:.16rem .55rem;
  min-height:24px;border-radius:var(--rad-pill);white-space:nowrap;font-variant-numeric:tabular-nums}
.dr-badge:hover{color:var(--txt);border-color:var(--line2)}
.dr-badge:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

/* поповер: z-index 60 — выше контента и sticky-навигации (50), НИЖЕ модалок (150) */
.dr-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;display:flex;gap:.85rem;
  padding:.75rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad-lg);box-shadow:var(--shadow)}
.dr-pop.is-right{left:auto;right:0}          /* флип, если упирается в правый край */

.dr-cal{width:238px;flex:none}
.dr-cal-head{display:flex;align-items:center;justify-content:space-between;gap:.3rem;margin-bottom:.3rem}
.dr-cal-title{font-size:.82rem;font-weight:700;color:var(--txt);text-transform:capitalize}
.dr-nav{width:24px;height:24px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--mut);border-radius:var(--rad-sm)}
.dr-nav svg{width:13px;height:13px}
.dr-nav:hover{color:var(--txt);border-color:var(--line2)}
.dr-nav:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

.dr-week{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.15rem}
.dr-wd{text-align:center;font-size:.64rem;font-weight:700;color:var(--dim);
  text-transform:uppercase;letter-spacing:.04em;padding:.2rem 0}
.dr-wd.is-wknd{color:var(--rose-700);opacity:.8}

.dr-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
/* 32px = ровно квадрат при ширине колонки 32.3 и НЕ растит поповер: его высоту
   диктует боковая панель (~300px), а не календарь. При 26px под сеткой оставалась
   дыра в ~100px белого — не «воздух», а незаполненный блок */
.dr-d{height:32px;padding:0;border:0;background:transparent;border-radius:var(--rad-xs);
  color:var(--txt);font:inherit;font-size:.76rem;font-weight:500;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:background .12s}
.dr-d:hover:not([disabled]){background:var(--bg2)}
.dr-d:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent-ring)}
.dr-d.is-out{color:var(--dim);opacity:.5}
.dr-d.is-wknd{color:var(--rose-700)}
.dr-d.is-today{box-shadow:inset 0 0 0 1px var(--accent);color:var(--violet-700);font-weight:700}
.dr-d.is-in{background:var(--accent-soft);color:var(--violet-700);border-radius:0}
/* края диапазона: violet-600 даёт белому тексту 5.5:1 (violet-500 — только 4.4, ниже AA) */
.dr-d.is-edge{background:var(--violet-600);color:var(--card);font-weight:700;box-shadow:none}
/* край/тело диапазона часто попадает в ХВОСТ соседнего месяца (напр. «30 дней» =
   10 июл — 8 авг в июльской сетке). Приглушение .is-out опускало белый текст на
   заливке ниже 4.5:1 — у выбранных дней его снимаем */
.dr-d.is-in,.dr-d.is-edge{opacity:1}
.dr-d.is-start{border-radius:var(--rad-xs) 0 0 var(--rad-xs)}
.dr-d.is-end{border-radius:0 var(--rad-xs) var(--rad-xs) 0}
.dr-d.is-start.is-end{border-radius:var(--rad-xs)}
.dr-d[disabled]{color:var(--dim);opacity:.38;cursor:not-allowed}

/* 188px, а не прежние 150: боковые пресеты встали в ДВЕ колонки, и самая длинная подпись
   («Всё время», 64.8px текста) требует места на ОДНУ строку с запасом. Замер запаса —
   числом строковых боксов Range на реальной ширине: при 176px запас был 3.6px (шрифт-фолбэк
   съел бы его и вернул перенос), при 188px — 9.6px. Поповер при этом СТАЛ НИЖЕ прежнего:
   453.6×280.4 против 427.6×326.5, потому что высоту снова задаёт календарь, а не столбик. */
.dr-side{width:188px;flex:none;display:flex;flex-direction:column;gap:.3rem}
/* ДВЕ КОЛОНКИ, а не столбик: с шестым пресетом («Всё время») столбик стал ВЫШЕ календаря
   и тянул поповер 326.5 → 355.7px (49.9% высоты вьюпорта — вплотную к «>½ экрана»).
   Сеткой 2×3 боковая панель снова ниже календаря, и высоту поповера опять задаёт он. */
.dr-side-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.2rem;margin-bottom:.15rem}
/* nowrap обязателен: в двух колонках «2 недели» и «Всё время» ложились в ДВЕ строки и
   растили ряд с 26 до 37.25px (ловится числом строковых боксов Range, не scrollWidth) */
.dr-side-btn{min-height:26px;padding:0 .5rem;cursor:pointer;border:1px solid var(--line);
  background:var(--card);border-radius:var(--rad-sm);color:var(--txt);font:inherit;
  font-size:.76rem;font-weight:600;text-align:center;white-space:nowrap}
.dr-side-btn:hover{border-color:var(--line2)}
.dr-side-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.dr-side-btn.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--violet-700);font-weight:700}
.dr-fields{display:flex;flex-direction:column;gap:.3rem}
.dr-f-row{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.dr-f-lbl{font-size:.64rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.dr-f{min-height:28px;width:100%;box-sizing:border-box;padding:0 .5rem;border:1px solid var(--line);
  border-radius:var(--rad-sm);background:var(--card);color:var(--txt);font:inherit;
  font-size:.78rem;font-variant-numeric:tabular-nums}
.dr-f:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.dr-count{min-height:16px;font-size:.72rem;color:var(--mut);text-align:center;
  font-variant-numeric:tabular-nums}
.dr-actions{display:flex;gap:.4rem;margin-top:auto}
.dr-reset,.dr-save{flex:1;min-height:30px;cursor:pointer;font:inherit;font-size:.76rem;
  border-radius:var(--rad-sm)}
.dr-reset{border:1px solid var(--line);background:var(--card);color:var(--mut);font-weight:600}
.dr-reset:hover{color:var(--txt);border-color:var(--line2)}
.dr-save{border:0;background:var(--violet-600);color:var(--card);font-weight:700}
.dr-save:hover:not([disabled]){background:var(--violet-700)}
.dr-save[disabled]{opacity:.45;cursor:not-allowed}
.dr-reset:focus-visible,.dr-save:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

@media(max-width:600px){
  /* колонкой + день 40px: тач-таргет ~40×46 вместо мышиных 26 (§14.D).
     Поповер остаётся ЯКОРНЫМ (не центральная модалка), скроллится внутри. */
  .dr-pop{flex-direction:column;gap:.6rem;width:min(94vw,340px);
    max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow:auto}
  .dr-cal,.dr-side{width:100%}
  .dr-d{height:40px;font-size:.82rem}
  /* боковые пресеты — ОДНА строка с горизонтальным скроллом вместо двух рядов
     вразнобой: минус ~40px высоты шторки, «Неделя/2 недели/Месяц» видны сразу,
     остальное подсказано обрезом (тот же приём, что у категорий-чипов витрины) */
  /* display:flex обязателен: база теперь grid, и flex-direction на ней не работает.
     Полоса прокрутки скрыта (тот же приём, что у .pp-tabs-in / .pp-filter-scroll):
     с шестым пресетом лента стала шире экрана, и классический скроллбар добавлял
     +15px высоты поповеру на десктоп-браузерах с не-overlay полосами. Жест свайпа цел. */
  .dr-side-group{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;
    overscroll-behavior-x:contain;padding-bottom:.1rem;
    scrollbar-width:none;-ms-overflow-style:none}
  .dr-side-group::-webkit-scrollbar{width:0;height:0;display:none}
  .dr-side-btn{flex:0 0 auto;min-height:32px;white-space:nowrap}
  /* поля дат в ДВЕ колонки — минус ~40px высоты шторки на телефоне и «Начало»
     с «Концом» читаются как одна пара, а не как два отдельных блока */
  .dr-fields{flex-direction:row;gap:.45rem}
  .dr-f-row{flex:1 1 0}
  .dr-reset,.dr-save{min-height:40px}
}

/* ════════════════════════════════════════════════════════════════════════════
   .ug-* — дашборд «Сколько людей добавилось» (админка → Пользователи).
   Разметку даёт src/admin.js (renderUsers), график — src/ui/day-chart.js
   (переиспользует .as-chart*/.as-col/.as-b/.as-nums — второго набора стилей нет).
   D0-замер: control-bar 28px · KPI 68px (= эталон .ad-kpi) · HERO-KPI 78px ·
   график 60px · весь дашборд с данными ~250px (секция страницы, не окно).
   ════════════════════════════════════════════════════════════════════════════ */
.ug{margin-bottom:1.1rem}
/* .ad-sec-head выравнивает по baseline (заголовок+подпись); здесь во второй ячейке
   живёт КОНТРОЛ — с baseline он проваливался ниже строки заголовка */
.ug-head{align-items:center;margin-bottom:.55rem}
.ug-body{min-height:68px}

/* HERO-плашка (§4): одна доминанта на дашборде — «новых за период» вдвое шире
   и крупнее остальных, ответ на главный вопрос экрана читается первым.
   ДВЕ строки, не три: дельта живёт ИНЛАЙН у числа, «было N» — в строке подписи.
   Так HERO ≈70px и остаётся в ритме обычной .ad-kpi (68px), а не растит ряд на +28px */
.ad-kpi.is-hero{grid-column:span 2;border-color:var(--line-neon);
  box-shadow:0 6px 18px -14px var(--accent)}
.ad-kpi.is-hero .ad-kpi-val{font-size:1.6rem;overflow:visible}
@media(max-width:560px){
  .ad-kpi.is-hero{grid-column:span 1}
  .ad-kpi.is-hero .ad-kpi-val{font-size:1.4rem}
  /* «· было N» на узкой ячейке роняло подпись на вторую строку и растило КАЖДУЮ
     KPI в ряду на +14px. Вердикт несёт сама дельта (+200%), абсолют прошлого
     периода — деталь: уходит в title плашки (progressive disclosure, D0) */
  .ug-was{display:none}
}
/* дельта к прошлому периоду: стрелка+слово+цвет (цвет НЕ единственный сигнал, §6).
   emerald-800/rose-800 — а не 500/600: на .75rem нужен контраст ≥4.5:1 к белому */
.ug-d{display:inline-flex;align-items:center;gap:.22rem;font-weight:700}
.ug-d svg{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ug-d.is-up{color:var(--emerald-800)}
.ug-d.is-down{color:var(--rose-800)}
.ug-d.is-flat{color:var(--mut)}
/* внутри крупного числа: свой размер и НЕ Unbounded — иначе дисплейный шрифт на
   12px выглядит тяжелее самого числа и спорит с ним за доминанту */
.ad-kpi-val .ug-d{font-size:.75rem;font-family:var(--font);vertical-align:middle;
  margin-left:.45rem;letter-spacing:0}
.ug-was{color:var(--dim);font-weight:600;font-variant-numeric:tabular-nums}

/* drill-down в таблицу — третичное действие (ghost-ссылка), не конкурирует с
   картиной дашборда и не спорит с фильтрами таблицы (§14.A) */
.ug-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.55rem}
.ug-drill{display:inline-flex;align-items:center;gap:.32rem;border:0;background:none;
  padding:.15rem .1rem;min-height:26px;cursor:pointer;font:inherit;font-size:.78rem;
  font-weight:600;color:var(--violet-700);border-bottom:1px dashed var(--line-neon)}
.ug-drill svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ug-drill:hover{border-bottom-color:var(--accent)}
.ug-drill:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-radius:6px}
.ug-drill.is-on{color:var(--mut);border-bottom-color:var(--line2)}

/* активный фильтр-период над таблицей — removable-чип (§15.D) */
.ug-chips{margin:0 0 .7rem}

/* ════════════════════════════════════════════════════════════════════════════
   .ov-* — вкладка «Обзор» админки (кокпит площадки). Разметка — src/admin.js.
   Один вопрос экрана: «растём ли мы за период и где рвётся путь к деньгам».

   Почему шкала такая жёсткая. Аудит прежнего экрана намерил 12 размеров шрифта,
   18 комбинаций «размер+вес», ТРИ доминанты по 24px, отношение доминанты ко
   второстепенному ×1,47 и 11 цветов текста — отсюда «всё сливается». Здесь ровно
   5 размеров, 2 веса, 2 семейства и 5 значащих цветов:

     L1  clamp(20-30px)/700 display  — «Осталось нам». ЕДИНСТВЕННОЕ на экране,
                                       единственная сиреневая плашка (×2,0 к L2)
     L1b clamp(17-22px)/700 display  — итог воронки («Оплатили», «Первая продажа»),
                                       БЕЗ плашки: на squint-тесте виден один
                                       сиреневый прямоугольник, а не три
     L2  15px/700 display, tabular   — промежуточные ячейки цепочек и воронок
     Lт  14px/700 display            — заголовок секции
     L3  12px/600 UI                 — подписи, конверсии, контекст-строки, чипы

   Цвет = смысл, не декор: violet-50 «наш итог» · emerald-700 рост · rose-700
   падение и узкое место · amber «требует действия» · остальное серое.

   Правило масштаба: ни один блок не растёт в высоту от величины чисел. Воронка —
   всегда 4 ячейки и 3 коннектора (конверсия живёт НА коннекторе, поэтому число
   метрик не расширяет блок), ряд очередей — всегда одна строка (3 чипа + «ещё N»),
   дельта — inline в строке числа, суммы от миллиона сокращаются («4,2 млн ₽»,
   точное значение в подсказке): «11 255 900,00 ₽» в 24px-плашке вытекал за
   карточку на 18px при вьюпорте 1024.
   ════════════════════════════════════════════════════════════════════════════ */

/* .ad-sec-head выравнивает по baseline; здесь во второй ячейке КОНТРОЛ — с baseline
   он проваливается ниже строки заголовка (та же правка, что у .ug-head) */
.ov-head{align-items:center;margin-bottom:var(--sp-3)}

/* ритм секций: 16px по 4px-сетке (было 1.05rem вразнобой) */
.ov-sec{margin-bottom:var(--sp-4)}
.ov-sec .ad-sec-head{margin-bottom:var(--sp-2)}
.ov-sec .ad-sec-title{font-size:14px}
.ov-sec .ad-sec-note{font-size:12px}

/* ── цепочка денег и воронка (.ov-flow) ─────────────────────────────────────
   Владелец не аналитик: пять равноправных карточек с деньгами он читает как пять
   противоречащих ответов. Цепочка показывает арифметику целиком одной строкой —
   «оплатили → комиссия − банк = осталось нам», — поэтому объяснять разницу
   словами не нужно, она видна. Воронка той же формы показывает путь и потери. */
.ov-flow{display:flex;align-items:center;gap:var(--sp-1);background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:var(--sp-2) var(--sp-3)}
.ov-fs{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.ov-fs[title]{cursor:help}
.ov-fs-l{font-size:12px;font-weight:600;color:var(--mut);line-height:1.25}
.ov-fs-v{font-family:var(--font-display);font-size:15px;font-weight:700;
  color:var(--gray-800);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  line-height:1.2;white-space:nowrap}

/* L1b — итог блока: размер, но без плашки (плашка на экране ровно одна) */
.ov-fs.is-out{flex:1.35 1 0}
.ov-fs.is-out .ov-fs-v{font-size:clamp(17px,1.8vw,22px);line-height:1.15;color:var(--txt)}
/* L1 — итог ЭКРАНА: единственная сиреневая плашка и единственные 30px */
.ov-flow.is-hero .ov-fs.is-out{flex:1.55 1 0;background:var(--violet-50);border-radius:10px;
  padding:3px var(--sp-2);margin:-3px 0}
.ov-flow.is-hero .ov-fs.is-out .ov-fs-v{font-size:clamp(20px,2.4vw,30px);line-height:1.1}
/* отрицательный итог (эквайринг съел комиссию) — цвет ПЛЮС знак минус в самом числе */
.ov-fs.is-neg .ov-fs-v{color:var(--rose-700)}
/* шаг, которого сервер не считает: число возвращается к L2 — «нет данных» в 30px
   кричит о пустоте там, где надо спокойно сказать «датчик не поставлен» */
.ov-fs.is-void .ov-fs-v{font-size:15px;line-height:1.2}
/* сокращённое число: точное значение — в подсказке */
.ov-x{cursor:help}
/* 🔴 дельта — INLINE в строке числа и всегда L3: без этой строки она наследовала
   размер родителя и печаталась 30px рядом с 30px итогом — два соперника вместо
   «число + пометка». Плюс inline не даёт ей уронить вторую строку и вырастить блок */
.ov-fs-v .ug-d{font-size:12px;font-family:var(--font);font-weight:700;
  letter-spacing:0;vertical-align:middle;margin-left:5px;gap:2px}
.ov-fs-v .ug-d svg{width:10px;height:10px}
.ov-fs-v .ug-d.is-up{color:var(--emerald-700)}
.ov-fs-v .ug-d.is-down{color:var(--rose-700)}

/* знак арифметики: тише подписей, читается как оператор, а не как контент.
   gray-600, а не 400: операторы цепочки были самым невидимым текстом экрана (2,5:1) */
.ov-op{flex:none;font-size:12px;font-weight:700;color:var(--gray-600);line-height:1}

/* коннектор воронки = конверсия. flex:none + nowrap: блок не растёт в ширину от
   числа метрик, а треугольник задаёт направление чтения без лишней графики */
/* padding 2px, а не 4: между ячейкой и долей уже есть gap самой цепочки (4px), и лишние
   8px на трёх коннекторах отбирали ширину у подписей — «Выложили первый товар» уходил
   во вторую строку и растил всю воронку на 8px */
.ov-cv{flex:none;display:inline-flex;align-items:center;gap:4px;padding:0 2px;
  font-size:12px;font-weight:600;color:var(--mut);white-space:nowrap;cursor:help}
.ov-cv::before{content:'';flex:none;width:0;height:0;border:4px solid transparent;
  border-left-color:var(--gray-300)}
.ov-cv b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--gray-800)}
/* «*» = у доли есть оговорка (разные счётчики ИЛИ своя оговорка шага). Это ЗНАЧАЩИЙ знак
   и КНОПКА: на телефоне hover'а нет, и раньше смысл символа был недостижим вовсе.
   Тап/Enter раскрывает сноску .ov-fnote под воронкой. Тише числа, но контраст AA:
   gray-600 (5,3:1), не gray-500 (3,4:1). Зона тапа растянута ПАДДИНГОМ с компенсацией
   отрицательным вертикальным margin — визуальный ритм коннектора не меняется */
.ov-cv-x{appearance:none;background:none;border:0;font:inherit;font-weight:700;line-height:1;
  color:var(--gray-600);cursor:pointer;padding:6px 9px;margin:-6px -5px;border-radius:6px;
  position:relative;z-index:1}   /* зона тапа лежит ПОВЕРХ соседей, а не под ними */
.ov-cv-x:hover{color:var(--gray-800);background:var(--gray-100)}
.ov-cv-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.ov-cv-x.is-on{color:var(--violet-700);background:var(--violet-50)}
/* сноска: по умолчанию hidden (0 px высоты — плотность экрана не страдает), приходит
   по тапу. Тот же 12px-регистр, что у .ov-line: это контекст, а не второй ярус данных */
.ov-fnote{margin:var(--sp-2) 0 0;font-size:12px;line-height:1.4;color:var(--mut)}
.ov-fnote b{font-weight:700;color:var(--gray-600)}
/* «≈» = базы мало, доля округлена до целого и точности не обещает (сами числа перехода —
   в подсказке: на экране их уже несут две соседние ячейки). Сигнал несёт ЗНАК, а не цвет;
   gray-600 (5,3:1 к белому, AA) — лишь второй, тихий слой поверх него */
.ov-cv.is-soft b{color:var(--gray-600);font-weight:600}
/* 🔴 ВЕРДИКТА НА КОННЕКТОРЕ БОЛЬШЕ НЕТ (решение владельца): плашка «узкое место»
   (.ov-cv.is-bad), переход в разбор (.ov-cv-go) и подпись «было N%» (.ov-cv-was)
   убраны вместе со своим CSS. Коннектор печатает ДОЛЮ и ничего не судит; оговорки
   честности остались на «*» и в подсказке. Прочерк — только там, где считать нечем */
.ov-cv.is-void b{color:var(--gray-600)}

/* одна пояснительная строка под блоком — вместо второго ряда карточек (D0).
   Сюда уходит контекст: средний чек, «всего сейчас», оговорки датчиков */
.ov-line{margin:var(--sp-2) 0 0;font-size:12px;line-height:1.4;color:var(--mut)}
.ov-line b{font-weight:700;color:var(--gray-800);font-variant-numeric:tabular-nums}
.ov-line span[title]{cursor:help}

/* 🔴 «н/д» / «нет данных» — значение неизвестно. Пунктир + приглушённый цвет:
   визуально это НЕ значение и точно НЕ ноль. gray-600 — контраст ≥4,5:1 к белому */
.ov-nd{color:var(--gray-600);font-weight:600;border-bottom:1px dashed var(--gray-300);
  cursor:help}

/* ── ④ вердикт «что горит» ──────────────────────────────────────────────────
   Вердикт не суммирует разнородные очереди: из «1 182 задачи ждут внимания» не
   следует ни одного действия. Он говорит, что ждёт ДОЛЬШЕ ВСЕГО. */
.ov-sec .ad-hero{margin-bottom:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  font-size:12px;line-height:1.4;border-radius:12px}
.ov-sec .ad-hero svg{width:17px;height:17px}
.ov-sec .ad-hero b{font-family:var(--font-display);font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* «состояние неизвестно» — нейтрально-серый, НИКОГДА не зелёный (датчик ≠ здоровье) */
.ad-hero.is-nd{border-color:var(--gray-300);background:var(--gray-50);color:var(--gray-700)}

/* ряд очередей — ВСЕГДА одна строка: 3 чипа + «ещё N». На масштабе прежние 7-8
   чипов давали два ряда на десктопе и четыре на телефоне */
.ov-qs{display:flex;flex-wrap:nowrap;gap:var(--sp-2);margin:0;min-width:0}
.ov-qs.is-all{flex-wrap:wrap}
.ov-q{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--rad-pill);background:var(--card);
  font:inherit;font-size:12px;font-weight:600;color:var(--mut);cursor:pointer;
  min-width:0;transition:border-color .15s,background .15s,transform .15s}
.ov-q-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-q-n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--gray-800);flex:none}
button.ov-q:hover{border-color:var(--line-neon);transform:translateY(-1px)}
button.ov-q:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.ov-q.is-static{cursor:default}                 /* почта — статус, не навигация */
.ov-q.is-hid{display:none}
.ov-qs.is-all .ov-q.is-hid{display:inline-flex}
.ov-q.is-more{flex:none;border-style:dashed;color:var(--gray-600)}
/* ноль = очередь ответила и пуста: гасим ЦВЕТОМ, не размером */
.ov-q.is-zero{background:var(--bg2)}
.ov-q.is-zero .ov-q-n{color:var(--mut)}
.ov-q.is-warn{border-color:var(--amber-300);background:var(--amber-50)}
.ov-q.is-warn .ov-q-lbl,.ov-q.is-warn .ov-q-n{color:var(--amber-900)}
/* rose-800, не 700: на 12px поверх rose-50 семёрка даёт 3,8:1 — мимо AA */
.ov-q.is-bad{border-color:var(--rose-200);background:var(--rose-50)}
.ov-q.is-bad .ov-q-lbl,.ov-q.is-bad .ov-q-n{color:var(--rose-800)}
.ov-q.is-ok{border-color:var(--emerald-200);background:var(--emerald-50)}
.ov-q.is-ok .ov-q-lbl{color:var(--emerald-800)}
/* датчик молчит — пунктирная рамка: «рамка не сплошная» читается как «данных нет» */
.ov-q.is-nd{border-style:dashed;border-color:var(--gray-300);background:var(--gray-50)}
.ov-q.is-nd .ov-q-lbl,.ov-q.is-nd .ov-q-n{color:var(--gray-600)}

/* ── ⑤⑥ свёрнутая секция (.ov-fold) ────────────────────────────────────────
   Чужие деньги (долг мастерам) и здоровье движка — на виду ВЕРДИКТ строкой,
   числа по клику. Полноразмерная цепочка долга весила на squint-тесте больше
   нашего дохода: 3,8 млн против 302 тыс. — чужое перетягивало экран на себя */
.ov-fold>summary{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  min-height:24px;cursor:pointer;list-style:none}
.ov-fold>summary::-webkit-details-marker{display:none}
.ov-fold>summary::before{content:'';flex:none;width:0;height:0;border:4px solid transparent;
  border-left-color:var(--gray-400);transition:transform .15s}
.ov-fold[open]>summary::before{transform:rotate(90deg) translateX(-1px)}
.ov-fold>summary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);border-radius:8px}
.ov-fold>summary:hover .ad-sec-title{color:var(--violet-700)}
/* «есть сбои» — не только цветом: слово стоит в самом вердикте */
.ov-fold .ad-sec-note.is-warn{color:var(--amber-800);font-weight:700}
.ov-fold-body{margin-top:var(--sp-2)}
.ov-dists{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:var(--sp-2)}
.ov-dist-card{padding:var(--sp-3)}
.ov-dist-title{font-size:.85rem;margin-bottom:.5rem}
/* скелет одной широкой полосы — в одну колонку */
.ov-skel-bar{grid-template-columns:1fr}

@media(max-width:700px){
  /* экран длинный (6 секций), поэтому ритм на телефоне на ступень ниже */
  .ov-sec{margin-bottom:var(--sp-3)}
  .ov-sec .ad-sec-head{margin-bottom:6px}
  /* цепочка встаёт «чеком»: подпись слева, число справа, знак действия между строк.
     Горизонтальные ячейки на телефоне ужимались до нечитаемых 70px */
  .ov-flow{flex-direction:column;align-items:stretch;gap:1px;padding:var(--sp-1) var(--sp-1)}
  /* горизонтальный паддинг ОДИНАКОВЫЙ у всех строк, включая итог: в чеке числа
     обязаны стоять в одну колонку справа, иначе итог «выпадает» */
  .ov-fs{flex-direction:row;align-items:baseline;justify-content:space-between;
    gap:var(--sp-2);min-height:22px;padding:0 var(--sp-2)}
  .ov-fs-l{flex:1 1 auto}
  .ov-flow.is-hero .ov-fs.is-out{margin:2px 0 0;padding:var(--sp-1) var(--sp-2)}
  .ov-op{align-self:center;font-size:12px}
  /* коннектор воронки на телефоне — тонкая строка справа, треугольник вниз */
  .ov-cv{align-self:stretch;justify-content:flex-end;height:14px;padding:0 var(--sp-2)}
  .ov-cv::before{transform:rotate(90deg)}
  /* тач: у коннектора собственной высоты почти нет, поэтому зона тапа звёздочки
     растягивается ПАДДИНГОМ (≥30px по вертикали) с компенсацией margin — строка
     воронки от этого не растёт. Горизонтальных отрицательных отступов нет: они
     наехали бы на соседнюю ячейку и воровали её тапы */
  .ov-cv-x{padding:9px 10px;margin:-9px -5px}
}
@media(max-width:600px){
  /* тач-таргет: на телефоне чип — основной способ провалиться в очередь */
  .ov-q{min-height:44px;padding:0 12px}
  .ov-qs{flex-wrap:wrap}
  .ov-fold>summary{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .ov-q,.ov-fold>summary::before{transition:none}
  button.ov-q:hover{transform:none}
}

/* ════════════════════════════════════════════════════════════════════
   АДМИНКА — блоки ревизии найма персонала (2026-08-18).
   Всё на токенах tokens.css (ноль hex), плотность по frontend/brand/DENSITY.md:
   полоса-статус 34px · хвост очереди 0px пока всё влезло · строка выбора
   должности 40px (= высота компактной кнопки, не «крупная карточка»).
   ════════════════════════════════════════════════════════════════════ */

/* Хвост очереди: «показано N из T» + «Показать ещё». Узел РЕНДЕРИТСЯ ТОЛЬКО когда
   есть что подгружать (см. renderQueueTail), поэтому в покое стоит ровно 0px —
   отдельного «пустого» состояния у него нет и быть не должно. */
.ad-qtail{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
  margin-top:var(--sp-3);flex-wrap:wrap}
.ad-qtail .ad-more{margin-top:0}
/* «сколько всего — неизвестно»: счётчик упал, список цел. Пунктир — та же азбука, что у
   .ov-q.is-nd и .ad-strip.is-nd (молчащий датчик), 0 px лишней высоты. */
.ad-qtail .ad-sec-note.is-nd{border-bottom:1px dashed var(--line);padding-bottom:1px;cursor:help}

/* Полоса состояния канала (вебхук доставки, почта): ОДНА строка на весь раздел.
   Это статус, а не карточка: высота 34px, вес тише заголовка секции. */
.ad-strip{display:flex;align-items:center;gap:var(--sp-2);min-height:34px;
  padding:var(--sp-1) var(--sp-3);margin-bottom:var(--sp-3);border-radius:var(--rad-md);
  border:1px solid var(--line);background:var(--card);
  font-size:.82rem;font-weight:600;color:var(--txt);line-height:1.35}
.ad-strip svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ad-strip-t{flex:1 1 auto;min-width:0}
.ad-strip.is-ok{border-color:var(--emerald-200);background:var(--emerald-50);color:var(--emerald-800)}
.ad-strip.is-bad{border-color:var(--rose-200);background:var(--rose-50);color:var(--rose-800)}
.ad-strip.is-nd{border-style:dashed;color:var(--mut)}
.ad-strip .pp-btn{flex:none}

/* Маска контактов — тихая метка в уже существующем ряду чипов над таблицей людей */
.ad-mask{display:inline-flex;align-items:center;cursor:help}

/* Имя сотрудника в журнале = кнопка-фильтр (сужает экран, а не уводит с него).
   Выглядит ссылкой, но зона тапа добирается паддингом, а не ростом строки. */
.ad-log-actor{border:0;background:none;padding:6px 4px;margin:-6px -4px;cursor:pointer;
  font:inherit;font-weight:600;color:var(--violet-600);text-align:left;white-space:nowrap;
  border-radius:var(--rad-xs)}
/* цвет — violet-600 (5.47:1 к белому), а не --accent violet-500 (4.35:1 — мимо AA 4.5) */
.ad-log-actor:hover{text-decoration:underline}
.ad-log-actor:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Выбор должности в команде — компактный список-радио внутри модалки.
   Одна роль за раз: «поддержка + финансы» это не вакансия, а способ собрать
   полный доступ из кусочков (см. STAFF_ROLE_OPTS в admin.js). */
.ad-roles{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-2)}
.ad-role{display:flex;align-items:flex-start;gap:var(--sp-2);min-height:36px;
  padding:5px var(--sp-2);border-radius:var(--rad-sm);cursor:pointer;
  border:1px solid transparent}
.ad-role:hover{background:var(--bg2)}
.ad-role:has(input:checked){border-color:var(--line-neon);background:var(--violet-50)}
.ad-role input{margin-top:2px;accent-color:var(--accent);flex:none}
.ad-role-t{display:block;font-size:.82rem;font-weight:700;color:var(--txt);line-height:1.2}
.ad-role-t small{display:block;font-size:.72rem;font-weight:500;color:var(--mut);line-height:1.25}

/* Длинный UGC в ячейке (текст отзыва, причина жалобы): видно две строки, полный текст —
   в подсказке. Иначе одна многословная жалоба растит строку таблицы вчетверо и очередь
   перестаёт читаться списком. */
/* Колонка действий не переносится: две кнопки в два этажа растят строку вдвое и очередь
   перестаёт читаться списком (кнопки при этом остаются 33–36px). */
.ad-actcell{white-space:nowrap}
.ad-actcell .btn-row{flex-wrap:nowrap}

.ad-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-width:34ch;line-height:1.35}

/* ── «Взял в работу» — пометка сотрудника на строке очереди ───────────────────
   ОДИН контрол в трёх состояниях: свободна («Взять») · моя («Вы» + отпустить) ·
   чужая (имя коллеги, тап = перехват). Живёт ПЕРВЫМ в уже существующем ряду
   действий: своя колонка стоила бы ширины в каждой из пяти очередей, свой этаж —
   +30px на КАЖДОЙ строке. Высота 26px внутри 34-пиксельного ряда кнопок ⇒ строка
   таблицы не растёт ни на пиксель, а зона тапа добирается паддингом с компенсацией
   отрицательным вертикальным margin (тот же приём, что у «*» воронки; WCAG 2.5.8). */
.ad-claim{display:inline-flex;align-items:center;gap:4px;height:26px;padding:9px 9px;margin:-4px 0;
  border:1px dashed var(--line2);border-radius:999px;background:none;color:var(--mut);
  font:600 11.5px var(--font);white-space:nowrap;cursor:pointer;max-width:150px;
  overflow:hidden;text-overflow:ellipsis;box-sizing:content-box}
.ad-claim svg{flex:none;opacity:.75}
.ad-claim:hover{border-style:solid;border-color:var(--line-neon);color:var(--violet-700)}
.ad-claim:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.ad-claim[disabled]{opacity:.55;cursor:progress}
/* моя карточка — эмеральд: «работаю я». Не кнопка целиком (нажимать не на что),
   кнопка внутри — только «отпустить» */
.ad-claim.is-mine{border-style:solid;border-color:var(--emerald-200);background:var(--emerald-50);
  color:var(--emerald-800);cursor:default;padding-right:2px}
.ad-claim.is-mine svg{opacity:1}
/* чужая — амбер: не «ошибка», а «занято человеком». Смысл несёт ИМЯ, цвет лишь поддерживает */
.ad-claim.is-other{border-style:solid;border-color:var(--amber-200);background:var(--amber-50);
  color:var(--amber-800)}
.ad-claim.is-other:hover{border-color:var(--amber-300);color:var(--amber-800)}
.ad-claim-x{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;margin-left:2px;padding:0;border:0;border-radius:999px;
  background:none;color:var(--emerald-800);opacity:.7;cursor:pointer}
.ad-claim-x:hover{opacity:1;background:var(--bg2)}
.ad-claim-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.ad-claim-host{display:inline-flex;align-items:center}

/* предупреждающая подпись секции («N заявок ждут перевода») — амбер и жирнее, но того же
   12px-регистра: сигнал в шапке, а не второй ярус блоков. Раньше правило жило только
   внутри .ov-fold и на других секциях не работало */
.ad-sec-note.is-warn{color:var(--amber-800);font-weight:700}

/* ════════════════════════════════════════════════════════════════════
   АДМИНКА — волна Б (2026-08-19): overflow «⋯» в строках очередей +
   «передали выше». Токены tokens.css, ноль hex. Плотность — DENSITY.md
   и соседние блоки этого же файла:
     кебаб ⋯ 26px  = высота .ad-claim 26px (тот же ряд, строка не растёт);
     пункт меню 32px, меню ≤ 260px шириной — это НЕ окно, а список из 2–3 строк;
     плашка эскалации 32px в одну строку (0 px, пока эскалации нет: tr[hidden]).
   ════════════════════════════════════════════════════════════════════ */

/* Кебаб «ещё действия»: icon-only, БЕЗ постоянной рамки (§14.E — рамка у каждой иконки
   и есть тот самый шум), но видим всегда — не hover-reveal, иначе на тач его нет вовсе.
   26px глиф + паддинг с отрицательным margin = зона тапа 44px без роста строки (WCAG 2.5.8). */
.ad-kebab{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;padding:9px;margin:-9px -4px;border:0;border-radius:var(--rad-pill);
  background:none;color:var(--mut);cursor:pointer;box-sizing:content-box}
.ad-kebab:hover{background:var(--bg2);color:var(--txt)}
.ad-kebab[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent)}
.ad-kebab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

/* Меню строки. Живёт в body (fixed), потому что .cm-table-wrap имеет overflow-x:auto и
   обрезал бы всплывашку по краю таблицы. Ширина по контенту, потолок 260px: это список
   из двух-трёх пунктов, а не диалог. */
.ad-menu{position:fixed;z-index:1000;min-width:196px;max-width:260px;padding:var(--sp-1);
  border:1px solid var(--line);border-radius:var(--rad-md);background:var(--card);
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1px}
/* пункт = ОДНА строка 32px: описание под каждым пунктом растило его вдвое (65px в замере) */
.ad-menu-i{display:flex;align-items:center;gap:var(--sp-2);width:100%;
  min-height:32px;padding:6px 9px;border:0;border-radius:var(--rad-sm);background:none;
  color:var(--txt);font:600 13px var(--font);text-align:left;line-height:1.25;cursor:pointer}
.ad-menu-i svg{flex:none;opacity:.7}
.ad-menu-i:hover:not([disabled]){background:var(--bg2)}
.ad-menu-i:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
/* деструктив — только цветом ТЕКСТА и только в меню: заливки тут быть не должно, иначе
   красный прямоугольник перетягивает на себя весь экран (§14.A) */
.ad-menu-i.is-danger{color:var(--rose-800)}
.ad-menu-i.is-danger:hover:not([disabled]){background:var(--rose-50)}
.ad-menu-i[disabled]{color:var(--mut);cursor:default}
.ad-menu-sep{height:1px;margin:3px 6px;background:var(--line)}

/* ── «Передали выше»: плашка ПОД своей карточкой ─────────────────────────────
   Строка таблицы, а не отдельный ярус и не колонка: причина обязана печататься целиком
   (в ней весь смысл эскалации), а в ячейку действий она не влезет никогда. Пока карточку
   никто не передавал, <tr hidden> = ровно 0 px — на пяти очередях это сотни строк.
   Янтарь — та же азбука, что у .ad-claim.is-other: «тут человек», а не «ошибка». */
.ad-escrow[hidden]{display:none}
.ad-escrow>td{padding:0 !important;border-top:0 !important}
.ad-esc{display:flex;align-items:flex-start;gap:var(--sp-2);min-height:32px;
  padding:5px var(--sp-3);border-left:3px solid var(--amber-300);background:var(--amber-50);
  font-size:12px;line-height:1.35;color:var(--amber-900)}
.ad-esc-ic{flex:none;display:inline-flex;margin-top:2px;color:var(--amber-800)}
.ad-esc-t{flex:1 1 auto;min-width:0}
.ad-esc-t b{font-weight:800}
/* причина — ЦЕЛИКОМ и переносом: обрезать вопрос, ради которого всё затевалось, нельзя */
.ad-esc-why{display:block;color:var(--txt);font-weight:600;overflow-wrap:anywhere}
/* «снять вопрос» — третичный вес: это не исход карточки, а закрытие вопроса по ней.
   20px тела + паддинг = 42px зоны тапа, отрицательный margin возвращает вклад в поток к
   24px ⇒ плашка держит 34px и НЕ растёт под кнопку (приём .ad-claim, WCAG 2.5.8). */
.ad-esc-x{flex:none;height:20px;padding:10px 12px;margin:-9px 0;border:1px solid var(--amber-200);
  border-radius:var(--rad-pill);background:var(--card);color:var(--amber-800);
  font:700 11.5px var(--font);white-space:nowrap;cursor:pointer;box-sizing:content-box}
.ad-esc-x:hover{border-color:var(--amber-300);background:var(--amber-100)}
.ad-esc-x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.ad-esc-x[disabled]{opacity:.55;cursor:progress}

/* Счётчик «Ждут старшего» в рейле — ЯНТАРНЫЙ против фиолетового у обычных очередей:
   это другое значение («человек упёрся и ждёт тебя»), а не другая интенсивность одного и
   того же. amber-800 под белым = 6.1:1 (AA с запасом), фиолетовый оставлен всем остальным. */
#rail .cm-acct-count.is-esc,
#rail .cm-acct-btn.is-active .cm-acct-count.is-esc{background:var(--amber-800);
  box-shadow:0 2px 6px -1px rgba(138,82,0,.45)}

@media (max-width:760px){
  /* на телефоне ряд действий переносится, и кебаб не должен «прилипать» к primary */
  .ad-kebab{margin:-9px 0}
  .ad-menu{max-width:min(280px,calc(100vw - 16px))}
  .ad-esc{flex-wrap:wrap}
  .ad-esc-x{margin-left:auto}
}

/* ════════════════════════════════════════════════════════════════════
   АДМИН-РЕЙЛ (#rail) — «сегодняшняя работа» на экране, справочное под «Ещё».
   Скоуп строго #rail: те же классы .cm-acct* держат рейл КАБИНЕТА (#acctRail),
   и его плотность/раскладку эта ревизия не трогает.
   Замер до (прод 2026-08-19): 20 пунктов × 42px → рейл 945px при вьюпорте 900
   (два раздела под сгибом); mobile 390×844 — рейл 789px = 93% экрана, панель
   начиналась на y=992. После: пункт 32px, десктоп-рейл ~437px свёрнутым и со
   СВОЕЙ прокруткой (потолок 100vh−24), мобильный рейл = одна строка выбора 42px.
   ════════════════════════════════════════════════════════════════════ */
/* Потолок высоты — через переменную, а НЕ двухстрочником: значение содержит var(--sp-6),
   поэтому на браузере без dvh объявление становится invalid at computed-value time,
   max-height уходит в none, и предыдущая vh-строка НЕ подхватывается (рейл вырастал
   за вьюпорт). dvh подмешивается @supports — паттерн из messenger.css. */
#rail.ad-rail{position:sticky;top:var(--sp-3);display:flex;flex-direction:column;gap:0;
  --ad-rail-max:calc(100vh - var(--sp-6));max-height:var(--ad-rail-max);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-2) 6px;border-radius:14px}
@supports (max-height:1dvh){#rail.ad-rail{--ad-rail-max:calc(100dvh - var(--sp-6))}}
#rail .ad-raillist{display:flex;flex-direction:column;gap:2px}
#rail .ad-railpick{display:none}                       /* строка выбора — только мобайл */

/* Пункт: 32px вместо 38px — нижняя ступень шкалы контролов D0 (32–40). Иконка 16px:
   при 18px глиф спорил по весу с подписью, а высоту строки задавал именно он. */
#rail .cm-acct-btn{min-height:32px;padding:5px var(--sp-2);gap:var(--sp-2);
  font-size:13px;border-radius:9px}
#rail .ad-rail-ico svg{width:16px;height:16px}
#rail .cm-acct-glabel{font-size:10.5px;letter-spacing:.08em;padding:var(--sp-2) var(--sp-2) 3px}
#rail .ad-raillist>.cm-acct-glabel:first-child{padding-top:2px}

/* Свёртка «Ещё» — третичный вес: это не раздел, а дверь к редким разделам, и она не
   должна конкурировать с очередями (§14.A). Маркер <details> снят, свой шеврон. */
/* Свёртка отбита чертой сверху, а её содержимое — вложенной колонкой с хайрлайном:
   без этого повторный ярлык группы («ДЕНЬГИ» и наверху, и внутри) читался как дубль,
   а не как «остальное из той же группы». */
#rail .ad-railmore{margin-top:var(--sp-2);padding-top:var(--sp-1);border-top:1px solid var(--line)}
#rail .ad-railmore-sum{display:flex;align-items:center;gap:var(--sp-2);min-height:32px;
  padding:5px var(--sp-2);border-radius:9px;cursor:pointer;list-style:none;
  color:var(--dim);font:600 13px var(--font)}
#rail .ad-railmore-sum::-webkit-details-marker{display:none}
#rail .ad-railmore-sum::marker{content:''}
#rail .ad-railmore-sum:hover{background:rgba(124,92,255,.07);color:var(--txt)}
#rail .ad-railmore-sum:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
#rail .ad-railmore-sum .ad-rail-ico{transition:transform .16s}
#rail .ad-railmore[open]>.ad-railmore-sum .ad-rail-ico{transform:rotate(180deg)}
#rail .ad-railmore-n{flex:none;font-size:11px;font-weight:700;color:var(--dim);
  font-variant-numeric:tabular-nums}
#rail .ad-railmore-body{display:flex;flex-direction:column;gap:2px;padding-top:2px;
  margin-left:7px;padding-left:6px;border-left:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){
  #rail .ad-railmore-sum .ad-rail-ico,#rail .ad-railpick-ch{transition:none}
}

/* Перекрёстная ссылка «искать здесь, а лежит там» (ярус «Доставки» → настройки
   площадки). Третичный вес; padding+отрицательный margin дают 24px зоны тапа,
   не растя строку (тот же приём, что .ad-esc-x). */
.ad-xref{margin:0 0 var(--sp-2);font-size:12px;line-height:1.35;color:var(--mut)}
.ad-xref-b{border:0;background:none;padding:4px 2px;margin:-4px -2px;font:inherit;
  font-weight:700;color:var(--accent);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;border-radius:4px}
.ad-xref-b:hover{color:var(--txt)}
.ad-xref-b:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

@media(max-width:760px){
  /* Рейл сворачивается в ОДНУ строку «Раздел: …» — содержимое начинается сразу под ней,
     а не после 789px списка. Список раскрывается по тапу той же сеткой 2×N, что и был. */
  /* Свёрнутый рейл = САМА строка выбора: карточка-обёртка вокруг неё давала двойную
     рамку и лишние 14px. Карточку получает раскрытый список. */
  #rail.ad-rail{position:static;max-height:none;overflow:visible;padding:0;border:0;
    background:none;border-radius:0}
  #rail .cm-acct-railhead{display:none}                 /* заголовок «Разделы» заменён строкой выбора */
  #rail .ad-railpick{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:44px;
    padding:5px var(--sp-3);border:1px solid var(--line);border-radius:14px;background:var(--card);
    color:var(--txt);font:inherit;text-align:left;cursor:pointer}
  #rail.is-pickopen .ad-railpick{border-color:var(--line-neon)}
  #rail .ad-railpick:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
  #rail .ad-railpick-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
  #rail .ad-railpick-k{font-size:9.5px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--dim)}
  /* имя раздела в строке выбора — ОДНА строка: перенос растил бы шапку рейла обратно */
  #rail .ad-railpick .cm-acct-lbl{font-size:14px;font-weight:700;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  #rail .ad-railpick-ch{transition:transform .16s}
  #rail.is-pickopen .ad-railpick-ch{transform:rotate(180deg)}
  #rail .ad-raillist{display:none}
  #rail.is-pickopen .ad-raillist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;margin-top:6px;padding:var(--sp-2);border:1px solid var(--line);
    background:var(--bg2);border-radius:14px}
  #rail .cm-acct-btn{width:auto;min-width:0;min-height:40px;border:1px solid var(--line);
    background:var(--card);font-size:13px}
  #rail .cm-acct-btn.is-active{border-color:var(--line-neon)}
  #rail .cm-acct-glabel{grid-column:1/-1;width:auto;padding:6px 2px 0}
  #rail .ad-railmore{grid-column:1/-1;margin-top:0}
  #rail .ad-railmore-sum{min-height:40px;border:1px dashed var(--line);background:var(--card)}
  /* на телефоне колонка узкая — вложенный хайрлайн съедал бы ширину подписей */
  #rail .ad-railmore-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
    padding-top:6px;margin-left:0;padding-left:0;border-left:0}
}

/* ── Инлайн бренд-иконка вместо сырых символов-индикаторов (добор волны В) ────
   Было: «✓» в колонке Telegram, «↓» в подписи «Экспорт CSV», «←» в «К обращениям» —
   символы, притворяющиеся иконками (разный кегль/базовая линия у шрифтов, в поиске по
   странице ловятся как текст, скринридер читает их вслух). Теперь line-SVG из IC:
   14px, currentColor, тот же штрих 1.8, что у иконок рейла. Отступ даёт сам контейнер
   (.btn gap .45em, .cm-back gap .4em) — второго пробела не добавляем. */
.ad-ico{display:inline-flex;flex:none;align-items:center}
.ad-ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* «Telegram привязан»: галка + сам ник — сигнал НЕ одним цветом (WCAG 1.4.1),
   зелёный только на глифе, ник остаётся обычным текстом таблицы. */
.ad-tg-on{display:inline-flex;align-items:center;gap:5px;min-width:0}
.ad-tg-on .ad-ico{color:var(--emerald-700)}

/* Хвост свёртки «Ещё». В покое — тихое число «сколько там лежит» (третичный вес: это не
   работа, а объём ящика). Стало непусто внутри — акцент-пилюля с суммой: по правилу
   состава раздел со счётчиком > 0 всплывает наверх сам, но если он почему-то остался
   внизу, молчать об этом нельзя. Геометрия = бейджа рейла (18px), чтобы строка не росла. */
#rail .ad-railmore-n.is-hot{min-width:18px;height:18px;line-height:18px;padding:0 5px;
  border-radius:var(--rad-pill);background:var(--accent);color:#fff;font-weight:800;
  font-size:11px;text-align:center;box-shadow:0 2px 6px -1px rgba(124,92,255,.45)}