:root { --fg:#1d2330; --muted:#5b6475; --bg:#fbfbfc; --accent:#2f6fde; --accent-d:#2358b8; --line:#e6e8ee; --err:#c23a3a; --ok:#1f7a4d; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--accent); }
header, main, footer { max-width:760px; margin:0 auto; padding:0 20px; }
header { display:flex; justify-content:space-between; align-items:center; padding-top:28px; }
header b { font-size:18px; } nav a { color:var(--muted); margin-left:18px; text-decoration:none; }
nav a.btn { color:#fff; background:var(--accent); padding:6px 14px; border-radius:6px; }
h1 { font-size:34px; line-height:1.2; margin:64px 0 12px; } .lead { color:var(--muted); font-size:18px; }
h2 { font-size:20px; margin-top:44px; }
pre { background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px 16px; overflow-x:auto; font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:20px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; }
.card h3 { margin:0 0 6px; font-size:16px; } .card p { margin:0; color:var(--muted); font-size:14px; }
footer { color:var(--muted); font-size:14px; padding:48px 20px 32px; border-top:1px solid var(--line); margin-top:64px; }

.auth { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 16px; }
.auth .logo { display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; color:var(--fg); text-decoration:none; margin-bottom:24px; }
.auth .logo img { width:30px; height:30px; }
.panel { width:100%; max-width:380px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:28px; box-shadow:0 1px 3px rgba(20,30,50,.05); }
.panel h1 { font-size:22px; margin:0 0 6px; } .panel p.sub { margin:0 0 20px; color:var(--muted); font-size:14px; }
label { display:block; font-size:14px; font-weight:500; margin:14px 0 6px; }
.row { display:flex; justify-content:space-between; align-items:baseline; } .row a { font-size:13px; text-decoration:none; }
input[type=email], input[type=password] { width:100%; font:inherit; padding:9px 12px; border:1px solid #cfd4de; border-radius:7px; background:#fff; color:var(--fg); }
input:focus { outline:2px solid rgba(47,111,222,.35); border-color:var(--accent); }
.check { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin-top:14px; }
button { width:100%; margin-top:20px; font:inherit; font-weight:600; color:#fff; background:var(--accent); border:0; border-radius:7px; padding:10px; cursor:pointer; }
button:hover { background:var(--accent-d); } button[disabled] { opacity:.7; cursor:progress; }
.msg { display:none; font-size:14px; border-radius:7px; padding:9px 12px; margin-bottom:14px; }
.msg.err { display:block; color:var(--err); background:#fdf1f1; border:1px solid #f3d2d2; }
.msg.ok { display:block; color:var(--ok); background:#eef8f2; border:1px solid #cde9d8; }
.note { margin-top:18px; font-size:13px; color:var(--muted); text-align:center; }