:root {
  --bg: #10151b;
  --panel: #171e26;
  --border: #262f3a;
  --text: #dde3ea;
  --muted: #7e8fa0;
  --ok: #4caf82;
  --watch: #d6a84a;
  --risk: #c1584a;
  --crit: #e2483a;
  --stale: #55606c;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--watch); outline-offset: 2px; }

.topbar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 32px; border-bottom: 1px solid var(--border);
}
.topbar .brand { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.topbar h1 { font-size: 18px; margin: 2px 0 0; font-weight: 600; }
.logout { color: var(--muted); text-decoration: none; font-size: 13px; align-self: center; }
.logout:hover { color: var(--text); }

.summary {
  display: flex; flex-wrap: wrap; gap: 24px; padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
}
.summary strong { color: var(--text); font-size: 15px; }
.summary .s-ok strong { color: var(--ok); }
.summary .s-watch strong { color: var(--watch); }
.summary .s-risk strong { color: var(--risk); }
.summary .s-stale strong { color: var(--stale); }

.console { max-width: 920px; margin: 0 auto; padding: 24px 20px 60px; }
.row {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  padding: 14px 18px;
  margin-bottom: 10px;
}
.row-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-ok { background: var(--ok); animation: pulse 2.4s infinite; }
.dot-watch { background: var(--watch); }
.dot-risk { background: var(--risk); }
.dot-crit { background: var(--crit); animation: pulse-crit 1.2s infinite; }
.dot-stale { background: var(--stale); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 175, 130, .5); }
  70% { box-shadow: 0 0 0 6px rgba(76, 175, 130, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 130, 0); }
}
@keyframes pulse-crit {
  0% { box-shadow: 0 0 0 0 rgba(226, 72, 58, .6); }
  70% { box-shadow: 0 0 0 8px rgba(226, 72, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 72, 58, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dot-ok, .dot-crit { animation: none; }
}

.row-head .name { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.row-head .status { margin-left: auto; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.status-ok { color: var(--ok); }
.status-watch { color: var(--watch); }
.status-risk { color: var(--risk); }
.status-crit { color: var(--crit); }
.status-stale { color: var(--stale); }

.row .path { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 6px 0 0 20px; word-break: break-all; }
.row .meta { font-size: 12px; color: var(--muted); margin: 4px 0 0 20px; }

.row details { margin: 10px 0 0 20px; }
.row summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.row summary:hover { color: var(--text); }
.findings { list-style: none; padding: 0; margin: 8px 0 0; font-family: var(--font-mono); font-size: 12px; }
.findings li { padding: 6px 0; border-top: 1px solid var(--border); word-break: break-all; }
.f-critical { color: var(--crit); }
.f-high { color: var(--risk); }
.f-medium { color: var(--watch); }

.empty { color: var(--muted); text-align: center; padding: 60px 20px; font-family: var(--font-mono); font-size: 13px; }

.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-box { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 32px; width: 320px; max-width: 100%; }
.auth-box .brand { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.auth-box h1 { font-size: 16px; margin: 0 0 4px; font-weight: 600; }
.hint { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.auth-box label { display: block; font-size: 12px; color: var(--muted); margin: 14px 0 4px; font-family: var(--font-mono); }
.auth-box input { width: 100%; padding: 9px 10px; background: #0d1116; border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-family: var(--font-mono); font-size: 13px; }
.auth-box button { width: 100%; margin-top: 22px; padding: 10px; background: var(--watch); border: none; border-radius: 5px; color: #10151b; font-weight: 700; font-size: 13px; cursor: pointer; }
.auth-box button:hover { opacity: .9; }
.error { color: var(--risk); font-size: 12px; }