:root {
  --bg: #0c0f12;
  --panel: #11161b;
  --text: #e6edf3;
  --muted: #95a3b3;
  --accent: #66d9ef;
  --accent-2: #a6e3a1;
  --border: #1f2a33;
  --danger: #f08b8b;
  --shadow: rgba(0, 0, 0, 0.45);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --theme-top-color: #1a2330;
  --bg-grad: radial-gradient(1200px 800px at 20% -10%, var(--theme-top-color) 0%, #0c0f12 60%);
  --toggle-on: #2d5a6b;
  --toggle-off: #1c2530;
  --btn-bg: #0c1117;
  --theme-track-grad: linear-gradient(90deg, #ffcc33 0%, #f59e0b 45%, #1f2937 55%, #0f172a 100%);
  --theme-track-border: #3d4b5b;
  --theme-icon-color: rgba(255, 255, 255, 0.9);
  --upload-border: #3b4a57;
  --upload-bg: #0f141a;
  --upload-hover-bg: #101923;
  --floating-control-width: clamp(220px, 30vw, 320px);
  --floating-control-width-mobile: calc(100vw - 28px);
  --floating-control-max-width-mobile: 420px;
}

body.theme-light {
  --panel: #f4f7fb;
  --text: #15202b;
  --muted: #506071;
  --accent: #0ea5e9;
  --accent-2: #16a34a;
  --border: #c9d6e3;
  --danger: #d78686;
  --shadow: rgba(0, 0, 0, 0.15);
  --theme-top-color: #eaf3ff;
  --bg-grad: radial-gradient(1200px 800px at 20% -10%, var(--theme-top-color) 0%, #f6f9fc 60%);
  --toggle-on: #6ba9c2;
  --toggle-off: #dbe6f1;
  --btn-bg: #ffffff;
  --theme-track-grad: linear-gradient(90deg, #ffe28a 0%, #fbbf24 45%, #9ec5f8 55%, #c7dbf7 100%);
  --theme-track-border: #9ab4d2;
  --theme-icon-color: #324a63;
  --upload-border: #9cb3ca;
  --upload-bg: #ffffff;
  --upload-hover-bg: #edf4fb;
}