:root {
  color-scheme: light;

  --color-primary: #1e40af;
  --color-primary-strong: #0b2f75;
  --color-secondary: #3b82f6;
  --color-aurora: #7c3aed;
  --color-background: #f4f7fc;
  --color-surface: #ffffff;
  --color-surface-raised: rgba(255, 255, 255, 0.94);
  --color-surface-glass: rgba(248, 251, 255, 0.82);
  --color-muted-surface: #e9eef6;
  --color-text: #172554;
  --color-text-strong: #102044;
  --color-text-muted: #64748b;
  --color-border: #dbeafe;
  --color-border-strong: #c6d5eb;
  --color-success: #059669;
  --color-below: #d97706;
  --color-warning: #dc2626;
  --color-neutral: #64748b;
  --color-focus: #1e40af;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-size-caption: clamp(0.75rem, 0.18vw + 0.7rem, 0.8125rem);
  --font-size-body: clamp(0.875rem, 0.2vw + 0.82rem, 1rem);
  --font-size-title: clamp(1.5rem, 0.8vw + 1.2rem, 2.25rem);
  --line-height-tight: 1.2;
  --line-height-body: 1.6;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --page-gutter: clamp(10px, 1.15vw, 32px);
  --section-gap: clamp(12px, 1.1vw, 28px);
  --card-radius: clamp(14px, 0.8vw, 22px);
  --control-radius: 12px;
  --sidebar-rail-width: clamp(72px, 6.2vw, 104px);
  --sidebar-panel-width: clamp(188px, 13.5vw, 228px);
  --topbar-height: clamp(64px, 5.2vw, 76px);
  --touch-target: 44px;

  --elevation-card: 0 12px 34px rgba(20, 45, 90, 0.08);
  --elevation-floating: 0 20px 56px rgba(15, 38, 84, 0.15);
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.25);

  --motion-duration-fast: 160ms;
  --motion-duration-standard: 280ms;
  --motion-duration-base: var(--motion-duration-standard);
  --motion-duration-slow: 560ms;
  --motion-stagger-step: 45ms;
  --motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-out: var(--motion-ease-standard);
  --motion-aurora-x: 0%;
  --motion-aurora-y: 0%;
}

html {
  min-width: 320px;
  background: var(--color-background);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(circle at calc(10% + var(--motion-aurora-x)) calc(-8% + var(--motion-aurora-y)), rgba(59, 130, 246, 0.1), transparent 30%),
    radial-gradient(circle at calc(88% - var(--motion-aurora-x)) calc(2% - var(--motion-aurora-y)), rgba(124, 58, 237, 0.07), transparent 24%),
    var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
}

button,
input,
select,
textarea {
  font: inherit;
}

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

.v3-app-shell {
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
}

.v3-main-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding-inline: var(--page-gutter);
}

.v3-icon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  overflow: visible;
  fill: currentColor;
  color: inherit;
}

@keyframes motion-top-in {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes motion-bottom-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes motion-overlay-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}

html.motion-ready [data-motion="scroll"].is-revealed,
html.motion-ready [data-motion-group] > .is-revealed {
  animation: motion-bottom-in var(--motion-duration-base) var(--motion-ease-out) var(--motion-delay, 0ms) both;
}

html.motion-ready .is-updating {
  animation: motion-overlay-in var(--motion-duration-fast) var(--motion-ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}