:root {
  color-scheme: light;
  --color-primary: #357abd;
  --color-primary-hover: #215f9d;
  --color-primary-soft: #eaf3fc;
  --color-secondary: #12a594;
  --color-secondary-hover: #0f766e;
  --color-secondary-soft: #e7f8f4;
  --color-accent: #f3b23c;
  --color-accent-soft: #fff4dc;
  --color-success: #158067;
  --color-success-soft: #e8f8f5;
  --color-warning: #9a6700;
  --color-warning-soft: #fff4dc;
  --color-danger: #c43d4f;
  --color-danger-hover: #9f2638;
  --color-danger-soft: #ffe8e8;
  --color-info: #2563eb;
  --color-info-soft: #dbeafe;
  --color-background: #f6f9fd;
  --color-background-elevated: #edf5fc;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-subtle: #f7fbff;
  --color-surface-muted: #eef5fc;
  --color-surface-glass: rgba(255, 255, 255, 0.82);
  --color-surface-overlay: rgba(7, 20, 34, 0.58);
  --color-backdrop: rgba(7, 20, 34, 0.58);
  --color-mask-strong: rgba(0, 0, 0, 0.82);
  --color-mask-opaque: #000000;
  --color-text-primary: #122033;
  --color-text-secondary: #42526a;
  --color-text-muted: #64748b;
  --color-text-subtle: #7b8a9b;
  --color-text-inverse: #f7fbff;
  --color-text-on-accent: #ffffff;
  --color-border: #dbe5f0;
  --color-border-strong: #bdd0e1;
  --color-border-focus: #357abd;
  --color-hover: rgba(53, 122, 189, 0.09);
  --color-active: rgba(53, 122, 189, 0.16);
  --color-focus: rgba(53, 122, 189, 0.28);
  --color-disabled-bg: #e7eef7;
  --color-disabled-text: #91a6ba;
  --color-sidebar: #123352;
  --color-sidebar-deep: #071b2f;
  --color-sidebar-text: #d9e8f7;
  --color-sidebar-muted: #9fb9d0;
  --color-sidebar-hover: rgba(255, 255, 255, 0.12);
  --color-inverse-border: rgba(255, 255, 255, 0.2);
  --color-inverse-highlight: rgba(255, 255, 255, 0.1);
  --color-inverse-surface-strong: #071b2f;
  --color-chart-blue: #357abd;
  --color-chart-teal: #12a594;
  --color-chart-violet: #7c3aed;
  --color-chart-violet-soft: #f3e8ff;
  --color-chart-pink: #ef5da8;
  --color-chart-pink-soft: #ffe4f1;
  --color-chart-amber: #f3b23c;
  --color-chart-red: #d94b4b;
  --color-book-paper: #fffdf7;
  --color-book-paper-muted: #fff8e8;
  --color-book-paper-deep: #f8f0df;
  --color-book-border: #f0e6cf;
  --color-book-ink: #252016;
  --color-book-muted: #7d745e;
  --gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-brand-soft: linear-gradient(135deg, var(--color-primary-soft), var(--color-secondary-soft));
  --gradient-premium: radial-gradient(circle at 18% 14%, rgba(105, 183, 255, 0.28), transparent 34%), radial-gradient(circle at 82% 24%, rgba(18, 165, 148, 0.2), transparent 30%), linear-gradient(145deg, #102033, #123f68 54%, #0e665f);
  --gradient-mesh: radial-gradient(circle at 10% 20%, rgba(53, 122, 189, 0.18), transparent 34%), radial-gradient(circle at 84% 15%, rgba(18, 165, 148, 0.16), transparent 28%), radial-gradient(circle at 74% 82%, rgba(124, 58, 237, 0.1), transparent 30%);
  --shadow-xs: 0 1px 2px rgba(20, 45, 76, 0.07);
  --shadow-sm: 0 8px 22px rgba(20, 45, 76, 0.08);
  --shadow-md: 0 16px 38px rgba(20, 45, 76, 0.11);
  --shadow-lg: 0 28px 70px rgba(7, 27, 47, 0.18);
  --shadow-xl: 0 34px 88px rgba(7, 27, 47, 0.24);
  --shadow-glow: 0 0 0 1px rgba(105, 183, 255, 0.2), 0 24px 72px rgba(53, 122, 189, 0.24);
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --focus-ring: 0 0 0 3px var(--color-focus);
  --content-max: 1440px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #70ace3;
  --color-primary-hover: #9ac8ee;
  --color-primary-soft: #1b344b;
  --color-secondary: #43c9ba;
  --color-secondary-hover: #69ded0;
  --color-secondary-soft: #153b38;
  --color-accent: #f1bd59;
  --color-accent-soft: #3e321a;
  --color-success: #5dd3ad;
  --color-success-soft: #153a32;
  --color-warning: #f0c363;
  --color-warning-soft: #3e321a;
  --color-danger: #ff8d9a;
  --color-danger-hover: #ffb2bb;
  --color-danger-soft: #452326;
  --color-info: #83b7ff;
  --color-info-soft: #1b3558;
  --color-background: #0d1722;
  --color-background-elevated: #101c28;
  --color-surface: #142231;
  --color-surface-elevated: #172838;
  --color-surface-raised: #172838;
  --color-surface-subtle: #182b3d;
  --color-surface-muted: #20384d;
  --color-surface-glass: rgba(20, 34, 49, 0.82);
  --color-surface-overlay: rgba(3, 10, 18, 0.76);
  --color-backdrop: rgba(3, 10, 18, 0.76);
  --color-mask-strong: rgba(0, 0, 0, 0.82);
  --color-mask-opaque: #000000;
  --color-text-primary: #e7f0f8;
  --color-text-secondary: #bdcad6;
  --color-text-muted: #9db0c2;
  --color-text-subtle: #7f94a8;
  --color-text-inverse: #f7fbff;
  --color-text-on-accent: #ffffff;
  --color-border: #2d4357;
  --color-border-strong: #405a70;
  --color-border-focus: #70ace3;
  --color-hover: rgba(112, 172, 227, 0.12);
  --color-active: rgba(112, 172, 227, 0.2);
  --color-focus: rgba(112, 172, 227, 0.34);
  --color-disabled-bg: #26394b;
  --color-disabled-text: #71879a;
  --color-sidebar: #091522;
  --color-sidebar-deep: #050d16;
  --color-sidebar-text: #dbeaf7;
  --color-sidebar-muted: #90a9bf;
  --color-sidebar-hover: rgba(255, 255, 255, 0.09);
  --color-inverse-border: rgba(255, 255, 255, 0.16);
  --color-inverse-highlight: rgba(255, 255, 255, 0.08);
  --color-inverse-surface-strong: #050d16;
  --color-chart-blue: #70ace3;
  --color-chart-teal: #43c9ba;
  --color-chart-violet: #a78bfa;
  --color-chart-violet-soft: #32244b;
  --color-chart-pink: #ff8bc5;
  --color-chart-pink-soft: #46243a;
  --color-chart-amber: #f1bd59;
  --color-chart-red: #ff8d9a;
  --color-book-paper: #241f18;
  --color-book-paper-muted: #2d261c;
  --color-book-paper-deep: #352d21;
  --color-book-border: #504631;
  --color-book-ink: #f3ead8;
  --color-book-muted: #c6b99e;
  --gradient-brand-soft: linear-gradient(135deg, #1b344b, #153b38);
  --gradient-premium: radial-gradient(circle at 18% 14%, rgba(105, 183, 255, 0.26), transparent 34%), radial-gradient(circle at 82% 24%, rgba(67, 201, 186, 0.18), transparent 30%), linear-gradient(145deg, #07131f, #102f4b 54%, #0b4b47);
  --gradient-mesh: radial-gradient(circle at 10% 20%, rgba(112, 172, 227, 0.16), transparent 34%), radial-gradient(circle at 84% 15%, rgba(67, 201, 186, 0.13), transparent 28%), radial-gradient(circle at 74% 82%, rgba(155, 108, 255, 0.1), transparent 30%);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 30px 78px rgba(0, 0, 0, 0.38);
  --shadow-xl: 0 36px 96px rgba(0, 0, 0, 0.48);
  --shadow-glow: 0 0 0 1px rgba(112, 172, 227, 0.18), 0 24px 72px rgba(53, 122, 189, 0.2);
}

html {
  background: var(--color-background);
}

body {
  accent-color: var(--color-primary);
}

::selection {
  color: var(--color-text-on-accent);
  background: var(--color-primary);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

:where(input, select, textarea)::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.62;
}

.connectivity-banner {
  position: fixed;
  top: var(--space-3);
  left: 50%;
  z-index: 9000;
  max-width: calc(100% - var(--space-6));
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 10px 9px 14px;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-lg);
  font-size: 0.84rem;
  font-weight: 700;
  transform: translateX(-50%);
}

.connectivity-banner[hidden] {
  display: none;
}

.connectivity-banner i {
  color: var(--color-warning);
}

.connectivity-banner button {
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text-on-accent);
  background: var(--color-primary);
  cursor: pointer;
  font: inherit;
}

@media (max-width: 520px) {
  .connectivity-banner {
    top: var(--space-2);
    width: calc(100% - var(--space-4));
    justify-content: center;
    border-radius: var(--radius-md);
  }
}

select,
option {
  color: var(--color-text-primary);
  background-color: var(--color-surface);
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 10000;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text-on-accent);
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid CanvasText;
    box-shadow: none;
  }
}