/* Stil "Modern": Weiß/Grau, Haarlinien statt Outlines, Violett als Akzent, Geist als Schrift.
   Schwarz nur für Zustände (aktiver Tab, Auswahl, Fokus). Aktiv über html.skin-modern. */
html.skin-modern {
  --background: #fafafa; --foreground: #09090b;
  --card: #ffffff; --popover: #ffffff; --card-foreground: #09090b; --popover-foreground: #09090b;
  --secondary: #f1f1f3; --muted: #f1f1f3; --accent: #f1f1f3; --muted-foreground: #71717a;
  --primary: #7c3aed; --primary-foreground: #ffffff; --primary-ink: #6d28d9;
  --border: #e4e4e7; --input: #e4e4e7; --line: #e4e4e7; --ring-strong: #09090b;
  --now-indicator: #7c3aed; --dot-grid: rgba(9,9,11,.045);
  --shadow-card: 0 1px 2px rgba(9,9,11,.05);
  --shadow-popup: 0 1px 2px rgba(9,9,11,.06), 0 12px 32px -8px rgba(9,9,11,.16);
  --shadow-drag-lift: 0 10px 24px -6px rgba(9,9,11,.2);
}
html.skin-modern.dark {
  --background: #09090b; --foreground: #fafafa;
  --card: #141416; --popover: #18181b; --card-foreground: #fafafa; --popover-foreground: #fafafa;
  --secondary: #1f1f23; --muted: #1f1f23; --accent: #1f1f23; --muted-foreground: #a1a1aa;
  --primary: #8b5cf6; --primary-foreground: #ffffff; --primary-ink: #a78bfa;
  --border: #27272a; --input: #27272a; --line: #27272a; --ring-strong: #fafafa;
  --now-indicator: #a78bfa; --dot-grid: rgba(255,255,255,.04);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  --shadow-popup: 0 1px 2px rgba(0,0,0,.5), 0 16px 40px -8px rgba(0,0,0,.7);
}
html.skin-modern body { font-family: Geist, Inter, system-ui, sans-serif; letter-spacing: -.005em; background-size: 22px 22px; }
html.skin-modern .serif, html.skin-modern .upnext-title, html.skin-modern .focus-count,
html.skin-modern .day-total, html.skin-modern .lg-chip i, html.skin-modern .tagline { font-family: Geist, Inter, sans-serif !important; font-style: normal !important; }
html.skin-modern .focus-count, html.skin-modern .dtw-temp, html.skin-modern .dte-num, html.skin-modern .occ-time { font-family: 'Geist Mono', Geist, monospace !important; }
html.skin-modern .focus-count { font-weight: 600; letter-spacing: -.06em; }
html.skin-modern .page-title { font-weight: 700; letter-spacing: -1.2px; }

/* surfaces: white cards with hairline + soft shadow */
html.skin-modern .brand, html.skin-modern .icon-btn.round, html.skin-modern .pill-btn, html.skin-modern .occ-card, html.skin-modern .ins-card,
html.skin-modern .tl-lane-label, html.skin-modern .tl-block, html.skin-modern .dt-pill {
  background-color: var(--card); border: 1px solid var(--border) !important; box-shadow: var(--shadow-card) !important;
}
html.skin-modern .side-panel, html.skin-modern .popover, html.skin-modern .modal, html.skin-modern .dt-card,
html.skin-modern .inbox-panel, html.skin-modern .review-card, html.skin-modern .review-bar {
  border: 1px solid var(--border) !important; box-shadow: var(--shadow-popup) !important;
}
/* controls: filled grey, no outline */
html.skin-modern .btn:not(.primary), html.skin-modern .select, html.skin-modern .input, html.skin-modern .chip,
html.skin-modern .field-card, html.skin-modern .time-pair, html.skin-modern .dur, html.skin-modern .stat, html.skin-modern .lg-chip {
  background: var(--secondary) !important; border: 1px solid transparent !important; box-shadow: none !important;
}
html.skin-modern .side-panel .select, html.skin-modern .side-panel .input { background: var(--secondary) !important; }
html.skin-modern .input:focus, html.skin-modern .select.open { border-color: var(--ring-strong) !important; background: var(--card) !important; }
html.skin-modern .brand, html.skin-modern .icon-btn.round, html.skin-modern .create-btn, html.skin-modern .btn,
html.skin-modern .select, html.skin-modern .input, html.skin-modern .pill-btn, html.skin-modern .chip { border-radius: 10px !important; }
html.skin-modern .occ-card, html.skin-modern .ins-card, html.skin-modern .side-panel { border-radius: 14px !important; }
html.skin-modern .seg-group { border-radius: 12px; background: var(--secondary); padding: 3px; border: 0; }
html.skin-modern .seg-split, html.skin-modern .seg-pill { border-radius: 9px !important; }
/* black only for state */
html.skin-modern .seg-split.active, html.skin-modern .seg-pill.active:not(.main), html.skin-modern .seg-btn.active { background: var(--ring-strong) !important; color: var(--background) !important; box-shadow: none !important; }
html.skin-modern .seg-split.active .seg-pill, html.skin-modern .seg-split.active .seg-caret { color: var(--background) !important; }
html.skin-modern .create-btn, html.skin-modern .btn.primary, html.skin-modern .split-main, html.skin-modern .split-caret { background: var(--primary) !important; color: #fff !important; border: 0 !important; box-shadow: 0 1px 2px rgba(124,58,237,.35) !important; }
html.skin-modern .kbd-chip { background: rgba(255,255,255,.2); color: #fff; }
html.skin-modern .brand-pro { background: var(--primary); color: #fff; }
html.skin-modern .ins-card.act.hl { background: color-mix(in srgb, var(--primary) 7%, var(--card)); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)) !important; }
html.skin-modern .toggle { background: #d4d4d8; }
html.skin-modern .toggle.on { background: var(--primary); }
html.skin-modern .day-head { border-bottom-color: var(--border); }

/* dial: flat and calm, colour carries the meaning */
html.skin-modern .section-shade, html.skin-modern .section-light, html.skin-modern .section-glass,
html.skin-modern .coil-shadow, html.skin-modern .coil-lift, html.skin-modern .coil-seam-rim,
html.skin-modern path[filter="url(#ringRecess)"] { display: none; }
html.skin-modern .section-contact { opacity: .08; }
html.skin-modern .ring-bg { fill: var(--secondary); stroke: var(--border); stroke-width: 1px; }
html.skin-modern .section { stroke-width: 1px; }
html.skin-modern .section.virtual { stroke-dasharray: none; stroke-opacity: .7; }
html.skin-modern .wedge.selected .section { stroke: var(--ring-strong) !important; stroke-width: 2px; filter: none; }
html.skin-modern .hour-tick { stroke: var(--muted-foreground); opacity: .25; }
html.skin-modern .hour-tick.emphasized { opacity: .45; }
html.skin-modern .quarter-tick { stroke: var(--muted-foreground); opacity: .45; }
html.skin-modern .mid-guide { stroke: var(--border); }
html.skin-modern .hour-label { fill: var(--muted-foreground); font-family: 'Geist Mono', monospace; }
html.skin-modern .hour-label:not(.hour-label-minor) { fill: var(--foreground); }
html.skin-modern .hour-label-minor { opacity: .5; }
html.skin-modern .center-day { font-family: Geist, sans-serif !important; font-weight: 700; letter-spacing: -1.5px; font-size: 34px !important; }
html.skin-modern .center-date { font-family: 'Geist Mono', monospace; letter-spacing: 1.2px; }
html.skin-modern .nav-btn circle, html.skin-modern .weather-pill rect, html.skin-modern .center-pill rect { fill: var(--card); stroke: var(--border); stroke-width: 1; }
html.skin-modern .co-title { font-weight: 600; }
html.skin-modern .energy-seg { stroke: var(--foreground) !important; stroke-width: 2px; opacity: .85; }
html.skin-modern .energy-arrow { fill: var(--foreground) !important; opacity: .85; }
html.skin-modern .now-line { stroke: var(--primary); stroke-width: 2.5px; }
html.skin-modern .now-dot { fill: var(--primary); filter: none; }
html.skin-modern .now-fill { fill: color-mix(in srgb, var(--foreground) 4%, transparent); }
html.skin-modern .dte-bar span { background: var(--primary) !important; }

/* style picker (settings) */
.skin-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.skin-opt { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); text-align: left; }
.skin-opt:hover { background: var(--secondary); }
.skin-opt.on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.skin-prev { position: relative; display: block; height: 64px; border-radius: 8px; overflow: hidden; }
.skin-prev i { position: absolute; display: block; }
.skin-opt b { font-size: 14px; }
.skin-opt span.d { font-size: 12px; color: var(--muted-foreground); }

/* energy curve elsewhere (timeline, insights) matches the dial */
html.skin-modern .energy { stroke: var(--foreground); opacity: .85; }
html.skin-modern .energy.sleep { opacity: .35; }
html.skin-modern .energy.inertia { opacity: .55; }
html.skin-modern .e-line, html.skin-modern .e-peak { stroke: var(--foreground); }
html.skin-modern .e-band { fill: color-mix(in srgb, var(--primary) 12%, transparent); }
html.skin-modern .lg-line { background: var(--foreground); }
html.skin-modern .lg-band { background: color-mix(in srgb, var(--primary) 18%, transparent); }