/* shared look for the small pages (login, password, security, admin) */
:root { color-scheme: light; --bg:#f4f4f2; --surface:#fcfcfb; --border:#e2e1dc; --text:#0b0b0b; --text-2:#52514e; --text-3:#7a7974;
        --accent:#2a78d6; --crit-soft:#fbe9e9; --crit-ink:#9c2121; --good-soft:#e5f5e5; --good-ink:#006300; --warn-soft:#fff4dc; --warn-ink:#7a5200; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; }
.brand { font-weight:650; letter-spacing:-.01em; }
.brand small { display:block; font-weight:400; color:var(--text-2); font-size:13px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:26px 28px; box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05); }
.center { min-height:100vh; display:grid; place-items:center; padding:24px; }
.center .card { width:min(400px, 100%); }
h1 { font-size:20px; margin:0 0 4px; }
h2 { font-size:17px; margin:26px 0 10px; }
p { margin:8px 0; color:var(--text-2); }
label { display:block; font-size:13px; color:var(--text-2); margin:14px 0 4px; }
input[type=text], input[type=password], select { width:100%; font:inherit; padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:#fff; }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
button { font:inherit; font-weight:600; padding:9px 16px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:transparent; width:100%; margin-top:18px; }
button:hover { filter:brightness(.97); }
.msg { border-radius:8px; padding:9px 12px; margin:14px 0 0; font-size:14px; }
.msg.error { background:var(--crit-soft); color:var(--crit-ink); }
.msg.ok { background:var(--good-soft); color:var(--good-ink); }
.msg.warn { background:var(--warn-soft); color:var(--warn-ink); }
.msg:empty { display:none; }
.hint { font-size:13px; color:var(--text-3); margin-top:18px; }
a { color:var(--accent); }
code, .mono { font-family: Consolas, "Cascadia Mono", monospace; }
.key { font-size:20px; letter-spacing:.08em; background:var(--bg); padding:10px 12px; border-radius:8px; display:inline-block; margin:6px 0; }
.wrap { max-width:1200px; margin:0 auto; padding:20px 24px 40px; }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.top nav { display:flex; gap:8px; align-items:center; }
.top nav form { display:inline; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--text-2); font-weight:600; font-size:13px; }
td.actions { white-space:nowrap; } td.actions form { display:inline-block; margin-right:4px; } td.actions button { padding:4px 10px; font-size:13px; font-weight:500; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; } @media (max-width:800px) { .grid { grid-template-columns:1fr; } }
.row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; } .row > div { flex:1 1 160px; } .row button { margin-top:0; width:auto; }
.scroll { max-height:420px; overflow:auto; }