:root { --bg:#f4f5f7; --card:#fff; --text:#1d2330; --muted:#6b7280; --accent:#2563eb; --danger:#dc2626; --border:#e5e7eb; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
h1,h2,h3 { margin:0 0 .5rem; } h3 { font-size:1rem; }
.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:1.25rem; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:16px; }
.auth-card { width:100%; max-width:380px; }
label { display:block; margin:.75rem 0 .25rem; font-weight:500; }
label.check { display:flex; gap:.5rem; align-items:center; font-weight:400; }
input:not([type=checkbox]), textarea { width:100%; padding:.55rem .7rem; border:1px solid var(--border); border-radius:6px; font:inherit; }
button, .button { display:inline-block; padding:.55rem 1rem; border:0; border-radius:6px; background:var(--accent); color:#fff; font:inherit; cursor:pointer; text-decoration:none; }
button.secondary, .button.secondary { background:#e5e7eb; color:var(--text); }
button.danger { background:var(--danger); }
button.small { padding:.3rem .7rem; font-size:.85rem; }
.actions { display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }
.error { margin-top:.75rem; padding:.5rem .7rem; border-radius:6px; background:#fee2e2; color:#991b1b; }
.muted { color:var(--muted); } .small { font-size:.8rem; }
.topbar { display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem; background:var(--card); border-bottom:1px solid var(--border); }
.spacer { flex:1; }
.row { display:flex; align-items:center; gap:.5rem; }
.badge { padding:.1rem .55rem; border-radius:999px; font-size:.8rem; background:#e5e7eb; }
.badge.admin { background:#fef3c7; color:#92400e; } .badge.user { background:#dbeafe; color:#1e40af; }
.layout { max-width:860px; margin:1.25rem auto; padding:0 16px; display:grid; gap:1rem; }
.reveal { background:#ecfdf5; border:1px solid #a7f3d0; border-radius:6px; padding:.75rem; }
.reveal code { word-break:break-all; font-size:.9rem; }
.notes { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.note { border:1px solid var(--border); border-radius:8px; padding:.75rem 1rem; }
.note pre { white-space:pre-wrap; font:inherit; margin:.25rem 0; }