:root {
     --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
     --font-size: 16px;
     --font-size-base: 16px;
     --font-size-sm: 14px;
     --font-size-lg: 20px;

     --sp-1: 0.25rem;
     --sp-2: 0.5rem;
     --sp-3: 0.75rem;
     --sp-4: 1rem;
     --sp-5: 1.25rem;
     --sp-6: 1.5rem;
     --space-1: 6px;
     --space-2: 8px;
     --space-3: 10px;
     --space-4: 12px;
     --space-5: 14px;
     --space-6: 16px;
     --space-7: 18px;
     --space-8: 20px;
     --space-9: 24px;
     --spacer: 1rem;
     --spacer-sm: 0.5rem;
     --spacer-lg: 2rem;

     --radius: 12px;
     --radius-sm: 8px;
     --border-radius: 4px;
     --border-radius-sm: 2px;
     --border-radius-lg: 8px;

     --container: 1100px;
     --topbar-h: 56px;
     --footer-z: 3000;
     --footer-bar-h: 48px;
     --footer-space: var(--footer-bar-h);
     --sidebar-w: 420px;
     --grid-h: 26px;
     --gutter-w: 260px;
     --h: 72vh;
     --lane-gap: 10px;
     --lane-h: 28px;
     --pad: 12px;

     --dropdown-min-w: 220px;
     --dropdown-max-w: clamp(240px, 60vw, 420px);
     --dropdown-max-h: min(68vh, 520px);
     --menu-font: 14px;
     --menu-max-h: calc(100dvh - var(--topbar-h));
     --menu-max-w: clamp(240px, 60vw, 420px);

     --easing: cubic-bezier(0.4, 0, 0.2, 1);
     --timing: 220ms var(--easing);
     --transition: all 0.25s var(--easing);

     --white: #ffffff;
     --black: #000000;

     --bg: #f7f7f9;
     --paper: #ffffff;
     --card: #ffffff;
     --card-bg: color-mix(in srgb, var(--card) 95%, transparent);
     --surface: var(--card);
     --surface-0: #ffffff;
     --surface-1: #f8f8fb;
     --surface-2: #f0f2f5;
     --surface-elevated: #ffffff;
     --input: #ffffff;
     --input-bg: var(--input);

     --text: #1f2937;
     --text-color: var(--text);
     --text-1: #2e2e2e;
     --text-2: #5f6672;
     --text-muted: #6b7280;
     --text-inverse: #ffffff;
     --ink: var(--text);
     --muted: #6b7280;

     --primary: #c00000;
     --primary-color: var(--primary);
     --accent: #1c78cf;
     --accent-color: var(--accent);
     --accent-hover: color-mix(in srgb, var(--accent) 85%, var(--black) 15%);
     --accent-h: 207;
     --accent-s: 76%;
     --accent-l: 46%;
     --brand-h: var(--accent-h);
     --brand-s: var(--accent-s);
     --brand-l: var(--accent-l);
     --border: #d4d9e2;
     --bg-dropdown: color-mix(in srgb, var(--black) 5%, transparent);

     --success: #22c55e;
     --ok: var(--success);
     --warning: #f59e0b;
     --warn: var(--warning);
     --danger: #ef4444;
     --info: #3b82f6;

     --btn-text: #ffffff;
     --btn-primary-text: #ffffff;
     --btn-secondary-text: #ffffff;
     --btn-bg-main: color-mix(in srgb, var(--accent) 92%, var(--black) 8%);
     --btn-bg-main-hover: color-mix(in srgb, var(--btn-bg-main) 88%, var(--white) 12%);
     --btn-bg-primary: color-mix(in srgb, var(--accent) 82%, var(--black) 18%);
     --btn-bg-primary-hover: color-mix(in srgb, var(--btn-bg-primary) 88%, var(--white) 12%);
     --btn-bg-secondary: #4b5563;
     --btn-bg-secondary-hover: color-mix(in srgb, var(--btn-bg-secondary) 88%, var(--white) 12%);
     --btn-bg-success: var(--success);
     --btn-bg-success-hover: color-mix(in srgb, var(--btn-bg-success) 88%, var(--white) 12%);
     --btn-bg-warning: var(--warning);
     --btn-bg-warning-hover: color-mix(in srgb, var(--btn-bg-warning) 88%, var(--white) 12%);
     --btn-bg-danger: var(--danger);
     --btn-bg-danger-hover: color-mix(in srgb, var(--btn-bg-danger) 88%, var(--white) 12%);
     --btn-bg-info: var(--info);
     --btn-bg-info-hover: color-mix(in srgb, var(--btn-bg-info) 88%, var(--white) 12%);

     --checkbox-checked-color: var(--accent);
     --checkbox-border-color: color-mix(in srgb, var(--accent) 65%, var(--black) 35%);

     --shadow-s: 0 2px 8px color-mix(in srgb, var(--black) 10%, transparent);
     --shadow-m: 0 12px 28px color-mix(in srgb, var(--black) 16%, transparent);
     --shadow: 0 16px 32px color-mix(in srgb, var(--black) 18%, transparent);
     --shadow-1: 0 6px 14px color-mix(in srgb, var(--black) 10%, transparent);
     --shadow-2: 0 10px 24px color-mix(in srgb, var(--black) 14%, transparent);
     --shadow-hover: 0 12px 32px color-mix(in srgb, var(--black) 18%, transparent);
     --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

     --footer-bg: var(--card);
     --footer-ink: var(--text);
     --footer-muted: var(--muted);
     --footer-border: var(--border);
     --footer-radius: 12px;
     --footer-shadow: 0 12px 28px color-mix(in srgb, var(--black) 10%, transparent);

     --gradient-start: color-mix(in srgb, var(--accent) 90%, var(--white) 10%);
     --gradient-end: color-mix(in srgb, var(--primary) 75%, var(--accent) 25%);

     --popup-z-backdrop: 9998;
     --popup-z: 9999;
     --popup-backdrop-bg: color-mix(in srgb, var(--bg) 34%, var(--black) 46%);
     --popup-backdrop-accent: color-mix(in srgb, var(--surface-2) 26%, transparent);
     --popup-backdrop-blur: 3px;
     --popup-bg: var(--surface-elevated);
     --popup-card-bg: linear-gradient(180deg, var(--surface-elevated), var(--surface-0));
     --popup-text: var(--text);
     --popup-title: var(--text-1);
     --popup-muted: var(--muted);
     --popup-border: var(--border);
     --popup-soft-bg: color-mix(in srgb, var(--surface-1) 72%, var(--surface-elevated) 28%);
     --popup-radius: 18px;
     --popup-radius-lg: 22px;
     --popup-shadow: 0 24px 80px color-mix(in srgb, var(--black) 24%, transparent);
     --popup-max-width: 960px;
     --popup-settings-max-width: 900px;
     --popup-side-gap: 16px;
     --popup-bottom-gap: 16px;
     --popup-padding: 22px;
     --popup-btn-bg-primary: var(--btn-bg-primary);
     --popup-btn-text-primary: var(--btn-primary-text);
     --popup-btn-bg-secondary: var(--surface-elevated);
     --popup-btn-text-secondary: var(--text);
     --popup-btn-bg-ghost: var(--surface-1);
     --popup-switch-off: color-mix(in srgb, var(--muted) 24%, var(--surface-2) 76%);
     --popup-switch-on: var(--accent);
     --calendarcalendarModal-bg: color-mix(in srgb, var(--black) 55%, transparent);
     --pdf-backdrop: color-mix(in srgb, var(--black) 72%, transparent);
     --pdf-chrome-h: 56px;
     --pdf-gap: 24px;
     --pdf-pad: 20px;
     --pdf-radius: 12px;
     --pdf-shadow: 0 20px 50px color-mix(in srgb, var(--black) 35%, transparent);
     --svg-w: 1200px;
     --svg-h: 600px;
     --value: 40%;

     --timeline-bg: var(--bg);
     --timeline-card: var(--card);
     --timeline-highlight: color-mix(in srgb, var(--accent) 16%, transparent);
     --timeline-line: color-mix(in srgb, var(--black) 10%, transparent);
     --timeline-dot-border: var(--accent);

     --tip-bg: var(--card);
     --tip-border: var(--border);
     --tip-ink: var(--text);
     --tip-muted: var(--muted);

     --status-ok-bg: #ecfdf5;
     --status-ok-border: #a7f3d0;
     --status-ok-text: #065f46;
     --status-warn-bg: #fff3cd;
     --status-warn-border: #fde68a;
     --status-warn-text: #856404;
     --status-err-bg: #fef2f2;
     --status-err-border: #fecaca;
     --status-err-text: #991b1b;

     --danger-soft-bg: #fef2f2;
     --danger-soft-border: #fecaca;
     --danger-soft-text: #7a1212;
     --warning-soft-bg: #fffbeb;
     --warning-soft-border: #fde68a;
     --warning-soft-text: #7a4c00;
     --success-soft-bg: #ecfdf5;
     --success-soft-border: #a7f3d0;
     --success-soft-text: #176b3a;

     --code-bg: #0f172a;
     --code-text: #e2e8f0;
     --code-border: #1e293b;
     --code-button-bg: #111827;
     --code-button-border: #334155;
     --code-button-text: #e5e7eb;
     --shimmer: #f6f7f8;
     --shine: #ededed;

     --tooltip-z: 50;
}

[data-theme="Day"] {
     --bg: #f7f3ee;
     --paper: #fdfaf7;
     --card: #fdfaf7;
     --surface-0: #fdfaf7;
     --surface-1: #f7f3ee;
     --surface-2: #f2ede6;
     --surface-elevated: #fdfaf7;
     --input: #fdfaf7;

     --text: #1a1410;
     --text-1: #1a1410;
     --text-2: #4a3e34;
     --text-muted: #9a8878;
     --muted: #9a8878;
     --ink: #1a1410;
     --text-inverse: #ffffff;

     --accent: #b36045;
     --accent-color: var(--accent);
     --accent-hover: color-mix(in srgb, var(--accent) 88%, var(--black) 12%);
     --primary: #b55c3e;
     --primary-color: var(--primary);
     --border: #e8ddd2;
     --bg-dropdown: #f5eae4;

     --success: #22c55e;
     --warning: #f59e0b;
     --danger: #ef4444;
     --info: #3b82f6;

     --btn-bg-main: #b36045;
     --btn-bg-main-hover: color-mix(in srgb, var(--btn-bg-main) 88%, var(--white) 12%);
     --btn-bg-primary: color-mix(in srgb, var(--accent) 82%, var(--black) 18%);
     --btn-bg-primary-hover: color-mix(in srgb, var(--btn-bg-primary) 88%, var(--white) 12%);
     --btn-bg-secondary: #4a3e34;
     --btn-bg-secondary-hover: color-mix(in srgb, var(--btn-bg-secondary) 88%, var(--white) 12%);
     --btn-bg-success: var(--success);
     --btn-bg-warning: var(--warning);
     --btn-bg-danger: var(--danger);
     --btn-bg-info: var(--info);

     --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
     --shadow-s: 0 1px 3px rgba(100, 60, 30, 0.08), 0 0 0 1px rgba(100, 60, 30, 0.04);
     --shadow-m: 0 4px 16px rgba(100, 60, 30, 0.1), 0 1px 4px rgba(100, 60, 30, 0.06);
     --shadow: 0 12px 40px rgba(100, 60, 30, 0.12), 0 2px 8px rgba(100, 60, 30, 0.06);
     --shadow-1: 0 1px 3px rgba(100, 60, 30, 0.08), 0 0 0 1px rgba(100, 60, 30, 0.04);
     --shadow-2: 0 4px 16px rgba(100, 60, 30, 0.1), 0 1px 4px rgba(100, 60, 30, 0.06);
     --shadow-hover: 0 12px 40px rgba(100, 60, 30, 0.12), 0 2px 8px rgba(100, 60, 30, 0.06);

     --footer-bg: #f2ede6;
     --footer-ink: #1a1410;
     --footer-muted: #9a8878;
     --footer-border: #c8b8a8;
     --footer-shadow: 0 12px 40px rgba(100, 60, 30, 0.12), 0 2px 8px rgba(100, 60, 30, 0.06);
}

[data-theme="Ocean"] {
     --bg: #f4f6fa;
     --paper: #fafbfd;
     --card: #fafbfd;
     --surface-0: #fafbfd;
     --surface-1: #f4f6fa;
     --surface-2: #edf0f7;
     --surface-elevated: #fafbfd;
     --input: #fafbfd;

     --text: #0f1520;
     --text-1: #0f1520;
     --text-2: #3a4560;
     --text-muted: #7a8ba0;
     --muted: #7a8ba0;
     --ink: #0f1520;
     --text-inverse: #ffffff;

     --accent: #2563eb;
     --accent-color: var(--accent);
     --accent-hover: color-mix(in srgb, var(--accent) 88%, var(--black) 12%);
     --primary: #2563eb;
     --primary-color: var(--primary);
     --border: #dde3ee;
     --bg-dropdown: #eef3ff;

     --success: #22b48c;
     --warning: #f5c35a;
     --danger: #d25a5a;
     --info: #3098dc;

     --btn-bg-main: #2563eb;
     --btn-bg-main-hover: color-mix(in srgb, var(--btn-bg-main) 88%, var(--white) 12%);
     --btn-bg-primary: color-mix(in srgb, var(--accent) 82%, var(--black) 18%);
     --btn-bg-primary-hover: color-mix(in srgb, var(--btn-bg-primary) 88%, var(--white) 12%);
     --btn-bg-secondary: #3a4560;
     --btn-bg-secondary-hover: color-mix(in srgb, var(--btn-bg-secondary) 88%, var(--white) 12%);
     --btn-bg-success: #22b48c;
     --btn-bg-warning: #f5c35a;
     --btn-bg-danger: #d25a5a;
     --btn-bg-info: #3098dc;

     --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
     --shadow-s: 0 1px 3px rgba(30, 50, 100, 0.08), 0 0 0 1px rgba(30, 50, 100, 0.04);
     --shadow-m: 0 4px 16px rgba(30, 50, 100, 0.1), 0 1px 4px rgba(30, 50, 100, 0.06);
     --shadow: 0 12px 40px rgba(30, 50, 100, 0.12), 0 2px 8px rgba(30, 50, 100, 0.06);
     --shadow-1: 0 1px 3px rgba(30, 50, 100, 0.08), 0 0 0 1px rgba(30, 50, 100, 0.04);
     --shadow-2: 0 4px 16px rgba(30, 50, 100, 0.1), 0 1px 4px rgba(30, 50, 100, 0.06);
     --shadow-hover: 0 12px 40px rgba(30, 50, 100, 0.12), 0 2px 8px rgba(30, 50, 100, 0.06);

     --footer-bg: #edf0f7;
     --footer-ink: #0f1520;
     --footer-muted: #7a8ba0;
     --footer-border: #bcc6da;
     --footer-shadow: 0 12px 40px rgba(30, 50, 100, 0.12), 0 2px 8px rgba(30, 50, 100, 0.06);
}

[data-theme="Night"] {
     --bg: #0f1117;
     --paper: #161b27;
     --card: #161b27;
     --surface-0: #161b27;
     --surface-1: #1a2035;
     --surface-2: #1a2540;
     --surface-elevated: #1a2035;
     --input: #161b27;

     --text: #e8edf5;
     --text-1: #e8edf5;
     --text-2: #8a9ab5;
     --text-muted: #4a5870;
     --muted: #4a5870;
     --ink: #e8edf5;
     --text-inverse: #0f1117;

     --accent: #5b8def;
     --accent-color: var(--accent);
     --accent-hover: color-mix(in srgb, var(--accent) 88%, var(--white) 12%);
     --primary: #5b8def;
     --primary-color: var(--primary);
     --border: #1e2738;
     --bg-dropdown: #1a2540;

     --success: #48ba70;
     --warning: #ffc542;
     --danger: #e85f5f;
     --info: #4696d7;

     --btn-bg-main: #5b8def;
     --btn-bg-main-hover: color-mix(in srgb, var(--btn-bg-main) 88%, var(--white) 12%);
     --btn-bg-primary: color-mix(in srgb, var(--accent) 82%, var(--black) 18%);
     --btn-bg-primary-hover: color-mix(in srgb, var(--btn-bg-primary) 88%, var(--white) 12%);
     --btn-bg-secondary: #2a3650;
     --btn-bg-secondary-hover: color-mix(in srgb, var(--btn-bg-secondary) 88%, var(--white) 12%);
     --btn-bg-success: #2f8f59;
     --btn-bg-warning: #d29a2f;
     --btn-bg-danger: #b84f4f;
     --btn-bg-info: #3b7cb3;

     --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
     --shadow-s: 0 0 0 1px rgba(100, 140, 255, 0.08);
     --shadow-m: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(100, 140, 255, 0.06);
     --shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(100, 140, 255, 0.08);
     --shadow-1: 0 0 0 1px rgba(100, 140, 255, 0.08);
     --shadow-2: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(100, 140, 255, 0.06);
     --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(100, 140, 255, 0.08);

     --footer-bg: #161b27;
     --footer-ink: #e8edf5;
     --footer-muted: #8a9ab5;
     --footer-border: #2a3650;
     --footer-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(100, 140, 255, 0.08);
}
/* =========================================================
   Responsive breakpoints — mobile first
   Base CSS = phones / narrow screens
   ========================================================= */

/* ≥576px: large phones */
@media (min-width: 36rem) {

}

/* ≥768px: tablets */
@media (min-width: 48rem) {

}

/* ≥1024px: laptops / landscape tablets */
@media (min-width: 64rem) {

}

/* ≥1280px: desktops */
@media (min-width: 80rem) {

}

/* ≥1440px: large desktops */
@media (min-width: 90rem) {

}