/* ========== OSTO DESIGN TOKENS ========== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* Brand - deep indigo/navy */
  --indigo-50: #EEF0FF;
  --indigo-100: #E2E6FF;
  --indigo-200: #C8CFFF;
  --indigo-300: #A0AAFF;
  --indigo-400: #7C8AFF;
  --indigo-500: #5D6BFF;
  --indigo-600: #3D4CE6;
  --indigo-700: #2D3BBF;
  --indigo-800: #1C2680;
  --indigo-900: #131A52;
  --indigo-950: #0E1242;

  /* Lavender — primary card tint from reference */
  --lavender-50: #F4F4FF;
  --lavender-100: #ECECFA;
  --lavender-200: #DCDCF5;
  --lavender-300: #C7C7EB;
  --lavender-400: #A8A8DA;

  /* Emerald - status/CTA accent */
  --emerald-50: #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-300: #6EE7B7;
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-600: #059669;
  --emerald-700: #047857;

  /* Secondary accents */
  --sky-400: #38BDF8;
  --sky-500: #0EA5E9;
  --sky-600: #0284C7;

  /* Status */
  --amber-100: #FEF3C7;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --rose-100: #FFE4E6;
  --rose-500: #F43F5E;
  --rose-600: #E11D48;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;

  /* Neutrals (light mode default) — cooler, more contrast */
  --n-0:   #FFFFFF;
  --n-25:  #FBFBFD;
  --n-50:  #F6F7FB;
  --n-75:  #F0F2F8;
  --n-100: #E8EAF2;
  --n-150: #DEE1EB;
  --n-200: #CCD0DC;
  --n-300: #ADB3C4;
  --n-400: #828AA0;
  --n-500: #5C657E;
  --n-600: #404962;
  --n-700: #292F45;
  --n-800: #1A1E30;
  --n-900: #0F1226;
  --n-950: #07091B;

  /* Semantic - light mode */
  --bg-app: #F4F5FA;
  --bg-surface: var(--n-0);
  --bg-surface-2: var(--n-25);
  --bg-muted: var(--n-75);
  --bg-hover: var(--n-100);
  --bg-sidebar: var(--n-0);
  --bg-topbar: var(--bg-app);

  --border: #E6E8F0;
  --border-strong: var(--n-200);
  --border-subtle: #EFF1F7;
  --border-faint: #F3F4F9;

  --text-primary: var(--n-950);
  --text-secondary: var(--n-600);
  --text-tertiary: var(--n-500);
  --text-disabled: var(--n-400);
  --text-inverse: var(--n-0);

  --accent: var(--indigo-700);
  --accent-hover: var(--indigo-800);
  --accent-soft: var(--lavender-100);
  --accent-text: var(--indigo-800);

  --success: var(--emerald-600);
  --success-soft: var(--emerald-50);
  --success-border: #B7F0D8;

  --warning: var(--amber-600);
  --warning-soft: #FEF7E0;

  --danger: var(--rose-600);
  --danger-soft: #FFF1F2;

  --info: var(--sky-600);
  --info-soft: #F0F9FF;

  /* Type scale */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Monaco, monospace;

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px;
  --fs-24: 24px; --fs-32: 32px;

  /* Spacing (4pt) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Radius — generous, modern */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 0 rgba(16, 22, 52, 0.03);
  --shadow-sm: 0 1px 2px rgba(16, 22, 52, 0.05), 0 0 0 1px rgba(16, 22, 52, 0.03);
  --shadow-md: 0 6px 18px rgba(16, 22, 52, 0.06), 0 0 0 1px rgba(16, 22, 52, 0.04);
  --shadow-lg: 0 20px 50px rgba(16, 22, 52, 0.10), 0 0 0 1px rgba(16, 22, 52, 0.06);
  --shadow-focus: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 220ms;
}

[data-theme="dark"] {
  --bg-app: #07091B;
  --bg-surface: #0E1226;
  --bg-surface-2: #131734;
  --bg-muted: #161A38;
  --bg-hover: #1C2147;
  --bg-sidebar: #0A0D22;
  --bg-topbar: #07091B;

  --border: #1E2342;
  --border-strong: #2A3056;
  --border-subtle: #161A38;
  --border-faint: #14172E;

  --text-primary: #ECEEF7;
  --text-secondary: #A5ADC6;
  --text-tertiary: #767E97;
  --text-disabled: #4D5475;

  --accent: #6271FF;
  --accent-hover: #8F9BFF;
  --accent-soft: rgba(98, 113, 255, 0.14);
  --accent-text: #A7B2FF;

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-focus: 0 0 0 4px rgba(98, 113, 255, 0.25);
}

[data-density="compact"] { --row-h: 44px; --input-h: 36px; --btn-h: 34px; --pad-card: 18px; }
[data-density="normal"]  { --row-h: 48px; --input-h: 38px; --btn-h: 38px; --pad-card: 22px; }

/* ========== BASE ========== */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}
button { font-family: inherit; }
.mono { font-family: var(--font-mono); font-feature-settings: 'zero', 'ss01'; }
.serif { font-family: var(--font-serif); }
.serif-italic { font-family: var(--font-serif); font-style: italic; }

::selection { background: var(--accent-soft); color: var(--text-primary); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--n-300); background-clip: padding-box; border: 2px solid transparent; }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--btn-h, 36px); padding: 0 14px;
  font-size: var(--fs-13); font-weight: 500;
  border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  letter-spacing: -0.005em;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active { transform: translateY(0.5px); }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--indigo-900) 0%, var(--indigo-950) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(14, 18, 66, 0.30), inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14, 18, 66, 0.30), inset 0 1px 0 rgba(255,255,255,0.14); }

.btn-secondary {
  background: var(--bg-surface); color: var(--text-primary);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-surface); border-color: var(--n-300); box-shadow: var(--shadow-sm); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-danger { background: var(--bg-surface); color: var(--danger); border-color: var(--border); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }

.btn-sm { height: 30px; padding: 0 11px; font-size: var(--fs-12); }
.btn-lg { height: 44px; padding: 0 18px; font-size: var(--fs-14); }
.btn-icon { width: var(--btn-h, 36px); padding: 0; justify-content: center; border-radius: 999px; }
.btn-icon.btn-sm { width: 30px; }

/* Round white icon button — recurring pattern in the new design */
.round-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer;
  transition: all 160ms var(--ease);
}
.round-btn:hover { color: var(--text-primary); border-color: var(--n-300); box-shadow: var(--shadow-sm); }

/* ========== INPUTS ========== */
.input, .select {
  width: 100%; height: var(--input-h, 38px);
  padding: 0 14px; font-size: var(--fs-13); font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder, .select::placeholder { color: var(--text-tertiary); }
.input:hover, .select:hover { border-color: var(--n-300); }
.input:focus, .select:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.input.has-icon { padding-left: 36px; }
.input-group { position: relative; }
.input-group > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; }

.label { display: block; font-size: var(--fs-12); font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.label .req { color: var(--danger); margin-left: 2px; }
.help { font-size: var(--fs-12); color: var(--text-tertiary); margin-top: 6px; }
.error-msg { font-size: var(--fs-12); color: var(--danger); margin-top: 6px; display: flex; align-items: center; gap: 4px; }

/* ========== CARD ========== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.card-pad { padding: var(--pad-card, 20px); }
.card-header { padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.card-header > :first-child { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.card-title { font-size: var(--fs-14); font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-subtitle { font-size: var(--fs-12); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hero serif title used on every main page */
.hero-title {
  font-family: var(--font-sans);
  font-size: clamp(48px, 6.4vw, 84px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--indigo-950);
  margin: 0;
}
.hero-title em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--indigo-800);
  letter-spacing: -0.02em;
  margin-top: 2px;
}

/* Breadcrumb */
.crumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-tertiary);
}
.crumb a { color: var(--text-tertiary); text-decoration: none; }
.crumb a:hover { color: var(--text-secondary); }
.crumb .sep { opacity: 0.5; }
.crumb .here { color: var(--text-secondary); font-weight: 500; }

/* ========== BADGE / PILL ========== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.005em;
  border: 1px solid transparent;
}
.badge-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(245,158,11,0.25); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(244,63,94,0.25); }
.badge-info    { background: var(--info-soft);    color: var(--info);    border-color: rgba(14,165,233,0.25); }
.badge-neutral { background: var(--bg-muted);     color: var(--text-secondary); border-color: var(--border); }
.badge-accent  { background: var(--accent-soft);  color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.dot-success { background: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
.dot-warning { background: var(--warning); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.dot-danger  { background: var(--danger); box-shadow: 0 0 0 3px rgba(244,63,94,0.18); }
.dot-neutral { background: var(--n-400); }

/* Filter chips row — the rounded white pills under the hero title */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: all 160ms var(--ease);
}
.chip:hover { color: var(--text-primary); border-color: var(--n-300); }
.chip[aria-pressed="true"] {
  background: var(--indigo-950); color: #fff; border-color: var(--indigo-950);
}
.chip-add {
  width: 38px; height: 38px; padding: 0;
  background: var(--bg-surface); color: var(--text-tertiary);
  border: 1px solid var(--border); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all 160ms var(--ease);
}
.chip-add:hover { color: var(--text-primary); border-color: var(--n-300); }

/* Segmented — used in 24h/7d/30d */
.segmented {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.segmented button {
  height: 30px; padding: 0 14px;
  font-size: var(--fs-13); font-weight: 500;
  background: transparent; border: none;
  color: var(--text-tertiary); cursor: pointer;
  border-radius: 999px;
  transition: all 160ms var(--ease);
  font-family: inherit;
}
.segmented button:hover { color: var(--text-primary); }
.segmented button[aria-pressed="true"] {
  background: var(--lavender-100);
  color: var(--accent-text);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.table thead th {
  text-align: left; font-size: 11px; font-weight: 500;
  color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 12px 18px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
.table tbody td {
  padding: 0 18px;
  height: var(--row-h, 56px);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background: var(--bg-muted); }
.table tbody tr:last-child td { border-bottom: none; }

.progress-bar { height: 4px; background: var(--bg-muted); border-radius: 999px; overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.kbd {
  font-family: var(--font-mono);
  font-size: 10px; line-height: 1;
  padding: 3px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text-secondary);
}

/* Tooltip */
.tt-wrap { position: relative; display: inline-flex; }
.tt-wrap:hover .tt { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tt {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: var(--n-900); color: var(--n-0);
  font-size: 11px; padding: 4px 8px; border-radius: 6px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  z-index: 100;
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbitDrift { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(20px,-12px); } }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.spin { animation: spin 1s linear infinite; }

.skeleton {
  background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-hover) 50%, var(--bg-muted) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
}

.focus-ring:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }

/* Main pane wrapper — rounded white card the content lives in */
.app-pane {
  margin: 0 16px 16px 0;
  background: var(--bg-surface);
  border-radius: 28px;
  border: 1px solid var(--border);
  flex: 1;
  overflow: auto;
  position: relative;
  box-shadow: 0 1px 2px rgba(16,22,52,0.04), 0 4px 12px rgba(16,22,52,0.04);
}