/* ============================================================ ТЕМЫ ОФОРМЛЕНИЯ (14.09.2026). Один код — пять тем, у каждой светлый и тёмный режим. Тема = атрибут 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; } /* ---------- Подписи тем: по одной-две детали, которые делают характер узнаваемым ---------- */ /* 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} /* Логотип: знак продукта на плашке темы */ 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="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}