@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #0b0f14;
  --bg-elevated: #101820;
  --card: #141b24;
  --text: #e8edf4;
  --muted: #8b9cb3;
  --border: #243044;
  --input-bg: #0b0f14;
  --accent: #ff4d6d;
  --accent-hover: #ff6680;
  --accent-glow: rgba(255, 77, 109, 0.22);
  --info: #6366f1;
  --info-muted: rgba(99, 102, 241, 0.15);
  --ok: #3dd68c;
  --warn: #fbbf24;
  --err: #ff8a8a;
  --btn-secondary-bg: #243044;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.35);
  --sidebar-w: 260px;
  --transition: 0.18s ease;
  --badge-pending: #243044;
  --badge-processing-bg: #1e2a4a;
  --badge-processing-fg: #93c5fd;
  --badge-completed-bg: #143528;
  --badge-partial-bg: #3d2a14;
  --badge-partial-fg: #fbbf24;
  --badge-bad-bg: #3d1a1a;
  --badge-bad-fg: var(--err);
  --table-head-bg: #1a2332;
  --table-head-fg: #cbd5e1;
  --table-stripe: rgba(255, 255, 255, 0.02);
  --table-hover: rgba(255, 77, 109, 0.06);
  --tab-active: var(--accent);
  --tab-bg: transparent;
  --tab-active-bg: var(--accent-glow);
  --glass: rgba(20, 27, 36, 0.85);
  --focus-ring: 0 0 0 3px var(--accent-glow);
}

[data-theme="light"] {
  --bg: #f4f6f9;
  --bg-elevated: #eef1f6;
  --card: #ffffff;
  --text: #141b24;
  --muted: #5c6b7f;
  --border: #d8dee8;
  --input-bg: #ffffff;
  --accent-glow: rgba(255, 77, 109, 0.1);
  --btn-secondary-bg: #e8ecf2;
  --shadow-sm: 0 2px 8px rgba(15, 20, 25, 0.06);
  --shadow-md: 0 8px 28px rgba(15, 20, 25, 0.08);
  --badge-pending: #e8ecf2;
  --badge-processing-bg: #dbeafe;
  --badge-processing-fg: #1d4ed8;
  --badge-completed-bg: #d1fae5;
  --badge-partial-bg: #fef3c7;
  --badge-partial-fg: #b45309;
  --badge-bad-bg: #fee2e2;
  --badge-bad-fg: #dc2626;
  --err: #dc2626;
  --table-head-bg: #eef1f6;
  --table-head-fg: #334155;
  --table-stripe: rgba(0, 0, 0, 0.02);
  --table-hover: rgba(255, 77, 109, 0.06);
  --glass: rgba(255, 255, 255, 0.92);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  transition: background var(--transition), color var(--transition);
  line-height: 1.5;
}

code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}