/* ═══════════════════════════════════════════════════════════════════
   Geist Sans + Geist Mono — Self-hosted (OFL 1.8.0, Session 4)
   Variable fonts = all weights in one file (lean, fast)
   ═══════════════════════════════════════════════════════════════════ */

/* Geist Sans — variable (100-900) */
@font-face {
  font-family: 'Geist Sans';
  src: url('/static/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Sans';
  src: url('/static/fonts/Geist-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Geist Mono — variable (100-900) */
@font-face {
  font-family: 'Geist Mono';
  src: url('/static/fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/static/fonts/GeistMono-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Static fallbacks (Regular/Medium/SemiBold for older browsers) */
@font-face {
  font-family: 'Geist Sans Fallback';
  src: url('/static/fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono Fallback';
  src: url('/static/fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   GATEWAY DESIGN SYSTEM
   Obsidian Ember × Apple-inspired — shared across all pages
   
   Usage: <link rel="stylesheet" href="/static/gateway.css">
   ═══════════════════════════════════════════════════════════════ */

/* ─── Theme Tokens ─── */
:root,
[data-theme="dark"] {
  /* Layered canvas — Linear-inspired depth via background progression
     deeper = darker (recessed), elevated = lighter (raised)
     This is the secret to premium dark UIs — not flat black, but a luminance stack */
  --background:          #0D0E11;   /* primary panel surface */
  --background-deep:     #08090A;   /* marketing deep / page floor */
  --background-base:     #0A0B0E;   /* base layer under everything */
  --background-veil:     #010102;   /* deepest void — for radial gradient origin */
  
  /* Surface elevation scale (Linear-accurate) */
  --surface-tint:        #131419;   /* one step up from bg */
  --surface-panel:       #15171C;   /* card surface */
  --surface-raised:      #1C1F26;   /* raised panels, menus */
  --surface-high:        #23262E;   /* hover, inputs */
  --surface-input:       #1A1D24;   /* input fields at rest */
  
  /* Foreground — warm off-white, never pure white */
  --foreground:          #E8EAED;   /* primary text — warm off-white (not #FFF) */
  --foreground-secondary: #D0D6E0;  /* body text */
  --foreground-tertiary: #9BA1AC;   /* muted captions */
  --foreground-quaternary: #6B7280; /* placeholder */
  
  /* Semantic aliases (back-compat with existing dashboard) */
  --card:                var(--surface-panel);
  --card-foreground:     var(--foreground);
  --muted:               var(--surface-raised);
  --muted-foreground:    var(--foreground-tertiary);
  
  /* Signature accent — restrained, used for CTA/focus only */
  --accent:              #FF8C42;
  --accent-foreground:   #0D0E11;
  --accent-hover:        #FFA066;
  --accent-text:         #FF8C42;
  --accent-muted:        rgba(255,140,66,0.12);
  
  /* Status colors — only for status indicators, never decoration */
  --destructive:         #EF4444;
  --success:             #34D399;
  --warning:             #FBBF24;
  --info:                #6B8DD6;
  --error:               var(--destructive);
  
  /* Borders — Linear's barely-visible hairline approach
     3-tier opacity communicates hierarchy without solid lines */
  --border:              rgba(255,255,255,0.06);   /* default — barely felt */
  --border-subtle:       rgba(255,255,255,0.04);   /* cards at rest */
  --border-default:      rgba(255,255,255,0.10);   /* dividers, nav */
  --border-strong:       rgba(255,255,255,0.14);   /* emphasis borders */
  --input:               rgba(255,255,255,0.10);
  --ring:                var(--accent);
  
  /* Shadows — multi-layer for realistic depth (Apple-style) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.03) inset;
  --shadow-md: 0 4px 12px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.04) inset;
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.05) inset;
  --shadow-xl: 0 20px 48px rgba(0,0,0,0.70), 0 0 0 1px rgba(255,255,255,0.06) inset;
  --glow-accent: 0 0 20px rgba(255,140,66,0.15);
  
  /* Ambient gradients — the KEY to premium dark UI
     Subtle radial + linear mixes that add hue depth without being noticeable directly
     This is what separates Linear/Vercel from "flat black dashboards" */
  --gradient-aurora:     radial-gradient(ellipse 80% 50% at 50% -20%,
                                          rgba(255,140,66,0.06) 0%,
                                          rgba(94,106,210,0.04) 35%,
                                          transparent 70%);
  --gradient-surface:    linear-gradient(180deg,
                                          rgba(255,255,255,0.02) 0%,
                                          rgba(255,255,255,0) 100%);
  --gradient-card-hover: linear-gradient(180deg,
                                          rgba(255,255,255,0.04) 0%,
                                          rgba(255,255,255,0.01) 100%);
  --gradient-vignette:   radial-gradient(ellipse at center,
                                          transparent 0%,
                                          transparent 60%,
                                          rgba(0,0,0,0.30) 100%);
  
  /* Background compositing — applied to body */
  --bg-composite: var(--background-base) var(--gradient-aurora) no-repeat fixed,
                  var(--background) none;
  
  /* Typography — Vercel-grade Geist Sans + Geist Mono (Session 4)
     Self-hosted OFL, no CDN dependency.
     Geist designed for dev tools / dashboard — optimal at small sizes.
     No cv01/ss03 needed (Geist is clean by design). */
  --font-sans: "Geist Sans", "Geist Variable", "Inter Variable", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Geist Mono", "GeistMono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  
  /* Type scale (Linear-mapped) */
  --text-xs:    0.75rem;     /* 12px */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  0.9375rem;   /* 15px — Linear default body */
  --text-lg:    1.0625rem;   /* 17px */
  --text-xl:    1.25rem;     /* 20px */
  --text-2xl:   1.5rem;      /* 24px */
  --text-3xl:   1.875rem;    /* 30px */
  --text-4xl:   2.5rem;      /* 40px */
  
  --radius:    0.625rem;
  --radius-sm: calc(0.625rem * 0.6);
  --radius-md: calc(0.625rem * 0.8);
  --radius-lg: 0.625rem;
  --radius-xl: 1rem;

  /* Apple-inspired depth tokens */
  --glass:             rgba(21,23,28,0.85);
  --glass-border:      rgba(255,255,255,0.08);
  --overlay:           rgba(0,0,0,0.55);
  --focus-ring:        rgba(255,140,66,0.35);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;
  --duration-smooth:   350ms;
  
  /* Back-compat aliases for older tokens */
  --bg-base:             var(--background);
  --bg-surface:          var(--card);
  --bg-elevated:         var(--muted);
  --bg-hover:            var(--surface-high);
  --text-primary:        var(--foreground);
  --text-secondary:      var(--foreground-tertiary);
  --text-tertiary:       var(--foreground-quaternary);
  --skeleton:            rgba(255,255,255,0.04);
}

[data-theme="light"] {
  --background:          #FAFAFA;
  --foreground:          #0A0B0E;
  --card:                #FFFFFF;
  --card-foreground:     #0A0B0E;
  --muted:               #F4F4F5;
  --muted-foreground:    #71717A;
  --accent:              #E8762A;
  --accent-foreground:   #FFFFFF;
  --destructive:         #DC2626;
  --border:              #E4E4E7;
  --input:               #D4D4D8;
  --ring:                #E8762A;
  --success:             #059669;
  --warning:             #D97706;

  --bg-base:             var(--background);
  --bg-surface:          var(--card);
  --bg-elevated:         var(--muted);
  --bg-hover:            #E4E4E7;
  --text-primary:        var(--foreground);
  --text-secondary:      var(--muted-foreground);
  --text-tertiary:       #A1A1AA;
  --border-subtle:       var(--border);
  --border-default:      #D4D4D8;
  --skeleton:            rgba(0,0,0,0.04);
  --accent-hover:        #D96A1E;
  --accent-muted:        rgba(232,118,42,0.10);
  --accent-text:         #E8762A;
  --error:               var(--destructive);
  --info:                #4A6FB0;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --glow-accent: 0 0 16px rgba(232,118,42,0.10);

  --radius:    0.625rem;
  --radius-sm: calc(0.625rem * 0.6);
  --radius-md: calc(0.625rem * 0.8);
  --radius-lg: 0.625rem;
  --radius-xl: 1rem;

  --glass:             rgba(255,255,255,0.90);
  --glass-border:      rgba(0,0,0,0.06);
  --overlay:           rgba(0,0,0,0.25);
  --focus-ring:        rgba(232,118,42,0.30);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;
  --duration-smooth:   350ms;
}

/* ─── Reset ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ─── Body / Typography Foundation ─── */
html {
  /* Prevent text size adjust on orientation change (iOS) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Ambient gradient background — the signature premium depth
     Two layers: aurora hue (top) + vignette (edges) on composite base
     Fixed attachment so gradient stays during scroll (parallax depth) */
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%,
                    rgba(255,140,66,0.045) 0%,
                    rgba(94,106,210,0.025) 30%,
                    transparent 65%),
    radial-gradient(ellipse 80% 50% at 100% 100%,
                    rgba(94,106,210,0.020) 0%,
                    transparent 50%),
    var(--background);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  letter-spacing: -0.011em;
  min-height: 100vh;
  font-optical-sizing: auto;
  /* Linear signature — cv01 single-story 'a' + ss03 geometric alternates
     These two features transform Inter from generic to Linear-grade */
  font-variation-settings: 'opsz' 16, 'wght' 510;
  font-feature-settings: 'cv01', 'ss03', 'cv02', 'cv03', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* ═══ Mobile UX hardening ═══ */
  overscroll-behavior-y: none;
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;

  transition: background var(--duration-smooth) var(--ease-out-expo),
              color var(--duration-smooth) var(--ease-out-expo);
}

/* Subtle vignette overlay — adds cinematic edge focus
   Pointer-events:none so it never blocks interaction */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center,
                              transparent 0%,
                              transparent 65%,
                              rgba(0,0,0,0.25) 100%);
}

/* All content sits above the vignette */
body > * { position: relative; z-index: 1; }

/* Re-enable text selection for content areas (chat, code blocks, etc.) */
input, textarea, [contenteditable], pre, code, .selectable {
  -webkit-user-select: text;
  user-select: text;
}

/* ─── Utility Classes ─── */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
[x-cloak] { display: none !important; }

/* ─── Type Scale (1.250 — Major Third) ─── */
h1, h2, h3 {
  font-weight: 590;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--text-primary);
}
h1 { font-size: 1.953rem; font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: 1.563rem; }
h3 { font-size: 1.25rem; font-weight: 510; }

.label {
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ─── Micro-interactions ─── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Input focus consistency — consistent ring using existing tokens */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

button {
  font-family: inherit;
  transition: transform var(--duration-fast) var(--ease-out-expo),
              background var(--duration-normal) var(--ease-out-expo),
              border-color var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo);
}

button:active:not(:disabled) {
  transform: scale(0.997);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.dot-pulse { animation: pulse-dot 2s ease-in-out infinite; }

.skeleton {
  background: linear-gradient(90deg, var(--skeleton) 25%, var(--bg-hover) 50%, var(--skeleton) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Shared Components ─── */

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent), #B8703A);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(212,149,90,0.15);
  flex-shrink: 0;
}

.brand-mark svg {
  width: 20px;
  height: 20px;
}

.brand-text h1 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.brand-text p {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Nav Tabs — unified across all pages */
.nav-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-normal) var(--ease-out-expo),
              border-color var(--duration-normal) var(--ease-out-expo);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}

.nav-tab:hover {
  color: var(--text-primary);
}

.nav-tab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  border-bottom-width: 2px;
  font-weight: 510;
  font-variation-settings: 'opsz' 14, 'wght' 510;
}

.nav-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.nav-tab .badge {
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  background: var(--surface-raised);
  color: var(--fg-tertiary);
  border-radius: var(--radius-pill);
  font-weight: 510;
  font-variation-settings: 'opsz' 10, 'wght' 510;
}

.nav-tab.active .badge {
  background: var(--accent-muted);
  color: var(--accent);
}

.nav-tab.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nav-tab svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Mobile: tighten nav padding to fit all tabs without scroll */
@media (max-width: 640px) {
  .nav-tab {
    padding: 8px 12px;
    gap: 4px;
    font-size: 0.78rem;
  }
  .nav-tab svg {
    width: 14px;
    height: 14px;
  }
  /* Hide text labels on very narrow screens — icon-only nav */
  .nav-tab .tab-label {
    display: none;
  }
  /* Header: reduce brand text size */
  .brand-text h1 { font-size: 1rem; }
  .brand-text p { font-size: 11px; }
  .header { padding: 10px 0; }
}

/* Tablet / small desktop */
@media (min-width: 641px) and (max-width: 1024px) {
  .nav-tab {
    padding: 8px 12px;
  }
}

/* Landscape phone: compact header */
@media (max-height: 500px) and (orientation: landscape) {
  .header { padding: 8px 0; }
  .brand-mark { width: 28px; height: 28px; }
  .nav-tabs { margin-bottom: 12px; }
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Theme Toggle */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

/* Cards */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: border-color var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-expo);
}

.card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.card:active:not(:disabled) {
  transform: scale(0.997);
}

/* ─── Stat Card ─────────────────────────────────────────────────────── */
.stat-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-label {
  font-size: var(--text-xs);
  font-weight: 510;
  color: var(--fg-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.stat-value {
  font-size: var(--text-2xl);
  font-weight: 510;
  font-variation-settings: 'opsz' 24, 'wght' 510;
  color: var(--fg);
  line-height: 1.13;
  letter-spacing: -0.7px;
  min-height: 1.13em;
}

.stat-delta {
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
  font-weight: 400;
}

.stat-delta[data-tone="success"]     { color: var(--success); }
.stat-delta[data-tone="warning"]     { color: var(--warning); }
.stat-delta[data-tone="destructive"] { color: var(--destructive); }

.stat-card[data-tone="success"]     { border-left: 3px solid var(--success); }
.stat-card[data-tone="warning"]     { border-left: 3px solid var(--warning); }
.stat-card[data-tone="destructive"] { border-left: 3px solid var(--destructive); }

.stat-card.is-loading .stat-value {
  color: transparent;
  background: linear-gradient(90deg,
    var(--surface-panel) 25%,
    var(--surface-raised) 50%,
    var(--surface-panel) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  width: 80px;
  align-self: flex-start;
}

/* ─── Provider Card ─────────────────────────────────────────────────── */
.provider-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.provider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.provider-name {
  font-size: 0.95rem;
  font-weight: 510;
  color: var(--fg);
  letter-spacing: -0.1px;
}

.provider-stats {
  display: flex;
  gap: 16px;
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
}

.provider-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.provider-footer {
  font-size: 11px;
  color: var(--fg-quaternary);
  font-weight: 400;
}

.provider-card[data-status="degraded"] {
  border-color: rgba(251, 191, 36, 0.2);
}
.provider-card[data-status="offline"] {
  opacity: 0.7;
  border-color: rgba(239, 68, 68, 0.2);
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-quaternary);
  display: inline-block;
  flex-shrink: 0;
}
.badge-dot[data-tone="success"]     { background: var(--success); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); }
.badge-dot[data-tone="warning"]     { background: var(--warning); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15); }
.badge-dot[data-tone="destructive"] { background: var(--destructive); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }

.provider-card.is-loading .provider-name,
.provider-card.is-loading .provider-stat,
.provider-card.is-loading .provider-footer {
  color: transparent;
  background: linear-gradient(90deg,
    var(--surface-panel) 25%,
    var(--surface-raised) 50%,
    var(--surface-panel) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
.provider-card.is-loading .provider-name   { width: 120px; height: 16px; }
.provider-card.is-loading .provider-stat   { width: 60px;  height: 12px; }
.provider-card.is-loading .provider-footer { width: 90px;  height: 11px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
}

.btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-accent {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: transparent;
}

.btn-accent:hover:not(:disabled) {
  background: var(--accent-hover);
}

/* Loading button state — distinct from :disabled */
.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Selection */
::selection {
  background: rgba(255,140,66,0.20);
  color: var(--text-primary);
}

/* ─── Toast Notification ─── */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  padding: 10px 20px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  animation: toastIn var(--duration-smooth) var(--ease-out-expo) forwards;
  pointer-events: auto;
}

.toast.out {
  animation: toastOut var(--duration-normal) var(--ease-out-expo) forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.95); }
}

/* ─── Confirm Dialog ─── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn var(--duration-normal) var(--ease-out-expo);
}

.confirm-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: scaleIn var(--duration-smooth) var(--ease-spring);
}

.confirm-dialog h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.confirm-dialog p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  gap: 10px;
}

.confirm-actions button {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  color: var(--text-primary);
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.confirm-actions button:hover {
  background: var(--bg-hover);
}

.confirm-actions .btn-danger {
  background: var(--destructive);
  color: #fff;
  border-color: var(--destructive);
}

.confirm-actions .btn-danger:hover {
  background: #DC2626;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Empty state — premium placeholder (Session 7) */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  color: var(--fg-quaternary);
  opacity: 0.6;
}
.empty-state .empty-title {
  font-size: 1.125rem;
  font-weight: 510;
  color: var(--fg-secondary);
  margin: 0;
}
.empty-state .empty-description {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  max-width: 320px;
  margin: 0 0 16px 0;
  line-height: 1.5;
}
.empty-state .btn {
  margin-top: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   COMPONENT POLISH — Session 7 Round 2
   Spec: 07-COMPONENT-SPEC.md
   ============================================================ */

/* 5. MODAL */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  animation: modal-fade-in var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
.modal-overlay[hidden] { display: none; }
.modal-panel {
  background: var(--surface-high, #15171c);
  border: 1px solid var(--border-default, rgba(255,255,255,0.07));
  border-radius: 12px;
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.5));
  max-height: 85vh;
  overflow-y: auto;
  transform: scale(0.96);
  animation: modal-scale-in var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
.modal-sm { max-width: 400px; width: 90%; }
.modal-md { max-width: 560px; width: 90%; }
.modal-lg { max-width: 720px; width: 90%; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
}
.modal-title {
  font-size: 1.0625rem;
  font-weight: 510;
  font-variation-settings: 'opsz' 16, 'wght' 510;
  color: var(--fg, #f5f5f5);
  margin: 0;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary, #8b8b8b);
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.modal-close:hover { background: var(--surface-raised, #1a1d24); color: var(--fg, #f5f5f5); }
.modal-close:focus-visible { outline: 2px solid var(--accent, #FF8C42); outline-offset: 2px; }
.modal-body { padding: 22px; font-size: 0.9375rem; color: var(--fg-secondary, #c5c5c5); line-height: 1.55; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.04)); }
@keyframes modal-fade-in { to { opacity: 1; } }
@keyframes modal-scale-in { to { transform: scale(1); } }

/* 6. DROPDOWN / MENU */
.dropdown { position: relative; display: inline-block; }
.dropdown-trigger {
  background: transparent;
  border: none;
  color: var(--text-tertiary, #8b8b8b);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: all var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.dropdown-trigger:hover { background: var(--surface-raised, #1a1d24); color: var(--fg, #f5f5f5); }
.dropdown-trigger:focus-visible { outline: 2px solid var(--accent, #FF8C42); outline-offset: 2px; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  min-width: 180px;
  background: var(--surface-high, #15171c);
  border: 1px solid var(--border-default, rgba(255,255,255,0.07));
  border-radius: 10px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.4));
  padding: 6px;
  z-index: 50;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  animation: dropdown-in var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
.dropdown-right { right: 0; }
.dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--fg-secondary, #c5c5c5);
  font-size: 0.875rem;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.dropdown-item:hover, .dropdown-item:focus-visible { background: var(--surface-raised, #1a1d24); color: var(--fg, #f5f5f5); outline: none; }
.dropdown-item.dropdown-danger:hover, .dropdown-item.dropdown-danger:focus-visible { color: var(--destructive, #ef4444); background: rgba(239, 68, 68, 0.08); }
@keyframes dropdown-in { to { opacity: 1; transform: translateY(0) scale(1); } }

/* 3. MODEL PICKER */
.model-picker { position: relative; display: inline-block; width: 100%; }
.picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-input, #0e1014);
  border: 1px solid var(--border-default, rgba(255,255,255,0.07));
  border-radius: 8px;
  color: var(--fg, #f5f5f5);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.picker-trigger:hover { border-color: var(--border-strong, rgba(255,255,255,0.12)); }
.picker-trigger:active { transform: scale(0.997); }
.picker-trigger:focus-visible { outline: 2px solid var(--accent, #FF8C42); outline-offset: 2px; }
.picker-trigger[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.picker-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variation-settings: 'opsz' 14, 'wght' 510; }
.picker-chevron { width: 14px; height: 14px; color: var(--text-tertiary, #8b8b8b); transition: transform var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); }
.model-picker[data-open="true"] .picker-chevron { transform: rotate(180deg); }
.picker-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  background: var(--surface-high, #15171c);
  border: 1px solid var(--border-default, rgba(255,255,255,0.07));
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.5));
  z-index: 50;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  animation: dropdown-in var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
}
.picker-search { padding: 10px 12px; background: var(--surface-input, #0e1014); border: none; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04)); color: var(--fg, #f5f5f5); font-size: 0.8125rem; font-family: inherit; }
.picker-search::placeholder { color: var(--text-tertiary, #8b8b8b); }
.picker-search:focus { outline: 2px solid var(--accent, #FF8C42); outline-offset: -2px; }
.picker-groups { flex: 1; overflow-y: auto; padding: 4px 0; }
.picker-group-label { padding: 8px 12px 4px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary, #8b8b8b); font-weight: 500; }
.picker-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--fg-secondary, #c5c5c5);
  font-size: 0.8125rem;
  font-family: 'Geist Mono', 'JetBrains Mono', monospace;
  text-align: left;
  cursor: pointer;
  transition: all var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.picker-option:hover, .picker-option:focus-visible { background: var(--surface-raised, #1a1d24); color: var(--fg, #f5f5f5); outline: none; }
.picker-option[aria-selected="true"] { background: rgba(255, 140, 66, 0.08); border-left: 2px solid var(--accent, #FF8C42); color: var(--fg, #f5f5f5); }

/* 4. CHAT BUBBLE */
.chat-bubble { display: flex; flex-direction: column; max-width: 720px; margin: 12px 0; }
.chat-bubble[data-role="user"] { align-self: flex-end; align-items: flex-end; }
.chat-bubble[data-role="user"] .bubble-content { background: var(--surface-raised, #1a1d24); border-radius: 14px 14px 4px 14px; }
.chat-bubble[data-role="assistant"] { align-self: flex-start; }
.chat-bubble[data-role="assistant"] .bubble-content { background: var(--surface-panel, #15171c); border: 1px solid var(--border-subtle, rgba(255,255,255,0.04)); border-radius: 14px 14px 14px 4px; }
.chat-bubble[data-role="system"] { align-self: center; text-align: center; font-style: italic; color: var(--text-tertiary, #8b8b8b); }
.chat-bubble[data-role="system"] .bubble-content { background: transparent; font-size: 0.8125rem; }
.bubble-header { display: flex; align-items: center; gap: 8px; padding: 0 4px 6px; font-size: 0.6875rem; color: var(--text-tertiary, #8b8b8b); }
.bubble-role { font-weight: 500; text-transform: capitalize; }
.bubble-time { margin-left: auto; font-variant-numeric: tabular-nums; }
.bubble-content { padding: 12px 16px; font-size: 0.9375rem; line-height: 1.6; color: var(--fg, #f5f5f5); word-wrap: break-word; }
.bubble-content code.mono { background: var(--surface-raised, #1a1d24); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
.bubble-content pre.mono { background: var(--surface-deep, #08090c); padding: 12px; border-radius: 8px; overflow-x: auto; margin: 8px 0; border: 1px solid var(--border-subtle, rgba(255,255,255,0.04)); }
.bubble-actions { display: flex; gap: 4px; padding: 4px 0 0; opacity: 0; transition: opacity var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); }
.chat-bubble:hover .bubble-actions { opacity: 1; }
.action-btn { background: transparent; border: none; color: var(--text-tertiary, #8b8b8b); padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 0.875rem; transition: all var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); }
.action-btn:hover { background: var(--surface-raised, #1a1d24); color: var(--fg, #f5f5f5); }
.action-btn:focus-visible { outline: 2px solid var(--accent, #FF8C42); outline-offset: 1px; }
.streaming-cursor { display: inline-block; animation: blink 1s steps(2) infinite; color: var(--accent, #FF8C42); margin-left: 2px; font-weight: 500; }
@keyframes blink { 50% { opacity: 0; } }

/* 8. BUTTON POLISH — additional variants */
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--fg-secondary, #c5c5c5); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-raised, #1a1d24); transform: translateY(-1px); }
.btn-ghost:active:not(:disabled) { transform: scale(0.997); }
.btn-ghost:focus-visible { outline: 2px solid var(--accent, #FF8C42); outline-offset: 2px; }
.btn-danger { background: var(--destructive, #ef4444); color: white; border: 1px solid var(--destructive, #ef4444); }
.btn-danger:hover:not(:disabled) { background: #dc2626; transform: translateY(-1px); }
.btn-danger:active:not(:disabled) { transform: scale(0.997); }
.btn-danger:focus-visible { outline: 2px solid var(--accent, #FF8C42); outline-offset: 2px; }

/* 9. INPUT POLISH */
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-label { font-size: 0.8125rem; color: var(--fg-secondary, #c5c5c5); font-weight: 500; }
.input { padding: 10px 14px; background: var(--surface-input, #0e1014); border: 1px solid var(--border-default, rgba(255,255,255,0.07)); border-radius: 8px; color: var(--fg, #f5f5f5); font-size: 0.875rem; font-family: inherit; transition: all var(--duration-normal, 250ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); }
.input::placeholder { color: var(--text-tertiary, #8b8b8b); }
.input:hover { border-color: var(--border-strong, rgba(255,255,255,0.12)); }
.input:focus { outline: none; border-color: var(--accent, #FF8C42); box-shadow: 0 0 0 2px rgba(255, 140, 66, 0.2); background: var(--surface-raised, #1a1d24); }
.input[aria-invalid="true"] { border-color: var(--destructive, #ef4444); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15); }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input-error { font-size: 0.75rem; color: var(--destructive, #ef4444); margin-top: 2px; }