/* «Стеклянный» вид ЦРМ (GLASS_UI_SPEC.md, 02.11.2026): тёмное матовое стекло над атмосферным фоном, плавающие панели,
 * оранжевый акцент со свечением, плавные переходы. Меняется только внешний вид — структура, тексты и логика прежние.
 *
 * Всё живёт здесь и включается атрибутом <html data-skin="glass"> (base.html). Откат:
 *   для себя — localStorage.setItem('crm-skin','classic') в консоли браузера;
 *   для всех — удалить строку <link … glass.css> в templates/base.html.
 * tokens.css / base.css / components.css не меняются: стекло переопределяет их отсюда (файл грузится последним).
 *
 * Порядок: шрифт → токены (тёмная, светлая, «как в системе») → фон → материалы → каркас → компоненты → таблицы →
 * оверлеи → полосы страниц → мелочи → анимации → мобильная → фолбэки → печать → исключения (редакторы, вход).
 */

/* ── 1. Шрифт: Manrope (OFL, static/fonts/LICENSE-Manrope.txt) — интерфейс; Inter — плотные данные ───────── */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('../fonts/manrope-cyrillic-wght-normal.woff2') format('woff2-variations'), url('../fonts/manrope-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* ── 2. Токены: тёмная тема (основная) ─────────────────────────────────────────────────────────────────── */
:root[data-skin="glass"] {
  --font:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-data:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* база: сплошные — для липких ячеек и всего, что не может быть прозрачным */
  --bg:#0c0f14;
  --surface-solid:#151922; --surface-2-solid:#1a1f29; --surface-3-solid:#222835;

  /* стекло */
  --glass-bg:rgba(20,24,32,.58);
  --glass-bg-strong:rgba(18,22,30,.80);
  --glass-bg-dense:rgba(16,19,26,.86);
  --glass-fill-1:rgba(255,255,255,.035);
  --glass-fill-2:rgba(255,255,255,.06);
  --glass-fill-3:rgba(255,255,255,.09);
  --glass-border:rgba(255,255,255,.08);
  --glass-border-strong:rgba(255,255,255,.14);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.06);
  --glass-shadow:0 1px 1px rgba(0,0,0,.22), 0 14px 36px -16px rgba(0,0,0,.65);
  --glass-blur:22px; --glass-blur-strong:30px; --glass-sat:150%;
  --glass-popup:rgba(20,24,33,.96);           /* выпадашки внутри панелей и подсказки: почти сплошные (14.3) */
  --glass-row-hover-solid:#1b2029; --glass-row-selected-solid:#2a1d14;
  --glass-atmo-peak:#37414a;                  /* самая светлая точка фона — контракт теста контраста (12.1) */

  /* существующие токены → стекло: всё, что уже на токенах, становится стеклянным само */
  --surface:var(--glass-bg);
  --surface-2:var(--glass-fill-1);
  --surface-3:var(--glass-fill-2);
  --border:var(--glass-border);
  --border-strong:var(--glass-border-strong);

  --text:#e8eaf0; --text-strong:#ffffff; --muted:#a6aec0; --faint:#8f97a9;
  /* статусы текстом на стекле — ≥ 4,5:1 (аудит 03.11: бейджи и плашки были 4,2–4,3) */
  --success:#4ade80; --danger:#f87171; --warning:#fbbf24; --info:#60a5fa; --accent-ink:#fb923c;
  --on-status:#10141c;                        /* текст на заливке статусом: тёмный на светлых статусах */

  --accent:#f97316; --accent-hover:#fb8a3c;
  --accent-soft:rgba(249,115,22,.16);
  --accent-grad:linear-gradient(180deg,#ff9d5c 0%,#f97316 100%);
  --accent-fill:#fb7f2e; --accent-fill-hover:#ff9350;
  --on-accent:#1c0d03;
  --accent-glow:0 8px 24px -8px rgba(249,115,22,.65);
  --accent-rim:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.08);

  --radius-sm:8px; --radius:12px; --radius-lg:18px; --radius-xl:22px; --radius-pill:999px;
  --shadow-pop:0 22px 60px -14px rgba(0,0,0,.7), 0 0 0 1px var(--glass-border-strong);
  --overlay:rgba(5,7,11,.5);
  --focus-ring:0 0 0 3px rgba(249,115,22,.40);

  --tint-1:249,115,22;
  --tint-2:45,180,170;
  --tint-3:242,183,64;
  --tint-4:110,150,230;

  --shell-gap:14px; --shell-side-w:240px; --shell-side-w-narrow:72px; --shell-top-h:60px;

  /* фото вместо градиента (4.2): владелец кладёт static/img/glass/bg.jpg и меняет три значения —
       --glass-photo:url('../img/glass/bg.jpg');
       --glass-photo-veil:linear-gradient(180deg, rgba(10,13,18,.45), rgba(10,13,18,.70));
       --glass-photo-blur:14px;                                                                              */
  --glass-photo:none;
  --glass-photo-veil:linear-gradient(transparent,transparent);
  --glass-photo-blur:0px;
  --glass-atmo:
    radial-gradient(120% 60% at 50% 60%, rgba(120,140,150,.16) 0%, rgba(120,140,150,0) 62%),
    radial-gradient(55% 45% at 82% 8%,  rgba(140,160,175,.12), transparent 70%),
    radial-gradient(45% 40% at 6% 96%,  rgba(249,115,22,.09),  transparent 70%),
    linear-gradient(180deg, #1a2129 0%, #222b33 36%, #2a333b 54%, #171c22 76%, #0d1014 100%);
  --glass-vignette:radial-gradient(140% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.45) 100%);
  --glass-grain-a:.05;
  --chart-grid:rgba(255,255,255,.06);
  color-scheme:dark;
}

/* ── 3. Светлое стекло: светлая тема и «как в системе» при светлой системе (раздел 10) ─────────────────── */
:root[data-skin="glass"][data-theme="light"] {
  --bg:#eef1f5;
  --surface-solid:#f8f9fb; --surface-2-solid:#f1f3f7; --surface-3-solid:#e8ebf1;
  --glass-bg:rgba(255,255,255,.60); --glass-bg-strong:rgba(255,255,255,.82); --glass-bg-dense:rgba(255,255,255,.88);
  --glass-fill-1:rgba(15,23,42,.035); --glass-fill-2:rgba(15,23,42,.06); --glass-fill-3:rgba(15,23,42,.09);
  --glass-border:rgba(15,23,42,.08); --glass-border-strong:rgba(15,23,42,.14);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.85);
  --glass-shadow:0 1px 2px rgba(15,23,42,.06), 0 14px 34px -16px rgba(15,23,42,.20);
  --glass-popup:rgba(250,251,253,.97);
  --glass-row-hover-solid:#eef1f5; --glass-row-selected-solid:#fbe7d7;
  --glass-atmo-low:#d9e0e8;                   /* самая тёмная точка светлого фона — контракт теста контраста */
  --surface:var(--glass-bg); --surface-2:var(--glass-fill-1); --surface-3:var(--glass-fill-2);
  --border:var(--glass-border); --border-strong:var(--glass-border-strong);
  --text:#1d2230; --text-strong:#0b0e14; --muted:#5a6275; --faint:#5f6779;
  --success:#166534; --danger:#b91c1c; --warning:#92400e; --info:#1d4ed8; --accent-ink:#9a3412; --on-status:#ffffff;
  --accent:#c2410c; --accent-hover:#9a3412; --accent-soft:rgba(234,88,12,.12);
  --accent-grad:linear-gradient(180deg,#ff9a55 0%,#f97316 100%);
  --accent-fill:#f97316; --accent-fill-hover:#fb8a3c; --on-accent:#1c0d03;
  --accent-glow:0 8px 22px -10px rgba(234,88,12,.55);
  --accent-rim:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.06);
  --shadow-pop:0 22px 50px -16px rgba(15,23,42,.28), 0 0 0 1px var(--glass-border-strong);
  --overlay:rgba(15,23,42,.30);
  --focus-ring:0 0 0 3px rgba(234,88,12,.30);
  --glass-atmo:
    radial-gradient(60% 50% at 88% 6%, rgba(255,214,186,.50), transparent 70%),
    radial-gradient(55% 50% at 6% 94%, rgba(186,214,224,.55), transparent 70%),
    radial-gradient(90% 55% at 50% 52%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(180deg, #e9edf2 0%, #eef1f5 45%, #e4e9ef 100%);
  --glass-vignette:radial-gradient(140% 100% at 50% 40%, transparent 60%, rgba(15,23,42,.06) 100%);
  --glass-grain-a:.03;
  --chart-grid:rgba(15,23,42,.08);
  color-scheme:light;
}
@media (prefers-color-scheme: light) {
  :root[data-skin="glass"][data-theme="system"] {
    --bg:#eef1f5;
    --surface-solid:#f8f9fb; --surface-2-solid:#f1f3f7; --surface-3-solid:#e8ebf1;
    --glass-bg:rgba(255,255,255,.60); --glass-bg-strong:rgba(255,255,255,.82); --glass-bg-dense:rgba(255,255,255,.88);
    --glass-fill-1:rgba(15,23,42,.035); --glass-fill-2:rgba(15,23,42,.06); --glass-fill-3:rgba(15,23,42,.09);
    --glass-border:rgba(15,23,42,.08); --glass-border-strong:rgba(15,23,42,.14);
    --glass-highlight:inset 0 1px 0 rgba(255,255,255,.85);
    --glass-shadow:0 1px 2px rgba(15,23,42,.06), 0 14px 34px -16px rgba(15,23,42,.20);
    --glass-popup:rgba(250,251,253,.97);
    --glass-row-hover-solid:#eef1f5; --glass-row-selected-solid:#fbe7d7;
    --glass-atmo-low:#d9e0e8;
    --surface:var(--glass-bg); --surface-2:var(--glass-fill-1); --surface-3:var(--glass-fill-2);
    --border:var(--glass-border); --border-strong:var(--glass-border-strong);
    --text:#1d2230; --text-strong:#0b0e14; --muted:#5a6275; --faint:#5f6779;
    --success:#166534; --danger:#b91c1c; --warning:#92400e; --info:#1d4ed8; --accent-ink:#9a3412; --on-status:#ffffff;
    --accent:#c2410c; --accent-hover:#9a3412; --accent-soft:rgba(234,88,12,.12);
    --accent-grad:linear-gradient(180deg,#ff9a55 0%,#f97316 100%);
    --accent-fill:#f97316; --accent-fill-hover:#fb8a3c; --on-accent:#1c0d03;
    --accent-glow:0 8px 22px -10px rgba(234,88,12,.55);
    --accent-rim:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.06);
    --shadow-pop:0 22px 50px -16px rgba(15,23,42,.28), 0 0 0 1px var(--glass-border-strong);
    --overlay:rgba(15,23,42,.30);
    --focus-ring:0 0 0 3px rgba(234,88,12,.30);
    --glass-atmo:
      radial-gradient(60% 50% at 88% 6%, rgba(255,214,186,.50), transparent 70%),
      radial-gradient(55% 50% at 6% 94%, rgba(186,214,224,.55), transparent 70%),
      radial-gradient(90% 55% at 50% 52%, rgba(255,255,255,.55), transparent 70%),
      linear-gradient(180deg, #e9edf2 0%, #eef1f5 45%, #e4e9ef 100%);
    --glass-vignette:radial-gradient(140% 100% at 50% 40%, transparent 60%, rgba(15,23,42,.06) 100%);
    --glass-grain-a:.03;
    --chart-grid:rgba(15,23,42,.08);
    color-scheme:light;
  }
}

/* ── 4. Фон: туманный «пейзаж» — неподвижный псевдоэлемент (не background-attachment:fixed: дёргается в Safari) ── */
[data-skin="glass"] body { background:var(--bg); }
[data-skin="glass"] body::before {
  content:""; position:fixed; inset:-40px; z-index:-2; pointer-events:none;
  background:var(--glass-photo-veil), var(--glass-photo) center / cover no-repeat, var(--glass-atmo);
  filter:blur(var(--glass-photo-blur));
}
[data-skin="glass"] body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:calc(var(--glass-grain-a) * 20);
  background:
    var(--glass-vignette),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-skin="glass"][data-theme="light"] body::after { opacity:.6; }
@media (prefers-color-scheme: light) { [data-skin="glass"][data-theme="system"] body::after { opacity:.6; } }
[data-skin="glass"] ::selection { background:rgba(249,115,22,.35); color:#fff; }
[data-skin="glass"] :is(table, .ui-table, .ui-num, code, kbd, .ui-secret) { font-family:var(--font-data); }

/* ── 5. Материалы ──────────────────────────────────────────────────────────────────────────────────────────
   Карточка — панели верхнего уровня. Размытие — только у компонентов дизайн-системы и каркаса (13): у карточек страниц
   то же стекло без размытия — фон под ними неподвижный градиент, разницы глазом не видно, а прокрутка легче.        */
[data-skin="glass"] :is(.ui-panel, .panel, .gcard, .ui-kpi, .kpi .card, .metric, .ui-balance, .ui-accordion, .month-card,
  .arb-block, .u-bg-surface, .ui-kpis--strip) {
  background-color:var(--glass-bg); border-color:var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:var(--glass-shadow), var(--glass-highlight);
}
[data-skin="glass"] :is(.ui-panel, .panel, .gcard, .ui-balance, .arb-block, .u-bg-surface) { border-radius:var(--radius-lg); }
/* карточки страниц: стекло без размытия */
[data-skin="glass"] :is(.arb-card, .arb-data, .arb-list, .b2-card, .b2-kpi, .b2-data, .chat, .ib, .cw-wallet, .cc-metrics, .ct-kpi,
  .gn-card, .gn-sec, .in-card, .lg__main, .li-card, .ap-card, .ap-person, .db-card, .db-how, .mb-brief, .mb-qcard, .bt-card,
  .pp-person, .pp-goal, .pp-report, .pv-card, .pv-kpi, .pv-unit, .pv-calc, .pv-answer, .pv-acc, .pv-fc, .pv-verdict, .spy-tile,
  .tk-card, .vpn-key, .vpn-plat, .vpn-flow__step, .aic__main, .ls-card, .ls-tplcard, .ls-libcard, .ls-kit, .chart-summary, .drop, .ui-filepick) {
  background-color:var(--glass-bg); border-color:var(--glass-border); box-shadow:var(--glass-shadow), var(--glass-highlight);
}
/* вложенное — светлее, а не темнее: без размытия и тяжёлой тени */
[data-skin="glass"] :is(.ui-panel, .panel, .gcard, .ui-kpi, .kpi .card, .metric, .ui-table-wrap, .table-wrap, .ui-accordion, .ui-balance, .month-card, .arb-block,
  .arb-card, .b2-card, .pv-card, .db-card, .gn-card, .in-card, .li-card, .ap-card, .bt-card, .tk-card, .ls-card)
  :is(.ui-panel, .panel, .gcard, .ui-kpi, .kpi .card, .metric, .ui-table-wrap, .table-wrap, .ui-accordion, .ui-balance, .month-card, .arb-block,
  .chart-summary, .chart-empty, .arb-card, .b2-card, .pv-card, .db-card, .gn-card, .in-card, .li-card, .ap-card, .bt-card, .tk-card, .ls-card) {
  -webkit-backdrop-filter:none; backdrop-filter:none; background-color:var(--glass-fill-1); box-shadow:var(--glass-highlight);
}
[data-skin="glass"] :is(.ui-panel, .panel) :is(.ui-table-wrap, .table-wrap) { background-color:transparent; }
/* фиксированный потомок (панель массовых действий, старая модалка, мобильные фильтры) — предок без размытия (14.1) */
[data-skin="glass"] :is(.ui-panel, .panel, .gcard, .ui-kpi, .metric, .ui-accordion, .month-card, .arb-block):has(.ui-bulkbar, .modal, .b2-filters__body, .cc-toast, .cc-modal, .pv-toast, .pv-tour, .b2-checklist) {
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* открытая выпадашка внутри стеклянной панели — панель поверх соседей (14.2); ниже шапки (20) и меню (30) */
[data-skin="glass"] :is(.ui-panel, .panel, .gcard, .ui-kpi, .metric, .ui-accordion, .month-card, .arb-block, .ui-balance):has(.ui-ss.is-open, .ls-menu.is-open, .bf-menu.is-open, [aria-expanded="true"]) {
  position:relative; z-index:15;
}

/* ── 6. Каркас: плавающие меню и шапка ─────────────────────────────────────────────────────────────────── */
[data-skin="glass"] .shell { background:transparent; }
[data-skin="glass"] :is(.shell-side, .shell-top) {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
  box-shadow:var(--glass-shadow), var(--glass-highlight);
}
[data-skin="glass"] .shell-side {
  width:var(--shell-side-w); flex:0 0 var(--shell-side-w); margin:var(--shell-gap) 0 var(--shell-gap) var(--shell-gap);
  top:var(--shell-gap); height:calc(100vh - 2 * var(--shell-gap)); border-radius:var(--radius-xl);
  transition:width .25s cubic-bezier(.2,.8,.2,1), flex-basis .25s cubic-bezier(.2,.8,.2,1);
}
/* светлая кромка «жидкого стекла»: ярче сверху слева */
[data-skin="glass"] .shell-side::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%, rgba(255,255,255,.09));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-skin="glass"][data-theme="light"] .shell-side::after { background:linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.3) 40%, rgba(15,23,42,.04)); }
/* «край прокрутки»: содержимое в зазоре над плавающей шапкой мягко размывается и гаснет */
[data-skin="glass"] .shell-main::before {
  content:""; position:sticky; top:0; z-index:19; flex:0 0 var(--shell-gap); height:var(--shell-gap); pointer-events:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  -webkit-mask:linear-gradient(#000, transparent); mask:linear-gradient(#000, transparent);
}
[data-skin="glass"] .shell-top {
  margin:0 var(--shell-gap) 0 var(--shell-gap); top:var(--shell-gap); height:var(--shell-top-h); padding:0 10px 0 18px;
  border-radius:18px;
}
[data-skin="glass"] .container { padding:24px var(--shell-gap) 32px; }

/* узкое меню: квадраты 44×44, активный — оранжевый квадрат */
[data-skin="glass"].shell-narrow .shell-side { width:var(--shell-side-w-narrow); flex-basis:var(--shell-side-w-narrow); }
[data-skin="glass"].shell-narrow :is(.nav-link, .nav-group__head) { width:44px; min-height:44px; margin:3px auto; padding:0; flex:0 0 44px; border-radius:14px; justify-content:center; }
[data-skin="glass"].shell-narrow .shell-search { margin:0 14px 10px; }
[data-skin="glass"].shell-narrow .shell-side__top { padding:16px 8px 10px; }

/* ── 7. Меню слева ─────────────────────────────────────────────────────────────────────────────────────── */
[data-skin="glass"] .shell-side__top { padding:18px 14px 12px 18px; }
[data-skin="glass"] .logo-row .logo { text-shadow:0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); }
[data-skin="glass"] .shell-collapse { width:32px; height:32px; border-radius:10px; background:var(--glass-fill-1); border:1px solid var(--glass-border); }
[data-skin="glass"] .shell-collapse:hover { background:var(--glass-fill-2); }
[data-skin="glass"] .shell-search { height:36px; margin:0 12px 10px; border-radius:12px; background:var(--glass-fill-1); border-color:var(--glass-border);
  transition:border-color .18s, background .18s, color .18s; }
[data-skin="glass"] .shell-search kbd { color:var(--muted); }   /* --faint на светлом стекле — 4,1:1 */
[data-skin="glass"] .shell-search:hover { background:var(--glass-fill-2); border-color:var(--glass-border-strong); }
[data-skin="glass"] kbd { background:var(--glass-fill-2); border-color:var(--glass-border); border-radius:6px; }
[data-skin="glass"] .shell-label { font-size:10.5px; font-weight:600; letter-spacing:.12em; color:var(--faint); padding:14px 18px 6px; }
[data-skin="glass"] :is(.nav-link, .nav-group__head) { min-height:38px; margin:2px 10px; padding:0 12px; gap:12px; border-radius:12px;
  font:500 13.5px/1.2 var(--font); color:var(--muted); transition:background .18s, color .18s, box-shadow .18s; }
[data-skin="glass"] .nav-link--sub { padding-left:42px; min-height:34px; }
[data-skin="glass"] :is(.nav-link, .nav-group__head) > .icon:first-child { width:18px; height:18px; stroke-width:1.75; }
[data-skin="glass"] :is(.nav-link, .nav-group__head):hover { background:var(--glass-fill-2); color:var(--text-strong); }
[data-skin="glass"] .nav-link.is-active {
  background:var(--accent-grad); background-color:var(--accent-fill);   /* сплошной под градиентом — его видит проверка контраста */
  color:var(--on-accent); font-weight:600; box-shadow:var(--accent-glow), var(--accent-rim);
}
[data-skin="glass"] .nav-link.is-active::before { content:none; }
[data-skin="glass"] .nav-link.is-active .icon { color:var(--on-accent); }
[data-skin="glass"] .nav-link.is-active .nav-badge { background:rgba(0,0,0,.16); color:var(--on-accent); }
[data-skin="glass"] .nav-group:has(.nav-link.is-active) > .nav-group__head { color:var(--text-strong); }
[data-skin="glass"] .nav-badge { min-width:20px; height:20px; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink); }
[data-skin="glass"] .nav-pin { width:24px; height:24px; border-radius:8px; background:var(--glass-fill-2); }
[data-skin="glass"] :is(.shell-pins, .shell-side__bottom) { border-color:var(--glass-border); }
[data-skin="glass"] .shell-side .shell-nav { scrollbar-width:none; }

/* ── 8. Шапка ──────────────────────────────────────────────────────────────────────────────────────────── */
[data-skin="glass"] .shell-crumbs { font-size:13.5px; gap:10px; }
[data-skin="glass"] .shell-crumbs [aria-current] { color:var(--text-strong); }
[data-skin="glass"] .shell-crumbs__sep { font-size:0; display:inline-flex; width:12px; height:12px; }
[data-skin="glass"] .shell-crumbs__sep::before {
  content:""; width:12px; height:12px; background:var(--faint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-skin="glass"] .shell-top :is(.shell-bell, .shell-help, .shell-burger) {
  width:38px; height:38px; border-radius:12px; background:var(--glass-fill-1); border:1px solid var(--glass-border); color:var(--text);
  transition:background .18s, border-color .18s;
}
[data-skin="glass"] .shell-top :is(.shell-bell, .shell-help, .shell-burger):hover { background:var(--glass-fill-2); border-color:var(--glass-border-strong); color:var(--text-strong); }
[data-skin="glass"] .shell-bell__n {
  top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--accent-grad); color:var(--on-accent);
  font:700 10px/18px var(--font); box-shadow:0 0 0 2px var(--surface-solid), 0 4px 10px -2px rgba(249,115,22,.6);
}
[data-skin="glass"] .shell-status.hb { border-radius:12px; height:38px; }
[data-skin="glass"] .shell-status:hover, [data-skin="glass"] .shell-status[aria-expanded="true"] { background:var(--glass-fill-2); }
[data-skin="glass"] .hb-svc { background:var(--glass-fill-1); border:1px solid var(--glass-border); border-radius:var(--radius-pill); }
[data-skin="glass"] .hb-svc.is-bad { background:var(--danger-soft); border-color:transparent; }
[data-skin="glass"] .hb-gauge__bar { background:var(--glass-fill-2); border-radius:var(--radius-pill); }
[data-skin="glass"] :is(.hb-load, .hb-sync) { border-color:var(--glass-border); }
[data-skin="glass"] .hb [data-tip]:hover::after { background:var(--glass-popup); border:1px solid var(--glass-border-strong); border-radius:10px; }
[data-skin="glass"] .shell-avatar { width:36px; height:36px; background:var(--glass-fill-2); border:1px solid var(--glass-border-strong); font-family:var(--font); }
[data-skin="glass"] .shell-user:hover .shell-avatar, [data-skin="glass"] .shell-user[aria-expanded="true"] .shell-avatar { border-color:var(--accent); }

/* ── 9. Кнопки, поля, переключатели, сегменты ──────────────────────────────────────────────────────────── */
[data-skin="glass"] :is(.ui-btn, .btn) { height:36px; border-radius:12px; padding:0 16px; font-weight:600; font-family:var(--font);
  transition:background .18s, box-shadow .18s, border-color .18s, transform .12s, filter .18s; }
[data-skin="glass"] :is(.ui-btn, .btn):active { transform:translateY(1px); }
[data-skin="glass"] :is(.ui-btn--primary, .btn, .btn-primary) {
  background:var(--accent-grad); background-color:var(--accent-fill);   /* сплошной под градиентом — для проверки контраста */
  color:var(--on-accent); border:1px solid rgba(255,255,255,.22); box-shadow:var(--accent-glow), var(--accent-rim);
}
[data-skin="glass"] :is(.ui-btn--primary, .btn, .btn-primary):hover {
  background:var(--accent-grad); filter:brightness(1.06); box-shadow:0 10px 28px -8px rgba(249,115,22,.8), var(--accent-rim);
}
[data-skin="glass"] :is(.ui-btn--secondary, .btn-ghost, .btn-secondary) {
  background:var(--glass-fill-2); color:var(--text); border:1px solid var(--glass-border-strong); box-shadow:var(--glass-highlight); filter:none;
}
[data-skin="glass"] :is(.ui-btn--secondary, .btn-ghost, .btn-secondary):hover { background:var(--glass-fill-3); color:var(--text-strong); filter:none;
  box-shadow:var(--glass-highlight); }
[data-skin="glass"] .ui-btn--ghost { background:transparent; border-color:transparent; box-shadow:none; color:var(--muted); }
[data-skin="glass"] .ui-btn--ghost:hover { background:var(--glass-fill-2); color:var(--text-strong); }
[data-skin="glass"] :is(.ui-btn--danger, .btn-danger) { background:linear-gradient(180deg,#f05252,#dc2626); background-color:#dc2626; color:#fff;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 8px 22px -10px rgba(239,68,68,.7), var(--accent-rim); }
[data-skin="glass"] :is(.ui-btn--danger, .btn-danger):hover { background:linear-gradient(180deg,#f05252,#dc2626); filter:brightness(1.08); }
[data-skin="glass"] .btn-green { background:linear-gradient(180deg,#34d399,#22c55e); color:#052e14; box-shadow:0 8px 22px -12px rgba(34,197,94,.6), var(--accent-rim); }
[data-skin="glass"] :is(.ui-btn--sm, .btn-sm) { height:30px; border-radius:10px; padding:0 12px; }
[data-skin="glass"] .btn-xs { height:26px; border-radius:8px; }
/* «один оранжевый»: кнопки в фильтрах и таблицах — стеклянные вторичные (правило base.css) */
[data-skin="glass"] .filters .btn:not(.btn-primary):not(.btn-danger):not(.btn-green),
[data-skin="glass"] table .btn:not(.btn-primary):not(.btn-danger):not(.btn-green),
[data-skin="glass"] .table-wrap .btn:not(.btn-primary):not(.btn-danger):not(.btn-green) {
  background:var(--glass-fill-2); color:var(--text); border-color:var(--glass-border-strong); box-shadow:var(--glass-highlight); filter:none;
}
[data-skin="glass"] .filters .btn:not(.btn-primary):not(.btn-danger):not(.btn-green):hover,
[data-skin="glass"] table .btn:not(.btn-primary):not(.btn-danger):not(.btn-green):hover { background:var(--glass-fill-3); color:var(--text-strong); filter:none; }
[data-skin="glass"] .ui-icon-btn { width:34px; height:34px; border-radius:10px; transition:background .18s, color .18s; }
[data-skin="glass"] .ui-icon-btn:hover, [data-skin="glass"] .ui-icon-btn[aria-expanded="true"] { background:var(--glass-fill-2); }

[data-skin="glass"] :is(.ui-input, .ui-select, .form-control, .filters input, .filters select) { height:36px; }
[data-skin="glass"] :is(.ui-input, .ui-select, .ui-textarea, .form-control, .filters input, .filters select) {
  border-radius:12px; background-color:var(--glass-fill-1); border:1px solid var(--glass-border); color:var(--text-strong);
  font-family:var(--font); transition:border-color .18s, box-shadow .18s, background-color .18s;
}
[data-skin="glass"] :is(.ui-textarea, textarea.form-control) { height:auto; }
[data-skin="glass"] :is(.ui-input, .ui-select, .ui-textarea, .form-control, .filters input, .filters select):hover { border-color:var(--glass-border-strong); }
[data-skin="glass"] :is(.ui-input, .ui-select, .ui-textarea, .form-control, .filters input, .filters select):focus {
  outline:none; border-color:rgba(249,115,22,.6); box-shadow:0 0 0 4px rgba(249,115,22,.16); background-color:var(--glass-fill-2);
}
[data-skin="glass"] :is(input, select, textarea).u-bg { background:var(--glass-fill-1) !important; border-color:var(--glass-border); }
[data-skin="glass"] :is(option, optgroup) { background:var(--surface-solid); color:var(--text-strong); }
[data-skin="glass"] :is(input[type="checkbox"], input[type="radio"]) { accent-color:var(--accent); }

[data-skin="glass"] .ui-toggle input { width:38px; height:22px; border-radius:11px; background:var(--glass-fill-3); border:1px solid var(--glass-border-strong); }
[data-skin="glass"] .ui-toggle input::after { top:2px; left:2px; width:16px; height:16px; background:#cfd5e0; box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:transform .22s cubic-bezier(.3,.7,.4,1.4), background .18s; }
[data-skin="glass"] .ui-toggle input:checked { background:var(--accent-grad); border-color:transparent; box-shadow:0 4px 12px -4px rgba(249,115,22,.7); }
[data-skin="glass"] .ui-toggle input:checked::after { transform:translateX(16px); background:#fff; }

[data-skin="glass"] .ui-seg { background:var(--glass-fill-1); border:1px solid var(--glass-border); border-radius:12px; padding:3px; }
[data-skin="glass"] .ui-seg > :is(a, button) { border-radius:9px; transition:background .18s, color .18s; }
[data-skin="glass"] .ui-seg > :is(a, button):hover { color:var(--text-strong); }
[data-skin="glass"] .ui-seg > .is-active { background:var(--glass-fill-3); box-shadow:var(--glass-highlight), 0 0 0 1px var(--glass-border-strong); }

/* ── 10. Заголовок страницы, панели, KPI ───────────────────────────────────────────────────────────────── */
[data-skin="glass"] .ui-page-head { margin-bottom:22px; }
[data-skin="glass"] .ui-page-head__title { font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1.15; font-family:var(--font); }
[data-skin="glass"] .ui-page-head__range { font-size:13px; color:var(--muted); letter-spacing:0; }
[data-skin="glass"] .ui-page-head__sub { font-size:14px; color:var(--muted); margin-top:6px; }
[data-skin="glass"] .ui-page-head__sub :is(b, strong) { color:var(--text-strong); }
[data-skin="glass"] :is(.ui-panel__title, .panel h3) { font-size:15px; font-weight:600; color:var(--text-strong); }
[data-skin="glass"] :is(a.gcard, .gcard, a.ui-panel):hover { border-color:var(--glass-border-strong); }
[data-skin="glass"] .gcard { transition:border-color .2s; }
[data-skin="glass"] :is(.drop, .ui-filepick) { border-color:rgba(255,255,255,.18); border-radius:var(--radius-lg); }
[data-skin="glass"][data-theme="light"] :is(.drop, .ui-filepick) { border-color:rgba(15,23,42,.18); }
[data-skin="glass"] :is(.drop:hover, .drop.over, .ui-filepick:hover, .ui-filepick.is-over) { border-color:var(--accent); background-color:var(--glass-fill-1); }
/* компактная зона в строке полей — как поле ввода: радиус и материал поля, без тени карточки */
[data-skin="glass"] .ui-filepick--sm { border-radius:12px; background-color:var(--glass-fill-1); box-shadow:none; }
[data-skin="glass"] .ui-filepick > .icon { color:var(--accent); flex:none; }
[data-skin="glass"] .ui-filepick.is-picked { border-color:rgba(249,115,22,.45); }
/* голое поле файла (где ещё не зона) — кнопка как вторичная стеклянная, по центру поля */
[data-skin="glass"] input[type="file"]:not(.ui-filepick__input) { height:auto; min-height:36px; padding:4px; line-height:26px;
  color:var(--muted); font-size:13px; cursor:pointer; }
[data-skin="glass"] input[type="file"]::file-selector-button { height:26px; margin-right:10px; padding:0 12px; border:1px solid var(--glass-border-strong);
  border-radius:9px; background:var(--glass-fill-2); color:var(--text-strong); font:600 12.5px/1 var(--font); cursor:pointer;
  transition:background-color .18s, border-color .18s; }
[data-skin="glass"] input[type="file"]:hover::file-selector-button { background:var(--glass-fill-3); border-color:var(--accent); }
[data-skin="glass"] .ui-balance { border-left-width:4px; }

[data-skin="glass"] :is(.ui-kpi, .kpi .card, .metric) { border-radius:16px; padding:14px 16px; }
[data-skin="glass"] :is(.ui-kpi__label, .kpi .lbl, .metric .l) { font-size:12.5px; font-weight:500; color:var(--muted); }
[data-skin="glass"] .ui-kpi__value { font-size:26px; font-weight:600; letter-spacing:-.01em; font-family:var(--font); font-variant-numeric:tabular-nums; margin-top:4px; }
[data-skin="glass"] :is(.kpi .val, .metric .v) { font-size:23px; font-weight:600; letter-spacing:-.01em; font-family:var(--font); font-variant-numeric:tabular-nums; }
[data-skin="glass"] :is(.ui-kpi__sub, .kpi .sub, .metric .s) { font-size:12px; color:var(--muted); }
/* цветное стекло рядов KPI (04_revenue_tinted_kpi) — оттенки декоративные, деньги остаются зелёными/красными */
[data-skin="glass"] :is(.ui-kpis:not(.ui-kpis--strip) > .ui-kpi, .kpi > .card):nth-child(4n+1) { --t:var(--tint-1); }
[data-skin="glass"] :is(.ui-kpis:not(.ui-kpis--strip) > .ui-kpi, .kpi > .card):nth-child(4n+2) { --t:var(--tint-2); }
[data-skin="glass"] :is(.ui-kpis:not(.ui-kpis--strip) > .ui-kpi, .kpi > .card):nth-child(4n+3) { --t:var(--tint-3); }
[data-skin="glass"] :is(.ui-kpis:not(.ui-kpis--strip) > .ui-kpi, .kpi > .card):nth-child(4n+4) { --t:var(--tint-4); }
[data-skin="glass"] :is(.ui-kpis:not(.ui-kpis--strip) > .ui-kpi, .kpi > .card) {
  background:linear-gradient(140deg, rgba(var(--t),.20) 0%, rgba(var(--t),.09) 55%, rgba(var(--t),.05) 100%), var(--glass-bg);
  border-color:rgba(var(--t),.24);
}
[data-skin="glass"] .ui-kpis--strip { border-radius:var(--radius-lg); }
[data-skin="glass"] .ui-kpis--strip .ui-kpi { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
  border-radius:0; border-right:1px solid var(--glass-border); }
[data-skin="glass"] .ui-kpis--strip .ui-kpi:last-child { border-right:0; }

/* ── 11. Таблицы: плотное стекло, липкие места — сплошные (3.2, 6.7) ─────────────────────────────────────── */
[data-skin="glass"] :is(.ui-table-wrap, .table-wrap) {
  background-color:var(--glass-bg-dense); border-color:var(--glass-border); border-radius:16px;
  box-shadow:var(--glass-shadow), var(--glass-highlight); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent;
}
[data-skin="glass"] .table-wrap::-webkit-scrollbar-track { background:transparent; }
[data-skin="glass"] .table-wrap::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border:2px solid transparent; background-clip:padding-box; }
[data-skin="glass"] :is(.ui-table th, .table-wrap.sticky-head thead th) { background:var(--surface-2-solid); color:var(--muted); font-family:var(--font-data);
  border-bottom-color:var(--glass-border); }
[data-skin="glass"] thead { background:var(--glass-fill-1); }
[data-skin="glass"] :is(.ui-table td, tbody td) { border-color:rgba(255,255,255,.05); }
[data-skin="glass"][data-theme="light"] :is(.ui-table td, tbody td) { border-color:rgba(15,23,42,.06); }
[data-skin="glass"] :is(.ui-table tbody tr:hover td, tbody tr:hover) { background-color:rgba(255,255,255,.035); }
[data-skin="glass"][data-theme="light"] :is(.ui-table tbody tr:hover td, tbody tr:hover) { background-color:rgba(15,23,42,.03); }
[data-skin="glass"] .ui-table .is-sticky-start, [data-skin="glass"] .ui-table .is-sticky-end { background:var(--surface-solid); }
[data-skin="glass"] .ui-table :is(th.is-sticky-start, th.is-sticky-end) { background:var(--surface-2-solid); }
[data-skin="glass"] .ui-table tbody tr:hover :is(.is-sticky-start, .is-sticky-end) { background:var(--glass-row-hover-solid); }
[data-skin="glass"] .ui-table tr.is-selected :is(.is-sticky-start, .is-sticky-end) { background:var(--glass-row-selected-solid); }
[data-skin="glass"] .ui-table tfoot td { background:var(--surface-2-solid); border-top-color:var(--glass-border); }
[data-skin="glass"] .ui-table .is-sticky-start { box-shadow:1px 0 0 var(--glass-border); }
[data-skin="glass"] .ui-table .is-sticky-end { box-shadow:-1px 0 0 var(--glass-border); }
/* липкие ячейки и шапки страниц (grep «sticky» по static/css — все находки) */
[data-skin="glass"] :is(.arb-table thead th, .gn-matrix thead th, .b2-seg__total th, .b2-seg__total td) { background:var(--surface-2-solid); }
[data-skin="glass"] :is(.arb-sticky, .gn-sticky, .b2-bundles th[scope="row"], .b2-agm th[scope="row"], .b2-heat th[scope="row"],
  .b2-mapt th[scope="row"], .pp-grid th.pp-grid__name) { background:var(--surface-solid); }
[data-skin="glass"] tr:hover :is(.arb-sticky, .gn-sticky, .b2-bundles th[scope="row"], .pp-grid th.pp-grid__name) { background:var(--glass-row-hover-solid); }
/* редактор таблиц «Таблицы»: ячейки и шапка — свои цвета, стекло только снаружи */
[data-skin="glass"] .sheet-grid-wrap, [data-skin="glass"] .sheet-wrap { background-color:var(--surface-solid); }
/* таблица карточками на телефоне (F12) */
@media (max-width:640px) {
  [data-skin="glass"] .ui-table--stack tr { background:var(--glass-fill-1); border:1px solid var(--glass-border); border-radius:12px; }
}

/* ── 12. Вкладки, счётчики, бейджи, чипы, точки ────────────────────────────────────────────────────────── */
[data-skin="glass"] .ui-tabs { border-bottom-color:var(--glass-border); }
[data-skin="glass"] .ui-tab { position:relative; padding:10px 2px 12px; border-bottom-color:transparent !important; font-family:var(--font); transition:color .18s; }
[data-skin="glass"] :is(.ui-tab.is-active, .ui-tab[aria-selected="true"])::after {
  content:""; position:absolute; left:0; right:0; bottom:1px; height:2px; border-radius:2px;   /* не -1px: .ui-tabs режет overflow */
  background:linear-gradient(90deg, transparent, var(--accent) 18%, var(--accent) 82%, transparent); box-shadow:0 0 12px rgba(249,115,22,.55);
}
[data-skin="glass"] .ui-count { height:20px; min-width:20px; border-radius:10px; background:var(--glass-fill-2); color:var(--muted); }
[data-skin="glass"] .ui-count--accent { background:var(--accent-soft); color:var(--accent-ink); }
[data-skin="glass"] .ui-count--danger { background:var(--danger-soft); color:var(--danger); }
[data-skin="glass"] :is(.ui-badge, .badge, .pill, .tag) { border-radius:var(--radius-pill);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent); }
[data-skin="glass"] .ui-badge:not([class*="ui-badge--"]) { background:var(--glass-fill-2); }
[data-skin="glass"] .ui-chip { background:var(--glass-fill-2); border:1px solid var(--glass-border); border-radius:var(--radius-pill); }
[data-skin="glass"] .ui-dot--success { box-shadow:0 0 8px var(--success); }
[data-skin="glass"] .ui-dot--warning { box-shadow:0 0 8px var(--warning); }
[data-skin="glass"] .ui-dot--danger { box-shadow:0 0 8px var(--danger); }

/* ── 13. Баннеры, аккордеон, пагинация, загрузка ───────────────────────────────────────────────────────── */
[data-skin="glass"] .ui-banner { border-radius:14px; background:var(--glass-bg); border-color:var(--glass-border); }
[data-skin="glass"] .ui-banner--warning { background:linear-gradient(var(--warning-soft), var(--warning-soft)), var(--glass-bg); border-color:color-mix(in srgb, var(--warning) 28%, transparent); }
[data-skin="glass"] .ui-banner--danger  { background:linear-gradient(var(--danger-soft), var(--danger-soft)), var(--glass-bg); border-color:color-mix(in srgb, var(--danger) 28%, transparent); }
[data-skin="glass"] .ui-banner--info    { background:linear-gradient(var(--info-soft), var(--info-soft)), var(--glass-bg); border-color:color-mix(in srgb, var(--info) 28%, transparent); }
[data-skin="glass"] .ui-accordion { border-radius:14px; }
[data-skin="glass"] .ui-accordion > summary { border-radius:14px; transition:background .18s; }
[data-skin="glass"] .ui-accordion > summary:hover { background:var(--glass-fill-1); }
[data-skin="glass"] .ui-pagination__pages :is(a, span) { border-radius:10px; }
[data-skin="glass"] .ui-pagination__pages a:hover { background:var(--glass-fill-2); }
[data-skin="glass"] .ui-pagination__pages .is-current { background:var(--glass-fill-3); box-shadow:inset 0 0 0 1px var(--glass-border-strong); }
[data-skin="glass"] .ui-skeleton { background:linear-gradient(90deg, var(--glass-fill-1) 25%, var(--glass-fill-3) 50%, var(--glass-fill-1) 75%); background-size:200% 100%; }
[data-skin="glass"] .msg { border-radius:12px; }

/* ── 14. Оверлеи: поповеры, модалки, панель, тосты, ⌘K, массовые действия ─────────────────────────────── */
[data-skin="glass"] :is(.ui-pop, .bd-pop, .ui-modal, .modal .box, .ui-drawer, .ui-toast, .ui-bulkbar, .cmdk) {
  background:var(--glass-bg-strong); border:1px solid var(--glass-border-strong); box-shadow:var(--shadow-pop);
  -webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(160%); backdrop-filter:blur(var(--glass-blur-strong)) saturate(160%);
}
[data-skin="glass"] :is(.ui-pop, .bd-pop) { border-radius:14px; }
[data-skin="glass"] .ui-pop:not(.ui-pop--pad) { padding:6px; }
[data-skin="glass"] .ui-pop.is-open { animation:glass-pop .14s ease-out; }
[data-skin="glass"] .ui-menu__item { border-radius:10px; transition:background .15s, color .15s; }
[data-skin="glass"] :is(.ui-menu__item:hover, .ui-menu__item:focus) { background:var(--glass-fill-2); }
[data-skin="glass"] .ui-menu__sep { background:var(--glass-border); }
[data-skin="glass"] :is(.ui-overlay, .modal) { background:var(--overlay); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
[data-skin="glass"] :is(.ui-modal, .modal .box) { border-radius:22px; }
[data-skin="glass"] .ui-modal.is-open:not(.cmdk) { animation:glass-modal .18s ease-out; }
[data-skin="glass"] .modal.open .box { animation:glass-box .18s ease-out; }
[data-skin="glass"] .cmdk { border-radius:18px; }
[data-skin="glass"] .cmdk.is-open { animation:glass-cmdk .16s ease-out; }
[data-skin="glass"] .cmdk__input { border-bottom-color:var(--glass-border); }
[data-skin="glass"] .cmdk__item { border-radius:10px; }
[data-skin="glass"] .cmdk__item.is-active { background:var(--glass-fill-2); }
[data-skin="glass"] .ui-drawer { top:12px; right:12px; bottom:12px; border-radius:20px; transform:translateX(calc(100% + 24px)); border:1px solid var(--glass-border-strong);
  transition:transform .26s cubic-bezier(.2,.8,.2,1); }
[data-skin="glass"] .ui-drawer.is-open { transform:none; }
[data-skin="glass"] .ui-drawer__head { border-bottom-color:var(--glass-border); }
[data-skin="glass"] .ui-toast { border-radius:14px; border-left-width:3px; }
[data-skin="glass"] .ui-toast--success { border-left-color:var(--success); }
[data-skin="glass"] .ui-toast--error { border-left-color:var(--danger); }
[data-skin="glass"] .ui-toast--warning { border-left-color:var(--warning); }
[data-skin="glass"] .ui-bulkbar { border-radius:16px; }
/* выпадашки, которые лежат внутри панелей (не переносятся в body): почти сплошной фон, без размытия (14.3) */
[data-skin="glass"] :is(.ui-ss__list, .ls-menu, .bf-menu, .chat__suggest, .ib-multi__panel, .wz-suggest .box, .ls-pop, .ls-fmenu, .ls-dotmenu) {
  background:var(--glass-popup); border:1px solid var(--glass-border-strong); border-radius:12px; box-shadow:var(--shadow-pop);
}
[data-skin="glass"] .ui-ss__opt { border-radius:8px; }
[data-skin="glass"] .ui-ss__opt.is-active { background:var(--glass-fill-2); }
@keyframes glass-pop { from { opacity:0; transform:translateY(-4px) scale(.98); } }
@keyframes glass-modal { from { opacity:0; transform:translate(-50%,-48%) scale(.98); } to { transform:translate(-50%,-50%); } }
@keyframes glass-box { from { opacity:0; transform:translateY(8px) scale(.98); } }
@keyframes glass-cmdk { from { opacity:0; transform:translateX(-50%) translateY(-6px) scale(.98); } to { transform:translateX(-50%); } }

/* ── 15. Липкие и фиксированные полосы страниц (6.11): «оверлей», геометрия прежняя ──────────────────────── */
[data-skin="glass"] :is(.gn-toolbar, .gn-savebar, .in-save, .li-action, .wz-nav, .cc-bar, .cc-bulk, .b2-checklist, .b2-tour-card,
  .pv-tour, .ls-tour, .cc-toast, .ls-toast, .tm-savebar, .cc-modal__box, .ls-dialog__box) {
  background:var(--glass-bg-strong); border-color:var(--glass-border-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(160%); backdrop-filter:blur(var(--glass-blur-strong)) saturate(160%);
}
[data-skin="glass"] :is(.wz-nav, .gn-savebar, .in-save, .tm-savebar, .li-action) { border:1px solid var(--glass-border-strong); border-radius:16px; }
/* в этих полосах лежат фиксированные потомки (мобильные фильтры, меню) — стекло без размытия */
[data-skin="glass"] :is(.b2-filterbar, .b2-nav) { background:var(--glass-bg-strong); border-color:var(--glass-border); }
/* тёмная «таблетка» пульта: текст был цветом поверхности — в стекле поверхность прозрачная */
[data-skin="glass"] .pv-toast { background:var(--glass-bg-strong); color:var(--text-strong); border:1px solid var(--glass-border-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur-strong)); backdrop-filter:blur(var(--glass-blur-strong)); box-shadow:var(--shadow-pop); }

/* ── 16. Мелочи ────────────────────────────────────────────────────────────────────────────────────────── */
[data-skin="glass"] * { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
[data-skin="glass"][data-theme="light"] * { scrollbar-color:rgba(15,23,42,.18) transparent; }
[data-skin="glass"] ::-webkit-scrollbar { width:10px; height:10px; }
[data-skin="glass"] ::-webkit-scrollbar-track { background:transparent; }
[data-skin="glass"] ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
[data-skin="glass"] ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.26); border:2px solid transparent; background-clip:padding-box; }
[data-skin="glass"][data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(15,23,42,.18); border:2px solid transparent; background-clip:padding-box; }
[data-skin="glass"] :is(code.sub, kbd) { background:var(--glass-fill-2); border:1px solid var(--glass-border); border-radius:6px; }
[data-skin="glass"] :is(.thumb, .vthumb) { border-radius:10px; }
[data-skin="glass"] .gcard :is(img, video) { border-radius:12px; }
[data-skin="glass"] .ui-skip { background:var(--surface-solid); }
[data-skin="glass"] .chart-toggle { border-radius:10px; background:var(--glass-fill-1); border-color:var(--glass-border-strong); }

/* ── 17. Анимации: переходы между страницами, каскад, микровзаимодействия (раздел 9) ──────────────────────── */
@view-transition { navigation:auto; }
[data-skin="glass"] .shell-side { view-transition-name:shell-side; }
[data-skin="glass"] .shell-top { view-transition-name:shell-top; }
[data-skin="glass"] .shell-nav .nav-link.is-active { view-transition-name:nav-active; }   /* только в .shell-nav: имя уникально */
::view-transition-group(nav-active) { animation-duration:.45s; animation-timing-function:cubic-bezier(.2,.8,.2,1); }
::view-transition-old(root) { animation:glass-vt-out .16s ease-in both; }
::view-transition-new(root) { animation:glass-vt-in .26s ease-out both; }
::view-transition-group(shell-side), ::view-transition-group(shell-top) { animation-duration:.2s; }
@keyframes glass-vt-out { to { opacity:0; } }
@keyframes glass-vt-in { from { opacity:0; } }

/* каскад: блоки проявляются по очереди. Только backwards — после анимации transform не остаётся (fixed-потомки) */
@keyframes glass-rise { from { opacity:0; transform:translateY(10px); } }
@keyframes glass-title { from { opacity:0; filter:blur(6px); } }
[data-skin="glass"] body:not(.is-editor) .container > :not(script, style, template, link, .ui-flash, .modal, .ui-bulkbar, .ui-pop, .ui-modal, [hidden]):nth-child(-n+8),
[data-skin="glass"] body:not(.is-editor) :is(.ui-kpis, .kpi, .metric-grid) > :nth-child(-n+8) {
  animation:glass-rise .36s cubic-bezier(.2,.8,.2,1) backwards;
}
[data-skin="glass"] body:not(.is-editor) .container > :nth-child(2) { animation-delay:35ms; }
[data-skin="glass"] body:not(.is-editor) .container > :nth-child(3) { animation-delay:70ms; }
[data-skin="glass"] body:not(.is-editor) .container > :nth-child(4) { animation-delay:105ms; }
[data-skin="glass"] body:not(.is-editor) .container > :nth-child(5) { animation-delay:140ms; }
[data-skin="glass"] body:not(.is-editor) .container > :nth-child(6) { animation-delay:175ms; }
[data-skin="glass"] body:not(.is-editor) .container > :nth-child(7) { animation-delay:210ms; }
[data-skin="glass"] body:not(.is-editor) .container > :nth-child(8) { animation-delay:245ms; }
[data-skin="glass"] body:not(.is-editor) :is(.ui-kpis, .kpi, .metric-grid) > :nth-child(2) { animation-delay:115ms; }
[data-skin="glass"] body:not(.is-editor) :is(.ui-kpis, .kpi, .metric-grid) > :nth-child(3) { animation-delay:150ms; }
[data-skin="glass"] body:not(.is-editor) :is(.ui-kpis, .kpi, .metric-grid) > :nth-child(4) { animation-delay:185ms; }
[data-skin="glass"] body:not(.is-editor) :is(.ui-kpis, .kpi, .metric-grid) > :nth-child(5) { animation-delay:220ms; }
[data-skin="glass"] body:not(.is-editor) :is(.ui-kpis, .kpi, .metric-grid) > :nth-child(6) { animation-delay:255ms; }
[data-skin="glass"] body:not(.is-editor) :is(.ui-kpis, .kpi, .metric-grid) > :nth-child(7) { animation-delay:290ms; }
[data-skin="glass"] body:not(.is-editor) :is(.ui-kpis, .kpi, .metric-grid) > :nth-child(8) { animation-delay:325ms; }
[data-skin="glass"] body:not(.is-editor) .ui-page-head__title { animation:glass-title .3s ease-out backwards; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation:none; }
  [data-skin="glass"] *, [data-skin="glass"] *::before, [data-skin="glass"] *::after { animation:none !important; }
}

/* ── 18. Телефон и планшет (раздел 11) ─────────────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  :root[data-skin="glass"] { --glass-blur:14px; --glass-blur-strong:18px; }
  [data-skin="glass"] .shell-side, [data-skin="glass"].shell-narrow .shell-side {
    top:8px; bottom:8px; left:8px; height:auto; margin:0; width:min(280px, calc(100vw - 16px)); flex-basis:auto;
    border-radius:20px; transform:translateX(calc(-100% - 16px)); transition:transform .24s cubic-bezier(.2,.8,.2,1);
  }
  [data-skin="glass"].shell-mobile-open .shell-side { transform:none; }
  [data-skin="glass"] .shell-scrim { background:var(--overlay); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
  [data-skin="glass"] .shell-top { margin:0 8px; top:8px; height:56px; border-radius:16px; padding:0 8px 0 10px; }
  [data-skin="glass"] .shell-main::before { flex-basis:8px; height:8px; }
  [data-skin="glass"] .container { padding:16px 8px 24px; }
}
@media (max-width:640px) {
  [data-skin="glass"] .shell-crumbs > .shell-crumbs__sep { display:none; }   /* как в base.css: на телефоне только текущая */
  [data-skin="glass"] .ui-page-head__title { font-size:22px; }
  [data-skin="glass"] .ui-drawer { top:0; right:0; bottom:0; border-radius:0; }
  [data-skin="glass"] :is(.ui-btn, .btn) { height:auto; min-height:36px; }
  [data-skin="glass"] :is(.ui-btn--sm, .btn-sm) { min-height:30px; }
  [data-skin="glass"] body:not(.is-editor) .container > :nth-child(n+5) { animation:none; }
}

/* ── 19. Фолбэки: нет размытия / «меньше прозрачности» ────────────────────────────────────────────────── */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-skin="glass"] { --glass-bg:rgba(20,24,32,.90); --glass-bg-strong:rgba(18,22,30,.97); }
  :root[data-skin="glass"][data-theme="light"] { --glass-bg:rgba(255,255,255,.92); --glass-bg-strong:rgba(255,255,255,.98); }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-skin="glass"] { --glass-bg:var(--surface-solid); --glass-bg-strong:var(--surface-solid); --glass-bg-dense:var(--surface-solid); }
  [data-skin="glass"] * { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* аудит UI/UX 03.11: тёмный текст на цветных кружках и кнопках (статусы на стекле светлее — белый не читается),
   цель пальцем у статуса в шапке на телефоне — не уже 38 px */
[data-skin="glass"] .db-step:not(.later) .db-step-n, [data-skin="glass"] .btn-green { color:var(--on-status); }
[data-skin="glass"] .bf-count { background:var(--accent-fill); color:var(--on-accent); }
@media (max-width:640px) { [data-skin="glass"] .shell-status.hb { min-width:38px; justify-content:center; } }

/* ── 20. Печать: никакого стекла ───────────────────────────────────────────────────────────────────────── */
@media print {
  /* бумага белая: тёмный текст и белые панели в любой теме ([data-theme] — чтобы перебить светлую и «как в системе») */
  :root[data-skin="glass"], :root[data-skin="glass"][data-theme] {
    --bg:#fff; --surface-solid:#fff; --surface-2-solid:#f4f5f7; --surface-3-solid:#eceef2;
    --glass-bg:#fff; --glass-bg-strong:#fff; --glass-bg-dense:#fff; --glass-fill-1:#f6f7f9; --glass-fill-2:#eef0f3; --glass-fill-3:#e6e9ee;
    --glass-border:#d5d9e0; --glass-border-strong:#c3c9d2;
    --text:#111; --text-strong:#000; --muted:#444; --faint:#555;
    color-scheme:light;
  }
  [data-skin="glass"] :is(.ui-banner, .ui-banner--warning, .ui-banner--danger, .ui-banner--info) { background:#fff !important; }
  [data-skin="glass"] body::before, [data-skin="glass"] body::after, [data-skin="glass"] .shell-main::before { display:none !important; }
  [data-skin="glass"] *, [data-skin="glass"] *::before, [data-skin="glass"] *::after {
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important; text-shadow:none !important;
    animation:none !important;
  }
  [data-skin="glass"] body, [data-skin="glass"] :is(.ui-panel, .panel, .gcard, .ui-kpi, .ui-table-wrap, .table-wrap, .shell-side, .shell-top) {
    background:#fff !important; color:#000 !important;
  }
}

/* ── 21. Исключения: редакторы (14.6) — каркас стеклянный, рабочие области сплошные, без каскада и переходов ── */
[data-skin="glass"] body.is-editor :is(.ls-ed, .ls-left, .ls-right, .ls-insp__head, .ls-devstrip, .ls-findbar, .ls-ctx, .ls-drawer, .ls-float, .ls-quick,
  .ls-asst, .bd-status, .bd-menu, .bd-help) {
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
[data-skin="glass"] body.is-editor :is(.ls-ed, .ls-left, .ls-right) { background-color:var(--surface-solid); }
[data-skin="glass"] body.is-editor :is(.ls-insp__head, .ls-devstrip, .ls-findbar, .ls-ctx) { background-color:var(--surface-solid); }
[data-skin="glass"] body.is-editor { --surface:var(--surface-solid); --surface-2:var(--surface-2-solid); --surface-3:var(--surface-3-solid); }

/* ── 22. Вход: витрина стиля — стеклянная карточка по центру ──────────────────────────────────────────── */
[data-skin="glass"] body:not(:has(.shell)) main.container > .u-bg-surface {
  margin-top:12vh; border-radius:var(--radius-xl); box-shadow:var(--glass-shadow), var(--glass-highlight), 0 30px 80px -30px rgba(0,0,0,.6);
}
[data-skin="glass"] body:not(:has(.shell)) main.container > .u-bg-surface :is(input.u-bg, input) { border-radius:12px; }
