:root{--bg:#f6f7f9;--fg:#1c1e21;--muted:#6b7280;--card:#fff;--line:#e5e7eb;--accent:#0f766e;--accent-fg:#fff;--danger:#b91c1c;--ok:#065f46;--okbg:#d1fae5;--errbg:#fee2e2;--infobg:#e0f2fe;--info:#075985}
@media (prefers-color-scheme:dark){:root{--bg:#0f1115;--fg:#e5e7eb;--muted:#9ca3af;--card:#181b21;--line:#2a2f3a;--accent:#2dd4bf;--accent-fg:#0b1a18;--okbg:#064e3b;--ok:#a7f3d0;--errbg:#7f1d1d;--danger:#fecaca;--infobg:#0c4a6e;--info:#bae6fd}}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--accent)}
header.top{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;padding:.6rem 1rem;background:var(--card);border-bottom:1px solid var(--line)}
.brand{font-weight:700;text-decoration:none;color:var(--fg)}
header nav{display:flex;flex-wrap:wrap;gap:.25rem .9rem}
header nav a{text-decoration:none;color:var(--muted);padding:.2rem 0;border-bottom:2px solid transparent}
header nav a.on{color:var(--fg);border-color:var(--accent)}
.who{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.avatar{width:28px;height:28px;border-radius:50%}
main{max-width:960px;margin:0 auto;padding:1rem 16px 3rem}
footer{color:var(--muted);font-size:.8rem;text-align:center;padding:1rem}
h1{font-size:1.5rem;margin:.6rem 0 1rem}h2{font-size:1.15rem;margin:1.5rem 0 .6rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin:.8rem 0}
.center{text-align:center;max-width:460px;margin:3rem auto}
.muted{color:var(--muted)}.small{font-size:.85rem}
.notice{background:var(--infobg);color:var(--info);padding:.7rem 1rem;border-radius:8px;margin:.8rem 0}
.flash{padding:.7rem 1rem;border-radius:8px;margin:.8rem 0}
.flash.ok{background:var(--okbg);color:var(--ok)}.flash.error{background:var(--errbg);color:var(--danger)}.flash.info{background:var(--infobg);color:var(--info)}
.btn{display:inline-block;padding:.55rem 1rem;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);text-decoration:none;font:inherit;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.danger{color:var(--danger)}.btn.google{background:#fff;color:#1f1f1f;border-color:#dadce0;font-weight:600}
.btn[disabled]{opacity:.6;cursor:default}
button.link{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:0}
button.link.danger{color:var(--danger)}
.inline{display:inline-block;margin:.3rem .4rem .3rem 0}.right{float:right}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;margin:.8rem 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem;display:flex;flex-direction:column}
.tile .k{font-size:.8rem;color:var(--muted)}.tile .v{font-size:1.6rem;font-weight:700;line-height:1.2}.tile .v.small{font-size:1rem}.tile .s{font-size:.78rem;color:var(--muted)}
.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.9rem}th,td{text-align:left;padding:.35rem .5rem;border-bottom:1px solid var(--line);white-space:nowrap}
label{display:block;margin:.6rem 0;font-size:.9rem;color:var(--muted)}
input,textarea{display:block;width:100%;margin-top:.25rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}
.row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}
.md h1,.md h2,.md h3{font-size:1.05rem;margin:.9rem 0 .3rem}.md p{margin:.4rem 0}.md ul,.md ol{margin:.3rem 0 .6rem 1.2rem;padding:0}.md table{margin:.5rem 0}
.chat{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.msg{max-width:85%}.msg.user{align-self:flex-end}.msg.assistant{align-self:flex-start}
.bubble{padding:.6rem .9rem;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.msg.user .bubble{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.msg.user .bubble a{color:inherit}
.when{font-size:.72rem;color:var(--muted);margin:.15rem .4rem}
.chatform{display:flex;gap:.6rem;align-items:flex-end}.chatform textarea{flex:1;margin:0}
.busy{opacity:.7}.busy-note{display:block;color:var(--muted);font-size:.85rem;margin-top:.4rem}
@media (max-width:600px){.who span{display:none}.msg{max-width:95%}}