:root {
  --m3-primary: #b8c4ff;
  --m3-on-primary: #10245b;
  --m3-primary-container: #2c4276;
  --m3-on-primary-container: #dce1ff;
  --m3-secondary: #c3c6dd;
  --m3-secondary-container: #434659;
  --m3-on-secondary-container: #dfe2f9;
  --m3-tertiary: #e7b9d4;
  --m3-tertiary-container: #5b3f52;
  --m3-surface: #111318;
  --m3-surface-low: #191b20;
  --m3-surface-container: #1d2026;
  --m3-surface-high: #282a30;
  --m3-surface-highest: #33353b;
  --m3-on-surface: #e3e2e9;
  --m3-on-surface-variant: #c5c6d0;
  --m3-outline: #8f909a;
  --m3-outline-variant: #45464f;
  --m3-error: #ffb4ab;
  --m3-success: #8bd9ad;
  --m3-shadow: rgba(0, 0, 0, .34);
  --m3-state-hover: 8%;
  --m3-state-focus: 10%;
  --m3-state-pressed: 10%;
  --m3-radius-xs: 8px;
  --m3-radius-sm: 12px;
  --m3-radius-md: 16px;
  --m3-radius-lg: 24px;
  --m3-radius-xl: 32px;
  --m3-ease: cubic-bezier(.2, 0, 0, 1);
  color-scheme: dark;
}

html[data-mantine-color-scheme="light"] {
  --m3-primary: #40598f;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #dae2ff;
  --m3-on-primary-container: #263f75;
  --m3-secondary: #5b5e71;
  --m3-secondary-container: #dfe2f9;
  --m3-on-secondary-container: #181b2c;
  --m3-tertiary: #75546a;
  --m3-tertiary-container: #ffd8ee;
  --m3-surface: #faf8ff;
  --m3-surface-low: #f4f2fa;
  --m3-surface-container: #eeecf4;
  --m3-surface-high: #e8e7ef;
  --m3-surface-highest: #e2e1e9;
  --m3-on-surface: #1b1b21;
  --m3-on-surface-variant: #45464f;
  --m3-outline: #767780;
  --m3-outline-variant: #c6c6d0;
  --m3-error: #ba1a1a;
  --m3-success: #176b42;
  --m3-shadow: rgba(31, 32, 40, .14);
  color-scheme: light;
}

html, body, #root { min-height: 100%; }

body {
  margin: 0;
  color: var(--m3-on-surface) !important;
  background:
    radial-gradient(900px 520px at 94% -12%, color-mix(in srgb, var(--m3-primary) 17%, transparent), transparent 62%),
    radial-gradient(700px 440px at -10% 108%, color-mix(in srgb, var(--m3-tertiary) 13%, transparent), transparent 62%),
    var(--m3-surface) !important;
  font-family: Montserrat, system-ui, sans-serif !important;
  letter-spacing: -.012em;
  line-height: 1.5;
}

* { scrollbar-color: var(--m3-outline-variant) transparent; }
*::selection { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }

h1, h2, h3, .mantine-Title-root {
  font-family: Unbounded, Montserrat, sans-serif !important;
  font-weight: 560 !important;
  letter-spacing: -.04em !important;
  text-wrap: balance;
}

p, .mantine-Text-root { max-inline-size: 75ch; }
.mantine-Text-root[data-dimmed="true"] { color: var(--m3-on-surface-variant) !important; }

h1, .mantine-Title-root[data-order="1"] { font-size: clamp(1.75rem, 3vw, 3.4rem) !important; }

.mantine-AppShell-main { background: transparent !important; }
.mantine-AppShell-main > * { max-width: 1600px; margin-inline: auto; }
.mantine-AppShell-header {
  background: color-mix(in srgb, var(--m3-surface) 82%, transparent) !important;
  border-color: var(--m3-outline-variant) !important;
  backdrop-filter: blur(22px) saturate(135%);
}
.mantine-AppShell-navbar,
.mantine-AppShell-aside {
  background: color-mix(in srgb, var(--m3-surface-low) 92%, transparent) !important;
  border-color: var(--m3-outline-variant) !important;
}

.mantine-Paper-root,
.mantine-Card-root {
  color: var(--m3-on-surface) !important;
  background: color-mix(in srgb, var(--m3-surface-container) 94%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--m3-outline-variant) 72%, transparent) !important;
  border-radius: var(--m3-radius-lg) !important;
  box-shadow: 0 1px 2px var(--m3-shadow) !important;
  transition: transform 240ms var(--m3-ease), box-shadow 240ms var(--m3-ease), background 240ms var(--m3-ease) !important;
}
.mantine-Card-root:hover {
  background: var(--m3-surface-high) !important;
  box-shadow: 0 2px 5px var(--m3-shadow) !important;
}

/* Nested surfaces use quieter containment instead of repeating elevated cards. */
.mantine-Card-root .mantine-Card-root,
.mantine-Paper-root .mantine-Paper-root {
  background: var(--m3-surface-low) !important;
  border-color: color-mix(in srgb, var(--m3-outline-variant) 54%, transparent) !important;
  border-radius: var(--m3-radius-md) !important;
  box-shadow: none !important;
}

.mantine-Button-root {
  min-height: 44px;
  padding-inline: 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .005em;
  transition: transform 180ms var(--m3-ease), filter 180ms var(--m3-ease), box-shadow 180ms var(--m3-ease) !important;
}
.mantine-Button-root:not([data-variant="subtle"]):not([data-variant="default"]):not([data-variant="outline"]) {
  color: var(--m3-on-primary) !important;
  background: var(--m3-primary) !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--m3-primary) 26%, transparent) !important;
}
.mantine-Button-root:hover { transform: translateY(-2px); filter: brightness(1.06); }
.mantine-Button-root:active { transform: scale(.97); }
.mantine-Button-root[data-disabled="true"], .mantine-Button-root:disabled {
  color: color-mix(in srgb, var(--m3-on-surface) 38%, transparent) !important;
  background: color-mix(in srgb, var(--m3-on-surface) 12%, transparent) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.mantine-Button-root[data-variant="outline"] { color: var(--m3-primary) !important; border: 1px solid var(--m3-outline) !important; }
.mantine-Button-root[data-variant="subtle"] { color: var(--m3-primary) !important; }
.mantine-Button-root[data-variant="default"] { color: var(--m3-on-surface) !important; background: var(--m3-surface-high) !important; }

.mantine-ActionIcon-root {
  min-width: 40px;
  min-height: 40px;
  border-color: transparent !important;
  border-radius: 16px !important;
  transition: background 180ms var(--m3-ease), transform 180ms var(--m3-ease) !important;
}
.mantine-ActionIcon-root:hover { background: var(--m3-secondary-container) !important; transform: rotate(-3deg) scale(1.05); }

.mantine-NavLink-root {
  min-height: 48px;
  margin-block: 3px;
  border-radius: 999px !important;
  color: var(--m3-on-surface-variant) !important;
  transition: background 200ms var(--m3-ease), color 200ms var(--m3-ease), padding 200ms var(--m3-ease) !important;
}
.mantine-NavLink-root:hover { background: var(--m3-surface-high) !important; padding-inline-start: 20px !important; }
.mantine-NavLink-root[data-active="true"], .mantine-NavLink-root.active {
  color: var(--m3-on-primary-container) !important;
  background: var(--m3-primary-container) !important;
  font-weight: 700 !important;
}

.mantine-Breadcrumbs-root a, .mantine-Anchor-root { color: var(--m3-primary) !important; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mantine-Breadcrumbs-root a:hover, .mantine-Anchor-root:hover { text-decoration: underline; }

.mantine-TextInput-input, .mantine-NumberInput-input, .mantine-PasswordInput-input,
.mantine-Textarea-input, .mantine-Select-input, .mantine-MultiSelect-input,
.mantine-TagsInput-input, .mantine-DateInput-input {
  min-height: 52px !important;
  color: var(--m3-on-surface) !important;
  background: var(--m3-surface-high) !important;
  border: 1px solid var(--m3-outline) !important;
  border-radius: 16px 16px 6px 6px !important;
  transition: border 180ms var(--m3-ease), box-shadow 180ms var(--m3-ease), background 180ms var(--m3-ease) !important;
}
.mantine-TextInput-input:focus, .mantine-NumberInput-input:focus, .mantine-PasswordInput-input:focus,
.mantine-Textarea-input:focus, .mantine-Select-input:focus, .mantine-MultiSelect-input:focus {
  border: 2px solid var(--m3-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--m3-primary) 14%, transparent) !important;
}
.mantine-Input-label { color: var(--m3-on-surface-variant) !important; font-weight: 650 !important; }

.mantine-Badge-root {
  min-height: 28px;
  padding-inline: 12px !important;
  border-radius: 999px !important;
  font-weight: 750 !important;
  letter-spacing: .02em;
}
.mantine-Chip-label { min-height: 40px; border-radius: 12px !important; border-color: var(--m3-outline) !important; }
.mantine-Chip-input:checked + .mantine-Chip-label { color: var(--m3-on-secondary-container) !important; background: var(--m3-secondary-container) !important; border-color: transparent !important; }
.mantine-SegmentedControl-root, .mantine-Tabs-list {
  padding: 4px !important;
  background: var(--m3-surface-high) !important;
  border: 0 !important;
  border-radius: 999px !important;
}
.mantine-SegmentedControl-indicator, .mantine-Tabs-tab[data-active="true"] {
  color: var(--m3-on-primary-container) !important;
  background: var(--m3-primary-container) !important;
  border-radius: 999px !important;
}

.mantine-Table-table { border-collapse: separate !important; border-spacing: 0 6px !important; }
.mantine-Table-th { color: var(--m3-on-surface-variant) !important; border: 0 !important; font-size: .72rem; letter-spacing: .065em; text-transform: uppercase; }
.mantine-Table-td { background: var(--m3-surface-container) !important; border-block: 1px solid var(--m3-outline-variant) !important; }
.mantine-Table-td:first-child { border-inline-start: 1px solid var(--m3-outline-variant) !important; border-radius: 18px 0 0 18px; }
.mantine-Table-td:last-child { border-inline-end: 1px solid var(--m3-outline-variant) !important; border-radius: 0 18px 18px 0; }
.mantine-Table-tr:hover .mantine-Table-td { background: var(--m3-surface-high) !important; }
.mantine-Table-tr:focus-within .mantine-Table-td { background: color-mix(in srgb, var(--m3-primary) 10%, var(--m3-surface-container)) !important; }

.mantine-Modal-content, .mantine-Drawer-content {
  color: var(--m3-on-surface) !important;
  background: var(--m3-surface-container) !important;
  border-radius: 32px !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.42) !important;
}
.mantine-Modal-header, .mantine-Drawer-header { background: transparent !important; }
.mantine-Menu-dropdown, .mantine-Popover-dropdown, .mantine-Select-dropdown {
  color: var(--m3-on-surface) !important;
  background: var(--m3-surface-high) !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 45px var(--m3-shadow) !important;
  padding: 8px !important;
}
.mantine-Menu-item, .mantine-Select-option { border-radius: 14px !important; }
.mantine-Menu-item:hover, .mantine-Select-option:hover { background: color-mix(in srgb, var(--m3-on-surface) 8%, transparent) !important; }
.mantine-Tooltip-tooltip { color: var(--m3-surface) !important; background: var(--m3-on-surface) !important; border-radius: var(--m3-radius-xs) !important; font-size: .75rem !important; }

.mantine-Switch-track { background: var(--m3-surface-highest) !important; border-color: var(--m3-outline) !important; }
.mantine-Switch-input:checked + .mantine-Switch-track { background: var(--m3-primary) !important; border-color: var(--m3-primary) !important; }
.mantine-Checkbox-input, .mantine-Radio-radio { border-radius: 6px !important; border-color: var(--m3-outline) !important; }
.mantine-Progress-root { height: 10px !important; background: var(--m3-surface-highest) !important; border-radius: 999px !important; }
.mantine-Progress-section { background: linear-gradient(90deg, var(--m3-primary), var(--m3-tertiary)) !important; border-radius: 999px !important; }
.mantine-Notification-root { background: var(--m3-surface-high) !important; border: 1px solid var(--m3-outline-variant) !important; border-radius: 22px !important; }
.mantine-Alert-root { background: var(--m3-surface-high) !important; border: 1px solid var(--m3-outline-variant) !important; border-radius: var(--m3-radius-md) !important; }
.mantine-Skeleton-root { background: linear-gradient(100deg, var(--m3-surface-high) 20%, var(--m3-surface-highest) 42%, var(--m3-surface-high) 64%) !important; background-size: 300% 100% !important; }
.mantine-Pagination-control { min-width: 40px; min-height: 40px; border: 0 !important; border-radius: 999px !important; color: var(--m3-on-surface) !important; background: transparent !important; }
.mantine-Pagination-control[data-active="true"] { color: var(--m3-on-primary-container) !important; background: var(--m3-primary-container) !important; }
.mantine-Slider-track::before { background: var(--m3-surface-highest) !important; }
.mantine-Slider-bar, .mantine-Slider-thumb { background: var(--m3-primary) !important; border-color: var(--m3-primary) !important; }
.mantine-Divider-root { border-color: var(--m3-outline-variant) !important; }

/* Keep charts and code legible: data colors remain semantic, chrome adopts the theme. */
.recharts-cartesian-grid line { stroke: var(--m3-outline-variant) !important; }
.recharts-text { fill: var(--m3-on-surface-variant) !important; }
.recharts-tooltip-wrapper .mantine-Paper-root { border-radius: var(--m3-radius-sm) !important; }
.monaco-editor, .monaco-editor-background { border-radius: var(--m3-radius-md); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--m3-primary) 80%, white) !important;
  outline-offset: 3px !important;
}

@media (max-width: 48em) {
  .mantine-Paper-root, .mantine-Card-root { border-radius: 22px !important; }
  .mantine-Modal-content, .mantine-Drawer-content { border-radius: 28px 28px 0 0 !important; }
  h1, .mantine-Title-root[data-order="1"] { font-size: 1.8rem !important; }
}

@media (min-width: 48.001em) and (max-width: 75em) {
  .mantine-AppShell-main { padding-inline: clamp(20px, 3vw, 36px) !important; }
}

@media (min-width: 75.001em) {
  .mantine-AppShell-main { padding-inline: clamp(32px, 4vw, 64px) !important; }
}

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