:root {
  color-scheme: light;
  --ink: #18212f;
  --muted: #667085;
  --paper: #e7edf2;
  --surface: #ffffff;
  --surface-2: #eef2f6;
  --border: #d7dde7;
  --green: #2f8062;
  --green-dark: #21654d;
  --green-soft: #e4f3ed;
  --coral: #d9573d;
  --coral-soft: #fae8e4;
  --blue: #3566d6;
  --blue-soft: #e7ecfb;
  --gold: #a97814;
  --current-week: #60798a;
  --current-week-deep: #304b5c;
  --current-week-soft: #eef4f6;
  --current-week-accent: #7a9b91;
  --input-surface: #ffffff;
  --danger-ink: #a52c17;
  --message-ink: #244a9f;
  --control-surface: #eef2f6;
  --control-surface-hover: #ffffff;
  --control-border: rgba(203, 212, 225, 0.9);
  --control-shadow: 0 1px 5px rgba(24, 33, 47, 0.08);
  --dialog-head-surface:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 253, 0.94)),
    var(--surface);
  --settings-panel-surface: #fbfcfe;
  --settings-card-surface:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 253, 0.9)),
    var(--surface);
  --settings-accent-card-surface:
    linear-gradient(135deg, rgba(47, 133, 102, 0.075), rgba(53, 102, 214, 0.045)),
    rgba(255, 255, 255, 0.8);
  --settings-row-surface: rgba(255, 255, 255, 0.82);
  --settings-row-muted-surface: rgba(244, 247, 250, 0.74);
  --settings-chip-surface: rgba(255, 255, 255, 0.76);
  --settings-invalid-surface: rgba(255, 251, 250, 0.96);
  --settings-invalid-border: rgba(217, 87, 61, 0.44);
  --success-surface: rgba(228, 243, 237, 0.82);
  --success-surface-hover: rgba(214, 239, 228, 0.95);
  --success-border: rgba(47, 133, 102, 0.28);
  --success-ink: #21654d;
  --success-muted-ink: #3d6c5a;
  --shadow: 0 14px 36px rgba(24, 33, 47, 0.12);
  --shadow-raised: 0 28px 70px rgba(16, 24, 40, 0.22);
  --focus-ring: 0 0 0 3px rgba(53, 102, 214, 0.16);
  --metrics-footer-scrim: linear-gradient(180deg, rgba(229, 235, 240, 0), rgba(229, 235, 240, 0.66) 48%, rgba(224, 231, 236, 0.88));
  --metrics-footer-surface:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(188, 199, 209, 0.3)),
    rgba(83, 97, 112, 0.14);
  --metrics-footer-border: rgba(255, 255, 255, 0.66);
  --metrics-footer-shadow:
    0 24px 58px rgba(24, 33, 47, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(107, 121, 136, 0.22);
  --metrics-footer-mobile-shadow:
    0 -12px 22px rgba(24, 33, 47, 0.3),
    0 2px 5px rgba(24, 33, 47, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(107, 121, 136, 0.2);
  --metrics-card-surface: rgba(255, 255, 255, 0.48);
  --metrics-card-border: rgba(255, 255, 255, 0.58);
  --metrics-card-shadow:
    0 14px 28px rgba(24, 33, 47, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --metrics-carousel-edge-start: rgba(228, 235, 240, 0.82);
  --metrics-carousel-edge-end: rgba(228, 235, 240, 0);
  --metrics-footer-bottom-extension: 0px;
  --z-metrics-footer: 300;
  --z-projection-popover: 290;
  --z-floating-popover: 700;
  --z-mobile-command: 900;
  --z-dialog: 1200;
  --z-dialog-raised: 1220;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  background:
    linear-gradient(180deg, rgba(145, 181, 255, 0.07), rgba(145, 181, 255, 0) 300px),
    linear-gradient(135deg, rgba(99, 212, 157, 0.035) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #080c11 0%, #0b1118 48%, #0a0e13 100%);
  background-color: var(--paper);
  --ink: #f4f7fb;
  --muted: #b2bdc9;
  --paper: #080c11;
  --surface: #141a23;
  --surface-2: #1b232e;
  --border: #35404d;
  --green: #63d49d;
  --green-dark: #95e8be;
  --green-soft: #102c22;
  --coral: #ff9a84;
  --coral-soft: #3b211f;
  --blue: #91b5ff;
  --blue-soft: #172543;
  --gold: #e8bd63;
  --current-week: #8aa4b8;
  --current-week-deep: #203244;
  --current-week-soft: #182737;
  --current-week-accent: #63d49d;
  --input-surface: #0f141c;
  --danger-ink: #ffc0b4;
  --message-ink: #d1ddff;
  --control-surface: rgba(18, 24, 33, 0.94);
  --control-surface-hover: rgba(27, 35, 46, 0.98);
  --control-border: rgba(99, 112, 132, 0.74);
  --control-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
  --dialog-head-surface:
    linear-gradient(180deg, rgba(27, 35, 46, 0.96), rgba(20, 26, 35, 0.94)),
    var(--surface);
  --settings-panel-surface: rgba(18, 24, 33, 0.94);
  --settings-card-surface:
    linear-gradient(180deg, rgba(20, 26, 35, 0.98), rgba(15, 20, 28, 0.94)),
    var(--surface);
  --settings-accent-card-surface:
    linear-gradient(135deg, rgba(99, 212, 157, 0.105), rgba(145, 181, 255, 0.055)),
    rgba(18, 24, 33, 0.9);
  --settings-row-surface: rgba(18, 24, 33, 0.9);
  --settings-row-muted-surface: rgba(18, 24, 33, 0.66);
  --settings-chip-surface: rgba(20, 26, 35, 0.9);
  --settings-invalid-surface: rgba(59, 33, 31, 0.72);
  --settings-invalid-border: rgba(255, 134, 111, 0.42);
  --success-surface: rgba(18, 67, 49, 0.86);
  --success-surface-hover: rgba(24, 83, 61, 0.94);
  --success-border: rgba(99, 212, 157, 0.42);
  --success-ink: #b9f4d3;
  --success-muted-ink: #8edeb6;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  --shadow-raised: 0 30px 80px rgba(0, 0, 0, 0.62);
  --focus-ring: 0 0 0 3px rgba(145, 181, 255, 0.28);
  --metrics-footer-scrim: linear-gradient(180deg, rgba(10, 14, 19, 0.14), rgba(10, 14, 19, 0.78) 58%, rgba(10, 14, 19, 0));
  --metrics-footer-surface:
    linear-gradient(135deg, rgba(23, 30, 39, 0.9), rgba(13, 23, 31, 0.84)),
    rgba(10, 14, 20, 0.82);
  --metrics-footer-border: rgba(107, 124, 145, 0.66);
  --metrics-footer-shadow:
    0 24px 58px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(86, 113, 132, 0.34);
  --metrics-footer-mobile-shadow:
    0 -14px 26px rgba(0, 0, 0, 0.52),
    0 2px 6px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(86, 113, 132, 0.34);
  --metrics-card-surface: rgba(13, 18, 25, 0.82);
  --metrics-card-border: rgba(91, 107, 126, 0.58);
  --metrics-card-shadow:
    0 14px 30px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --metrics-carousel-edge-start: rgba(13, 18, 25, 0.96);
  --metrics-carousel-edge-end: rgba(13, 18, 25, 0);
}

:root[data-color-theme="iphone"][data-theme="light"] {
  color-scheme: light;
  background:
    linear-gradient(180deg, rgba(245, 247, 232, 0.64), rgba(245, 247, 232, 0) 300px),
    linear-gradient(135deg, rgba(56, 158, 107, 0.065) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #f0e8d1 0%, #f8f5e5 48%, #e9dec3 100%);
  background-color: var(--paper);
  --ink: #142621;
  --muted: #66705e;
  --paper: #f0e8d1;
  --surface: #f8f7ed;
  --surface-2: #ebe4ce;
  --border: #d3c8ab;
  --green: #389e6b;
  --green-dark: #21654d;
  --green-soft: #e4efd9;
  --coral: #cc5445;
  --coral-soft: #f5dfd7;
  --blue: #2b78c7;
  --blue-soft: #deedf1;
  --gold: #dba84d;
  --iphone-khaki: #bdb08c;
  --iphone-trail: #242624;
  --iphone-mist: #f5f7e8;
  --iphone-sage: #9fb294;
  --iphone-sage-deep: #647a65;
  --iphone-deep-run-blue: #0f3373;
  --current-week: #647a65;
  --current-week-deep: #142621;
  --current-week-soft: #e5ead7;
  --current-week-accent: #389e6b;
  --input-surface: #fffdf4;
  --danger-ink: #963326;
  --message-ink: #1e5f9d;
  --control-surface: rgba(245, 247, 232, 0.9);
  --control-surface-hover: #fffdf4;
  --control-border: rgba(177, 164, 129, 0.72);
  --control-shadow: 0 1px 5px rgba(20, 38, 33, 0.08);
  --dialog-head-surface:
    linear-gradient(180deg, rgba(255, 253, 244, 0.98), rgba(245, 247, 232, 0.94)),
    var(--surface);
  --settings-panel-surface: rgba(248, 247, 237, 0.95);
  --settings-card-surface:
    linear-gradient(180deg, rgba(255, 253, 244, 0.96), rgba(245, 247, 232, 0.88)),
    var(--surface);
  --settings-accent-card-surface:
    linear-gradient(135deg, rgba(56, 158, 107, 0.12), rgba(43, 120, 199, 0.06)),
    rgba(255, 253, 244, 0.76);
  --settings-row-surface: rgba(255, 253, 244, 0.82);
  --settings-row-muted-surface: rgba(239, 235, 216, 0.72);
  --settings-chip-surface: rgba(255, 253, 244, 0.76);
  --settings-invalid-surface: rgba(255, 245, 241, 0.96);
  --settings-invalid-border: rgba(204, 84, 69, 0.42);
  --success-surface: rgba(228, 239, 217, 0.88);
  --success-surface-hover: rgba(215, 232, 199, 0.95);
  --success-border: rgba(56, 158, 107, 0.28);
  --success-ink: #21654d;
  --success-muted-ink: #526c43;
  --shadow: 0 14px 36px rgba(20, 38, 33, 0.13);
  --shadow-raised: 0 28px 70px rgba(20, 38, 33, 0.23);
  --focus-ring: 0 0 0 3px rgba(43, 120, 199, 0.18);
  --metrics-footer-scrim: linear-gradient(180deg, rgba(240, 232, 209, 0), rgba(240, 232, 209, 0.7) 48%, rgba(229, 218, 190, 0.9));
  --metrics-footer-surface:
    linear-gradient(135deg, rgba(255, 253, 244, 0.56), rgba(157, 178, 148, 0.28)),
    rgba(126, 117, 91, 0.12);
  --metrics-footer-border: rgba(255, 253, 244, 0.72);
  --metrics-footer-shadow:
    0 24px 58px rgba(20, 38, 33, 0.22),
    inset 0 1px 0 rgba(255, 253, 244, 0.8),
    inset 0 -1px 0 rgba(125, 107, 71, 0.22);
  --metrics-footer-mobile-shadow:
    0 -12px 22px rgba(20, 38, 33, 0.28),
    0 2px 5px rgba(20, 38, 33, 0.1),
    inset 0 1px 0 rgba(255, 253, 244, 0.78),
    inset 0 -1px 0 rgba(125, 107, 71, 0.2);
  --metrics-card-surface: rgba(255, 253, 244, 0.5);
  --metrics-card-border: rgba(255, 253, 244, 0.62);
  --metrics-card-shadow:
    0 14px 28px rgba(20, 38, 33, 0.1),
    inset 0 1px 0 rgba(255, 253, 244, 0.82);
  --metrics-carousel-edge-start: rgba(240, 232, 209, 0.86);
  --metrics-carousel-edge-end: rgba(240, 232, 209, 0);
}

:root[data-color-theme="iphone"][data-theme="dark"] {
  color-scheme: dark;
  background:
    linear-gradient(180deg, rgba(56, 158, 107, 0.09), rgba(56, 158, 107, 0) 300px),
    linear-gradient(135deg, rgba(240, 232, 209, 0.035) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #0d1c1f 0%, #0b1718 48%, #091212 100%);
  background-color: var(--paper);
  --ink: #f5f7e8;
  --muted: #b8c4ac;
  --paper: #0d1c1f;
  --surface: #142621;
  --surface-2: #1b332c;
  --border: #39564d;
  --green: #63d49d;
  --green-dark: #a8edc5;
  --green-soft: #163b2d;
  --coral: #f08b7a;
  --coral-soft: #432622;
  --blue: #7ac9e3;
  --blue-soft: #143747;
  --gold: #edbd61;
  --iphone-khaki: #756d55;
  --iphone-trail: #e8eddc;
  --iphone-mist: #233d34;
  --iphone-sage: #8fa985;
  --iphone-sage-deep: #9db294;
  --iphone-deep-run-blue: #102f5d;
  --current-week: #9db294;
  --current-week-deep: #233d34;
  --current-week-soft: #172e2b;
  --current-week-accent: #63d49d;
  --input-surface: #0e1a1c;
  --danger-ink: #ffc3b8;
  --message-ink: #d6f4ff;
  --control-surface: rgba(16, 31, 32, 0.94);
  --control-surface-hover: rgba(24, 44, 39, 0.98);
  --control-border: rgba(96, 125, 112, 0.72);
  --control-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
  --dialog-head-surface:
    linear-gradient(180deg, rgba(27, 51, 44, 0.96), rgba(20, 38, 33, 0.94)),
    var(--surface);
  --settings-panel-surface: rgba(16, 31, 32, 0.94);
  --settings-card-surface:
    linear-gradient(180deg, rgba(20, 38, 33, 0.98), rgba(14, 26, 28, 0.94)),
    var(--surface);
  --settings-accent-card-surface:
    linear-gradient(135deg, rgba(99, 212, 157, 0.13), rgba(122, 201, 227, 0.06)),
    rgba(16, 31, 32, 0.9);
  --settings-row-surface: rgba(16, 31, 32, 0.9);
  --settings-row-muted-surface: rgba(16, 31, 32, 0.66);
  --settings-chip-surface: rgba(20, 38, 33, 0.9);
  --settings-invalid-surface: rgba(67, 38, 34, 0.72);
  --settings-invalid-border: rgba(240, 139, 122, 0.42);
  --success-surface: rgba(22, 72, 53, 0.86);
  --success-surface-hover: rgba(29, 90, 66, 0.94);
  --success-border: rgba(99, 212, 157, 0.42);
  --success-ink: #c8f4d5;
  --success-muted-ink: #a6e7bc;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  --shadow-raised: 0 30px 80px rgba(0, 0, 0, 0.62);
  --focus-ring: 0 0 0 3px rgba(122, 201, 227, 0.28);
  --metrics-footer-scrim: linear-gradient(180deg, rgba(9, 18, 18, 0.14), rgba(9, 18, 18, 0.78) 58%, rgba(9, 18, 18, 0));
  --metrics-footer-surface:
    linear-gradient(135deg, rgba(24, 44, 39, 0.9), rgba(12, 28, 29, 0.84)),
    rgba(9, 18, 18, 0.82);
  --metrics-footer-border: rgba(107, 145, 126, 0.66);
  --metrics-footer-shadow:
    0 24px 58px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(86, 132, 109, 0.34);
  --metrics-footer-mobile-shadow:
    0 -14px 26px rgba(0, 0, 0, 0.52),
    0 2px 6px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(86, 132, 109, 0.34);
  --metrics-card-surface: rgba(9, 18, 18, 0.82);
  --metrics-card-border: rgba(90, 124, 108, 0.58);
  --metrics-card-shadow:
    0 14px 30px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --metrics-carousel-edge-start: rgba(9, 18, 18, 0.96);
  --metrics-carousel-edge-end: rgba(9, 18, 18, 0);
}

:root[data-color-theme="nord"][data-theme="light"] {
  --palette-paper: #e5e9f0;
  --palette-surface: #eceff4;
  --palette-surface-2: #d8dee9;
  --palette-ink: #2e3440;
  --palette-muted: #4c566a;
  --palette-border: #c5cfdd;
  --palette-green: #5f8f61;
  --palette-blue: #5e81ac;
  --palette-coral: #bf616a;
  --palette-gold: #d08770;
  --palette-current: #81a1c1;
  --palette-current-deep: #3b4252;
  --palette-hero-shade: #2e3440;
}

:root[data-color-theme="nord"][data-theme="dark"] {
  --palette-paper: #2e3440;
  --palette-surface: #3b4252;
  --palette-surface-2: #434c5e;
  --palette-ink: #eceff4;
  --palette-muted: #d8dee9;
  --palette-border: #4c566a;
  --palette-green: #a3be8c;
  --palette-blue: #88c0d0;
  --palette-coral: #bf616a;
  --palette-gold: #ebcb8b;
  --palette-current: #81a1c1;
  --palette-current-deep: #263140;
  --palette-hero-shade: #1f2530;
}

:root[data-color-theme="solarized"][data-theme="light"] {
  --palette-paper: #fdf6e3;
  --palette-surface: #eee8d5;
  --palette-surface-2: #e6dfc9;
  --palette-ink: #586e75;
  --palette-muted: #657b83;
  --palette-border: #d7ceb2;
  --palette-green: #859900;
  --palette-blue: #268bd2;
  --palette-coral: #dc322f;
  --palette-gold: #b58900;
  --palette-current: #2aa198;
  --palette-current-deep: #073642;
  --palette-hero-shade: #073642;
}

:root[data-color-theme="solarized"][data-theme="dark"] {
  --palette-paper: #002b36;
  --palette-surface: #073642;
  --palette-surface-2: #0d4653;
  --palette-ink: #eee8d5;
  --palette-muted: #93a1a1;
  --palette-border: #0f5664;
  --palette-green: #859900;
  --palette-blue: #268bd2;
  --palette-coral: #dc322f;
  --palette-gold: #b58900;
  --palette-current: #2aa198;
  --palette-current-deep: #001e27;
  --palette-hero-shade: #001e27;
}

:root[data-color-theme="gruvbox"][data-theme="light"] {
  --palette-paper: #fbf1c7;
  --palette-surface: #f2e5bc;
  --palette-surface-2: #ebdbb2;
  --palette-ink: #3c3836;
  --palette-muted: #7c6f64;
  --palette-border: #d5c4a1;
  --palette-green: #79740e;
  --palette-blue: #076678;
  --palette-coral: #cc241d;
  --palette-gold: #b57614;
  --palette-current: #458588;
  --palette-current-deep: #504945;
  --palette-hero-shade: #3c3836;
}

:root[data-color-theme="gruvbox"][data-theme="dark"] {
  --palette-paper: #282828;
  --palette-surface: #3c3836;
  --palette-surface-2: #504945;
  --palette-ink: #fbf1c7;
  --palette-muted: #d5c4a1;
  --palette-border: #665c54;
  --palette-green: #b8bb26;
  --palette-blue: #83a598;
  --palette-coral: #fb4934;
  --palette-gold: #fabd2f;
  --palette-current: #8ec07c;
  --palette-current-deep: #1d2021;
  --palette-hero-shade: #1d2021;
}

:root[data-color-theme="catppuccin"][data-theme="light"] {
  --palette-paper: #eff1f5;
  --palette-surface: #e6e9ef;
  --palette-surface-2: #dce0e8;
  --palette-ink: #4c4f69;
  --palette-muted: #6c6f85;
  --palette-border: #ccd0da;
  --palette-green: #40a02b;
  --palette-blue: #1e66f5;
  --palette-coral: #d20f39;
  --palette-gold: #df8e1d;
  --palette-current: #179299;
  --palette-current-deep: #5c5f77;
  --palette-hero-shade: #4c4f69;
}

:root[data-color-theme="catppuccin"][data-theme="dark"] {
  --palette-paper: #1e1e2e;
  --palette-surface: #313244;
  --palette-surface-2: #45475a;
  --palette-ink: #cdd6f4;
  --palette-muted: #a6adc8;
  --palette-border: #585b70;
  --palette-green: #a6e3a1;
  --palette-blue: #89b4fa;
  --palette-coral: #f38ba8;
  --palette-gold: #f9e2af;
  --palette-current: #94e2d5;
  --palette-current-deep: #181825;
  --palette-hero-shade: #11111b;
}

:root[data-color-theme="dracula"][data-theme="light"] {
  --palette-paper: #fffbeb;
  --palette-surface: #fffdf4;
  --palette-surface-2: #f2ecd1;
  --palette-ink: #1f1f1f;
  --palette-muted: #6c664b;
  --palette-border: #d9d1b2;
  --palette-green: #14710a;
  --palette-blue: #036a96;
  --palette-coral: #cb3a2a;
  --palette-gold: #846e15;
  --palette-current: #644ac9;
  --palette-current-deep: #34313b;
  --palette-hero-shade: #1f1f1f;
}

:root[data-color-theme="dracula"][data-theme="dark"] {
  --palette-paper: #282a36;
  --palette-surface: #343746;
  --palette-surface-2: #44475a;
  --palette-ink: #f8f8f2;
  --palette-muted: #bdc3d9;
  --palette-border: #55586d;
  --palette-green: #50fa7b;
  --palette-blue: #8be9fd;
  --palette-coral: #ff5555;
  --palette-gold: #f1fa8c;
  --palette-current: #bd93f9;
  --palette-current-deep: #20222c;
  --palette-hero-shade: #1e2029;
}

:root[data-color-theme="tokyo"][data-theme="light"] {
  --palette-paper: #e1e2e7;
  --palette-surface: #f2f3f7;
  --palette-surface-2: #d5d6db;
  --palette-ink: #343b58;
  --palette-muted: #6172b0;
  --palette-border: #c4c8da;
  --palette-green: #587539;
  --palette-blue: #3760bf;
  --palette-coral: #c64343;
  --palette-gold: #8c6c3e;
  --palette-current: #007197;
  --palette-current-deep: #2e3c64;
  --palette-hero-shade: #1f2335;
}

:root[data-color-theme="tokyo"][data-theme="dark"] {
  --palette-paper: #1a1b26;
  --palette-surface: #24283b;
  --palette-surface-2: #2f3549;
  --palette-ink: #c0caf5;
  --palette-muted: #a9b1d6;
  --palette-border: #414868;
  --palette-green: #9ece6a;
  --palette-blue: #7aa2f7;
  --palette-coral: #f7768e;
  --palette-gold: #e0af68;
  --palette-current: #7dcfff;
  --palette-current-deep: #16161e;
  --palette-hero-shade: #11111a;
}

:root[data-color-theme="rosepine"][data-theme="light"] {
  --palette-paper: #faf4ed;
  --palette-surface: #fffaf3;
  --palette-surface-2: #f2e9e1;
  --palette-ink: #575279;
  --palette-muted: #797593;
  --palette-border: #dfdad9;
  --palette-green: #286983;
  --palette-blue: #56949f;
  --palette-coral: #b4637a;
  --palette-gold: #ea9d34;
  --palette-current: #907aa9;
  --palette-current-deep: #575279;
  --palette-hero-shade: #393552;
}

:root[data-color-theme="rosepine"][data-theme="dark"] {
  --palette-paper: #191724;
  --palette-surface: #1f1d2e;
  --palette-surface-2: #26233a;
  --palette-ink: #e0def4;
  --palette-muted: #908caa;
  --palette-border: #403d52;
  --palette-green: #31748f;
  --palette-blue: #9ccfd8;
  --palette-coral: #eb6f92;
  --palette-gold: #f6c177;
  --palette-current: #c4a7e7;
  --palette-current-deep: #12101a;
  --palette-hero-shade: #12101a;
}

:root[data-color-theme="everforest"][data-theme="light"] {
  --palette-paper: #fdf6e3;
  --palette-surface: #f4f0d9;
  --palette-surface-2: #e6e2cc;
  --palette-ink: #5c6a72;
  --palette-muted: #829181;
  --palette-border: #d8cfaa;
  --palette-green: #8da101;
  --palette-blue: #3a94c5;
  --palette-coral: #f85552;
  --palette-gold: #dfa000;
  --palette-current: #35a77c;
  --palette-current-deep: #475258;
  --palette-hero-shade: #3a464c;
}

:root[data-color-theme="everforest"][data-theme="dark"] {
  --palette-paper: #2d353b;
  --palette-surface: #343f44;
  --palette-surface-2: #3d484d;
  --palette-ink: #d3c6aa;
  --palette-muted: #9da9a0;
  --palette-border: #56635f;
  --palette-green: #a7c080;
  --palette-blue: #7fbbb3;
  --palette-coral: #e67e80;
  --palette-gold: #dbbc7f;
  --palette-current: #83c092;
  --palette-current-deep: #232a2e;
  --palette-hero-shade: #1e2326;
}

:root[data-color-theme="onedark"][data-theme="light"] {
  --palette-paper: #fafafa;
  --palette-surface: #ffffff;
  --palette-surface-2: #f0f0f0;
  --palette-ink: #383a42;
  --palette-muted: #696c77;
  --palette-border: #d4d4d4;
  --palette-green: #50a14f;
  --palette-blue: #4078f2;
  --palette-coral: #e45649;
  --palette-gold: #c18401;
  --palette-current: #0184bc;
  --palette-current-deep: #282c34;
  --palette-hero-shade: #282c34;
}

:root[data-color-theme="onedark"][data-theme="dark"] {
  --palette-paper: #282c34;
  --palette-surface: #30343d;
  --palette-surface-2: #3e4451;
  --palette-ink: #abb2bf;
  --palette-muted: #9da5b4;
  --palette-border: #4b5363;
  --palette-green: #98c379;
  --palette-blue: #61afef;
  --palette-coral: #e06c75;
  --palette-gold: #e5c07b;
  --palette-current: #56b6c2;
  --palette-current-deep: #21252b;
  --palette-hero-shade: #1d2026;
}

:root[data-color-theme="monokai"][data-theme="light"] {
  --palette-paper: #fbf7ef;
  --palette-surface: #fffdf7;
  --palette-surface-2: #ede5d4;
  --palette-ink: #3a3328;
  --palette-muted: #776e5e;
  --palette-border: #d9cfba;
  --palette-green: #5a7d12;
  --palette-blue: #00748f;
  --palette-coral: #c73764;
  --palette-gold: #9c7800;
  --palette-current: #8a6fb0;
  --palette-current-deep: #272822;
  --palette-hero-shade: #272822;
}

:root[data-color-theme="monokai"][data-theme="dark"] {
  --palette-paper: #272822;
  --palette-surface: #34352f;
  --palette-surface-2: #3e3d32;
  --palette-ink: #f8f8f2;
  --palette-muted: #cfcfc2;
  --palette-border: #57584d;
  --palette-green: #a6e22e;
  --palette-blue: #66d9ef;
  --palette-coral: #f92672;
  --palette-gold: #e6db74;
  --palette-current: #ae81ff;
  --palette-current-deep: #1f201c;
  --palette-hero-shade: #1b1c18;
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) {
  --ink: var(--palette-ink);
  --muted: var(--palette-muted);
  --paper: var(--palette-paper);
  --surface: var(--palette-surface);
  --surface-2: var(--palette-surface-2);
  --border: var(--palette-border);
  --green: var(--palette-green);
  --green-dark: color-mix(in srgb, var(--palette-green) 76%, var(--palette-ink));
  --green-soft: color-mix(in srgb, var(--palette-green) 16%, var(--palette-surface));
  --coral: var(--palette-coral);
  --coral-soft: color-mix(in srgb, var(--palette-coral) 14%, var(--palette-surface));
  --blue: var(--palette-blue);
  --blue-soft: color-mix(in srgb, var(--palette-blue) 15%, var(--palette-surface));
  --gold: var(--palette-gold);
  --current-week: var(--palette-current);
  --current-week-deep: var(--palette-current-deep);
  --current-week-soft: color-mix(in srgb, var(--palette-current) 15%, var(--palette-surface));
  --current-week-accent: var(--palette-green);
  --input-surface: color-mix(in srgb, var(--palette-surface) 88%, var(--palette-paper));
  --danger-ink: var(--palette-coral);
  --message-ink: var(--palette-blue);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--palette-blue) 24%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"])[data-theme="light"] {
  color-scheme: light;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--palette-blue) 10%, transparent), transparent 300px),
    linear-gradient(135deg, color-mix(in srgb, var(--palette-green) 7%, transparent) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, var(--palette-paper) 0%, color-mix(in srgb, var(--palette-surface) 54%, var(--palette-paper)) 50%, color-mix(in srgb, var(--palette-green) 8%, var(--palette-paper)) 100%);
  background-color: var(--palette-paper);
  --control-surface: color-mix(in srgb, var(--palette-surface-2) 68%, var(--palette-surface));
  --control-surface-hover: color-mix(in srgb, var(--palette-surface) 92%, white);
  --control-border: color-mix(in srgb, var(--palette-border) 82%, transparent);
  --control-shadow: 0 1px 5px color-mix(in srgb, var(--palette-ink) 8%, transparent);
  --dialog-head-surface:
    linear-gradient(180deg, color-mix(in srgb, var(--palette-surface) 96%, white), color-mix(in srgb, var(--palette-surface-2) 62%, var(--palette-surface))),
    var(--palette-surface);
  --settings-panel-surface: color-mix(in srgb, var(--palette-surface) 94%, transparent);
  --settings-card-surface:
    linear-gradient(180deg, color-mix(in srgb, var(--palette-surface) 96%, white), color-mix(in srgb, var(--palette-surface-2) 58%, var(--palette-surface))),
    var(--palette-surface);
  --settings-accent-card-surface:
    linear-gradient(135deg, color-mix(in srgb, var(--palette-green) 12%, transparent), color-mix(in srgb, var(--palette-blue) 8%, transparent)),
    color-mix(in srgb, var(--palette-surface) 82%, transparent);
  --settings-row-surface: color-mix(in srgb, var(--palette-surface) 82%, transparent);
  --settings-row-muted-surface: color-mix(in srgb, var(--palette-surface-2) 70%, transparent);
  --settings-chip-surface: color-mix(in srgb, var(--palette-surface) 76%, transparent);
  --settings-invalid-surface: color-mix(in srgb, var(--palette-coral) 8%, var(--palette-surface));
  --settings-invalid-border: color-mix(in srgb, var(--palette-coral) 42%, transparent);
  --success-surface: color-mix(in srgb, var(--palette-green) 13%, var(--palette-surface));
  --success-surface-hover: color-mix(in srgb, var(--palette-green) 19%, var(--palette-surface));
  --success-border: color-mix(in srgb, var(--palette-green) 28%, transparent);
  --success-ink: color-mix(in srgb, var(--palette-green) 68%, var(--palette-ink));
  --success-muted-ink: color-mix(in srgb, var(--palette-green) 48%, var(--palette-muted));
  --shadow: 0 14px 36px color-mix(in srgb, var(--palette-ink) 12%, transparent);
  --shadow-raised: 0 28px 70px color-mix(in srgb, var(--palette-ink) 22%, transparent);
  --metrics-footer-scrim: linear-gradient(180deg, transparent, color-mix(in srgb, var(--palette-paper) 72%, transparent) 48%, color-mix(in srgb, var(--palette-paper) 90%, transparent));
  --metrics-footer-surface:
    linear-gradient(135deg, color-mix(in srgb, var(--palette-surface) 58%, transparent), color-mix(in srgb, var(--palette-current) 24%, transparent)),
    color-mix(in srgb, var(--palette-current-deep) 12%, transparent);
  --metrics-footer-border: color-mix(in srgb, var(--palette-surface) 70%, transparent);
  --metrics-footer-shadow:
    0 24px 58px color-mix(in srgb, var(--palette-ink) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 78%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--palette-current-deep) 20%, transparent);
  --metrics-footer-mobile-shadow:
    0 -12px 22px color-mix(in srgb, var(--palette-ink) 27%, transparent),
    0 2px 5px color-mix(in srgb, var(--palette-ink) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 76%, transparent);
  --metrics-card-surface: color-mix(in srgb, var(--palette-surface) 50%, transparent);
  --metrics-card-border: color-mix(in srgb, var(--palette-surface) 62%, transparent);
  --metrics-card-shadow:
    0 14px 28px color-mix(in srgb, var(--palette-ink) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 82%, transparent);
  --metrics-carousel-edge-start: color-mix(in srgb, var(--palette-paper) 86%, transparent);
  --metrics-carousel-edge-end: transparent;
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"])[data-theme="dark"] {
  color-scheme: dark;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--palette-blue) 9%, transparent), transparent 300px),
    linear-gradient(135deg, color-mix(in srgb, var(--palette-green) 4%, transparent) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, var(--palette-paper) 0%, color-mix(in srgb, var(--palette-surface) 46%, var(--palette-paper)) 50%, color-mix(in srgb, black 14%, var(--palette-paper)) 100%);
  background-color: var(--palette-paper);
  --control-surface: color-mix(in srgb, var(--palette-surface) 82%, black);
  --control-surface-hover: color-mix(in srgb, var(--palette-surface-2) 84%, black);
  --control-border: color-mix(in srgb, var(--palette-border) 74%, transparent);
  --control-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
  --dialog-head-surface:
    linear-gradient(180deg, color-mix(in srgb, var(--palette-surface-2) 76%, var(--palette-surface)), color-mix(in srgb, var(--palette-surface) 88%, var(--palette-paper))),
    var(--palette-surface);
  --settings-panel-surface: color-mix(in srgb, var(--palette-surface) 86%, transparent);
  --settings-card-surface:
    linear-gradient(180deg, color-mix(in srgb, var(--palette-surface) 92%, var(--palette-surface-2)), color-mix(in srgb, var(--palette-paper) 46%, var(--palette-surface))),
    var(--palette-surface);
  --settings-accent-card-surface:
    linear-gradient(135deg, color-mix(in srgb, var(--palette-green) 13%, transparent), color-mix(in srgb, var(--palette-blue) 8%, transparent)),
    color-mix(in srgb, var(--palette-surface) 84%, transparent);
  --settings-row-surface: color-mix(in srgb, var(--palette-surface) 84%, transparent);
  --settings-row-muted-surface: color-mix(in srgb, var(--palette-surface) 60%, transparent);
  --settings-chip-surface: color-mix(in srgb, var(--palette-surface) 88%, transparent);
  --settings-invalid-surface: color-mix(in srgb, var(--palette-coral) 13%, var(--palette-paper));
  --settings-invalid-border: color-mix(in srgb, var(--palette-coral) 42%, transparent);
  --success-surface: color-mix(in srgb, var(--palette-green) 20%, var(--palette-paper));
  --success-surface-hover: color-mix(in srgb, var(--palette-green) 25%, var(--palette-paper));
  --success-border: color-mix(in srgb, var(--palette-green) 42%, transparent);
  --success-ink: color-mix(in srgb, var(--palette-green) 74%, var(--palette-ink));
  --success-muted-ink: color-mix(in srgb, var(--palette-green) 56%, var(--palette-muted));
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  --shadow-raised: 0 30px 80px rgba(0, 0, 0, 0.62);
  --metrics-footer-scrim: linear-gradient(180deg, color-mix(in srgb, var(--palette-paper) 10%, transparent), color-mix(in srgb, var(--palette-paper) 78%, transparent) 58%, transparent);
  --metrics-footer-surface:
    linear-gradient(135deg, color-mix(in srgb, var(--palette-surface) 84%, transparent), color-mix(in srgb, var(--palette-paper) 84%, transparent)),
    color-mix(in srgb, var(--palette-paper) 82%, transparent);
  --metrics-footer-border: color-mix(in srgb, var(--palette-border) 64%, transparent);
  --metrics-footer-shadow:
    0 24px 58px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 color-mix(in srgb, var(--palette-current) 28%, transparent);
  --metrics-footer-mobile-shadow:
    0 -14px 26px rgba(0, 0, 0, 0.52),
    0 2px 6px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --metrics-card-surface: color-mix(in srgb, var(--palette-paper) 72%, transparent);
  --metrics-card-border: color-mix(in srgb, var(--palette-border) 56%, transparent);
  --metrics-card-shadow:
    0 14px 30px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --metrics-carousel-edge-start: color-mix(in srgb, var(--palette-paper) 96%, transparent);
  --metrics-carousel-edge-end: transparent;
}

* {
  box-sizing: border-box;
}

html {
  overscroll-behavior-y: none;
  scroll-padding-top: var(--sticky-row-offset, 260px);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 280px),
    linear-gradient(135deg, rgba(47, 128, 98, 0.055) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #e7edf2 0%, #f3f6f8 48%, #eaf1ed 100%);
  background-attachment: fixed;
  color: var(--ink);
  overscroll-behavior-y: none;
}

:root[data-theme="dark"] body {
  background:
    linear-gradient(180deg, rgba(145, 181, 255, 0.07), rgba(145, 181, 255, 0) 300px),
    linear-gradient(135deg, rgba(99, 212, 157, 0.035) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #080c11 0%, #0b1118 48%, #0a0e13 100%);
  background-color: var(--paper);
}

:root[data-color-theme="iphone"][data-theme="light"] body {
  background:
    linear-gradient(180deg, rgba(245, 247, 232, 0.64), rgba(245, 247, 232, 0) 300px),
    linear-gradient(135deg, rgba(56, 158, 107, 0.065) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #f0e8d1 0%, #f8f5e5 48%, #e9dec3 100%);
  background-color: var(--paper);
}

:root[data-color-theme="iphone"][data-theme="dark"] body {
  background:
    linear-gradient(180deg, rgba(56, 158, 107, 0.09), rgba(56, 158, 107, 0) 300px),
    linear-gradient(135deg, rgba(240, 232, 209, 0.035) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #0d1c1f 0%, #0b1718 48%, #091212 100%);
  background-color: var(--paper);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--palette-blue) 10%, transparent), transparent 300px),
    linear-gradient(135deg, color-mix(in srgb, var(--palette-green) 6%, transparent) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, var(--palette-paper) 0%, color-mix(in srgb, var(--palette-surface) 50%, var(--palette-paper)) 48%, color-mix(in srgb, var(--palette-current) 8%, var(--palette-paper)) 100%);
  background-color: var(--paper);
}

:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .auth-panel,
:root[data-theme="dark"] .settings-tabs,
:root[data-theme="dark"] .er-dialog,
:root[data-theme="dark"] .settings-panel,
:root[data-theme="dark"] .share-panel,
:root[data-theme="dark"] .admin-panel,
:root[data-theme="dark"] .run-calendar-panel,
:root[data-theme="dark"] .plan-row-form,
:root[data-theme="dark"] .distance-projection-card,
:root[data-theme="dark"] .summary-card,
:root[data-theme="dark"] .week-action-menu-panel,
:root[data-theme="dark"] .help-shell {
  background: color-mix(in srgb, var(--surface) 92%, black);
  border-color: var(--border);
}

:root[data-theme="dark"] .sticky-dashboard::before {
  background:
    linear-gradient(180deg, rgba(10, 14, 19, 0.14), rgba(10, 14, 19, 0.78) 58%, rgba(10, 14, 19, 0));
}

:root[data-theme="dark"] .metrics-footer::before {
  background: var(--metrics-footer-scrim);
}

:root[data-theme="dark"] .er-dialog-head,
:root[data-theme="dark"] .settings-tabs,
:root[data-theme="dark"] .auth-tabs {
  background:
    linear-gradient(180deg, rgba(27, 35, 46, 0.96), rgba(20, 26, 35, 0.94)),
    var(--surface);
  border-color: var(--border);
}

:root[data-theme="dark"] .auth-tab.active,
:root[data-theme="dark"] .settings-tab.active,
:root[data-theme="dark"] .dialog-close-btn,
:root[data-theme="dark"] .settings-help-link,
:root[data-theme="dark"] .readonly-link,
:root[data-theme="dark"] .run-calendar-arrow,
:root[data-theme="dark"] .watch-code-card,
:root[data-theme="dark"] .watch-device-row,
:root[data-theme="dark"] .admin-row,
:root[data-theme="dark"] .theme-choice,
:root[data-theme="dark"] .theme-select-control,
:root[data-theme="dark"] .week-day-cell,
:root[data-theme="dark"] .run-cell,
:root[data-theme="dark"] .input-action button,
:root[data-theme="dark"] .toast {
  background: rgba(18, 24, 33, 0.94);
  border-color: var(--border);
  color: var(--ink);
}

:root[data-theme="dark"] .share-panel.active,
:root[data-theme="dark"] .theme-choice.active,
:root[data-theme="dark"] .admin-row.active {
  background: rgba(20, 33, 38, 0.94);
  border-color: rgba(100, 196, 154, 0.42);
  box-shadow: inset 0 0 0 1px rgba(99, 212, 157, 0.1);
}

:root[data-theme="dark"] .share-view-count {
  background: rgba(18, 24, 33, 0.94);
  border-color: rgba(100, 196, 154, 0.28);
  color: var(--muted);
}

:root[data-theme="dark"] .danger-zone-panel {
  background:
    linear-gradient(180deg, rgba(59, 33, 31, 0.86), rgba(20, 26, 35, 0.96)),
    var(--surface);
  border-color: rgba(255, 134, 111, 0.3);
}

:root[data-theme="dark"] .watch-panel,
:root[data-theme="dark"] .theme-panel {
  background:
    linear-gradient(135deg, rgba(22, 30, 40, 0.98), rgba(17, 25, 34, 0.94)),
    var(--surface);
}

:root[data-theme="dark"] .mobile-command-glass {
  background: rgba(13, 18, 25, 0.94);
  border-color: rgba(81, 94, 111, 0.62);
}

:root[data-theme="dark"] .metrics-footer-glass {
  background: var(--metrics-footer-surface);
  border-color: var(--metrics-footer-border);
}

:root[data-theme="dark"] .metrics-footer .metric {
  background: var(--metrics-card-surface);
  border-color: var(--metrics-card-border);
}

:root[data-theme="dark"] .metrics-footer .summary-carousel::before {
  background: linear-gradient(90deg, var(--metrics-carousel-edge-start), var(--metrics-carousel-edge-end));
}

:root[data-theme="dark"] .metrics-footer .summary-carousel::after {
  background: linear-gradient(270deg, var(--metrics-carousel-edge-start), var(--metrics-carousel-edge-end));
}

:root[data-theme="dark"] .shell {
  background:
    linear-gradient(180deg, rgba(145, 181, 255, 0.055), rgba(10, 14, 19, 0) 260px),
    var(--paper);
}

:root[data-theme="dark"] .plan-row-form.active .week-day-cell,
:root[data-theme="dark"] .plan-row-form.context-row .week-day-cell,
:root[data-theme="dark"] .plan-row-form.planned-row .week-day-cell,
:root[data-theme="dark"] .week-day-cell.empty-day {
  background: rgba(18, 24, 33, 0.9);
  border-color: rgba(65, 78, 94, 0.86);
}

:root[data-theme="dark"] .plan-row-form.active {
  background:
    linear-gradient(90deg, rgba(138, 164, 184, 0.2), rgba(99, 212, 157, 0.1) 24%, rgba(20, 26, 35, 0.98) 44%),
    var(--surface);
  border-color: rgba(138, 164, 184, 0.62);
  box-shadow:
    0 0 0 1px rgba(138, 164, 184, 0.28),
    0 20px 44px rgba(0, 0, 0, 0.34);
}

:root[data-theme="dark"] .plan-row-form.locked,
:root[data-theme="dark"] .plan-row-main,
:root[data-theme="dark"] .plan-row-footer,
:root[data-theme="dark"] .plan-row-form.active .plan-row-main,
:root[data-theme="dark"] .plan-row-form.active .plan-row-footer,
:root[data-theme="dark"] .plan-row-form.planned-row .plan-row-main,
:root[data-theme="dark"] .plan-row-form.planned-row .plan-row-footer {
  background: rgba(16, 22, 31, 0.94);
  border-color: var(--border);
}

:root[data-theme="dark"] .title-factor,
:root[data-theme="dark"] .title-factor-edit {
  background: rgba(166, 180, 172, 0.12);
  border-color: rgba(166, 180, 172, 0.18);
}

:root[data-theme="dark"] .title-factor.meta-negative {
  color: var(--coral);
}

:root[data-theme="dark"] .title-factor.meta-recovery {
  color: var(--blue);
}

:root[data-theme="dark"] .week-day-cell.pace-complete,
:root[data-theme="dark"] .plan-row-form.active .week-day-cell.needs-pace {
  background: rgba(22, 43, 35, 0.9);
}

:root[data-theme="dark"] .week-day-elevation-trace {
  color: rgba(99, 212, 157, 0.26);
  opacity: 0.52;
  mix-blend-mode: screen;
}

.week-day-elevation-fill {
  fill: currentColor;
  opacity: 0.2;
}

:root[data-theme="dark"] .week-day-elevation-fill {
  opacity: 0.16;
}

:root[data-theme="dark"] .week-day-source-badge {
  border-color: rgba(100, 196, 154, 0.34);
  background: rgba(17, 29, 27, 0.84);
  color: var(--mint);
}

:root[data-theme="dark"] .plan-row-form.locked .week-day-cell.pace-not-entered {
  border-color: rgba(111, 132, 155, 0.52);
  background:
    linear-gradient(180deg, rgba(28, 36, 47, 0.72), rgba(18, 24, 33, 0.94)),
    rgba(18, 24, 33, 0.94);
  color: var(--ink);
  box-shadow:
    inset 0 3px 0 rgba(138, 164, 184, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .plan-row-form.locked .week-day-cell.pace-not-entered::before {
  border-color: rgba(157, 176, 197, 0.82);
  background: rgba(13, 18, 25, 0.9);
  box-shadow: 0 0 0 3px rgba(138, 164, 184, 0.12);
}

:root[data-theme="dark"] .run-calendar-month,
:root[data-theme="dark"] .run-calendar-tooltip,
:root[data-theme="dark"] .distance-projection-popover,
:root[data-theme="dark"] .week-day-meta-tooltip {
  background: rgba(16, 22, 31, 0.98);
  border-color: var(--border);
  color: var(--ink);
}

:root[data-theme="dark"] .run-calendar-tooltip::after,
:root[data-theme="dark"] .distance-projection-popover::after,
:root[data-theme="dark"] .week-day-meta-tooltip::after {
  background: var(--floating-popover-notch-fill, rgba(16, 22, 31, 0.98));
  border-color: var(--border);
}

:root[data-theme="dark"] .info-icon {
  border-color: rgba(99, 112, 132, 0.72);
  background: rgba(18, 24, 33, 0.94);
  color: var(--muted);
}

:root[data-theme="dark"] .info-tooltip {
  border-color: var(--border);
  background: rgba(16, 22, 31, 0.98);
  color: var(--ink);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.48);
}

:root[data-theme="dark"] .run-calendar-weekdays {
  color: rgba(199, 209, 222, 0.8);
}

:root[data-theme="dark"] .run-calendar-day {
  color: rgba(226, 234, 244, 0.96);
  font-weight: 900;
}

:root[data-theme="dark"] .run-calendar-day.is-outside-month {
  color: rgba(148, 163, 184, 0.56);
}

:root[data-theme="dark"] .run-calendar-month h3 {
  color: var(--ink);
}

:root[data-theme="dark"] .run-calendar-day.has-run {
  color: var(--run-label-color, #f6f9fc);
  text-shadow: var(--run-label-shadow, 0 1px 2px rgba(0, 0, 0, 0.38));
}

:root[data-theme="dark"] .run-calendar-day.has-run::before {
  box-shadow:
    0 5px 13px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

:root[data-theme="dark"] .run-calendar-day.has-run.no-pace::before {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%),
    rgba(79, 93, 111, 0.8);
}

:root[data-theme="dark"] .run-calendar-day.has-run.complete-only {
  color: #dfe7ef;
}

:root[data-theme="dark"] .run-calendar-day.has-run.complete-only::before {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 48%),
    rgba(31, 41, 54, 0.92);
  box-shadow:
    0 5px 13px rgba(0, 0, 0, 0.28),
    inset 0 0 0 2px rgba(132, 146, 166, 0.66);
}

:root[data-theme="dark"] .run-calendar-day.has-run:hover::before,
:root[data-theme="dark"] .run-calendar-day.has-run:focus-visible::before {
  box-shadow:
    0 0 0 3px rgba(145, 181, 255, 0.2),
    0 8px 18px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

:root[data-theme="dark"] .run-calendar-tooltip span,
:root[data-theme="dark"] .distance-projection-popover span,
:root[data-theme="dark"] .week-day-meta-tooltip span {
  color: var(--muted);
}

:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea {
  border-color: var(--border);
  background: var(--input-surface);
  color: var(--ink);
}

:root[data-theme="dark"] .field input::placeholder,
:root[data-theme="dark"] .field textarea::placeholder {
  color: #76877d;
}

:root[data-theme="dark"] .help-table,
:root[data-theme="dark"] .help-table > div,
:root[data-theme="dark"] .help-table > div:first-child,
:root[data-theme="dark"] .help-hero,
:root[data-theme="dark"] .help-section,
:root[data-theme="dark"] .help-card,
:root[data-theme="dark"] .help-callout {
  background: rgba(20, 26, 35, 0.94);
  border-color: var(--border);
}

:root[data-theme="dark"] .help-table span,
:root[data-theme="dark"] .help-hero p:not(.eyebrow),
:root[data-theme="dark"] .help-section p,
:root[data-theme="dark"] .help-list {
  color: var(--muted);
}

:root[data-theme="dark"] .help-hero code,
:root[data-theme="dark"] .help-card code,
:root[data-theme="dark"] .help-table code,
:root[data-theme="dark"] .help-list code {
  background: var(--success-surface);
  border-color: color-mix(in srgb, var(--green) 32%, var(--border));
  color: var(--success-ink);
}

:root[data-theme="dark"] .help-code {
  background: #090d13;
  border-color: var(--border);
  color: #e2eaf4;
}

:root[data-theme="dark"] .help-table strong,
:root[data-theme="dark"] .help-back-link,
:root[data-theme="dark"] .settings-help-link {
  color: var(--green);
}

:root[data-theme="dark"] .er-dialog-backdrop {
  background: rgba(4, 8, 13, 0.66);
  backdrop-filter: blur(3px) saturate(0.96);
  -webkit-backdrop-filter: blur(3px) saturate(0.96);
}

:root[data-theme="dark"] .er-settings-discard-backdrop {
  background: rgba(4, 8, 13, 0.76);
}

:root[data-theme="dark"] .sticky-dashboard::before {
  backdrop-filter: blur(2px) saturate(1.02);
  -webkit-backdrop-filter: blur(2px) saturate(1.02);
}

:root[data-theme="dark"] .metrics-footer-glass {
  background: var(--metrics-footer-surface);
  border-color: var(--metrics-footer-border);
  box-shadow: var(--metrics-footer-shadow);
  backdrop-filter: blur(2px) saturate(1.01);
  -webkit-backdrop-filter: blur(2px) saturate(1.01);
}

:root[data-theme="dark"] .metrics-footer-toggle {
  border-color: rgba(99, 112, 132, 0.74);
  background: rgba(18, 24, 33, 0.96);
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .metrics-footer-toggle:hover,
:root[data-theme="dark"] .metrics-footer-toggle:focus-visible {
  border-color: rgba(145, 181, 255, 0.54);
  background: rgba(24, 34, 48, 0.98);
  color: var(--blue);
}

:root[data-theme="dark"] .topbar {
  background: rgba(13, 18, 25, 0.92);
}

:root[data-theme="dark"] .dialog-close-btn {
  color: var(--muted);
}

:root[data-theme="dark"] .dialog-close-btn:hover,
:root[data-theme="dark"] .dialog-close-btn:focus-visible,
:root[data-theme="dark"] .settings-help-link:hover,
:root[data-theme="dark"] .settings-help-link:focus-visible,
:root[data-theme="dark"] .readonly-link:hover,
:root[data-theme="dark"] .readonly-link:focus-visible {
  background: rgba(27, 35, 46, 0.98);
  border-color: rgba(145, 181, 255, 0.46);
  color: var(--blue);
}

:root[data-theme="dark"] .btn:disabled,
:root[data-theme="dark"] .icon-btn:disabled {
  background: rgba(27, 35, 46, 0.7);
  border: 1px solid rgba(71, 83, 99, 0.54);
  color: #8390a0;
  box-shadow: none;
  opacity: 1;
}

:root[data-theme="dark"] .current-week-button {
  border-color: rgba(145, 181, 255, 0.46);
  background: rgba(23, 36, 54, 0.98);
  color: #f8fbff;
  font-weight: 900;
  opacity: 1;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .hero-current-week-button {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(10, 15, 23, 0.96);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px) saturate(1.01);
  -webkit-backdrop-filter: blur(3px) saturate(1.01);
}

:root[data-theme="dark"] .current-week-button:hover,
:root[data-theme="dark"] .current-week-button:focus-visible {
  border-color: rgba(145, 181, 255, 0.72);
  background: rgba(28, 43, 62, 0.96);
  color: #ffffff;
}

:root[data-theme="dark"] .plan-row-title p,
:root[data-theme="dark"] .row-stat-label,
:root[data-theme="dark"] .row-stat-value small,
:root[data-theme="dark"] .week-day-distance small,
:root[data-theme="dark"] .metric-title,
:root[data-theme="dark"] .metric-detail,
:root[data-theme="dark"] .source-line,
:root[data-theme="dark"] .auth-note,
:root[data-theme="dark"] .er-dialog-note,
:root[data-theme="dark"] .watch-code-card label,
:root[data-theme="dark"] .watch-code-card span,
:root[data-theme="dark"] .watch-code-card small,
:root[data-theme="dark"] .watch-device-row span,
:root[data-theme="dark"] .theme-choice-copy small,
:root[data-theme="dark"] .admin-row-detail,
:root[data-theme="dark"] .distance-projection-scale,
:root[data-theme="dark"] .future-row-overlay > span:last-child {
  color: var(--muted);
}

:root[data-theme="dark"] .week-day-abbrev,
:root[data-theme="dark"] .week-day-achieved-distance,
:root[data-theme="dark"] .week-day-cell.empty-day .week-day-abbrev,
:root[data-theme="dark"] .workout-empty,
:root[data-theme="dark"] .workout-minutes-label,
:root[data-theme="dark"] .week-day-pace.pace-default {
  color: #98a6b6;
}

:root[data-theme="dark"] .week-day-workout,
:root[data-theme="dark"] .row-stat-pill,
:root[data-theme="dark"] .metric-value,
:root[data-theme="dark"] .theme-choice-copy strong,
:root[data-theme="dark"] .watch-device-row strong,
:root[data-theme="dark"] .watch-device-list h4 {
  color: var(--ink);
}

:root[data-theme="dark"] button.week-day-cell:hover,
:root[data-theme="dark"] button.week-day-cell:focus-visible,
:root[data-theme="dark"] .week-day-cell.has-run-meta:hover,
:root[data-theme="dark"] .week-day-cell.has-run-meta:focus-visible,
:root[data-theme="dark"] .week-day-cell.has-run-meta.is-run-meta-open {
  border-color: rgba(99, 212, 157, 0.42);
  background: rgba(24, 43, 36, 0.96);
  box-shadow:
    0 0 0 2px rgba(99, 212, 157, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.26);
}

:root[data-theme="dark"] .plan-row-form.locked button.week-day-cell.pace-not-entered:hover,
:root[data-theme="dark"] .plan-row-form.locked button.week-day-cell.pace-not-entered:focus-visible,
:root[data-theme="dark"] .plan-row-form.locked .week-day-cell.pace-not-entered.has-run-meta:hover,
:root[data-theme="dark"] .plan-row-form.locked .week-day-cell.pace-not-entered.has-run-meta:focus-visible,
:root[data-theme="dark"] .plan-row-form.locked .week-day-cell.pace-not-entered.has-run-meta.is-run-meta-open {
  border-color: rgba(145, 181, 255, 0.62);
  background:
    linear-gradient(180deg, rgba(28, 43, 62, 0.88), rgba(20, 28, 38, 0.98)),
    rgba(18, 24, 33, 0.96);
  box-shadow:
    0 0 0 2px rgba(145, 181, 255, 0.14),
    0 12px 24px rgba(0, 0, 0, 0.25);
}

:root[data-theme="dark"] .plan-row-form.active button.week-day-cell.needs-pace:hover,
:root[data-theme="dark"] .plan-row-form.active button.week-day-cell.needs-pace:focus-visible {
  border-color: rgba(145, 181, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(26, 43, 66, 0.96), rgba(18, 24, 33, 0.96)),
    rgba(18, 24, 33, 0.96);
  box-shadow:
    inset 0 4px 0 var(--blue),
    0 0 0 3px rgba(145, 181, 255, 0.16),
    0 14px 26px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] button.week-day-cell.pace-complete:hover,
:root[data-theme="dark"] button.week-day-cell.pace-complete:focus-visible {
  border-color: rgba(99, 212, 157, 0.54);
  background:
    linear-gradient(180deg, rgba(25, 50, 40, 0.98), rgba(18, 34, 29, 0.96)),
    rgba(18, 24, 33, 0.96);
  box-shadow:
    inset 0 3px 0 rgba(99, 212, 157, 0.72),
    0 0 0 3px rgba(99, 212, 157, 0.13),
    0 14px 26px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .row-stat-pill,
:root[data-theme="dark"] .stat-factor,
:root[data-theme="dark"] .stat-planned,
:root[data-theme="dark"] .stat-average {
  background: rgba(21, 29, 39, 0.92);
  border-color: rgba(63, 77, 94, 0.88);
}

:root[data-theme="dark"] .row-stat-pill.editable:hover,
:root[data-theme="dark"] .row-stat-pill.editable:focus-within,
:root[data-theme="dark"] .row-stat-edit:hover,
:root[data-theme="dark"] .row-stat-edit:focus-visible {
  background: rgba(24, 49, 39, 0.94);
  border-color: rgba(99, 212, 157, 0.52);
}

:root[data-theme="dark"] .plan-row-form.planned-row {
  background: rgba(14, 20, 28, 0.94);
  border-color: rgba(111, 129, 150, 0.76);
}

:root[data-theme="dark"] .plan-row-form.planned-row .row-kicker,
:root[data-theme="dark"] .plan-row-form.context-row .row-kicker {
  background: rgba(178, 189, 201, 0.12);
  color: var(--muted);
}

:root[data-theme="dark"] .plan-row-form.planned-row .week-day-slot.planning-focus-slot .week-day-cell::after {
  background:
    linear-gradient(180deg, rgba(15, 21, 29, var(--planning-veil, 0.48)), rgba(15, 21, 29, 0.024)),
    repeating-linear-gradient(135deg, rgba(178, 189, 201, 0.024) 0 1px, transparent 1px 12px);
}

:root[data-theme="dark"] .plan-row-form.planned-row .week-day-slot.planning-focus-slot .week-day-cell > :not(.week-day-meta-tooltip) {
  filter: blur(var(--planning-content-blur, 7px)) saturate(0.7) brightness(0.86);
}

:root[data-theme="dark"] .plan-row-form.planned-row .week-day-distance,
:root[data-theme="dark"] .plan-row-form.planned-row .week-day-pace {
  opacity: 0.9;
}

:root[data-theme="dark"] .plan-row-form.future-row {
  background:
    linear-gradient(135deg, rgba(20, 26, 35, 0.9), rgba(16, 22, 31, 0.82)),
    rgba(13, 18, 25, 0.9);
}

:root[data-theme="dark"] .future-row-content {
  opacity: 0.5;
  filter: blur(1.25px) saturate(0.78) brightness(0.86);
  transform: scale(1.006);
}

:root[data-theme="dark"] .future-row-overlay {
  background:
    radial-gradient(circle at 50% 42%, rgba(20, 26, 35, 0.54), rgba(20, 26, 35, 0.22) 44%, rgba(20, 26, 35, 0.04)),
    linear-gradient(180deg, rgba(13, 18, 25, 0.16), rgba(13, 18, 25, 0.04));
  backdrop-filter: blur(1.5px) saturate(0.9);
  -webkit-backdrop-filter: blur(1.5px) saturate(0.9);
  color: var(--ink);
}

:root[data-theme="dark"] .plan-row-form.beyond-row {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0.46) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0.46) 78%, transparent 100%);
}

:root[data-theme="dark"] .beyond-row .future-row-content {
  opacity: 0.38;
  filter: blur(2.1px) saturate(0.64) brightness(0.78);
  transform: scale(1.012);
}

:root[data-theme="dark"] .beyond-row .future-row-overlay {
  background:
    radial-gradient(circle at 50% 42%, rgba(20, 26, 35, 0.64), rgba(20, 26, 35, 0.28) 44%, rgba(20, 26, 35, 0)),
    linear-gradient(180deg, rgba(13, 18, 25, 0.16), rgba(13, 18, 25, 0));
  backdrop-filter: blur(3px) saturate(0.82);
  -webkit-backdrop-filter: blur(3px) saturate(0.82);
}

:root[data-theme="dark"] .distance-projection-chart {
  opacity: 0.9;
  mix-blend-mode: normal;
}

:root[data-theme="dark"] .distance-projection-grid line {
  stroke: rgba(178, 189, 201, 0.14);
}

:root[data-theme="dark"] .distance-projection-grid text {
  fill: rgba(178, 189, 201, 0.62);
}

:root[data-theme="dark"] .distance-projection-area.past {
  fill: rgba(138, 164, 184, 0.12);
}

:root[data-theme="dark"] .distance-projection-area.future {
  fill: rgba(99, 212, 157, 0.12);
}

:root[data-theme="dark"] .distance-projection-line.past {
  stroke: rgba(138, 164, 184, 0.58);
}

:root[data-theme="dark"] .distance-projection-line.future {
  stroke: rgba(99, 212, 157, 0.72);
}

:root[data-theme="dark"] .distance-projection-popover {
  background: rgba(16, 22, 31, 0.98);
  border-color: rgba(99, 112, 132, 0.86);
  color: var(--ink);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.48);
}

:root[data-theme="dark"] .week-action-menu > .week-action-menu-toggle {
  border-color: rgba(99, 112, 132, 0.74);
  background: rgba(18, 24, 33, 0.96);
  color: var(--muted);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .week-action-menu > .week-action-menu-toggle:hover,
:root[data-theme="dark"] .week-action-menu > .week-action-menu-toggle:focus-visible,
:root[data-theme="dark"] .week-action-menu[open] > .week-action-menu-toggle {
  border-color: rgba(145, 181, 255, 0.54);
  background: rgba(24, 34, 48, 0.98);
  color: var(--blue);
}

:root[data-theme="dark"] .beyond-action-menu .week-action-menu-panel {
  background: rgba(16, 22, 31, 0.98);
  border-color: var(--border);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.52);
}

:root[data-theme="dark"] .week-action-submenu-panel {
  background: rgba(20, 27, 37, 0.96);
  border-color: var(--border);
}

:root[data-theme="dark"] .week-action-submenu[open] > .week-action-submenu-toggle,
:root[data-theme="dark"] .week-action-menu-item:not(:disabled):hover,
:root[data-theme="dark"] .week-action-menu-item:not(:disabled):focus-visible {
  background: rgba(27, 38, 52, 0.96);
}

:root[data-theme="dark"] .week-action-menu-item span {
  color: var(--muted);
}

:root[data-theme="dark"] .week-action-menu-divider {
  background: rgba(99, 112, 132, 0.62);
}

:root[data-theme="dark"] .theme-choice-swatch.dark {
  background: #0f141c;
  color: var(--green);
}

:root[data-theme="dark"] .theme-choice-swatch.light {
  background: #f7f1e8;
  color: #7b520f;
}

:root[data-theme="dark"] .theme-choice-swatch.default {
  background:
    linear-gradient(135deg, #e7edf2 0 50%, #0f141c 50% 100%);
  color: var(--green);
}

:root[data-theme="dark"] .theme-choice-swatch.iphone {
  background:
    linear-gradient(135deg, #f0e8d1 0 48%, #142621 48% 100%);
  color: #63d49d;
}

:root[data-color-theme="iphone"][data-theme="light"] .shell {
  background:
    linear-gradient(180deg, rgba(245, 247, 232, 0.78), rgba(240, 232, 209, 0) 260px),
    var(--paper);
}

:root[data-color-theme="iphone"][data-theme="dark"] .shell {
  background:
    linear-gradient(180deg, rgba(99, 212, 157, 0.07), rgba(9, 18, 18, 0) 260px),
    var(--paper);
}

:root[data-color-theme="iphone"][data-theme="light"] .sticky-dashboard::before {
  background:
    linear-gradient(180deg, rgba(245, 247, 232, 0.24), rgba(245, 247, 232, 0.07) 52%, rgba(245, 247, 232, 0)),
    rgba(255, 253, 244, 0.08);
}

:root[data-color-theme="iphone"][data-theme="dark"] .sticky-dashboard::before {
  background:
    linear-gradient(180deg, rgba(9, 18, 18, 0.16), rgba(9, 18, 18, 0.82) 58%, rgba(9, 18, 18, 0));
}

:root[data-color-theme="iphone"][data-theme="light"] .app-hero {
  border-color: color-mix(in srgb, var(--iphone-mist) 36%, transparent);
  box-shadow:
    0 20px 48px rgba(20, 38, 33, 0.2),
    inset 0 1px 0 rgba(245, 247, 232, 0.34);
}

:root[data-color-theme="iphone"][data-theme="light"] .app-hero::after {
  background:
    linear-gradient(90deg, rgba(20, 38, 33, 0.84), rgba(56, 158, 107, 0.42) 56%, rgba(240, 232, 209, 0.08)),
    linear-gradient(0deg, rgba(20, 38, 33, 0.34), rgba(20, 38, 33, 0.02));
}

:root[data-color-theme="iphone"][data-theme="dark"] .app-hero {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(245, 247, 232, 0.08);
}

:root[data-color-theme="iphone"][data-theme="dark"] .app-hero::after {
  background:
    linear-gradient(90deg, rgba(9, 18, 18, 0.9), rgba(20, 38, 33, 0.58) 58%, rgba(99, 212, 157, 0.12)),
    linear-gradient(0deg, rgba(9, 18, 18, 0.42), rgba(9, 18, 18, 0.08));
}

:root[data-color-theme="iphone"] .app-hero .eyebrow {
  color: color-mix(in srgb, var(--green) 42%, var(--iphone-mist));
}

:root[data-color-theme="iphone"] .app-hero-corner-btn,
:root[data-color-theme="iphone"] .app-hero-badge,
:root[data-color-theme="iphone"] .hero-signout-pill,
:root[data-color-theme="iphone"] .app-hero-actions .user-pill,
:root[data-color-theme="iphone"] .app-hero-actions .status-pill,
:root[data-color-theme="iphone"] .app-hero-actions .btn,
:root[data-color-theme="iphone"] .hero-current-week-button {
  border-color: rgba(245, 247, 232, 0.3);
  background: rgba(245, 247, 232, 0.14);
  color: white;
}

:root[data-color-theme="iphone"][data-theme="light"] .topbar,
:root[data-color-theme="iphone"][data-theme="light"] .auth-panel,
:root[data-color-theme="iphone"][data-theme="light"] .settings-tabs,
:root[data-color-theme="iphone"][data-theme="light"] .er-dialog,
:root[data-color-theme="iphone"][data-theme="light"] .settings-panel,
:root[data-color-theme="iphone"][data-theme="light"] .share-panel,
:root[data-color-theme="iphone"][data-theme="light"] .admin-panel,
:root[data-color-theme="iphone"][data-theme="light"] .run-calendar-panel,
:root[data-color-theme="iphone"][data-theme="light"] .plan-row-form,
:root[data-color-theme="iphone"][data-theme="light"] .distance-projection-card,
:root[data-color-theme="iphone"][data-theme="light"] .summary-card,
:root[data-color-theme="iphone"][data-theme="light"] .week-action-menu-panel,
:root[data-color-theme="iphone"][data-theme="light"] .help-shell {
  background: color-mix(in srgb, var(--surface) 94%, white);
  border-color: var(--border);
}

:root[data-color-theme="iphone"][data-theme="dark"] .topbar,
:root[data-color-theme="iphone"][data-theme="dark"] .auth-panel,
:root[data-color-theme="iphone"][data-theme="dark"] .settings-tabs,
:root[data-color-theme="iphone"][data-theme="dark"] .er-dialog,
:root[data-color-theme="iphone"][data-theme="dark"] .settings-panel,
:root[data-color-theme="iphone"][data-theme="dark"] .share-panel,
:root[data-color-theme="iphone"][data-theme="dark"] .admin-panel,
:root[data-color-theme="iphone"][data-theme="dark"] .run-calendar-panel,
:root[data-color-theme="iphone"][data-theme="dark"] .plan-row-form,
:root[data-color-theme="iphone"][data-theme="dark"] .distance-projection-card,
:root[data-color-theme="iphone"][data-theme="dark"] .summary-card,
:root[data-color-theme="iphone"][data-theme="dark"] .week-action-menu-panel,
:root[data-color-theme="iphone"][data-theme="dark"] .help-shell {
  background: color-mix(in srgb, var(--surface) 92%, black);
  border-color: var(--border);
}

:root[data-color-theme="iphone"] .er-dialog-head,
:root[data-color-theme="iphone"] .settings-tabs,
:root[data-color-theme="iphone"] .auth-tabs {
  background: var(--dialog-head-surface);
  border-color: var(--border);
}

:root[data-color-theme="iphone"] .field input:focus,
:root[data-color-theme="iphone"] .field select:focus,
:root[data-color-theme="iphone"] .field textarea:focus,
:root[data-color-theme="iphone"] .theme-select:focus-visible {
  border-color: var(--blue);
  box-shadow: var(--focus-ring);
}

:root[data-color-theme="iphone"] .theme-choice:hover,
:root[data-color-theme="iphone"] .theme-choice:focus-visible,
:root[data-color-theme="iphone"] .theme-select-control:focus-within,
:root[data-color-theme="iphone"] .run-calendar-arrow:hover,
:root[data-color-theme="iphone"] .run-calendar-arrow:focus-visible,
:root[data-color-theme="iphone"] .row-stat-pill.editable:hover,
:root[data-color-theme="iphone"] .row-stat-pill.editable:focus-within {
  border-color: color-mix(in srgb, var(--green) 48%, var(--border));
}

:root[data-color-theme="iphone"] .theme-choice.active,
:root[data-color-theme="iphone"] .share-panel.active,
:root[data-color-theme="iphone"] .admin-row.active {
  background: var(--green-soft);
  border-color: color-mix(in srgb, var(--green) 68%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent);
}

:root[data-color-theme="iphone"] .watch-panel,
:root[data-color-theme="iphone"] .theme-panel {
  background: var(--settings-accent-card-surface);
}

:root[data-color-theme="iphone"] .metric {
  background: color-mix(in srgb, var(--surface) 92%, white);
  border-color: var(--border);
  box-shadow: var(--control-shadow);
}

:root[data-color-theme="iphone"] .metrics-footer-glass {
  background: var(--metrics-footer-surface);
  border-color: var(--metrics-footer-border);
  box-shadow: var(--metrics-footer-shadow);
}

:root[data-color-theme="iphone"] .metrics-footer .metric {
  background: var(--metrics-card-surface);
  border-color: var(--metrics-card-border);
  box-shadow: var(--metrics-card-shadow);
}

:root[data-color-theme="iphone"] .mobile-command-glass {
  color: white;
}

:root[data-color-theme="iphone"][data-theme="light"] .mobile-command-glass {
  border-color: rgba(245, 247, 232, 0.34);
  background:
    linear-gradient(135deg, rgba(20, 38, 33, 0.97), rgba(56, 158, 107, 0.86)),
    var(--current-week-deep);
  box-shadow:
    0 18px 44px rgba(20, 38, 33, 0.34),
    inset 0 1px 0 rgba(245, 247, 232, 0.22);
}

:root[data-color-theme="iphone"][data-theme="dark"] .mobile-command-glass {
  border-color: rgba(99, 212, 157, 0.28);
  background:
    linear-gradient(135deg, rgba(9, 18, 18, 0.98), rgba(20, 38, 33, 0.9)),
    var(--paper);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(245, 247, 232, 0.08);
}

:root[data-color-theme="iphone"] .mobile-command-icon,
:root[data-color-theme="iphone"] .mobile-current-week-button,
:root[data-color-theme="iphone"] .mobile-command-pill,
:root[data-color-theme="iphone"] .mobile-command-signout,
:root[data-color-theme="iphone"] .mobile-command-readonly {
  border-color: rgba(245, 247, 232, 0.24);
  background: rgba(245, 247, 232, 0.14);
  color: white;
}

:root[data-color-theme="iphone"] .mobile-command-icon.active {
  border-color: rgba(245, 247, 232, 0.42);
  background: color-mix(in srgb, var(--green) 86%, white);
  color: #082018;
}

:root[data-color-theme="iphone"] .mobile-command-icon:hover,
:root[data-color-theme="iphone"] .mobile-command-icon:focus-visible,
:root[data-color-theme="iphone"] .mobile-current-week-button:hover,
:root[data-color-theme="iphone"] .mobile-current-week-button:focus-visible,
:root[data-color-theme="iphone"] .mobile-command-signout:hover,
:root[data-color-theme="iphone"] .mobile-command-signout:focus-visible {
  border-color: rgba(245, 247, 232, 0.48);
  background: rgba(245, 247, 232, 0.24);
  color: white;
}

:root[data-color-theme="iphone"] .mobile-command-icon.active:hover,
:root[data-color-theme="iphone"] .mobile-command-icon.active:focus-visible {
  background: color-mix(in srgb, var(--green) 92%, white);
  color: #082018;
}

:root[data-color-theme="iphone"] .mobile-command-caption {
  color: rgba(245, 247, 232, 0.74);
}

:root[data-color-theme="iphone"] .run-calendar-month,
:root[data-color-theme="iphone"] .run-calendar-tooltip,
:root[data-color-theme="iphone"] .distance-projection-popover,
:root[data-color-theme="iphone"] .week-day-meta-tooltip {
  background: color-mix(in srgb, var(--surface) 96%, white);
  border-color: var(--border);
  color: var(--ink);
}

:root[data-color-theme="iphone"] .run-calendar-tooltip::after,
:root[data-color-theme="iphone"] .distance-projection-popover::after,
:root[data-color-theme="iphone"] .week-day-meta-tooltip::after {
  background: var(--floating-popover-notch-fill, color-mix(in srgb, var(--surface) 96%, white));
  border-color: var(--border);
}

:root[data-color-theme="iphone"] .run-calendar-weekdays,
:root[data-color-theme="iphone"] .run-calendar-tooltip span,
:root[data-color-theme="iphone"] .distance-projection-popover span,
:root[data-color-theme="iphone"] .week-day-meta-tooltip span,
:root[data-color-theme="iphone"] .distance-projection-scale {
  color: color-mix(in srgb, var(--muted) 86%, transparent);
}

:root[data-color-theme="iphone"] .info-icon {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--border));
  background: color-mix(in srgb, var(--settings-row-surface) 88%, var(--surface));
  color: var(--blue);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--iphone-mist) 54%, transparent),
    0 3px 8px color-mix(in srgb, var(--ink) 8%, transparent);
}

:root[data-color-theme="iphone"] .info-icon:hover,
:root[data-color-theme="iphone"] .info-icon:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 62%, var(--border));
  background: color-mix(in srgb, var(--blue-soft) 82%, var(--surface));
  color: color-mix(in srgb, var(--blue) 82%, var(--ink));
}

:root[data-color-theme="iphone"] .info-tooltip {
  border-color: color-mix(in srgb, var(--blue) 26%, var(--border));
  background: color-mix(in srgb, var(--surface) 96%, white);
  color: var(--ink);
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--ink) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--iphone-mist) 64%, transparent);
}

:root[data-color-theme="iphone"] .run-calendar-day {
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

:root[data-color-theme="iphone"] .run-calendar-day.is-outside-month {
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}

:root[data-color-theme="iphone"] .run-calendar-day.has-run::before {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 42%),
    hsl(149 46% var(--run-lightness, 52%));
  box-shadow:
    0 5px 12px color-mix(in srgb, var(--green) 20%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

:root[data-color-theme="iphone"] .run-calendar-day.has-run.no-pace::before {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 42%),
    color-mix(in srgb, var(--current-week) 64%, transparent);
}

:root[data-color-theme="iphone"] .run-calendar-day.has-run.complete-only::before {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.38) 50%),
    color-mix(in srgb, var(--surface) 90%, white);
  box-shadow:
    0 5px 12px color-mix(in srgb, var(--ink) 12%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--current-week) 54%, transparent),
    inset 0 0 0 5px rgba(255, 255, 255, 0.56);
}

:root[data-color-theme="iphone"] .distance-projection-chart {
  mix-blend-mode: multiply;
  opacity: 0.9;
}

:root[data-color-theme="iphone"][data-theme="dark"] .distance-projection-chart {
  mix-blend-mode: normal;
}

:root[data-color-theme="iphone"] .distance-projection-grid line {
  stroke: color-mix(in srgb, var(--muted) 20%, transparent);
}

:root[data-color-theme="iphone"] .distance-projection-grid text {
  fill: color-mix(in srgb, var(--muted) 64%, transparent);
}

:root[data-color-theme="iphone"] .distance-projection-area.past {
  fill: color-mix(in srgb, var(--current-week) 14%, transparent);
}

:root[data-color-theme="iphone"] .distance-projection-area.future {
  fill: color-mix(in srgb, var(--green) 16%, transparent);
}

:root[data-color-theme="iphone"] .distance-projection-line.past {
  stroke: color-mix(in srgb, var(--current-week) 68%, transparent);
}

:root[data-color-theme="iphone"] .distance-projection-line.future {
  stroke: color-mix(in srgb, var(--green) 78%, transparent);
}

:root[data-color-theme="iphone"] .distance-projection-dot {
  fill: var(--green);
}

:root[data-color-theme="iphone"] .distance-projection-selection-ring {
  fill: color-mix(in srgb, var(--blue) 12%, transparent);
  stroke: color-mix(in srgb, var(--blue) 82%, transparent);
}

:root[data-color-theme="iphone"] .distance-projection-guide,
:root[data-color-theme="iphone"] .distance-projection-point.selected .distance-projection-guide {
  stroke: color-mix(in srgb, var(--blue) 72%, transparent);
}

:root[data-color-theme="iphone"] .distance-projection-slider input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 36%, transparent), color-mix(in srgb, var(--blue) 28%, transparent));
}

:root[data-color-theme="iphone"] .distance-projection-slider input[type="range"]::-moz-range-track {
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 36%, transparent), color-mix(in srgb, var(--blue) 28%, transparent));
}

:root[data-color-theme="iphone"] .plan-row-form.active {
  border-color: color-mix(in srgb, var(--current-week-deep) 72%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--current-week) 22%, transparent), color-mix(in srgb, var(--green) 12%, transparent) 22%, color-mix(in srgb, var(--surface) 98%, white) 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, white), color-mix(in srgb, var(--surface-2) 58%, var(--surface)));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--current-week) 22%, transparent),
    0 20px 44px color-mix(in srgb, var(--ink) 14%, transparent);
}

:root[data-color-theme="iphone"] .plan-row-form.active .plan-row-main,
:root[data-color-theme="iphone"] .plan-row-form.locked,
:root[data-color-theme="iphone"] .plan-row-main,
:root[data-color-theme="iphone"] .plan-row-footer {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
}

:root[data-color-theme="iphone"] .row-stat-pill,
:root[data-color-theme="iphone"] .stat-factor,
:root[data-color-theme="iphone"] .stat-planned,
:root[data-color-theme="iphone"] .stat-average {
  background: color-mix(in srgb, var(--settings-row-surface) 86%, transparent);
  border-color: color-mix(in srgb, var(--border) 76%, transparent);
}

:root[data-color-theme="iphone"] .week-day-cell,
:root[data-color-theme="iphone"] .run-cell {
  --iphone-card-background:
    linear-gradient(135deg, transparent 0 calc(100% - 27px), color-mix(in srgb, var(--iphone-sage-deep) 22%, transparent) calc(100% - 26px) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--iphone-mist) 28%, transparent), color-mix(in srgb, var(--iphone-trail) 9%, transparent)),
    color-mix(in srgb, var(--iphone-khaki) 30%, var(--surface));
  --iphone-card-hover-background:
    linear-gradient(135deg, transparent 0 calc(100% - 27px), color-mix(in srgb, var(--green) 18%, transparent) calc(100% - 26px) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 56%, var(--surface)), color-mix(in srgb, var(--iphone-mist) 42%, var(--surface)));
  --iphone-card-border-color: color-mix(in srgb, var(--iphone-khaki) 52%, var(--border));
  --iphone-card-hover-border-color: color-mix(in srgb, var(--green) 42%, var(--border));
  background:
    var(--iphone-card-background);
  border-color: var(--iphone-card-border-color);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--iphone-mist) 58%, transparent),
    0 8px 18px color-mix(in srgb, var(--ink) 8%, transparent);
}

:root[data-color-theme="iphone"] button.week-day-cell {
  -webkit-tap-highlight-color: transparent;
  transition:
    filter 120ms ease,
    transform 120ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

:root[data-color-theme="iphone"] .week-day-slot:first-child .week-day-cell,
:root[data-color-theme="iphone"] .run-grid.single-run .week-day-slot:first-child .week-day-cell,
:root[data-color-theme="iphone"] .run-grid.single-run .week-day-slot:last-child .week-day-cell {
  border-left-color: color-mix(in srgb, var(--iphone-khaki) 52%, var(--border));
}

:root[data-color-theme="iphone"] .week-day-abbrev {
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
}

:root[data-color-theme="iphone"] .week-day-description,
:root[data-color-theme="iphone"] .week-day-pace.pace-faster {
  color: var(--green);
}

:root[data-color-theme="iphone"] .week-day-workout,
:root[data-color-theme="iphone"] .week-day-distance {
  color: var(--iphone-trail);
}

:root[data-color-theme="iphone"] .week-day-cell.empty-day {
  --iphone-card-background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--iphone-trail) 10%, transparent) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, color-mix(in srgb, var(--iphone-khaki) 24%, var(--surface)), color-mix(in srgb, var(--iphone-mist) 32%, var(--surface)));
  --iphone-card-hover-background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--iphone-trail) 12%, transparent) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, color-mix(in srgb, var(--iphone-khaki) 28%, var(--surface)), color-mix(in srgb, var(--iphone-mist) 38%, var(--surface)));
  --iphone-card-border-color: color-mix(in srgb, var(--iphone-khaki) 38%, var(--border));
  --iphone-card-hover-border-color: color-mix(in srgb, var(--iphone-khaki) 46%, var(--border));
  background:
    var(--iphone-card-background);
  border-color: var(--iphone-card-border-color);
}

:root[data-color-theme="iphone"] .week-day-cell.pace-complete {
  --iphone-card-background:
    linear-gradient(135deg, transparent 0 calc(100% - 30px), color-mix(in srgb, var(--blue) 72%, white) calc(100% - 29px) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--run-card-fill, var(--blue)) 92%, white), var(--run-card-fill, var(--blue)) 48%, color-mix(in srgb, var(--iphone-deep-run-blue) 82%, var(--run-card-fill, var(--blue))) 130%);
  --iphone-card-hover-background:
    linear-gradient(135deg, transparent 0 calc(100% - 30px), color-mix(in srgb, var(--blue) 78%, white) calc(100% - 29px) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--run-card-fill, var(--blue)) 96%, white), color-mix(in srgb, var(--run-card-fill, var(--blue)) 98%, var(--iphone-deep-run-blue)) 46%, color-mix(in srgb, var(--iphone-deep-run-blue) 88%, var(--run-card-fill, var(--blue))) 130%);
  --iphone-card-border-color: color-mix(in srgb, var(--run-card-fill, var(--blue)) 70%, var(--border));
  --iphone-card-hover-border-color: color-mix(in srgb, var(--run-card-fill, var(--blue)) 78%, var(--border));
  background:
    var(--iphone-card-background);
  border-color: var(--iphone-card-border-color);
  color: white;
  box-shadow:
    inset 0 1px 0 rgba(245, 247, 232, 0.2),
    inset 0 0 0 1px rgba(245, 247, 232, 0.1),
    0 12px 26px color-mix(in srgb, var(--run-card-fill, var(--blue)) 22%, transparent);
}

:root[data-color-theme="iphone"] .week-day-cell.pace-complete .week-day-abbrev,
:root[data-color-theme="iphone"] .week-day-cell.pace-complete .week-day-description,
:root[data-color-theme="iphone"] .week-day-cell.pace-complete .week-day-distance,
:root[data-color-theme="iphone"] .week-day-cell.pace-complete .week-day-distance small,
:root[data-color-theme="iphone"] .week-day-cell.pace-complete .week-day-workout,
:root[data-color-theme="iphone"] .week-day-cell.pace-complete .week-day-achieved-distance,
:root[data-color-theme="iphone"] .week-day-cell.pace-complete .week-day-pace {
  color: rgba(255, 255, 255, 0.9);
}

:root[data-color-theme="iphone"] .week-day-cell.pace-complete .week-day-distance {
  color: white;
}

:root[data-color-theme="iphone"] .week-day-cell.pace-complete .week-day-elevation-trace {
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.68;
  mix-blend-mode: soft-light;
}

:root[data-color-theme="iphone"] .week-day-cell.pace-complete .week-day-elevation-fill {
  opacity: 0.3;
}

:root[data-color-theme="iphone"] .week-day-cell.pace-complete::before {
  border-color: rgba(255, 255, 255, 0.84);
  background: var(--green);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--run-card-fill, var(--blue)) 22%, transparent),
    inset 0 0 0 3px var(--run-card-fill, var(--blue));
}

:root[data-color-theme="iphone"] .week-day-source-badge {
  border-color: rgba(245, 247, 232, 0.42);
  background: rgba(245, 247, 232, 0.82);
  color: var(--green);
}

:root[data-color-theme="iphone"] .plan-row-form.active .week-day-cell.needs-pace {
  --iphone-card-background:
    linear-gradient(135deg, transparent 0 calc(100% - 29px), color-mix(in srgb, var(--blue) 32%, transparent) calc(100% - 28px) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue-soft) 76%, var(--surface)), color-mix(in srgb, var(--iphone-mist) 56%, var(--surface)));
  --iphone-card-hover-background:
    linear-gradient(135deg, transparent 0 calc(100% - 29px), color-mix(in srgb, var(--blue) 38%, transparent) calc(100% - 28px) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue-soft) 86%, var(--surface)), color-mix(in srgb, var(--iphone-mist) 60%, var(--surface)));
  --iphone-card-border-color: color-mix(in srgb, var(--blue) 52%, var(--border));
  --iphone-card-hover-border-color: color-mix(in srgb, var(--blue) 64%, var(--border));
  background:
    var(--iphone-card-background);
  border-color: var(--iphone-card-border-color);
  color: var(--ink);
  box-shadow:
    inset 0 4px 0 var(--blue),
    inset 0 0 0 1px color-mix(in srgb, var(--iphone-mist) 42%, transparent),
    0 10px 22px color-mix(in srgb, var(--blue) 12%, transparent);
}

:root[data-color-theme="iphone"] .plan-row-form.active .week-day-cell.needs-pace::before {
  background: color-mix(in srgb, var(--iphone-mist) 90%, white);
  border-color: var(--blue);
}

:root[data-color-theme="iphone"] button.week-day-cell:hover,
:root[data-color-theme="iphone"] button.week-day-cell:focus-visible,
:root[data-color-theme="iphone"] .week-day-cell.has-run-meta:hover,
:root[data-color-theme="iphone"] .week-day-cell.has-run-meta:focus-visible,
:root[data-color-theme="iphone"] .week-day-cell.has-run-meta.is-run-meta-open {
  background:
    var(--iphone-card-hover-background);
  border-color: var(--iphone-card-hover-border-color);
}

:root[data-color-theme="iphone"] button.week-day-cell.pace-complete:hover,
:root[data-color-theme="iphone"] button.week-day-cell.pace-complete:focus-visible {
  background:
    var(--iphone-card-hover-background);
  border-color: var(--iphone-card-hover-border-color);
  box-shadow:
    inset 0 1px 0 rgba(245, 247, 232, 0.24),
    inset 0 0 0 1px rgba(245, 247, 232, 0.12),
    0 15px 30px color-mix(in srgb, var(--run-card-fill, var(--blue)) 28%, transparent);
}

:root[data-color-theme="iphone"] button.week-day-cell:active,
:root[data-color-theme="iphone"] .week-day-cell.has-run-meta:active {
  background:
    var(--iphone-card-background);
  border-color: var(--iphone-card-hover-border-color);
  filter: brightness(0.93) saturate(1.04);
  transform: scale(0.985);
}

@media (hover: none), (pointer: coarse) {
  :root[data-color-theme="iphone"] button.week-day-cell:hover,
  :root[data-color-theme="iphone"] button.week-day-cell.pace-complete:hover,
  :root[data-color-theme="iphone"] .plan-row-form.active button.week-day-cell.needs-pace:hover,
  :root[data-color-theme="iphone"] .week-day-cell.has-run-meta:hover {
    background:
      var(--iphone-card-background);
    border-color: var(--iphone-card-border-color);
  }

  :root[data-color-theme="iphone"] button.week-day-cell:active,
  :root[data-color-theme="iphone"] .week-day-cell.has-run-meta:active {
    background:
      var(--iphone-card-background);
    border-color: var(--iphone-card-hover-border-color);
    filter: brightness(0.93) saturate(1.04);
    transform: scale(0.985);
  }
}

:root[data-color-theme="iphone"] .run-cell.pace-complete,
:root[data-color-theme="iphone"] .run-cell.editing-pace {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue-soft) 72%, var(--surface)), color-mix(in srgb, var(--iphone-mist) 48%, var(--surface)));
}

:root[data-color-theme="iphone"] .plan-row-form.locked .week-day-cell.pace-not-entered {
  background:
    linear-gradient(135deg, transparent 0 calc(100% - 28px), color-mix(in srgb, var(--gold) 34%, transparent) calc(100% - 27px) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 18%, var(--surface)), color-mix(in srgb, var(--iphone-khaki) 24%, var(--surface)));
  border-color: color-mix(in srgb, var(--gold) 44%, var(--border));
}

:root[data-color-theme="iphone"] .plan-row-form.locked .week-day-cell.pace-not-entered::before {
  border-color: color-mix(in srgb, var(--gold) 72%, var(--ink));
  background: color-mix(in srgb, var(--iphone-mist) 82%, var(--surface));
}

:root[data-color-theme="iphone"] .plan-row-form.planned-row .week-day-cell,
:root[data-color-theme="iphone"] .plan-row-form.context-row .week-day-cell {
  --iphone-card-background:
    linear-gradient(135deg, transparent 0 calc(100% - 26px), color-mix(in srgb, var(--iphone-sage) 22%, transparent) calc(100% - 25px) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--iphone-khaki) 22%, var(--surface)), color-mix(in srgb, var(--iphone-mist) 28%, var(--surface)));
  --iphone-card-hover-background:
    linear-gradient(135deg, transparent 0 calc(100% - 26px), color-mix(in srgb, var(--iphone-sage) 28%, transparent) calc(100% - 25px) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--iphone-khaki) 28%, var(--surface)), color-mix(in srgb, var(--iphone-mist) 34%, var(--surface)));
  --iphone-card-border-color: color-mix(in srgb, var(--iphone-khaki) 38%, var(--border));
  --iphone-card-hover-border-color: color-mix(in srgb, var(--iphone-khaki) 46%, var(--border));
  background:
    var(--iphone-card-background);
  border-color: var(--iphone-card-border-color);
}

:root[data-color-theme="iphone"] .run-grid:not(.single-run) .mobile-focus-slot .week-day-cell {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--blue) 30%, transparent),
    0 0 0 2px color-mix(in srgb, var(--blue) 16%, transparent),
    0 12px 24px color-mix(in srgb, var(--ink) 10%, transparent);
}

:root[data-color-theme="iphone"] .plan-row-form.planned-row,
:root[data-color-theme="iphone"] .plan-row-form.context-row,
:root[data-color-theme="iphone"] .plan-row-form.future-row {
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
}

:root[data-color-theme="iphone"] .future-row-overlay {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--surface) 76%, transparent), color-mix(in srgb, var(--surface) 34%, transparent) 44%, color-mix(in srgb, var(--surface) 10%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 34%, transparent), color-mix(in srgb, var(--paper) 18%, transparent));
  color: var(--ink);
}

:root[data-color-theme="iphone"] .week-action-menu > .week-action-menu-toggle,
:root[data-color-theme="iphone"] .run-calendar-arrow,
:root[data-color-theme="iphone"] .dialog-close-btn,
:root[data-color-theme="iphone"] .settings-help-link,
:root[data-color-theme="iphone"] .readonly-link,
:root[data-color-theme="iphone"] .watch-code-card,
:root[data-color-theme="iphone"] .watch-device-row,
:root[data-color-theme="iphone"] .admin-row,
:root[data-color-theme="iphone"] .theme-choice,
:root[data-color-theme="iphone"] .theme-select-control,
:root[data-color-theme="iphone"] .input-action button,
:root[data-color-theme="iphone"] .toast {
  background: var(--settings-row-surface);
  border-color: var(--border);
  color: var(--ink);
}

:root[data-color-theme="iphone"] .week-action-menu > .week-action-menu-toggle:hover,
:root[data-color-theme="iphone"] .week-action-menu > .week-action-menu-toggle:focus-visible,
:root[data-color-theme="iphone"] .week-action-menu[open] > .week-action-menu-toggle,
:root[data-color-theme="iphone"] .dialog-close-btn:hover,
:root[data-color-theme="iphone"] .dialog-close-btn:focus-visible,
:root[data-color-theme="iphone"] .settings-help-link:hover,
:root[data-color-theme="iphone"] .settings-help-link:focus-visible,
:root[data-color-theme="iphone"] .readonly-link:hover,
:root[data-color-theme="iphone"] .readonly-link:focus-visible {
  background: color-mix(in srgb, var(--blue-soft) 64%, var(--surface));
  border-color: color-mix(in srgb, var(--blue) 44%, var(--border));
  color: var(--blue);
}

:root[data-color-theme="iphone"] .week-action-submenu[open] > .week-action-submenu-toggle,
:root[data-color-theme="iphone"] .week-action-menu-item:not(:disabled):hover,
:root[data-color-theme="iphone"] .week-action-menu-item:not(:disabled):focus-visible {
  background: color-mix(in srgb, var(--blue-soft) 54%, var(--surface));
}

:root[data-color-theme="iphone"] .week-action-menu-item.danger strong,
:root[data-color-theme="iphone"] .title-factor.meta-negative {
  color: var(--danger-ink);
}

:root[data-color-theme="iphone"] .danger-zone-panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--coral-soft) 72%, var(--surface)), color-mix(in srgb, var(--surface) 96%, transparent)),
    var(--surface);
  border-color: color-mix(in srgb, var(--coral) 30%, var(--border));
}

:root[data-color-theme="iphone"][data-theme="dark"] .run-calendar-month,
:root[data-color-theme="iphone"][data-theme="dark"] .run-calendar-tooltip,
:root[data-color-theme="iphone"][data-theme="dark"] .distance-projection-popover,
:root[data-color-theme="iphone"][data-theme="dark"] .week-day-meta-tooltip,
:root[data-color-theme="iphone"][data-theme="dark"] .run-calendar-tooltip::after,
:root[data-color-theme="iphone"][data-theme="dark"] .distance-projection-popover::after,
:root[data-color-theme="iphone"][data-theme="dark"] .week-day-meta-tooltip::after {
  background: var(--floating-popover-notch-fill, color-mix(in srgb, var(--surface) 92%, black));
}

:root[data-color-theme="iphone"] :is(
  .run-calendar-tooltip,
  .distance-projection-popover,
  .week-day-meta-tooltip
) {
  background: var(--settings-card-surface);
}

:root[data-color-theme="iphone"] :is(
  .run-calendar-tooltip::after,
  .distance-projection-popover::after,
  .week-day-meta-tooltip::after
) {
  background: var(--floating-popover-notch-fill, var(--settings-card-surface));
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .shell {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--palette-blue) 8%, transparent), transparent 260px),
    var(--paper);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .sticky-dashboard::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--palette-surface) 18%, transparent), color-mix(in srgb, var(--palette-paper) 72%, transparent) 58%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .app-hero {
  border-color: color-mix(in srgb, var(--palette-blue) 28%, var(--border));
  box-shadow:
    0 22px 54px color-mix(in srgb, var(--palette-hero-shade) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--surface) 24%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .app-hero::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--palette-hero-shade) 88%, transparent), color-mix(in srgb, var(--palette-blue) 46%, transparent) 58%, color-mix(in srgb, var(--palette-green) 18%, transparent)),
    linear-gradient(0deg, color-mix(in srgb, var(--palette-hero-shade) 36%, transparent), transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .app-hero .eyebrow {
  color: color-mix(in srgb, var(--palette-green) 46%, white);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .app-hero-corner-btn,
  .app-hero-badge,
  .hero-signout-pill,
  .app-hero-actions .user-pill,
  .app-hero-actions .status-pill,
  .app-hero-actions .btn,
  .hero-current-week-button
) {
  border-color: color-mix(in srgb, white 28%, transparent);
  background: color-mix(in srgb, white 14%, transparent);
  color: white;
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .topbar,
  .auth-panel,
  .settings-tabs,
  .er-dialog,
  .settings-panel,
  .share-panel,
  .admin-panel,
  .run-calendar-panel,
  .plan-row-form,
  .distance-projection-card,
  .summary-card,
  .week-action-menu-panel,
  .help-shell
) {
  background: var(--settings-panel-surface);
  border-color: var(--border);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .er-dialog-head,
  .settings-tabs,
  .auth-tabs
) {
  background: var(--dialog-head-surface);
  border-color: var(--border);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .field input,
  .field select,
  .field textarea,
  .theme-select
):focus {
  border-color: var(--blue);
  box-shadow: var(--focus-ring);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .theme-choice,
  .theme-select-control,
  .run-calendar-arrow,
  .row-stat-pill.editable
):is(:hover, :focus-visible),
:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .theme-select-control:focus-within,
:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .row-stat-pill.editable:focus-within {
  border-color: color-mix(in srgb, var(--green) 48%, var(--border));
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .theme-choice.active,
  .share-panel.active,
  .admin-row.active
) {
  background: var(--green-soft);
  border-color: color-mix(in srgb, var(--green) 68%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .watch-panel,
  .theme-panel
) {
  background: var(--settings-accent-card-surface);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .metric,
  .row-stat-pill,
  .stat-factor,
  .stat-planned,
  .stat-average,
  .week-action-menu > .week-action-menu-toggle,
  .run-calendar-arrow,
  .dialog-close-btn,
  .settings-help-link,
  .readonly-link,
  .watch-code-card,
  .watch-device-row,
  .admin-row,
  .theme-choice,
  .theme-select-control,
  .input-action button,
  .toast
) {
  background: var(--settings-row-surface);
  border-color: color-mix(in srgb, var(--border) 84%, transparent);
  color: var(--ink);
  box-shadow: var(--control-shadow);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .week-action-menu > .week-action-menu-toggle,
  .dialog-close-btn,
  .settings-help-link,
  .readonly-link
):is(:hover, :focus-visible),
:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .week-action-menu[open] > .week-action-menu-toggle {
  background: color-mix(in srgb, var(--blue-soft) 64%, var(--surface));
  border-color: color-mix(in srgb, var(--blue) 44%, var(--border));
  color: var(--blue);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .metrics-footer-glass {
  background: var(--metrics-footer-surface);
  border-color: var(--metrics-footer-border);
  box-shadow: var(--metrics-footer-shadow);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .metrics-footer .metric {
  background: var(--metrics-card-surface);
  border-color: var(--metrics-card-border);
  box-shadow: var(--metrics-card-shadow);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .mobile-command-glass {
  border-color: color-mix(in srgb, white 24%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--current-week-deep) 94%, transparent), color-mix(in srgb, var(--blue) 62%, var(--current-week-deep))),
    var(--current-week-deep);
  color: white;
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--palette-hero-shade) 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 14%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .mobile-command-icon,
  .mobile-current-week-button,
  .mobile-command-pill,
  .mobile-command-signout,
  .mobile-command-readonly
) {
  border-color: color-mix(in srgb, white 22%, transparent);
  background: color-mix(in srgb, white 13%, transparent);
  color: white;
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .mobile-command-icon.active {
  border-color: color-mix(in srgb, white 42%, transparent);
  background: color-mix(in srgb, var(--green) 86%, white);
  color: color-mix(in srgb, var(--palette-current-deep) 88%, black);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .run-calendar-month,
  .run-calendar-tooltip,
  .distance-projection-popover,
  .week-day-meta-tooltip,
  .info-tooltip
) {
  background: var(--settings-card-surface);
  border-color: var(--border);
  color: var(--ink);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .run-calendar-tooltip::after,
  .distance-projection-popover::after,
  .week-day-meta-tooltip::after
) {
  background: var(--floating-popover-notch-fill, var(--settings-card-surface));
  border-color: var(--border);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .info-icon {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--border));
  background: var(--settings-row-surface);
  color: var(--blue);
  box-shadow: var(--control-shadow);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .run-calendar-day {
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .run-calendar-day.has-run::before {
  background:
    radial-gradient(circle at 34% 28%, color-mix(in srgb, white 34%, transparent), transparent 42%),
    hsl(149 46% var(--run-lightness, 52%));
  box-shadow:
    0 5px 12px color-mix(in srgb, var(--green) 20%, transparent),
    inset 0 0 0 1px color-mix(in srgb, white 22%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .run-calendar-day.has-run.no-pace::before {
  background:
    radial-gradient(circle at 34% 28%, color-mix(in srgb, white 34%, transparent), transparent 42%),
    color-mix(in srgb, var(--current-week) 64%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .run-calendar-day.has-run.complete-only::before {
  background:
    radial-gradient(circle at 34% 28%, color-mix(in srgb, white 44%, transparent), transparent 44%),
    var(--green);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-chart {
  opacity: 0.92;
  mix-blend-mode: normal;
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-grid line {
  stroke: color-mix(in srgb, var(--muted) 18%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-grid text {
  fill: color-mix(in srgb, var(--muted) 66%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-area.past {
  fill: color-mix(in srgb, var(--current-week) 14%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-area.future {
  fill: color-mix(in srgb, var(--green) 13%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-line.past {
  stroke: color-mix(in srgb, var(--current-week) 68%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-line.future {
  stroke: color-mix(in srgb, var(--green) 78%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-dot {
  fill: var(--green);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-selection-ring {
  fill: color-mix(in srgb, var(--blue) 14%, transparent);
  stroke: color-mix(in srgb, var(--blue) 82%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-guide,
:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-point.selected .distance-projection-guide {
  stroke: color-mix(in srgb, var(--blue) 72%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-slider input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 36%, transparent), color-mix(in srgb, var(--blue) 28%, transparent));
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .distance-projection-slider input[type="range"]::-moz-range-track {
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 36%, transparent), color-mix(in srgb, var(--blue) 28%, transparent));
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .plan-row-form.active {
  border-color: color-mix(in srgb, var(--current-week-deep) 70%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--current-week) 20%, transparent), color-mix(in srgb, var(--green) 10%, transparent) 24%, color-mix(in srgb, var(--surface) 96%, transparent) 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-2) 58%, var(--surface)));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--current-week) 20%, transparent),
    0 20px 44px color-mix(in srgb, var(--ink) 14%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .plan-row-form.active .plan-row-main,
  .plan-row-form.locked,
  .plan-row-main,
  .plan-row-footer
) {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .week-day-cell,
  .run-cell
) {
  --palette-card-background:
    linear-gradient(135deg, transparent 0 calc(100% - 27px), color-mix(in srgb, var(--current-week) 18%, transparent) calc(100% - 26px) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 46%, transparent));
  --palette-card-hover-background:
    linear-gradient(135deg, transparent 0 calc(100% - 27px), color-mix(in srgb, var(--green) 20%, transparent) calc(100% - 26px) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--green-soft) 76%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent));
  --palette-card-border-color: color-mix(in srgb, var(--border) 76%, var(--current-week) 20%);
  --palette-card-hover-border-color: color-mix(in srgb, var(--green) 44%, var(--border));
  background: var(--palette-card-background);
  border-color: var(--palette-card-border-color);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--surface) 58%, transparent),
    0 8px 18px color-mix(in srgb, var(--ink) 8%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) button.week-day-cell {
  -webkit-tap-highlight-color: transparent;
  transition:
    filter 120ms ease,
    transform 120ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .week-day-cell.empty-day {
  --palette-card-background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 10%, transparent) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 48%, var(--surface)), color-mix(in srgb, var(--surface) 86%, transparent));
  --palette-card-hover-background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 12%, transparent) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 60%, var(--surface)), color-mix(in srgb, var(--surface) 94%, transparent));
  --palette-card-border-color: color-mix(in srgb, var(--border) 64%, transparent);
  --palette-card-hover-border-color: color-mix(in srgb, var(--border) 76%, var(--green) 18%);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .week-day-cell.pace-complete {
  --palette-card-background:
    linear-gradient(135deg, transparent 0 calc(100% - 30px), color-mix(in srgb, var(--blue) 72%, white) calc(100% - 29px) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--run-card-fill, var(--blue)) 90%, white), var(--run-card-fill, var(--blue)) 48%, color-mix(in srgb, var(--current-week-deep) 84%, var(--run-card-fill, var(--blue))) 130%);
  --palette-card-hover-background:
    linear-gradient(135deg, transparent 0 calc(100% - 30px), color-mix(in srgb, var(--blue) 78%, white) calc(100% - 29px) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--run-card-fill, var(--blue)) 96%, white), color-mix(in srgb, var(--run-card-fill, var(--blue)) 98%, var(--current-week-deep)) 46%, color-mix(in srgb, var(--current-week-deep) 88%, var(--run-card-fill, var(--blue))) 130%);
  --palette-card-border-color: color-mix(in srgb, var(--run-card-fill, var(--blue)) 68%, var(--border));
  --palette-card-hover-border-color: color-mix(in srgb, var(--run-card-fill, var(--blue)) 78%, var(--border));
  color: white;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 24%, transparent),
    inset 0 0 0 1px color-mix(in srgb, white 12%, transparent),
    0 12px 26px color-mix(in srgb, var(--run-card-fill, var(--blue)) 22%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .week-day-cell.pace-complete :is(
  .week-day-abbrev,
  .week-day-description,
  .week-day-distance,
  .week-day-distance small,
  .week-day-workout,
  .week-day-achieved-distance,
  .week-day-pace
) {
  color: rgba(255, 255, 255, 0.9);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .week-day-cell.pace-complete .week-day-distance {
  color: white;
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .week-day-cell.pace-complete .week-day-elevation-trace {
  color: rgba(255, 255, 255, 0.46);
  opacity: 0.66;
  mix-blend-mode: soft-light;
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .week-day-cell.pace-complete .week-day-elevation-fill {
  opacity: 0.28;
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .week-day-cell.pace-complete::before {
  border-color: rgba(255, 255, 255, 0.84);
  background: var(--green);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--run-card-fill, var(--blue)) 22%, transparent),
    inset 0 0 0 3px var(--run-card-fill, var(--blue));
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .plan-row-form.active .week-day-cell.needs-pace {
  --palette-card-background:
    linear-gradient(135deg, transparent 0 calc(100% - 29px), color-mix(in srgb, var(--blue) 30%, transparent) calc(100% - 28px) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue-soft) 80%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent));
  --palette-card-hover-background:
    linear-gradient(135deg, transparent 0 calc(100% - 29px), color-mix(in srgb, var(--blue) 38%, transparent) calc(100% - 28px) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue-soft) 88%, var(--surface)), color-mix(in srgb, var(--surface) 94%, transparent));
  --palette-card-border-color: color-mix(in srgb, var(--blue) 54%, var(--border));
  --palette-card-hover-border-color: color-mix(in srgb, var(--blue) 64%, var(--border));
  color: var(--ink);
  box-shadow:
    inset 0 4px 0 var(--blue),
    inset 0 0 0 1px color-mix(in srgb, var(--surface) 42%, transparent),
    0 10px 22px color-mix(in srgb, var(--blue) 12%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  button.week-day-cell,
  .week-day-cell.has-run-meta
):is(:hover, :focus-visible),
:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .week-day-cell.has-run-meta.is-run-meta-open {
  background: var(--palette-card-hover-background);
  border-color: var(--palette-card-hover-border-color);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--green) 12%, transparent),
    0 12px 24px color-mix(in srgb, var(--ink) 12%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  button.week-day-cell,
  .week-day-cell.has-run-meta
):active {
  background: var(--palette-card-background);
  border-color: var(--palette-card-hover-border-color);
  filter: brightness(0.94) saturate(1.04);
  transform: scale(0.985);
}

@media (hover: none), (pointer: coarse) {
  :root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
    button.week-day-cell:hover,
    button.week-day-cell.pace-complete:hover,
    .plan-row-form.active button.week-day-cell.needs-pace:hover,
    .week-day-cell.has-run-meta:hover
  ) {
    background: var(--palette-card-background);
    border-color: var(--palette-card-border-color);
  }

  :root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
    button.week-day-cell,
    .week-day-cell.has-run-meta
  ):active {
    background: var(--palette-card-background);
    border-color: var(--palette-card-hover-border-color);
    filter: brightness(0.94) saturate(1.04);
    transform: scale(0.985);
  }
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .run-cell.pace-complete,
  .run-cell.editing-pace
) {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue-soft) 72%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent));
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .plan-row-form.locked .week-day-cell.pace-not-entered {
  background:
    linear-gradient(135deg, transparent 0 calc(100% - 28px), color-mix(in srgb, var(--gold) 34%, transparent) calc(100% - 27px) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 18%, var(--surface)), color-mix(in srgb, var(--surface) 84%, transparent));
  border-color: color-mix(in srgb, var(--gold) 44%, var(--border));
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) :is(
  .plan-row-form.planned-row,
  .plan-row-form.context-row,
  .plan-row-form.future-row
) {
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
}

:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .future-row-overlay {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--surface) 76%, transparent), color-mix(in srgb, var(--surface) 34%, transparent) 44%, color-mix(in srgb, var(--surface) 10%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 34%, transparent), color-mix(in srgb, var(--paper) 18%, transparent));
  color: var(--ink);
}

:root[data-theme="dark"] .run-calendar-day.has-run.planned-run,
:root[data-color-theme="iphone"][data-theme="dark"] .run-calendar-day.has-run.planned-run,
:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .run-calendar-day.has-run.planned-run {
  color: #f8fbff;
  text-shadow: 0 1px 2px rgba(8, 19, 33, 0.42);
}

:root[data-theme="dark"] .run-calendar-day.has-run.planned-run::before,
:root[data-color-theme="iphone"][data-theme="dark"] .run-calendar-day.has-run.planned-run::before,
:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .run-calendar-day.has-run.planned-run::before {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 42%),
    hsl(207 76% 50%);
  box-shadow:
    0 5px 13px rgba(17, 58, 101, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

:root[data-theme="dark"] .run-calendar-day.has-run.previous-run,
:root[data-color-theme="iphone"][data-theme="dark"] .run-calendar-day.has-run.previous-run {
  color: #20170a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
}

:root[data-theme="dark"] .run-calendar-day.has-run.previous-run::before,
:root[data-color-theme="iphone"][data-theme="dark"] .run-calendar-day.has-run.previous-run::before,
:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .run-calendar-day.has-run.previous-run::before {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 44%),
    hsl(42 78% 62%);
  box-shadow:
    0 5px 13px rgba(88, 62, 17, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.20);
}

:root[data-theme="dark"] .run-calendar-day.has-run.is-outside-month,
:root[data-color-theme="iphone"] .run-calendar-day.has-run.is-outside-month,
:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .run-calendar-day.has-run.is-outside-month {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  text-shadow: none;
}

:root[data-theme="dark"] .run-calendar-day.has-run.is-outside-month::before,
:root[data-color-theme="iphone"] .run-calendar-day.has-run.is-outside-month::before,
:root[data-color-theme]:not([data-color-theme="default"]):not([data-color-theme="iphone"]) .run-calendar-day.has-run.is-outside-month::before {
  background:
    radial-gradient(circle at 34% 28%, color-mix(in srgb, white 44%, transparent), transparent 44%),
    color-mix(in srgb, var(--muted) 34%, transparent);
  box-shadow:
    0 4px 10px color-mix(in srgb, var(--ink) 8%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--muted) 22%, transparent);
}