:root {
  color-scheme: light;
  --bg:#f6f8fb; --paper:#fff; --paper-2:#f8fafc; --text:#172033; --muted:#66758a; --line:#d9e2ec;
  --navy:#0b1726; --navy-2:#13243a; --teal:#0f766e; --teal-2:#115e59; --gold:#b45309;
  --green:#047857; --red:#b91c1c; --blue:#0369a1;
  --ok-bg:#ecfdf5; --warn-bg:#fffbeb; --bad-bg:#fef2f2; --info-bg:#eff6ff;
  --shadow:0 14px 34px rgba(15,23,42,.10); --radius:22px; --focus:0 0 0 3px rgba(15,118,110,.25);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0f172a; --paper:#142033; --paper-2:#1e293b; --text:#e5edf7; --muted:#a8b6c8; --line:#334155;
  --ok-bg:#06281e; --warn-bg:#332205; --bad-bg:#351111; --info-bg:#0b2539; --shadow:0 18px 40px rgba(0,0,0,.25);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:radial-gradient(circle at top left, rgba(15,118,110,.13), transparent 34rem), var(--bg);
  color:var(--text);
  line-height:1.45;
}
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible { outline:none; box-shadow:var(--focus); }

.app { display:grid; grid-template-columns:292px minmax(0,1fr); min-height:100vh; }
.sidebar {
  position:sticky; top:0; height:100vh; overflow:auto;
  background:linear-gradient(180deg,var(--navy-2),var(--navy));
  color:#dce7f4; padding:22px 16px;
}
.brand { border-bottom:1px solid rgba(255,255,255,.12); padding:0 8px 18px; margin-bottom:16px; }
.brand h1 { font-size:1.28rem; line-height:1.07; margin:12px 0 7px; color:#fff; letter-spacing:-.04em; }
.brand p { color:#b8c5d6; margin:0 0 12px; }
.nav { display:grid; gap:8px; }
.nav button {
  width:100%; border:1px solid transparent; border-radius:14px; background:transparent; color:#b8c5d6;
  padding:12px 13px; text-align:left; font-weight:850;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.nav button:hover,.nav button.active { background:linear-gradient(135deg,var(--teal),var(--teal-2)); color:#fff; }
.nav button:hover { transform:translateX(2px); }
.sidebar-foot { color:#b8c5d6; font-size:.75rem; margin-top:18px; padding:10px 8px; border-top:1px solid rgba(255,255,255,.12); }

.main { min-width:0; }
.topbar {
  position:sticky; top:0; z-index:4;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:16px 26px;
  display:flex; justify-content:space-between; gap:14px; align-items:center;
}
.topbar h2 { margin:0; font-size:1.35rem; letter-spacing:-.04em; }
.topbar p { margin:2px 0 0; color:var(--muted); font-size:.9rem; }
.top-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.body { padding:26px; }
.screen { display:none; }
.screen.active { display:block; }

.hero,.card {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); margin-bottom:16px;
}
.hero { background:linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--teal) 9%,var(--paper))); }
.hero h2 { font-size:clamp(2rem,4vw,3.15rem); line-height:1; margin:0; letter-spacing:-.06em; }
.hero p,.muted { color:var(--muted); }

.grid { display:grid; gap:16px; margin-bottom:16px; }
.grid.no-margin { margin-bottom:0; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }

.btn {
  border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-weight:900;
  background:var(--paper); color:var(--text); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; margin:2px;
}
.btn.primary { background:linear-gradient(135deg,var(--teal),var(--teal-2)); border:0; color:#fff; }
.btn.danger { background:var(--bad-bg); color:var(--red); border-color:#fecaca; }
.button-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.field { display:grid; gap:6px; margin:10px 0; font-size:.78rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.field input,.field select,.field textarea {
  width:100%; border:1px solid var(--line); background:var(--paper); color:var(--text); border-radius:12px; padding:10px;
  text-transform:none; letter-spacing:0; font-weight:500;
}
.field textarea { min-height:150px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86rem; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:15px; background:var(--paper); }
.table { width:100%; border-collapse:collapse; font-size:.88rem; }
.table th,.table td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.table th { background:var(--paper-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }

.badge {
  display:inline-flex; align-items:center; border-radius:999px; border:1px solid var(--line);
  padding:4px 9px; font-size:.74rem; font-weight:900;
}
.ok { background:var(--ok-bg); color:var(--green); border-color:#a7f3d0; }
.warn { background:var(--warn-bg); color:var(--gold); border-color:#fcd34d; }
.bad { background:var(--bad-bg); color:var(--red); border-color:#fecaca; }
.info { background:var(--info-bg); color:var(--blue); border-color:#bfdbfe; }
.neutral { background:var(--paper-2); color:var(--muted); }
.metric { font-size:2.05rem; font-weight:950; letter-spacing:-.06em; }
.notice { border:1px solid #fcd34d; background:var(--warn-bg); color:var(--gold); border-radius:16px; padding:14px; margin-bottom:16px; }
.bar { height:10px; background:var(--paper-2); border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.bar i { display:block; height:100%; background:linear-gradient(90deg,var(--teal),#c7792d); }
.step { display:flex; gap:12px; align-items:flex-start; margin:12px 0; }
.num { min-width:30px; height:30px; border-radius:999px; background:var(--teal); color:white; display:grid; place-items:center; font-weight:950; }
.report {
  white-space:pre-wrap; background:#0b1726; color:#e5edf7; border-radius:16px; padding:16px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.84rem; overflow:auto;
}
.loading { display:none; margin:10px 0; color:var(--muted); font-weight:800; }
.loading.show { display:block; }

.diag {
  position:fixed; inset:auto 18px 18px auto; width:min(620px,calc(100vw - 36px)); max-height:74vh; overflow:auto;
  background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.22);
  padding:18px; z-index:20; display:none;
}
.diag.open { display:block; }

@media(max-width:980px){
  .app { grid-template-columns:1fr; }
  .sidebar { position:relative; height:auto; }
  .nav { grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); }
  .topbar { position:relative; align-items:flex-start; flex-direction:column; }
  .top-actions { justify-content:flex-start; }
  .body { padding:16px; }
  .g2,.g3,.g4 { grid-template-columns:1fr; }
}
@media print{
  .sidebar,.topbar,.btn,.diag,.loading { display:none!important; }
  .app { display:block; }
  .screen { display:block!important; }
  .card,.hero { box-shadow:none; break-inside:avoid; }
}