/* Переключатель стиля на странице входа (в остальных местах он лежит в «Настройках») */
.theme-switch{position:fixed;left:14px;bottom:14px;z-index:40;font:500 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif}
.theme-switch .seg{display:inline-flex;padding:3px;gap:2px;border-radius:999px;background:rgba(120,120,128,.18)}
.theme-switch button{border:0;background:transparent;color:#6E6E73;padding:6px 12px;border-radius:999px;cursor:pointer;font:inherit;width:auto}
.theme-switch button.on{background:#fff;color:#1D1D1F;box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* ═════════ Тема «Apple»: системная палитра, SF/Inter; переменные страниц портала переопределены целиком ═════════ */
html[data-style="apple"]{
  --graphite:#1D1D1F;--anthr:#2C2C2E;--steel:#6E6E73;--gray:#8E8E93;--concrete:#C7C7CC;--lconcrete:#E5E5EA;--paper:#F2F2F7;
  --orange:#007AFF;--rust:#0062CC;--orange-bg:rgba(0,122,255,.12);--amber-bg:rgba(255,149,0,.16);
  --bg:#F2F2F7;--card:#fff;--line:rgba(60,60,67,.16);--line2:rgba(60,60,67,.29);--soft:rgba(118,118,128,.12);
  --text:#1D1D1F;--muted:#6E6E73;--hint:#8E8E93;
  --blue:#0062CC;--blue-bg:rgba(0,122,255,.12);--violet:#5856D6;--violet-bg:rgba(88,86,214,.12);--teal:#0A7E8C;--teal-bg:rgba(50,173,230,.16);
  --red:#D70015;--red-bg:rgba(255,59,48,.12);--amber:#C93400;--green:#248A3D;--green-bg:rgba(52,199,89,.16);
  --mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
  --ease-out:cubic-bezier(.25,.1,.25,1);
  --spring:cubic-bezier(.32,.72,0,1);
}
html[data-style="apple"] body{font-family:var(--font);font-optical-sizing:auto;background:var(--bg);color:var(--text)}
/* подписи были моноширинными заглавными — у Apple это обычный текст с лёгким трекингом */
html[data-style="apple"] .mono,html[data-style="apple"] label,html[data-style="apple"] .logo small,html[data-style="apple"] .side .sep,
html[data-style="apple"] .crumbs,html[data-style="apple"] .beta{font-family:var(--font);text-transform:none;letter-spacing:.01em}
html[data-style="apple"] .side .sep{font-size:12px;font-weight:600;color:var(--gray)}
/* заголовки: крупные — с отрицательным трекингом и плотным интерлиньяжем, без заглавных */
html[data-style="apple"] .display,html[data-style="apple"] .hello .display{text-transform:none;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.04}
html[data-style="apple"] h1,html[data-style="apple"] .ph h1,html[data-style="apple"] .sec h2,html[data-style="apple"] .card h3{font-family:var(--font-display);letter-spacing:-.022em}
html[data-style="apple"] h1,html[data-style="apple"] .ph h1{font-weight:700}

/* кнопки: отклик на нажатие мгновенный, главная — акцентная */
html[data-style="apple"] .btn{border-color:transparent;background:var(--soft);border-radius:10px;font-weight:500;transition:transform .1s ease-out,background-color .2s,filter .2s}
html[data-style="apple"] .btn:hover{border-color:transparent;filter:brightness(.96)}
html[data-style="apple"] .btn:active{transform:scale(.97)}
html[data-style="apple"] .btn.primary,html[data-style="apple"] .btn.accent{background:var(--orange);border-color:transparent;color:#fff}
html[data-style="apple"] .btn.primary:hover,html[data-style="apple"] .btn.accent:hover{background:var(--rust);border-color:transparent;filter:none}
html[data-style="apple"] .btn.ghost{background:transparent;color:var(--orange)}
html[data-style="apple"] .btn.ghost:hover{background:var(--orange-bg)}
html[data-style="apple"] .btn.danger{color:var(--red)}
html[data-style="apple"] input,html[data-style="apple"] select,html[data-style="apple"] textarea{border:1px solid var(--line);border-radius:10px;background:var(--card)}
html[data-style="apple"] input:focus,html[data-style="apple"] select:focus,html[data-style="apple"] textarea:focus{outline:3px solid rgba(0,122,255,.3);outline-offset:0;border-color:var(--orange)}
html[data-style="apple"] .cin textarea{background:transparent;border:0;border-radius:0}html[data-style="apple"] .cin textarea:focus,html[data-style="apple"] .cin textarea:focus-visible{outline:0;box-shadow:none}   /* поле ввода чата — внутри своего пузыря .cin */

/* шапка: полупрозрачный материал, контент прокручивается под ней */
html[data-style="apple"] header{background:rgba(245,245,247,.72);color:var(--text);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:0 .5px 0 var(--line)}
html[data-style="apple"] .crumbs,html[data-style="apple"] .me,html[data-style="apple"] .who,html[data-style="apple"] .hdr .btn.ghost,html[data-style="apple"] .me .btn.ghost{color:var(--muted)}
html[data-style="apple"] .crumbs a:hover,html[data-style="apple"] .hdr .btn.ghost:hover,html[data-style="apple"] .me .btn.ghost:hover{color:var(--orange);background:var(--orange-bg)}
html[data-style="apple"] .me .av{background:var(--orange)}
html[data-style="apple"] .who select{background:var(--soft);border-color:transparent;color:var(--text)}
html[data-style="apple"] nav.tabs a{color:var(--muted)}
html[data-style="apple"] nav.tabs a:hover{color:var(--text)}
html[data-style="apple"] nav.tabs a.on{color:var(--orange);border-bottom-color:var(--orange)}

/* боковое меню разделов — светлая панель вместо чёрного блока */
html[data-style="apple"] .side{background:var(--card);border:1px solid var(--line);border-radius:16px}
html[data-style="apple"] .side a{color:var(--text);border-radius:8px}
html[data-style="apple"] .side a:hover{background:var(--soft);color:var(--text)}
html[data-style="apple"] .side a.on{background:var(--orange-bg);color:var(--orange);box-shadow:none}

/* карточки: спокойнее радиусы, мягкая тень */
html[data-style="apple"] .card,html[data-style="apple"] .kpi,html[data-style="apple"] .pc{border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04)}
html[data-style="apple"] .pc{background:var(--card);border:1px solid var(--line)}
html[data-style="apple"] .pc .ic{background:var(--orange-bg);color:var(--orange)}
html[data-style="apple"] .pc .cnt{background:var(--soft)}
html[data-style="apple"] .hero,html[data-style="apple"] .pulse,html[data-style="apple"] .sec{border-radius:20px}
html[data-style="apple"] .hero,html[data-style="apple"] .pulse,html[data-style="apple"] .sec.dark{background:#1C1C1E}
html[data-style="apple"] .hk{background:#2C2C2E;border-color:transparent;border-radius:14px}
html[data-style="apple"] .sec.light{background:var(--card);border:1px solid var(--line)}
html[data-style="apple"] .sec.light .ico2{background:var(--soft)}
html[data-style="apple"] .sec{transition:transform .3s var(--spring),box-shadow .3s,background-color .2s}
html[data-style="apple"] .sec:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.1)}
html[data-style="apple"] .bigbar .track,html[data-style="apple"] .bigbar .fill{border-radius:8px}
html[data-style="apple"] .bigbar .fill{font-family:var(--font)}
html[data-style="apple"] .feed .fi{border-radius:8px}

/* вход */
html[data-style="apple"] form{border-radius:20px;border-color:var(--line);box-shadow:0 10px 40px rgba(0,0,0,.08)}
html[data-style="apple"] .mark{background:var(--orange)}
html[data-style="apple"] form label{color:var(--muted)}
html[data-style="apple"] form input{border-color:var(--line);border-radius:10px}
html[data-style="apple"] form input:focus{outline:3px solid rgba(0,122,255,.3);border-color:var(--orange)}
html[data-style="apple"] form button{background:var(--orange);border-radius:10px}
html[data-style="apple"] form button:hover{background:var(--rust)}
html[data-style="apple"] form .back{background:none;color:var(--orange)}
html[data-style="apple"] form .back:hover{background:var(--orange-bg)}
html[data-style="apple"] #err{color:var(--red)}
html[data-style="apple"] body.go{background:#1C1C1E}

html[data-style="apple"] :focus-visible{outline-color:rgba(0,122,255,.5)}

@media (prefers-reduced-motion:reduce){
  html[data-style="apple"] .btn:active,html[data-style="apple"] .sec:hover{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  html[data-style="apple"] header{background:#F5F5F7;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  html[data-style="apple"]{--line:rgba(60,60,67,.5)}
}

/* ═════════ «Glassy»: светлое жидкое стекло (скилл dashboard-ui-glass) поверх статичного фона ═════════
   theme.js ставит html[data-style=apple] + html[data-glass]: всё оформление «Apple» остаётся, а здесь панели
   становятся полупрозрачными с размытием. Страница всегда светлая (theme.js подменяет data-theme=dark на light).
   Тот же набор переменных лежит в uchet/web/styles.css и uchet/web/calc/styles.css (там тема html[data-theme=glassy]). */
html[data-glass],html[data-glass] body.mes{
  --bg:transparent;--card:rgba(255,255,255,.55);--panel:rgba(255,255,255,.55);--panel-2:rgba(255,255,255,.4);
  --fill:rgba(0,0,0,.06);--soft:rgba(0,0,0,.06);--line:rgba(0,0,0,.09);--line-2:rgba(0,0,0,.16);--line2:rgba(0,0,0,.16);
  --text:#1a1a1a;--muted:#4b5563;--hint:#6b7280;--faint:rgba(26,26,26,.38);
  --orange:#3b82f6;--rust:#1d4ed8;--orange-bg:rgba(59,130,246,.16);
  --accent:#3b82f6;--accent-soft:rgba(59,130,246,.16);--accent-text:#1d4ed8;
  --blue:#1d4ed8;--blue-bg:rgba(59,130,246,.14);--info:#1d4ed8;--info-soft:rgba(59,130,246,.14);
  --thumb:#fff;--scrim:rgba(15,23,42,.35);--radius:24px;
  --glass-border:rgba(255,255,255,.6);
  --glass-shadow:0 4px 24px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.5);
  --shadow:var(--glass-shadow);--shadow-pop:0 18px 50px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.1);
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
html[data-glass]{
  background:#dbe9ff fixed;
  background-image:radial-gradient(60% 50% at 12% 8%,#fff 0%,transparent 70%),radial-gradient(55% 55% at 90% 15%,#a9cdff 0%,transparent 70%),
    radial-gradient(60% 60% at 70% 95%,#bfe3ff 0%,transparent 70%),radial-gradient(50% 50% at 5% 90%,#e6f1ff 0%,transparent 70%);
}
html[data-glass] body{background:transparent}
html[data-glass] body.go{background:transparent}
html[data-glass] header,html[data-glass] .side,html[data-glass] .mx-side,html[data-glass] .card,html[data-glass] .kpi,
html[data-glass] .pc,html[data-glass] .sec,html[data-glass] form,html[data-glass] .modal-box{
  -webkit-backdrop-filter:blur(8px) saturate(1.8);backdrop-filter:blur(8px) saturate(1.8);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
}
html[data-glass] header{background:rgba(255,255,255,.5);border-width:0 0 1px 0;border-radius:0}
/* мессенджер CRM и чат (палитра --tg-*): светлое стекло вместо обоев Telegram */
html[data-glass],html[data-glass] body.mes{
  --tg-wall:transparent;--tg-panel:rgba(255,255,255,.55);--tg-in:rgba(255,255,255,.85);--tg-out:rgba(191,219,254,.9);
  --tg-text:#1a1a1a;--tg-out-text:#1a1a1a;--tg-sec:#4b5563;--tg-time-in:#6b7280;--tg-time-out:#1d4ed8;
  --tg-blue:#3b82f6;--tg-blue-text:#1d4ed8;--tg-hover:rgba(0,0,0,.05);--tg-line:rgba(0,0,0,.09);--tg-input:rgba(255,255,255,.7);
  --tg-sys:rgba(30,41,59,.4);--tg-file-out:#3b82f6;--tg-shadow:0 1px 2px rgba(0,0,0,.08);
}
html[data-glass] .sidebar,html[data-glass] .ms-list,html[data-glass] .ms-top,html[data-glass] .ls,html[data-glass] .ch-hd,html[data-glass] .rl,html[data-glass] .ip,
html[data-glass] .menu,html[data-glass] .dlg,html[data-glass] .thm{
  -webkit-backdrop-filter:blur(8px) saturate(1.8);backdrop-filter:blur(8px) saturate(1.8);
}
/* чат: колонка папок и панель «Информация» — светлое стекло, как остальные панели */
html[data-glass] .rl{--tg-rail:rgba(255,255,255,.42);color:#4b5563;border-right:1px solid var(--glass-border)}
html[data-glass] .rl .rf:hover{background:rgba(0,0,0,.06);color:#1a1a1a}
html[data-glass] .rl .rf.on{background:rgba(59,130,246,.18);color:#1d4ed8}
html[data-glass] .ip{border-left:1px solid var(--glass-border)}
html[data-glass] .ip-sec{border-top-color:rgba(255,255,255,.55)}
/* тёмные блоки (плитки разделов, шапка-приветствие) остаются тёмными с белым текстом — но тоже стеклом */
html[data-glass] .sec.dark,html[data-glass] .hero,html[data-glass] .pulse{background:rgba(28,28,30,.58)}
html[data-glass] .hk{background:rgba(255,255,255,.12)}
html[data-glass] .sec.dark,html[data-glass] .hero,html[data-glass] .pulse{--text:#fff;--muted:#d1d1d6;--hint:#aeaeb2;--gray:#aeaeb2;--steel:#d1d1d6;--line:rgba(255,255,255,.18);--line2:rgba(255,255,255,.28);--soft:rgba(255,255,255,.12)}
/* всплывающие окна, меню и ящики — почти непрозрачное стекло: за ними не должен просвечивать текст страницы */
html[data-glass] .mdl,html[data-glass] .dlg,html[data-glass] .menu,html[data-glass] .thm,html[data-glass] .modal,html[data-glass] .drawer,
html[data-glass] .callbar,html[data-glass] .callw{
  background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-pop);
}
@media (prefers-reduced-transparency:reduce){
  html[data-glass] header,html[data-glass] .side,html[data-glass] .mx-side,html[data-glass] .card,html[data-glass] .kpi,
  html[data-glass] .pc,html[data-glass] .sec,html[data-glass] form,html[data-glass] .modal-box{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* шапка диалога — плавающая стеклянная карточка внутри острова, а не плоская полоса */
/* теги: плотнее и контрастнее; в выбранном (оранжевом) диалоге — белая плашка, чтобы не сливались */
/* панель «Синхронизации» наверху CRM: раскрывается поверх страницы, поэтому в Glassy почти непрозрачная (иначе текст под ней просвечивает) */
html[data-glass] #sysbar{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8)}
html[data-glass] .sb-panel{background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
/* карточка лида справа: разделы — отдельные скруглённые стеклянные блоки вместо полос на сплошной панели */

/* ═══ Glassy (синий): острова, большие скругления, плотные окна; палитра прежняя ═══ */
/* ── меню — плавающий остров, как в калькуляторе (CRM, ERP, учёт) ── */
html[data-glass=""] .layout .sidebar{border-radius:28px;margin:12px 0 12px 12px;top:calc(12px + var(--sb-h,0px));height:calc(100vh - var(--sb-h,0px) - 24px);padding:16px 12px;background:rgba(255,255,255,.36)}
html[data-glass=""] .layout nav a{border-radius:14px;min-height:40px;margin-bottom:4px}
html[data-glass=""] .layout nav a.active{background:rgba(255,255,255,.7);box-shadow:0 1px 4px rgba(30,50,90,.12);color:var(--text)}
@media (min-width:761px){
  html[data-glass=""] .layout.rail{--rail:84px}
  html[data-glass=""] .layout.rail main{box-shadow:none}
  html[data-glass=""] .layout.rail .sidebar{clip-path:inset(0 calc(220px - 64px) 0 0 round 28px)}
  html[data-glass=""] .layout.rail .sidebar:hover{clip-path:inset(0 -48px 0 0 round 28px)}
  html[data-glass=""] .layout.rail .sidebar:not(:hover) nav a.active{background:transparent;box-shadow:none}
}
/* ── всплывающие окна и меню почти непрозрачные — текст под ними не просвечивает ── */
html[data-glass=""] .mdl,html[data-glass=""] .dlg,html[data-glass=""] .menu,html[data-glass=""] .thm,html[data-glass=""] .modal,html[data-glass=""] .drawer,
html[data-glass=""] .callbar,html[data-glass=""] .callw,html[data-glass=""] .modal-box,html[data-glass=""] .ms-thm,html[data-glass=""] .ms-ctx,
html[data-glass=""] .mfw-dd,html[data-glass=""] .qr,html[data-glass=""] .ms-emo,html[data-glass=""] .erpc .modal-box{
  background:rgba(244,248,255,.97);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);
  border-radius:24px;box-shadow:var(--shadow-pop),inset 0 0 0 .5px rgba(255,255,255,.9)}
html[data-glass=""] .ms-thm{--panel:#fbf6f1;border-radius:24px;padding:16px}
html[data-glass=""] .ms-thm .pw{border-radius:16px}
html[data-glass=""] .ms-ctx{border-radius:18px}
html[data-glass=""] .modal-scrim,html[data-glass=""] .scrim{background:rgba(15,23,42,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ── мессенджер CRM — три плавающих стеклянных острова вместо сплошной раскладки ── */
html[data-glass=""] .ms{background:transparent;padding:10px;gap:10px;box-sizing:border-box}
html[data-glass=""] .ms-fold,html[data-glass=""] .ms-list,html[data-glass=""] .ms-chat,html[data-glass=""] .ms-info{
  border:0;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  box-shadow:var(--glass-shadow),inset 0 0 0 .5px rgba(255,255,255,.75)}
html[data-glass=""] .ms-chat{background:var(--tg-wall,rgba(255,255,255,.3))}
html[data-glass=""] .ms-list .srch input{border-radius:24px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 .5px rgba(20,40,80,.14)}
html[data-glass=""] .ms-list .srch input:focus{background:rgba(255,255,255,.9);border-color:var(--tg-blue)}
html[data-glass=""] .ms-f{border-bottom-color:rgba(20,40,80,.1);margin:0 12px 6px;padding:0}
html[data-glass=""] .ms-f a{border-radius:14px 14px 0 0}
html[data-glass=""] .mt{border-radius:20px}
html[data-glass=""] .mt.on{background:var(--tg-blue);box-shadow:0 4px 14px rgba(59,130,246,.34)}
/* шапка диалога — плавающая стеклянная карточка внутри острова, а не плоская полоса */
html[data-glass=""] .ms-top{margin:10px 10px 4px;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 6px 24px rgba(30,50,90,.12),inset 0 0 0 .5px rgba(255,255,255,.85)}
html[data-glass=""] .ms-hd{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:6px 10px 6px 12px}
html[data-glass=""] .ms-strip{border-top:.5px solid rgba(20,40,80,.12);background:rgba(255,255,255,.3)}
html[data-glass=""] .ms-hd .ib:hover,html[data-glass=""] .ms-strip .ib:hover{background:rgba(255,255,255,.7)}
/* теги: плотнее и контрастнее; в выбранном (оранжевом) диалоге — белая плашка, чтобы не сливались */
html[data-glass=""] .lbl{border-radius:10px;padding:0 8px;font-weight:600;line-height:17px}
html[data-glass=""] .lbl.calc,html[data-glass=""] .lbl.agree{background:rgba(30,123,53,.16);color:#17692c}
html[data-glass=""] .lbl.erp{background:rgba(0,95,249,.14);color:#0b4fc4}
html[data-glass=""] .mt.on .lbl,html[data-glass=""] .mt.on .lbl.calc,html[data-glass=""] .mt.on .lbl.agree,html[data-glass=""] .mt.on .lbl.erp,
html[data-glass=""] .mt.on .lbl.lost,html[data-glass=""] .mt.on .lbl.demo{background:rgba(255,255,255,.94);color:#1d4ed8}
html[data-glass=""] .mt.on .lbl.calc,html[data-glass=""] .mt.on .lbl.agree{color:#17692c}
html[data-glass=""] .mt.on .lbl.lost{color:#C4151C}
html[data-glass=""] .mt.on .hint{color:rgba(255,255,255,.95)}
html[data-glass=""] .ms-info{background:rgba(255,255,255,.4);border-left:0}
html[data-glass=""] .bb{border-radius:20px;padding:6px 11px;box-shadow:0 2px 10px rgba(30,50,90,.1)}
html[data-glass=""] .bb:not(.first){border-top-left-radius:8px}html[data-glass=""] .bb:not(.last){border-bottom-left-radius:8px}
html[data-glass=""] .bb.out{border-radius:20px}
html[data-glass=""] .bb.out:not(.first){border-top-right-radius:8px}html[data-glass=""] .bb.out:not(.last){border-bottom-right-radius:8px}
html[data-glass=""] .bb.last:not(.media)::before,html[data-glass=""] .bb.out.last:not(.media)::before{display:none}
html[data-glass=""] .bb.last:not(.media){border-bottom-left-radius:20px}
html[data-glass=""] .bb.out.last:not(.media){border-bottom-left-radius:20px;border-bottom-right-radius:20px}
/* ответ — в стиле входящего (светлый пузырь, тёмный текст, та же тень), только тон серо-голубой, чтобы отличать от клиентского белого */
html[data-glass=""]:not([data-bg-tone="dark"]) .bb.out{--tg-out-text:#1a1a1a;--tg-time-out:var(--tg-blue-text);--tg-sec:#4b5563;--tg-file-out:color-mix(in srgb,var(--tg-blue) 35%,transparent);color:#1a1a1a}
html[data-glass=""]:not([data-bg-tone="dark"]) .bb.out:not(.media){background:color-mix(in srgb,var(--tg-blue) 22%,#fff)}
html[data-glass=""] .ms-day{border-radius:14px;background:rgba(35,26,20,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-glass=""] .ms-cmp{margin-bottom:10px}
html[data-glass=""] .ms-in{border-radius:26px;background:rgba(255,255,255,.88);min-height:44px;padding:0 10px;box-shadow:0 4px 18px rgba(30,50,90,.14),inset 0 0 0 .5px rgba(255,255,255,.9)}
html[data-glass=""] .ms-chs{border-radius:20px;background:rgba(255,255,255,.55)}
html[data-glass=""] .ms-selbar{border-radius:22px}
html[data-glass=""] .ms-rz.l{transform:translateX(18px)}html[data-glass=""] .ms-rz.r{transform:translateX(-18px)}
html[data-glass=""] .ms-down{background:rgba(255,255,255,.9)}
/* панель «Синхронизации» наверху CRM: раскрывается поверх страницы, поэтому в Glassy почти непрозрачная (иначе текст под ней просвечивает) */
html[data-glass] #sysbar{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8)}
html[data-glass] .sb-panel{background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
html[data-glass=""] #sysbar{background:rgba(244,248,255,.92)}
html[data-glass=""] .sb-panel{background:rgba(244,248,255,.985);border-radius:0 0 24px 24px;box-shadow:var(--shadow-pop)}
/* карточка лида справа: разделы — отдельные скруглённые стеклянные блоки вместо полос на сплошной панели */
html[data-glass=""] .ms-info{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;padding:0}
html[data-glass=""] .ms-info section,html[data-glass=""] .ms-info .top{
  flex:none;border:0;border-radius:24px;background:rgba(255,255,255,.5);padding:12px 16px;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 6px 24px rgba(30,50,90,.1),inset 0 0 0 .5px rgba(255,255,255,.8)}
html[data-glass=""] .ms-info h4{color:#1d4ed8}
html[data-glass=""] .ms-info .kv{border-color:rgba(20,40,80,.1)}
html[data-glass=""] .ms-info .fr img{border-radius:12px}

/* ── основной фон для Glassy: ряд кружков под переключателем стиля (виден только при включённом стекле) ── */
.hs-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.hs-bg{display:none;align-items:center;gap:10px}
html[data-glass] .hs-bg{display:flex}
.hs-bgl{font-size:12px;color:var(--muted,#6b7280)}
.hs-bgt{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.hs-bgt button{width:30px;height:30px;border:0;border-radius:50%;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);font:600 16px/1 var(--font,inherit);color:var(--muted,#6b7280);background:rgba(255,255,255,.7);overflow:hidden;transition:box-shadow .2s}
.hs-bgt button[data-bg-set=""]{width:auto;border-radius:15px;padding:0 10px;font-size:12px;font-weight:500}
.hs-bgt button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent,#3b82f6)}
/* полоса «Синхронизации» в Glassy: стекло в цвет темы вместо оранжевой плашки; статус — цветом точки, а не заливкой всей полосы */
html[data-glass] #sysbar .sb-row{background:transparent}
html[data-glass] #sysbar .sb-c{background:rgba(255,255,255,.62);color:var(--muted);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.8)}
html[data-glass] #sysbar .sb-c b{color:var(--text)}
html[data-glass] #sysbar .sb-c.warn{background:var(--warn-soft);color:var(--warn)}html[data-glass] #sysbar .sb-c.warn b{color:var(--warn)}
html[data-glass] #sysbar .sb-c.bad{background:var(--danger-soft);color:var(--danger)}html[data-glass] #sysbar .sb-c.bad b{color:var(--danger)}
html[data-glass] #sysbar .sb-c.ok i.dot{background:var(--ok)}
html[data-glass] #sysbar .sb-t{color:var(--text)}
html[data-glass] #sysbar .sb-t:hover{background:rgba(255,255,255,.6)}
html[data-glass] #sysbar{border-bottom:.5px solid rgba(255,255,255,.7);box-shadow:0 4px 18px rgba(30,50,90,.08)}
/* узкое окно: карточки лида справа нет (как без стекла) — иначе display:flex у острова карточки выводил её под чатом */
@media (max-width:1200px){html[data-glass] .ms-info{display:none}}
/* CRM на телефоне: меню и так полосой сверху — остров по высоте пунктов, а не на весь экран */
@media (max-width:760px){
  html[data-glass] .layout .sidebar{height:auto;margin:8px 8px 0;top:var(--sb-h,0px);padding:6px 10px;border-radius:22px}
  html[data-glass] .layout nav a{min-height:36px;margin-bottom:0}
}
/* CRM, меню сверху (html.menu-top): меню — плавающий остров полосой над страницей, «Синхронизации» — такой же остров внизу окна */
@media (min-width:761px){
  html.menu-top[data-glass] .layout .sidebar{margin:12px 12px 0;top:12px;height:auto;padding:6px 10px;border-radius:22px}
  html.menu-top[data-glass] .layout nav a,html.menu-top[data-glass] .layout .me>a,html.menu-top[data-glass] .layout .me>span{min-height:38px;margin-bottom:0;border-radius:12px}
  html.menu-top[data-glass] #sysbar{left:12px;right:12px;bottom:12px;border:0;border-radius:18px;box-shadow:0 6px 24px rgba(30,50,90,.12),inset 0 0 0 .5px rgba(255,255,255,.8)}
  html.menu-top[data-glass] #sysbar .sb-row{border-radius:18px;padding:7px 12px}
  html.menu-top[data-glass] .sb-panel{border-radius:24px;bottom:calc(100% + 8px);border:0;box-shadow:var(--shadow-pop)}
  html.menu-top[data-glass] .ms{padding-top:12px}
}

/* ═══ Адаптивный тон: на тёмном фоне (html[data-bg-tone=dark]) стекло становится тёмным, текст — светлым ═══
   theme.js считает яркость выбранной картинки; палитра переключается переменными, жёстко заданные светлые заливки — ниже. */
html[data-glass][data-bg-tone="dark"],html[data-glass][data-bg-tone="dark"] body.mes{
  color-scheme:dark;
  --card:rgba(28,28,32,.55);--panel:rgba(28,28,32,.58);--panel-2:rgba(255,255,255,.07);--fill:rgba(255,255,255,.12);--soft:rgba(255,255,255,.1);
  --line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.24);--line2:rgba(255,255,255,.24);
  --text:#f5f5f7;--muted:#c7c7cc;--hint:#a1a1a6;--faint:rgba(245,245,247,.4);--thumb:#636366;
  --glass-border:rgba(255,255,255,.16);--scrim:rgba(0,0,0,.5);
  --glass-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1);--shadow:var(--glass-shadow);--shadow-pop:0 24px 64px rgba(0,0,0,.6);
  --accent-text:#93c5fd;--info:#93c5fd;--rust:#93c5fd;--blue:#93c5fd;
  --ok:#30d158;--warn:#ff9f0a;--danger:#ff6b61;
  --tg-panel:rgba(28,28,32,.58);--tg-in:rgba(62,62,68,.92);--tg-out:rgba(37,99,235,.88);--tg-text:#f5f5f7;--tg-out-text:#fff;
  --tg-sec:#c7c7cc;--tg-time-in:#a1a1a6;--tg-time-out:#dbeafe;--tg-blue-text:#93c5fd;--tg-hover:rgba(255,255,255,.1);--tg-line:rgba(255,255,255,.12);--tg-input:rgba(255,255,255,.12);
}
html[data-bg-tone="dark"] header,html[data-bg-tone="dark"] .side,html[data-bg-tone="dark"] .mx-side,html[data-bg-tone="dark"] .sidebar,
html[data-bg-tone="dark"] .layout .sidebar{background:rgba(28,28,32,.5)}
html[data-bg-tone="dark"] header{background:rgba(28,28,32,.55)}
html[data-bg-tone="dark"] .layout nav a.active,html[data-bg-tone="dark"] .layout.rail nav a > span::before{background:rgba(255,255,255,.18);color:var(--text)}
html[data-bg-tone="dark"] .ms-list,html[data-bg-tone="dark"] .ms-info,html[data-bg-tone="dark"] .ms-info section,html[data-bg-tone="dark"] .ms-info .top{background:rgba(28,28,32,.5)}
html[data-bg-tone="dark"] .ms-info{background:transparent}
/* левая колонка мессенджера — как правая: прозрачная, а в ней отдельные стеклянные карточки (каналы+вкладки+поиск и список чатов) */
html[data-glass=""] .ms-list{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;overflow:visible;gap:10px;padding:0}
html[data-glass=""] .ms-list .ms-head,html[data-glass=""] .ms-list .items{
  margin:0;border:0;border-radius:24px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 6px 24px rgba(30,50,90,.1),inset 0 0 0 .5px rgba(255,255,255,.8)}
html[data-glass] .ms-list .items{padding:8px 8px 10px}
html[data-bg-tone="dark"] .ms-list{background:transparent}
html[data-glass] .ms-list.sanim .ms-head,html[data-glass] .ms-list.sanim .items{-webkit-backdrop-filter:none;backdrop-filter:none}   /* пока поиск движется, размытие отключено — фон под списком плавный, разницы не видно, а кадры не рвутся */
html[data-bg-tone="dark"] .ms-list .ms-head,html[data-bg-tone="dark"] .ms-list .items{background:rgba(28,28,32,.5)}
html[data-bg-tone="dark"] .ms-chat{background:var(--tg-wall,rgba(28,28,32,.3))}
html[data-bg-tone="dark"] .ms-top{background:rgba(28,28,32,.7)}
html[data-bg-tone="dark"] .ms-hd{background:transparent}
html[data-bg-tone="dark"] .ms-strip{background:rgba(255,255,255,.05)}
html[data-bg-tone="dark"] .ms-in{background:rgba(44,44,48,.92)}
html[data-bg-tone="dark"] .ms-chs,html[data-bg-tone="dark"] .ms-down{background:rgba(255,255,255,.12)}
html[data-bg-tone="dark"] .ms-list .srch input{background:rgba(255,255,255,.14);color:var(--text)}
html[data-bg-tone="dark"] .ms-list .srch input:focus{background:rgba(255,255,255,.2)}
html[data-bg-tone="dark"] .mdl,html[data-bg-tone="dark"] .dlg,html[data-bg-tone="dark"] .menu,html[data-bg-tone="dark"] .thm,html[data-bg-tone="dark"] .modal,
html[data-bg-tone="dark"] .drawer,html[data-bg-tone="dark"] .callbar,html[data-bg-tone="dark"] .callw,html[data-bg-tone="dark"] .modal-box,html[data-bg-tone="dark"] .ms-thm,
html[data-bg-tone="dark"] .ms-ctx,html[data-bg-tone="dark"] .mfw-dd,html[data-bg-tone="dark"] .qr,html[data-bg-tone="dark"] .ms-emo,html[data-bg-tone="dark"] .sb-panel{
  background:rgba(36,36,40,.97);color:var(--text);--panel:#242428;--tg-panel:#242428}
html[data-bg-tone="dark"] #sysbar{background:rgba(28,28,32,.7)}
/* меню «⋯» в правой карточке и меню настроек списка — непрозрачные: за ними не должен просвечивать список */
html[data-glass] .ms-more,html[data-glass] .ms-nav .gm{background:rgba(255,255,255,.98);--tg-panel:#fff;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
html[data-bg-tone="dark"] .ms-more,html[data-bg-tone="dark"] .ms-nav .gm{background:rgba(36,36,40,.98);--tg-panel:#242428;color:var(--text)}
html[data-bg-tone="dark"] #sysbar .sb-c{background:rgba(255,255,255,.12);color:var(--muted);box-shadow:none}
html[data-bg-tone="dark"] #sysbar .sb-t:hover{background:rgba(255,255,255,.12)}
html[data-bg-tone="dark"] .hs-bgt button{background:rgba(60,60,66,.8);color:var(--text)}
html[data-bg-tone="dark"] .hs-bgt button.on{box-shadow:0 0 0 2px #1c1c1e,0 0 0 4px var(--accent,#3b82f6)}
html[data-bg-tone="dark"] .ms-info h4,html[data-bg-tone="dark"] .ms-info a{color:var(--accent-text)}
/* теги и статусы на тёмном стекле: светлый текст на цветной полупрозрачной плашке (тёмные цвета светлой темы тут не читались) */
html[data-bg-tone="dark"],html[data-bg-tone="dark"] body.mes{--yellow-soft:rgba(255,214,10,.22);--yellow-text:#ffd60a;--ok-soft:rgba(48,209,88,.24);--warn-soft:rgba(255,159,10,.24);--danger-soft:rgba(255,69,58,.28);--orange-bg:rgba(255,159,10,.24)}
html[data-bg-tone="dark"] .lbl{background:rgba(255,214,10,.22);color:#ffd60a}
html[data-bg-tone="dark"] .lbl.calc,html[data-bg-tone="dark"] .lbl.agree{background:rgba(48,209,88,.24);color:#5df08a}
html[data-bg-tone="dark"] .lbl.erp{background:rgba(96,165,250,.26);color:#bfdbfe}
html[data-bg-tone="dark"] .lbl.lost{background:rgba(255,69,58,.3);color:#ff9d96}
html[data-bg-tone="dark"] .lbl.demo{background:rgba(255,255,255,.18);color:#fff}
html[data-bg-tone="dark"] .mt .hint,html[data-bg-tone="dark"] .mt .src .hint{color:var(--muted)}
/* чат сотрудников на тёмном стекле: левая полоса разделов, плашка клиента, поле ввода */
html[data-glass][data-bg-tone="dark"] .rl{--tg-rail:rgba(28,28,32,.5);color:rgba(245,245,247,.62)}
html[data-glass][data-bg-tone="dark"] .rl .rf:hover{background:rgba(255,255,255,.08);color:#fff}
html[data-glass][data-bg-tone="dark"] .rl .rf.on{background:rgba(59,130,246,.22);color:#8ab4ff}
html[data-bg-tone="dark"] .clctx{background:rgba(255,214,10,.12);color:#ffe27a;border-bottom-color:rgba(255,214,10,.2)}
/* ═══ «Glassy Black»: тёмное стекло Glassy (theme.js ставит html[data-glass][data-glass-black] и тёмный тон) — дымчато-чёрные
   панели гуще и темнее, чем у адаптивного тона, акцент — тот же синий, приподнятый для чёрного. Макет: docs/mockups/glassy-black-messenger.html ═══ */
html[data-glass][data-glass-black][data-bg-tone="dark"],html[data-glass][data-glass-black][data-bg-tone="dark"] body.mes{
  --card:rgba(24,24,28,.62);--panel:rgba(24,24,28,.64);--panel-2:rgba(255,255,255,.06);--fill:rgba(255,255,255,.1);--soft:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.18);--line2:rgba(255,255,255,.18);
  --text:#f5f5f7;--muted:#a1a1a6;--hint:#8e8e93;--faint:rgba(245,245,247,.36);
  --glass-border:rgba(255,255,255,.09);
  --glass-shadow:0 10px 40px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07);
  --accent:#3b82f6;--accent-soft:rgba(59,130,246,.18);--accent-text:#8ab4ff;--info:#8ab4ff;--rust:#8ab4ff;--blue:#8ab4ff;--orange:#3b82f6;--orange-bg:rgba(59,130,246,.18);
  --tg-panel:rgba(24,24,28,.64);--tg-in:rgba(46,46,52,.88);--tg-out:rgba(37,99,235,.92);--tg-blue:#3b82f6;--tg-blue-text:#8ab4ff;
  --tg-sec:#a1a1a6;--tg-time-in:#8e8e93;--tg-time-out:rgba(255,255,255,.72);--tg-hover:rgba(255,255,255,.08);--tg-line:rgba(255,255,255,.1);--tg-input:rgba(40,40,46,.88);
}
html[data-glass-black] header,html[data-glass-black] .side,html[data-glass-black] .mx-side,html[data-glass-black] .layout .sidebar,
html[data-glass-black] .ms-list .ms-head,html[data-glass-black] .ms-list .items,html[data-glass-black] .ms-info section,html[data-glass-black] .ms-info .top,
html[data-glass-black] #sysbar{background:rgba(24,24,28,.62)}
html[data-glass-black] .ms-chat{background:rgba(14,14,17,.42)}
html[data-glass-black] .ms-top{background:rgba(30,30,35,.72)}
html[data-glass-black] .ms-in{background:rgba(40,40,46,.88)}
html[data-glass-black] .mdl,html[data-glass-black] .dlg,html[data-glass-black] .menu,html[data-glass-black] .thm,html[data-glass-black] .modal,
html[data-glass-black] .drawer,html[data-glass-black] .modal-box,html[data-glass-black] .ms-thm,html[data-glass-black] .ms-ctx,html[data-glass-black] .sb-panel{background:rgba(22,22,26,.97)}
html[data-glass-black] .layout nav a.active{background:rgba(255,255,255,.12)}
html[data-glass-black] .mt.on{box-shadow:0 6px 20px rgba(37,99,235,.35)}
/* кромки островов в Black — тонкие дымчатые, а не светлые обводки светлой Glassy */
html[data-glass][data-glass-black] .layout .sidebar,html[data-glass][data-glass-black] .ms-fold,html[data-glass][data-glass-black] .ms-chat,
html[data-glass][data-glass-black] .ms-top,html[data-glass][data-glass-black] .ms-list .ms-head,html[data-glass][data-glass-black] .ms-list .items,
html[data-glass][data-glass-black] .ms-info section,html[data-glass][data-glass-black] .ms-info .top,html[data-glass][data-glass-black] .ms-in,
html[data-glass][data-glass-black] #sysbar,html.menu-top[data-glass][data-glass-black] #sysbar,html[data-glass][data-glass-black] header,
html[data-glass][data-glass-black] .card,html[data-glass][data-glass-black] .kpi,html[data-glass][data-glass-black] .sec{
  box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 0 .5px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.06)}
html[data-glass][data-glass-black] .mdl,html[data-glass][data-glass-black] .dlg,html[data-glass][data-glass-black] .menu,html[data-glass][data-glass-black] .modal,
html[data-glass][data-glass-black] .ms-thm,html[data-glass][data-glass-black] .ms-ctx,html[data-glass][data-glass-black] .sb-panel{
  box-shadow:0 24px 64px rgba(0,0,0,.65),inset 0 0 0 .5px rgba(255,255,255,.1)}
html[data-glass][data-glass-black] #sysbar .sb-c{background:rgba(255,255,255,.07);box-shadow:none}
html[data-glass][data-glass-black][data-bg-tone="dark"] .rl{--tg-rail:rgba(24,24,28,.62)}
html[data-glass] .ms-in::after{display:none}

/* ═══ Шрифт Inter в Glassy: свой файл (InterVariable.woff2, SIL OFL — Inter-LICENSE.txt), везде вместо SF/Segoe и Roboto ═══ */
@font-face{font-family:"Inter";src:url("/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
html[data-glass],html[data-glass] body.mes{
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
html[data-glass] body{font-family:var(--font);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;font-feature-settings:"cv05","cv11"}
html[data-glass] h1,html[data-glass] h2,html[data-glass] h3{letter-spacing:-.02em}
/* мессенджер и чат: у них свой шрифт «как в Telegram» (Roboto) — в стекле тоже Inter */
html[data-glass] .ms,html[data-glass] .ms-info h4,html[data-glass] .ms-ctx,html[data-glass] .mt .un,html[data-glass] .ms-f b,
html[data-glass] .ls-hd h1,html[data-glass] .ms button,html[data-glass] .ms input,html[data-glass] .ms textarea{font-family:var(--font)}

/* ═════════ Apple-polish для «Glassy» (скилл apple-design): отклик на нажатие, пружины, типографика, доступность. Фон не трогаем ═════════ */
html[data-glass] :is(.btn,.chip,.seg button,nav a,.side a,.pc,.sec){ transition: transform .35s cubic-bezier(.32,.72,0,1), background-color .2s, box-shadow .3s, color .2s, filter .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html[data-glass] :is(.btn,.chip,.seg button):active{ transform: scale(.96); transition-duration: .08s; }   /* отклик на самом нажатии, мгновенный */
html[data-glass] :is(nav a,.side a):active{ transform: scale(.98); transition-duration: .08s; }
html[data-glass] :is(.pc,.sec):active{ transform: scale(.985); transition-duration: .08s; }
/* типографика: крупное плотнее, мелкое чуть шире; цифры одной ширины */
html[data-glass]{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[data-glass] :is(h1,h2){ letter-spacing: -.022em; line-height: 1.15; }
html[data-glass] h3{ letter-spacing: -.01em; }
html[data-glass] :is(small,label,.muted,.hint,th){ letter-spacing: .01em; }
html[data-glass] :is(td,th,.tile b,.kpi b,.big,.num,.money,input.money){ font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce){
  html[data-glass] *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html[data-glass] :is(.btn,.chip,.seg button,nav a,.side a,.pc,.sec):active{ transform: none; }
}
@media (prefers-reduced-transparency: reduce){
  html[data-glass]{ --card: rgba(255,255,255,.94); --panel: rgba(255,255,255,.94); --panel-2: rgba(245,245,247,.94); --tg-panel: rgba(255,255,255,.94); }
  html[data-glass] *{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more){
  html[data-glass]{ --line: rgba(0,0,0,.45); --line2: rgba(0,0,0,.55); --line-2: rgba(0,0,0,.55); --muted: #1f2937; --hint: #374151; }
}