/* ══ Стекло (демо-сборка, 26.10.2026) ═══════════════════════════
   Отдельный слой поверх обычных стилей. Включается атрибутом
   data-skin="glass" на <html> и без него не меняет ни одного правила —
   поэтому файл можно подключать всегда, а обычные светлая и тёмная
   темы остаются как были.

   Почти весь интерфейс красится токенами (--card, --raise, --line,
   --ink…), поэтому основное здесь — другие значения токенов:
   полупрозрачные поверхности на тёмном холсте с цветными пятнами.
   Сверх токенов — раскладка «островами» (меню и шапка парят с
   зазором, карточки отделены воздухом) и заслонки там, где фон
   карточки служил непрозрачной подложкой.

   Размытие (backdrop-filter) стоит только там, где под стеклом
   проезжает содержимое: шапка, модальные окна, всплывающие списки.
   На самих карточках его нет намеренно: размытие делает элемент
   опорой для position: fixed, и всплывающие окна внутри карточки
   (выбор из списка, подсказки) встали бы не там, куда их ставит код.
   Шапке размытие дано псевдоэлементом — у него нет детей. */

/* ── токены: светлое стекло ───────────────────────────────── */
:root[data-skin="glass"] {
  --g-gap: 12px;            /* воздух между островами */
  --g-r: 20px;              /* скругление островов */
  --g-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .6 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --brand: #6D5CF6;
  --brand-deep: #5341DE;
  --brand-soft: rgba(109, 92, 246, .18);
  --brand-tint: rgba(109, 92, 246, .09);
  --on-brand: #FFFFFF;
  --grad-brand: linear-gradient(135deg, #9A74FF -6%, #6D5CF6 48%, #3E8CFF 112%);

  --bg: #ECEEF8;
  --glow:
    radial-gradient(1100px 720px at 4% -12%, rgba(139, 112, 255, .34), transparent 62%),
    radial-gradient(900px 640px at 102% -4%, rgba(80, 160, 255, .30), transparent 60%),
    radial-gradient(1000px 720px at 92% 108%, rgba(52, 211, 160, .22), transparent 62%),
    radial-gradient(760px 560px at 14% 112%, rgba(255, 128, 200, .18), transparent 60%);
  --card: rgba(255, 255, 255, .58);
  --raise: rgba(34, 40, 90, .045);
  --line: rgba(34, 40, 90, .13);
  --line2: rgba(34, 40, 90, .08);
  --band: rgba(34, 40, 90, .03);
  --box-bg: rgba(255, 255, 255, .5);
  --box-bg-h: rgba(255, 255, 255, .75);

  --ink: #14172F;
  --ink2: #4B5070;
  --ink3: #7D829F;
  --ink4: #AAAEC6;

  --ok: #0EA472;
  --ok-soft: rgba(14, 164, 114, .12);
  --warn: #C98A0C;
  --warn-soft: rgba(225, 160, 20, .14);
  --bad: #E5405E;
  --bad-soft: rgba(229, 64, 94, .11);
  --off: #A6AAC2;
  --note: #3A64A8;
  --info: #3B7BF6;
  --info-soft: rgba(59, 123, 246, .12);
  --viol: #8B4DF0;
  --viol-soft: rgba(139, 77, 240, .12);

  --mc-wait: rgba(34, 40, 90, .22);
  --mc-nd-a: rgba(34, 40, 90, .06);
  --mc-nd-b: rgba(34, 40, 90, .03);
  --mc-unclear-bg: rgba(59, 123, 246, .10);

  --shadow: 0 1px 2px rgba(30, 30, 80, .05);
  --shadow-float: 0 0 0 1px rgba(255, 255, 255, .6), 0 30px 60px -24px rgba(40, 40, 100, .35);
  --shadow-glow: 0 14px 30px -12px rgba(109, 92, 246, .55);
  --fade: rgba(40, 40, 100, .10);
  --r: 18px;

  /* Свои токены стекла. */
  --g-panel: linear-gradient(165deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5) 70%);
  --g-edge: rgba(255, 255, 255, .8);
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, .9);
  --g-shadow: 0 1px 2px rgba(30, 30, 80, .05), 0 22px 44px -28px rgba(40, 40, 100, .45);
  --g-bar: rgba(255, 255, 255, .62);
  --g-pop: rgba(255, 255, 255, .84);
  --g-sheet: linear-gradient(165deg, rgba(252, 252, 255, .97), rgba(240, 242, 252, .97));
  --g-solid: #F5F6FC;       /* непрозрачная замена --card для липких клеток */
  --g-solid2: #ECEEF8;      /* … и для липких шапок таблиц (вместо --raise) */
  --g-ink-inv: #FFFFFF;     /* текст на подложке цвета текста (выбранный чип) */
  --g-blur: blur(22px) saturate(170%);
  --g-scrim: rgba(30, 32, 70, .28);
  --g-page: var(--g-noise), var(--glow), var(--bg);
}

/* ── токены: тёмное стекло (основной вид демо) ────────────── */
:root[data-skin="glass"][data-theme="dark"] {
  color-scheme: dark;       /* календари и списки браузера — тоже тёмные */

  --brand: #8B7CF8;
  --brand-deep: #B4A9FF;    /* текст цвета бренда на тёмном — светлее */
  --brand-soft: rgba(139, 124, 248, .26);
  --brand-tint: rgba(139, 124, 248, .13);
  --on-brand: #FFFFFF;
  --grad-brand: linear-gradient(135deg, #A07DFF -6%, #6E5CF6 48%, #3D8BFF 112%);

  --bg: #060814;
  --glow:
    radial-gradient(1100px 760px at 4% -12%, rgba(124, 92, 255, .55), transparent 62%),
    radial-gradient(900px 640px at 102% -4%, rgba(56, 132, 255, .34), transparent 60%),
    radial-gradient(760px 520px at 60% 42%, rgba(99, 102, 241, .16), transparent 66%),
    radial-gradient(1000px 720px at 92% 108%, rgba(20, 200, 160, .26), transparent 62%),
    radial-gradient(760px 560px at 14% 112%, rgba(220, 70, 200, .22), transparent 60%);
  --card: rgba(255, 255, 255, .045);
  --raise: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .12);
  --line2: rgba(255, 255, 255, .075);
  --band: rgba(255, 255, 255, .03);
  --box-bg: rgba(255, 255, 255, .05);
  --box-bg-h: rgba(255, 255, 255, .085);

  --ink: #F2F4FF;
  --ink2: rgba(225, 230, 255, .72);
  --ink3: rgba(225, 230, 255, .50);
  --ink4: rgba(225, 230, 255, .30);

  --ok: #3DDC97;
  --ok-soft: rgba(61, 220, 151, .14);
  --warn: #F7C14B;
  --warn-soft: rgba(247, 193, 75, .14);
  --bad: #FF6B81;
  --bad-soft: rgba(255, 107, 129, .15);
  --off: rgba(225, 230, 255, .35);
  --note: #8FB8FF;
  --info: #5EA8FF;
  --info-soft: rgba(94, 168, 255, .15);
  --viol: #C59BFF;
  --viol-soft: rgba(197, 155, 255, .15);

  --mc-wait: rgba(255, 255, 255, .22);
  --mc-nd-a: rgba(255, 255, 255, .06);
  --mc-nd-b: rgba(255, 255, 255, .03);
  --mc-unclear-bg: rgba(94, 168, 255, .12);

  --shadow: 0 18px 40px -24px rgba(0, 0, 0, .8);
  --shadow-float: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 70px -24px rgba(0, 0, 0, .85);
  --shadow-glow: 0 14px 34px -12px rgba(110, 92, 246, .7);
  --fade: rgba(3, 5, 12, .5);

  --g-panel: linear-gradient(165deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03) 70%);
  --g-edge: rgba(255, 255, 255, .10);
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, .07);
  --g-shadow: 0 24px 48px -28px rgba(0, 0, 0, .9);
  --g-bar: rgba(14, 17, 34, .55);
  --g-pop: rgba(19, 22, 42, .9);
  --g-sheet: linear-gradient(165deg, rgba(27, 29, 54, .97), rgba(14, 16, 33, .97));
  --g-solid: #16182C;
  --g-solid2: #1C1E33;
  --g-ink-inv: #10122A;
  --g-scrim: rgba(3, 5, 12, .55);
}

/* ── холст ─────────────────────────────────────────────────── */
[data-skin="glass"] body {
  background: var(--g-page);
  background-attachment: fixed;
}
[data-skin="glass"] ::selection { background: var(--brand-soft); }
[data-skin="glass"] ::-webkit-scrollbar-thumb { background: var(--line) !important; }
[data-skin="glass"] ::-webkit-scrollbar-track { background: transparent !important; }

/* ── острова: меню, шапка, карточки ───────────────────────── */
/* Только на экранах шире телефона: на телефоне каждый пиксель занят
   делом, и зазоры вокруг меню съели бы ширину таблиц. */
@media (min-width: 685px) {
  [data-skin="glass"] body {
    padding: 0 var(--g-gap) var(--g-gap);
    gap: var(--g-gap);
  }
  [data-skin="glass"] .side {
    top: var(--g-gap);
    margin-top: var(--g-gap);
    height: calc(100vh - 2 * var(--g-gap));
    border: 1px solid var(--g-edge);
    border-radius: 22px;
    background: var(--g-panel);
    box-shadow: var(--g-hi), var(--g-shadow);
  }
  /* Шапка липнет к самому верху, а зазор над стеклом — её же верхнее
     поле. Так --stick (высоту шапки меряет app.js) сам включает зазор, и
     всё, что встаёт под шапкой, считается без поправок. Полоску над
     стеклом закрывает кусок того же холста (фон с fixed совпадает с
     фоном страницы пиксель в пиксель) — иначе строки, уезжая вверх,
     выглядывали бы над шапкой. */
  [data-skin="glass"] .top {
    padding-top: calc(var(--g-gap) + 11.5px);
    margin-bottom: var(--g-gap);
    background: transparent;
    border-bottom: 0;
  }
  [data-skin="glass"] .top::before {
    content: ""; position: absolute; z-index: -1;
    inset: var(--g-gap) 0 0;
    border: 1px solid var(--g-edge); border-radius: 18px;
    background: var(--g-bar);
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    box-shadow: var(--g-hi), var(--g-shadow);
  }
  [data-skin="glass"] .top::after {
    content: ""; position: absolute; z-index: -2;
    left: -1px; right: -1px; top: 0; height: var(--g-gap);
    background: var(--g-page); background-attachment: fixed;
  }
  /* Разделы на всю высоту: из окна вычитаются шапка (с её верхним
     зазором), зазор под ней и нижнее поле страницы. */
  [data-skin="glass"] .pg,
  [data-skin="glass"] .ref { height: calc(100vh - var(--stick, 62px) - 2 * var(--g-gap)); }
  [data-skin="glass"] .msg-shell { height: calc(100vh - var(--stick, 63px) - 2 * var(--g-gap)); }
  @supports (height: 100dvh) {
    [data-skin="glass"] .side { height: calc(100dvh - 2 * var(--g-gap)); }
    [data-skin="glass"] .pg,
    [data-skin="glass"] .ref { height: calc(100dvh - var(--stick, 62px) - 2 * var(--g-gap)); }
    [data-skin="glass"] .msg-shell { height: calc(100dvh - var(--stick, 63px) - 2 * var(--g-gap)); }
  }
  [data-skin="glass"] .ref-panes .pg { height: 100%; }
}

/* Телефон: меню — рейка значков у края, шапка — полоса во всю ширину,
   острова — с полями поуже. Листается не страница, а .main (styles.css),
   поэтому шапка липнет внутри него и закрывает строки размытием. */
@media (max-width: 684px) {
  [data-skin="glass"] .side {
    background: var(--g-panel);
    border-right: 1px solid var(--g-edge);
  }
  [data-skin="glass"] .main { padding: 0 8px 8px; }
  [data-skin="glass"] .top {
    margin: 0 -8px 8px;
    background: transparent; border-bottom: 0;
  }
  [data-skin="glass"] .top::before {
    content: ""; position: absolute; z-index: -1; inset: 0;
    background: var(--g-bar);
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    border-bottom: 1px solid var(--g-edge);
  }
  [data-skin="glass"] .pg,
  [data-skin="glass"] .ref { height: calc(100dvh - var(--stick, 44px) - 16px); }
  [data-skin="glass"] .msg-shell { height: calc(100dvh - var(--stick, 44px) - 16px); }
  [data-skin="glass"] .ref-panes .pg { height: 100%; }
  :root[data-skin="glass"] { --g-r: 16px; --g-gap: 8px; }
}

/* Карточки — острова со скруглением и воздухом, а не полосы через
   черту. Стеклянная заливка — градиент с бликом в левом верхнем углу. */
[data-skin="glass"] .card,
[data-skin="glass"] .pg,
[data-skin="glass"] .ref {
  border: 1px solid var(--g-edge);
  border-radius: var(--g-r);
  background: var(--g-panel);
  box-shadow: var(--g-hi), var(--g-shadow);
}
[data-skin="glass"] .card { margin-bottom: var(--g-gap); }
[data-skin="glass"] .main > section > .card:last-child { border-bottom: 1px solid var(--g-edge); }
/* Раздел внутри рамки справочников — уже на стекле рамки. */
[data-skin="glass"] .ref-panes .pg,
[data-skin="glass"] .ref > .pg-tabs {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
/* Мессенджер и профиль собраны не из .pg — островами их делаем отдельно. */
[data-skin="glass"] :is(.msg-shell, .pf) {
  border: 1px solid var(--g-edge);
  border-radius: var(--g-r);
  background: var(--g-panel);
  box-shadow: var(--g-hi), var(--g-shadow);
}
[data-skin="glass"] :is(.pf-tabs, .pf-body, .pf-card) { background: transparent; }
[data-skin="glass"] .msg-conversation { background: rgba(255, 255, 255, .025); }
/* Углы: колонки и шапки внутри острова квадратные и вылезали бы за
   скругление. clip, а не hidden: hidden сделал бы остров прокручиваемым
   контейнером, и всё липкое внутри перестало бы липнуть к окну. */
[data-skin="glass"] :is(.pg, .ref, .card, .msg-shell, .pf) { overflow: clip; }

/* Подложки цвета холста внутри панелей — прозрачные: сплошной --bg на
   стекле читался чёрной дырой посреди острова. */
[data-skin="glass"] :is(.mr-body, .wg-body, .frame .screen) { background: transparent; }

/* Текст «цвета карточки» на подложке цвета текста — выбранные чипы,
   тёмные подсказки, кружки шагов. Карточка стала полупрозрачной, и
   такой текст исчезал совсем. */
[data-skin="glass"] :is(.ln-chip2.on, .ln-ph-x, .ln-toast, .lx-chip.on, .g-tip, .rt-tip,
    .mr-chips button.on, .mr-chain li > i, .mr-stp-h > i, .mr-toast, .role-chip.adm, .link button) {
  color: var(--g-ink-inv);
}

/* ── меню ──────────────────────────────────────────────────── */
[data-skin="glass"] .side .brand { padding: 4px 4px 14px; }
[data-skin="glass"] .side .brand b { letter-spacing: -.01em; }
[data-skin="glass"] .nav { gap: 2px; }
[data-skin="glass"] .nav a { border-radius: 11px; }
[data-skin="glass"] .nav a:hover { background: var(--raise); }
/* Выбранный раздел — светящаяся капля бренда: градиент с внутренним
   контуром и мягким ореолом вместо плоской заливки. */
[data-skin="glass"] .nav a.on,
[data-skin="glass"] .nav a.on:hover {
  background: linear-gradient(100deg, rgba(139, 124, 248, .95), rgba(78, 128, 255, .78));
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px -12px rgba(110, 92, 246, .95);
}
[data-skin="glass"][data-theme="dark"] .nav a.on,
[data-skin="glass"][data-theme="dark"] .nav a.on:hover {
  background: linear-gradient(100deg, rgba(139, 124, 248, .42), rgba(78, 128, 255, .16));
  box-shadow: inset 0 0 0 1px rgba(170, 160, 255, .28), 0 10px 26px -14px rgba(120, 100, 255, .9);
}
[data-skin="glass"] .side .who { border-top-color: var(--line2); }

/* ── шапка: кнопки и часы — стеклянные капсулы ────────────── */
[data-skin="glass"] :is(.faq-btn, .bug-btn, .ask-btn, .fresh, .icon-btn) {
  border-color: var(--g-edge);
  background: var(--raise);
}
[data-skin="glass"] .top h1 { letter-spacing: -.02em; }

/* ── кнопки, поля, переключатели ──────────────────────────── */
[data-skin="glass"] .btn-brand {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 22px -10px rgba(110, 92, 246, .85);
}
[data-skin="glass"] .btn-brand:hover {
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 26px -10px rgba(110, 92, 246, 1);
}
[data-skin="glass"] :is(.btn-ghost, .sel-btn, .tb-search) {
  border-color: var(--line2);
  background: var(--raise);
}
[data-skin="glass"] :is(.sel-btn:hover, .sel-btn[aria-expanded="true"], .tb-search:focus-within) {
  background: var(--box-bg-h);
}
[data-skin="glass"] :is(.tb-search:focus-within, .sel-btn[aria-expanded="true"]) {
  box-shadow: 0 0 0 3px var(--brand-soft);
}
/* Сегменты: выбранный — приподнятая капля, а не белая плашка. */
[data-skin="glass"] :is(.eff-tabs, .mode) {
  background: var(--raise);
  border-color: var(--line2);
  border-radius: 12px;
}
[data-skin="glass"] .eff-tabs button[aria-selected="true"],
[data-skin="glass"] .mode button.on {
  background: var(--box-bg-h);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px -6px rgba(0, 0, 0, .5);
  color: var(--ink);
}

/* ── всплывающее: списки, меню, подсказки ─────────────────── */
/* Сами они fixed или absolute и вложенных fixed не держат — им
   размытие можно давать прямо. */
[data-skin="glass"] :is(.sel-list, .pk-list, .fresh-pop, .aw-tip, .sup-menu,
    .snb-pop, .snb-pick, .snb-hcard, .snb-cpy, .mat-pop, .mat-help-pop, .vdc-pop,
    .iss-pop, .msg-ctx, .msg-rxpick, .msg-emoji, .msg-acts, .stf-peek, .tsk-pp,
    .wg-pop, .vx-tip, .fin-cols-pop, .lx-ctxpop, .rg-rres) {
  background: var(--g-pop);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-color: var(--g-edge);
  box-shadow: var(--shadow-float);
}

/* ── модальные окна ───────────────────────────────────────── */
/* Размывается подложка на весь экран: она сама fixed во весь экран, и
   опора для вложенных fixed у неё та же, что у окна браузера. */
/* Подложки у разделов свои (окна, выезжающие панели справа), а
   устроены одинаково: fixed во весь экран, внутри — карточка. */
[data-skin="glass"] :is(.modal, .dlg-wrap, .pf-modal, .crw-wrap, .faq-wrap, .iss-wrap, .msg-overlay,
    .mr-wrap, .tsk-drawer-wrap, .wg-wrap, .as) {
  background: var(--g-scrim);
  -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%);
}
/* Карточка окна почти непрозрачная: под ней размытая страница, а не
   холст, и с прозрачностью карточки строки таблицы читались бы сквозь
   поля формы. */
[data-skin="glass"] :is(.modal-card, .dlg-card, .pf-modal > *, .crw-dlg, .iss-dlg, .msg-modal,
    .mr-dlg, .wg-dlg) {
  background: var(--g-pop);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-hi), var(--shadow-float);
}
[data-skin="glass"] :is(.faq, .as-panel, .tsk-drawer) {
  background: var(--g-sheet);
  border-left: 1px solid var(--g-edge);
  box-shadow: var(--shadow-float);
}
/* Панели во весь экран и выезжающая справа карточка цены — без
   подложки, поэтому плотные. */
[data-skin="glass"] :is(.pc, .vdc-full, .ln-vw) { background: var(--g-sheet); }
[data-skin="glass"] .modal-card > .modal-btns { background: var(--g-pop); }

/* ── липкие заслонки ──────────────────────────────────────── */
/* Здесь фон карточки закрывал строки, проезжающие под шапкой таблицы
   или первой колонкой. Полупрозрачный он бы их показывал — заслонки
   получают непрозрачный цвет того же тона. */
[data-skin="glass"] :is(.tbl thead th, .ar-grid thead th, .mat-usage-tbl th, .vdc-ftbl tfoot td,
    .vx-tbl th) {
  background: var(--g-solid2);
}
[data-skin="glass"] .mx-body thead th { background: transparent; }
[data-skin="glass"] :is(.calc-tbl thead th.pos-no, .calc-tbl thead th.pos-name,
    .calc-tbl thead th.grp.froze, .mat-tbl thead th.froze,
    .calc-tbl thead th.grp.best, .mat-tbl thead th.mat-gbest,
    .vdc-ftbl td.v-no, .vdc-ftbl thead th.v-no, .vdc-ftbl td.v-name, .vdc-ftbl thead th.v-name,
    .vdc-ftbl thead th.v-froze, .ln-mx th, .lx-one-tools, .pf-save,
    .pto-main .pto-grp > .pto-grp-h, .rt-tbl th, .mr-bar, .mr-cart, .mr-sbar,
    .snb-tbl td.s-no, .snb-tbl thead th.s-no, .snb-tbl td.s-name, .snb-tbl thead th.s-name,
    .snb-tbl thead th.s-froze, .spec-top, .masters-head) {
  background: var(--g-solid);
}
[data-skin="glass"] .stf-tbl thead th.s-name { background: var(--g-solid2); }
/* Липкая первая колонка заслоняет строки, только когда таблицу
   прокрутили вбок (класс x-scrolled ставит код таблицы). В покое она
   прозрачная, как вся строка, — иначе тянулась бы тёмной полосой. */
[data-skin="glass"] :is(.stf-tbl td.s-name, .calc-tbl td.pos-no, .calc-tbl td.pos-name) {
  background: transparent;
}
[data-skin="glass"] .x-scrolled :is(.stf-tbl td.s-name, .calc-tbl td.pos-no, .calc-tbl td.pos-name) {
  background: var(--g-solid);
}
[data-skin="glass"] :is(.mr-cat-h, .mr-mbar, .mr-ed.on-cart .mr-mbar, .mr-cart-a) {
  background: var(--g-solid);
}

/* ══ Эффективность ═════════════════════════════════════════ */
/* Полоса фильтров — своим островом. Липнет под шапкой с тем же
   зазором; полоска над ней закрыта куском холста, как у шапки. */
/* Стекло полосы — псевдоэлементом: в ней списки «Период», «Отделы»,
   а их выпадашки fixed (см. шапку файла). */
[data-skin="glass"] .eff-bar {
  margin-bottom: var(--g-gap);
  background: transparent; border-bottom: 0;
}
[data-skin="glass"] .eff-bar::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  border: 1px solid var(--g-edge); border-radius: 16px;
  background: var(--g-bar);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-hi), var(--g-shadow);
}
@media (min-width: 685px) {
  [data-skin="glass"] .eff-bar { top: calc(var(--stick, 62px) + var(--g-gap)); }
  [data-skin="glass"] .eff-bar::before {
    content: ""; position: absolute; z-index: -1;
    left: -1px; right: -1px; bottom: calc(100% + 1px); height: var(--g-gap);
    background: var(--g-page); background-attachment: fixed;
  }
}
[data-skin="glass"] #sec-emp > .period-note,
[data-skin="glass"] .rate-hint {
  margin-bottom: var(--g-gap);
  border: 1px solid var(--g-edge); border-radius: 16px;
}
/* Итоги — четыре стеклянные плитки через воздух. Первая — с цветным
   свечением бренда за шкалой. */
[data-skin="glass"] .eff-stats {
  gap: var(--g-gap);
  margin-bottom: var(--g-gap);
  background: none; border: 0;
}
[data-skin="glass"] .eff-stats .eff-st,
[data-skin="glass"] .eff-stats .eff-st:first-child {
  border: 1px solid var(--g-edge); border-radius: var(--g-r);
  background: var(--g-panel);
  box-shadow: var(--g-hi), var(--g-shadow);
}
[data-skin="glass"] .eff-stats .eff-st.st-main {
  background:
    radial-gradient(420px 220px at 12% 50%, rgba(139, 124, 248, .30), transparent 70%),
    radial-gradient(380px 200px at 95% 0%, rgba(61, 140, 255, .18), transparent 70%),
    var(--g-panel);
}
[data-skin="glass"] .st-v { letter-spacing: -.035em; }

/* ══ Вход ═══════════════════════════════════════════════════ */
[data-skin="glass"] body.login {
  background: var(--g-page);
  background-attachment: fixed;
}
/* За карточкой — два светящихся шара. Ради них стекло и видно: карточка
   размывает их края, и получается матовое стекло, а не просто тёмный
   прямоугольник. */
[data-skin="glass"] .login-wrap { position: relative; }
[data-skin="glass"] .login-wrap::before,
[data-skin="glass"] .login-wrap::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
}
[data-skin="glass"] .login-wrap::before {
  width: 230px; height: 230px; left: -105px; top: 150px;
  background: radial-gradient(circle at 34% 30%, #C3AEFF, #7A63F8 52%, #3A27B5 100%);
  box-shadow: 0 0 90px rgba(124, 92, 255, .55);
}
[data-skin="glass"] .login-wrap::after {
  width: 170px; height: 170px; right: -80px; top: 215px;
  background: radial-gradient(circle at 34% 30%, #9DF7D8, #22C59A 52%, #0B6F5D 100%);
  box-shadow: 0 0 80px rgba(34, 197, 154, .45);
}
[data-skin="glass"] .login-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow-float);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
}
[data-skin="glass"]:not([data-theme="dark"]) .login-card {
  background: rgba(255, 255, 255, .45);
  border-color: rgba(255, 255, 255, .8);
}
[data-skin="glass"] .login-card input { border: 1px solid var(--line2); }
/* Подсказка в поле: браузерный серый на тёмном стекле почти не виден. */
[data-skin="glass"] :is(input, textarea)::placeholder { color: var(--ink3); opacity: 1; }
[data-skin="glass"][data-theme="dark"] .login-card input::placeholder { color: rgba(235, 238, 255, .62); }
[data-skin="glass"] .login-card input:focus {
  border-color: var(--brand); background: var(--box-bg-h);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
[data-skin="glass"] .login-card button[type="submit"] {
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 26px -10px rgba(110, 92, 246, .9);
}
[data-skin="glass"] .login-brand { flex-direction: column; gap: 12px; text-align: center; margin-bottom: 26px; }