/* ============================================================ ТЕМЫ ОФОРМЛЕНИЯ (14.09.2026, +2 темы 17.09). Один код — семь тем, у каждой светлый и тёмный режим. Тема = атрибут data-skin на (нет атрибута — базовая pulse), режим = data-theme. Здесь ТОЛЬКО токены и несколько «подписей» темы. Раскладка и детали — в styles.css/ui.css, где ни одного зашитого цвета: всё через var(--…), поэтому переключение темы проходит через всё: тени, выбранные состояния, фокус, ссылки, разделители, графики, скроллбары, бейджи, модалки, тосты, панели и страницу входа. Порядок каскада: :root (тёмная база pulse) < html[data-skin] (тёмная тема) < :root[data-theme="light"] (светлая pulse) < html[data-skin][data-theme="light"] (светлая тема). ============================================================ */ /* ---------- copper · «Графит и медь» — инженерная ведомость ---------- */ html[data-skin="copper"]{ --font:"IBM Plex Sans","Inter",-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace; --font-mono:var(--mono); --r:10px; --bg:#141312; --bg-2:#191817; --panel:#1b1a19; --panel-2:#242321; --stroke:rgba(230,226,220,.11); --stroke-2:rgba(230,226,220,.20); --txt:#efeeec; --txt-2:#bab8b4; --txt-3:#908e8a; --c1:#d4a06a; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#7fc7a3; --ok:#78c9a2; --warn:#dcb86f; --bad:#e28d84; --ok-fg:var(--ok); --warn-fg:var(--warn); --bad-fg:var(--bad); --brand:#c9843f; --brand-ink:#15100b; --grid:#2a2927; --th-bg:#1e1d1b; --sticky-col:#1b1a19; --sticky-col-even:#1e1d1b; --sticky-col-hover:#262421; --track:rgba(230,226,220,.06); --tip-bg:#191817; --card-1:#1b1a19; --card-2:#1b1a19; --heading:#efeeec; --heading-2:#efeeec; --overlay-soft:rgba(230,226,220,.12); --zebra:rgba(230,226,220,.02); --ink:#0b0907; --paper:#f3ede4; --shadow-ink:#1a1008; --shadow:0 18px 42px -30px color-mix(in srgb, var(--shadow-ink) 90%, transparent); --on-accent:#1a120a; --on-status:#15100b; --sidebar-bg:#100f0e; --nav-fg:#9c9a94; --nav-hover:#1f1e1c; --nav-active-bg:var(--c1); --nav-active-fg:#1a120a; --nav-active-icon:#1a120a; --seg-on-bg:var(--c1); --seg-on-fg:#1a120a; --primary-bg:var(--c1); --primary-fg:#1a120a; --logo-bg:var(--brand); --logo-fg:#15100b; --switch-on:var(--c1); --avatar-bg:var(--c1); --avatar-fg:#1a120a; --link:var(--c1); --focus:var(--c1); --selection-bg:#8a5a2f; --selection-fg:#ffffff; --intro-bg:#1b1a19; --intro-fg:#f1ede6; --intro-muted:#9c9a94; } html[data-skin="copper"][data-theme="light"]{ --bg:#f3f2ee; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#ecebe5; --stroke:#dcdad3; --stroke-2:#c9c6bd; --txt:#17191b; --txt-2:#484d50; --txt-3:#5f6568; --c1:#9a4f18; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#1a7148; --ok:#1a7148; --warn:#8f5410; --bad:#b5332c; --ok-fg:#14603e; --warn-fg:#7a4708; --bad-fg:#9c2a24; --brand:#c9843f; --brand-ink:#15100b; --grid:#e2e0d9; --th-bg:#eeede8; --sticky-col:#ffffff; --sticky-col-even:#f7f6f2; --sticky-col-hover:#f1efe8; --track:#e6e4dd; --tip-bg:rgba(255,255,255,.98); --card-1:#ffffff; --card-2:#ffffff; --heading:#17191b; --heading-2:#5f6568; --overlay-soft:#dad8d1; --zebra:rgba(23,25,27,.025); --ink:#1a1410; --paper:#fffdf9; --shadow-ink:#3a2a1c; --shadow:0 1px 2px color-mix(in srgb, var(--shadow-ink) 6%, transparent),0 10px 28px -20px color-mix(in srgb, var(--shadow-ink) 18%, transparent); --on-accent:#ffffff; --on-status:#ffffff; --sidebar-bg:#fbfaf6; --nav-fg:#5f6461; --nav-hover:#efece5; --nav-active-bg:linear-gradient(90deg,color-mix(in srgb, var(--brand) 30%, transparent),color-mix(in srgb, var(--brand) 10%, transparent)); --nav-active-fg:#3a2311; --nav-active-icon:#9a4f18; --seg-on-bg:#1f1c19; --seg-on-fg:#ffffff; --primary-bg:#9a4f18; --primary-fg:#ffffff; --logo-bg:var(--brand); --logo-fg:#15100b; --switch-on:#9a4f18; --avatar-bg:#1f1c19; --avatar-fg:#e6b27a; --link:#9a4f18; --focus:#9a4f18; --selection-bg:#f0d3b5; --selection-fg:#1a1410; --intro-bg:#1f1c19; --intro-fg:#f3ede4; --intro-muted:#a39e96; } /* ---------- ink · «Чернила и бумага» — банковская выписка ---------- */ html[data-skin="ink"]{ --font:"Source Sans 3","Inter",-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace; --font-mono:var(--mono); --r:6px; --bg:#0c1220; --bg-2:#101829; --panel:#131c30; --panel-2:#1b2640; --stroke:rgba(190,205,240,.13); --stroke-2:rgba(190,205,240,.24); --txt:#e8edf8; --txt-2:#b3bfd8; --txt-3:#8592ad; --c1:#7fa3ff; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#6fd0a0; --ok:#6fd0a0; --warn:#e6bd6a; --bad:#f28f88; --ok-fg:var(--ok); --warn-fg:var(--warn); --bad-fg:var(--bad); --brand:#3b66e6; --brand-ink:#ffffff; --grid:#24314d; --th-bg:#172239; --sticky-col:#131c30; --sticky-col-even:#162038; --sticky-col-hover:#1e2c4a; --track:rgba(190,205,240,.08); --tip-bg:#101829; --card-1:#131c30; --card-2:#131c30; --heading:#e8edf8; --heading-2:#e8edf8; --overlay-soft:rgba(190,205,240,.15); --zebra:rgba(190,205,240,.025); --ink:#04070f; --paper:#dfe7fb; --shadow-ink:#020611; --shadow:0 18px 42px -30px color-mix(in srgb, var(--shadow-ink) 95%, transparent); --on-accent:#ffffff; --on-status:#0a0f1b; --sidebar-bg:#0a0f1b; --nav-fg:#8f9bb8; --nav-hover:#172038; --nav-active-bg:var(--brand); --nav-active-fg:#ffffff; --nav-active-icon:#ffffff; --seg-on-bg:var(--brand); --seg-on-fg:#ffffff; --primary-bg:var(--brand); --primary-fg:#ffffff; --logo-bg:var(--brand); --logo-fg:#ffffff; --switch-on:var(--c1); --avatar-bg:var(--brand); --avatar-fg:#ffffff; --link:#9db8ff; --focus:var(--c1); --selection-bg:var(--brand); --selection-fg:#ffffff; --intro-bg:#1b2f6b; --intro-fg:#f2f5ff; --intro-muted:#a9b8e3; } html[data-skin="ink"][data-theme="light"]{ --bg:#f4f5f9; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#eaeef6; --stroke:#d3dae8; --stroke-2:#b9c4d9; --txt:#0e1a33; --txt-2:#3a4763; --txt-3:#5d6a85; --c1:#1e4fd6; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#10714a; --ok:#10714a; --warn:#8a5b00; --bad:#bf2b2b; --ok-fg:#0d5c3c; --warn-fg:#6f4900; --bad-fg:#a02323; --brand:#1b2f6b; --brand-ink:#ffffff; --grid:#dbe1ec; --th-bg:#e8edf6; --sticky-col:#ffffff; --sticky-col-even:#f5f7fb; --sticky-col-hover:#e6edfb; --track:#e1e7f1; --tip-bg:rgba(255,255,255,.98); --card-1:#ffffff; --card-2:#ffffff; --heading:#0e1a33; --heading-2:#5d6a85; --overlay-soft:#cfd8e8; --zebra:rgba(14,26,51,.03); --ink:#0e1a33; --paper:#ffffff; --shadow-ink:#1b2f6b; --shadow:0 1px 2px color-mix(in srgb, var(--shadow-ink) 8%, transparent),0 12px 30px -20px color-mix(in srgb, var(--shadow-ink) 24%, transparent); --on-accent:#ffffff; --on-status:#ffffff; --sidebar-bg:#ffffff; --nav-fg:#55627f; --nav-hover:#edf1f8; --nav-active-bg:var(--brand); --nav-active-fg:#ffffff; --nav-active-icon:#ffffff; --seg-on-bg:var(--brand); --seg-on-fg:#ffffff; --primary-bg:#1e4fd6; --primary-fg:#ffffff; --logo-bg:var(--brand); --logo-fg:#ffffff; --switch-on:#1e4fd6; --avatar-bg:var(--brand); --avatar-fg:#ffffff; --link:#1e4fd6; --focus:#1e4fd6; --selection-bg:#c9d8ff; --selection-fg:#0e1a33; --intro-bg:#1b2f6b; --intro-fg:#f2f5ff; --intro-muted:#a9b8e3; } /* ---------- signal · «Приборная панель» — сигнальный циан вместо зелёного ---------- */ html[data-skin="signal"]{ --font:"Space Grotesk","Inter",-apple-system,"Segoe UI",sans-serif; --mono:"Roboto Mono","SFMono-Regular",Consolas,monospace; --font-mono:var(--mono); --r:8px; --bg:#111212; --bg-2:#161718; --panel:#191a1b; --panel-2:#212324; --stroke:rgba(228,230,230,.11); --stroke-2:rgba(228,230,230,.20); --txt:#eef1f1; --txt-2:#b4b9ba; --txt-3:#8b9192; --c1:#3fd3ee; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#6fcfa0; --ok:#6fcfa0; --warn:#e3c55e; --bad:#f08484; --ok-fg:var(--ok); --warn-fg:var(--warn); --bad-fg:var(--bad); --brand:#22c8e8; --brand-ink:#06171c; --grid:#292b2c; --th-bg:#1c1e1f; --sticky-col:#191a1b; --sticky-col-even:#1c1d1e; --sticky-col-hover:#242627; --track:rgba(228,230,230,.07); --tip-bg:#161718; --card-1:#191a1b; --card-2:#191a1b; --heading:#eef1f1; --heading-2:#eef1f1; --overlay-soft:rgba(228,230,230,.13); --zebra:rgba(228,230,230,.022); --ink:#050606; --paper:#e6f0f2; --shadow-ink:#000a0d; --shadow:0 18px 42px -30px color-mix(in srgb, var(--shadow-ink) 95%, transparent); --on-accent:#06171c; --on-status:#06171c; --sidebar-bg:#0e0f0f; --nav-fg:#8d9495; --nav-hover:#1b1d1e; --nav-active-bg:var(--brand); --nav-active-fg:#06171c; --nav-active-icon:#06171c; --seg-on-bg:var(--brand); --seg-on-fg:#06171c; --primary-bg:var(--brand); --primary-fg:#06171c; --logo-bg:var(--brand); --logo-fg:#06171c; --switch-on:var(--c1); --avatar-bg:#212324; --avatar-fg:var(--c1); --link:#5fdcf2; --focus:var(--c1); --selection-bg:var(--brand); --selection-fg:#06171c; --intro-bg:#111212; --intro-fg:#eef1f1; --intro-muted:#8d9495; } html[data-skin="signal"][data-theme="light"]{ --bg:#f3f4f4; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#e9ecec; --stroke:#d4d9da; --stroke-2:#bcc3c5; --txt:#121617; --txt-2:#3f4749; --txt-3:#5f686a; --c1:#0b7a99; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#147a52; --ok:#147a52; --warn:#85610a; --bad:#b83a3a; --ok-fg:#0f6342; --warn-fg:#6b4d05; --bad-fg:#9c2d2d; --brand:#0b7a99; --brand-ink:#ffffff; --grid:#dde2e3; --th-bg:#eaeeee; --sticky-col:#ffffff; --sticky-col-even:#f5f7f7; --sticky-col-hover:#e3f1f6; --track:#e2e6e7; --tip-bg:rgba(255,255,255,.98); --card-1:#ffffff; --card-2:#ffffff; --heading:#121617; --heading-2:#5f686a; --overlay-soft:#ced5d7; --zebra:rgba(18,22,23,.03); --ink:#121617; --paper:#ffffff; --shadow-ink:#0b3a48; --shadow:0 1px 2px color-mix(in srgb, var(--shadow-ink) 7%, transparent),0 10px 28px -20px color-mix(in srgb, var(--shadow-ink) 22%, transparent); --on-accent:#ffffff; --on-status:#ffffff; --sidebar-bg:#ffffff; --nav-fg:#5b6466; --nav-hover:#eef1f2; --nav-active-bg:var(--brand); --nav-active-fg:#ffffff; --nav-active-icon:#ffffff; --seg-on-bg:#121617; --seg-on-fg:#ffffff; --primary-bg:var(--brand); --primary-fg:#ffffff; --logo-bg:var(--brand); --logo-fg:#ffffff; --switch-on:var(--brand); --avatar-bg:#121617; --avatar-fg:#3fd3ee; --link:var(--brand); --focus:var(--brand); --selection-bg:#bfe9f4; --selection-fg:#121617; --intro-bg:#121617; --intro-fg:#eef1f1; --intro-muted:#8d9495; } /* ---------- mono · «Монохром» — только градации серого; цвет лишь у семантики (успех/предупреждение/ошибка), приглушённо ---------- */ html[data-skin="mono"]{ --font:"Inter","Manrope",-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace; --font-mono:var(--mono); --r:8px; --bg:#101010; --bg-2:#161616; --panel:#191919; --panel-2:#222222; --stroke:rgba(255,255,255,.10); --stroke-2:rgba(255,255,255,.19); --txt:#f2f2f2; --txt-2:#b4b4b4; --txt-3:#8c8c8c; --c1:#f0f0f0; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#8fb89c; --cat-1:#f0f0f0; --cat-2:#b4b4b4; --cat-3:#848484; --cat-4:#5a5a5a; --cat-5:#d2d2d2; --cat-other:#6e6e6e; --cat-hatch:1; --ok:#8fb89c; --warn:#c9b06a; --bad:#d39088; --ok-fg:var(--ok); --warn-fg:var(--warn); --bad-fg:var(--bad); --brand:#e6e6e6; --brand-ink:#111111; --grid:#2a2a2a; --th-bg:#1e1e1e; --sticky-col:#191919; --sticky-col-even:#1c1c1c; --sticky-col-hover:#262626; --track:rgba(255,255,255,.07); --tip-bg:#161616; --card-1:#191919; --card-2:#191919; --heading:#f2f2f2; --heading-2:#f2f2f2; --overlay-soft:rgba(255,255,255,.13); --zebra:rgba(255,255,255,.02); --ink:#000000; --paper:#ffffff; --shadow-ink:#000000; --shadow:0 18px 42px -30px color-mix(in srgb, var(--shadow-ink) 95%, transparent); --on-accent:#111111; --on-status:#111111; --sidebar-bg:#0c0c0c; --nav-fg:#8c8c8c; --nav-hover:#181818; --nav-active-bg:#e6e6e6; --nav-active-fg:#111111; --nav-active-icon:#111111; --seg-on-bg:#e6e6e6; --seg-on-fg:#111111; --primary-bg:#e6e6e6; --primary-fg:#111111; --logo-bg:#e6e6e6; --logo-fg:#111111; --switch-on:#e6e6e6; --avatar-bg:#2a2a2a; --avatar-fg:#f0f0f0; --link:#f0f0f0; --focus:#ffffff; --selection-bg:#d0d0d0; --selection-fg:#111111; --intro-bg:#0c0c0c; --intro-fg:#f2f2f2; --intro-muted:#8c8c8c; } html[data-skin="mono"][data-theme="light"]{ --bg:#f4f4f4; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#ececec; --stroke:#dcdcdc; --stroke-2:#c4c4c4; --txt:#111111; --txt-2:#444444; --txt-3:#666666; --c1:#1a1a1a; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#2f7a55; --cat-1:#1a1a1a; --cat-2:#505050; --cat-3:#808080; --cat-4:#ababab; --cat-5:#333333; --cat-other:#9a9a9a; --cat-hatch:1; --ok:#2f7a55; --warn:#8a6a1f; --bad:#a8433f; --ok-fg:#2b6b4c; --warn-fg:#735717; --bad-fg:#933a36; --brand:#111111; --brand-ink:#ffffff; --grid:#e0e0e0; --th-bg:#ededed; --sticky-col:#ffffff; --sticky-col-even:#f6f6f6; --sticky-col-hover:#ededed; --track:#e4e4e4; --tip-bg:rgba(255,255,255,.98); --card-1:#ffffff; --card-2:#ffffff; --heading:#111111; --heading-2:#666666; --overlay-soft:#d4d4d4; --zebra:rgba(17,17,17,.03); --ink:#111111; --paper:#ffffff; --shadow-ink:#000000; --shadow:0 1px 2px color-mix(in srgb, var(--shadow-ink) 6%, transparent),0 10px 28px -20px color-mix(in srgb, var(--shadow-ink) 18%, transparent); --on-accent:#ffffff; --on-status:#ffffff; --sidebar-bg:#ffffff; --nav-fg:#5e5e5e; --nav-hover:#efefef; --nav-active-bg:#111111; --nav-active-fg:#ffffff; --nav-active-icon:#ffffff; --seg-on-bg:#111111; --seg-on-fg:#ffffff; --primary-bg:#111111; --primary-fg:#ffffff; --logo-bg:#111111; --logo-fg:#ffffff; --switch-on:#111111; --avatar-bg:#111111; --avatar-fg:#ffffff; --link:#111111; --focus:#111111; --selection-bg:#cfcfcf; --selection-fg:#111111; --intro-bg:#111111; --intro-fg:#f4f4f4; --intro-muted:#9a9a9a; } /* ---------- stone · «Тёплая бумага» — стол аналитика: каменный фон, волосяные линии, один циан (по референсу Seline) ---------- */ html[data-skin="stone"]{ --font:"Inter","Manrope",-apple-system,"Segoe UI",sans-serif; --font-display:"Inter Tight","Inter",sans-serif; --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace; --font-mono:var(--mono); --r:10px; --bg:#12100f; --bg-2:#181615; --panel:#1c1917; --panel-2:#292524; --stroke:rgba(231,229,228,.11); --stroke-2:rgba(231,229,228,.20); --txt:#f5f5f4; --txt-2:#bdb8b4; --txt-3:#918b86; --c1:#5bb6f5; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#7fc7a3; --ok:#7cc9a0; --warn:#dcb86f; --bad:#e58f86; --ok-fg:var(--ok); --warn-fg:var(--warn); --bad-fg:var(--bad); --brand:#3ba6f1; --brand-ink:#0c0a09; --grid:#2b2725; --th-bg:#1f1c1a; --sticky-col:#1c1917; --sticky-col-even:#1f1c1a; --sticky-col-hover:#292524; --track:rgba(231,229,228,.07); --tip-bg:#181615; --card-1:#1c1917; --card-2:#1c1917; --heading:#f5f5f4; --heading-2:#f5f5f4; --overlay-soft:rgba(231,229,228,.13); --zebra:rgba(231,229,228,.02); --ink:#0c0a09; --paper:#fafaf9; --shadow-ink:#000000; --shadow:0 12px 45px -28px color-mix(in srgb, var(--shadow-ink) 90%, transparent); --on-accent:#0c0a09; --on-status:#0c0a09; --sidebar-bg:#0f0d0c; --nav-fg:#a8a29e; --nav-hover:#1f1c1a; --nav-active-bg:#292524; --nav-active-fg:#fafaf9; --nav-active-icon:#5bb6f5; --seg-on-bg:#fafaf9; --seg-on-fg:#0c0a09; --primary-bg:#3ba6f1; --primary-fg:#0c0a09; --logo-bg:#fafaf9; --logo-fg:#0c0a09; --switch-on:#3ba6f1; --avatar-bg:#292524; --avatar-fg:#5bb6f5; --link:#7cc4f7; --focus:#3ba6f1; --selection-bg:#1d5f8f; --selection-fg:#ffffff; --intro-bg:#1c1917; --intro-fg:#fafaf9; --intro-muted:#a8a29e; } html[data-skin="stone"][data-theme="light"]{ --bg:#fafaf9; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f3f2f0; --stroke:#e8e6e5; --stroke-2:#d6d3d1; --txt:#0c0a09; --txt-2:#57534e; --txt-3:#78716c; --c1:#1a6fb5; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#1a7148; --ok:#1a7148; --warn:#8f5410; --bad:#b5332c; --ok-fg:#14603e; --warn-fg:#7a4708; --bad-fg:#9c2a24; --brand:#3ba6f1; --brand-ink:#0c0a09; --grid:#ebe9e7; --th-bg:#f5f4f2; --sticky-col:#ffffff; --sticky-col-even:#fbfaf9; --sticky-col-hover:#eef6fd; --track:#ebe9e7; --tip-bg:rgba(255,255,255,.98); --card-1:#ffffff; --card-2:#ffffff; --heading:#0c0a09; --heading-2:#78716c; --overlay-soft:#d6d3d1; --zebra:rgba(12,10,9,.022); --ink:#0c0a09; --paper:#ffffff; --shadow-ink:#110c2e; --shadow:0 4px 16px 0 rgba(0,0,0,.05); --on-accent:#0c0a09; --on-status:#ffffff; --sidebar-bg:#fafaf9; --nav-fg:#78716c; --nav-hover:#f0efed; --nav-active-bg:#1c1917; --nav-active-fg:#ffffff; --nav-active-icon:#7cc4f7; --seg-on-bg:#1c1917; --seg-on-fg:#ffffff; --primary-bg:#3ba6f1; --primary-fg:#0c0a09; --logo-bg:#0c0a09; --logo-fg:#fafaf9; --switch-on:#3ba6f1; --avatar-bg:#1c1917; --avatar-fg:#7cc4f7; --link:#1a6fb5; --focus:#3ba6f1; --selection-bg:#c1e1f7; --selection-fg:#0c0a09; --intro-bg:#1c1917; --intro-fg:#fafaf9; --intro-muted:#a8a29e; } /* ---------- ember · «Годовой отчёт» — графит на белом, серые плашки, одна оранжевая метка (по референсу Ventriloc) ---------- */ html[data-skin="ember"]{ --font:"Inter","Manrope",-apple-system,"Segoe UI",sans-serif; --font-display:"Space Grotesk","Inter",sans-serif; --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace; --font-mono:var(--mono); --r:8px; --bg:#141414; --bg-2:#1a1a1a; --panel:#202020; --panel-2:#2a2a2a; --stroke:rgba(239,239,239,.10); --stroke-2:rgba(239,239,239,.19); --txt:#f5f5f5; --txt-2:#bcbcbc; --txt-3:#8f8f8f; --c1:#ff8a57; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#7fc7a3; --ok:#7cc9a0; --warn:#d9b76a; --bad:#e58f86; --ok-fg:var(--ok); --warn-fg:var(--warn); --bad-fg:var(--bad); --brand:#ff682c; --brand-ink:#1a0d06; --grid:#2c2c2c; --th-bg:#242424; --sticky-col:#202020; --sticky-col-even:#232323; --sticky-col-hover:#2c2c2c; --track:rgba(239,239,239,.07); --tip-bg:#1a1a1a; --card-1:#202020; --card-2:#202020; --heading:#f5f5f5; --heading-2:#f5f5f5; --overlay-soft:rgba(239,239,239,.13); --zebra:rgba(239,239,239,.02); --ink:#000000; --paper:#ffffff; --shadow-ink:#000000; --shadow:none; --on-accent:#1a0d06; --on-status:#141414; --sidebar-bg:#101010; --nav-fg:#9a9a9a; --nav-hover:#1e1e1e; --nav-active-bg:#efefef; --nav-active-fg:#202020; --nav-active-icon:#c2410c; --seg-on-bg:#efefef; --seg-on-fg:#202020; --primary-bg:#efefef; --primary-fg:#202020; --logo-bg:#ff682c; --logo-fg:#1a0d06; --switch-on:#ff682c; --avatar-bg:#2a2a2a; --avatar-fg:#ff8a57; --link:#f5f5f5; --focus:#ff682c; --selection-bg:#7a3212; --selection-fg:#ffffff; --intro-bg:#202020; --intro-fg:#f5f5f5; --intro-muted:#9a9a9a; } html[data-skin="ember"][data-theme="light"]{ --bg:#ffffff; --bg-2:#f5f5f5; --panel:#f5f5f5; --panel-2:#efefef; --stroke:#e8e8e8; --stroke-2:#d2d2d2; --txt:#202020; --txt-2:#4d4d4d; --txt-3:#6b6b6b; --c1:#c2410c; --c2:var(--ok); --c3:var(--cat-2); --c4:var(--bad); --c5:var(--txt-2); --c6:var(--cat-3); --wa:#1a7148; --ok:#1a7148; --warn:#816729; --bad:#b5332c; --ok-fg:#14603e; --warn-fg:#6b541f; --bad-fg:#9c2a24; --brand:#ff682c; --brand-ink:#1a0d06; --grid:#e4e4e4; --th-bg:#efefef; --sticky-col:#f5f5f5; --sticky-col-even:#f0f0f0; --sticky-col-hover:#ebe6dd; --track:#e8e8e8; --tip-bg:rgba(255,255,255,.98); --card-1:#f5f5f5; --card-2:#f5f5f5; --heading:#202020; --heading-2:#6b6b6b; --overlay-soft:#d8d8d8; --zebra:rgba(32,32,32,.025); --ink:#202020; --paper:#ffffff; --shadow-ink:#000000; --shadow:none; --on-accent:#ffffff; --on-status:#ffffff; --sidebar-bg:#ffffff; --nav-fg:#6b6b6b; --nav-hover:#f5f5f5; --nav-active-bg:#202020; --nav-active-fg:#ffffff; --nav-active-icon:#ff8a57; --seg-on-bg:#202020; --seg-on-fg:#ffffff; --primary-bg:#202020; --primary-fg:#ffffff; --logo-bg:#202020; --logo-fg:#ff8a57; --switch-on:#202020; --avatar-bg:#202020; --avatar-fg:#ff8a57; --link:#202020; --focus:#ff682c; --selection-bg:#ffd9c9; --selection-fg:#202020; --intro-bg:#202020; --intro-fg:#f5f5f5; --intro-muted:#9a9a9a; } /* ---------- Подписи тем: по одной-две детали, которые делают характер узнаваемым ---------- */ /* copper: медная кромка карточек и KPI — как линия чертежа */ html[data-skin="copper"] .card,html[data-skin="copper"] .kpi{border-top:2px solid color-mix(in srgb, var(--brand) 55%, transparent)} /* ink: выписка — двойная линия под шапкой таблицы, ссылки подчёркнуты чернилами */ html[data-skin="ink"] .tbl thead th{border-bottom:2px solid var(--brand)} html[data-skin="ink"] a:not(.btn):not(.nav-item){text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--link) 45%, transparent);text-underline-offset:2px} /* signal: показания приборов — крупные числа моноширинным */ html[data-skin="signal"] .kpi-val,html[data-skin="signal"] .sum-tbl td.num,html[data-skin="signal"] .tbl td.num{font-family:var(--mono);letter-spacing:-.01em} /* mono: иерархия контрастом и весом шрифта — шапки и итоги жирнее и темнее, ссылки подчёркнуты */ html[data-skin="mono"] .tbl th,html[data-skin="mono"] .spk-tbl th{color:var(--txt);font-weight:700} html[data-skin="mono"] .tbl tfoot td,html[data-skin="mono"] .spk-tbl tfoot td,html[data-skin="mono"] .kpi-val{font-weight:700} html[data-skin="mono"] a:not(.btn):not(.nav-item){text-decoration:underline;text-underline-offset:2px} /* stone: «шёпотом» — заголовки лёгким начертанием с плотным трекингом, всё интерактивное пилюлей, структура волосяными линиями */ html[data-skin="stone"] .topbar h1,html[data-skin="stone"] .card-head h3,html[data-skin="stone"] .kpi-val{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em} html[data-skin="stone"] .btn,html[data-skin="stone"] .btn-primary,html[data-skin="stone"] .select,html[data-skin="stone"] .seg,html[data-skin="stone"] .seg button,html[data-skin="stone"] .chip,html[data-skin="stone"] .nav-item{border-radius:9999px} html[data-skin="stone"] .card:hover{box-shadow:var(--shadow)} /* ember: три радиуса — острые кнопки, карточка с одним мягким углом (левый верхний), круглая навигация; глубина цветом плашки, без теней */ html[data-skin="ember"] .topbar h1,html[data-skin="ember"] .card-head h3,html[data-skin="ember"] .kpi-val{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em} html[data-skin="ember"] .btn,html[data-skin="ember"] .btn-primary,html[data-skin="ember"] .select,html[data-skin="ember"] .seg,html[data-skin="ember"] .seg button{border-radius:0} html[data-skin="ember"] .card,html[data-skin="ember"] .kpi{border-radius:6px 0 0 0;box-shadow:none;border-color:transparent} html[data-skin="ember"] .card:hover,html[data-skin="ember"] .kpi:hover{box-shadow:none;border-color:var(--stroke-2)} html[data-skin="ember"] .nav-item{border-radius:200px} html[data-skin="ember"] a:not(.btn):not(.nav-item){text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px} /* stone/ember: активный пункт меню — тёмная плашка, подпись берём из --nav-active-fg (общий светлый стиль берёт --brand-ink, у этих тем он тёмный) */ html[data-skin="stone"] .nav-item.active,html[data-skin="ember"] .nav-item.active{color:var(--nav-active-fg);box-shadow:none} html[data-skin="stone"] .nav-item.active svg,html[data-skin="ember"] .nav-item.active svg{color:var(--nav-active-icon)} /* Логотип: знак продукта на плашке темы */ html[data-skin] .logo-mark{background:var(--logo-bg);color:var(--logo-fg);box-shadow:none} html[data-skin] .brand-badge{background:var(--brand);color:var(--brand-ink)} /* ---------- Настройки → «Оформление»: плитки тем с превью ---------- */ .skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:4px 0 14px} .skin-tile{ display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:var(--r); border:1px solid var(--stroke);background:var(--bg-2);color:var(--txt);cursor:pointer;text-align:left;font:inherit; } .skin-tile:hover{border-color:var(--stroke-2)} .skin-tile.on{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--focus) 25%, transparent)} .skin-tile:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .skin-tile b{font-size:12.5px;font-weight:600} .skin-tile small{font-size:11px;color:var(--txt-3)} /* превью: мини-макет экрана (inline SVG в index.html) в цветах темы — токены --p-* задаются ниже под каждую тему и режим */ .skin-preview{ --p-bg:#f6f6f4;--p-side:#ffffff;--p-panel:#ffffff;--p-stroke:#e7e6e2;--p-txt:#0f0f0f;--p-muted:#84888f;--p-accent:#facc15; display:block;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;border:1px solid var(--p-stroke);background:var(--p-bg); } .skin-preview svg{display:block;width:100%;height:100%;stroke:none;stroke-width:1;fill:none} /* глобальное svg{stroke:currentColor} не должно обводить макет */ /* цвета превью — тёмный режим */ .skin-tile[data-skin-pick=""] .skin-preview{--p-bg:#121212;--p-side:#0f0f0f;--p-panel:#1a1a1a;--p-stroke:#2e2e2e;--p-txt:#f2f2f2;--p-muted:#8c8c8c;--p-accent:#facc15;--p-font:"Inter",sans-serif} .skin-tile[data-skin-pick="copper"] .skin-preview{--p-bg:#141312;--p-side:#100f0e;--p-panel:#1b1a19;--p-stroke:#302e2b;--p-txt:#eef0ee;--p-muted:#8e9593;--p-accent:#d4a06a;--p-font:"IBM Plex Sans",sans-serif} .skin-tile[data-skin-pick="ink"] .skin-preview{--p-bg:#0c1220;--p-side:#0a0f1b;--p-panel:#131c30;--p-stroke:#25324f;--p-txt:#e8edf8;--p-muted:#8592ad;--p-accent:#3b66e6;--p-font:"Source Sans 3",sans-serif} .skin-tile[data-skin-pick="signal"] .skin-preview{--p-bg:#111212;--p-side:#0e0f0f;--p-panel:#191a1b;--p-stroke:#2e3031;--p-txt:#e9f1f5;--p-muted:#86969f;--p-accent:#22c8e8;--p-font:"Space Grotesk",sans-serif} .skin-tile[data-skin-pick="stone"] .skin-preview{--p-bg:#12100f;--p-side:#0f0d0c;--p-panel:#1c1917;--p-stroke:#2f2b28;--p-txt:#f5f5f4;--p-muted:#918b86;--p-accent:#3ba6f1;--p-font:"Inter Tight",sans-serif} .skin-tile[data-skin-pick="ember"] .skin-preview{--p-bg:#141414;--p-side:#101010;--p-panel:#202020;--p-stroke:#2e2e2e;--p-txt:#f5f5f5;--p-muted:#8f8f8f;--p-accent:#ff682c;--p-font:"Space Grotesk",sans-serif} /* цвета превью — светлый режим */ .skin-tile[data-skin-pick="mono"] .skin-preview{--p-bg:#101010;--p-side:#0c0c0c;--p-panel:#191919;--p-stroke:#2e2e2e;--p-txt:#f2f2f2;--p-muted:#8c8c8c;--p-accent:#e6e6e6;--p-font:"Inter",sans-serif} :root[data-theme="light"] .skin-tile[data-skin-pick=""] .skin-preview{--p-bg:#f6f6f4;--p-side:#ffffff;--p-panel:#ffffff;--p-stroke:#e7e6e2;--p-txt:#0f0f0f;--p-muted:#84888f;--p-accent:#facc15} :root[data-theme="light"] .skin-tile[data-skin-pick="copper"] .skin-preview{--p-bg:#f3f2ee;--p-side:#fbfaf6;--p-panel:#ffffff;--p-stroke:#dcdad3;--p-txt:#17191b;--p-muted:#5f6568;--p-accent:#c9843f} :root[data-theme="light"] .skin-tile[data-skin-pick="ink"] .skin-preview{--p-bg:#f4f5f9;--p-side:#ffffff;--p-panel:#ffffff;--p-stroke:#d3dae8;--p-txt:#0e1a33;--p-muted:#5d6a85;--p-accent:#1b2f6b} :root[data-theme="light"] .skin-tile[data-skin-pick="signal"] .skin-preview{--p-bg:#f3f4f4;--p-side:#ffffff;--p-panel:#ffffff;--p-stroke:#d4d9da;--p-txt:#121617;--p-muted:#5f686a;--p-accent:#0b7a99} :root[data-theme="light"] .skin-tile[data-skin-pick="mono"] .skin-preview{--p-bg:#f4f4f4;--p-side:#ffffff;--p-panel:#ffffff;--p-stroke:#dcdcdc;--p-txt:#111111;--p-muted:#666666;--p-accent:#111111} :root[data-theme="light"] .skin-tile[data-skin-pick="stone"] .skin-preview{--p-bg:#fafaf9;--p-side:#fafaf9;--p-panel:#ffffff;--p-stroke:#e8e6e5;--p-txt:#0c0a09;--p-muted:#78716c;--p-accent:#3ba6f1} :root[data-theme="light"] .skin-tile[data-skin-pick="ember"] .skin-preview{--p-bg:#ffffff;--p-side:#ffffff;--p-panel:#efefef;--p-stroke:#e8e8e8;--p-txt:#202020;--p-muted:#828282;--p-accent:#ff682c}