:root {
  color-scheme: light dark;
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface2: #f9f9fb;
  --border: rgba(60,60,67,.15);
  --hairline: rgba(199,199,204,.5);
  --accent: #007aff;
  --accent-press: #0062d0;
  --accent2: #ff9500;
  --success: #30d158;
  --success2: #34c759;
  --warn: #ff9f0a;
  --danger: #ff3b30;
  --purple: #5e5ce6;
  --indigo: #5856d6;
  --text: #1c1c1e;
  --text-2: #3c3c43;
  --text-dim: #8e8e93;
  --text-4: #aeaeb2;
  --text-faint: #c7c7cc;
  --nav-bg: rgba(248,248,250,.92);
  --toast-bg: rgba(28,28,30,.88);
  --mono: 'Space Mono', monospace;
  --sans: 'Noto Sans TC', sans-serif;
  --nav-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --card-shadow: 0 2px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  /* 月曆勤務分類底色與文字色 */
  --duty-short-bg: rgba(48,209,88,.10);
  --duty-short-text: #1a8c3a;
  --duty-overnight-bg: rgba(0,122,255,.12);
  --duty-overnight-text: #0058c7;
  --duty-long-bg: rgba(255,159,10,.16);
  --duty-long-text: #b55a00;
  --duty-sep-bg: rgba(255,196,0,.18);
  --duty-sep-text: #9a6800;
  --duty-scs-bg: rgba(94,92,230,.12);
  --duty-scs-text: #5e5ce6;
  --duty-ground-bg: rgba(120,120,128,.16);
  --duty-ground-text: #6c6c70;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface2: #2c2c2e;
    --border: rgba(84,84,88,.6);
    --hairline: rgba(84,84,88,.5);
    --accent: #0a84ff;
    --accent-press: #409cff;
    --accent2: #ff9f0a;
    --success: #30d158;
    --success2: #30d158;
    --warn: #ff9f0a;
    --danger: #ff453a;
    --purple: #7d7aff;
    --indigo: #7d7aff;
    --text: #ffffff;
    --text-2: rgba(235,235,245,.8);
    --text-dim: rgba(235,235,245,.6);
    --text-4: rgba(235,235,245,.4);
    --text-faint: rgba(235,235,245,.3);
    --nav-bg: rgba(22,22,24,.85);
    --toast-bg: rgba(58,58,60,.95);
    --card-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
    --duty-short-bg: rgba(48,209,88,.18);
    --duty-short-text: #30d158;
    --duty-overnight-bg: rgba(10,132,255,.20);
    --duty-overnight-text: #64a8ff;
    --duty-long-bg: rgba(255,159,10,.18);
    --duty-long-text: #ffb340;
    --duty-sep-bg: rgba(255,214,10,.16);
    --duty-sep-text: #ffd60a;
    --duty-scs-bg: rgba(125,122,255,.20);
    --duty-scs-text: #9d9aff;
    --duty-ground-bg: rgba(142,142,147,.24);
    --duty-ground-text: #aeaeb2;
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface2: #2c2c2e;
  --border: rgba(84,84,88,.6);
  --hairline: rgba(84,84,88,.5);
  --accent: #0a84ff;
  --accent-press: #409cff;
  --accent2: #ff9f0a;
  --success: #30d158;
  --success2: #30d158;
  --warn: #ff9f0a;
  --danger: #ff453a;
  --purple: #7d7aff;
  --indigo: #7d7aff;
  --text: #ffffff;
  --text-2: rgba(235,235,245,.8);
  --text-dim: rgba(235,235,245,.6);
  --text-4: rgba(235,235,245,.4);
  --text-faint: rgba(235,235,245,.3);
  --nav-bg: rgba(22,22,24,.85);
  --toast-bg: rgba(58,58,60,.95);
  --card-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
  --duty-short-bg: rgba(48,209,88,.18);
  --duty-short-text: #30d158;
  --duty-overnight-bg: rgba(10,132,255,.20);
  --duty-overnight-text: #64a8ff;
  --duty-long-bg: rgba(255,159,10,.18);
  --duty-long-text: #ffb340;
  --duty-sep-bg: rgba(255,214,10,.16);
  --duty-sep-text: #ffd60a;
  --duty-scs-bg: rgba(125,122,255,.20);
  --duty-scs-text: #9d9aff;
  --duty-ground-bg: rgba(142,142,147,.24);
  --duty-ground-text: #aeaeb2;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; height: 100vh; height: 100dvh; }

@keyframes blink   { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }