/* Mirrors docs/BRAND_GUIDE.md Dark Blueprint Mode. */
:root {
  color-scheme: dark;
  --bg:#0D1B2A;
  --surface:#142640;
  --surface-2:#1A2D52;
  --surface-3:#1E3158;
  --edge:#1E3158;
  --edge-strong:#2A3F66;
  --ink:#E8E8E8;
  --ink-soft:#A8B8D9;
  --ink-muted:#64748B;
  --navy:#1B3A72;
  --navy-light:#3D5A9C;
  --navy-lighter:#7894C5;
  --navy-ghost:#D6E0F0;
  --amber:#F5A623;
  --danger:#DC2626;
  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Satoshi", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing:border-box; }
body {
  margin:0;
  min-height:100vh;
  font:14px/1.45 var(--font-body);
  color:var(--ink);
  background:
    linear-gradient(rgba(120,148,197,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,148,197,.035) 1px, transparent 1px),
    var(--bg);
  background-size:32px 32px;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(20,38,64,.84), rgba(13,27,42,.36) 26%, rgba(13,27,42,.92));
  z-index:-1;
}
nav {
  height:58px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 28px;
  border-bottom:1px solid var(--edge);
  background:rgba(13,27,42,.92);
  backdrop-filter:saturate(140%) blur(10px);
  position:sticky;
  top:0;
  z-index:2;
}
nav a {
  color:var(--ink-soft);
  text-decoration:none;
  font:500 13px/1 var(--font-display);
}
nav a:first-child {
  color:var(--ink);
  padding-left:14px;
  border-left:3px solid var(--amber);
}
nav a:hover { color:var(--ink); }
main { max-width:1280px; margin:0 auto; padding:30px 28px 42px; }
h1 {
  font:500 32px/1.12 var(--font-display);
  margin:0 0 8px;
  letter-spacing:0;
}
h2 {
  font:500 17px/1.2 var(--font-display);
  margin:0 0 14px;
  letter-spacing:0;
}
p { color:var(--ink-soft); margin:0; max-width:780px; }
a { color:var(--navy-lighter); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--ink); }
code {
  white-space:normal;
  overflow-wrap:anywhere;
  color:var(--navy-ghost);
  background:rgba(214,224,240,.08);
  border:1px solid rgba(214,224,240,.1);
  border-radius:6px;
  padding:1px 5px;
}
.hero {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  margin-bottom:22px;
  padding:18px 0 8px;
}
.batch {
  max-width:430px;
  color:var(--ink-muted);
  text-align:right;
  font-size:13px;
}
.metrics {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin:18px 0;
}
.metric {
  display:block;
  min-height:86px;
  padding:16px;
  color:var(--ink);
  text-decoration:none;
  background:linear-gradient(180deg, rgba(26,45,82,.92), rgba(20,38,64,.96));
  border:1px solid var(--edge);
  border-radius:8px;
}
a.metric:hover {
  border-color:var(--edge-strong);
  background:var(--surface-2);
}
.metric > span {
  display:block;
  color:var(--ink-muted);
  margin-bottom:8px;
  font:500 12px/1.2 var(--font-display);
  text-transform:uppercase;
}
.metric strong {
  font:500 28px/1 var(--font-display);
  color:var(--ink);
}
.panel {
  background:rgba(20,38,64,.96);
  border:1px solid var(--edge);
  border-radius:8px;
  padding:18px;
  margin:16px 0;
  overflow:auto;
}
.toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
}
.toolbar > span { color:var(--ink-soft); }
form { display:flex; gap:8px; width:min(900px,100%); }
.inline-check {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ink-soft);
  white-space:nowrap;
}
.editor-form {
  display:block;
  width:100%;
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.field {
  display:grid;
  gap:6px;
  color:var(--ink-soft);
  font:500 12px/1.2 var(--font-display);
}
.field-full {
  margin-top:12px;
}
.field span,
.check-list h3 {
  color:var(--ink-muted);
  font:500 11px/1.15 var(--font-display);
  text-transform:uppercase;
}
input, textarea, select {
  flex:1;
  min-width:160px;
  padding:10px 12px;
  border:1px solid var(--edge-strong);
  border-radius:6px;
  font:inherit;
  color:var(--ink);
  background:var(--surface);
}
textarea {
  width:100%;
  min-height:96px;
  resize:vertical;
}
select { width:100%; }
input[type="checkbox"] {
  flex:0 0 auto;
  min-width:0;
  width:16px;
  height:16px;
  accent-color:var(--amber);
}
input::placeholder { color:var(--ink-muted); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, .button-link:focus-visible, a:focus-visible {
  outline:2px solid var(--amber);
  outline-offset:2px;
}
button, .button-link {
  padding:10px 14px;
  border:1px solid var(--amber);
  color:#0D1B2A;
  background:var(--amber);
  border-radius:6px;
  font:700 13px/1 var(--font-body);
}
button:hover, .button-link:hover { filter:brightness(1.05); color:#0D1B2A; }
.button-link {
  align-self:flex-start;
  display:inline-block;
  text-decoration:none;
}
.button-link.secondary {
  color:var(--ink-soft);
  background:var(--surface-2);
  border-color:var(--edge-strong);
}
.action-bar { display:flex; gap:6px; flex-wrap:wrap; min-width:220px; }
.action-form { display:inline-flex; width:auto; gap:0; }
.action-form button {
  padding:7px 9px;
  font-size:12px;
  background:var(--surface-2);
  color:var(--ink-soft);
  border-color:var(--edge-strong);
}
.action-form:first-child button {
  color:var(--amber);
  background:rgba(245,166,35,.08);
  border-color:rgba(245,166,35,.62);
}
.suggestion-card {
  max-width:780px;
  margin:22px auto;
  padding:24px;
  border:1px solid var(--edge-strong);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(26,45,82,.98), rgba(20,38,64,.98));
}
.suggestion-card-head {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:22px;
}
.suggestion-card h2 {
  margin:12px 0 6px;
  font-size:24px;
}
.confidence {
  min-width:136px;
  padding:14px;
  border:1px solid rgba(245,166,35,.42);
  border-radius:8px;
  text-align:center;
  background:rgba(245,166,35,.08);
}
.confidence span {
  display:block;
  color:var(--ink-muted);
  font:500 11px/1 var(--font-display);
  text-transform:uppercase;
  margin-bottom:8px;
}
.confidence strong {
  color:var(--amber);
  font:700 26px/1 var(--font-display);
}
.suggestion-actions {
  width:100%;
  margin-top:22px;
  justify-content:flex-end;
}
.suggestion-actions.stacked {
  display:grid;
  gap:12px;
}
.secondary-button {
  color:var(--ink-soft);
  background:var(--surface-2);
  border-color:var(--edge-strong);
}
table { width:100%; border-collapse:collapse; }
thead { background:rgba(13,27,42,.38); }
th,td {
  border-bottom:1px solid var(--edge);
  padding:10px 8px;
  text-align:left;
  vertical-align:top;
}
tr:hover td { background:rgba(30,49,88,.36); }
th {
  color:var(--ink-muted);
  font:500 11px/1.15 var(--font-display);
  text-transform:uppercase;
}
.grid.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid.three { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.profile {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:16px;
}
.identity-list { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.identity-list li { display:grid; grid-template-columns:90px 1fr auto; gap:10px; align-items:start; }
.identity-list span, .identity-list em { color:var(--ink-muted); font-style:normal; }
dl { display:grid; grid-template-columns:140px 1fr; gap:8px 12px; margin:0; }
dt { color:var(--ink-muted); }
dd { margin:0; color:var(--ink); }
.muted { color:var(--ink-muted); font-size:12px; }
.check-list {
  display:grid;
  gap:8px;
  align-content:start;
}
.check-list h3 { margin:0 0 4px; }
.check-row,
.checkbox-inline {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink-soft);
}
.form-actions {
  display:flex;
  width:100%;
  gap:10px;
  justify-content:flex-end;
  margin:18px 0;
}
.score-dl dd { font-weight:700; }
.score-stack { display:grid; gap:6px; min-width:112px; }
.score-stack span { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ink-muted); }
.score {
  display:inline-flex;
  min-width:34px;
  height:28px;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font:800 13px/1 var(--font-body);
  background:var(--surface-3);
  color:var(--ink-soft);
  border:1px solid var(--edge-strong);
}
.score-high { background:rgba(79,184,166,.15); color:#4FB8A6; border-color:rgba(79,184,166,.38); }
.score-medium { background:rgba(212,181,129,.15); color:#D4B581; border-color:rgba(212,181,129,.38); }
.score-low { background:rgba(148,163,184,.14); color:#94A3B8; border-color:rgba(148,163,184,.28); }
.pill {
  display:inline-block;
  padding:4px 8px;
  border:1px solid var(--edge-strong);
  border-radius:999px;
  background:rgba(214,224,240,.07);
  color:var(--ink-soft);
  white-space:nowrap;
}
.reason { margin-top:12px; font-size:13px; color:var(--ink-soft); }
.pager { display:flex; justify-content:center; gap:18px; align-items:center; margin:18px 0; }
@media (max-width: 920px) { .grid.three { grid-template-columns:1fr; } }
@media (max-width: 760px) {
  main { padding:18px; }
  nav { overflow:auto; padding:0 16px; }
  .hero,.toolbar,.profile { display:block; }
  .batch { text-align:left; margin-top:12px; }
  .grid.two { grid-template-columns:1fr; }
  .suggestion-card-head, .suggestion-actions { display:block; }
  .suggestion-actions button { margin:8px 8px 0 0; }
  .form-actions { justify-content:flex-start; }
}