:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #172033;
  --muted: #64748b;
  --line: #dbe3ed;
  --primary: #0f766e;
  --primary-dark: #115e59;
  --secondary: #164e63;
  --danger: #b91c1c;
  --warning: #c2410c;
  --success: #15803d;
  --shadow: 0 16px 38px rgba(15, 23, 42, .08);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: linear-gradient(180deg, #edf6f5 0, var(--bg) 270px);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--primary); }
.hidden { display: none !important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.app-shell { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px clamp(16px, 4vw, 52px);
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(203,213,225,.8);
}
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:42px; height:42px; }
.brand-title { font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
.brand-subtitle { color:var(--muted); font-size:.78rem; }
.status-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pill { display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:#fff;color:var(--muted);font-size:.76rem;font-weight:650; }
.pill.good { color:var(--success);background:#f0fdf4;border-color:#bbf7d0; }
.pill.warn { color:var(--warning);background:#fff7ed;border-color:#fed7aa; }
.hero { padding: 40px clamp(18px, 5vw, 70px) 24px; max-width:1500px; margin:auto; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:28px; align-items:center; }
.eyebrow { color:var(--primary); font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
h1 { margin:.35rem 0 .7rem;font-size:clamp(2rem,5vw,4rem);line-height:1.04;letter-spacing:-.055em;max-width:900px; }
.hero p { color:#475569;font-size:1.04rem;max-width:850px; }
.hero-card { background:linear-gradient(145deg,#0f766e,#164e63);color:#fff;border-radius:24px;padding:24px;box-shadow:var(--shadow); }
.hero-card h2 { margin:0 0 10px;font-size:1.15rem; }
.hero-card ul { margin:0;padding-left:20px; }
.layout { max-width:1500px; margin:auto; padding:0 clamp(16px,4vw,52px) 60px; display:grid; grid-template-columns:245px minmax(0,1fr); gap:26px; }
.sidebar { position:sticky;top:82px;align-self:start;background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow); }
.nav-btn { width:100%;border:0;background:transparent;text-align:left;padding:11px 12px;border-radius:12px;color:#475569;font-weight:700;display:flex;align-items:center;gap:10px; }
.nav-btn:hover,.nav-btn.active { background:#e6f4f2;color:var(--primary-dark); }
.nav-icon { width:24px;text-align:center; }
.content { min-width:0; }
.panel { display:none;animation:fade .2s ease; }
.panel.active { display:block; }
@keyframes fade { from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none} }
.card { background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,3vw,28px);box-shadow:var(--shadow);margin-bottom:20px; }
.card h2,.card h3 { margin-top:0;letter-spacing:-.02em; }
.section-head { display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px; }
.section-head p { margin:.3rem 0 0;color:var(--muted); }
.grid-2 { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.grid-3 { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.form-grid { display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px; }
.field { display:flex;flex-direction:column;gap:6px; }
.field label { font-weight:750;font-size:.84rem; }
.field small { color:var(--muted);font-size:.72rem; }
.input-wrap { position:relative; }
input, select, textarea { width:100%;border:1px solid #cbd5e1;border-radius:11px;padding:11px 12px;background:#fff;color:var(--text);outline:none;transition:.15s; }
input:focus,select:focus,textarea:focus { border-color:#2aa198;box-shadow:0 0 0 3px rgba(15,118,110,.12); }
.input-wrap input { padding-right:58px; }
.unit { position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.72rem;font-weight:700;pointer-events:none; }
.check { display:flex;gap:9px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line); }
.check input { width:auto;margin-top:3px; }
.actions { display:flex;gap:10px;flex-wrap:wrap;margin-top:18px; }
.btn { border:1px solid transparent;border-radius:11px;padding:10px 15px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px; }
.btn-primary { background:var(--primary);color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-secondary { background:#fff;border-color:#cbd5e1;color:#334155; }
.btn-danger { background:#fff1f2;color:#be123c;border-color:#fecdd3; }
.notice { border-left:4px solid var(--primary);background:#ecfdf5;padding:13px 15px;border-radius:10px;color:#334155;margin:14px 0; }
.notice.warning { border-color:var(--warning);background:#fff7ed; }
.notice.danger { border-color:var(--danger);background:#fef2f2; }
.notice strong { display:block;margin-bottom:3px; }
.error-list { margin:0;padding-left:20px; }
.metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.metric { background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px; }
.metric-label { color:var(--muted);font-size:.75rem;font-weight:750;text-transform:uppercase;letter-spacing:.04em; }
.metric-value { font-size:1.5rem;font-weight:850;letter-spacing:-.03em;margin-top:4px; }
.metric-note { color:var(--muted);font-size:.72rem;margin-top:3px; }
.result-grid { display:grid;grid-template-columns:minmax(280px,.85fr) minmax(300px,1.15fr);gap:18px; }
.risk-card { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#f8fffe,#eef8f7); }
.gauge { --angle:90deg; width:210px;height:105px;overflow:hidden;position:relative;margin:10px auto; }
.gauge::before { content:"";position:absolute;width:190px;height:190px;border-radius:50%;left:10px;top:10px;background:conic-gradient(from 270deg,#0f766e var(--angle),#dbe7e5 0 180deg,transparent 0); }
.gauge::after { content:"";position:absolute;width:132px;height:132px;border-radius:50%;left:39px;top:39px;background:#f8fffe; }
.gauge-value { position:absolute;z-index:2;left:0;right:0;bottom:0;font-size:2rem;font-weight:900; }
.risk-label { font-weight:850;font-size:1.15rem; }
.tag { display:inline-flex;border-radius:999px;padding:5px 9px;font-size:.73rem;font-weight:800;border:1px solid; }
.tag.low { color:#166534;background:#f0fdf4;border-color:#bbf7d0; }
.tag.mid { color:#9a3412;background:#fff7ed;border-color:#fed7aa; }
.tag.high { color:#991b1b;background:#fef2f2;border-color:#fecaca; }
.contrib-list { display:grid;gap:9px; }
.contrib-row { display:grid;grid-template-columns:170px 1fr 55px;gap:10px;align-items:center;font-size:.8rem; }
.contrib-bar { height:9px;border-radius:999px;background:#e2e8f0;overflow:hidden;position:relative; }
.contrib-fill { height:100%;border-radius:999px;background:var(--primary); }
.contrib-fill.negative { background:#64748b; }
.list-clean { list-style:none;padding:0;margin:0;display:grid;gap:9px; }
.list-clean li { padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px; }
.table-wrap { overflow:auto;border:1px solid var(--line);border-radius:12px; }
table { width:100%;border-collapse:collapse;font-size:.82rem; }
th,td { padding:10px 11px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap; }
th { background:#f1f5f9;position:sticky;top:0;z-index:1; }
.dropzone { border:2px dashed #94a3b8;border-radius:16px;padding:28px;text-align:center;background:#f8fafc; }
.model-banner { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;background:#0f172a;color:#dbeafe;padding:14px;border-radius:12px;overflow:auto; }
.footer { padding:30px 18px;text-align:center;color:var(--muted);border-top:1px solid var(--line);background:#fff; }
.modal-backdrop { position:fixed;inset:0;background:rgba(15,23,42,.72);z-index:100;display:grid;place-items:center;padding:18px; }
.modal { width:min(720px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:22px;padding:26px;box-shadow:0 32px 80px rgba(0,0,0,.25); }
.modal h2 { margin-top:0; }
.mobile-nav { display:none; }
@media (max-width: 1050px) {
  .hero-grid { grid-template-columns:1fr; }
  .layout { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .mobile-nav { display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:55;background:rgba(255,255,255,.96);border-top:1px solid var(--line);padding:6px;backdrop-filter:blur(12px); }
  .mobile-nav .nav-btn { text-align:center;display:block;padding:7px 3px;font-size:.65rem; }
  .mobile-nav .nav-icon { display:block;margin:auto;font-size:1rem; }
  .footer { padding-bottom:80px; }
}
@media (max-width: 760px) {
  .status-pills .pill:not(.good) { display:none; }
  .hero { padding-top:24px; }
  .form-grid,.grid-2,.grid-3,.metrics,.result-grid,.model-banner { grid-template-columns:1fr; }
  .card { padding:17px; }
  .contrib-row { grid-template-columns:120px 1fr 46px; }
  h1 { font-size:2.25rem; }
}
@media print {
  .topbar,.sidebar,.mobile-nav,.hero,.actions,.footer { display:none!important; }
  .layout { display:block;padding:0; }
  .panel { display:block!important; }
  .card { box-shadow:none;break-inside:avoid; }
}