:root{--bg:#f2f4fb;--p:#fff;--p2:#eef0fb;--ln:#d9ddf0;--tx:#1d2033;--mu:#6b7090;--ac:#5b6cff;--ac2:#ff9d3d;--rd:#d94a4a}
[data-theme=dark]{--bg:#12141d;--p:#1b1e2b;--p2:#242838;--ln:#303552;--tx:#e6e8f6;--mu:#9196b8;--ac:#8c98ff;--ac2:#ffb063;--rd:#ff7676}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--tx);font:16px/1.45 system-ui,"Segoe UI",Roboto,sans-serif}
body{margin:0;padding-bottom:70px}
main{max-width:640px;margin:0 auto;padding:12px}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--p);border-top:1px solid var(--ln);padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;background:none;border:0;color:var(--mu);padding:12px 4px;font:inherit;font-size:13px;cursor:pointer;border-top:3px solid transparent}
nav button.on{color:var(--ac);border-top-color:var(--ac2)}
h1,h2,h3{margin:8px 0}
h1{font-size:28px}
.card{background:var(--p);border:1px solid var(--ln);border-radius:14px;padding:12px;margin:10px 0;overflow-wrap:anywhere}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mu{color:var(--mu);font-size:13px}
input,textarea,select{width:100%;background:var(--p2);color:var(--tx);border:1px solid var(--ln);border-radius:10px;padding:10px;font:inherit;margin:4px 0}
button.b{background:var(--ac);color:#fff;border:0;border-radius:10px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer}
html[data-theme=dark] button.b{color:#12141d}
button.s{background:var(--p2);color:var(--tx);border:1px solid var(--ln);border-radius:10px;padding:6px 10px;font:inherit;cursor:pointer}
button.s.on{border-color:var(--ac);color:var(--ac)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.chip{background:var(--p2);border-radius:99px;padding:2px 9px;font-size:12px}
.st{background:var(--ac2);color:#2b1700;border-radius:99px;padding:1px 8px;font-size:12px;font-weight:600}
.post img,.msg img{max-width:100%;border-radius:10px;margin:6px 0}
.msgs{display:flex;flex-direction:column;gap:6px;margin:10px 0;max-height:52vh;overflow:auto}
.msg{background:var(--p);border:1px solid var(--ln);border-radius:14px;padding:7px 11px;max-width:85%;align-self:flex-start;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--ac);color:#fff;border-color:transparent}
html[data-theme=dark] .msg.me{color:#12141d}
.ttt{display:grid;grid-template-columns:repeat(3,64px);gap:6px;margin:8px 0}
.ttt button{height:64px;font-size:28px;background:var(--p2);border:1px solid var(--ln);border-radius:10px;color:var(--tx);cursor:pointer}
.toast{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:var(--rd);color:#fff;padding:9px 16px;border-radius:10px;z-index:9;max-width:90%}
.quote{font-style:italic;color:var(--mu);margin:14px 0}