:root {
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --color-primary-50: color-mix(in oklab, #6366f1 10%, white);
  --color-primary-100: color-mix(in oklab, #6366f1 20%, white);
  --color-primary-200: color-mix(in oklab, #6366f1 40%, white);
  --color-primary-300: color-mix(in oklab, #6366f1 65%, white);
  --color-primary-400: color-mix(in oklab, #6366f1 85%, white);
  --color-primary-500: #6366f1;
  --color-primary-600: color-mix(in oklab, #6366f1 85%, black);
  --color-primary-700: color-mix(in oklab, #6366f1 70%, black);
  --color-primary-800: color-mix(in oklab, #6366f1 50%, black);
  --color-primary-900: color-mix(in oklab, #6366f1 30%, black);
  --color-primary: #6366f1;
  --color-success-50: color-mix(in oklab, #10b981 10%, white);
  --color-success-100: color-mix(in oklab, #10b981 20%, white);
  --color-success-200: color-mix(in oklab, #10b981 40%, white);
  --color-success-300: color-mix(in oklab, #10b981 65%, white);
  --color-success-400: color-mix(in oklab, #10b981 85%, white);
  --color-success-500: #10b981;
  --color-success-600: color-mix(in oklab, #10b981 85%, black);
  --color-success-700: color-mix(in oklab, #10b981 70%, black);
  --color-success-800: color-mix(in oklab, #10b981 50%, black);
  --color-success-900: color-mix(in oklab, #10b981 30%, black);
  --color-success: #10b981;
  --color-warning-50: color-mix(in oklab, #f59e0b 10%, white);
  --color-warning-100: color-mix(in oklab, #f59e0b 20%, white);
  --color-warning-200: color-mix(in oklab, #f59e0b 40%, white);
  --color-warning-300: color-mix(in oklab, #f59e0b 65%, white);
  --color-warning-400: color-mix(in oklab, #f59e0b 85%, white);
  --color-warning-500: #f59e0b;
  --color-warning-600: color-mix(in oklab, #f59e0b 85%, black);
  --color-warning-700: color-mix(in oklab, #f59e0b 70%, black);
  --color-warning-800: color-mix(in oklab, #f59e0b 50%, black);
  --color-warning-900: color-mix(in oklab, #f59e0b 30%, black);
  --color-warning: #f59e0b;
  --color-danger-50: color-mix(in oklab, #ef4444 10%, white);
  --color-danger-100: color-mix(in oklab, #ef4444 20%, white);
  --color-danger-200: color-mix(in oklab, #ef4444 40%, white);
  --color-danger-300: color-mix(in oklab, #ef4444 65%, white);
  --color-danger-400: color-mix(in oklab, #ef4444 85%, white);
  --color-danger-500: #ef4444;
  --color-danger-600: color-mix(in oklab, #ef4444 85%, black);
  --color-danger-700: color-mix(in oklab, #ef4444 70%, black);
  --color-danger-800: color-mix(in oklab, #ef4444 50%, black);
  --color-danger-900: color-mix(in oklab, #ef4444 30%, black);
  --color-danger: #ef4444;
  --color-text: color-mix(in oklab, #6366f1 5%, #1a1a1a);
  --color-text-muted: color-mix(in oklab, #6366f1 5%, #6b7280);
  --color-bg: color-mix(in oklab, #6366f1 2%, #fafafa);
  --color-surface: #fff;
  --color-border: color-mix(in oklab, #6366f1 5%, #ccc);
  --color-border-light: color-mix(in oklab, #6366f1 3%, #eee);
  --color-border-heavy: color-mix(in oklab, #6366f1 5%, #dee2e6);
  --radius: 0.5rem;
  --font: Inter, system-ui, -apple-system, sans-serif;
}
[data-theme="dark"] {
  --color-primary-50: color-mix(in oklab, color-mix(in oklab, #6366f1 80%, white) 10%, white);
  --color-primary-100: color-mix(in oklab, color-mix(in oklab, #6366f1 80%, white) 20%, white);
  --color-primary-200: color-mix(in oklab, color-mix(in oklab, #6366f1 80%, white) 40%, white);
  --color-primary-300: color-mix(in oklab, color-mix(in oklab, #6366f1 80%, white) 65%, white);
  --color-primary-400: color-mix(in oklab, color-mix(in oklab, #6366f1 80%, white) 85%, white);
  --color-primary-500: color-mix(in oklab, #6366f1 80%, white);
  --color-primary-600: color-mix(in oklab, color-mix(in oklab, #6366f1 80%, white) 85%, black);
  --color-primary-700: color-mix(in oklab, color-mix(in oklab, #6366f1 80%, white) 70%, black);
  --color-primary-800: color-mix(in oklab, color-mix(in oklab, #6366f1 80%, white) 50%, black);
  --color-primary-900: color-mix(in oklab, color-mix(in oklab, #6366f1 80%, white) 30%, black);
  --color-primary: color-mix(in oklab, #6366f1 80%, white);
  --color-success-50: color-mix(in oklab, color-mix(in oklab, #10b981 75%, white) 10%, white);
  --color-success-100: color-mix(in oklab, color-mix(in oklab, #10b981 75%, white) 20%, white);
  --color-success-200: color-mix(in oklab, color-mix(in oklab, #10b981 75%, white) 40%, white);
  --color-success-300: color-mix(in oklab, color-mix(in oklab, #10b981 75%, white) 65%, white);
  --color-success-400: color-mix(in oklab, color-mix(in oklab, #10b981 75%, white) 85%, white);
  --color-success-500: color-mix(in oklab, #10b981 75%, white);
  --color-success-600: color-mix(in oklab, color-mix(in oklab, #10b981 75%, white) 85%, black);
  --color-success-700: color-mix(in oklab, color-mix(in oklab, #10b981 75%, white) 70%, black);
  --color-success-800: color-mix(in oklab, color-mix(in oklab, #10b981 75%, white) 50%, black);
  --color-success-900: color-mix(in oklab, color-mix(in oklab, #10b981 75%, white) 30%, black);
  --color-success: color-mix(in oklab, #10b981 75%, white);
  --color-warning-50: color-mix(in oklab, color-mix(in oklab, #f59e0b 85%, white) 10%, white);
  --color-warning-100: color-mix(in oklab, color-mix(in oklab, #f59e0b 85%, white) 20%, white);
  --color-warning-200: color-mix(in oklab, color-mix(in oklab, #f59e0b 85%, white) 40%, white);
  --color-warning-300: color-mix(in oklab, color-mix(in oklab, #f59e0b 85%, white) 65%, white);
  --color-warning-400: color-mix(in oklab, color-mix(in oklab, #f59e0b 85%, white) 85%, white);
  --color-warning-500: color-mix(in oklab, #f59e0b 85%, white);
  --color-warning-600: color-mix(in oklab, color-mix(in oklab, #f59e0b 85%, white) 85%, black);
  --color-warning-700: color-mix(in oklab, color-mix(in oklab, #f59e0b 85%, white) 70%, black);
  --color-warning-800: color-mix(in oklab, color-mix(in oklab, #f59e0b 85%, white) 50%, black);
  --color-warning-900: color-mix(in oklab, color-mix(in oklab, #f59e0b 85%, white) 30%, black);
  --color-warning: color-mix(in oklab, #f59e0b 85%, white);
  --color-danger-50: color-mix(in oklab, color-mix(in oklab, #ef4444 75%, white) 10%, white);
  --color-danger-100: color-mix(in oklab, color-mix(in oklab, #ef4444 75%, white) 20%, white);
  --color-danger-200: color-mix(in oklab, color-mix(in oklab, #ef4444 75%, white) 40%, white);
  --color-danger-300: color-mix(in oklab, color-mix(in oklab, #ef4444 75%, white) 65%, white);
  --color-danger-400: color-mix(in oklab, color-mix(in oklab, #ef4444 75%, white) 85%, white);
  --color-danger-500: color-mix(in oklab, #ef4444 75%, white);
  --color-danger-600: color-mix(in oklab, color-mix(in oklab, #ef4444 75%, white) 85%, black);
  --color-danger-700: color-mix(in oklab, color-mix(in oklab, #ef4444 75%, white) 70%, black);
  --color-danger-800: color-mix(in oklab, color-mix(in oklab, #ef4444 75%, white) 50%, black);
  --color-danger-900: color-mix(in oklab, color-mix(in oklab, #ef4444 75%, white) 30%, black);
  --color-danger: color-mix(in oklab, #ef4444 75%, white);
  --color-text: color-mix(in oklab, #6366f1 5%, #e0e0e0);
  --color-text-muted: color-mix(in oklab, #6366f1 5%, #9ca3af);
  --color-bg: color-mix(in oklab, #6366f1 3%, #1a1a1a);
  --color-surface: color-mix(in oklab, #6366f1 3%, #2a2a2a);
  --color-border: color-mix(in oklab, #6366f1 5%, #444);
  --color-border-light: color-mix(in oklab, #6366f1 3%, #333);
  --color-border-heavy: color-mix(in oklab, #6366f1 5%, #555);
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  font-family: var(--font);
  line-height: 1.5;
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
}
button {
  padding: var(--space-s) var(--space-m);
  background: var(--color-primary-500);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
}
button:hover {
  background: var(--color-primary-600);
}
label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
input, textarea, select {
  display: block;
  width: 100%;
  padding: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  padding: var(--space-s);
  border-bottom: 2px solid var(--color-border-heavy);
  font-weight: 700;
}
td {
  padding: var(--space-s);
  border-bottom: 1px solid var(--color-border-light);
}
a {
  color: var(--color-primary-500);
  text-decoration: none;
}
a:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}
button.outline {
  background: transparent;
  border: 1px solid var(--color-primary-500);
  color: var(--color-primary-500);
}
button.outline:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}
button.danger {
  background: var(--color-danger-500);
}
button.danger:hover {
  background: var(--color-danger-600);
}
button.small {
  padding: var(--space-xs) var(--space-s);
  font-size: 0.875rem;
}
[role="alert"] {
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 500;
}
[role="alert"][data-variant="success"] {
  background: var(--color-success-100);
  border-color: var(--color-success-200);
  color: var(--color-success-900);
}
[role="alert"][data-variant="warning"] {
  background: var(--color-warning-100);
  border-color: var(--color-warning-200);
  color: var(--color-warning-900);
}
[role="alert"][data-variant="error"] {
  background: var(--color-danger-100);
  border-color: var(--color-danger-200);
  color: var(--color-danger-900);
}
dialog {
  border: none;
  border-radius: var(--radius);
  padding: var(--space-l);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  max-width: 32rem;
  width: 90%;
}
dialog::backdrop {
  background: rgba(0,0,0,0.4);
}
.badge {
  display: inline-block;
  padding: 0.15rem var(--space-s);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 1rem;
  background: var(--color-primary-500);
  color: white;
}
.badge.success {
  background: var(--color-success-500);
}
.badge.warning {
  background: var(--color-warning-400);
  color: var(--color-warning-900);
}
.badge.error {
  background: var(--color-danger-500);
}
.spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton {
  background: linear-gradient(90deg, var(--color-border-light) 25%, var(--color-border) 50%, var(--color-border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
  min-height: 1rem;
}
@keyframes shimmer { to { background-position: -200% 0; } }
input[role="switch"] {
  appearance: none;
  width: 2.5rem;
  height: 1.4rem;
  background: var(--color-border);
  border: none;
  border-radius: 1rem;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
input[role="switch"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
input[role="switch"]:checked {
  background: var(--color-primary-500);
}
input[role="switch"]:checked::before {
  transform: translateX(1.1rem);
}