@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root{
  --bg:#f8f9fa; --surface:#ffffff; --ink:#1a1f24; --ink-soft:#4a5568;
  --ink-muted:#718096; --line:#e2e8f0; --purple:#0052cc;
  --purple-soft:#ebf2ff; --purple-mid:#93b4f0; --teal:#0891B2;
  --ok:#1A8A5A; --ok-soft:#E3F5EC; --warn:#D4820A; --warn-soft:#FEF3DA;
  --risk:#C53030; --risk-soft:#FDE8E8;
  --grad:linear-gradient(135deg,#0041a8 0%,#0052cc 100%);
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --sh-lg:0 4px 16px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.05);
  --r:8px; --r-sm:6px;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ── Header: white with blue accent bar + soft shadow ── */
.app-header,header{
  background:var(--surface);
  color:var(--ink);
  border-top:3px solid var(--purple);
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  padding:0;
}

.eyebrow{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--purple);
  font-weight:600;
  margin-bottom:3px;
}

h1{
  font-size:clamp(20px,4vw,26px);
  font-weight:600;
  line-height:1.1;
  margin:3px 0;
  letter-spacing:-.02em;
}

.back{
  font-size:11px;
  color:var(--ink-muted);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:6px;
  transition:color .15s;
}
.back:hover{color:var(--purple)}

/* ── Search on light header (higher specificity beats tool-level .tab-search) ── */
.app-header .tab-search,header .tab-search{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--bg);
  color:var(--ink);
  width:140px;
  flex-shrink:0;
  align-self:flex-start;
  margin-top:0;
  transition:border-color .15s,box-shadow .15s;
}
.app-header .tab-search::placeholder,header .tab-search::placeholder{
  color:var(--ink-muted);
}
.app-header .tab-search:focus,header .tab-search:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 1px var(--purple);
  background:var(--surface);
}

/* ── Utility states ── */
.state{
  text-align:center;
  padding:44px 20px;
  color:var(--ink-muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  line-height:1.7;
}
.err{
  background:var(--risk-soft);
  border-radius:var(--r-sm);
  padding:12px 16px;
  color:#7f1d1d;
  font-size:13px;
}

/* ── Mobile: prevent iOS auto-zoom on inputs ── */
@media(max-width:767px){
  input[type=number],input[type=date],input[type=text],
  input[type=search],select,textarea{font-size:16px}
}

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

/* ── Dark mode: follows OS preference ── */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0f1117;
    --surface:#1a2030;
    --ink:#e2e8f0;
    --ink-soft:#a0aec0;
    --ink-muted:#64748b;
    --line:#2d3748;
    --purple:#4d94ff;
    --purple-soft:#0d1e3d;
    --purple-mid:#2e5fa3;
    --teal:#22d3ee;
    --ok:#34d399;
    --ok-soft:#064e3b;
    --warn:#fbbf24;
    --warn-soft:#1c1300;
    --risk:#fc8181;
    --risk-soft:#3b1515;
    --grad:linear-gradient(135deg,#0a1929 0%,#0d2137 100%);
    --sh:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25);
    --sh-lg:0 4px 16px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.25);
  }
  .err{color:#fca5a5}
  .app-header,header{box-shadow:0 2px 8px rgba(0,0,0,.4)}
}