/* ===================================================================================== Sarketch — светлая «стеклянная» тема (03.10.2026) Включается атрибутом data-theme="glass" на (кнопка слева от колокольчика, пока только у Администратора — themeBtnHTML/toggleTheme в app.js; выбор хранится в localStorage 'sk-theme', ставится до отрисовки скриптом в index.html). Тёмная тема в style.css не тронута: всё ниже срабатывает только при data-theme="glass". Устройство файла: 1. Переменные темы — цвета :root перекрашены в светлые (большинство правил style.css берут цвета из них). 2. Автоперевод — правила style.css с жёстко заданными цветами, перекрашенные скриптом. Префикс :where(html[data-theme="glass"]) не добавляет специфичности, поэтому каждое правило перебивает только свой оригинал (файл подключён после style.css), а более точные правила компонентов продолжают работать как раньше. 3. Стекло — ручной слой: сайдбар, панели, кнопки, поля, меню, таймер, окна. Статусы задач (Готово / В процессе / Ожидание / Согласование) — светлые аналоги цветов тёмной темы, кнопка «Утверждено» — в цветах «Готово». Шрифт чуть крупнее тёмной темы (font-size-adjust). ===================================================================================== */ /* ---------- 1. Переменные темы ---------- */ html[data-theme="glass"] { color-scheme: light; --bg: #ebeae6; /* поверхности непрозрачные: на них держатся липкие шапки и колонки таблиц, меню и подложки, под которыми прокручивается содержимое (в тёмной теме они тоже сплошные). «Стекло» — полупрозрачность и размытие — задаётся явно в разделе 3 */ --bg-sidebar: #f3f2ef; --bg-panel: #f7f6f3; --bg-hover: #eeede9; --bg-input: #fdfdfc; --bg-card: #fbfaf8; --border: rgba(28,28,30,.09); --border-light: rgba(28,28,30,.15); --text: #2c2c30; --text-bright: #141416; --text-dim: #5f5f66; --accent: #a8873f; --accent-hover: #8f7232; --green-bg: rgba(120,228,176,.36); --green-fg: #17703f; --red: #d9473f; --tag-gray-bg: rgba(255,255,255,.66); --tag-gray-fg: #45474d; --tag-brown-bg: rgba(214,166,116,.42); --tag-brown-fg: #7a4a1c; --tag-orange-bg: rgba(255,190,110,.5); --tag-orange-fg: #8a4a00; --tag-yellow-bg: rgba(240,214,92,.5); --tag-yellow-fg: #6b5600; --tag-green-bg: rgba(120,228,176,.45); --tag-green-fg: #116b44; --tag-blue-bg: rgba(140,168,255,.42); --tag-blue-fg: #1d4fa8; --tag-purple-bg: rgba(188,160,255,.45); --tag-purple-fg: #5a36b0; --tag-pink-bg: rgba(255,160,200,.42); --tag-pink-fg: #9a2a62; --tag-red-bg: rgba(255,135,148,.42); --tag-red-fg: #a8222e; --tag-teal-bg: rgba(110,214,205,.45); --tag-teal-fg: #0f6b62; --tag-indigo-bg: rgba(150,160,255,.42); --tag-indigo-fg: #333ea8; --tag-lime-bg: rgba(180,220,120,.45); --tag-lime-fg: #46610f; --tag-coral-bg: rgba(255,150,128,.42); --tag-coral-fg: #a03a24; --tag-slate-bg: rgba(150,176,204,.42); --tag-slate-fg: #34506b; --tag-plum-bg: rgba(220,150,215,.42); --tag-plum-fg: #7e2c78; --project-panel: #eef7f1; --brand-sans: 'Onest', Inter, 'Helvetica Neue', Arial, sans-serif; --brand-serif: 'Onest', Inter, 'Helvetica Neue', Arial, sans-serif; /* стекло */ --gl-bg: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.44)); --gl-solid: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88)); --gl-border: rgba(255,255,255,.78); --gl-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(28,28,30,.04), 0 10px 26px -14px rgba(28,28,30,.2); --gl-pop: 0 18px 44px -14px rgba(28,28,30,.32), 0 2px 6px rgba(28,28,30,.06); --gl-blur: blur(22px) saturate(160%); } /* ===== Автоперевод жёстко заданных цветов тёмной темы (генерируется) ===== */ :where(html[data-theme="glass"]) .sb-logo { background: rgba(30,30,40,0.45); color: #141417; } :where(html[data-theme="glass"]) .sb-item.active { background: linear-gradient(90deg, rgba(188,160,98,0.325), rgba(188,160,98,0.125)); } :where(html[data-theme="glass"]) .sb-item.active:hover { background: linear-gradient(90deg, rgba(188,160,98,0.425), rgba(188,160,98,0.175)); } :where(html[data-theme="glass"]) .sb-install:hover { background: rgba(188,160,98,0.15); } :where(html[data-theme="glass"]) select:hover, :where(html[data-theme="glass"]) .filter-select:hover { box-shadow: 0 0 0 1px rgba(188,160,98,0.338) inset; } :where(html[data-theme="glass"]) .status-menu { box-shadow: 0 10px 28px rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) table.nt tr:hover td { background: rgba(28,28,30,0.028); } :where(html[data-theme="glass"]) table.nt tr.tr-click:hover td { background: rgba(28,28,30,0.056); } :where(html[data-theme="glass"]) .cal-cell.cal-pick:hover { background: rgba(28,28,30,0.056); } :where(html[data-theme="glass"]) .cal-day-row:hover { background: rgba(28,28,30,0.07); } :where(html[data-theme="glass"]) .cal-day-row.hol { color: #8f1a1a; } :where(html[data-theme="glass"]) .cal-day-row.late { color: #8f1a1a; } :where(html[data-theme="glass"]) .cal-ev-task { background: rgba(90,140,220,0.225); } :where(html[data-theme="glass"]) .cal-ev-task.late { background: rgba(235,87,87,0.225); } :where(html[data-theme="glass"]) .cal-cell.has-hol { background: rgba(235,87,87,0.125); } :where(html[data-theme="glass"]) .cal-hol { color: #8f1a1a; } :where(html[data-theme="glass"]) .pext-row { background: rgba(28,28,30,0.028); } :where(html[data-theme="glass"]) .chat-dot { background: #cecece; } :where(html[data-theme="glass"]) .chat-acts { box-shadow: 0 2px 8px rgba(28,28,30,0.14); } :where(html[data-theme="glass"]) .chat-text .mention { background: rgba(200,169,110,0.15); } :where(html[data-theme="glass"]) .chat-send { color: #141417; } html:where([data-theme="glass"]).tv-mode tr:focus td, html:where([data-theme="glass"]).tv-mode .card:focus { background: rgba(188,160,98,0.15); } :where(html[data-theme="glass"]) .ts-panel.ts-top { box-shadow: 0 0 0 1px rgba(188,160,98,0.262); } :where(html[data-theme="glass"]) .ts-top-note { background: rgba(188,160,98,0.125); } :where(html[data-theme="glass"]) .ts-cd { background: rgba(28,28,30,0.028); } :where(html[data-theme="glass"]) .ts-bar { background: rgba(28,28,30,0.084); } :where(html[data-theme="glass"]) .ts-cell:focus { box-shadow: 0 0 0 2px rgba(188,160,98,0.188); } :where(html[data-theme="glass"]) .ts-cell.saved { box-shadow: 0 0 0 2px rgba(111,207,151,0.188); } :where(html[data-theme="glass"]) .ts-add-it:hover { background: rgba(188,160,98,0.1); } :where(html[data-theme="glass"]) .ts-lock-note { background: rgba(28,28,30,0.056); } :where(html[data-theme="glass"]) .ts-flags { background: rgba(224,164,88,0.088); } :where(html[data-theme="glass"]) table.nt.tt-tbl td.tt-lo.tt-empty { background: rgba(235,87,87,0.175); } :where(html[data-theme="glass"]) table.nt.tt-tbl td.tt-c:hover { background: rgba(188,160,98,0.125); } :where(html[data-theme="glass"]) .ovts-c { background: rgba(28,28,30,0.042); } :where(html[data-theme="glass"]) .ovts-c.ovts-wk { background: rgba(188,160,98,0.1); } :where(html[data-theme="glass"]) .ovts-c.tt-lo.tt-empty { background: rgba(235,87,87,0.175); } :where(html[data-theme="glass"]) .est-table tr.est-grp-row > td { background: rgba(188,160,98,0.15); } :where(html[data-theme="glass"]) .est-table tr.est-grp-row > td.est-stick { background: #dfdfdf; } :where(html[data-theme="glass"]) .ts-dot i { background: #dbdbdb; } :where(html[data-theme="glass"]) .ts-dot.lo.now i { background: #d3d3d3; } :where(html[data-theme="glass"]) .tdrag-ghost { box-shadow: 0 14px 30px rgba(28,28,30,0.24); } :where(html[data-theme="glass"]) .board-col.drop-on { background: rgba(188,160,98,0.125); box-shadow: 0 0 0 4px rgba(188,160,98,0.045); } :where(html[data-theme="glass"]) .board-proj.zone-head:hover { background: rgba(188,160,98,0.1); } :where(html[data-theme="glass"]) .board-proj.board-proj-over { background: rgba(188,160,98,0.15); } :where(html[data-theme="glass"]) .bs-head:hover { background: rgba(188,160,98,0.1); } :where(html[data-theme="glass"]) .ai-fab { background-color: #f1f1f1; box-shadow: inset 0 .3rem .9rem rgba(255,255,255,.3), inset 0 -.1rem .3rem rgba(28,28,30,0.28), inset 0 -.4rem .9rem rgba(255,255,255,.5), 0 1.6rem 1.6rem rgba(28,28,30,0.12), 0 .6rem .6rem -.4rem rgba(28,28,30,0.32); } :where(html[data-theme="glass"]) .ai-fab .wrap { color: rgba(20,20,23,0.85); } :where(html[data-theme="glass"]) .ai-fab .wrap::before { background-color: rgba(28,28,30,0.12); } :where(html[data-theme="glass"]) .ai-fab .wrap::after { background: linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(30,30,40,0) 50%, rgba(30,30,40,0) 100%); } :where(html[data-theme="glass"]) .ai-fab:hover { box-shadow: inset 0 .3rem .5rem rgba(255,255,255,.4), inset 0 -.1rem .3rem rgba(28,28,30,0.28), inset 0 -.4rem .9rem rgba(255,255,255,.7), 0 1.6rem 1.6rem rgba(28,28,30,0.12), 0 .6rem .6rem -.4rem rgba(28,28,30,0.32); } :where(html[data-theme="glass"]) .ai-fab:active { box-shadow: inset 0 .3rem .5rem rgba(255,255,255,.5), inset 0 -.1rem .3rem rgba(28,28,30,0.32), inset 0 -.4rem .9rem rgba(255,255,255,.4), 0 1.6rem 1.6rem rgba(28,28,30,0.12), 0 .6rem .6rem -.4rem rgba(28,28,30,0.32); } :where(html[data-theme="glass"]) .ai-fab.on { background-color: #efefef; } :where(html[data-theme="glass"]) .ai-fab.ai-orb.on { filter: drop-shadow(0 0 12px rgba(150,120,255,0.375)); } :where(html[data-theme="glass"]) .ai-fab.ai-orb-fallback { box-shadow: 0 8px 24px rgba(28,28,30,0.18); } :where(html[data-theme="glass"]) .ai-panel { box-shadow: 0 18px 50px rgba(28,28,30,0.22); } :where(html[data-theme="glass"]) .ai-head { background: linear-gradient(180deg, rgba(188,160,98,0.25), rgba(188,160,98,0.075)); } :where(html[data-theme="glass"]) .ai-msg.user { background: rgba(188,160,98,0.225); } :where(html[data-theme="glass"]) .att-zone.drop-on { background: rgba(188,160,98,0.1); } :where(html[data-theme="glass"]) .lightbox { background: rgba(30,30,40,0.383); } :where(html[data-theme="glass"]) .lightbox button { color: #141417; } :where(html[data-theme="glass"]) .tu-btn:hover { background: rgba(188,160,98,0.188); } :where(html[data-theme="glass"]) .card-men { background: rgba(214,186,124,0.088); } :where(html[data-theme="glass"]) .row-men td { background: rgba(214,186,124,0.088); } :where(html[data-theme="glass"]) .row-picked td { background: rgba(188,160,98,0.1); } :where(html[data-theme="glass"]) .zone-drop { background: rgba(188,160,98,0.15); } :where(html[data-theme="glass"]) .bulk-bar { box-shadow: 0 -6px 24px rgba(28,28,30,0.16); } :where(html[data-theme="glass"]) .palette-back { background: rgba(30,30,40,0.248); } :where(html[data-theme="glass"]) .palette { box-shadow: 0 24px 70px rgba(28,28,30,0.22); } :where(html[data-theme="glass"]) .pl-item:hover, :where(html[data-theme="glass"]) .pl-item.active { background: rgba(188,160,98,0.15); } :where(html[data-theme="glass"]) .timer-fab { box-shadow: 0 2px 10px rgba(28,28,30,0.12); } :where(html[data-theme="glass"]) .timer-fab.running { background: linear-gradient(180deg, rgba(225,234,244,0.95), rgba(225,234,244,0.75)); } :where(html[data-theme="glass"]) .ai-act { background: rgba(188,160,98,0.125); } :where(html[data-theme="glass"]) .ai-act-ok { color: #387038; } :where(html[data-theme="glass"]) .ai-file { background: rgba(188,160,98,0.15); } :where(html[data-theme="glass"]) .ai2 .ai-head { background: linear-gradient(180deg, rgba(188,160,98,0.175), rgba(188,160,98,0.037)); } :where(html[data-theme="glass"]) .ai-orb-mini:not(.painted) { filter: drop-shadow(0 0 2px rgba(150,120,255,0.413)); } :where(html[data-theme="glass"]) .ai-mu { background: rgba(188,160,98,0.25); } :where(html[data-theme="glass"]) .ai-lk.t { color: #145194; background: rgba(109,179,242,0.125); } :where(html[data-theme="glass"]) .ai-lk.p { background: rgba(188,160,98,0.163); } :where(html[data-theme="glass"]) .ai-lk.e { color: #3f1c8d; background: rgba(143,122,187,0.188); } :where(html[data-theme="glass"]) .ai-ch-b { background: rgba(28,28,30,0.07); } :where(html[data-theme="glass"]) .ai-tbl th { background: rgba(28,28,30,0.028); } :where(html[data-theme="glass"]) .ai-ac { background: linear-gradient(180deg, rgba(232,146,47,0.125), rgba(232,146,47,0.037)); } :where(html[data-theme="glass"]) .ai-ac.done { background: rgba(111,207,151,0.075); } :where(html[data-theme="glass"]) .ai-ac-h { color: #9b580d; } :where(html[data-theme="glass"]) .ai-ac.done .ai-ac-h { color: #2a7e4d; } :where(html[data-theme="glass"]) .ai-ac-ok { color: #2a7e4d; } :where(html[data-theme="glass"]) .ai-bc.o b { color: #9b580d; } :where(html[data-theme="glass"]) .ai-bc.g b { color: #2a7e4d; } :where(html[data-theme="glass"]) .ai-bc.b b { color: #145194; } :where(html[data-theme="glass"]) .ai-chip2.tl { background: rgba(188,160,98,0.1); } :where(html[data-theme="glass"]) .ai-li-warn { color: #9b580d; } :where(html[data-theme="glass"]) .ai-cx { background: rgba(188,160,98,0.2); } :where(html[data-theme="glass"]) .ai-cx button:hover { background: rgba(30,30,40,0.068); } :where(html[data-theme="glass"]) .ai-cx.f { background: rgba(109,179,242,0.175); color: #145194; } :where(html[data-theme="glass"]) .ai-cmd { box-shadow: 0 10px 30px rgba(28,28,30,0.18); } :where(html[data-theme="glass"]) .viewas-btn { box-shadow: 0 2px 10px rgba(28,28,30,0.12); } :where(html[data-theme="glass"]) .viewas-btn.on { background: rgba(188,160,98,0.275); } :where(html[data-theme="glass"]) .proto-card-head { background: linear-gradient(180deg, rgba(91,147,214,0.275), rgba(91,147,214,0.1)); } :where(html[data-theme="glass"]) .proto-card-head .ic-svg { color: #145194; } :where(html[data-theme="glass"]) .proto-card-head .proto-card-name { color: #104f98; } :where(html[data-theme="glass"]) .proto-card-head .proto-card-name:hover { color: #141417; } :where(html[data-theme="glass"]) .alert-back { background: rgba(30,30,40,0.248); } :where(html[data-theme="glass"]) .alert-box { box-shadow: 0 18px 50px rgba(28,28,30,0.22); } :where(html[data-theme="glass"]) .alert-act { background: rgba(188,160,98,0.175); } :where(html[data-theme="glass"]) .alert-act:hover { background: rgba(188,160,98,0.3); } :where(html[data-theme="glass"]) .alert-ok:focus-visible, :where(html[data-theme="glass"]) .alert-act:focus-visible { box-shadow: 0 0 0 2px rgba(188,160,98,0.413) inset; } :where(html[data-theme="glass"]) .viewas-panel { box-shadow: 0 8px 26px rgba(28,28,30,0.18); } :where(html[data-theme="glass"]) .notif-bell { color: #141417; box-shadow: 0 2px 10px rgba(28,28,30,0.12); } :where(html[data-theme="glass"]) .theme-btn { color: #141417; box-shadow: 0 2px 10px rgba(28,28,30,0.12); } :where(html[data-theme="glass"]) .notif-panel { box-shadow: 0 6px 24px rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) .notif-item.unread { background: rgba(188,160,98,0.1); } :where(html[data-theme="glass"]) .online-bar { box-shadow: 0 2px 10px rgba(28,28,30,0.12); } :where(html[data-theme="glass"]) .online-panel { box-shadow: 0 6px 24px rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) table.gsheet tr:nth-child(odd) td { background: rgba(28,28,30,0.021); } :where(html[data-theme="glass"]) .wk-head { color: #141417; } :where(html[data-theme="glass"]) .wk-sub { background: rgba(28,28,30,0.028); } :where(html[data-theme="glass"]) .gs-proj td { background: rgba(28,28,30,0.07); } :where(html[data-theme="glass"]) .c-time { background: rgba(188,160,98,0.15); } :where(html[data-theme="glass"]) .c-time.live { color: #1c588d; background: rgba(110,160,210,0.2); } :where(html[data-theme="glass"]) .sub-cnt.all-done { color: #387038; } :where(html[data-theme="glass"]) .proc-box { background: rgba(28,28,30,0.028); } :where(html[data-theme="glass"]) table.nt.kp-table tr.kp-late > td:not(.kp-pos) { background: rgba(240,120,100,0.075); } :where(html[data-theme="glass"]) #hours-body table.nt tr:not(.gs-proj):nth-child(even) td { background: rgba(28,28,30,0.056); } :where(html[data-theme="glass"]) #hours-body table.nt tr:hover td { background: rgba(28,28,30,0.12) !important; } :where(html[data-theme="glass"]) .cal { box-shadow: 0 2px 14px rgba(28,28,30,0.1); } :where(html[data-theme="glass"]) .cal-dow > div { background: rgba(28,28,30,0.028); } :where(html[data-theme="glass"]) .cal-body > .cal-cell:nth-child(7n+6), :where(html[data-theme="glass"]) .cal-body > .cal-cell:nth-child(7n) { background: rgba(28,28,30,0.021); } :where(html[data-theme="glass"]) .cal-cell.out { background: rgba(30,30,40,0.081); } :where(html[data-theme="glass"]) .cal-cell.today .cal-daynum { box-shadow: 0 0 0 3px rgba(188,160,98,0.135); } :where(html[data-theme="glass"]) .cal-cell.has-bday { background: radial-gradient(60% 70% at 88% 12%, rgba(179,148,230,0.2), transparent 70%), linear-gradient(160deg, rgba(188,160,98,0.2), rgba(188,160,98,0.05)); } :where(html[data-theme="glass"]) .cal-bday { box-shadow: 0 3px 10px rgba(28,28,30,0.14); } :where(html[data-theme="glass"]) .bday-strip { background: linear-gradient(120deg, rgba(188,160,98,0.15), rgba(179,148,230,0.1) 60%, transparent); } :where(html[data-theme="glass"]) .bday-chip.now { box-shadow: 0 0 0 2px rgba(188,160,98,0.135); } :where(html[data-theme="glass"]) .panel.bluish { background: #dfdfdf; } :where(html[data-theme="glass"]) .panel.bluish .grp-row td, :where(html[data-theme="glass"]) .panel.greenish .grp-row td { background: rgba(28,28,30,0.056); } :where(html[data-theme="glass"]) .panel > h2.zone-head:hover { background: rgba(188,160,98,0.1); } :where(html[data-theme="glass"]) .rp-week.rp-cur { background: linear-gradient(180deg, rgba(90,170,110,0.475), rgba(90,170,110,0.225)); color: #2d7b43; box-shadow: 0 0 0 1px rgba(120,200,140,0.262), 0 4px 16px rgba(90,170,110,0.135); } :where(html[data-theme="glass"]) .rp-week.rp-prev { background: linear-gradient(180deg, rgba(200,170,60,0.375), rgba(200,170,60,0.175)); color: #8a721f; } :where(html[data-theme="glass"]) .rp-week-pick:hover { box-shadow: 0 0 0 1px rgba(220,190,90,0.375); } :where(html[data-theme="glass"]) .rp-table tr.rp-pm-row td { background: rgba(188,160,98,0.088); } :where(html[data-theme="glass"]) .rp-pm-tag { background: rgba(188,160,98,0.225); } :where(html[data-theme="glass"]) .rp-task-extra { color: #424245; } :where(html[data-theme="glass"]) .checklist-head:hover { background: rgba(188,160,98,0.1); } :where(html[data-theme="glass"]) .cl-table tr.cl-sub td { background: rgba(28,28,30,0.028); } :where(html[data-theme="glass"]) .jr-proto { background: rgba(91,147,214,0.1); } :where(html[data-theme="glass"]) .jr-proto-name { color: #104f98; } :where(html[data-theme="glass"]) .jr-proto-name:hover { color: #141417; } :where(html[data-theme="glass"]) .cl-urgent { background: rgba(235,87,87,0.075); } :where(html[data-theme="glass"]) .est-table tr.est-due td + td, :where(html[data-theme="glass"]) .est-table tr.est-paid td + td { border-left-color: rgba(28,28,30,0.08); } :where(html[data-theme="glass"]) .est-table tr.est-due > td, :where(html[data-theme="glass"]) .est-table tr.est-paid > td { color: #141417; } :where(html[data-theme="glass"]) .est-table tr.est-due .row-link, :where(html[data-theme="glass"]) .est-table tr.est-paid .row-link { color: #141417; } :where(html[data-theme="glass"]) .est-table tr.est-due .muted, :where(html[data-theme="glass"]) .est-table tr.est-paid .muted, :where(html[data-theme="glass"]) .est-table tr.est-due .est-n, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-n, :where(html[data-theme="glass"]) .est-table tr.est-due .est-sub, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-sub { color: rgba(20,20,23,0.78); } :where(html[data-theme="glass"]) .est-table tr.est-due .cell-txt, :where(html[data-theme="glass"]) .est-table tr.est-paid .cell-txt, :where(html[data-theme="glass"]) .est-table tr.est-due .cell-sel, :where(html[data-theme="glass"]) .est-table tr.est-paid .cell-sel { color: #141417; } :where(html[data-theme="glass"]) .est-table tr.est-due .cell-txt::placeholder, :where(html[data-theme="glass"]) .est-table tr.est-paid .cell-txt::placeholder { color: rgba(20,20,23,0.6); } :where(html[data-theme="glass"]) .est-table tr.est-due .cell-txt:hover, :where(html[data-theme="glass"]) .est-table tr.est-paid .cell-txt:hover, :where(html[data-theme="glass"]) .est-table tr.est-due .cell-sel:hover, :where(html[data-theme="glass"]) .est-table tr.est-paid .cell-sel:hover { background: rgba(30,30,40,0.099); border-color: rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) .est-table tr.est-due .cell-txt:focus, :where(html[data-theme="glass"]) .est-table tr.est-paid .cell-txt:focus, :where(html[data-theme="glass"]) .est-table tr.est-due .cell-sel:focus, :where(html[data-theme="glass"]) .est-table tr.est-paid .cell-sel:focus { background: rgba(30,30,40,0.18); color: #141417; border-color: rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) .est-table tr.est-due .est-rest-due, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-rest-ok { color: #141417; } :where(html[data-theme="glass"]) .con-approved td { background: rgba(111,207,151,0.1); } :where(html[data-theme="glass"]) .stage-menu { box-shadow: 0 8px 26px rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) .sec-design > h2.zone-head { background: linear-gradient(180deg, rgba(60,130,90,0.425), rgba(60,130,90,0.175)); } :where(html[data-theme="glass"]) .sec-build > h2.zone-head { background: linear-gradient(180deg, rgba(60,110,170,0.425), rgba(60,110,170,0.175)); } :where(html[data-theme="glass"]) .sec-done > h2.zone-head { background: linear-gradient(180deg, rgba(160,135,70,0.4), rgba(160,135,70,0.15)); } :where(html[data-theme="glass"]) .sec-design .proj-sec-title, :where(html[data-theme="glass"]) .sec-design .proj-sec-head .zone-chevron, :where(html[data-theme="glass"]) .sec-design .proj-sec-head .ic-svg { color: #288047; } :where(html[data-theme="glass"]) .sec-design .proj-sec-cnt { background: rgba(110,190,140,0.312); color: #238644; } :where(html[data-theme="glass"]) .sec-design > h2.zone-head:hover { background: rgba(110,190,140,0.125); } :where(html[data-theme="glass"]) .sec-build .proj-sec-title, :where(html[data-theme="glass"]) .sec-build .proj-sec-head .zone-chevron, :where(html[data-theme="glass"]) .sec-build .proj-sec-head .ic-svg { color: #145194; } :where(html[data-theme="glass"]) .sec-build .proj-sec-cnt { background: rgba(110,165,225,0.312); color: #105298; } :where(html[data-theme="glass"]) .sec-build > h2.zone-head:hover { background: rgba(110,165,225,0.125); } :where(html[data-theme="glass"]) .sec-done .proj-sec-cnt { background: rgba(188,160,98,0.312); color: #826926; } :where(html[data-theme="glass"]) .sec-done > h2.zone-head:hover { background: rgba(188,160,98,0.125); } :where(html[data-theme="glass"]) .crop-frame { background: rgba(30,30,40,0.45); } :where(html[data-theme="glass"]) .av-crop-wrap { background: rgba(30,30,40,0.45); } :where(html[data-theme="glass"]) .av-crop-mask { box-shadow: 0 0 0 999px rgba(28,28,30,0.22); } :where(html[data-theme="glass"]) .modal-back { background: rgba(30,30,40,0.27); } :where(html[data-theme="glass"]) .modal-back.modal-locked { background: rgba(30,30,40,0.369); } :where(html[data-theme="glass"]) .modal { box-shadow: 0 20px 60px rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) .grp-sub td { background: rgba(28,28,30,0.042); } :where(html[data-theme="glass"]) .stat.stat-on { background: rgba(200,70,70,0.15); } :where(html[data-theme="glass"]) .toast { box-shadow: 0 8px 30px rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) .pop-all { color: #0144a7; box-shadow: 0 8px 30px rgba(28,28,30,0.18); } :where(html[data-theme="glass"]) .pop-all:hover { background: var(--bg-hover, #e2e2e2); } :where(html[data-theme="glass"]) .pop-card { box-shadow: 0 10px 34px rgba(28,28,30,0.22); } :where(html[data-theme="glass"]) .pop-ava-logo { background: rgba(188,160,98,0.2); } :where(html[data-theme="glass"]) .pop-text::before { color: #0144a7; } :where(html[data-theme="glass"]) .pop-x:hover { background: rgba(28,28,30,0.084); } :where(html[data-theme="glass"]) .corp-table tr.corp-grp td { background: rgba(188,160,98,0.213); } :where(html[data-theme="glass"]) .corp-table tr.corp-grp:hover td { background: rgba(188,160,98,0.3); } :where(html[data-theme="glass"]) .corp-row-open td { background: rgba(28,28,30,0.028); } :where(html[data-theme="glass"]) .corp-table tr.corp-open-row td { background: rgba(28,28,30,0.028); } :where(html[data-theme="glass"]) .corp-bar { background: rgba(28,28,30,0.042); } :where(html[data-theme="glass"]) .avatar { color: #141417; } :where(html[data-theme="glass"]) .av-gray { background: #cfcfcf; } :where(html[data-theme="glass"]) .stat.stat-gold.stat-on { background: rgba(188,160,98,0.15); } :where(html[data-theme="glass"]) .stage-chip .stage-del:hover { color: #961212; } :where(html[data-theme="glass"]) .cmt-at.me { background: rgba(188,160,98,0.225); } :where(html[data-theme="glass"]) .cmt-at-list { box-shadow: 0 8px 24px rgba(28,28,30,0.18); } :where(html[data-theme="glass"]) .gt-track { background: rgba(28,28,30,0.049); } :where(html[data-theme="glass"]) .gt-ov-band { background: rgba(188,160,98,0.088); } :where(html[data-theme="glass"]) .gt-bar.over { background: repeating-linear-gradient(135deg, var(--red) 0 4px, rgba(235,87,87,0.438) 4px 8px); } :where(html[data-theme="glass"]) .gt-mark.late.multi b { color: #141417; } :where(html[data-theme="glass"]) .gt-tip { box-shadow: 0 8px 24px rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) .gt-key.over { background: repeating-linear-gradient(135deg, var(--red) 0 3px, rgba(235,87,87,0.438) 3px 6px); } :where(html[data-theme="glass"]) .gt-key.plan { background: rgba(188,160,98,0.188); } :where(html[data-theme="glass"]) .gt-appr.live { background: repeating-linear-gradient(135deg, #e8922f 0 4px, rgba(232,146,47,0.375) 4px 8px); } :where(html[data-theme="glass"]) .ecard-run .ecard-state i { box-shadow: 0 0 8px rgba(111,207,151,0.525); } :where(html[data-theme="glass"]) .ecard-btn { color: #141417; } :where(html[data-theme="glass"]) .ecard-foot.soft { background: #dddddd; } :where(html[data-theme="glass"]) .ecard-foot.on { background: linear-gradient(180deg, rgba(221,221,221,0.95), rgba(221,221,221,0.75)); } @media (hover: hover) { :where(html[data-theme="glass"]) .ecard:hover { box-shadow: 0 6px 20px rgba(28,28,30,0.14); } } :where(html[data-theme="glass"]) tr.st-row-on > td { background: rgba(188,160,98,0.125); } :where(html[data-theme="glass"]) .lib-page-frame { background: #eaeaea; } @media (max-width: 900px) { :where(html[data-theme="glass"]) .rp-week { box-shadow: 0 10px 12px -8px rgba(28,28,30,0.34); } :where(html[data-theme="glass"]) .rp-week.rp-cur { background-color: #e7e7e7; background-image: linear-gradient(180deg, rgba(90,170,110,0.475), rgba(90,170,110,0.225)); } :where(html[data-theme="glass"]) .rp-week.rp-prev { background-color: #e8e8e8; background-image: linear-gradient(180deg, rgba(200,170,60,0.375), rgba(200,170,60,0.175)); } :where(html[data-theme="glass"]) #app > .sidebar { box-shadow: 0 0 40px rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) .nav-shade { background: rgba(30,30,40,0.225); } :where(html[data-theme="glass"]) .drag-grip:active { background: rgba(188,160,98,0.225); } :where(html[data-theme="glass"]) .timer-fab { box-shadow: 0 -6px 22px rgba(28,28,30,0.2); } } :where(html[data-theme="glass"]) .ov-hits { box-shadow: 0 10px 30px rgba(28,28,30,0.18); } :where(html[data-theme="glass"]) table.ov tr.ov-sec td { background: #e0e0e0; } :where(html[data-theme="glass"]) table.ov tr.ov-sec-design td { box-shadow: inset 0 0 0 100px rgba(109,179,242,0.038); } :where(html[data-theme="glass"]) table.ov tr.ov-sec-build td { box-shadow: inset 0 0 0 100px rgba(188,160,98,0.045); } :where(html[data-theme="glass"]) table.ov tr.ov-sec-done td { box-shadow: inset 0 0 0 100px rgba(111,207,151,0.038); } :where(html[data-theme="glass"]) .ov-dot.done { box-shadow: 0 0 0 3px rgba(111,207,151,0.09); } :where(html[data-theme="glass"]) .ov-dot.red { box-shadow: 0 0 0 3px rgba(235,87,87,0.112); } :where(html[data-theme="glass"]) .ov-dot.yellow { box-shadow: 0 0 0 3px rgba(217,199,106,0.098); } :where(html[data-theme="glass"]) .ov-dot.green { box-shadow: 0 0 0 3px rgba(111,207,151,0.09); } :where(html[data-theme="glass"]) .ov-bar { background: #dddddd; } :where(html[data-theme="glass"]) .ov-flag.red { background: rgba(235,87,87,0.088); } :where(html[data-theme="glass"]) .ov-flag.yellow { background: rgba(217,199,106,0.075); } :where(html[data-theme="glass"]) .ov-rc.red { background: rgba(235,87,87,0.175); color: #951313; } :where(html[data-theme="glass"]) .ov-rc.yellow { background: rgba(217,199,106,0.163); } :where(html[data-theme="glass"]) .ov-delta.bad { color: #951313; background: rgba(235,87,87,0.15); } :where(html[data-theme="glass"]) .ov-delta.good { background: rgba(111,207,151,0.15); } @media (max-width: 900px) { :where(html[data-theme="glass"]) body.chat-nav-open .chat-back { background: rgba(30,30,40,0.203); } :where(html[data-theme="glass"]) .chat-list.open { box-shadow: 0 0 30px rgba(28,28,30,0.2); } } @media (max-width: 900px) { html:where([data-theme="glass"]).ios-gap:has(.timer-fab.running:not(.tf-nomob)) { background: #e1eaf4; } html:where([data-theme="glass"]).ios-gap .timer-fab.running { background: #e1eaf4; } } :where(html[data-theme="glass"]) .ov-bar.nt i { background: repeating-linear-gradient(45deg, rgba(28,28,30,0.12) 0 6px, transparent 6px 12px); } :where(html[data-theme="glass"]) .ov-okline { background: rgba(111,207,151,0.075); } :where(html[data-theme="glass"]) .ov-day.has b { background: rgba(188,160,98,0.4); } :where(html[data-theme="glass"]) .ov-day.vac b { background: repeating-linear-gradient(45deg, rgba(28,28,30,0.12) 0 4px, transparent 4px 8px); } :where(html[data-theme="glass"]) .ov-kd.bad { color: #951313; } :where(html[data-theme="glass"]) .emp-sum.on { background: rgba(188,160,98,0.125); } :where(html[data-theme="glass"]) .cal-late { background: rgba(235,87,87,0.175); color: #951313; } :where(html[data-theme="glass"]) .lg.task { background: rgba(90,140,220,0.438); } :where(html[data-theme="glass"]) .lg.inh { background: rgba(90,140,220,0.188); } :where(html[data-theme="glass"]) .lg.late { background: rgba(235,87,87,0.375); } :where(html[data-theme="glass"]) .lg.stage { background: rgba(188,160,98,0.375); } :where(html[data-theme="glass"]) .lg.meet { background: rgba(155,127,230,0.438); } :where(html[data-theme="glass"]) .lg.hol { background: rgba(235,87,87,0.175); } :where(html[data-theme="glass"]) .cal-day-row.late .cr-t { color: #951313; } :where(html[data-theme="glass"]) .calm { box-shadow: 0 2px 14px rgba(28,28,30,0.1); } :where(html[data-theme="glass"]) .calm-dow > div { background: rgba(28,28,30,0.028); } :where(html[data-theme="glass"]) .calw-bg.wk { background: rgba(28,28,30,0.021); } :where(html[data-theme="glass"]) .calw-bg.past { background: rgba(30,30,40,0.036); } :where(html[data-theme="glass"]) .calw-bg.out { background: rgba(30,30,40,0.09); } :where(html[data-theme="glass"]) .calw-bg.hol { background: rgba(235,87,87,0.1); } :where(html[data-theme="glass"]) .calw-bg:hover { background: rgba(28,28,30,0.056); } :where(html[data-theme="glass"]) .calw-bg.cal-dropon, :where(html[data-theme="glass"]) .calwk-col.cal-dropon, :where(html[data-theme="glass"]) .call-day.cal-dropon { background: rgba(188,160,98,0.2); } :where(html[data-theme="glass"]) .calw-num.today .n { box-shadow: 0 0 0 3px rgba(188,160,98,0.135); } :where(html[data-theme="glass"]) .cal-holn { color: #8f1a1a; } :where(html[data-theme="glass"]) .cal-over { color: #951313; background: rgba(235,87,87,0.175); } :where(html[data-theme="glass"]) .cev.task { background: rgba(90,140,220,0.2); } :where(html[data-theme="glass"]) .cev.task.inh { background: rgba(90,140,220,0.112); } :where(html[data-theme="glass"]) .cev.task.late { background: rgba(235,87,87,0.2); } :where(html[data-theme="glass"]) .cev.stage, :where(html[data-theme="glass"]) .cev.contract { background: rgba(188,160,98,0.175); } :where(html[data-theme="glass"]) .cev.stage.late, :where(html[data-theme="glass"]) .cev.contract.late { color: #951313; } :where(html[data-theme="glass"]) .cev.meet { background: rgba(155,127,230,0.2); } :where(html[data-theme="glass"]) .cev.meet b { color: #341395; } :where(html[data-theme="glass"]) .cev.bday { color: #905e18; } :where(html[data-theme="glass"]) .calwk-col.wk { background: rgba(28,28,30,0.021); } :where(html[data-theme="glass"]) .calwk-col.past { background: rgba(30,30,40,0.036); } :where(html[data-theme="glass"]) .calwk-col.hol { background: rgba(235,87,87,0.1); } :where(html[data-theme="glass"]) .emp-online.on { box-shadow: 0 0 8px rgba(111,207,151,0.45); } :where(html[data-theme="glass"]) .wk-bar:hover { background: rgba(28,28,30,0.042); } :where(html[data-theme="glass"]) .wk-bar.sel { background: rgba(188,160,98,0.125); } :where(html[data-theme="glass"]) .wk-bar.vac .wk-bar-area { background: repeating-linear-gradient(45deg, rgba(111,207,151,0.1) 0 5px, transparent 5px 10px); } :where(html[data-theme="glass"]) .wk-delta.up { background: rgba(111,207,151,0.15); } :where(html[data-theme="glass"]) .wk-delta.down { color: #951313; background: rgba(235,87,87,0.15); } :where(html[data-theme="glass"]) .wk-day-row.tr-click:hover { background: rgba(28,28,30,0.056); } :where(html[data-theme="glass"]) .hp-row.run { background: rgba(111,207,151,0.075); } :where(html[data-theme="glass"]) .hi-ic.men { background: rgba(109,179,242,0.188); } :where(html[data-theme="glass"]) .tvr-st > i { box-shadow: 0 0 0 4px rgba(111,207,151,0.112); } :where(html[data-theme="glass"]) .chat-ch .un.mute { background: #cecece; } :where(html[data-theme="glass"]) .chat-msg.men { background: rgba(188,160,98,0.088); } :where(html[data-theme="glass"]) .chat-msg.men:hover { background: rgba(188,160,98,0.138); } :where(html[data-theme="glass"]) .chat-fwd-h { color: #315577; } :where(html[data-theme="glass"]) .chat-fwd-h b { color: #2a557e; } :where(html[data-theme="glass"]) .chat-text .mention.all { color: #141417; background: rgba(224,112,95,0.438); } :where(html[data-theme="glass"]) .chat-down { box-shadow: 0 4px 14px rgba(28,28,30,0.18); } :where(html[data-theme="glass"]) .chat-main.drop::after { background: rgba(236,236,236,0.86); } :where(html[data-theme="glass"]) .chat-sq-t mark { background: rgba(188,160,98,0.475); } :where(html[data-theme="glass"]) .est-imp-err { background: rgba(229,83,75,0.125); } :where(html[data-theme="glass"]) .chat-emo { box-shadow: 0 10px 30px rgba(28,28,30,0.18); } :where(html[data-theme="glass"]) .notif-ico.nc-comments { color: #431693; } :where(html[data-theme="glass"]) .notif-ico.nc-due { color: #926516; } :where(html[data-theme="glass"]) .nds-val.mid { color: #926516; } :where(html[data-theme="glass"]) .tp-wait.on { color: #926516; } :where(html[data-theme="glass"]) .rp-sc.cur { background: linear-gradient(180deg, rgba(90,170,110,0.2), rgba(90,170,110,0.062)); } :where(html[data-theme="glass"]) .rp-prog { background: rgba(28,28,30,0.112); } :where(html[data-theme="glass"]) .rp-d.down { color: #925516; } :where(html[data-theme="glass"]) .rp-cmp tr.rp-csec td { background: rgba(28,28,30,0.049); } :where(html[data-theme="glass"]) .rp-cmp tr.rp-cproj:hover td { background: rgba(28,28,30,0.098); } :where(html[data-theme="glass"]) .rp-share { background: rgba(28,28,30,0.07); } :where(html[data-theme="glass"]) .rp-idle { color: #926516; } :where(html[data-theme="glass"]) .rp-sub-idle td { background: rgba(230,179,90,0.062); } :where(html[data-theme="glass"]) .rp-ppl tr.rp-zero td { background: rgba(224,90,90,0.075); } :where(html[data-theme="glass"]) .rp-load-bar { background: rgba(28,28,30,0.098); } :where(html[data-theme="glass"]) .ovp-ph { background: var(--tag-purple-bg, rgba(28,28,30,0.084)); } :where(html[data-theme="glass"]) .ovp-n { background: rgba(28,28,30,0.042); } :where(html[data-theme="glass"]) .ovp-d.down { color: #925516; } :where(html[data-theme="glass"]) .ovp-share { background: rgba(28,28,30,0.07); } :where(html[data-theme="glass"]) .arc-cell.out { background: rgba(30,30,40,0.081); } :where(html[data-theme="glass"]) .arc-cell.hol { background-image: linear-gradient(rgba(235,87,87,0.125), rgba(235,87,87,0.125)); } :where(html[data-theme="glass"]) .arc-bcnt { background: rgba(28,28,30,0.084); } :where(html[data-theme="glass"]) .arc-hol { color: #901919; } :where(html[data-theme="glass"]) .arc-fold { background: rgba(28,28,30,0.042); } :where(html[data-theme="glass"]) .bn-step-n { background: #dddddd; } :where(html[data-theme="glass"]) .bn-step.cur { background: rgba(188,160,98,0.125); } :where(html[data-theme="glass"]) .bn-review { background: rgba(224,168,79,0.088); } :where(html[data-theme="glass"]) .bn-bar { background: #dddddd; } :where(html[data-theme="glass"]) .bn-bar i.dim, :where(html[data-theme="glass"]) .bn-hist i.dim { background: #c9c9c9; } :where(html[data-theme="glass"]) .bn-p-why { background: rgba(224,168,79,0.1); } :where(html[data-theme="glass"]) .bn-radio.on { background: rgba(188,160,98,0.1); } :where(html[data-theme="glass"]) .ov2-sum p { color: #242427; } :where(html[data-theme="glass"]) .ov2-sum p b { color: #141417; } :where(html[data-theme="glass"]) .ov2-pills b { color: #141417; } :where(html[data-theme="glass"]) .ov2-pills span.down { color: #925516; } :where(html[data-theme="glass"]) .ov2-pills > div.bad b { color: #a80000; } :where(html[data-theme="glass"]) .ov2-sech h2 { color: #141417; } :where(html[data-theme="glass"]) .ov2-h h3 { color: #141417; } :where(html[data-theme="glass"]) .ov2-dot { background: #c9c9c9; } :where(html[data-theme="glass"]) .ov2-num > b { color: #141417; } :where(html[data-theme="glass"]) .ov2-st::before { background: #d7d7d7; } :where(html[data-theme="glass"]) .ov2-st i { border: 2px solid rgba(28,28,30,0.197); } :where(html[data-theme="glass"]) .ov2-st.cur i { box-shadow: 0 0 0 3px rgba(188,160,98,0.188); } :where(html[data-theme="glass"]) .ov2-st.cur span { color: #7d672b; } :where(html[data-theme="glass"]) .ov2-ev b { color: #141417; } :where(html[data-theme="glass"]) .ov2-quiet b { color: #212124; } :where(html[data-theme="glass"]) .mt-sech { color: #141417; } :where(html[data-theme="glass"]) .meet-card.mt-live { box-shadow: 0 0 0 1px rgba(111,207,151,0.188); } :where(html[data-theme="glass"]) .mt-time b { color: #141417; } :where(html[data-theme="glass"]) .mt-title b { color: #141417; } :where(html[data-theme="glass"]) .pm-list > .pm-row { background: rgba(188,160,98,0.062); } :where(html[data-theme="glass"]) .pm-list > .pm-row.pm-click:hover { background: rgba(188,160,98,0.125); } :where(html[data-theme="glass"]) .pm-list > .pm-row.pm-next { box-shadow: 0 0 0 1px rgba(188,160,98,0.262); } :where(html[data-theme="glass"]) .pm-row.pm-next { background: rgba(188,160,98,0.088); } :where(html[data-theme="glass"]) .tag.dw-meet { background: rgba(188,160,98,0.175); } :where(html[data-theme="glass"]) .tk-sum b { color: #141417; } :where(html[data-theme="glass"]) .tk-gn { background: rgba(28,28,30,0.098); } :where(html[data-theme="glass"]) .tk-sub { background: rgba(28,28,30,0.112); } :where(html[data-theme="glass"]) .tk-row.tk-done .row-link { text-decoration-color: rgba(20,20,23,0.3); } :where(html[data-theme="glass"]) .pf-sig.ok { background: rgba(95,191,143,0.163); } :where(html[data-theme="glass"]) .pf-sig.warn { background: rgba(224,168,79,0.163); } :where(html[data-theme="glass"]) .pf-sig.bad { background: rgba(235,87,87,0.175); } :where(html[data-theme="glass"]) .pf-sig.dim { color: #555558; } :where(html[data-theme="glass"]) .pf-mini:hover { background: rgba(28,28,30,0.035); } :where(html[data-theme="glass"]) .pf-pcol { background: #e6e6e6; } :where(html[data-theme="glass"]) .tro input::placeholder, :where(html[data-theme="glass"]) .tro textarea::placeholder { color: #59595c; } :where(html[data-theme="glass"]) .tro-duepop { box-shadow: 0 14px 36px rgba(28,28,30,0.22); } :where(html[data-theme="glass"]) .tro-run { background: linear-gradient(180deg, rgba(225,234,244,0.95), rgba(225,234,244,0.75)); } :where(html[data-theme="glass"]) .tro-run-l { color: #19538f; } :where(html[data-theme="glass"]) .tro-add.empty { border: 1px dashed rgba(28,28,30,0.179); } :where(html[data-theme="glass"]) .tro-sdue.none:hover { background: rgba(188,160,98,0.175); } :where(html[data-theme="glass"]) .tro-tperson.ro { background: #e4e4e4; } :where(html[data-theme="glass"]) .tro-trow + .tro-trow { border-top: 1px solid rgba(28,28,30,0.145); } :where(html[data-theme="glass"]) .tro-drop { background: rgba(235,235,235,0.9); } :where(html[data-theme="glass"]) .tro-drop span { color: #454548; } :where(html[data-theme="glass"]) .tmg-newtag { background: #dedede; color: #826827; } :where(html[data-theme="glass"]) .tmg-ibtn.pop-on { background: #dedede; } :where(html[data-theme="glass"]) textarea.tmg-title:focus { box-shadow: 0 0 0 3px rgba(188,160,98,0.135); } :where(html[data-theme="glass"]) .tmg-due.set { background: #dddddd; } :where(html[data-theme="glass"]) .tmg-due.none { border-color: rgba(28,28,30,0.182); } :where(html[data-theme="glass"]) .tmg-pchip.add { border: 1px dashed rgba(28,28,30,0.182); } :where(html[data-theme="glass"]) .tmg-add:hover .tmg-cplus { background: rgba(188,160,98,0.175); } :where(html[data-theme="glass"]) .tmg-sw i { background: #cfcfcf; } :where(html[data-theme="glass"]) .tmg-sw i::after { box-shadow: 0 1px 3px rgba(28,28,30,0.14); } :where(html[data-theme="glass"]) .tmg-sw input:checked + i::after { background: #ebebeb; } :where(html[data-theme="glass"]) .tmg-est.on { border-color: #d9ceb5; } :where(html[data-theme="glass"]) .tro textarea.tmg-note.empty { border: 1px dashed rgba(28,28,30,0.179); } :where(html[data-theme="glass"]) .tmg-person + .tmg-person { border-top: 1px solid rgba(28,28,30,0.145); } :where(html[data-theme="glass"]) .tmg-person.extra { background: #e4e4e4; } :where(html[data-theme="glass"]) .tpath + .tpath, :where(html[data-theme="glass"]) .tpath + .tpath-form, :where(html[data-theme="glass"]) .tpath-form + .tpath { border-top: 1px solid rgba(28,28,30,0.145); } :where(html[data-theme="glass"]) .tmg-hbtn.pop-on { background: #dedede; } :where(html[data-theme="glass"]) .tro input.tmg-what { border: 1px solid rgba(28,28,30,0.153); } :where(html[data-theme="glass"]) .tmg-pdue { background: #e0e0e0; border: 1px solid rgba(28,28,30,0.153); } :where(html[data-theme="glass"]) .tmg-pdue.none { border-color: rgba(28,28,30,0.182); } :where(html[data-theme="glass"]) .tmg-pempty { border: 1px dashed rgba(28,28,30,0.179); } :where(html[data-theme="glass"]) .tmg-con + .tmg-con { border-top: 1px solid rgba(28,28,30,0.145); } :where(html[data-theme="glass"]) .tro input.tmg-cname, :where(html[data-theme="glass"]) .tro input.tmg-camt { border: 1px solid rgba(28,28,30,0.153); } :where(html[data-theme="glass"]) .tmg-ndrop { border: 1px dashed rgba(28,28,30,0.179); } :where(html[data-theme="glass"]) .tmg-tplb.here { border-color: #d9ceb5; } :where(html[data-theme="glass"]) .tmg-here { background: #dedede; color: #826827; } :where(html[data-theme="glass"]) .tmg-pop { box-shadow: 0 14px 36px rgba(28,28,30,0.22); } :where(html[data-theme="glass"]) .tmg-opt.on { background: #dedede; } :where(html[data-theme="glass"]) .tmg-mi:hover, :where(html[data-theme="glass"]) .tmg-mi.on { background: #dedede; } :where(html[data-theme="glass"]) .tmg-submenu { box-shadow: 0 14px 36px rgba(28,28,30,0.22); } :where(html[data-theme="glass"]) .tmg-cd.off { color: #4c4c4f; } :where(html[data-theme="glass"]) .tmg-cd.today { box-shadow: inset 0 0 0 1px rgba(106,106,106,0.75); } :where(html[data-theme="glass"]) .tmg-dmv s { color: #5f5f62; } :where(html[data-theme="glass"]) .tmg-votes { border: 1px solid rgba(28,28,30,0.153); } :where(html[data-theme="glass"]) .tmg-vote + .tmg-vote { border-top: 1px solid rgba(28,28,30,0.145); } :where(html[data-theme="glass"]) .tmg-dform label { color: #4f4f52; } :where(html[data-theme="glass"]) .tmg-dreject { border-color: #d6b8b8; } :where(html[data-theme="glass"]) .board-col.board-col-appr:not(.drop-on) { background: rgba(224,164,88,0.112); box-shadow: inset 0 0 0 1px rgba(224,164,88,0.18); } :where(html[data-theme="glass"]) .board-col.board-col-doing:not(.drop-on) { background: rgba(109,179,242,0.075); box-shadow: inset 0 0 0 1px rgba(109,179,242,0.105); } :where(html[data-theme="glass"]) .board-col.board-col-done:not(.drop-on) { background: rgba(111,207,151,0.075); box-shadow: inset 0 0 0 1px rgba(111,207,151,0.105); } :where(html[data-theme="glass"]) .appr-colhint { color: #4c4c4f; } :where(html[data-theme="glass"]) .c-appr { color: #4c4c4f; } :where(html[data-theme="glass"]) .appr-back { background: #e4e4e4; border: 1px solid #e1ccad; } :where(html[data-theme="glass"]) .ap-banner .appr-back { background: linear-gradient(90deg, rgba(232,146,47,0.3), rgba(232,146,47,0.125) 55%, rgba(232,146,47,0.062)); box-shadow: 0 4px 16px rgba(28,28,30,0.112); } :where(html[data-theme="glass"]) .ap-banner .appr-back:hover { box-shadow: 0 6px 20px rgba(28,28,30,0.136); } :where(html[data-theme="glass"]) .ap-banner .appr-back-i { box-shadow: 0 2px 10px rgba(232,146,47,0.338); } :where(html[data-theme="glass"]) .ap-bn-n { color: #9b580d; } :where(html[data-theme="glass"]) .ap-bn-chip { background: rgba(28,28,30,0.112); } :where(html[data-theme="glass"]) .ap-bn-chip.long { background: rgba(235,87,87,0.225); color: #a80d00; } :where(html[data-theme="glass"]) .appr-fi { background: #dbdbdb; } :where(html[data-theme="glass"]) .appr-lbl { color: #4c4c4f; } :where(html[data-theme="glass"]) .appr-tiles span { color: #4c4c4f; } :where(html[data-theme="glass"]) .appr-seg button.on.skip { background: #dbdbdb; } :where(html[data-theme="glass"]) .appr-date { color: #4c4c4f; } :where(html[data-theme="glass"]) .appr-remf { color: #4c4c4f; } :where(html[data-theme="glass"]) .appr-tdue { color: #4c4c4f; } :where(html[data-theme="glass"]) .appr-now { background: rgba(224,164,88,0.088); } :where(html[data-theme="glass"]) .appr-out { color: #4c4c4f; } :where(html[data-theme="glass"]) .appr-fx-state { background: rgba(188,160,98,0.15); } :where(html[data-theme="glass"]) .appr-note { color: #4c4c4f; } :where(html[data-theme="glass"]) .appr-rr { color: #4c4c4f; } :where(html[data-theme="glass"]) .appr-rs { color: #4c4c4f; } :where(html[data-theme="glass"]) .appr-det ul, :where(html[data-theme="glass"]) .appr-det ol { color: #38383b; } :where(html[data-theme="glass"]) .cmt.cmt-appr .cmt-body { background: #e3e3e3; border: 1px solid #d6bdb7; } @media (max-width: 900px) { :where(html[data-theme="glass"]) .tro-mtabs { background: #e8e8e8; } :where(html[data-theme="glass"]) .tro-mtab { color: #4c4c4f; } :where(html[data-theme="glass"]) .tro[data-tab="task"] .tro-mtab[data-tab="task"], :where(html[data-theme="glass"]) .tro[data-tab="cmt"] .tro-mtab[data-tab="cmt"], :where(html[data-theme="glass"]) .tro[data-tab="log"] .tro-mtab[data-tab="log"] { background: #dbdbdb; } :where(html[data-theme="glass"]) .tro-compose { box-shadow: 0 -6px 18px rgba(28,28,30,0.14); } :where(html[data-theme="glass"]) .tro[data-tab="cmt"] .tro-mtab[data-tab="cmt"] .tro-n, :where(html[data-theme="glass"]) .tro[data-tab="log"] .tro-mtab[data-tab="log"] .tro-n { background: #cfcfcf; } :where(html[data-theme="glass"]) .tro-tbar-in { background: linear-gradient(180deg, rgba(225,234,244,0.98), rgba(225,234,244,0.92)); box-shadow: 0 -6px 22px rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) .tro-tb-t span { color: #19538f; } :where(html[data-theme="glass"]) .tro-tb-go { box-shadow: 0 -6px 22px rgba(28,28,30,0.18); } } @media (max-width: 900px) { :where(html[data-theme="glass"]) .tmg-foot { box-shadow: 0 -6px 18px rgba(28,28,30,0.14); } :where(html[data-theme="glass"]) .tmg-pop-back { background: rgba(30,30,40,0.248); } :where(html[data-theme="glass"]) .tmg-pop, :where(html[data-theme="glass"]) .tmg-pop-pick, :where(html[data-theme="glass"]) .tmg-pop-ctl, :where(html[data-theme="glass"]) .tmg-pop-hours, :where(html[data-theme="glass"]) .tmg-pop-wait, :where(html[data-theme="glass"]) .tmg-pop-menu, :where(html[data-theme="glass"]) .tmg-pop-due { box-shadow: 0 -10px 30px rgba(28,28,30,0.2); } :where(html[data-theme="glass"]) .tmg-pop::before { background: #c9c9c9; } } @media (max-width: 900px) { :where(html[data-theme="glass"]) .tro-tb-go, :where(html[data-theme="glass"]) .tro-tb-go.primary { background: #dfdfdf; } :where(html[data-theme="glass"]) .tro-tb-go:hover, :where(html[data-theme="glass"]) .tro-tb-go:active { background: #dbdbdb; } :where(html[data-theme="glass"]) .timer-fab:not(.running) { background: #dfdfdf; } :where(html[data-theme="glass"]) .timer-fab.running { background: linear-gradient(180deg, rgba(225,234,244,0.98), rgba(225,234,244,0.92)); } :where(html[data-theme="glass"]) .timer-fab.running .tf-title { color: #19538f; } } :where(html[data-theme="glass"]) .ap-card.ap-ctl { background: #e4e4e4; } :where(html[data-theme="glass"]) .ap-card.ap-ctl:hover { background: #e2e2e2; } :where(html[data-theme="glass"]) .ap-ctl-row { background: rgba(188,160,98,0.175); } @media (max-width: 900px) { :where(html[data-theme="glass"]) .est-table tr.est-due .est-msum, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-msum, :where(html[data-theme="glass"]) .est-table tr.est-due .est-mchev, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-mchev, :where(html[data-theme="glass"]) .est-table tr.est-due.est-mopen > td[data-l]::before, :where(html[data-theme="glass"]) .est-table tr.est-paid.est-mopen > td[data-l]::before { color: rgba(20,20,23,0.82); } :where(html[data-theme="glass"]) .est-table tr.est-due .est-msum b, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-msum b, :where(html[data-theme="glass"]) .est-table tr.est-due .est-msum .ok, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-msum .ok, :where(html[data-theme="glass"]) .est-table tr.est-due .est-msum .due, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-msum .due, :where(html[data-theme="glass"]) .est-table tr.est-due .est-msum .sup, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-msum .sup { color: #141417; } :where(html[data-theme="glass"]) .est-table tr.est-due.est-mopen .cell-txt, :where(html[data-theme="glass"]) .est-table tr.est-paid.est-mopen .cell-txt, :where(html[data-theme="glass"]) .est-table tr.est-due.est-mopen .cell-sel, :where(html[data-theme="glass"]) .est-table tr.est-paid.est-mopen .cell-sel { background: rgba(30,30,40,0.099); border-color: rgba(28,28,30,0.2); color: #141417; } } /* ---------- 3. Стекло: ручной слой ---------- */ /* фон страницы: тёплые и холодные пятна под стеклом */ html[data-theme="glass"] body { background: radial-gradient(56rem 40rem at 4% -10%, rgba(226,198,136,.58), rgba(226,198,136,0) 62%), radial-gradient(50rem 42rem at 104% -6%, rgba(150,186,228,.66), rgba(150,186,228,0) 60%), radial-gradient(58rem 44rem at 64% 110%, rgba(234,204,182,.66), rgba(234,204,182,0) 62%), radial-gradient(40rem 34rem at 34% 48%, rgba(204,198,230,.36), rgba(204,198,230,0) 66%), #ebeae6; color: var(--text); } :where(html[data-theme="glass"]) .time-day, :where(html[data-theme="glass"]) .cell-date, :where(html[data-theme="glass"]) .bn-date input { color-scheme: light; } /* Шрифт чуть крупнее, чем в тёмной теме. Размеры в style.css заданы в px; font-size-adjust подгоняет высоту строчных букв любого шрифта к 0,57 его размера: у Onest она 0,527 — выходит около +8 % ко всему тексту разом. Кнопки и поля сбрасывают это свойство стилями браузера — им наследование включаем явно. Логотип (Bodoni), моноширинный текст и эмодзи не трогаем: у них другая высота строчных, они бы раздулись. */ html[data-theme="glass"] { font-size-adjust: 0.57; } :where(html[data-theme="glass"] :is(button, input, select, textarea, optgroup, option)) { font-size-adjust: inherit; } :where(html[data-theme="glass"] :is(.sb-title, .brand-name, .boot-brand, #boot-splash, .chat-emo-i, .tpath-p, .tpath-in, .chat-text code)) { font-size-adjust: none; } /* тонкие полосы прокрутки — вдвое уже стандартных */ :where(html[data-theme="glass"]) * { scrollbar-width: auto; scrollbar-color: auto; } :where(html[data-theme="glass"]) ::-webkit-scrollbar { width: 8px; height: 8px; } :where(html[data-theme="glass"]) ::-webkit-scrollbar-track { background: transparent; } :where(html[data-theme="glass"]) ::-webkit-scrollbar-thumb { background: rgba(28,28,30,.24); border: 1px solid transparent; border-radius: 8px; background-clip: padding-box; } :where(html[data-theme="glass"]) ::-webkit-scrollbar-thumb:hover { background-color: rgba(28,28,30,.38); } :where(html[data-theme="glass"]) ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } :where(html[data-theme="glass"]) ::-webkit-scrollbar-corner { background: transparent; } @supports not selector(::-webkit-scrollbar) { :where(html[data-theme="glass"]) * { scrollbar-width: thin; scrollbar-color: rgba(28,28,30,.28) transparent; } } /* у сайдбара полосы прокрутки нет совсем — меню по-прежнему листается колесом и пальцем */ :where(html[data-theme="glass"]) .sidebar { scrollbar-width: none; } :where(html[data-theme="glass"]) .sidebar::-webkit-scrollbar { display: none; width: 0; height: 0; } /* заставка запуска (у неё свои inline-стили) */ html[data-theme="glass"] #boot-splash { background: #ebeae6 !important; color: #5f5f66 !important; } html[data-theme="glass"] #boot-splash img { filter: invert(1); } html[data-theme="glass"] #boot-splash > div:nth-child(2) { color: #141416 !important; } html[data-theme="glass"] #boot-actions button + button { background: rgba(255,255,255,.75) !important; color: #2c2c30 !important; border-color: rgba(28,28,30,.15) !important; } /* ---------- экран входа и экран повтора запуска ---------- */ :where(html[data-theme="glass"]) .brand-mark, :where(html[data-theme="glass"]) .boot-logo { filter: invert(1); } :where(html[data-theme="glass"]) .login-wrap { width: min(424px, calc(100vw - 24px)); padding: 34px 32px 24px; border-radius: 24px; background: var(--gl-bg); border: 1px solid var(--gl-border); box-shadow: var(--gl-shadow), 0 30px 60px -30px rgba(28,28,30,.35); } :where(html[data-theme="glass"]) .brand-rule { background: rgba(28,28,30,.35); } /* ---------- сайдбар: во всю высоту, стекло ---------- */ :where(html[data-theme="glass"]) .sidebar { background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.5)); border-right: 1px solid rgba(255,255,255,.75); box-shadow: inset -1px 0 0 rgba(28,28,30,.05), 14px 0 40px -26px rgba(28,28,30,.45); } :where(html[data-theme="glass"]) img.sb-logo { filter: invert(1); } :where(html[data-theme="glass"]) .sb-title { color: #161618; } :where(html[data-theme="glass"]) .sb-badge { background: rgba(226,200,140,.42); color: #6e5218; border: 1px solid rgba(188,160,98,.4); } :where(html[data-theme="glass"]) .sb-section { color: #636369; font-weight: 600; letter-spacing: .06em; } :where(html[data-theme="glass"]) .sb-item { color: #2f2f33; border-radius: 8px; transition: background-color .2s, box-shadow .2s, transform .3s cubic-bezier(.3,1.3,.6,1); } :where(html[data-theme="glass"]) .sb-item .ico { opacity: .8; } :where(html[data-theme="glass"]) .sb-item:hover { background: rgba(255,255,255,.62); color: #141416; } :where(html[data-theme="glass"]) .sb-item:active { transform: scale(.98); transition-duration: .08s; } :where(html[data-theme="glass"]) .sb-item.active { color: #141416; font-weight: 600; background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.72)); box-shadow: inset 3px 0 0 #c7a356, inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,.95), 0 6px 14px -10px rgba(28,28,30,.35), 0 0 12px -6px rgba(214,184,116,.6); } :where(html[data-theme="glass"]) .sb-item.active .ico { opacity: 1; color: #8a6a28; } :where(html[data-theme="glass"]) .sb-item.active:hover { background: #fff; } :where(html[data-theme="glass"]) .sb-badge-n { background: none; color: #d9473f; } :where(html[data-theme="glass"]) .sb-footer { border-top-color: rgba(28,28,30,.1); } :where(html[data-theme="glass"]) .sb-user:hover { background: rgba(255,255,255,.62); } :where(html[data-theme="glass"]) .sb-logout, :where(html[data-theme="glass"]) .sb-install { background: rgba(255,255,255,.56); border: 1px solid rgba(255,255,255,.9); border-radius: 10px; box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(38,42,52,.12); } :where(html[data-theme="glass"]) .sb-logout:hover { background: rgba(255,205,210,.62); border-color: rgba(255,255,255,.9); color: #9a1f35; } :where(html[data-theme="glass"]) .sb-install { color: #6e5218; } /* ---------- заголовки страниц ---------- */ :where(html[data-theme="glass"]) .page-title { color: #141416; letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(255,255,255,.9); } :where(html[data-theme="glass"]) .page-sub { color: #55555b; } /* ---------- панели, плашки, карточки ---------- */ :where(html[data-theme="glass"]) .panel, :where(html[data-theme="glass"]) .stat, :where(html[data-theme="glass"]) .home-day, :where(html[data-theme="glass"]) .ap-card { background: var(--gl-bg); border: 1px solid var(--gl-border); box-shadow: var(--gl-shadow); } :where(html[data-theme="glass"]) .panel { border-radius: 18px; } :where(html[data-theme="glass"]) .stat { border-radius: 16px; } :where(html[data-theme="glass"]) .home-day { border-radius: 14px; } :where(html[data-theme="glass"]) .ap-card { border-radius: 16px; } :where(html[data-theme="glass"]) .ap-card:hover { background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58)); border-color: #fff; } :where(html[data-theme="glass"]) .ap-card.ap-ctl { background: linear-gradient(180deg, rgba(255,251,240,.86), rgba(255,245,222,.56)); border-color: rgba(232,206,148,.95); box-shadow: inset 0 1px 0 #fff, 0 12px 26px -16px rgba(150,110,40,.4), 0 0 18px -8px rgba(220,184,104,.6); } :where(html[data-theme="glass"]) .ap-card.ap-ctl:hover { background: linear-gradient(180deg, rgba(255,251,240,.95), rgba(255,245,222,.7)); } :where(html[data-theme="glass"]) .panel h2 { color: #161618; } :where(html[data-theme="glass"]) .panel h2 .sec-toggle { color: #161618; } :where(html[data-theme="glass"]) .panel h2 .ic-svg { color: #8a6a28; } :where(html[data-theme="glass"]) .panel.greenish { background: linear-gradient(180deg, rgba(240,251,245,.76), rgba(232,247,238,.5)); } :where(html[data-theme="glass"]) .panel.bluish { background: linear-gradient(180deg, rgba(240,246,255,.76), rgba(230,240,252,.5)); } :where(html[data-theme="glass"]) .stat .num { color: #141416; } /* карточки задач на досках — стекло без размытия (их бывает много) */ :where(html[data-theme="glass"]) .card { background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.58)); border: 1px solid rgba(255,255,255,.92); border-radius: 12px; box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(38,42,52,.42); } :where(html[data-theme="glass"]) .card:hover { box-shadow: inset 0 1px 0 #fff, 0 12px 22px -12px rgba(38,42,52,.48); } :where(html[data-theme="glass"]) .board-col { background: rgba(52,56,66,.055); box-shadow: inset 0 2px 6px rgba(38,42,52,.06); border-radius: 14px; } :where(html[data-theme="glass"]) .board-proj { color: #34363c; border-bottom-color: rgba(28,28,30,.1); } :where(html[data-theme="glass"]) .board-proj-name { color: #34363c; } /* ---------- плашки ---------- */ :where(html[data-theme="glass"]) .tag { border-radius: 7px; } /* статусы задач — светлые аналоги цветов тёмной темы: те же оттенки, светлая заливка, тёмный текст */ :where(html[data-theme="glass"]) .tag.st-tag { border-radius: 4px; } :where(html[data-theme="glass"]) .tag.st-tag.gray { background: #e5e4e0; color: #4c4c52; box-shadow: inset 0 0 0 1px rgba(28,28,30,.09); } :where(html[data-theme="glass"]) .tag.st-tag.blue { background: #d4e6fa; color: #1c5a9c; box-shadow: inset 0 0 0 1px rgba(28,90,156,.16); } :where(html[data-theme="glass"]) .tag.st-tag.orange { background: #f8e2c3; color: #8c5212; box-shadow: inset 0 0 0 1px rgba(140,82,18,.17); } :where(html[data-theme="glass"]) .tag.st-tag.green { background: #d0eedb; color: #1a6b41; box-shadow: inset 0 0 0 1px rgba(26,107,65,.16); } /* наведение на кнопки-выборки: на светлых плашках «ярче» значит белее — чуть притемняем */ :where(html[data-theme="glass"]) .tag.st-click:hover, :where(html[data-theme="glass"]) .phase-cell.phase-click:hover, :where(html[data-theme="glass"]) .stage-pick-btn:hover > .tag { filter: brightness(.95) saturate(1.15); box-shadow: inset 0 0 0 1px currentColor; } /* ---------- кнопки: стекло, мягкое свечение, лёгкое нажатие ---------- */ :where(html[data-theme="glass"]) button:where(:not([class]), .small, .primary, .ghost, .danger, .left, .mine-btn, .overdue-btn), :where(html[data-theme="glass"]) .btn { background: rgba(255,255,255,.58); color: #25272b; border: 1px solid rgba(255,255,255,.92); border-radius: 10px; box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(38,42,52,.12); transition: transform .3s cubic-bezier(.3,1.3,.6,1), box-shadow .2s ease, background-color .2s ease, color .2s ease; } :where(html[data-theme="glass"]) button:where(:not([class]), .small, .primary, .ghost, .danger, .left, .mine-btn, .overdue-btn):hover, :where(html[data-theme="glass"]) .btn:hover { background: rgba(255,255,255,.8); box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(38,42,52,.15); } :where(html[data-theme="glass"]) button:active, :where(html[data-theme="glass"]) .btn:active { transform: scale(.97); transition-duration: .08s; } :where(html[data-theme="glass"]) button:where(:not([class]), .small, .primary, .ghost, .danger, .left, .mine-btn, .overdue-btn):active { box-shadow: inset 0 1px 2px rgba(38,42,52,.12), 0 1px 3px rgba(38,42,52,.1); } :where(html[data-theme="glass"]) button.primary { background: rgba(255,236,196,.94); color: #5a3800; border-color: rgba(255,255,255,.92); font-weight: 600; box-shadow: inset 0 1px 0 #fff, 0 0 10px rgba(255,208,128,.5), 0 3px 8px rgba(38,42,52,.12); } :where(html[data-theme="glass"]) button.primary:hover { background: rgba(255,232,186,1); color: #4a2e00; border-color: rgba(255,255,255,.92); box-shadow: inset 0 1px 0 #fff, 0 0 14px rgba(255,206,120,.62), 0 5px 12px rgba(38,42,52,.15); } :where(html[data-theme="glass"]) button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: #4f4f56; } :where(html[data-theme="glass"]) button.ghost:hover { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.9); color: #1c1c1e; box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(38,42,52,.1); } :where(html[data-theme="glass"]) button.danger { color: #b8323a; } :where(html[data-theme="glass"]) button.overdue-btn { color: #b8323a; border-color: rgba(217,71,63,.45); } :where(html[data-theme="glass"]) button.overdue-btn.active { background: #d9473f; color: #fff; border-color: #d9473f; } /* переключатели-сегменты: углублённая дорожка, выбранный — белая «таблетка» */ :where(html[data-theme="glass"]) .viewseg, :where(html[data-theme="glass"]) .kpi-seg, :where(html[data-theme="glass"]) .appr-seg { background: rgba(52,56,66,.1); border: 0; box-shadow: inset 0 1px 3px rgba(38,42,52,.15); border-radius: 10px; } :where(html[data-theme="glass"]) .viewseg button, :where(html[data-theme="glass"]) .kpi-seg button, :where(html[data-theme="glass"]) .appr-seg button { color: #383b41; border-radius: 8px; background: transparent; border-color: transparent; box-shadow: none; } :where(html[data-theme="glass"]) .viewseg button:hover, :where(html[data-theme="glass"]) .kpi-seg button:hover, :where(html[data-theme="glass"]) .appr-seg button:hover { background: rgba(255,255,255,.4); color: #1c1c1e; } :where(html[data-theme="glass"]) .viewseg button.on, :where(html[data-theme="glass"]) .kpi-seg button.on, :where(html[data-theme="glass"]) .appr-seg button.on { background: rgba(255,255,255,.94); color: #1f2125; font-weight: 600; box-shadow: 0 0 8px rgba(255,255,255,.75), 0 2px 5px rgba(38,42,52,.16); } :where(html[data-theme="glass"]) .appr-seg { padding: 3px; gap: 2px; } :where(html[data-theme="glass"]) .appr-seg button + button { border-left-color: transparent; } :where(html[data-theme="glass"]) .appr-seg button.on.ok { background: #d0eedb; color: #1a6b41; } :where(html[data-theme="glass"]) .appr-seg button.on.rem { background: rgba(255,219,94,.7); color: #574000; } :where(html[data-theme="glass"]) .notif-tabs button, :where(html[data-theme="glass"]) .lightbox button { box-shadow: none; } :where(html[data-theme="glass"]) .col-add, :where(html[data-theme="glass"]) .card-timer { background: rgba(255,255,255,.7); border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(38,42,52,.12); transition: transform .3s cubic-bezier(.3,1.3,.6,1), background-color .2s; } :where(html[data-theme="glass"]) .col-add:hover { background: rgba(255,236,196,.95); color: #5a3800; border-color: #fff; } :where(html[data-theme="glass"]) .card-timer { color: #8a6a28; } :where(html[data-theme="glass"]) .card-timer:hover { background: rgba(255,236,196,.95); color: #5a3800; } :where(html[data-theme="glass"]) .modal-x { background: rgba(255,255,255,.7); border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(38,42,52,.12); } /* ---------- поля ввода ---------- */ :where(html[data-theme="glass"]) input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file])), :where(html[data-theme="glass"]) select, :where(html[data-theme="glass"]) textarea { background: rgba(255,255,255,.72); color: #25272b; border: 1px solid rgba(28,28,30,.12); border-radius: 9px; box-shadow: inset 0 1px 2px rgba(28,28,30,.05); } :where(html[data-theme="glass"]) input:focus, :where(html[data-theme="glass"]) select:focus, :where(html[data-theme="glass"]) textarea:focus { border-color: rgba(184,150,79,.9); box-shadow: 0 0 0 3px rgba(214,184,116,.22); } :where(html[data-theme="glass"]) .filter-select { background: rgba(255,255,255,.66); border-color: rgba(255,255,255,.92); box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(38,42,52,.12); } :where(html[data-theme="glass"]) .filter-select:hover { filter: none; background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(38,42,52,.15); } :where(html[data-theme="glass"]) input[type=checkbox], :where(html[data-theme="glass"]) input[type=radio], :where(html[data-theme="glass"]) input[type=range] { accent-color: #b8964f; } :where(html[data-theme="glass"]) ::placeholder { color: #8a8a90; } /* шапки недель Google-таблицы: фон задан в разметке (GS_WEEK_COLORS, тёмные) — текст остаётся белым */ :where(html[data-theme="glass"]) .wk-head { color: #fff; } /* ---------- таблицы ---------- */ :where(html[data-theme="glass"]) table.nt th { color: #5f5f66; } :where(html[data-theme="glass"]) table.nt tr:hover td { background: rgba(255,255,255,.42); } :where(html[data-theme="glass"]) table.nt tr.tr-click:hover td { background: rgba(255,255,255,.58); } /* ---------- всплывающие меню и панели ---------- */ :where(html[data-theme="glass"]) .status-menu, :where(html[data-theme="glass"]) .stage-menu, :where(html[data-theme="glass"]) .notif-panel, :where(html[data-theme="glass"]) .online-panel, :where(html[data-theme="glass"]) .viewas-panel, :where(html[data-theme="glass"]) .tmg-pop, :where(html[data-theme="glass"]) .alert-box, :where(html[data-theme="glass"]) .palette, :where(html[data-theme="glass"]) .pop-card, :where(html[data-theme="glass"]) .pop-all, :where(html[data-theme="glass"]) .ai-panel, :where(html[data-theme="glass"]) .gt-tip, :where(html[data-theme="glass"]) .tmg-submenu, :where(html[data-theme="glass"]) .chat-at-list, :where(html[data-theme="glass"]) .cmt-at-list, :where(html[data-theme="glass"]) .chat-emo, :where(html[data-theme="glass"]) .ov-hits { background: var(--gl-solid); border: 1px solid rgba(255,255,255,.95); border-radius: 14px; box-shadow: var(--gl-pop); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); } :where(html[data-theme="glass"]) .toast { background: var(--gl-solid); border: 1px solid rgba(255,255,255,.95); border-radius: 12px; box-shadow: var(--gl-pop); color: #141416; -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); } :where(html[data-theme="glass"]) .toast.err { border-color: rgba(217,71,63,.6); color: #a8222e; } /* ---------- окна ---------- */ :where(html[data-theme="glass"]) .modal-back { background: rgba(30,30,40,.26); } /* размытие фона под окном — отдельным слоем: backdrop-filter на самом .modal-back сделал бы его точкой отсчёта для position: fixed внутри окна, и всплывающие меню карточки задачи съезжали бы */ :where(html[data-theme="glass"]) .modal-back::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } :where(html[data-theme="glass"]) .modal-back.modal-locked { background: rgba(30,30,40,.42); } :where(html[data-theme="glass"]) .modal { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,249,246,.88)); border: 1px solid rgba(255,255,255,.95); border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(28,28,30,.45), inset 0 1px 0 #fff; } :where(html[data-theme="glass"]) .modal .panel { background: rgba(255,255,255,.6); } /* ---------- правый верхний угол: таймер (матовое стекло), колокольчик, онлайн ---------- */ :where(html[data-theme="glass"]) .notif-bell, :where(html[data-theme="glass"]) .online-bar, :where(html[data-theme="glass"]) .viewas-btn, :where(html[data-theme="glass"]) .timer-fab { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72)); border: 1px solid rgba(255,255,255,.92); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(28,28,30,.3); } :where(html[data-theme="glass"]) .notif-bell { color: #2c2c30; } :where(html[data-theme="glass"]) .notif-badge { background: linear-gradient(180deg, #f27a72, #d9473f); box-shadow: 0 0 0 2px rgba(255,255,255,.95); } :where(html[data-theme="glass"]) .viewas-btn { color: #4f4f56; } :where(html[data-theme="glass"]) .viewas-btn.on { background: rgba(255,236,196,.94); color: #5a3800; border-color: #fff; } :where(html[data-theme="glass"]) .online-bar .avatar.on-av { border-color: rgba(255,255,255,.95); } :where(html[data-theme="glass"]) .timer-fab.running { background: linear-gradient(180deg, rgba(46,86,130,.58), rgba(26,54,88,.66)); border-color: rgba(170,214,255,.55); -webkit-backdrop-filter: blur(18px) saturate(190%); backdrop-filter: blur(18px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -6px 12px -8px rgba(140,200,255,.3), 0 8px 20px -12px rgba(20,44,72,.55), 0 0 14px -6px rgba(109,179,242,.5); color: #f2f8fe; } :where(html[data-theme="glass"]) .timer-fab.running .tf-title { color: #eaf3fb; } :where(html[data-theme="glass"]) .timer-fab.running .tf-time { color: #c4e4ff; text-shadow: 0 0 8px rgba(124,192,255,.7); } :where(html[data-theme="glass"]) .tf-dot { background: #9ad0ff; box-shadow: 0 0 6px #8cc8ff; } :where(html[data-theme="glass"]) .tf-stop { background: linear-gradient(180deg, #f27a72, #d9473f); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 6px rgba(232,84,76,.35); transition: transform .3s cubic-bezier(.3,1.3,.6,1); } :where(html[data-theme="glass"]) .tf-stop:active { transform: scale(.94); transition-duration: .08s; } :where(html[data-theme="glass"]) .tf-go { color: #6e5218; } :where(html[data-theme="glass"]) .timer-fab:not(.running) .tf-last { color: #5f5f66; } /* ---------- кнопка смены темы ---------- */ :where(html[data-theme="glass"]) .theme-btn { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72)); border: 1px solid rgba(255,255,255,.92); color: #2c2c30; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(28,28,30,.3); } /* ---------- «На утверждение»: «Замечания» жёлтая, «Утверждено» — в цветах «Готово» ---------- */ :where(html[data-theme="glass"]) .ap-card.ap-orange { box-shadow: inset 3px 0 0 #e0912f, var(--gl-shadow), 0 0 16px -8px rgba(240,150,60,.45); } :where(html[data-theme="glass"]) .ap-card.ap-red { box-shadow: inset 3px 0 0 #d9473f, var(--gl-shadow), 0 0 16px -8px rgba(217,71,63,.4); } :where(html[data-theme="glass"]) .ap-acts button.small:not(.primary) { background: rgba(255,219,94,.66); color: #574000; border-color: rgba(255,255,255,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 9px rgba(255,204,60,.42), 0 3px 8px rgba(38,42,52,.12); } :where(html[data-theme="glass"]) .ap-acts button.small:not(.primary):hover { background: rgba(255,219,94,.82); color: #453200; } :where(html[data-theme="glass"]) .ap-acts button.primary { background: #d0eedb; color: #1a6b41; border-color: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(26,107,65,.14), 0 3px 8px rgba(38,42,52,.12); } :where(html[data-theme="glass"]) .ap-acts button.primary:hover { background: #c2e8cf; color: #145a36; border-color: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(26,107,65,.2), 0 5px 12px rgba(38,42,52,.15); } /* ---------- телефон ---------- */ @media (max-width: 900px) { /* iPhone с приложением на домашнем экране: строка состояния (часы, батарея) белая и лежит поверх страницы — под ней (высота --sat) оставляем тёмную полоску, иначе её не видно на светлом фоне. В браузере и на Android --sat = 0, полоски нет. */ :where(html[data-theme="glass"]) #app > .sidebar { background: linear-gradient(180deg, #1c1c1e 0, #1c1c1e var(--sat), transparent var(--sat)), linear-gradient(180deg, #faf9f6, #f2f1ee); box-shadow: 0 0 40px rgba(28,28,30,.25); } :where(html[data-theme="glass"]) .nav-shade { background: rgba(30,30,40,.22); } :where(html[data-theme="glass"]) .nav-burger { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72)); border: 1px solid rgba(255,255,255,.92); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px rgba(28,28,30,.3); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } :where(html[data-theme="glass"]) .nav-burger span { background: #2c2c30; } :where(html[data-theme="glass"]) .timer-fab { border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0; } :where(html[data-theme="glass"]) .timer-fab:not(.running) { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,249,246,.93)); } :where(html[data-theme="glass"]) .timer-fab:not(.running) .tf-go { color: #6e5218; } :where(html[data-theme="glass"]) .timer-fab:not(.running) .tf-last { color: rgba(110,82,24,.75); } /* полоса под кнопкой меню и значками — матовое стекло вместо сплошной заливки */ html[data-theme="glass"] body::before { background: linear-gradient(180deg, #1c1c1e 0, #1c1c1e var(--sat), transparent var(--sat)), linear-gradient(180deg, rgba(243,242,238,.9), rgba(243,242,238,.74)); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 rgba(255,255,255,.7), 0 8px 18px -14px rgba(28,28,30,.3); } :where(html[data-theme="glass"]) .login-wrap { padding: 26px 14px 18px; border-radius: 20px; } :where(html[data-theme="glass"]) .login-wrap .brand-name { font-size: 42px; } html[data-theme="glass"] body:has(.login-wrap)::before { background: linear-gradient(180deg, #1c1c1e 0, #1c1c1e var(--sat), transparent var(--sat)); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* строка таймера в карточке задачи — один в один как плашка .timer-fab.running (05.10.2026: была плотнее и темнее) */ :where(html[data-theme="glass"]) .tro-tbar-in { background: linear-gradient(180deg, rgba(46,86,130,.58), rgba(26,54,88,.66)); border-top-color: rgba(170,214,255,.55); -webkit-backdrop-filter: blur(18px) saturate(190%); backdrop-filter: blur(18px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -6px 12px -8px rgba(140,200,255,.3), 0 8px 20px -12px rgba(20,44,72,.55), 0 0 14px -6px rgba(109,179,242,.5); } :where(html[data-theme="glass"]) .tro-tb-t b { color: #c4e4ff; text-shadow: 0 0 8px rgba(124,192,255,.6); } :where(html[data-theme="glass"]) .tro-tb-t span { color: #eaf3fb; } :where(html[data-theme="glass"]) .tro-tb-go, :where(html[data-theme="glass"]) .tro-tb-go.primary { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,249,246,.86)); color: #6e5218; border-top: 1px solid rgba(188,160,98,.45); box-shadow: 0 -6px 22px rgba(28,28,30,.12); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } :where(html[data-theme="glass"]) .tro-tb-go:hover, :where(html[data-theme="glass"]) .tro-tb-go:active { background: rgba(255,255,255,.96); color: #5a3800; } /* айфон без нижней «домашней» полосы: фон документа под строкой таймера — её цвета */ html:where([data-theme="glass"]).ios-gap:has(.timer-fab:not(.tf-nomob)) { background: #f6f5f2; } html:where([data-theme="glass"]).ios-gap:has(.timer-fab.running:not(.tf-nomob)) { background: #2a4868; } html:where([data-theme="glass"]).ios-gap .timer-fab.running { background: linear-gradient(180deg, rgba(46,86,130,.9), rgba(26,54,88,.94)); } } /* ---------- статус «в сети» — тот же светло-зелёный, что в тёмной теме ---------- */ :where(html[data-theme="glass"]) .online-dot { background: #6fcf97; box-shadow: 0 0 6px #6fcf97; } :where(html[data-theme="glass"]) .online-status.on, :where(html[data-theme="glass"]) .chat-peer-st.on { color: #6fcf97; } :where(html[data-theme="glass"]) .chat-dot.on, :where(html[data-theme="glass"]) .ecard-avw.on::after, :where(html[data-theme="glass"]) .emp-online.on { background: #6fcf97; } /* ---------- аватары: фиолетовый светлее ---------- */ :where(html[data-theme="glass"]) .av-purple { background: #8f7abb; } /* ---------- доска: «Согласование» насыщеннее, «Готово» — зеленоватая ---------- */ :where(html[data-theme="glass"]) .board-col.board-col-appr:not(.drop-on) { background: rgba(232,160,72,.16); box-shadow: inset 0 0 0 1px rgba(214,148,64,.32); } :where(html[data-theme="glass"]) .board-col.board-col-doing:not(.drop-on) { background: rgba(70,130,220,.09); box-shadow: inset 0 0 0 1px rgba(60,115,205,.15); } :where(html[data-theme="glass"]) .board-col.board-col-done:not(.drop-on) { background: rgba(72,170,112,.10); box-shadow: inset 0 0 0 1px rgba(60,150,98,.16); } /* ---------- Сметы: цветные строки — светлые подложки (03.10.2026) ---------- В тёмной теме строки сметы залиты плотно и текст в них белый. В светлой те же заливки с тёмным текстом давали грязно-оливковые полосы, а липкие «№» и «Материал» были почти чёрными — читать было невозможно. Здесь светлые оттенки тех же цветов. */ :where(html[data-theme="glass"]) .est-table tr.est-due > td, :where(html[data-theme="glass"]) .est-table tr.est-due > td.est-stick { background: #f4e7c6; } :where(html[data-theme="glass"]) .est-table tr.est-due:hover > td, :where(html[data-theme="glass"]) .est-table tr.est-due:hover > td.est-stick { background: #efdfb4; } :where(html[data-theme="glass"]) .est-table tr.est-paid > td, :where(html[data-theme="glass"]) .est-table tr.est-paid > td.est-stick { background: #dcefd8; } :where(html[data-theme="glass"]) .est-table tr.est-paid:hover > td, :where(html[data-theme="glass"]) .est-table tr.est-paid:hover > td.est-stick { background: #cfe8ca; } :where(html[data-theme="glass"]) .est-table tr.est-due .est-rest-due { color: #7a5a12; font-weight: 700; } :where(html[data-theme="glass"]) .est-table tr.est-paid .est-rest-ok { color: #1a6b41; font-weight: 700; } @media (max-width: 900px) { :where(html[data-theme="glass"]) table.nt.est-table tr.est-due[data-est] { background: #f4e7c6; } :where(html[data-theme="glass"]) table.nt.est-table tr.est-paid[data-est] { background: #dcefd8; } :where(html[data-theme="glass"]) .est-table tr.est-due .est-msum, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-msum, :where(html[data-theme="glass"]) .est-table tr.est-due .est-mchev, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-mchev, :where(html[data-theme="glass"]) .est-table tr.est-due.est-mopen > td[data-l]::before, :where(html[data-theme="glass"]) .est-table tr.est-paid.est-mopen > td[data-l]::before { color: rgba(20,20,23,.6); } :where(html[data-theme="glass"]) .est-table tr.est-due .est-msum b, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-msum b, :where(html[data-theme="glass"]) .est-table tr.est-due .est-msum .sup, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-msum .sup { color: #141417; } :where(html[data-theme="glass"]) .est-table tr.est-due .est-msum .due, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-msum .due { color: #7a5a12; } :where(html[data-theme="glass"]) .est-table tr.est-due .est-msum .ok, :where(html[data-theme="glass"]) .est-table tr.est-paid .est-msum .ok { color: #1a6b41; } :where(html[data-theme="glass"]) .est-table tr.est-due.est-mopen .cell-txt, :where(html[data-theme="glass"]) .est-table tr.est-paid.est-mopen .cell-txt, :where(html[data-theme="glass"]) .est-table tr.est-due.est-mopen .cell-sel, :where(html[data-theme="glass"]) .est-table tr.est-paid.est-mopen .cell-sel { background: rgba(255,255,255,.78); border-color: rgba(28,28,30,.14); color: #141417; } } /* ---------- полоса загрузки «внимание» (warn): оранжевая вместо коричневой (03.10.2026) ---------- В светлой теме --tag-yellow-fg тёмно-оливковый (#6b5600), и полоса загрузки 110–130 % (и ниже нормы, 50–85 %) выглядела коричневой. Те же полосы в досье «Обзора» и на «Моей странице». */ :where(html[data-theme="glass"]) .ov-bar.warn i { background: #e8922f; } /* ---------- карточка сотрудника: идёт таймер — нижняя полоса слегка зелёная (03.10.2026) ---------- В тёмной теме полоса и так зелёная; генератор перевёл её в светлой теме в серую. */ :where(html[data-theme="glass"]) .ecard-foot.on { background: linear-gradient(180deg, #e6f5eb, #d9efe0); border-top-color: rgba(60,150,98,.3); } /* Переключатель «срок не нужен» (и другие .tmg-sw): в светлой теме дорожка была почти белой на белом — теперь серая с обводкой, бегунок белый с тенью; включён — цвет акцента (03.10.2026) */ :where(html[data-theme="glass"]) .tmg-sw i { background: #c3c3c8; box-shadow: inset 0 0 0 1px rgba(28,28,30,.1); } :where(html[data-theme="glass"]) .tmg-sw:hover i { background: #b6b6bc; box-shadow: inset 0 0 0 1px rgba(28,28,30,.14); } :where(html[data-theme="glass"]) .tmg-sw i::after { background: #fff; box-shadow: 0 1px 3px rgba(28,28,30,.32), 0 0 0 .5px rgba(28,28,30,.06); } :where(html[data-theme="glass"]) .tmg-sw input:checked + i { background: var(--accent); } :where(html[data-theme="glass"]) .tmg-sw input:checked + i::after { background: #fff; } /* Плашка «На утверждение» в светлой теме — тёплая оранжевая, а не серая (03.10.2026) */ :where(html[data-theme="glass"]) .ap-banner .appr-back { background: linear-gradient(90deg, #fde6c4, #fff1dd 55%, #fff8ee); border: 1px solid #efc184; box-shadow: 0 2px 12px rgba(180,110,30,.14); } :where(html[data-theme="glass"]) .ap-banner .appr-back:hover { border-color: #e8922f; box-shadow: 0 6px 18px rgba(180,110,30,.2); } :where(html[data-theme="glass"]) .ap-banner .appr-back-t { color: #4d3b20; } :where(html[data-theme="glass"]) .ap-banner .appr-back-t b { color: #2a1d0a; } :where(html[data-theme="glass"]) .ap-bn-n { color: #c0640a; } :where(html[data-theme="glass"]) .ap-bn-chip { background: rgba(255,255,255,.8); color: #6b4a16; box-shadow: inset 0 0 0 1px rgba(192,100,10,.2); } :where(html[data-theme="glass"]) .ap-bn-chip.long { background: #fde1dd; color: #b8323a; box-shadow: inset 0 0 0 1px rgba(184,50,58,.22); } :where(html[data-theme="glass"]) .ap-banner .appr-back-go { background: #e8922f; background-image: none; border-color: #e8922f; color: #fff; box-shadow: 0 1px 4px rgba(192,100,10,.3); text-shadow: none; } :where(html[data-theme="glass"]) .ap-banner .appr-back-go:hover { background: #d9801c; border-color: #d9801c; } /* «В активной разработке» v2 (04.10.2026): светлые значения переменных блока и всплывашки (генератор переменные не переводит), лёгкая тень у текущего этапа на полосе */ :where(html[data-theme="glass"]) .pfa, :where(html[data-theme="glass"]) .pfa-pop { --pfa-bad: #c9392f; --pfa-bad-ic: #e0564d; --pfa-bad-bg: rgba(224,86,77,.12); --pfa-wait: #ad6508; --pfa-wait-ic: #e39a2d; --pfa-wait-bg: rgba(227,154,45,.15); --pfa-wait-stripe: #f3c47c; --pfa-ok: #1b7a49; --pfa-ok-ic: #3aa66f; --pfa-ok-bg: rgba(58,166,111,.14); --pfa-done: #cdbd94; --pfa-cur: #a8873f; --pfa-late: #e0564d; --pfa-fut: #e2e0da; --pfa-hb: linear-gradient(90deg, #d2c095, #a8873f); --pfa-hb-bg: rgba(28,28,30,.07); --pfa-sum: rgba(168,135,63,.075); --pfa-sl-bg: rgba(168,135,63,.16); --pfa-sl: #7d6427; --pfa-line: rgba(28,28,30,.065); --pfa-hov: rgba(28,28,30,.035); --pfa-chip: rgba(28,28,30,.06); --pfa-pop-bg: #fff; --pfa-pop-bd: rgba(28,28,30,.1); --pfa-pop-sh: 0 18px 44px -14px rgba(28,28,30,.32), 0 2px 6px rgba(28,28,30,.06); } :where(html[data-theme="glass"]) .pfa-trk i.cur { box-shadow: 0 1px 3px rgba(168,135,63,.35); } :where(html[data-theme="glass"]) .pfa-trk i.cur.late { box-shadow: 0 1px 3px rgba(224,86,77,.35); } :where(html[data-theme="glass"]) .pfa-trk i.cur.wait { box-shadow: 0 1px 3px rgba(227,154,45,.35); } /* Табель на телефоне: кружки дней — мягкие тона в цветах статусов, а не плотная тёмная заливка (05.10.2026). Готово/норма — как статус «Готово», недобор — как красная метка, перебор — как «Согласование» */ :where(html[data-theme="glass"]) .ts-dot.ok i { background: #d0eedb; color: #1a6b41; box-shadow: inset 0 0 0 1px rgba(26,107,65,.18); } :where(html[data-theme="glass"]) .ts-dot.lo i { background: #fde1dd; color: #b8323a; box-shadow: inset 0 0 0 1px rgba(184,50,58,.2); } :where(html[data-theme="glass"]) .ts-dot.lo.now i { background: #ecebe7; color: #4c4c52; box-shadow: inset 0 0 0 1px rgba(28,28,30,.08); } :where(html[data-theme="glass"]) .ts-dot.hi i { background: #f8e2c3; color: #8c5212; box-shadow: inset 0 0 0 1px rgba(140,82,18,.18); } :where(html[data-theme="glass"]) .ts-dot.sel i { outline-color: #a8873f; } /* Шапка сворачиваемой панели повторяет скругление панели (у панели в светлой теме 18 px, у шапки было 9 px) — 05.10.2026 */ :where(html[data-theme="glass"]) .panel > h2.zone-head { border-radius: 17px 17px 0 0; } :where(html[data-theme="glass"]) .panel > h2.zone-head:last-child { border-radius: 17px; } :where(html[data-theme="glass"]) .hd-proj-open { background: rgba(255,255,255,.7); border-color: rgba(28,28,30,.1); color: #8a6a28; } /* Карточка сотрудника с идущим таймером заметнее в светлой теме (05.10.2026): насыщеннее зелёная нижняя полоса, тёмно-зелёный текст и время, зеленоватая рамка всей карточки. Прежняя полоса #e6f5eb почти сливалась с белым. */ :where(html[data-theme="glass"]) .ecard-run { border-color: rgba(46,140,88,.5); box-shadow: 0 0 0 1px rgba(46,140,88,.16), 0 6px 18px -10px rgba(30,110,64,.35); } :where(html[data-theme="glass"]) .ecard-foot.on { background: linear-gradient(180deg, #cdeed8, #b8e3c6); border-top-color: rgba(40,140,80,.45); color: #14532e; } :where(html[data-theme="glass"]) .ecard-foot.on .ecard-dot { background: #1f9d55; box-shadow: 0 0 6px rgba(31,157,85,.6); } :where(html[data-theme="glass"]) .ecard-foot.on .ecard-elapsed { color: #0f6a37; } :where(html[data-theme="glass"]) .ecard-run .ecard-state { color: #17733f; } /* Подписи групп в таймлайне: в тёмной теме 12,75 px, в светлой оставляем 12 px — здесь шрифт и так крупнее (font-size-adjust) (05.10.2026) */ :where(html[data-theme="glass"]) .gt-sec { font-size: 12px; } :where(html[data-theme="glass"]) .gt-sec span::before { height: 13px; } /* Разделы (этапы) внутри проекта на доске — светлая тема (05.10.2026) */ :where(html[data-theme="glass"]) .bs-head:hover { background: rgba(168,135,63,.10); } :where(html[data-theme="glass"]) .bs-body { border-left-color: rgba(28,28,30,.12); } :where(html[data-theme="glass"]) .bs-more { color: #8a6a28; } :where(html[data-theme="glass"]) .bs-add { background: rgba(255,255,255,.8); border-color: rgba(28,28,30,.12); color: #5f5f66; } :where(html[data-theme="glass"]) .bs-add:hover { color: #8a6a28; border-color: #a8873f; } /* Премии: значки в плашках рекомендаций — белые на цветном круге (тёмный значок на тёмно-зелёном/синем не читался) */ :where(html[data-theme="glass"]) .bn-tag i, :where(html[data-theme="glass"]) .bn-review-h i { color: #fff; } /* Календарь (09.10.2026): цвета отсутствий в светлой теме — текст полос и плашек темнее, в цвет вида (переменные .ab в style.css подобраны под тёмную тему, на светлом фоне «Болеет, работает удалённо» и «Отгул» не читались) */ :where(html[data-theme="glass"]) .ab { --ab-fg: #1d5c99; --ab-bg: rgba(90,160,230,.24); } :where(html[data-theme="glass"]) .ab.ab-off { --ab-fg: #a8441c; --ab-bg: rgba(232,110,70,.22); } :where(html[data-theme="glass"]) .ab.ab-remote { --ab-fg: #8a5a0c; --ab-bg: rgba(233,160,60,.26); } :where(html[data-theme="glass"]) .ab.ab-sickremote { --ab-fg: #a3345c; --ab-bg: rgba(230,130,160,.26); } :where(html[data-theme="glass"]) .ab.ab-sick { --ab-fg: #b0232c; --ab-bg: rgba(235,87,87,.22); } :where(html[data-theme="glass"]) .cev-wkd { background: rgba(155,138,99,.2); color: #7a6431; } /* Обучение (09.10.2026): каталог, страница ролика, прогресс команды — светлая тема (как в макете раздела) */ :where(html[data-theme="glass"]) .edu-box, :where(html[data-theme="glass"]) .edu-sr { background: var(--gl-bg); border-color: var(--gl-border); box-shadow: var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); } :where(html[data-theme="glass"]) .edu-card { background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.58)); border-color: rgba(255,255,255,.92); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(38,42,52,.42); } :where(html[data-theme="glass"]) .edu-card:hover, :where(html[data-theme="glass"]) .edu-feat:hover { border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 16px 28px -14px rgba(38,42,52,.5); } :where(html[data-theme="glass"]) .edu-card:focus-visible { box-shadow: 0 0 0 2px #c9a24a; } :where(html[data-theme="glass"]) .edu-feat.new { background: linear-gradient(180deg, rgba(255,251,240,.86), rgba(255,245,222,.56)); border-color: rgba(232,206,148,.95); box-shadow: inset 0 1px 0 #fff, 0 12px 26px -16px rgba(150,110,40,.4), 0 0 18px -8px rgba(214,184,116,.5); } :where(html[data-theme="glass"]) .edu-thumb { background: #f3efe7; box-shadow: 0 0 0 1px rgba(28,28,30,.06); } :where(html[data-theme="glass"]) .edu-kicker.gold, :where(html[data-theme="glass"]) .edu-gold, :where(html[data-theme="glass"]) .edu-num, :where(html[data-theme="glass"]) .edu-chtime, :where(html[data-theme="glass"]) .edu-cuet, :where(html[data-theme="glass"]) .edu-hit-t, :where(html[data-theme="glass"]) .edu-title .ic-svg { color: #8a6a28; } :where(html[data-theme="glass"]) .edu-ok { color: #17703f; } :where(html[data-theme="glass"]) .edu-chip { background: rgba(255,255,255,.7); color: #45474d; box-shadow: inset 0 0 0 1px rgba(28,28,30,.09); } :where(html[data-theme="glass"]) .edu-bar, :where(html[data-theme="glass"]) .edu-mini { background: rgba(52,56,66,.1); box-shadow: inset 0 1px 2px rgba(38,42,52,.12); } :where(html[data-theme="glass"]) .edu-gsegs i { background: rgba(52,56,66,.16); } :where(html[data-theme="glass"]) .edu-gsegs i.d { background: linear-gradient(90deg, #dcb866, #b48c38); } :where(html[data-theme="glass"]) .edu-gsegs i.p { background: linear-gradient(90deg, #dcb866 0 var(--p), rgba(52,56,66,.16) var(--p) 100%); } :where(html[data-theme="glass"]) .edu-gsegs i.n { background: rgba(214,176,92,.45); } :where(html[data-theme="glass"]) .edu-ch:hover, :where(html[data-theme="glass"]) .edu-cue:hover, :where(html[data-theme="glass"]) .edu-hit:hover { background: rgba(255,255,255,.75); } :where(html[data-theme="glass"]) .edu-ch.cur, :where(html[data-theme="glass"]) .edu-cue.cur { background: rgba(255,255,255,.9); box-shadow: inset 3px 0 0 #c9a24a, 0 2px 8px -4px rgba(38,42,52,.25); } :where(html[data-theme="glass"]) .edu-chn { background: rgba(52,56,66,.08); color: #55555b; } :where(html[data-theme="glass"]) .edu-chc { background: rgba(120,228,176,.45); color: #116b44; } :where(html[data-theme="glass"]) .edu-admin { background: rgba(255,248,232,.72); border-color: #b48c38; } :where(html[data-theme="glass"]) .edu-admin-ico { color: #8a6a28; } :where(html[data-theme="glass"]) .edu-asgbar { background: rgba(255,244,220,.78); border-color: rgba(214,176,92,.6); } :where(html[data-theme="glass"]) .edu-asgbar.late { background: rgba(255,232,230,.78); border-color: rgba(217,71,63,.45); } :where(html[data-theme="glass"]) .edu-asg-ico { color: #8a6a28; } :where(html[data-theme="glass"]) .edu-search { background: #fdfdfc; border-color: rgba(28,28,30,.12); box-shadow: inset 0 1px 2px rgba(38,42,52,.06); color: #6b6b72; } :where(html[data-theme="glass"]) .edu-search:focus-within { border-color: #b48c38; } :where(html[data-theme="glass"]) .edu-back { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.92); box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(38,42,52,.12); } :where(html[data-theme="glass"]) .edu-back:hover { border-color: #c9a24a; } :where(html[data-theme="glass"]) .edu-ring-bg { stroke: rgba(52,56,66,.12); } :where(html[data-theme="glass"]) .edu-ring.done > span { color: #1f8a55; } :where(html[data-theme="glass"]) .edu-keys kbd { background: #fff; box-shadow: inset 0 -1px 0 rgba(28,28,30,.18), 0 0 0 1px rgba(28,28,30,.1); } :where(html[data-theme="glass"]) .edu-asg-list { background: rgba(255,255,255,.62); } :where(html[data-theme="glass"]) .edu-asg-emp.on, :where(html[data-theme="glass"]) .edu-asg-vid.on { background: rgba(255,236,196,.6); } :where(html[data-theme="glass"]) .edu-asg-sum { background: rgba(255,244,220,.7); } :where(html[data-theme="glass"]) .edu-row-late td { background: rgba(217,71,63,.05); } :where(html[data-theme="glass"]) .edu-acc-thumbs img { box-shadow: 0 0 0 2px #fff; } :where(html[data-theme="glass"]) .edu-newbar { border-color: rgba(232,206,148,.95); } :where(html[data-theme="glass"]) .edu-sres mark { background: rgba(255,214,120,.55); } :where(html[data-theme="glass"]) .ep { box-shadow: 0 24px 50px -24px rgba(28,28,30,.55); }