:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c2330; --border:#2a313c;
  --text:#e6edf3; --muted:#8b949e; --accent:#4c8bf5; --accent2:#2f6fd6;
  --ok:#3fb950; --err:#f85149; --bubble:#1c2330; --bubble-user:#243049;
}
*{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)}
header{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:1.1rem}
nav{margin-left:auto;display:flex;gap:.4rem}
nav button{background:transparent;color:var(--muted);border:1px solid transparent;
  padding:.35rem .7rem;border-radius:6px;cursor:pointer;font-size:.9rem}
nav button:hover{color:var(--text)}
nav button.active{color:var(--text);border-color:var(--border);background:var(--panel2)}
main{max-width:880px;margin:0 auto;padding:1.2rem}
.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:1.3rem;margin:1rem auto;max-width:420px}
.card h1{margin:.2rem 0;font-size:1.6rem}
.muted{color:var(--muted)}
form{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--muted)}
input,select{background:var(--panel2);border:1px solid var(--border);color:var(--text);
  padding:.55rem .7rem;border-radius:6px;font-size:.95rem}
input:focus{outline:none;border-color:var(--accent)}
.row{display:flex;gap:.6rem}
.row button{flex:1}
button{background:var(--accent);color:#fff;border:none;padding:.6rem .9rem;border-radius:6px;
  cursor:pointer;font-size:.95rem}
button:hover{background:var(--accent2)}
button:disabled{opacity:.5;cursor:not-allowed}
#register-btn{background:var(--panel2);color:var(--text);border:1px solid var(--border)}
#register-btn:hover{border-color:var(--accent)}
.msg{margin-top:.7rem;font-size:.85rem;min-height:1.2rem}
.msg.small{font-size:.78rem;color:var(--muted)}
.msg.ok{color:var(--ok)} .msg.err{color:var(--err)}

/* chat */
.view{display:block}
.chat-layout{display:grid;grid-template-columns:220px 1fr;gap:.8rem;max-width:980px}
#conv-sidebar{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.5rem;display:flex;flex-direction:column;gap:.4rem;max-height:70vh;overflow:hidden}
#new-conv{background:var(--panel2);color:var(--text);border:1px solid var(--border);font-size:.85rem;padding:.5rem}
#new-conv:hover{border-color:var(--accent);background:var(--panel2)}
#conv-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
#conv-list li{padding:.5rem .6rem;border-radius:6px;cursor:pointer;font-size:.85rem;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:.4rem}
#conv-list li:hover{background:var(--panel2);color:var(--text)}
#conv-list li.active{background:var(--accent2);color:#fff}
#conv-list li .del{opacity:.4;border:none;background:transparent;color:inherit;font-size:.8rem;padding:0 .2rem}
#conv-list li .del:hover{opacity:1;color:var(--err)}
.chat-main{display:flex;flex-direction:column;min-width:0}
.chat-log{height:55vh;overflow-y:auto;border:1px solid var(--border);border-radius:10px;
  background:var(--panel);padding:1rem;margin-bottom:.7rem}
.msg-bubble{max-width:80%;margin:.5rem 0;padding:.6rem .9rem;border-radius:10px;
  white-space:pre-wrap;word-break:break-word}
.msg-bubble.user{margin-left:auto;background:var(--bubble-user)}
.msg-bubble.bot{background:var(--bubble);border:1px solid var(--border)}
.msg-bubble.err{background:#3a1517;color:var(--err);border-color:var(--err)}
.chat-input{display:flex;gap:.6rem}
.chat-input input{flex:1}
.chat-input button{white-space:nowrap}
#chat-status{margin-top:.5rem}

/* account */
dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin-top:.5rem}
dt{color:var(--muted)}
dd{margin:0}
.bar{height:8px;background:var(--panel2);border-radius:4px;overflow:hidden;margin-top:.3rem}
.bar>i{display:block;height:100%;background:var(--accent)}
td,th{padding:.4rem .6rem;border-bottom:1px solid var(--border);text-align:left}
table{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.grid button{grid-column:1/-1}