:root { --fg:#222; --bg:#fafafa; --acc:#0a64bc; --muted:#888; --line:#e8e8e8; }
* { box-sizing:border-box }
body { margin:0; font:14px/1.5 system-ui,-apple-system,sans-serif; color:var(--fg); background:var(--bg) }
.nav { display:flex; align-items:center; gap:1rem; padding:0.75rem 1rem; background:#fff; border-bottom:1px solid var(--line) }
.nav a { color:var(--fg); text-decoration:none }
.nav .brand { font-weight:700 }
.nav .spacer { flex:1 }
.nav .link { background:none; border:0; color:var(--acc); cursor:pointer; padding:0; font:inherit }
.nav .muted { color:var(--muted) }
.container { max-width:1000px; margin:1.25rem auto; padding:0 1rem }
.auth { max-width:380px; margin:5rem auto; background:#fff; padding:2rem; border:1px solid var(--line); border-radius:8px }
.auth h1 { margin-top:0; font-size:1.1rem }
.error { background:#fee; color:#900; padding:0.5rem 1rem; border-radius:4px }
label { display:block; margin:0.5rem 0 }
input, select, textarea { padding:0.45rem 0.55rem; border:1px solid #ccc; border-radius:4px; min-width:260px; font:inherit }
textarea { font-family: ui-monospace,Menlo,monospace; min-width:560px }
button { padding:0.45rem 0.95rem; background:var(--acc); color:#fff; border:0; border-radius:4px; cursor:pointer; font:inherit }
button.danger { background:#b00 }
button.ghost { background:#fff; color:var(--acc); border:1px solid var(--acc) }
table { border-collapse:collapse; width:100%; background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden }
th, td { text-align:left; padding:0.55rem 0.75rem; border-bottom:1px solid var(--line) }
th { background:#fafafa; font-weight:600; color:var(--muted); font-size:0.85em; text-transform:uppercase; letter-spacing:0.04em }
.pill { padding:0.1rem 0.5rem; border-radius:99px; background:#eee; font-size:0.8em }
.pill.ok { background:#d6f5d0 }
.pill.warn { background:#ffe9b0 }
.pill.err { background:#fcd0d0 }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin:1rem 0 }
.card { display:block; padding:1rem; background:#fff; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:inherit }
.card strong { display:block; font-size:1.1rem; margin-bottom:0.25rem }
.card small { color:var(--muted) }
.thread .msg.in  { background:#eef6ff; padding:0.45rem 0.65rem; margin:0.3rem 0; border-radius:6px }
.thread .msg.out { background:#f2f2f2; padding:0.45rem 0.65rem; margin:0.3rem 0; border-radius:6px }
.thread .msg small { color:var(--muted); margin-left:0.5rem }
pre { background:#0d1117; color:#c9d1d9; padding:0.8rem 1rem; border-radius:6px; overflow:auto }
code { background:#f1f1f1; padding:0.05rem 0.3rem; border-radius:3px; font-family: ui-monospace,Menlo,monospace; font-size:0.92em }
details > summary { cursor:pointer; padding:0.2rem 0; color:var(--acc) }
h1 { font-size:1.4rem; margin:0.2rem 0 1rem }
h2 { font-size:1.1rem; margin:1.5rem 0 0.5rem }