:root { --fg:#16202b; --muted:#5c6b7a; --line:#dfe5ec; --bg:#f6f8fa; --err:#a3271f; --ok:#1c6b3f; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--fg); background:var(--bg); }
.wrap { max-width:840px; margin:0 auto; padding:0 20px; }
.bar { background:#fff; border-bottom:1px solid var(--line); }
.bar .wrap { display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px; }
.logo { max-height:34px; width:auto; display:block; }
.home { display:inline-block; text-decoration:none; }
.home:hover { opacity:.75; }
.brand { font-weight:600; font-size:18px; color:var(--accent); }
.logout { display:flex; align-items:center; gap:12px; }
.who { color:var(--muted); font-size:14px; }
h1 { font-size:24px; margin:28px 0 16px; }
h2 { font-size:17px; margin:0 0 6px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px; margin:0 0 20px; }
label { display:block; margin:0 0 14px; font-size:14px; color:var(--muted); }
input { display:block; width:100%; margin-top:5px; padding:9px 11px; font-size:15px; color:var(--fg);
        border:1px solid var(--line); border-radius:7px; background:#fff; }
input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
input:disabled { background:#f0f3f6; color:var(--muted); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
button, .btn { display:inline-block; padding:9px 16px; font-size:15px; font-weight:500; cursor:pointer;
        color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:7px; text-decoration:none; }
button:hover, .btn:hover { filter:brightness(1.08); }
.logout button { background:transparent; color:var(--muted); border-color:var(--line); font-weight:400; }
.msg { padding:11px 14px; border-radius:7px; margin:0 0 16px; font-size:15px; }
.msg.error { background:#fdecea; color:var(--err); border:1px solid #f3c6c1; }
.msg.ok { background:#e8f5ee; color:var(--ok); border:1px solid #bfe0cd; }
.muted { color:var(--muted); font-size:14px; }
.list { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.list th, .list td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:15px; }
.list th { font-size:13px; color:var(--muted); font-weight:500; background:#fafbfc; }
.list tr:last-child td { border-bottom:0; }
.list .right { text-align:right; }
.domain { font-weight:500; }
.crumb { margin:22px 0 0; font-size:14px; }
.crumb a, a { color:var(--accent); }
.foot { padding:24px 20px 40px; color:var(--muted); font-size:14px; }
@media (max-width:600px) { .grid { grid-template-columns:1fr; } }

/* Language switch */
.bar-right { display:flex; align-items:center; gap:18px; }
.lang { font-size:13px; letter-spacing:.03em; }
.lang a { color:var(--muted); text-decoration:none; }
.lang a:hover { color:var(--accent); }
.lang i { color:var(--line); font-style:normal; }
.lang-on { color:var(--accent); font-weight:600; }

/* Two-factor enrolment */
.qrbox { max-width:240px; margin:8px 0 18px; }
.qrbox svg { width:100%; height:auto; display:block; }
.secret { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:17px; letter-spacing:.08em;
          background:#f3f6f9; border:1px solid var(--line); border-radius:7px; padding:10px 12px;
          word-break:break-all; margin:4px 0 18px; }
.codes { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.codes li { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:17px; letter-spacing:.06em;
            background:#f3f6f9; border:1px solid var(--line); border-radius:6px; padding:8px 12px; }
button.plain { background:transparent; color:var(--muted); border-color:var(--line); }
button.danger { background:transparent; color:var(--err); border-color:#f3c6c1; }
button.danger:hover { background:var(--err); color:#fff; }
form.inline { display:inline-block; margin-left:10px; }
.nav2fa { display:inline-flex; align-items:center; gap:3px; font-size:14px; font-weight:500;
           color:var(--muted); text-decoration:none; letter-spacing:.02em; }
.nav2fa:hover { color:var(--accent); }
/* Sized so the cropped box renders at the same scale as before: the lock is
   identical, it simply no longer brings whitespace with it. */
.nav2fa svg { width:11.9px; height:14.4px; fill:none; stroke:currentColor; stroke-width:1.7;
              stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:600px) { .codes { grid-template-columns:1fr; } }