/* Ettix.com portal. One stylesheet, no framework, no build step. */
:root {
  color-scheme: light dark;
  --bg:#f6f8fa; --panel:#fff; --line:#d6dde5; --fg:#1f2328; --muted:#5a6472;
  --accent:#0b5fff; --ok:#1a7f37; --warn:#9a6700; --err:#cf222e;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0e1116; --panel:#161b22; --line:#2a3140; --fg:#e6edf3; --muted:#8b96a5;
          --accent:#4c8dff; --ok:#3fb950; --warn:#d29922; --err:#f85149; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { display:flex; align-items:center; gap:20px; padding:0 20px; height:56px;
  background:var(--panel); border-bottom:1px solid var(--line); }
.brand { font-weight:700; letter-spacing:.04em; color:var(--fg); }
.topbar nav { display:flex; gap:16px; flex:1; }
.signout { display:flex; align-items:center; gap:10px; margin:0; }
.who { color:var(--muted); font-size:14px; }
main { max-width:960px; margin:0 auto; padding:24px 20px 48px; }
h1 { font-size:22px; margin:0 0 4px; }
h2 { font-size:17px; margin:28px 0 10px; }
p.lede { color:var(--muted); margin:0 0 20px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:18px; margin-bottom:16px; }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:14px; border:1px solid var(--line); }
.flash-success { border-color:var(--ok); color:var(--ok); }
.flash-error { border-color:var(--err); color:var(--err); }
.flash-warning { border-color:var(--warn); color:var(--warn); }
.impersonation { background:var(--warn); color:#000; padding:8px 20px;
  display:flex; gap:12px; align-items:center; }
.impersonation form { margin:0; }
form.stack { display:grid; gap:6px; max-width:420px; }
label { font-size:13px; color:var(--muted); margin-top:8px; }
input, select, textarea { font:inherit; padding:8px 10px; border:1px solid var(--line);
  border-radius:6px; background:var(--panel); color:var(--fg); width:100%; }
input[aria-invalid="true"] { border-color:var(--err); }
.field-error { color:var(--err); font-size:13px; }
button, .button { font:inherit; cursor:pointer; padding:8px 16px; border-radius:6px;
  border:1px solid var(--accent); background:var(--accent); color:#fff; }
button.secondary { background:transparent; color:var(--fg); border-color:var(--line); }
button.danger { background:transparent; color:var(--err); border-color:var(--err); }
button:disabled { opacity:.55; cursor:not-allowed; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); }
th { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.mono { font-family:var(--mono); font-size:13px; }
.muted { color:var(--muted); }
.pill { display:inline-block; padding:1px 9px; border-radius:999px; font-size:12px;
  border:1px solid var(--line); color:var(--muted); }
.pill.ok { color:var(--ok); border-color:var(--ok); }
.pill.warn { color:var(--warn); border-color:var(--warn); }
.pill.err { color:var(--err); border-color:var(--err); }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.right { margin-left:auto; }
.codes { font-family:var(--mono); columns:2; gap:20px; }
.footer { max-width:960px; margin:0 auto; padding:16px 20px 32px; color:var(--muted);
  font-size:12px; display:flex; gap:16px; }
.rid { font-family:var(--mono); }

/* TOTP QR enrollment */
.totp-qr-section {
    margin: 1.25rem 0;
}

.totp-qr {
    display: inline-block;
    padding: 12px;
    margin-top: 0.5rem;
    background: #fff;
    border-radius: 8px;
}

.totp-qr img {
    display: block;
    width: 240px;
    height: 240px;
    image-rendering: pixelated;
}