:root {
  --bg:#f3f5f8; --surface:#fff; --ink:#18202a; --muted:#66717f;
  --line:#d9dfe7; --accent:#1358a5; --danger:#a61b1b;
  --warning:#9a5b00; --good:#176b3a;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg)}
.topbar{min-height:64px;display:flex;align-items:center;gap:24px;padding:10px 28px;background:#0f2743;color:#fff;flex-wrap:wrap}
.brand{color:#fff;text-decoration:none;font-weight:750;font-size:1.15rem}
nav{display:flex;gap:14px;flex:1;flex-wrap:wrap}
nav a{color:#dce9f8;text-decoration:none}
.user-box{display:flex;gap:12px;align-items:center}
.link-button{color:#fff;background:transparent;border:0;text-decoration:underline;padding:0;cursor:pointer}
.container{max-width:1320px;margin:0 auto;padding:28px}
.auth-card,.panel,.node-card,.empty{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 6px 20px rgba(20,36,55,.06)}
.auth-card{max-width:480px;margin:50px auto}
.auth-card.wide{max-width:760px}
form label{display:block;font-weight:650;margin:14px 0}
input,select,button{width:100%;padding:11px 12px;border:1px solid #aeb8c5;border-radius:7px;font:inherit;margin-top:6px}
button,input[type=submit]{width:auto;cursor:pointer;background:#eef2f7;color:var(--ink)}
button.primary,input.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.flash{padding:13px 16px;border-radius:8px;margin-bottom:16px;background:#e8eef6;border:1px solid #c8d5e5}
.flash.error{background:#fdeaea;border-color:#ebb2b2;color:#7b1111}
.flash.success{background:#e7f6ed;border-color:#afd7bd;color:#165a32}
.choice-grid,.two-column,.node-grid,.metric-grid{display:grid;gap:16px}
.choice-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.choice{display:block;border:1px solid var(--line);border-radius:10px;padding:18px;text-decoration:none;color:var(--ink);background:#fafcff}
.choice:hover{border-color:var(--accent)}
.two-column{grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);align-items:start}
.node-grid{grid-template-columns:repeat(auto-fit,minmax(310px,1fr));margin:20px 0}
.metric-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.metric{background:#f5f8fc;padding:12px;border-radius:8px}
.metric span{display:block;color:var(--muted);font-size:.86rem;overflow-wrap:anywhere}
.metric strong{display:block;font-size:1.25rem;margin-top:4px}
.node-title,.page-heading,.filters{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}
.badge{display:inline-block;padding:4px 9px;border-radius:999px;background:#e9edf3;font-size:.8rem;text-transform:uppercase}
.trust-verified{border-left:5px solid var(--good)}
.trust-suspicious{border-left:5px solid var(--warning)}
.trust-unknown{border-left:5px solid #687585}
.severity-critical{background:#ffd8d8;color:#771010}
.severity-warning{background:#fff0cc;color:#714400}
.severity-info{background:#dcecff;color:#114c84}
.muted{color:var(--muted)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{border:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
th{background:#edf2f8}
pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;max-width:480px;font-size:.82rem}
code{overflow-wrap:anywhere}
.camera-frame{background:#111;border-radius:10px;overflow:hidden;max-width:640px;margin:16px auto}
video{width:100%;display:block;transform:scaleX(-1)}
.status-box{margin:14px 0;padding:12px;background:#edf2f8;border-radius:8px}
.qr-wrap{display:flex;justify-content:center}
.qr-wrap img{width:260px;height:260px}
.good{color:var(--good)} .bad{color:var(--danger)} .error-list{color:var(--danger)}
.check{display:flex;gap:8px;align-items:center}.check input{width:auto;margin:0}
canvas#history-chart{width:100%;height:auto;background:#fff;border:1px solid var(--line)}
@media(max-width:820px){.container{padding:16px}.two-column{grid-template-columns:1fr}.topbar{padding:12px 16px}}


.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 5px 16px rgba(20,36,55,.05);
}
.kpi span {
  display: block;
  color: var(--muted);
  font-size: .86rem;
}
.kpi strong {
  display: block;
  margin-top: 6px;
  font-size: 1.6rem;
}
.button-link {
  display: inline-block;
  padding: 10px 13px;
  border: 1px solid #aeb8c5;
  border-radius: 7px;
  color: var(--ink);
  background: #eef2f7;
  text-decoration: none;
}
.panel + .panel { margin-top: 18px; }
.pose-prompt {
  margin: 14px auto;
  padding: 16px;
  max-width: 640px;
  border: 2px solid #1358a5;
  border-radius: 9px;
  background: #eaf3ff;
  color: #0d3f79;
  text-align: center;
  font-weight: 800;
  letter-spacing: .03em;
}