:root { --fg:#1d2433; --muted:#6b7280; --bg:#f5f6f8; --card:#fff; --line:#e1e4ea; --accent:#2457d6; --bad:#b42318; --ok:#067647; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, "Segoe UI", sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:var(--card); border-bottom:1px solid var(--line); }
header nav { display:flex; gap:18px; align-items:center; }
.brand { font-weight:700; color:var(--fg); text-decoration:none; }
a { color:var(--accent); }
main { max-width:900px; margin:24px auto; padding:0 16px; }
h1 { font-size:22px; margin:0 0 16px; } h2 { font-size:17px; margin:24px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:16px; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); }
label { display:block; font-weight:600; margin:10px 0 4px; }
input[type=text], input[type=email], input[type=password], textarea { width:100%; padding:8px; border:1px solid var(--line); border-radius:6px; font:inherit; }
textarea { min-height:70px; font-family:ui-monospace, Consolas, monospace; }
label.check { font-weight:400; display:flex; gap:8px; align-items:center; }
button, .btn { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:8px 14px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button.danger { background:var(--bad); } button.link { background:none; color:var(--accent); padding:0; }
form.inline { display:inline-flex; gap:8px; align-items:center; margin:0; }
.muted { color:var(--muted); } .error { color:var(--bad); } .ok { color:var(--ok); }
.secret { font-family:ui-monospace, Consolas, monospace; background:#fffbe6; border:1px solid #f0d97a; padding:10px; border-radius:6px; word-break:break-all; }
.login { max-width:380px; margin:60px auto; }