:root {
  --bg: #0b1220;
  --card: #111a2e;
  --line: #22304d;
  --text: #e6ecf7;
  --muted: #8fa1c0;
  --brand: #2563eb;
  --ok: #34d399;
  --err: #f87171;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; }
#app { max-width: 640px; margin: 0 auto; padding: 16px
  max(16px, env(safe-area-inset-bottom)); }
.hdr { display: flex; align-items: center; gap: 10px; padding: 6px 2px 14px; }
.brand { font-weight: 700; font-size: 18px; }
.pill { margin-left: auto; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.view { display: block; }
.view[hidden], [hidden] { display: none !important; }
.card { background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px; margin-bottom: 14px; }
h1 { font-size: 20px; margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; }
button { font: inherit; border-radius: 10px; padding: 12px 16px; border: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.primary { background: var(--brand); color: #fff; font-weight: 600;
  width: 100%; margin-top: 8px; }
button.ghost { background: transparent; color: var(--text);
  border: 1px solid var(--line); padding: 8px 14px; }
button:disabled { opacity: .55; cursor: default; }
.code-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 30px;
  letter-spacing: 5px; text-align: center; background: #070d1a;
  border: 1px dashed var(--line); border-radius: 10px; padding: 14px; margin: 10px 0; }
.err { color: var(--err); font-size: 14px; }
.who { display: flex; align-items: center; }
.who-name { font-weight: 700; }
.empty { color: var(--muted); padding: 10px 0; }
.entry { padding: 10px 0; border-top: 1px solid var(--line); }
.entry:first-child { border-top: 0; }
.entry .label { font-weight: 600; }
.entry .verdict { font-size: 13px; margin-left: 8px; }
.entry pre { background: #070d1a; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; overflow: auto; font-size: 12px; margin: 8px 0 0; }

input.pw { width: 100%; box-sizing: border-box; margin: 10px 0; padding: 12px;
  font-size: 16px; border-radius: 10px; border: 1px solid var(--line);
  background: #070d1a; color: inherit; }