:root,
html[data-theme="day"] {
  --bg-soft: #edf2fb;
  --bg-top: #fffaf3;
  --bg-bottom: #eaf1fc;
  --scene-a: rgba(244, 196, 78, 0.38);
  --scene-b: rgba(151, 177, 244, 0.3);
  --scene-c: rgba(255, 202, 156, 0.18);
  --scene-d: rgba(255, 255, 255, 0.74);
  --panel: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 250, 255, 0.84) 100%);
  --panel-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.92) 100%);
  --surface-solid: rgba(255, 255, 255, 0.98);
  --surface-soft: rgba(248, 249, 255, 0.9);
  --panel-border: rgba(255, 255, 255, 0.74);
  --line: #d8deeb;
  --line-strong: #b9c4dc;
  --text: #25314a;
  --muted: #697793;
  --primary: #869ee4;
  --primary-deep: #5d74b6;
  --accent: #dfbf67;
  --accent-soft: rgba(250, 236, 190, 0.92);
  --accent-text: #80692b;
  --warning: #c98572;
  --shadow: 0 18px 48px rgba(74, 92, 135, 0.12);
  --shadow-soft: 0 12px 32px rgba(74, 92, 135, 0.1);
  --focus-ring: rgba(121, 144, 208, 0.16);
  --overlay: rgba(39, 49, 68, 0.42);
  --brand-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(248, 249, 255, 0.76) 100%);
  --brand-surface-solid: #ffffff;
  --brand-border: rgba(255, 255, 255, 0.78);
  --brand-hover-surface: rgba(244, 221, 160, 0.24);
  --brand-glow: rgba(238, 199, 88, 0.3);
  --surface-ornament: rgba(255, 255, 255, 0.52);
  --surface-sheen: rgba(255, 241, 204, 0.3);
  --field-surface: rgba(255, 255, 255, 0.82);
  --field-hover-surface: rgba(255, 255, 255, 0.96);
  --ghost-hover-surface: rgba(244, 221, 160, 0.18);
  --crest-core: radial-gradient(circle at 35% 35%, #fff8dc 0 24%, #f4db85 26%, #e1bc5e 62%, #c99c4c 100%);
  --crest-cutout: transparent;
  --theme-switch-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(246, 248, 255, 0.74) 100%);
  --theme-switch-border: rgba(255, 255, 255, 0.84);
  --theme-switch-text: #5a6fa6;
  --theme-switch-active-bg: linear-gradient(135deg, #96a8e4, #677db8);
  --theme-switch-active-shadow: 0 10px 20px rgba(89, 111, 175, 0.18);
  --button-text: #ffffff;
  --preview-frame-bg: #ffffff;
  --hero-title: #293654;
  --hero-glow: rgba(255, 232, 187, 0.34);
  --hero-rule: linear-gradient(90deg, rgba(223, 191, 103, 0.95) 0%, rgba(145, 169, 238, 0.58) 55%, transparent 100%);
  --hero-card-sheen: rgba(255, 255, 255, 0.46);
  --table-head-bg: linear-gradient(180deg, rgba(243, 226, 176, 0.34) 0%, rgba(141, 162, 223, 0.1) 100%);
  --table-hover-bg: rgba(132, 155, 223, 0.12);
  --table-accent: rgba(121, 144, 208, 0.72);
  --pending-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 250, 255, 0.92) 100%);
  --pending-card-border: rgba(255, 255, 255, 0.82);
  --pending-card-text: #25314a;
  --pending-card-muted: #6d7892;
  --pending-bar: linear-gradient(90deg, rgba(223, 191, 103, 0.95) 0%, rgba(145, 169, 238, 0.86) 48%, rgba(223, 191, 103, 0.95) 100%);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 999px;
  --safe-top: max(0px, env(safe-area-inset-top));
  --safe-right: max(0px, env(safe-area-inset-right));
  --safe-bottom: max(0px, env(safe-area-inset-bottom));
  --safe-left: max(0px, env(safe-area-inset-left));
}

html[data-theme="day"] {
  color-scheme: light;
}

html[data-theme="night"] {
  color-scheme: dark;
  --bg-soft: rgba(20, 29, 56, 0.9);
  --bg-top: #101834;
  --bg-bottom: #0a1021;
  --scene-a: rgba(131, 145, 227, 0.22);
  --scene-b: rgba(66, 92, 173, 0.28);
  --scene-c: rgba(219, 228, 255, 0.08);
  --scene-d: rgba(185, 202, 255, 0.05);
  --panel: linear-gradient(180deg, rgba(18, 27, 52, 0.9) 0%, rgba(12, 19, 38, 0.84) 100%);
  --panel-strong: linear-gradient(180deg, rgba(15, 23, 45, 0.98) 0%, rgba(10, 17, 34, 0.92) 100%);
  --surface-solid: rgba(18, 27, 52, 0.96);
  --surface-soft: rgba(23, 32, 59, 0.9);
  --panel-border: rgba(160, 176, 227, 0.14);
  --line: rgba(154, 172, 228, 0.2);
  --line-strong: rgba(170, 188, 240, 0.34);
  --text: #eef2ff;
  --muted: #a5b3d6;
  --primary: #91a8ff;
  --primary-deep: #7087da;
  --accent: #dbe2ff;
  --accent-soft: rgba(94, 112, 166, 0.28);
  --accent-text: #dce3ff;
  --warning: #efb6a0;
  --shadow: 0 26px 64px rgba(2, 7, 20, 0.42);
  --shadow-soft: 0 16px 36px rgba(2, 7, 20, 0.34);
  --focus-ring: rgba(145, 168, 255, 0.2);
  --overlay: rgba(4, 8, 18, 0.62);
  --brand-surface: linear-gradient(180deg, rgba(14, 21, 43, 0.88) 0%, rgba(9, 15, 31, 0.78) 100%);
  --brand-surface-solid: #0f1834;
  --brand-border: rgba(152, 170, 221, 0.18);
  --brand-hover-surface: rgba(255, 255, 255, 0.18);
  --brand-glow: rgba(152, 169, 255, 0.22);
  --surface-ornament: rgba(219, 228, 255, 0.09);
  --surface-sheen: rgba(125, 148, 235, 0.15);
  --field-surface: rgba(16, 24, 45, 0.92);
  --field-hover-surface: rgba(22, 31, 57, 0.98);
  --ghost-hover-surface: rgba(145, 168, 255, 0.12);
  --crest-core: radial-gradient(circle at 38% 35%, #f7f9ff 0 26%, #ccd6ff 30%, #9eadf2 65%, #6b78b2 100%);
  --crest-cutout: var(--brand-surface-solid);
  --theme-switch-bg: linear-gradient(180deg, rgba(15, 22, 44, 0.9) 0%, rgba(10, 16, 32, 0.78) 100%);
  --theme-switch-border: rgba(152, 170, 221, 0.18);
  --theme-switch-text: #cfd9ff;
  --theme-switch-active-bg: linear-gradient(135deg, #8da2ff, #6277cf);
  --theme-switch-active-shadow: 0 12px 26px rgba(9, 14, 32, 0.34);
  --button-text: #f6f8ff;
  --preview-frame-bg: #0f1834;
  --hero-title: #f2f5ff;
  --hero-glow: rgba(141, 162, 255, 0.14);
  --hero-rule: linear-gradient(90deg, rgba(214, 225, 255, 0.84) 0%, rgba(126, 149, 234, 0.64) 55%, transparent 100%);
  --hero-card-sheen: rgba(219, 228, 255, 0.06);
  --table-head-bg: linear-gradient(180deg, rgba(121, 141, 207, 0.18) 0%, rgba(53, 74, 136, 0.1) 100%);
  --table-hover-bg: rgba(121, 141, 207, 0.12);
  --table-accent: rgba(145, 168, 255, 0.72);
  --pending-card-bg: linear-gradient(180deg, rgba(14, 21, 43, 0.96) 0%, rgba(10, 16, 32, 0.92) 100%);
  --pending-card-border: rgba(152, 170, 221, 0.22);
  --pending-card-text: #eef2ff;
  --pending-card-muted: #afbcde;
  --pending-bar: linear-gradient(90deg, rgba(219, 228, 255, 0.9) 0%, rgba(145, 168, 255, 0.92) 48%, rgba(219, 228, 255, 0.9) 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at top left, var(--scene-a), transparent 24rem),
    radial-gradient(circle at top right, var(--scene-b), transparent 26rem),
    radial-gradient(circle at 52% 14%, var(--scene-c), transparent 24rem),
    radial-gradient(circle at 72% 4%, var(--scene-d), transparent 30rem),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  color: var(--text);
  font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
}

a {
  color: var(--primary-deep);
  text-decoration: none;
}

a:hover {
  color: var(--primary);
}

code,
pre {
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
}