/*
 * Finance OS visual styles ("Stil" in the Darstellung panel) — loaded right after design-system.css.
 * Spec: docs/ui-modernization/styles-interaction-research.md (§3 DNA, §4 components × states, §5 colour variants).
 *
 *   <html data-style="standard|soft|glass|fintech|graphite|liquid-glass" data-transparency="system|reduce|full">
 *   set before first paint by /display-preferences-boot.js from localStorage "financeDisplayPreferences".
 *
 *   standard      the design system as it is (no rules in this file)
 *   soft          neumorphism: everything in the page colour, form from a light/dark shadow pair; pressed and
 *                 selected = pushed in (inset) + accent text; fields are troughs with an underline
 *   glass         glassmorphism: frosted panels over a soft gradient; selected = milky, near-opaque frost;
 *                 pressed = denser frost + scale .98; no drop shadows on controls
 *   fintech       flat and bold: solid fills, 48px pills, weight 700, navy navigation island; selected = full
 *                 royal-blue fill; pressed = scale .97
 *   graphite      line and type: no shadows, gradients or blur; 4px corners, outline buttons; selected =
 *                 3px bar / underline + bold, segments invert; hover/pressed are flat state layers
 *   liquid-glass  Apple iOS 26 / macOS Tahoe: opaque content layer, glass only on navigation and overlays;
 *                 borderless glass capsules with a specular highlight and no drop shadow; pressed lights up
 *                 from within + grows 1.03 on a spring; sliding selection thumb (design-system.js)
 *
 * Structure per style (one section each, all literals of a style live in its section):
 *   :root[data-style=X]                                shape, density, weight and state mechanics (every contrast)
 *   :root[data-style=X]:not([data-contrast="high"])    colours light/dark (light-dark() pairs)
 *   :root[data-style=X][data-contrast="high"]          the style's own high contrast (keeps its shapes; opaque,
 *                                                      no blur, 2px edges instead of shadows) on top of the global HC
 * The shared component rules of design-system.css read --shape-*, --control-weight, --state-pressed-*,
 * --motion-state; the per-style component overrides follow in @layer overrides (marker "COMPONENT TOUCHES",
 * everything above it is copied into the Keycloak theme by tools/keycloak_theme.py).
 * Every pair is checked by tests/design_tokens_contrast_test.py (style × light/dark/HC, glass worst case
 * over black/white and over the glass backdrop) and tests/design_styles_a11y_test.py (axe, states, reflow).
 */
@layer reset, legacy, features, ds, overrides;

/* =============================================================== SHARED: reduced motion
   No scale, shift or spring when motion is reduced (panel switch or OS setting). */
:root[data-style][data-motion="reduce"] { --state-pressed-scale: 1; --state-pressed-shift: 0rem; --lg-press-scale: 1; --lg-icon-press-scale: 1; }
@media (prefers-reduced-motion: reduce) {
  :root[data-style]:not([data-motion="full"]) { --state-pressed-scale: 1; --state-pressed-shift: 0rem; --lg-press-scale: 1; --lg-icon-press-scale: 1; }
}

/* =============================================================== TOKENS: soft */
:root[data-style="soft"] {
  --shape-control: var(--radius-full);
  --shape-field: 0.875rem;
  --shape-card: 1.375rem;
  --shape-overlay: 1.375rem;
  --focus-offset: 0.1875rem;
  --state-pressed-scale: 1;
  --state-pressed-shift: 0.0625rem;
  --motion-state: 160ms;
  --ease-state: cubic-bezier(0.3, 0.7, 0.4, 1);
  --radius: 0.875rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.375rem;
}
:root[data-style="soft"]:not([data-contrast="high"]) {
  --color-canvas: light-dark(#e6ebf2, #252a33);
  --color-surface: light-dark(#e6ebf2, #252a33);
  --color-surface-subtle: light-dark(#e6ebf2, #252a33);
  --color-surface-sunken: light-dark(#dde3eb, #1f232b);
  --color-surface-hover: light-dark(#dbe2ec, #2d333e);
  --color-surface-selected: light-dark(#d4e0fa, #2c3a57);
  --color-sidebar-bg: light-dark(#e6ebf2, #252a33);
  --color-topbar-bg: light-dark(#e6ebf2, #252a33);
  --color-text: light-dark(#232b3a, #e8edf5);
  --color-text-secondary: light-dark(#283143, #dfe5ee);
  --color-text-tertiary: light-dark(#364052, #c9d1dd);
  --color-text-muted: light-dark(#4f5a6c, #aab4c3);
  --color-text-placeholder: light-dark(#4f5a6c, #a3adbc);
  --color-text-disabled: light-dark(#525d6f, #a0aab9);
  --color-border: light-dark(#cdd4de, #333a46);
  --color-border-subtle: light-dark(#d6dce5, #2e343f);
  --color-border-control: light-dark(#6b7689, #7f8a9c);
  --color-border-strong: light-dark(#4f5a6c, #a3adbc);
  --color-accent: light-dark(#2563eb, #6ea0ff);
  --color-accent-hover: light-dark(#1d52cf, #8db5ff);
  --color-accent-active: light-dark(#1a47b4, #a7c5ff);
  --color-on-accent: light-dark(#ffffff, #0a1630);
  --color-accent-text: light-dark(#1d4fcc, #8db5ff);
  --color-accent-soft: light-dark(#d9e4fb, #2b3956);
  --color-accent-border: light-dark(#7d9de6, #4f6da6);
  --color-selected-bg: light-dark(#d4e0fa, #2c3a57);
  --color-selected-text: light-dark(#16399a, #dbe6ff);
  --color-selected-indicator: light-dark(#2563eb, #6ea0ff);
  --color-focus: light-dark(#1d4ed8, #8fb2ff);
  --color-focus-halo: light-dark(#ffffff, #1a1d23);
  --color-chart-1: light-dark(#2563eb, #6ea0ff);
  --color-chart-expense: light-dark(#6b7689, #8a95a7);
  --color-overlay: light-dark(#c3cad6b3, #12151ab3);
  /* Style-only tokens: the two soft shadows and the gradient of the primary pill (white text ≥ 4.5:1 on both ends). */
  --style-light: light-dark(#ffffff, #2f3540);
  --style-dark: light-dark(#c3cad6, #1a1d23);
  --style-grad-from: light-dark(#1f56e0, #5b8ff7);
  --style-grad-to: light-dark(#2e69f5, #7aaaff);
  --soft-raise-xs: -2px -2px 5px var(--style-light), 2px 2px 5px var(--style-dark);
  --soft-raise-sm: -4px -4px 10px var(--style-light), 4px 4px 10px var(--style-dark);
  --soft-raise-md: -6px -6px 14px var(--style-light), 6px 6px 14px var(--style-dark);
  --soft-raise-lg: -9px -9px 20px var(--style-light), 9px 9px 20px var(--style-dark);
  --soft-inset: inset 3px 3px 7px var(--style-dark), inset -3px -3px 7px var(--style-light);
  --soft-inset-sm: inset 2px 2px 4px var(--style-dark), inset -2px -2px 4px var(--style-light);
  --soft-inset-accent: inset 3px 3px 7px rgb(0 0 0 / 35%), inset -2px -2px 6px rgb(255 255 255 / 22%);
  --soft-edge: transparent;
  --shadow-xs: var(--soft-raise-xs);
  --shadow-sm: var(--soft-raise-md);
  --shadow-md: var(--soft-raise-lg);
  --shadow-overlay: 0 4px 10px var(--style-dark), 14px 18px 40px var(--style-dark);
  --style-inset: var(--soft-inset);
}
/* Soft, high contrast: pills, troughs and "pushed in = selected" stay; 2px edges replace the soft shadows. */
:root[data-style="soft"][data-contrast="high"] {
  --color-canvas: light-dark(#f1f4f8, #101318);
  --color-surface: light-dark(#f1f4f8, #101318);
  --color-surface-subtle: light-dark(#f1f4f8, #101318);
  --color-surface-sunken: light-dark(#e6eaf0, #08090c);
  --color-surface-hover: light-dark(#e6eaf0, #1b1f26);
  --color-surface-selected: light-dark(#ffffff, #000000);
  --color-sidebar-bg: light-dark(#f1f4f8, #101318);
  --color-topbar-bg: light-dark(#f1f4f8, #101318);
  --color-text: light-dark(#0d121b, #ffffff);
  --color-text-secondary: light-dark(#0d121b, #ffffff);
  --color-text-tertiary: light-dark(#141b26, #f2f4f8);
  --color-text-muted: light-dark(#1f2836, #e0e4ea);
  --color-text-placeholder: light-dark(#283244, #d4d9e1);
  --color-text-disabled: light-dark(#283244, #d4d9e1);
  --color-border: light-dark(#3a4456, #c9d1dd);
  --color-border-control: light-dark(#3a4456, #c9d1dd);
  --color-border-strong: light-dark(#0d121b, #ffffff);
  --color-accent: light-dark(#16399a, #a3c3ff);
  --color-accent-hover: light-dark(#102c7a, #bcd3ff);
  --color-accent-active: light-dark(#0b2260, #d3e2ff);
  --color-on-accent: light-dark(#ffffff, #000000);
  --color-accent-text: light-dark(#0f2a7a, #b3d1ff);
  --color-accent-soft: light-dark(#f1f4f8, #101318);
  --color-accent-border: light-dark(#16399a, #a3c3ff);
  --color-selected-bg: light-dark(#ffffff, #000000);
  --color-selected-text: light-dark(#0a1a4a, #ffd75e);
  --color-selected-indicator: light-dark(#16399a, #ffd75e);
  --color-focus: light-dark(#0b3aa8, #ffd75e);
  --color-focus-halo: light-dark(#ffffff, #000000);
  --color-chart-1: light-dark(#16399a, #a3c3ff);
  --style-light: transparent;
  --style-dark: transparent;
  --style-grad-from: light-dark(#16399a, #a3c3ff);
  --style-grad-to: light-dark(#16399a, #a3c3ff);
  --soft-raise-xs: none;
  --soft-raise-sm: none;
  --soft-raise-md: none;
  --soft-raise-lg: none;
  --soft-inset: inset 0 0 0 2px var(--color-border-control);
  --soft-inset-sm: inset 0 0 0 2px var(--color-border-control);
  --soft-inset-accent: inset 0 0 0 2px var(--color-on-accent);
  --soft-edge: var(--color-border-control);
  --style-inset: var(--soft-inset);
}

/* =============================================================== TOKENS: glass
   --glass-* are the frosted materials; transparency "reduce", high contrast and browsers without
   backdrop-filter get opaque values (TRANSPARENCY section below). */
:root[data-style="glass"] {
  --shape-control: var(--radius-full);
  --shape-field: 0.75rem;
  --shape-card: 1.125rem;
  --shape-overlay: 1.25rem;
  --state-pressed-scale: 0.98;
  --motion-state: 200ms;
  --ease-state: ease;
  --radius: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
}
:root[data-style="glass"]:not([data-contrast="high"]) {
  --color-canvas: light-dark(#a9b1bb, #151a22);
  --color-surface: light-dark(#eef1f4, #222833);
  --color-surface-subtle: light-dark(#e6eaee, #262d38);
  --color-surface-sunken: light-dark(#dde2e8, #1b2029);
  --color-surface-hover: light-dark(#dfe4ea, #2c3440);
  --color-surface-selected: light-dark(#d3e2fb, #24375a);
  --color-sidebar-bg: light-dark(#eef1f4, #222833);
  --color-topbar-bg: light-dark(#eef1f4, #222833);
  --color-text: light-dark(#141a24, #eef2f7);
  --color-text-secondary: light-dark(#1b2230, #e3e8ef);
  --color-text-tertiary: light-dark(#283141, #cfd6e0);
  --color-text-muted: light-dark(#2f3846, #b9c2cf);
  --color-text-placeholder: light-dark(#2f3846, #b3bcc9);
  --color-text-disabled: light-dark(#323b49, #afb8c5);
  --color-border: light-dark(#c4cbd3, #343c48);
  --color-border-subtle: light-dark(#cfd5dc, #2c333e);
  --color-border-control: light-dark(#4d5767, #8792a2);
  --color-border-strong: light-dark(#323b49, #a9b3c1);
  --color-accent: light-dark(#0050c8, #5aa2ff);
  --color-accent-hover: light-dark(#0043a8, #7ab4ff);
  --color-accent-active: light-dark(#00398f, #9ac6ff);
  --color-on-accent: light-dark(#ffffff, #06152e);
  --color-accent-text: light-dark(#003a9a, #8cc0ff);
  --color-accent-soft: light-dark(#d6e4fa, #1f3352);
  --color-accent-border: light-dark(#4f7fcf, #4a76b3);
  --color-selected-bg: light-dark(#d3e2fb, #24375a);
  --color-selected-text: light-dark(#002f80, #dbe9ff);
  --color-selected-indicator: light-dark(#0050c8, #5aa2ff);
  --color-focus: light-dark(#0043a8, #8cc0ff);
  --color-focus-halo: light-dark(#ffffff, #151a22);
  --color-success-text: light-dark(#0a4826, #7ad7a3);
  --color-success-fill: light-dark(#13693a, #7ad7a3);
  --color-warning-text: light-dark(#5c3400, #f3c56b);
  --color-warning-fill: light-dark(#7f4900, #f3c56b);
  --color-danger-text: light-dark(#7f140c, #ffa198);
  --color-danger-fill: light-dark(#9e1d13, #ffa198);
  --color-info-text: light-dark(#08415f, #84cdf5);
  --color-chart-1: light-dark(#0050c8, #5aa2ff);
  --color-chart-2: light-dark(#13693a, #57c08c);
  --color-chart-3: light-dark(#8f4a00, #f3a64a);
  --color-chart-4: light-dark(#6a34a8, #c4a5ff);
  --color-chart-income: light-dark(#13693a, #57c08c);
  --color-chart-expense: light-dark(#4d5767, #8592a8);
  --color-overlay: light-dark(#1e283c4d, #0000008c);
  --style-backdrop-1: light-dark(#d5d9de, #262d38);
  --style-backdrop-2: light-dark(#a9b1bb, #151a22);
  --style-blob-1: light-dark(rgb(122 168 238 / 45%), rgb(70 120 210 / 30%));
  --style-blob-2: light-dark(rgb(140 205 170 / 40%), rgb(50 140 100 / 22%));
  --style-blob-3: light-dark(rgb(255 255 255 / 55%), rgb(120 130 160 / 18%));
  /* Frost levels (worst case checked in tests/design_system/contrast.py GLASS_CHECKS):
     surface = content cards over the backdrop; strong = sticky bars, menus, dialogs over moving content (≥ .90);
     control / hover / pressed = frosted buttons; selected = milky, near-opaque. */
  --glass-surface: light-dark(rgb(255 255 255 / 42%), rgb(255 255 255 / 8%));
  --glass-strong: light-dark(rgb(246 248 250 / 92%), rgb(30 36 46 / 92%));
  --glass-control: light-dark(rgb(255 255 255 / 45%), rgb(255 255 255 / 10%));
  --glass-control-hover: light-dark(rgb(255 255 255 / 60%), rgb(255 255 255 / 16%));
  --glass-control-pressed: light-dark(rgb(255 255 255 / 70%), rgb(255 255 255 / 22%));
  --glass-selected: light-dark(rgb(255 255 255 / 86%), rgb(64 76 98 / 86%));
  --glass-field: light-dark(rgb(255 255 255 / 58%), rgb(8 12 18 / 40%));
  --glass-field-focus: light-dark(rgb(255 255 255 / 94%), rgb(34 40 51 / 94%));
  --glass-border: light-dark(rgb(255 255 255 / 65%), rgb(255 255 255 / 16%));
  --glass-border-strong: light-dark(rgb(255 255 255 / 92%), rgb(255 255 255 / 34%));
  --glass-highlight: light-dark(rgb(255 255 255 / 70%), rgb(255 255 255 / 10%));
  --glass-shadow: light-dark(rgb(30 40 60 / 14%), rgb(0 0 0 / 40%));
  --glass-blur: blur(18px) saturate(140%);
  --glass-blur-strong: blur(28px) saturate(150%);
  --glass-overlay-blur: blur(4px);
  --shadow-xs: none;
  --shadow-sm: inset 0 1px 0 var(--glass-highlight);
  --shadow-md: inset 0 1px 0 var(--glass-highlight), 0 12px 32px var(--glass-shadow);
  --shadow-overlay: inset 0 1px 0 var(--glass-highlight), 0 16px 40px var(--glass-shadow);
}
/* Glass, high contrast: calm solid backdrop, opaque white/black panels, 2px edges; pills and
   "milky = selected" (now opaque white/black + 2px edge) stay. */
:root[data-style="glass"][data-contrast="high"] {
  --color-canvas: light-dark(#e9edf2, #0b0e13);
  --color-surface: light-dark(#ffffff, #12161d);
  --color-surface-subtle: light-dark(#ffffff, #12161d);
  --color-surface-sunken: light-dark(#f2f4f7, #07090c);
  --color-surface-hover: light-dark(#e3e8ee, #1a1f28);
  --color-surface-selected: light-dark(#ffffff, #000000);
  --color-sidebar-bg: light-dark(#ffffff, #12161d);
  --color-topbar-bg: light-dark(#ffffff, #12161d);
  --color-text: light-dark(#0b0f16, #ffffff);
  --color-text-secondary: light-dark(#0b0f16, #ffffff);
  --color-border: light-dark(#1d2633, #e6ebf2);
  --color-border-control: light-dark(#1d2633, #e6ebf2);
  --color-border-strong: light-dark(#0b0f16, #ffffff);
  --color-accent: light-dark(#003a9a, #8cc0ff);
  --color-accent-hover: light-dark(#002f80, #b0d0ff);
  --color-accent-active: light-dark(#00256a, #cfe2ff);
  --color-on-accent: light-dark(#ffffff, #000000);
  --color-accent-text: light-dark(#00307f, #a8ccff);
  --color-accent-border: light-dark(#003a9a, #8cc0ff);
  --color-accent-soft: light-dark(#ffffff, #12161d);
  --color-selected-indicator: light-dark(#003a9a, #ffd75e);
  --color-focus: light-dark(#003a9a, #ffd75e);
  --color-chart-1: light-dark(#003a9a, #8cc0ff);
  --style-backdrop-1: light-dark(#e9edf2, #0b0e13);
  --style-backdrop-2: light-dark(#e9edf2, #0b0e13);
  --style-blob-1: transparent;
  --style-blob-2: transparent;
  --style-blob-3: transparent;
  --glass-border: var(--color-border-control);
  --glass-border-strong: var(--color-border-strong);
  --glass-highlight: transparent;
  --glass-shadow: transparent;
}

/* =============================================================== TOKENS: fintech
   Light page, white cards, navy navigation ("nav island" below re-maps the tokens inside it). */
:root[data-style="fintech"] {
  --shape-control: var(--radius-full);
  --shape-field: 0.75rem 0.75rem 0.25rem 0.25rem;
  --shape-card: 1rem;
  --shape-overlay: 1.5rem;
  --control-weight: var(--weight-bold);
  --control-h: 3rem;
  --focus-offset: 0.1875rem;
  --state-pressed-scale: 0.97;
  --motion-state: 100ms;
  --ease-state: cubic-bezier(0.2, 0, 0, 1);
  --radius: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
}
:root[data-style="fintech"]:not([data-contrast="high"]) {
  --color-canvas: light-dark(#eef2fb, #08112e);
  --color-surface: light-dark(#ffffff, #0f1d48);
  --color-surface-subtle: light-dark(#f6f8fe, #12214f);
  --color-surface-sunken: light-dark(#e6ecf9, #0b173d);
  --color-surface-hover: light-dark(#e3e9f8, #15265c);
  --color-surface-selected: light-dark(#dfe6ff, #1d3170);
  --color-sidebar-bg: light-dark(#0b1b4d, #050b20);
  --color-topbar-bg: light-dark(#0b1b4d, #050b20);
  --color-text: light-dark(#0e1630, #eef2ff);
  --color-text-secondary: light-dark(#18213d, #e2e8fb);
  --color-text-tertiary: light-dark(#2f3a58, #c9d2ec);
  --color-text-muted: light-dark(#4a5573, #aeb9d9);
  --color-text-placeholder: light-dark(#4a5573, #a6b2d4);
  --color-text-disabled: light-dark(#4f5a78, #a2aed0);
  --color-border: light-dark(#dbe2f2, #1d2c5e);
  --color-border-subtle: light-dark(#e6ebf7, #172654);
  --color-border-control: light-dark(#6c7795, #7d8bb8);
  --color-border-strong: light-dark(#4a5573, #a6b2d4);
  --color-accent: light-dark(#1f4fff, #5b82ff);
  --color-accent-hover: light-dark(#1638c9, #7b9bff);
  --color-accent-active: light-dark(#1230a8, #9bb4ff);
  --color-on-accent: light-dark(#ffffff, #050b20);
  --color-accent-text: light-dark(#1a44e0, #8ea9ff);
  --color-accent-soft: light-dark(#e3e9ff, #1a2c66);
  --color-accent-border: light-dark(#8aa2ff, #3f5bb8);
  --color-selected-bg: light-dark(#dfe6ff, #1d3170);
  --color-selected-text: light-dark(#1230a8, #e0e8ff);
  --color-selected-indicator: light-dark(#1f4fff, #7b9bff);
  --color-focus: light-dark(#1f4fff, #9bb4ff);
  --color-focus-halo: light-dark(#ffffff, #08112e);
  --color-chart-1: light-dark(#1f4fff, #5b82ff);
  --color-chart-2: light-dark(#0f7a52, #3fd09a);
  --color-chart-3: light-dark(#b05a00, #ffb05c);
  --color-chart-4: light-dark(#8a2fd0, #c9a2ff);
  --color-chart-expense: light-dark(#6c7795, #7d8bb8);
  --color-overlay: light-dark(#0b1b4d8c, #000000b3);
  --style-hero: light-dark(#1f4fff, #2a52e0);
  --style-hero-text: #ffffff;
  --style-hero-muted: #e8edff;
  --style-soft-hover: light-dark(#d3ddff, #233a80);
  --style-soft-pressed: light-dark(#c4d1ff, #2b4594);
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-overlay: 0 4px 10px light-dark(rgb(14 22 48 / 8%), rgb(0 0 0 / 32%)), 0 18px 40px light-dark(rgb(31 79 255 / 14%), rgb(0 0 0 / 40%));
}
/* Fintech, high contrast: pure white/black page, navy island, royal pills and full selection fills stay;
   cards get a 2px navy (light) or periwinkle (dark) edge. */
:root[data-style="fintech"][data-contrast="high"] {
  --color-canvas: light-dark(#ffffff, #000a24);
  --color-surface: light-dark(#ffffff, #08112e);
  --color-surface-subtle: light-dark(#ffffff, #08112e);
  --color-surface-sunken: light-dark(#eef1fa, #000716);
  --color-surface-hover: light-dark(#ebeff9, #101c44);
  --color-surface-selected: light-dark(#ffffff, #000a24);
  --color-sidebar-bg: light-dark(#071338, #020820);
  --color-topbar-bg: light-dark(#071338, #020820);
  --color-text: light-dark(#0e1630, #ffffff);
  --color-text-secondary: light-dark(#0e1630, #ffffff);
  --color-border: light-dark(#0e1630, #c9d4ff);
  --color-border-control: light-dark(#0e1630, #c9d4ff);
  --color-border-strong: light-dark(#0e1630, #ffffff);
  --color-accent: light-dark(#0e2aa8, #9bb4ff);
  --color-accent-hover: light-dark(#0a2290, #b8c9ff);
  --color-accent-active: light-dark(#071a74, #d0dbff);
  --color-on-accent: light-dark(#ffffff, #000000);
  --color-accent-text: light-dark(#0b2290, #b8c9ff);
  --color-accent-soft: light-dark(#ffffff, #08112e);
  --color-accent-border: light-dark(#0e2aa8, #9bb4ff);
  --color-selected-indicator: light-dark(#0e2aa8, #ffd75e);
  --color-focus: light-dark(#0e2aa8, #ffd75e);
  --color-chart-1: light-dark(#0e2aa8, #9bb4ff);
  --style-hero: light-dark(#0e2aa8, #000a24);
  --style-hero-text: #ffffff;
  --style-hero-muted: #ffffff;
  --style-soft-hover: light-dark(#e6ebf8, #101c44);
  --style-soft-pressed: light-dark(#d6ddf2, #18265a);
}
/* Nav island: the navigation and top bar are navy in light and dark; inside them text, hover, selection,
   controls and focus are re-mapped so every pair keeps its contrast. */
:root[data-style="fintech"]:not([data-contrast="high"]) :is(.ds-sidebar, .ds-topbar, .sidebar, .employee-sidebar, .employee-topbar, .cp-topbar) {
  --color-surface: light-dark(#0b1b4d, #050b20);
  --color-surface-subtle: light-dark(#0b1b4d, #050b20);
  --color-surface-sunken: light-dark(#16296a, #0c1740);
  --color-surface-hover: light-dark(#1a2e72, #10205a);
  --color-text: #ffffff;
  --color-text-secondary: #f1f4ff;
  --color-text-tertiary: #dfe6fb;
  --color-text-muted: #bcc7e8;
  --color-text-placeholder: #bcc7e8;
  --color-border: light-dark(#22357a, #16245a);
  --color-border-subtle: light-dark(#1a2c68, #101c4a);
  --color-border-control: #8597cf;
  --color-border-strong: #b6c3ea;
  --color-accent: #7f9cff;
  --color-accent-text: #b3c4ff;
  --color-accent-soft: light-dark(#1a2e72, #10205a);
  --color-on-accent: #050b20;
  --color-selected-bg: #1a40d6;
  --color-selected-text: #ffffff;
  --color-selected-indicator: #ffffff;
  --color-focus: #ffd75e;
  --color-focus-halo: light-dark(#0b1b4d, #050b20);
  color-scheme: dark;
}
/* High-contrast island: the selected item stays a full fill (deep royal) and gets a 2px yellow edge. */
:root[data-style="fintech"][data-contrast="high"] :is(.ds-sidebar, .ds-topbar, .sidebar, .employee-sidebar, .employee-topbar, .cp-topbar) {
  --color-surface: light-dark(#071338, #020820);
  --color-surface-subtle: light-dark(#071338, #020820);
  --color-surface-sunken: #0c1842;
  --color-surface-hover: #13204f;
  --color-text: #ffffff;
  --color-text-secondary: #ffffff;
  --color-text-tertiary: #f2f5ff;
  --color-text-muted: #e0e6ff;
  --color-text-placeholder: #e0e6ff;
  --color-border: #c9d4ff;
  --color-border-subtle: #c9d4ff;
  --color-border-control: #c9d4ff;
  --color-border-strong: #ffffff;
  --color-accent: #c9d4ff;
  --color-accent-text: #c9d4ff;
  --color-accent-soft: #13204f;
  --color-on-accent: #071338;
  --color-selected-bg: #0a1a5c;
  --color-selected-text: #ffffff;
  --color-selected-indicator: #ffd75e;
  --color-focus: #ffd75e;
  --color-focus-halo: #071338;
  color-scheme: dark;
}

/* =============================================================== TOKENS: graphite */
:root[data-style="graphite"] {
  --shape-control: 0.25rem;
  --shape-field: 0.25rem;
  --shape-card: 0.375rem;
  --shape-overlay: 0.375rem;
  --control-weight: var(--weight-medium);
  --state-pressed-scale: 1;
  --motion-state: 80ms;
  --ease-state: linear;
  --leading-body: 1.65;
  --leading-snug: 1.5;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.375rem;
  --indicator-w: 0.1875rem;
}
:root[data-style="graphite"]:not([data-contrast="high"]) {
  --color-canvas: light-dark(#f4f4f2, #161616);
  --color-surface: light-dark(#ffffff, #202020);
  --color-surface-subtle: light-dark(#fafaf8, #1c1c1c);
  --color-surface-sunken: light-dark(#ececea, #262626);
  --color-surface-hover: light-dark(#e9e9e6, #2b2b2b);
  --color-surface-selected: light-dark(#dcefec, #1c3a37);
  --color-sidebar-bg: light-dark(#fafaf8, #1a1a1a);
  --color-topbar-bg: light-dark(#ffffff, #202020);
  --color-text: light-dark(#111111, #f2f2f2);
  --color-text-secondary: light-dark(#1c1c1c, #e8e8e8);
  --color-text-tertiary: light-dark(#2e2e2e, #d6d6d6);
  --color-text-muted: light-dark(#444444, #c4c4c4);
  --color-text-placeholder: light-dark(#4a4a4a, #bdbdbd);
  --color-text-disabled: light-dark(#4d4d4d, #b8b8b8);
  --color-border: light-dark(#d0d0cc, #3a3a3a);
  --color-border-subtle: light-dark(#e0e0dc, #2e2e2e);
  --color-border-control: light-dark(#6e6e6a, #8a8a8a);
  --color-border-strong: light-dark(#444444, #b0b0b0);
  --color-accent: light-dark(#0f6e66, #4fd1c0);
  --color-accent-hover: light-dark(#0b5a53, #74ddd0);
  --color-accent-active: light-dark(#084a44, #98e7dd);
  --color-on-accent: light-dark(#ffffff, #0b1f1d);
  --color-accent-text: light-dark(#0c5f58, #6fe0d0);
  --color-accent-soft: light-dark(#e3f2f0, #183230);
  --color-accent-border: light-dark(#5fa59e, #2f7d74);
  --color-selected-bg: light-dark(#dcefec, #1c3a37);
  --color-selected-text: light-dark(#0a4f49, #c9f5ef);
  --color-selected-indicator: light-dark(#0f6e66, #4fd1c0);
  --color-focus: light-dark(#0b5a53, #6fe0d0);
  --color-focus-halo: light-dark(#ffffff, #161616);
  --color-chart-1: light-dark(#0f6e66, #4fd1c0);
  --color-chart-expense: light-dark(#6e6e6a, #8a8a8a);
  --color-overlay: light-dark(#11111199, #000000b3);
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-overlay: none;
}
/* Graphite, high contrast: pure black/white, 2px lines, 4px underline/bar, all corners stay square-ish. */
:root[data-style="graphite"][data-contrast="high"] {
  --color-accent: light-dark(#08443f, #6fe0d0);
  --color-accent-hover: light-dark(#063833, #8ae8db);
  --color-accent-active: light-dark(#042c28, #a6efe5);
  --color-on-accent: light-dark(#ffffff, #000000);
  --color-accent-text: light-dark(#063a35, #8ae8db);
  --color-accent-border: light-dark(#08443f, #6fe0d0);
  --color-selected-text: light-dark(#000000, #ffffff);
  --color-selected-indicator: light-dark(#000000, #ffffff);
  --color-focus: light-dark(#000000, #ffffff);
  --color-focus-halo: light-dark(#ffffff, #000000);
  --color-chart-1: light-dark(#08443f, #6fe0d0);
  --indicator-w: 0.25rem;
}

/* =============================================================== TOKENS: liquid-glass
   Content layer opaque (white / #1c1c1e cards on #f5f5f7 / black), glass only on navigation and overlays. */
:root[data-style="liquid-glass"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Figtree", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shape-control: var(--radius-full);
  --shape-field: 0.75rem;
  --shape-card: 1.375rem;
  --shape-overlay: 1.75rem;
  --shape-inner: calc(var(--shape-card) - var(--card-pad));
  --state-pressed-scale: 1;
  --lg-press-scale: 1.03;
  --lg-icon-press-scale: 1.06;
  --motion-state: 320ms;
  --ease-state: linear(0, 0.25 6%, 0.72 16%, 1.02 28%, 1.06 34%, 1.02 46%, 0.995 60%, 1);
  --radius: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.375rem;
}
:root[data-style="liquid-glass"]:not([data-contrast="high"]) {
  --color-canvas: light-dark(#f5f5f7, #000000);
  --color-surface: light-dark(#ffffff, #1c1c1e);
  --color-surface-subtle: light-dark(#fbfbfd, #1c1c1e);
  --color-surface-sunken: light-dark(#ededf0, #2c2c2e);
  --color-surface-hover: light-dark(#ececf0, #2c2c2e);
  --color-surface-selected: light-dark(#e3e3e8, #3a3a3c);
  --color-sidebar-bg: light-dark(#f2f2f5, #1c1c1e);
  --color-topbar-bg: light-dark(#f9f9fb, #1c1c1e);
  --color-text: light-dark(#1d1d1f, #f5f5f7);
  --color-text-secondary: light-dark(#2c2c2e, #ebebf0);
  --color-text-tertiary: light-dark(#3a3a3c, #d1d1d6);
  --color-text-muted: light-dark(#5f5f64, #aeaeb2);
  --color-text-placeholder: light-dark(#5f5f64, #a1a1a6);
  --color-text-disabled: light-dark(#5c5c61, #a1a1a6);
  --color-border: light-dark(#d2d2d7, #38383a);
  --color-border-subtle: light-dark(#e5e5ea, #2c2c2e);
  --color-border-control: light-dark(#86868b, #8e8e93);
  --color-border-strong: light-dark(#6e6e73, #aeaeb2);
  --color-accent: light-dark(#0068d6, #0a84ff);
  --color-accent-hover: light-dark(#005ec2, #409cff);
  --color-accent-active: light-dark(#0052a8, #64b4ff);
  --color-on-accent: light-dark(#ffffff, #000000);
  --color-accent-text: light-dark(#0060c8, #4aa8ff);
  --color-accent-soft: light-dark(#e6f0fc, #10294a);
  --color-accent-border: light-dark(#6aa4e8, #2a6bb8);
  --color-selected-bg: light-dark(#e3e3e8, #3a3a3c);
  --color-selected-text: light-dark(#1d1d1f, #ffffff);
  --color-selected-indicator: light-dark(#0068d6, #0a84ff);
  --color-focus: light-dark(#0068d6, #4aa8ff);
  --color-focus-halo: light-dark(#ffffff, #000000);
  --color-danger-fill: light-dark(#c4161c, #ff9b95);
  --color-on-danger-fill: light-dark(#ffffff, #2b0503);
  --color-chart-1: light-dark(#0068d6, #0a84ff);
  --color-overlay: light-dark(#0000004d, #00000080);
  /* Materials (worst case over black and white, tests/design_system/contrast.py GLASS_CHECKS):
     strong (.94 / .90) for sidebar, top bar, menus, sheets: secondary text and accent icons stay ≥ 4.5:1;
     control (.76 / .80) for glass capsules with monochrome labels only; tint = prominent (accent) glass. */
  --glass-strong: light-dark(rgb(250 250 252 / 94%), rgb(30 30 32 / 90%));
  --glass-control: light-dark(rgb(236 236 240 / 76%), rgb(58 58 60 / 80%));
  --glass-control-hover: light-dark(rgb(244 244 247 / 80%), rgb(72 72 74 / 84%));
  --glass-tint: light-dark(rgb(0 104 214 / 94%), rgb(10 132 255 / 94%));
  --glass-tint-danger: light-dark(rgb(196 22 28 / 94%), rgb(255 155 149 / 94%));
  --glass-platter: light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 8%));
  --glass-platter-pressed: light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 14%));
  --glass-thumb: light-dark(#ffffff, #636366);
  --glass-track: light-dark(rgb(118 118 128 / 12%), rgb(118 118 128 / 24%));
  --glass-edge: inset 0 1px 0 light-dark(rgb(255 255 255 / 85%), rgb(255 255 255 / 18%)), inset 0 -1px 0 light-dark(rgb(255 255 255 / 25%), rgb(255 255 255 / 6%)),
    inset 0 0 0 1px light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 10%));
  --glass-specular: linear-gradient(180deg, light-dark(rgb(255 255 255 / 55%), rgb(255 255 255 / 16%)), transparent 42%);
  --glass-specular-tint: linear-gradient(180deg, rgb(255 255 255 / 22%), transparent 38%);
  --glass-glow: light-dark(rgb(255 255 255 / 70%), rgb(255 255 255 / 30%));
  --glass-float: 0 8px 32px light-dark(rgb(0 0 0 / 12%), rgb(0 0 0 / 45%));
  --glass-blur: blur(24px) saturate(180%);
  --glass-backdrop-a: light-dark(rgb(0 113 227 / 9%), rgb(10 132 255 / 14%));
  --glass-backdrop-b: light-dark(rgb(175 82 222 / 7%), rgb(191 90 242 / 10%));
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 6px 20px light-dark(rgb(0 0 0 / 8%), rgb(0 0 0 / 50%));
  --shadow-overlay: var(--glass-float);
}
/* Liquid Glass, high contrast (Apple "Increase contrast" + "Reduce transparency"): every glass becomes
   opaque white/black with a 1.5px contrasting edge on every capsule (also borderless buttons, "Button Shapes"). */
:root[data-style="liquid-glass"][data-contrast="high"] {
  --color-surface: light-dark(#ffffff, #121214);
  --color-surface-subtle: light-dark(#ffffff, #121214);
  --color-surface-sunken: light-dark(#f2f2f4, #000000);
  --color-surface-hover: light-dark(#e8e8ec, #242426);
  --color-sidebar-bg: light-dark(#ffffff, #121214);
  --color-topbar-bg: light-dark(#ffffff, #121214);
  --color-accent: light-dark(#002fa8, #80bcff);
  --color-accent-hover: light-dark(#00268c, #9ccbff);
  --color-accent-active: light-dark(#001e70, #b8daff);
  --color-on-accent: light-dark(#ffffff, #000000);
  --color-accent-text: light-dark(#00268c, #9ccbff);
  --color-accent-border: light-dark(#002fa8, #80bcff);
  --color-selected-indicator: light-dark(#002fa8, #ffe14d);
  --color-focus: light-dark(#002fa8, #ffe14d);
  --color-chart-1: light-dark(#002fa8, #80bcff);
  --glass-thumb: light-dark(#ffffff, #000000);
  --glass-track: light-dark(#ffffff, #000000);
  --glass-platter: light-dark(#e8e8ec, #242426);
  --glass-platter-pressed: light-dark(#dcdce2, #303033);
  --glass-edge: inset 0 0 0 1.5px var(--color-border-control);
  --glass-specular: none;
  --glass-specular-tint: none;
  --glass-glow: transparent;
  --glass-float: 0 0 0 2px var(--color-border-control);
  --glass-backdrop-a: transparent;
  --glass-backdrop-b: transparent;
}

/* =============================================================== TRANSPARENCY (glass, liquid-glass)
   Opaque materials, no blur, no specular light when the user reduces transparency (panel switch
   data-transparency="reduce", or prefers-reduced-transparency unless "full"), in high contrast, and in browsers
   without backdrop-filter.  Safari has no prefers-reduced-transparency, hence the in-app switch. */
:root[data-style="glass"]:is([data-transparency="reduce"], [data-contrast="high"]) {
  --glass-surface: var(--color-surface); --glass-strong: var(--color-surface); --glass-control: var(--color-surface);
  --glass-control-hover: var(--color-surface-hover); --glass-control-pressed: var(--color-surface-sunken);
  --glass-selected: var(--color-selected-bg); --glass-field: var(--color-surface); --glass-field-focus: var(--color-surface);
  --glass-blur: none; --glass-blur-strong: none; --glass-overlay-blur: none;
}
:root[data-style="liquid-glass"]:is([data-transparency="reduce"], [data-contrast="high"]) {
  --glass-strong: var(--color-surface); --glass-control: var(--color-surface-sunken); --glass-control-hover: var(--color-surface-hover);
  --glass-tint: var(--color-accent); --glass-tint-danger: var(--color-danger-fill);
  --glass-blur: none;
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-style="glass"]:not([data-transparency="full"]) {
    --glass-surface: var(--color-surface); --glass-strong: var(--color-surface); --glass-control: var(--color-surface);
    --glass-control-hover: var(--color-surface-hover); --glass-control-pressed: var(--color-surface-sunken);
    --glass-selected: var(--color-selected-bg); --glass-field: var(--color-surface); --glass-field-focus: var(--color-surface);
    --glass-blur: none; --glass-blur-strong: none; --glass-overlay-blur: none;
  }
  :root[data-style="liquid-glass"]:not([data-transparency="full"]) {
    --glass-strong: var(--color-surface); --glass-control: var(--color-surface-sunken); --glass-control-hover: var(--color-surface-hover);
    --glass-tint: var(--color-accent); --glass-tint-danger: var(--color-danger-fill); --glass-blur: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-style="glass"] {
    --glass-surface: var(--color-surface); --glass-strong: var(--color-surface); --glass-control: var(--color-surface);
    --glass-selected: var(--color-selected-bg); --glass-field: var(--color-surface); --glass-blur: none; --glass-blur-strong: none;
  }
  :root[data-style="liquid-glass"] { --glass-strong: var(--color-surface); --glass-control: var(--color-surface-sunken); --glass-blur: none; }
}

/* =============================================================== COMPONENT TOUCHES */
@layer overrides {
/* ---------------------------------------------------------------- shared */
/* Any style: the work portal's frosted top bar becomes opaque when transparency is reduced. */
:root[data-transparency="reduce"] .topbar { background: var(--color-topbar-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-transparency="full"]) .topbar { background: var(--color-topbar-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ================================================================ SOFT ======================== */
/* Surfaces: no visible border (transparent 1px for forced colours), lifted by the shadow pair. */
:root[data-style="soft"] :is(.ds-card, .panel, .metric, .planning-kpi, .crm-metric, .invoice-summary article,
  .employee-info-card, .account-card, .report-panel, .invoice-card, .crm-detail-card, .personal-cockpit, .welcome-band, .work-home,
  .changelog-card, .ds-table-wrap, .ds-register, .action-modal, .setup-checklist) {
  border-color: var(--soft-edge); box-shadow: var(--soft-raise-md);
}
:root[data-style="soft"] :is(.ds-card, .panel, .personal-cockpit, .work-home, .invoice-card) :is(.ds-card, .panel, .metric, .account-card, .ds-table-wrap, .changelog-card) {
  box-shadow: var(--soft-raise-xs);
}
:root[data-style="soft"] :is(.ds-sidebar, .sidebar, .employee-sidebar, .ds-topbar, .topbar, .employee-topbar) { border-color: var(--soft-edge); }
:root[data-style="soft"] .ds-topbar { box-shadow: 0 6px 14px var(--style-dark); }
:root[data-style="soft"] :is(.app-shell, .ds-shell.app-shell) { background: var(--color-canvas); }
:root[data-style="soft"] .personal-cockpit-card { border-color: var(--soft-edge); background: var(--color-surface); box-shadow: var(--soft-raise-xs); }

/* Buttons: extruded pills in the page colour; pressed = pushed in (inset) and 1px deeper. */
:root[data-style="soft"] :is(.ds-btn, .primary-button, .secondary-button, .ghost-button, .danger-button, .ds-icon-btn, .icon-button, .ds-user-menu__button) {
  border-color: var(--soft-edge);
}
:root[data-style="soft"] :is(.ds-btn--secondary, .secondary-button, .ds-btn--danger-outline, .danger-button, .icon-button):not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-surface); box-shadow: var(--soft-raise-sm);
}
:root[data-style="soft"] :is(.ds-btn--danger-outline, .danger-button):not(:disabled) { color: var(--color-danger-text); }
:root[data-style="soft"] :is(.ds-btn--primary, .primary-button):not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--soft-edge); background: linear-gradient(135deg, var(--style-grad-from), var(--style-grad-to)); color: var(--color-on-accent); box-shadow: var(--soft-raise-sm);
}
:root[data-style="soft"] .ds-btn--danger:not(:disabled):not([aria-disabled="true"]) { box-shadow: var(--soft-raise-sm); }
:root[data-style="soft"] :is(.ds-icon-btn, .icon-button) { border-radius: 50%; }
:root[data-style="soft"] .ds-icon-btn:not(:disabled) { box-shadow: var(--soft-raise-xs); }
@media (hover: hover) {
  :root[data-style="soft"] :is(.ds-btn--secondary, .secondary-button, .ds-btn--danger-outline, .danger-button, .ds-btn--primary, .primary-button, .ds-btn--danger, .icon-button):hover:not(:disabled):not([aria-disabled="true"]):not(:active) {
    box-shadow: var(--soft-raise-md);
  }
  :root[data-style="soft"] :is(.ds-btn--primary, .primary-button):hover:not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(135deg, var(--color-accent-hover), var(--style-grad-to)); border-color: var(--soft-edge);
  }
  :root[data-style="soft"] :is(.ds-btn--secondary, .secondary-button, .icon-button):hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-surface); }
  :root[data-style="soft"] :is(.ds-btn--ghost, .ghost-button, .ds-icon-btn):hover:not(:disabled):not([aria-disabled="true"]):not(:active) {
    background: var(--color-surface); box-shadow: var(--soft-raise-xs);
  }
}
:root[data-style="soft"] :is(.ds-btn, .secondary-button, .ghost-button, .danger-button, .ds-icon-btn, .icon-button):active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-surface-sunken); box-shadow: var(--soft-inset);
}
:root[data-style="soft"] :is(.ds-btn--primary, .primary-button, .ds-btn--danger):active:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(135deg, var(--color-accent-active), var(--style-grad-from)); box-shadow: var(--soft-inset-accent);
}
:root[data-style="soft"] .ds-btn--danger:active:not(:disabled) { background: var(--color-danger-fill); }
/* Toggle buttons stay pushed in, with accent text and a check mark. */
:root[data-style="soft"] .ds-btn[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]),
:root[data-style="soft"] :is(.invoice-filters, .dms-worklists, .crm-analytics-periods) button[aria-pressed="true"]:not(:disabled),
:root[data-style="soft"] [data-crm-presentation][aria-pressed="true"] {
  border-color: var(--soft-edge); background: var(--color-surface-sunken); color: var(--color-accent-text); box-shadow: var(--soft-inset); font-weight: var(--weight-bold);
}
/* Disabled: flat — no shadow at all — with the dashed boundary of the design system. */
:root[data-style="soft"] :is(.ds-btn, .primary-button, .secondary-button, .danger-button, .icon-button):is(:disabled, [aria-disabled="true"]) {
  background: var(--color-surface); border-color: var(--color-border-control); border-style: dashed; box-shadow: none;
}

/* Fields: troughs (inset) with a visible 1px underline (the shadows are no boundary, WCAG 1.4.11). */
:root[data-style="soft"] :is(.ds-input, .ds-select, .ds-textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]), select, textarea):not(:disabled):not(.search *):not(.ds-segmented *):not(.ds-switch *) {
  border-color: transparent transparent var(--color-border-control); background-color: var(--color-surface-sunken); box-shadow: var(--soft-inset);
}
:root[data-style="soft"] :is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):hover:not(:disabled):not(:focus):not(.search *):not(.ds-segmented *):not(.ds-switch *):not([type=checkbox]):not([type=radio]) {
  border-bottom-color: var(--color-border-strong); box-shadow: inset 4px 4px 9px var(--style-dark), inset -3px -3px 7px var(--style-light);
}
:root[data-style="soft"] :is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):focus-visible:not([type=checkbox]):not([type=radio]) {
  border-bottom-color: var(--color-focus); border-bottom-width: 2px;
}
:root[data-style="soft"] .search { border-color: transparent; box-shadow: var(--soft-inset); }

/* Segmented choice: unselected segments sit in a trough, the chosen one is lifted out with accent text. */
:root[data-style="soft"] .ds-segmented label > span { border-color: var(--soft-edge); background: var(--color-surface-sunken); box-shadow: var(--soft-inset-sm); }
:root[data-style="soft"] .ds-segmented input:checked + span {
  border-color: var(--soft-edge); border-width: var(--border-w-control); background: var(--color-surface); color: var(--color-accent-text); box-shadow: var(--soft-raise-sm);
}
:root[data-style="soft"][data-contrast="high"] .ds-segmented input:checked + span { border-width: 2px; border-color: var(--color-selected-indicator); }
@media (hover: hover) {
  :root[data-style="soft"] .ds-segmented input:hover:not(:checked) + span { background: var(--color-surface-sunken); box-shadow: var(--soft-inset); }
}
:root[data-style="soft"] :is(.invoice-filters, .work-home-tabs, .dms-worklists, .crm-analytics-periods) {
  border-color: var(--soft-edge); background: var(--color-surface-sunken); box-shadow: var(--soft-inset-sm);
}

/* Tabs and navigation: text without lines; hover lifts, selected is a pushed-in pill + accent + dot. */
:root[data-style="soft"] .ds-tabs { border-bottom-color: transparent; gap: var(--space-2); }
:root[data-style="soft"] :is(.ds-tab, .crm-tab, .crm-detail-tabs button, .dms-detail-tabs button, .work-home-tabs button, .identity-tab, .ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item) {
  border-radius: var(--radius-full);
}
:root[data-style="soft"] .ds-tab { margin: 0; border-bottom: 0; }
@media (hover: hover) {
  :root[data-style="soft"] :is(.ds-tab, .crm-tab, .crm-detail-tabs button, .dms-detail-tabs button, .work-home-tabs button, .identity-tab, .ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):hover:not(.is-active):not([aria-selected="true"]):not([aria-current="page"]) {
    background: var(--color-surface); box-shadow: var(--soft-raise-xs);
  }
}
:root[data-style="soft"] :is(.ds-tab, .crm-tab, .work-home-tabs button, .ds-nav-link, .nav-item, .employee-nav-item):active { box-shadow: var(--soft-inset-sm); }
:root[data-style="soft"] .ds-tab[aria-selected="true"],
:root[data-style="soft"] :is(.crm-detail-tabs, .dms-detail-tabs, .work-home-tabs, [role="tablist"]) [role="tab"][aria-selected="true"],
:root[data-style="soft"] .dms-detail-tabs button[aria-selected="true"],
:root[data-style="soft"] :is(.crm-tab, .crm-saved-view, .identity-tab).is-active,
:root[data-style="soft"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):is([aria-current="page"], .is-active) {
  background: var(--color-surface-sunken); color: var(--color-accent-text); font-weight: var(--weight-bold); box-shadow: var(--soft-inset);
}
:root[data-style="soft"] .ds-tab[aria-selected="true"]::before,
:root[data-style="soft"] :is(.crm-detail-tabs, .dms-detail-tabs, .work-home-tabs) [role="tab"][aria-selected="true"]::before {
  content: ""; flex: none; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor;
}
:root[data-style="soft"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):is([aria-current="page"], .is-active) svg { color: var(--color-accent-text); }

/* Switch, checkbox, radio: troughs; the knob and the checked mark are lifted out. */
:root[data-style="soft"] .ds-switch__track { border-color: var(--soft-edge); background: var(--color-surface-sunken); box-shadow: var(--soft-inset); }
:root[data-style="soft"] .ds-switch__track::after { background: var(--color-surface); box-shadow: var(--soft-raise-xs); color: var(--color-accent-text); }
:root[data-style="soft"] .ds-switch input:checked + .ds-switch__track { border-color: var(--soft-edge); background: linear-gradient(135deg, var(--style-grad-from), var(--style-grad-to)); box-shadow: var(--soft-inset-accent); }
:root[data-style="soft"] .ds-switch input:checked + .ds-switch__track::after { background: var(--color-surface); color: var(--color-accent-text); }
:root[data-style="soft"] .ds-switch:active .ds-switch__track::after { box-shadow: none; }
:root[data-style="soft"] :is(.ds-check, .ds-radio) input {
  appearance: none; display: inline-grid; place-items: center; border: 1px solid var(--color-border-control); border-radius: 0.375rem;
  background: var(--color-surface-sunken); box-shadow: var(--soft-inset-sm);
}
:root[data-style="soft"] .ds-radio input { border-radius: 50%; }
:root[data-style="soft"] :is(.ds-check, .ds-radio) input:checked {
  border-color: var(--soft-edge); background: linear-gradient(135deg, var(--style-grad-from), var(--style-grad-to)); box-shadow: var(--soft-raise-xs);
}
:root[data-style="soft"] .ds-check input:checked::after { content: "✓" / ""; color: var(--color-on-accent); font-size: 0.9rem; font-weight: var(--weight-bold); line-height: 1; }
:root[data-style="soft"] .ds-radio input:checked::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-on-accent); }

/* Tables: zebra over the trough colour, no lines; selected row pushed in with a bar. */
:root[data-style="soft"] .ds-table td { border-bottom-color: transparent; }
:root[data-style="soft"] .ds-table tbody tr:nth-child(even) > td { background: var(--color-surface-sunken); }
:root[data-style="soft"] .ds-table tbody tr[aria-selected="true"] > td { background: var(--color-selected-bg); box-shadow: var(--soft-inset-sm); }

/* Menus, dialogs, badges. */
:root[data-style="soft"] :is(.ds-dialog, .ds-menu, .toolbar-options.is-open, .global-search-results, .ds-toast) { border-color: var(--soft-edge); box-shadow: var(--soft-raise-lg); }
:root[data-style="soft"] .ds-menu { border-radius: 1.125rem; }
:root[data-style="soft"] :is(.ds-dialog__header, .ds-dialog__footer, .action-modal-header, .action-modal-actions) { border-color: transparent; }
@media (hover: hover) {
  :root[data-style="soft"] .ds-menu__item:hover { background: var(--color-surface); box-shadow: var(--soft-raise-xs); }
}
:root[data-style="soft"] .ds-menu__item:active { box-shadow: var(--soft-inset-sm); }
:root[data-style="soft"] :is(.ds-badge, .badge, .status-badge) { border-color: var(--soft-edge); box-shadow: var(--soft-raise-xs); }
:root[data-style="soft"] :is(.ds-kpi__value, .metric strong) { font-weight: var(--weight-bold); }

/* High contrast: the same pills and troughs, outlined (2px) instead of shadowed. */
:root[data-style="soft"][data-contrast="high"] :is(.ds-btn--secondary, .secondary-button, .ds-btn--danger-outline, .danger-button, .ds-icon-btn, .icon-button, .ds-btn--ghost, .ghost-button):not(:disabled) {
  border: 2px solid var(--color-border-control);
}
@media (hover: hover) {
  :root[data-style="soft"][data-contrast="high"] :is(.ds-btn--secondary, .secondary-button, .ds-btn--danger-outline, .danger-button, .ds-btn--ghost, .ghost-button, .ds-icon-btn, .icon-button):hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--color-surface-hover); border-color: var(--color-border-strong);
  }
}
:root[data-style="soft"][data-contrast="high"] :is(.ds-btn, .secondary-button, .ghost-button, .danger-button, .ds-icon-btn, .icon-button):active:not(:disabled):not([aria-disabled="true"]) { background: var(--color-surface-sunken); box-shadow: inset 0 0 0 2px var(--color-border-strong); }
:root[data-style="soft"][data-contrast="high"] :is(.ds-input, .ds-select, .ds-textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):not(:disabled):not(.search *):not(.ds-segmented *):not(.ds-switch *) {
  border: 2px solid var(--color-border-control);
}

/* ================================================================ GLASS ======================= */
:root[data-style="glass"] {
  background-color: var(--style-backdrop-2);
  background-image:
    radial-gradient(38rem 28rem at 12% 18%, var(--style-blob-1), transparent 70%),
    radial-gradient(34rem 26rem at 88% 22%, var(--style-blob-2), transparent 70%),
    radial-gradient(40rem 30rem at 55% 92%, var(--style-blob-3), transparent 70%),
    linear-gradient(160deg, var(--style-backdrop-1), var(--style-backdrop-2));
  background-attachment: fixed;
}
:root[data-style="glass"] :is(body, .ds-shell, .app-shell, .ds-shell.app-shell, .employee-shell, .cp-body, .legal-body, .ds-main, .workspace, .employee-workspace) {
  background: transparent;
}
/* Content cards: frosted, light 1px edge, top edge light; nested cards without a second blur. */
:root[data-style="glass"] :is(.ds-card, .panel, .metric, .planning-kpi, .crm-metric, .invoice-summary article,
  .employee-info-card, .account-card, .report-panel, .invoice-card, .crm-detail-card, .personal-cockpit, .welcome-band, .work-home,
  .changelog-card, .ds-sidebar, .sidebar, .employee-sidebar, .ds-table-wrap, .ds-register, .setup-checklist) {
  border-color: var(--glass-border); background: var(--glass-surface); box-shadow: inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-style="glass"] :is(.ds-card, .panel) :is(.ds-card, .panel, .metric, .account-card, .ds-table-wrap) { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-style="glass"] .personal-cockpit-card { border-color: var(--glass-border); background: var(--glass-control); }
/* Floating chrome over moving content: frosted but nearly opaque (≥ .90), soft drop shadow only here. */
:root[data-style="glass"] :is(.ds-topbar, .topbar, .employee-topbar, .cp-topbar, .ds-dialog, .ds-menu, .toolbar-options.is-open, .global-search-results, .ds-toast,
  .workspace > .view > :is(.page-heading, .crm-page-heading):first-child, .action-modal) {
  border-color: var(--glass-border); background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-style="glass"] :is(.ds-dialog, .ds-menu, .toolbar-options.is-open, .global-search-results) { box-shadow: var(--shadow-overlay); }
:root[data-style="glass"] .ds-dialog::backdrop { -webkit-backdrop-filter: var(--glass-overlay-blur); backdrop-filter: var(--glass-overlay-blur); }
:root[data-style="glass"] .workspace > .view > :is(.page-heading, .crm-page-heading):first-child {
  /* The frosted strip reaches a little into the page margin, but never past it (phones: 1rem margin). */
  --heading-bleed: min(var(--space-4), max(0px, var(--page-pad-x) - var(--space-2)));
  margin-inline: calc(-1 * var(--heading-bleed)); padding-inline: max(var(--heading-bleed), var(--space-2)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
}

/* Buttons: pills.  Primary is opaque accent with an edge light; the others are frost that gets denser on
   hover and when pressed (plus scale .98); toggled = milky, near-opaque + check mark. */
:root[data-style="glass"] :is(.ds-btn--primary, .primary-button):not(:disabled):not([aria-disabled="true"]) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%); }
@media (hover: hover) {
  :root[data-style="glass"] :is(.ds-btn--primary, .primary-button):hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%); }
}
:root[data-style="glass"] :is(.ds-btn--primary, .primary-button):active:not(:disabled):not([aria-disabled="true"]) { background: var(--color-accent-active); box-shadow: none; }
:root[data-style="glass"] :is(.ds-btn--secondary, .secondary-button, .ds-btn--danger-outline, .danger-button, .icon-button, .ds-user-menu__button):not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--glass-border); background: var(--glass-control); box-shadow: inset 0 1px 0 var(--glass-highlight);
}
:root[data-style="glass"] :is(.ds-btn--danger-outline, .danger-button):not(:disabled) { border-color: var(--color-danger-border); color: var(--color-danger-text); }
:root[data-style="glass"] :is(.ds-icon-btn, .icon-button) { border-radius: 50%; }
@media (hover: hover) {
  :root[data-style="glass"] :is(.ds-btn--secondary, .secondary-button, .ds-btn--danger-outline, .danger-button, .icon-button, .ds-icon-btn, .ds-btn--ghost, .ghost-button):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--glass-border-strong); background: var(--glass-control-hover);
  }
}
:root[data-style="glass"] :is(.ds-btn--secondary, .secondary-button, .ds-btn--danger-outline, .danger-button, .icon-button, .ds-icon-btn, .ds-btn--ghost, .ghost-button):active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--glass-control-pressed); box-shadow: none;
}
:root[data-style="glass"] .ds-btn[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]),
:root[data-style="glass"] :is(.invoice-filters, .dms-worklists, .crm-analytics-periods) button[aria-pressed="true"]:not(:disabled),
:root[data-style="glass"] [data-crm-presentation][aria-pressed="true"] {
  border-color: var(--glass-border-strong); background: var(--glass-selected); color: var(--color-selected-text); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 1px 2px var(--glass-shadow);
}
:root[data-style="glass"] :is(.ds-btn, .primary-button, .secondary-button, .danger-button, .icon-button):is(:disabled, [aria-disabled="true"]) {
  background: var(--glass-surface); border-color: var(--color-border-control); border-style: dashed; box-shadow: none;
}

/* Fields: frost with the 3:1 control line; focus turns them near-opaque. */
:root[data-style="glass"] :is(.ds-input, .ds-select, .ds-textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]), select, textarea):not(:disabled):not(.search *):not(.ds-segmented *):not(.ds-switch *) {
  background-color: var(--glass-field);
}
:root[data-style="glass"] :is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):focus-visible:not([type=checkbox]):not([type=radio]) { background-color: var(--glass-field-focus); }
:root[data-style="glass"] :is(.ds-search input, .search) { border-radius: var(--radius-full); background: var(--glass-field); }

/* Segments, tabs, navigation: frost on hover, milky pill when selected (+ bold / bar / check). */
:root[data-style="glass"] .ds-segmented label > span { border-color: var(--glass-border); background: var(--glass-control); border-radius: var(--radius-full); }
:root[data-style="glass"] .ds-segmented input:checked + span {
  border-color: var(--glass-border-strong); background: var(--glass-selected); color: var(--color-selected-text);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 1px 3px var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur-strong); backdrop-filter: var(--glass-blur-strong);
}
:root[data-style="glass"] :is(.invoice-filters, .work-home-tabs, .dms-worklists, .crm-analytics-periods) {
  border-color: var(--glass-border); background: var(--glass-control); border-radius: var(--radius-full); box-shadow: none;
}
:root[data-style="glass"] .ds-tabs { border-bottom-color: var(--glass-border); }
:root[data-style="glass"] :is(.ds-tab, .crm-tab, .crm-detail-tabs button, .dms-detail-tabs button, .work-home-tabs button, .identity-tab, .invoice-filters button, .dms-worklists button, .crm-analytics-periods button) {
  border-radius: var(--radius-full);
}
:root[data-style="glass"] .ds-tab { margin-bottom: var(--space-1); border-bottom: 0; }
@media (hover: hover) {
  :root[data-style="glass"] :is(.ds-tab, .crm-tab, .crm-detail-tabs button, .dms-detail-tabs button, .work-home-tabs button, .identity-tab, .ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item, .ds-menu__item):hover:not(.is-active):not([aria-selected="true"]):not([aria-current="page"]) {
    background: var(--glass-control);
  }
}
:root[data-style="glass"] :is(.ds-tab, .crm-tab, .work-home-tabs button, .ds-nav-link, .nav-item, .employee-nav-item):active { background: var(--glass-control-pressed); }
:root[data-style="glass"] .ds-tab[aria-selected="true"],
:root[data-style="glass"] :is(.crm-detail-tabs, .dms-detail-tabs, .work-home-tabs, [role="tablist"]) [role="tab"][aria-selected="true"],
:root[data-style="glass"] .dms-detail-tabs button[aria-selected="true"],
:root[data-style="glass"] :is(.crm-tab, .crm-saved-view, .identity-tab).is-active {
  background: var(--glass-selected); color: var(--color-selected-text); box-shadow: inset 0 0 0 1px var(--glass-border-strong), 0 1px 3px var(--glass-shadow);
}
:root[data-style="glass"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):is([aria-current="page"], .is-active) {
  background: var(--glass-selected); box-shadow: inset var(--indicator-w) 0 0 var(--color-selected-indicator), inset 0 0 0 1px var(--glass-border-strong);
}

/* Switch, checkbox, radio: frost troughs; on = opaque accent, the knob milky white. */
:root[data-style="glass"] .ds-switch__track { background: var(--glass-control); }
:root[data-style="glass"] .ds-switch input:checked + .ds-switch__track { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%); }
:root[data-style="glass"] .ds-switch input:checked + .ds-switch__track::after { background: var(--glass-selected); color: var(--color-accent-text); box-shadow: 0 1px 3px var(--glass-shadow); }
:root[data-style="glass"] :is(.ds-check, .ds-radio) input {
  appearance: none; display: inline-grid; place-items: center; border: 1px solid var(--color-border-control); border-radius: 0.4375rem; background: var(--glass-field);
}
:root[data-style="glass"] .ds-radio input { border-radius: 50%; }
:root[data-style="glass"] :is(.ds-check, .ds-radio) input:checked { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%); }
:root[data-style="glass"] .ds-check input:checked::after { content: "✓" / ""; color: var(--color-on-accent); font-size: 0.9rem; font-weight: var(--weight-bold); line-height: 1; }
:root[data-style="glass"] .ds-radio input:checked::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-on-accent); }

/* Tables: transparent rows on the frosted wrap; hover frost, selected milky + bar. */
:root[data-style="glass"] .ds-table th { background: var(--glass-control); }
:root[data-style="glass"] .ds-table td { border-bottom-color: var(--glass-border); }
:root[data-style="glass"] .ds-table--zebra tbody tr:nth-child(even) > td { background: var(--glass-control); }
:root[data-style="glass"] .ds-table tbody tr:hover > td { background: var(--glass-control-hover); }
:root[data-style="glass"] .ds-table tbody tr[aria-selected="true"] > td { background: var(--glass-selected); }
:root[data-style="glass"] :is(.ds-badge, .badge, .status-badge) { box-shadow: inset 0 1px 0 var(--glass-highlight); }
:root[data-style="glass"][data-contrast="high"] :is(.ds-btn[aria-pressed="true"], .ds-segmented input:checked + span, .ds-tab[aria-selected="true"]) { box-shadow: inset 0 0 0 2px var(--color-border-strong); }

/* ================================================================ FINTECH ===================== */
:root[data-style="fintech"] :is(.ds-sidebar, .sidebar, .employee-sidebar) { border-color: transparent; }
:root[data-style="fintech"] :is(.ds-topbar, .employee-topbar, .cp-topbar) { border-color: transparent; color: var(--color-text); }
:root[data-style="fintech"] :is(.app-shell, .ds-shell.app-shell) { background: var(--color-canvas); }
:root[data-style="fintech"] :is(.ds-card, .panel, .metric, .planning-kpi, .crm-metric, .invoice-summary article,
  .employee-info-card, .account-card, .report-panel, .invoice-card, .crm-detail-card, .personal-cockpit, .work-home, .changelog-card, .ds-table-wrap, .ds-register, .action-modal, .setup-checklist) {
  border-color: transparent; box-shadow: none;
}
:root[data-style="fintech"][data-contrast="high"] :is(.ds-card, .panel, .metric, .planning-kpi, .crm-metric, .invoice-summary article,
  .employee-info-card, .account-card, .report-panel, .invoice-card, .crm-detail-card, .personal-cockpit, .work-home, .changelog-card, .ds-table-wrap, .ds-register, .action-modal, .setup-checklist) {
  border: 2px solid var(--color-border);
}
:root[data-style="fintech"] .personal-cockpit-card { border-color: transparent; background: var(--color-surface-sunken); }

/* Buttons: flat 48px pills, weight 700, no shadow; pressed = scale .97 + darker fill. */
:root[data-style="fintech"] :is(.ds-btn, .primary-button, .secondary-button, .ghost-button, .danger-button) { padding-inline: 1.375rem; box-shadow: none; }
:root[data-style="fintech"] :is(.ds-btn--primary, .primary-button):active:not(:disabled):not([aria-disabled="true"]) { background: var(--color-accent-active); border-color: var(--color-accent-active); }
:root[data-style="fintech"] :is(.ds-btn--secondary, .secondary-button):not(:disabled):not([aria-disabled="true"]) {
  border-color: transparent; background: var(--color-accent-soft); color: var(--color-selected-text);
}
:root[data-style="fintech"] :is(.ds-btn--danger-outline, .danger-button):not(:disabled):not([aria-disabled="true"]) { border-color: transparent; background: var(--color-danger-bg); color: var(--color-danger-text); }
:root[data-style="fintech"] :is(.ds-btn--ghost, .ghost-button) { color: var(--color-accent-text); font-weight: var(--weight-bold); }
:root[data-style="fintech"] :is(.ds-icon-btn, .icon-button) { border-color: transparent; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-selected-text); }
:root[data-style="fintech"] :is(.ds-icon-btn, .icon-button):active:not(:disabled) { transform: scale(var(--state-pressed-scale)); background: var(--style-soft-pressed); }
@media (hover: hover) {
  :root[data-style="fintech"] :is(.ds-btn--secondary, .secondary-button, .ds-btn--ghost, .ghost-button, .ds-icon-btn, .icon-button):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: transparent; background: var(--style-soft-hover); color: var(--color-selected-text);
  }
  :root[data-style="fintech"] :is(.ds-btn--danger-outline, .danger-button):hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-danger-fill); color: var(--color-on-danger-fill); }
}
:root[data-style="fintech"] :is(.ds-btn--secondary, .secondary-button, .ds-btn--ghost, .ghost-button):active:not(:disabled):not([aria-disabled="true"]) { background: var(--style-soft-pressed); }
:root[data-style="fintech"] .ds-btn[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]),
:root[data-style="fintech"] :is(.invoice-filters, .dms-worklists, .crm-analytics-periods) button[aria-pressed="true"]:not(:disabled),
:root[data-style="fintech"] [data-crm-presentation][aria-pressed="true"] {
  border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); box-shadow: none; font-weight: var(--weight-bold);
}
:root[data-style="fintech"] :is(.ds-btn, .primary-button, .secondary-button, .danger-button, .icon-button):is(:disabled, [aria-disabled="true"]) {
  background: var(--color-surface-sunken); border-color: var(--color-border-control);
}

:root[data-style="fintech"][data-contrast="high"] :is(.ds-btn--secondary, .secondary-button, .ds-btn--danger-outline, .danger-button, .ds-icon-btn, .icon-button):not(:disabled):not([aria-disabled="true"]) {
  border: 2px solid var(--color-border-control);
}

/* Fields: filled, rounded top, 2px underline (no box); focus = accent underline + ring. */
:root[data-style="fintech"] :is(.ds-input, .ds-select, .ds-textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]), select, textarea):not(:disabled):not(.search *):not(.ds-segmented *):not(.ds-switch *) {
  border-width: 0 0 2px; border-color: var(--color-border-control); background-color: var(--color-surface-sunken);
}
:root[data-style="fintech"] :is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):hover:not(:disabled):not(:focus):not(.search *):not(.ds-segmented *):not(.ds-switch *):not([type=checkbox]):not([type=radio]) {
  border-bottom-color: var(--color-text);
}
:root[data-style="fintech"] :is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):focus-visible:not([type=checkbox]):not([type=radio]) { border-bottom-color: var(--color-accent); }
:root[data-style="fintech"] .search { border-color: transparent; border-radius: var(--radius-full); }

/* Segments and tabs: chips; selected = full royal-blue fill with white bold text. */
:root[data-style="fintech"] .ds-segmented label > span { border-color: transparent; background: var(--color-surface-sunken); border-radius: var(--radius-full); font-weight: var(--weight-semibold); white-space: nowrap; }
:root[data-style="fintech"] .ds-segmented input:checked + span { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
:root[data-style="fintech"] .ds-segmented label:active > span { transform: scale(var(--state-pressed-scale)); }
@media (hover: hover) { :root[data-style="fintech"] .ds-segmented input:hover:not(:checked) + span { background: var(--style-soft-hover); } }
:root[data-style="fintech"] :is(.invoice-filters, .work-home-tabs, .dms-worklists, .crm-analytics-periods) { border-color: transparent; border-radius: var(--radius-full); background: var(--color-surface-sunken); box-shadow: none; }
:root[data-style="fintech"] .ds-tabs { gap: var(--space-2); border-bottom-color: transparent; }
:root[data-style="fintech"] :is(.ds-tab, .crm-tab, .crm-detail-tabs button, .dms-detail-tabs button, .work-home-tabs button, .identity-tab, .invoice-filters button, .dms-worklists button, .crm-analytics-periods button) {
  margin: 0; border-bottom: 0; border-radius: var(--radius-full); font-weight: var(--weight-semibold);
}
:root[data-style="fintech"] .ds-tab[aria-selected="true"],
:root[data-style="fintech"] :is(.crm-detail-tabs, .dms-detail-tabs, .work-home-tabs, [role="tablist"]) [role="tab"][aria-selected="true"],
:root[data-style="fintech"] .dms-detail-tabs button[aria-selected="true"],
:root[data-style="fintech"] :is(.crm-tab, .crm-saved-view, .identity-tab).is-active {
  background: var(--color-accent); color: var(--color-on-accent); box-shadow: none; font-weight: var(--weight-bold);
}
:root[data-style="fintech"] :is(.crm-detail-tabs, .dms-detail-tabs, .work-home-tabs) [aria-selected="true"] svg { color: currentColor; }
:root[data-style="fintech"] :is(.ds-tab, .crm-tab, .work-home-tabs button, .ds-nav-link, .nav-item, .employee-nav-item):active { transform: scale(0.98); }

/* Navigation on the navy island: full royal-blue selection, 12px corners, bold; no bar. */
:root[data-style="fintech"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item) { border-radius: 0.75rem; }
:root[data-style="fintech"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):is([aria-current="page"], .is-active) {
  background: var(--color-selected-bg); color: var(--color-selected-text); box-shadow: none; font-weight: var(--weight-bold);
}
:root[data-style="fintech"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):is([aria-current="page"], .is-active) svg { color: var(--color-selected-text); }
:root[data-style="fintech"][data-contrast="high"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):is([aria-current="page"], .is-active) { box-shadow: inset 0 0 0 2px var(--color-selected-indicator); }

/* Switch, checkbox, radio: solid fills; on = royal blue with ✓; pressed squashes. */
:root[data-style="fintech"] .ds-switch__track { background: var(--color-surface-sunken); }
:root[data-style="fintech"] .ds-switch__track::after { background: var(--color-text-muted); }
:root[data-style="fintech"] .ds-switch input:checked + .ds-switch__track { border-color: var(--color-accent); background: var(--color-accent); }
:root[data-style="fintech"] .ds-switch input:checked + .ds-switch__track::after { background: var(--color-on-accent); color: var(--color-accent); }
:root[data-style="fintech"] .ds-switch:active .ds-switch__track::after { width: 1.75rem; }
:root[data-style="fintech"] :is(.ds-check, .ds-radio) input {
  appearance: none; display: inline-grid; place-items: center; border: 2px solid var(--color-border-control); border-radius: 0.375rem; background: var(--color-surface);
  transition: transform var(--motion-state) var(--ease-state);
}
:root[data-style="fintech"] .ds-radio input { border-radius: 50%; }
:root[data-style="fintech"] :is(.ds-check, .ds-radio):active input { transform: scale(0.92); }
:root[data-style="fintech"] :is(.ds-check, .ds-radio) input:checked { border-color: var(--color-accent); background: var(--color-accent); }
:root[data-style="fintech"] .ds-check input:checked::after { content: "✓" / ""; color: var(--color-on-accent); font-size: 0.9rem; font-weight: var(--weight-bold); line-height: 1; }
:root[data-style="fintech"] .ds-radio input:checked::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-on-accent); }

/* Tables, menus, dialogs, badges. */
:root[data-style="fintech"] .ds-table th { background: var(--color-surface); color: var(--color-text-muted); }
:root[data-style="fintech"] .ds-table td.is-num, :root[data-style="fintech"] td.amount { font-weight: var(--weight-semibold); }
:root[data-style="fintech"] .ds-table tbody tr[aria-selected="true"] > td:first-child { box-shadow: inset var(--indicator-w) 0 0 var(--color-accent); }
:root[data-style="fintech"] :is(.ds-menu, .toolbar-options.is-open, .global-search-results) { border-color: transparent; border-radius: 1rem; }
:root[data-style="fintech"][data-contrast="high"] :is(.ds-menu, .toolbar-options.is-open, .global-search-results, .ds-dialog) { border: 2px solid var(--color-border); }
:root[data-style="fintech"] .ds-dialog { border-color: transparent; }
:root[data-style="fintech"] :is(.ds-dialog__header, .ds-dialog__footer) { border-color: transparent; }
:root[data-style="fintech"] .ds-dialog__header h2 { font-weight: var(--weight-bold); }
:root[data-style="fintech"] :is(.ds-badge, .badge, .status-badge) { font-weight: var(--weight-bold); }
:root[data-style="fintech"] :is(.ds-badge--success, .badge.paid, .badge.success) { border-color: var(--color-success-fill); background: var(--color-success-fill); color: var(--color-on-success-fill); }
:root[data-style="fintech"] :is(.ds-badge--warning, .badge.due, .badge.warning, .badge.planned) { border-color: var(--color-warning-fill); background: var(--color-warning-fill); color: var(--color-on-warning-fill); }
:root[data-style="fintech"] :is(.ds-badge--danger, .badge.danger) { border-color: var(--color-danger-fill); background: var(--color-danger-fill); color: var(--color-on-danger-fill); }
/* Bold numbers; the first KPI of a row is the royal-blue hero panel with white text. */
:root[data-style="fintech"] :is(.ds-kpi__value, .metric strong, .planning-kpi strong, .crm-metric strong, .invoice-summary strong, .employee-info-card strong) {
  font-weight: var(--weight-bold); letter-spacing: -0.02em;
}
:root[data-style="fintech"] :is(.metric-grid, .ds-kpi-row, .crm-metric-grid, .invoice-summary) > :is(.metric, .ds-card, .crm-metric, article):first-child,
:root[data-style="fintech"] .ds-card--hero {
  --color-surface: var(--style-hero);
  --color-text: var(--style-hero-text);
  --color-text-secondary: var(--style-hero-text);
  --color-text-tertiary: var(--style-hero-muted);
  --color-text-muted: var(--style-hero-muted);
  --color-accent-text: var(--style-hero-text);
  --color-success-text: var(--style-hero-text);
  --color-warning-text: var(--style-hero-text);
  --color-danger-text: var(--style-hero-text);
  --color-border: transparent;
  --color-focus: #ffffff;
  --color-focus-halo: #0b1b4d;
  background: var(--style-hero); color: var(--style-hero-text);
}

/* ================================================================ GRAPHITE ==================== */
/* No shadows, gradients or blur anywhere; lines carry structure. */
:root[data-style="graphite"] :is(.ds-card, .panel, .metric, .planning-kpi, .crm-metric, .invoice-summary article, .employee-info-card, .account-card, .report-panel,
  .invoice-card, .crm-detail-card, .personal-cockpit, .work-home, .changelog-card, .ds-table-wrap, .ds-register, .action-modal, .setup-checklist) {
  border-color: var(--color-border); box-shadow: none;
}
:root[data-style="graphite"] :is(.ds-dialog, .ds-menu, .toolbar-options.is-open, .global-search-results, .ds-toast) { border-color: var(--color-border-control); box-shadow: none; }
:root[data-style="graphite"] .topbar { background: var(--color-topbar-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Buttons: primary = filled petrol rectangle; secondary = outline; ghost = text with underline; state layers flat. */
:root[data-style="graphite"] :is(.ds-btn, .primary-button, .secondary-button, .ghost-button, .danger-button, .ds-icon-btn, .icon-button) { box-shadow: none; }
:root[data-style="graphite"] :is(.ds-btn--primary, .primary-button) { font-weight: var(--weight-semibold); }
:root[data-style="graphite"] :is(.ds-btn--secondary, .secondary-button):not(:disabled):not([aria-disabled="true"]) { background: transparent; }
:root[data-style="graphite"] :is(.ds-btn--danger-outline, .danger-button):not(:disabled):not([aria-disabled="true"]) { background: transparent; border-color: var(--color-danger-text); }
:root[data-style="graphite"] :is(.ds-btn--ghost, .ghost-button) { padding-inline: var(--space-2); text-decoration: underline transparent 2px; text-underline-offset: 0.3em; }
@media (hover: hover) {
  :root[data-style="graphite"] :is(.ds-btn--secondary, .secondary-button):hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--color-text); background: var(--color-surface-hover); }
  :root[data-style="graphite"] :is(.ds-btn--ghost, .ghost-button):hover:not(:disabled):not([aria-disabled="true"]) { background: transparent; text-decoration-color: currentColor; }
  :root[data-style="graphite"] :is(.ds-icon-btn, .icon-button):hover:not(:disabled) { border-color: var(--color-border-control); background: transparent; }
  :root[data-style="graphite"] :is(.ds-btn--danger-outline, .danger-button):hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-danger-bg); }
}
:root[data-style="graphite"] :is(.ds-btn--primary, .primary-button):active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-accent-active); box-shadow: inset 0 0 0 2px var(--color-on-accent);
}
:root[data-style="graphite"] :is(.ds-btn--secondary, .secondary-button, .ds-btn--ghost, .ghost-button, .ds-btn--danger-outline, .danger-button, .ds-icon-btn, .icon-button):active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-surface-sunken); box-shadow: inset 0 0 0 1px var(--color-text);
}
:root[data-style="graphite"] :is(.ds-icon-btn, .icon-button) { border-color: transparent; background: transparent; }
:root[data-style="graphite"] .ds-btn[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]),
:root[data-style="graphite"] :is(.invoice-filters, .dms-worklists, .crm-analytics-periods) button[aria-pressed="true"]:not(:disabled),
:root[data-style="graphite"] [data-crm-presentation][aria-pressed="true"] {
  border: 2px solid var(--color-text); background: var(--color-selected-bg); color: var(--color-text); box-shadow: none; font-weight: var(--weight-bold);
}
:root[data-style="graphite"] :is(.ds-btn, .primary-button, .secondary-button, .danger-button, .icon-button):is(:disabled, [aria-disabled="true"]) { background: transparent; }
/* Fields: 1px line, 4px corners; focus adds a second line inside (2px total). */
:root[data-style="graphite"] :is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):hover:not(:disabled):not(:focus):not(.search *):not(.ds-segmented *):not(.ds-switch *):not([type=checkbox]):not([type=radio]) {
  border-color: var(--color-text);
}
:root[data-style="graphite"] :is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):focus-visible:not([type=checkbox]):not([type=radio]) {
  border-color: var(--color-text);
}
/* Segments: one outlined group with 1px dividers; the chosen segment inverts. */
:root[data-style="graphite"] .ds-segmented { gap: 0; }
:root[data-style="graphite"] .ds-segmented > legend { margin-bottom: var(--space-2); }
:root[data-style="graphite"] .ds-segmented label > span { margin-inline-start: -1px; border-radius: 0; background: var(--color-surface); font-weight: var(--weight-medium); }
:root[data-style="graphite"] .ds-segmented label:first-of-type > span { border-start-start-radius: var(--shape-control); border-end-start-radius: var(--shape-control); }
:root[data-style="graphite"] .ds-segmented label:last-of-type > span { border-start-end-radius: var(--shape-control); border-end-end-radius: var(--shape-control); }
:root[data-style="graphite"] .ds-segmented input:checked + span { border-width: var(--border-w-control); border-color: var(--color-text); background: var(--color-text); color: var(--color-canvas); }
:root[data-style="graphite"] .ds-segmented label:active > span { background: var(--color-surface-sunken); }
:root[data-style="graphite"] .ds-style-choice label > span { margin-inline-start: 0; border-radius: var(--shape-control); }
:root[data-style="graphite"] .ds-style-choice { gap: var(--space-2); }
:root[data-style="graphite"] :is(.invoice-filters, .work-home-tabs, .dms-worklists, .crm-analytics-periods) { padding: 0; gap: 0; border-color: var(--color-border-control); box-shadow: none; background: transparent; }
:root[data-style="graphite"] :is(.invoice-filters, .dms-worklists, .crm-analytics-periods) button { border-radius: 0; border-inline-end: 1px solid var(--color-border-control); }
:root[data-style="graphite"] :is(.invoice-filters, .dms-worklists, .crm-analytics-periods) button[aria-pressed="true"] { border: 0; background: var(--color-text); color: var(--color-canvas); }
/* Tabs: a 1px line, selected = 3px underline in text colour + bold, no fill. */
:root[data-style="graphite"] .ds-tabs { gap: 0; border-bottom: 1px solid var(--color-border-control); }
:root[data-style="graphite"] .ds-tab { border-radius: 0; color: var(--color-text-tertiary); }
:root[data-style="graphite"] .ds-tab[aria-selected="true"],
:root[data-style="graphite"] :is(.crm-detail-tabs, .dms-detail-tabs, .work-home-tabs, [role="tablist"]) [role="tab"][aria-selected="true"],
:root[data-style="graphite"] .dms-detail-tabs button[aria-selected="true"],
:root[data-style="graphite"] :is(.crm-tab, .crm-saved-view, .identity-tab).is-active {
  border-bottom-color: var(--color-text); background: transparent; color: var(--color-text); font-weight: var(--weight-bold);
  box-shadow: inset 0 calc(-1 * var(--indicator-w)) 0 var(--color-text);
}
:root[data-style="graphite"] .ds-tab[aria-selected="true"] { box-shadow: none; }
:root[data-style="graphite"] :is(.ds-tab, .crm-tab, .crm-detail-tabs button, .dms-detail-tabs button, .work-home-tabs button, .identity-tab) { border-radius: 0; }
:root[data-style="graphite"] :is(.ds-tab, .crm-tab, .work-home-tabs button, .ds-nav-link, .nav-item, .employee-nav-item):active { background: var(--color-surface-sunken); }
/* Navigation: transparent; selected = 3px bar in text colour + bold, no fill. */
:root[data-style="graphite"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item) { border-radius: 0 var(--shape-control) var(--shape-control) 0; }
:root[data-style="graphite"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):is([aria-current="page"], .is-active) {
  background: transparent; color: var(--color-text); font-weight: var(--weight-bold); box-shadow: inset var(--indicator-w) 0 0 var(--color-text);
}
:root[data-style="graphite"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):is([aria-current="page"], .is-active) svg { color: var(--color-text); }
/* Switch, checkbox, radio: square-ish, monochrome when on. */
:root[data-style="graphite"] .ds-switch__track { border-width: 1px; border-radius: 0.25rem; }
:root[data-style="graphite"] .ds-switch__track::after { border-radius: 0.125rem; }
:root[data-style="graphite"] .ds-switch input:checked + .ds-switch__track { border-color: var(--color-text); background: var(--color-text); }
:root[data-style="graphite"] .ds-switch input:checked + .ds-switch__track::after { background: var(--color-canvas); color: var(--color-text); }
:root[data-style="graphite"] :is(.ds-check, .ds-radio) input {
  appearance: none; display: inline-grid; place-items: center; border: 1.5px solid var(--color-border-control); border-radius: 0.125rem; background: var(--color-surface);
}
:root[data-style="graphite"] .ds-radio input { border-radius: 50%; }
:root[data-style="graphite"] :is(.ds-check, .ds-radio) input:checked { border-color: var(--color-text); background: var(--color-text); }
:root[data-style="graphite"] .ds-check input:checked::after { content: "✓" / ""; color: var(--color-canvas); font-size: 0.9rem; font-weight: var(--weight-bold); line-height: 1; }
:root[data-style="graphite"] .ds-radio input:checked::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-canvas); }
/* Tables, menus, badges. */
:root[data-style="graphite"] .ds-table { font-size: var(--text-sm); }
:root[data-style="graphite"] .ds-table th { background: var(--color-surface); border-bottom-width: 2px; border-bottom-color: var(--color-text); }
:root[data-style="graphite"] .ds-table td { border-bottom-color: var(--color-border); }
:root[data-style="graphite"] .ds-table tbody tr[aria-selected="true"] > td:first-child { box-shadow: inset var(--indicator-w) 0 0 var(--color-text); }
@media (hover: hover) { :root[data-style="graphite"] .ds-menu__item:hover { background: var(--color-surface-hover); text-decoration: underline; } }
:root[data-style="graphite"] :is(.ds-badge, .badge, .status-badge) { border-radius: 0.125rem; background: transparent; }
:root[data-style="graphite"] .ds-dialog__header { border-bottom-color: var(--color-border-control); }
:root[data-style="graphite"] :is(.ds-card__title, .panel-header h2) { font-weight: var(--weight-bold); }
:root[data-style="graphite"][data-contrast="high"] .ds-tab[aria-selected="true"] { border-bottom-width: 0.25rem; }

/* ================================================================ LIQUID GLASS ================ */
/* Wallpaper: a faint tint on the page so the glass layer has something to bend; content stays opaque. */
:root[data-style="liquid-glass"] {
  background-color: var(--color-canvas);
  background-image: radial-gradient(60rem 40rem at 0% 0%, var(--glass-backdrop-a), transparent 70%), radial-gradient(50rem 40rem at 100% 100%, var(--glass-backdrop-b), transparent 70%);
  background-attachment: fixed;
}
:root[data-style="liquid-glass"] :is(body, .ds-shell, .app-shell, .ds-shell.app-shell, .employee-shell, .cp-body, .legal-body, .ds-main, .workspace, .employee-workspace) { background: transparent; }
:root[data-style="liquid-glass"] :is(h1, h2, .ds-card__title, .ds-dialog__header h2, .action-modal-header strong) { font-weight: var(--weight-bold); letter-spacing: -0.01em; }

/* Content layer: opaque, borderless, large concentric radii, no shadow (the page colour separates). */
:root[data-style="liquid-glass"] :is(.ds-card, .panel, .metric, .planning-kpi, .crm-metric, .invoice-summary article, .employee-info-card, .account-card, .report-panel,
  .invoice-card, .crm-detail-card, .personal-cockpit, .welcome-band, .work-home, .changelog-card, .ds-table-wrap, .ds-register, .action-modal, .setup-checklist) {
  border-color: transparent; box-shadow: none;
}
:root[data-style="liquid-glass"] :is(.ds-card, .panel, .personal-cockpit, .work-home) :is(.ds-card, .panel, .metric, .account-card, .changelog-card) { border-radius: max(var(--shape-inner), 0.75rem); background: var(--color-surface-subtle); }
:root[data-style="liquid-glass"] .personal-cockpit-card { border-color: transparent; border-radius: max(var(--shape-inner), 0.75rem); background: var(--color-surface-sunken); }
:root[data-style="liquid-glass"] .ds-card--interactive:hover { transform: translateY(-0.0625rem); box-shadow: var(--shadow-md); }
:root[data-style="liquid-glass"][data-contrast="high"] :is(.ds-card, .panel, .metric, .ds-table-wrap, .action-modal, .work-home, .personal-cockpit) { border: 2px solid var(--color-border); }

/* Navigation layer = glass (≥ .90 because of secondary text and accent icons), floating shadow, no hard lines. */
:root[data-style="liquid-glass"] :is(.ds-topbar, .topbar, .employee-topbar, .cp-topbar, .ds-sidebar, .sidebar, .employee-sidebar, .admin-sidebar) {
  border-color: transparent; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
@container page (min-width: 60.01rem) {
  :root[data-style="liquid-glass"] .ds-shell > .ds-sidebar {
    top: calc(var(--topbar-h) + 0.5rem); height: calc(100dvh - var(--topbar-h) - 1rem); margin: 0.5rem 0 0.5rem 0.5rem;
    border-radius: var(--shape-card); box-shadow: var(--glass-edge), var(--glass-float);
  }
  :root[data-style="liquid-glass"] .ds-shell.app-shell { background: transparent; }
}
:root[data-style="liquid-glass"] :is(.ds-topbar, .topbar, .employee-topbar) { box-shadow: 0 1px 0 var(--color-border-subtle); }
/* Overlays: glass .90, floating shadow, big concentric corners; buttons morph into menus (scale from origin). */
:root[data-style="liquid-glass"] :is(.ds-dialog, .ds-menu, .toolbar-options.is-open, .global-search-results, .ds-toast) {
  border-color: transparent; background: var(--glass-strong); box-shadow: var(--glass-edge), var(--glass-float);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-style="liquid-glass"] :is(.ds-menu, .toolbar-options.is-open, .global-search-results) { border-radius: 1.125rem; transform-origin: top right; animation: lg-morph var(--motion-state) var(--ease-state); }
:root[data-style="liquid-glass"] :is(.ds-dialog__header, .ds-dialog__footer, .action-modal-header) { border-color: transparent; background: transparent; }
:root[data-style="liquid-glass"] .action-modal-actions { border-color: transparent; }
:root[data-style="liquid-glass"] .ds-dialog__header { padding-inline-start: var(--space-5); }
:root[data-style="liquid-glass"] .ds-dialog[open] { animation: lg-morph var(--motion-state) var(--ease-state); }
@keyframes lg-morph { from { opacity: 0; transform: scale(0.6); } }
@container page (max-width: 30rem) { :root[data-style="liquid-glass"] .ds-dialog { width: calc(100% - 1rem); margin: auto 0.5rem 0.5rem; border-radius: var(--shape-overlay); } }

/* Buttons: borderless glass capsules with specular highlight and no drop shadow.  Pressed: light from
   within (radial glow at the pointer, design-system.js sets --press-x/--press-y) + grow 1.03 on a spring. */
:root[data-style="liquid-glass"] :is(.ds-btn, .primary-button, .secondary-button, .ghost-button, .danger-button, .ds-icon-btn, .icon-button):not(summary) { position: relative; isolation: isolate; overflow: hidden; }
:root[data-style="liquid-glass"] :is(.ds-btn, .primary-button, .secondary-button, .ghost-button, .danger-button, .ds-icon-btn, .icon-button):not(summary)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--press-x, 50%) var(--press-y, 50%), var(--glass-glow), transparent 65%);
  transition: opacity var(--motion-state) ease-out;
}
:root[data-style="liquid-glass"] :is(.ds-btn, .primary-button, .secondary-button, .ghost-button, .danger-button, .ds-icon-btn, .icon-button):not(summary):active:not(:disabled):not([aria-disabled="true"])::after { opacity: 1; transition-duration: 0ms; }
:root[data-style="liquid-glass"] :is(.ds-btn, .primary-button, .secondary-button, .ghost-button, .danger-button):active:not(:disabled):not([aria-disabled="true"]) { transform: scale(var(--lg-press-scale)); }
:root[data-style="liquid-glass"] :is(.ds-icon-btn, .icon-button):active:not(:disabled):not([aria-disabled="true"]) { transform: scale(var(--lg-icon-press-scale)); }
:root[data-style="liquid-glass"] :is(.ds-btn--secondary, .secondary-button, .ds-icon-btn, .icon-button, .ds-user-menu__button):not(:disabled):not([aria-disabled="true"]) {
  border-color: transparent; background: var(--glass-specular), var(--glass-control); color: var(--color-text); box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
:root[data-style="liquid-glass"] :is(.ds-icon-btn, .icon-button) { border-radius: 50%; }
:root[data-style="liquid-glass"] :is(.ds-btn--primary, .primary-button):not(:disabled):not([aria-disabled="true"]) {
  border-color: transparent; background: var(--glass-specular-tint), var(--glass-tint); color: var(--color-on-accent); box-shadow: var(--glass-edge);
}
:root[data-style="liquid-glass"] .ds-btn--danger:not(:disabled):not([aria-disabled="true"]) {
  border-color: transparent; background: var(--glass-specular-tint), var(--glass-tint-danger); color: var(--color-on-danger-fill); box-shadow: var(--glass-edge);
}
:root[data-style="liquid-glass"] :is(.ds-btn--danger-outline, .danger-button):not(:disabled):not([aria-disabled="true"]) {
  border-color: transparent; background: var(--glass-specular), var(--glass-strong); color: var(--color-danger-text); box-shadow: var(--glass-edge);
}
:root[data-style="liquid-glass"] :is(.ds-btn--ghost, .ghost-button) { border-color: transparent; background: transparent; color: var(--color-accent-text); }
@media (hover: hover) {
  :root[data-style="liquid-glass"] :is(.ds-btn--secondary, .secondary-button, .ds-icon-btn, .icon-button, .ds-btn--danger-outline, .danger-button, .ds-user-menu__button):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: transparent; background: var(--glass-specular), var(--glass-specular), var(--glass-control-hover);
  }
  :root[data-style="liquid-glass"] :is(.ds-btn--primary, .primary-button):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: transparent; background: var(--glass-specular-tint), var(--glass-specular-tint), var(--glass-tint); color: var(--color-on-accent);
  }
  /* Borderless: the glass platter appears behind the label (iPad pointer highlight). */
  :root[data-style="liquid-glass"] :is(.ds-btn--ghost, .ghost-button):hover:not(:disabled):not([aria-disabled="true"]) { background: var(--glass-platter); color: var(--color-accent-text); }
}
:root[data-style="liquid-glass"] :is(.ds-btn--ghost, .ghost-button):active:not(:disabled):not([aria-disabled="true"]) { background: var(--glass-platter-pressed); }
/* Toggle buttons: accent-tinted glass + check mark (like the Phone app filters). */
:root[data-style="liquid-glass"] .ds-btn[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]),
:root[data-style="liquid-glass"] :is(.invoice-filters, .dms-worklists, .crm-analytics-periods) button[aria-pressed="true"]:not(:disabled),
:root[data-style="liquid-glass"] [data-crm-presentation][aria-pressed="true"] {
  border-color: transparent; background: var(--glass-specular-tint), var(--glass-tint); color: var(--color-on-accent); box-shadow: var(--glass-edge); font-weight: var(--weight-semibold);
}
:root[data-style="liquid-glass"] :is(.ds-btn, .primary-button, .secondary-button, .danger-button, .icon-button):is(:disabled, [aria-disabled="true"]) {
  border-color: var(--color-border-control); border-style: dashed; background: var(--color-surface-sunken); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* High contrast ("Button Shapes"): every capsule, also borderless ones, gets a 1.5px edge. */
:root[data-style="liquid-glass"][data-contrast="high"] :is(.ds-btn, .primary-button, .secondary-button, .ghost-button, .danger-button, .ds-icon-btn, .icon-button):not(:disabled) { border: 1.5px solid var(--color-border-control); }

/* Fields: 12px rounded rectangles, faint fill + 3:1 line; focus = 3px accent halo around the field (macOS). */
:root[data-style="liquid-glass"] :is(.ds-input, .ds-select, .ds-textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]), select, textarea):not(:disabled):not(.search *):not(.ds-segmented *):not(.ds-switch *) {
  background-color: var(--color-surface-subtle);
}
:root[data-style="liquid-glass"] :is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):hover:not(:disabled):not(:focus):not(.search *):not(.ds-segmented *):not(.ds-switch *):not([type=checkbox]):not([type=radio]) { border-color: var(--color-border-strong); }
:root[data-style="liquid-glass"] :is(.ds-input, .ds-select, .ds-textarea, input, select, textarea):focus-visible:not([type=checkbox]):not([type=radio]) { border-color: var(--color-focus); }
:root[data-style="liquid-glass"] :is(.ds-search input, .search) { border-radius: var(--radius-full); background: var(--glass-track); }

/* Segments and tabs: a capsule track; the selection is a light thumb that slides on a spring
   (design-system.js measures it into --thumb-*; without script the chosen segment carries the thumb itself). */
:root[data-style="liquid-glass"] .ds-segmented { position: relative; gap: 0; }
:root[data-style="liquid-glass"] .ds-segmented label > span { position: relative; z-index: 1; border-color: transparent; border-radius: 0; background: var(--glass-track); font-weight: var(--weight-medium); }
:root[data-style="liquid-glass"] .ds-segmented label:first-of-type > span { border-start-start-radius: var(--radius-full); border-end-start-radius: var(--radius-full); }
:root[data-style="liquid-glass"] .ds-segmented label:last-of-type > span { border-start-end-radius: var(--radius-full); border-end-end-radius: var(--radius-full); }
:root[data-style="liquid-glass"] .ds-segmented input:checked + span {
  border-color: transparent; border-width: var(--border-w-control); background: var(--glass-thumb); color: var(--color-text); font-weight: var(--weight-semibold);
  border-radius: var(--radius-full); box-shadow: var(--glass-edge), 0 1px 4px light-dark(rgb(0 0 0 / 14%), rgb(0 0 0 / 50%));
}
:root[data-style="liquid-glass"] .ds-segmented input:checked + span::before { content: none; }
@media (hover: hover) { :root[data-style="liquid-glass"] .ds-segmented input:hover:not(:checked) + span { background-color: var(--glass-platter); } }
:root[data-style="liquid-glass"] .ds-segmented label:active > span { transform: scale(1.04); transition: transform var(--motion-state) var(--ease-state); }
:root[data-style="liquid-glass"] .ds-segmented[data-thumb]::after,
:root[data-style="liquid-glass"] .ds-tabs[data-thumb]::after {
  content: ""; position: absolute; left: 0; top: 0; z-index: 0; width: var(--thumb-w); height: var(--thumb-h); border-radius: var(--radius-full);
  background: var(--glass-thumb); box-shadow: var(--glass-edge), 0 1px 4px light-dark(rgb(0 0 0 / 14%), rgb(0 0 0 / 50%));
  transform: translate(var(--thumb-x), var(--thumb-y)); pointer-events: none;
}
:root[data-style="liquid-glass"] .ds-segmented[data-thumb="ready"]::after,
:root[data-style="liquid-glass"] .ds-tabs[data-thumb="ready"]::after { transition: transform var(--motion-state) var(--ease-state), width var(--motion-state) var(--ease-state); }
/* With the thumb: every segment is track, the label of the chosen one sits above the thumb. */
:root[data-style="liquid-glass"] .ds-segmented[data-thumb] label > span { background: transparent; }
:root[data-style="liquid-glass"] .ds-segmented[data-thumb] input:checked + span { background: transparent; box-shadow: none; }
:root[data-style="liquid-glass"] .ds-segmented[data-thumb]:not(.ds-style-choice)::before {
  content: ""; position: absolute; z-index: 0; left: 0; top: var(--track-y); width: var(--track-w); height: var(--track-h);
  border-radius: var(--radius-full); background: var(--glass-track); pointer-events: none;
}
:root[data-style="liquid-glass"] .ds-style-choice { gap: var(--space-2); }
:root[data-style="liquid-glass"] .ds-style-choice label > span,
:root[data-style="liquid-glass"] .ds-style-choice label:is(:first-of-type, :last-of-type) > span { border-radius: var(--radius-lg); }
:root[data-style="liquid-glass"] .ds-style-choice[data-thumb] label > span { background: var(--glass-track); }
:root[data-style="liquid-glass"] .ds-style-choice[data-thumb]::after { border-radius: var(--radius-lg); }
:root[data-style="liquid-glass"] .ds-style-choice[data-thumb] input:checked + span { background: transparent; }
:root[data-style="liquid-glass"] .ds-tabs { position: relative; display: inline-flex; gap: 0; padding: 0.1875rem; border: 0; border-radius: var(--radius-full); background: var(--glass-track); }
:root[data-style="liquid-glass"] .ds-tab { position: relative; z-index: 1; margin: 0; border: 0; border-radius: var(--radius-full); color: var(--color-text-secondary); }
:root[data-style="liquid-glass"] .ds-tab[aria-selected="true"] { background: var(--glass-thumb); color: var(--color-text); font-weight: var(--weight-semibold); box-shadow: var(--glass-edge); }
:root[data-style="liquid-glass"] .ds-tabs[data-thumb] .ds-tab[aria-selected="true"] { background: transparent; box-shadow: none; }
:root[data-style="liquid-glass"] :is(.invoice-filters, .work-home-tabs, .dms-worklists, .crm-analytics-periods) { border-color: transparent; border-radius: var(--radius-full); background: var(--glass-track); box-shadow: none; }
:root[data-style="liquid-glass"] :is(.crm-tab, .crm-detail-tabs button, .dms-detail-tabs button, .work-home-tabs button, .identity-tab, .invoice-filters button, .dms-worklists button, .crm-analytics-periods button) { border-radius: var(--radius-full); }
:root[data-style="liquid-glass"] :is(.crm-detail-tabs, .dms-detail-tabs, .work-home-tabs, [role="tablist"]) [role="tab"][aria-selected="true"],
:root[data-style="liquid-glass"] .dms-detail-tabs button[aria-selected="true"],
:root[data-style="liquid-glass"] :is(.crm-tab, .crm-saved-view, .identity-tab).is-active {
  background: var(--glass-thumb); color: var(--color-text); font-weight: var(--weight-semibold); box-shadow: var(--glass-edge), 0 1px 4px light-dark(rgb(0 0 0 / 14%), rgb(0 0 0 / 50%));
}
@media (hover: hover) {
  :root[data-style="liquid-glass"] :is(.ds-tab, .crm-tab, .crm-detail-tabs button, .dms-detail-tabs button, .work-home-tabs button, .identity-tab, .ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item, .nav-toggle):hover:not(.is-active):not([aria-selected="true"]):not([aria-current="page"]) {
    background: var(--glass-platter);
  }
}
:root[data-style="liquid-glass"] :is(.ds-tab, .crm-tab, .work-home-tabs button, .ds-nav-link, .nav-item, .employee-nav-item):active { background: var(--glass-platter-pressed); }

/* Sidebar items: accent icons; selected = grey platter + bold; while the list has keyboard focus the
   selected row turns into the accent highlight with white text (macOS list focus). */
:root[data-style="liquid-glass"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item) { border-radius: 0.625rem; }
:root[data-style="liquid-glass"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item) svg { color: var(--color-accent-text); }
:root[data-style="liquid-glass"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):is([aria-current="page"], .is-active) {
  background: var(--color-selected-bg); color: var(--color-selected-text); font-weight: var(--weight-bold); box-shadow: none;
}
:root[data-style="liquid-glass"] :is(.ds-sidebar, .sidebar, .employee-sidebar):focus-within :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):is([aria-current="page"], .is-active) {
  background: var(--color-accent); color: var(--color-on-accent);
}
:root[data-style="liquid-glass"] :is(.ds-sidebar, .sidebar, .employee-sidebar):focus-within :is(.ds-nav-link, .nav-item, .employee-nav-item):is([aria-current="page"], .is-active) svg { color: var(--color-on-accent); }
:root[data-style="liquid-glass"][data-contrast="high"] :is(.ds-nav-link, .nav-item, .employee-nav-item, .admin-nav-item):is([aria-current="page"], .is-active) { box-shadow: inset 0 0 0 2px var(--color-selected-indicator); }

/* Switch: wide capsule knob; on = accent track; while pressed the knob turns into a clear glass lens. */
:root[data-style="liquid-glass"] .ds-switch input { width: 3.75rem; }
:root[data-style="liquid-glass"] .ds-switch__track { width: 3.75rem; height: 1.875rem; border-width: 1px; background: var(--glass-track); }
:root[data-style="liquid-glass"] .ds-switch__track::after {
  inset-block-start: 0.125rem; inset-inline-start: 0.125rem; width: 2.125rem; height: 1.5rem; border-radius: var(--radius-full);
  background: var(--glass-thumb); color: var(--color-accent-text); box-shadow: 0 1px 4px light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 55%));
  transition: transform var(--motion-state) var(--ease-state), background-color var(--motion-state) var(--ease-state), scale var(--motion-state) var(--ease-state);
}
:root[data-style="liquid-glass"] .ds-switch input:checked + .ds-switch__track { border-color: var(--color-accent); background: var(--color-accent); }
:root[data-style="liquid-glass"] .ds-switch input:checked + .ds-switch__track::after { transform: translateX(1.375rem); background: var(--glass-thumb); color: var(--color-accent-text); }
:root[data-style="liquid-glass"] .ds-switch:active .ds-switch__track::after { scale: var(--lg-press-scale); background: light-dark(rgb(255 255 255 / 55%), rgb(255 255 255 / 30%)); box-shadow: var(--glass-edge); }
:root[data-style="liquid-glass"] :is(.ds-check, .ds-radio) input {
  appearance: none; display: inline-grid; place-items: center; border: 1px solid var(--color-border-control); border-radius: 0.3125rem; background: var(--color-surface);
}
:root[data-style="liquid-glass"] .ds-radio input { border-radius: 50%; }
:root[data-style="liquid-glass"] :is(.ds-check, .ds-radio) input:checked { border-color: var(--color-accent); background: var(--color-accent); }
:root[data-style="liquid-glass"] .ds-check input:checked::after { content: "✓" / ""; color: var(--color-on-accent); font-size: 0.85rem; font-weight: var(--weight-bold); line-height: 1; }
:root[data-style="liquid-glass"] .ds-radio input:checked::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-on-accent); }

/* Lists and tables: inset grouped; hairlines, platter hover, selected grey platter. */
:root[data-style="liquid-glass"] .ds-table th { background: var(--color-surface); border-bottom-width: 1px; border-bottom-color: var(--color-border); }
:root[data-style="liquid-glass"] .ds-table td { border-bottom-color: var(--color-border-subtle); }
:root[data-style="liquid-glass"] .ds-table tbody tr:hover > td { background: var(--glass-platter); }
:root[data-style="liquid-glass"] .ds-table tbody tr[aria-selected="true"] > td { background: var(--color-selected-bg); color: var(--color-selected-text); }
/* Menus: items highlight in accent with white text, concentric 8px corners. */
:root[data-style="liquid-glass"] .ds-menu__item { border-radius: 0.5rem; }
@media (hover: hover) {
  :root[data-style="liquid-glass"] :is(.ds-menu__item, .toolbar-options > button, .toolbar-options > a.secondary-button, .global-search-results button):hover { background: var(--color-accent); color: var(--color-on-accent); }
  :root[data-style="liquid-glass"] .ds-menu__item:hover svg { color: var(--color-on-accent); }
}
/* Badges: capsules of tinted glass with their status glyph. */
:root[data-style="liquid-glass"] :is(.ds-badge, .badge, .status-badge) { border-color: transparent; background-image: var(--glass-specular); }
:root[data-style="liquid-glass"][data-contrast="high"] :is(.ds-badge, .badge, .status-badge) { border-color: currentColor; }
:root[data-style="liquid-glass"] :is(.ds-avatar, .account-avatar) { box-shadow: var(--glass-edge); }

/* ---------------------------------------------------------------- forced colours (Windows contrast themes)
   Style effects off; every control keeps an edge (shadows are dropped by the browser); custom boxes fall
   back to the native checkbox/radio. */
@media (forced-colors: active) {
  :root[data-style] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  :root[data-style] :is(.ds-btn, .primary-button, .secondary-button, .ghost-button, .danger-button, .ds-icon-btn, .icon-button, .ds-card, .panel, .ds-dialog, .ds-menu, .ds-tab) {
    border: 1px solid ButtonText; background-image: none;
  }
  :root[data-style] :is(.ds-input, .ds-select, .ds-textarea, input, select, textarea) { border: 1px solid CanvasText; }
  :root[data-style] :is(.ds-check, .ds-radio) input { appearance: auto; }
  :root[data-style] :is(.ds-btn[aria-pressed="true"], .ds-tab[aria-selected="true"]) { outline: 2px solid Highlight; outline-offset: -2px; }
  :root[data-style] :is(.ds-segmented, .ds-tabs)[data-thumb]::after { display: none; }
  :root[data-style] :is(.ds-btn, .ds-icon-btn, .primary-button, .secondary-button)::after { display: none; }
}

/* ---------------------------------------------------------------- "Stil" swatches in the Darstellung panel
   Fixed miniature of each style (independent of the active one): page, card, accent pill. */
.ds-style-choice label > span { flex-direction: column; gap: var(--space-2); padding-block: var(--space-2); }
.ds-display-panel .ds-style-choice label { flex: 1 1 5.5rem; }
:root[data-style] .ds-display-panel .ds-style-choice label > span { border-radius: var(--radius-lg); }
.ds-style-swatch {
  position: relative; display: block; width: 100%; max-width: 6.5rem; height: 3.25rem; overflow: hidden;
  border: 1px solid var(--color-border-control); border-radius: 0.5rem; background: var(--sw-bg);
}
.ds-style-swatch i { position: absolute; display: block; }
.ds-style-swatch i:nth-child(1) { inset: 0.5rem 1.75rem 0.5rem 0.5rem; border-radius: var(--sw-r); background: var(--sw-card); box-shadow: var(--sw-shadow); border: 1px solid var(--sw-line); }
.ds-style-swatch i:nth-child(2) { inset: 0 auto 0 0; width: 0.375rem; background: var(--sw-nav); }
.ds-style-swatch i:nth-child(3) { right: 0.375rem; bottom: 0.5rem; width: 1.125rem; height: 0.625rem; border-radius: var(--sw-pill); background: var(--sw-accent); box-shadow: var(--sw-pill-shadow, none); }
.ds-style-swatch i:nth-child(4) { left: 0.875rem; top: 0.875rem; width: 1.5rem; height: 0.25rem; border-radius: 1px; background: var(--sw-text); }
.ds-style-swatch[data-style-swatch="standard"] { --sw-bg: light-dark(#f3f5f8, #0f1318); --sw-card: light-dark(#ffffff, #161b22); --sw-line: light-dark(#d9dee6, #2c343f); --sw-nav: light-dark(#f8f9fb, #11161d); --sw-accent: light-dark(#2449a8, #9dbaff); --sw-text: light-dark(#0f1722, #eef2f7); --sw-r: 0.25rem; --sw-pill: 0.1875rem; --sw-shadow: none; }
.ds-style-swatch[data-style-swatch="soft"] { --sw-bg: light-dark(#e6ebf2, #252a33); --sw-card: light-dark(#e6ebf2, #252a33); --sw-line: transparent; --sw-nav: light-dark(#e6ebf2, #252a33); --sw-accent: linear-gradient(135deg, #2f6bff, #4f9bff); --sw-text: light-dark(#232b3a, #e8edf5); --sw-r: 0.5rem; --sw-pill: 999px; --sw-shadow: -2px -2px 4px light-dark(#ffffff, #2f3540), 2px 2px 4px light-dark(#c3cad6, #1a1d23); }
.ds-style-swatch[data-style-swatch="glass"] { --sw-bg: radial-gradient(circle at 20% 25%, light-dark(#9fc0f0, #3a5f9a), transparent 55%), radial-gradient(circle at 85% 80%, light-dark(#a8dcc0, #2d6650), transparent 50%), linear-gradient(160deg, light-dark(#d5d9de, #262d38), light-dark(#a9b1bb, #151a22)); --sw-card: light-dark(rgb(255 255 255 / 45%), rgb(255 255 255 / 10%)); --sw-line: light-dark(rgb(255 255 255 / 80%), rgb(255 255 255 / 22%)); --sw-nav: transparent; --sw-accent: light-dark(#0a6cff, #5aa2ff); --sw-text: light-dark(#141a24, #eef2f7); --sw-r: 0.4375rem; --sw-pill: 999px; --sw-shadow: none; }
.ds-style-swatch[data-style-swatch="fintech"] { --sw-bg: light-dark(#eef2fb, #08112e); --sw-card: light-dark(#ffffff, #0f1d48); --sw-line: transparent; --sw-nav: light-dark(#0b1b4d, #050b20); --sw-accent: light-dark(#1f4fff, #5b82ff); --sw-text: light-dark(#0e1630, #eef2ff); --sw-r: 0.4375rem; --sw-pill: 999px; --sw-shadow: none; }
.ds-style-swatch[data-style-swatch="fintech"] i:nth-child(2) { width: 0.875rem; }
.ds-style-swatch[data-style-swatch="graphite"] { --sw-bg: light-dark(#f4f4f2, #161616); --sw-card: light-dark(#ffffff, #202020); --sw-line: light-dark(#bdbdb8, #4a4a4a); --sw-nav: light-dark(#fafaf8, #1a1a1a); --sw-accent: light-dark(#0f6e66, #4fd1c0); --sw-text: light-dark(#111111, #f2f2f2); --sw-r: 0.1875rem; --sw-pill: 0.125rem; --sw-shadow: none; }
.ds-style-swatch[data-style-swatch="liquid-glass"] { --sw-bg: radial-gradient(circle at 0% 0%, light-dark(#cfe2fb, #0b2a52), transparent 60%), radial-gradient(circle at 100% 100%, light-dark(#ecdcf7, #2c1240), transparent 60%), light-dark(#f5f5f7, #000000); --sw-card: light-dark(#ffffff, #1c1c1e); --sw-line: transparent; --sw-nav: light-dark(rgb(255 255 255 / 70%), rgb(60 60 64 / 70%)); --sw-accent: linear-gradient(180deg, rgb(255 255 255 / 35%), transparent 60%), light-dark(#0068d6, #0a84ff); --sw-text: light-dark(#1d1d1f, #f5f5f7); --sw-r: 0.5625rem; --sw-pill: 999px; --sw-shadow: none; --sw-pill-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%); }
.ds-style-swatch[data-style-swatch="liquid-glass"] i:nth-child(2) { inset: 0.25rem auto 0.25rem 0.25rem; width: 0.5rem; border-radius: 0.25rem; box-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 14%)); }
}