:root{--bg:#0d1117;--fg:#e6edf3;--mut:#8b949e;--acc:#3fb6c9;--warn:#d29922}
*{box-sizing:border-box}body{margin:0;font:15px/1.4 system-ui,sans-serif;background:var(--bg);color:var(--fg)}
header{display:flex;justify-content:space-between;padding:.6rem 1rem;border-bottom:1px solid #30363d}
.logo{font-weight:700;color:var(--acc)}#status{color:var(--mut)}
.warn{background:#2d2208;color:var(--warn);padding:.4rem 1rem;font-size:13px}
section{padding:1rem}#login{max-width:360px;margin:auto;display:grid;gap:.5rem}
input,select,button{font:inherit;padding:.45rem .6rem;border-radius:6px;border:1px solid #30363d;background:#161b22;color:var(--fg);width:100%}
button{background:var(--acc);color:#001;border:0;cursor:pointer;width:auto}button.ghost{background:transparent;color:var(--acc);border:1px solid var(--acc)}
#main{display:grid;grid-template-columns:260px 1fr;gap:1rem;height:calc(100vh - 90px)}
aside{overflow:auto;display:grid;align-content:start;gap:.5rem}main{display:flex;flex-direction:column;min-height:0}
#msgs{flex:1;overflow:auto;padding:.5rem;border:1px solid #30363d;border-radius:8px}
.m{margin:.2rem 0}.m b{color:var(--acc)}.m .t{color:var(--mut);font-size:12px;margin-right:.4rem}
.ch{padding:.4rem;border-radius:6px;cursor:pointer}.ch.on,.ch:hover{background:#161b22}
#composer{display:flex;gap:.5rem;margin-top:.5rem}.small{color:var(--mut);font-size:12px}#meter{height:4px;background:#30363d}