:root {
  color-scheme: light;
  --cp-bg: #f5f5f7;
  --cp-bg-elevated: #f2f2f4;
  --cp-surface: #ffffff;
  --cp-surface-soft: #f4f4f6;
  --cp-border: #e2e2e7;
  --cp-border-strong: #8a8a8e;
  --cp-text: #11111a;
  --cp-text-muted: #545458;
  --cp-text-soft: #6c6c70;
  /* Premium monochrome: matte black for what you act on, silver around it (docs/design.md, Colour). */
  --cp-accent: #1d1d1f;
  --cp-accent-hover: #000000;
  --cp-accent-soft: rgb(29 29 31 / 0.07);
  --cp-accent-fg: #ffffff;
  --cp-success: #128c5b;
  --cp-danger: #b32639;
  --cp-warning: #a56700;
  --cp-link: #1d1d1f;
  --cp-shadow: 0 12px 32px rgba(17, 17, 26, 0.08);
  --cp-overlay: rgba(255, 255, 255, 0.8);
  --cp-panel: rgba(255, 255, 255, 0.86);
  --cp-panel-strong: rgba(255, 255, 255, 0.96);
  --cp-sheen: rgba(255, 255, 255, 0.55);
  --cp-highlight: rgb(29 29 31 / 0.08);
  --cp-brand: #f2f2f4;
  --cp-brand-band: linear-gradient(120deg, #f8f8fa 0%, #ececef 55%, #f5f5f7 100%);
  --cp-brand-deep: #11111a;
  --cp-brand-hover: #23233a;
  --cp-brand-ink: #11111a;
  --cp-brand-fg: #ffffff;
  --cp-brand-muted: #a1a1a6;
  --cp-brand-border: rgba(255, 255, 255, 0.1);
  --cp-action: #1d1d1f;
  --cp-action-hover: #000000;
  --cp-action-fg: #ffffff;
  --cp-action-soft: #ececef;
  /* Brushed metal for the few marks that were the brand gradient (progress, a finished step). */
  --cp-chrome: linear-gradient(135deg, #636366 0%, #2c2c2e 48%, #000000 100%);

  /* UI 2.0 app surfaces (files/showesy-ui2-koncept.html): page cloud, borderless cards with
     Apple's elevation, filled controls, the ink sidebar and strong glass for modals and menus. */
  --cp-card: #ffffff;
  --cp-card-raised: #ffffff;
  --cp-segment-on: #ffffff;
  --cp-fill: #e9e9ee;
  --cp-fill-hover: #e0e0e7;
  --cp-separator: #e5e5ea;
  --cp-shadow-1: 2px 4px 12px rgb(17 17 26 / 0.08);
  --cp-shadow-2: 2px 4px 16px rgb(17 17 26 / 0.16);
  --cp-shadow-3: 2px 8px 32px rgb(17 17 26 / 0.2);
  --cp-glass: rgb(250 250 252 / 0.8);
  --cp-glass-edge: inset 0 0 0 1px rgb(255 255 255 / 0.55);
  --cp-glass-filter: blur(20px) saturate(180%);
  --cp-glass-fallback: rgb(250 250 252 / 0.96);
  --cp-backdrop: rgb(17 17 26 / 0.36);
  --cp-toast: rgb(17 17 26 / 0.72);
  --cp-toast-fallback: rgb(17 17 26 / 0.94);
  --cp-sidebar: #11111a;
  --cp-sidebar-text: #d9d9de;
  --cp-sidebar-muted: #a1a1a6;
  --cp-sidebar-hover: rgb(255 255 255 / 0.06);
  --cp-sidebar-active: rgb(255 255 255 / 0.1);
  --cp-sidebar-edge: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  --cp-sidebar-focus: #e5e5ea;
  --cp-dot-online: #12a36b;
  --cp-dot-online-ring: rgb(18 163 107 / 0.18);
  --cp-dot-idle: #8a8a8e;
  --cp-em-purple: #3a3a3c;
  --cp-em-pink: #c2367f;
  --cp-em-orange: #c2560f;
  --cp-em-teal: #0f766e;
  --cp-em-green: #0a7a3f;
  --cp-em-blue: #1d5fd1;
  /* An unavailable control: a grey fill and softer text, never a lowered opacity (docs/design.md). */
  --cp-disabled-fill: #e9e9ee;
  --cp-disabled-text: #8a8a8e;
}

/* Dark is its own design, not light inverted: graphite and charcoal layers (never pure black), lifted by light edges and
   deep glass, with silver for the accent (docs/design.md, Colour and dark mode). */
html[data-theme="dark"] {
  color-scheme: dark;
  --cp-bg: #161618;
  --cp-bg-elevated: #1b1b1e;
  --cp-surface: #1f1f23;
  --cp-surface-soft: #28282d;
  --cp-border: #38383f;
  --cp-border-strong: #7c7c80;
  --cp-text: #f5f5f7;
  --cp-text-muted: #b8b8bd;
  --cp-text-soft: #a5a5aa;
  --cp-accent: #e5e5ea;
  --cp-accent-hover: #ffffff;
  --cp-accent-soft: rgb(229 229 234 / 0.12);
  --cp-accent-fg: #111113;
  --cp-success: #4ade80;
  --cp-danger: #f87171;
  --cp-warning: #fbbf24;
  --cp-link: #e5e5ea;
  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  --cp-overlay: rgba(22, 22, 24, 0.88);
  --cp-panel: rgba(31, 31, 35, 0.72);
  --cp-panel-strong: rgba(31, 31, 35, 0.96);
  --cp-sheen: rgba(255, 255, 255, 0.04);
  --cp-highlight: rgb(229 229 234 / 0.12);
  --cp-brand: #232326;
  --cp-brand-band: linear-gradient(120deg, #2a2a2e 0%, #1f1f22 55%, #28282c 100%);
  --cp-brand-deep: #0d0d0f;
  --cp-brand-hover: #242428;
  --cp-brand-ink: #f4f4f6;
  --cp-brand-border: rgba(255, 255, 255, 0.08);
  --cp-action: #e5e5ea;
  --cp-action-hover: #ffffff;
  --cp-action-fg: #111113;
  --cp-action-soft: #2c2c30;
  --cp-chrome: linear-gradient(135deg, #ffffff 0%, #c7c7cc 52%, #8e8e93 100%);

  /* Shadows disappear on a dark page, so cards are a lifted surface with a faint light edge. */
  --cp-card: #1f1f23;
  --cp-card-raised: #29292e;
  --cp-segment-on: #3c3c43;
  --cp-fill: #2a2a2f;
  --cp-fill-hover: #333339;
  --cp-separator: #303036;
  --cp-shadow-1: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  --cp-shadow-2: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 32px rgb(0 0 0 / 0.36);
  --cp-shadow-3: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px rgb(0 0 0 / 0.5);
  --cp-glass: rgb(34 34 38 / 0.8);
  --cp-glass-edge: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  --cp-glass-fallback: rgb(34 34 38 / 0.97);
  --cp-backdrop: rgb(0 0 0 / 0.55);
  --cp-toast: rgb(44 44 49 / 0.8);
  --cp-toast-fallback: rgb(44 44 49 / 0.97);
  --cp-sidebar: #0f0f11;
  --cp-dot-online: #34d399;
  --cp-dot-online-ring: rgb(52 211 153 / 0.2);
  --cp-dot-idle: #7c7c80;
  --cp-em-purple: #d1d1d6;
  --cp-em-pink: #f08cc4;
  --cp-em-orange: #ffa66b;
  --cp-em-teal: #4fd1c5;
  --cp-em-green: #5ad69a;
  --cp-em-blue: #8ab4ff;
  --cp-disabled-fill: #2a2a2f;
  --cp-disabled-text: #7c7c80;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cp-bg);
  color: var(--cp-text);
  font-family: "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
  letter-spacing: 0;
}