:root {
  --brand-50: #ecfeff;
  --brand-100: #cffafe;
  --brand-300: #67e8f9;
  --brand-500: #06b6d4;
  --brand-700: #0e7490;
  --neutral-0: #ffffff;
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-500: #64748b;
  --neutral-700: #334155;
  --neutral-900: #0f172a;
  --success-50: #ecfdf5;
  --success-500: #10b981;
  --danger-50: #fef2f2;
  --danger-500: #ef4444;
  --warn-50: #fffbeb;
  --warn-500: #f59e0b;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-soft: 0 3.5px 5.5px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 10px 28px rgba(15, 23, 42, 0.05);
  --z-dropdown: 30;
  --z-overlay: 40;
  --z-sidebar: 50;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--neutral-900);
}

.container {
  max-width: 960px;
  margin: 4rem auto;
  padding: var(--space-6);
  background: linear-gradient(180deg, #0b1020 0%, #0f1934 100%);
  color: #e9eefb;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.container a {
  color: var(--brand-300);
}

.container input,
.container textarea,
.container select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  padding: 0.62rem 0.7rem;
  background: rgba(15, 23, 42, 0.25);
  color: #e9eefb;
}

.container button {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-700);
  color: #fff;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}

.btn-primary {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-700);
  color: #fff;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}

.btn-primary:hover {
  background: #0c667e;
}