:root{--bg:#0f1727;--panel:#152038;--panel2:#1b2a47;--line:#26375a;--tx:#e8edf7;--mut:#8b9bbd;--acc:#f0b84a;--accfg:#1a1405;--hl:#3a2f14;--ok:#4ade80;--err:#f87171;
font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--tx);font-size:15px}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;border-radius:8px;padding:.6em 1em;background:var(--acc);color:var(--accfg);font-weight:600}
button.ghost{background:transparent;color:var(--mut);border:1px solid var(--line);margin:0 .75rem .5rem}
button.ghost:hover{color:var(--tx);border-color:var(--mut)}
button.icon{background:transparent;color:var(--tx);padding:.3em .5em;font-size:1.2rem;display:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#login{min-height:100%;display:grid;place-items:center;padding:1rem;background:radial-gradient(900px 500px at 20% 0%,#1d3157,transparent),var(--bg)}
#login form{width:min(380px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:2rem;display:grid;gap:1rem}
#login h1{margin:0;font-size:2rem;letter-spacing:-.02em}#login p{margin:0;color:var(--mut)}
#login label{display:grid;gap:.35rem;color:var(--mut);font-size:.9rem}
input{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.65em .8em;width:100%}
#lerr{color:var(--err);min-height:1.2em;font-size:.9rem}
#app{display:grid;grid-template-columns:230px 1fr 200px;height:100dvh}
#app[hidden]{display:none}
aside{background:var(--panel);display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
#users{border-right:0;border-left:1px solid var(--line)}
aside>header,main>header{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);min-height:54px}
aside>header strong{flex:1}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ok)}.dot.off{background:var(--err)}
ul{list-style:none;margin:0;padding:.4rem;overflow:auto;flex:1}
#bufs li{display:flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border-radius:8px;cursor:pointer;color:var(--mut)}
#bufs li:hover{background:var(--panel2)}#bufs li.on{background:var(--panel2);color:var(--tx);box-shadow:inset 3px 0 var(--acc)}
#bufs li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bufs li i{font-style:normal;background:var(--acc);color:var(--accfg);border-radius:99px;font-size:.75rem;padding:0 .5em;font-weight:700}
#bufs li i.q{background:var(--mut)}#bufs li u{text-decoration:none;opacity:0}#bufs li:hover u{opacity:.7}
#ulist li{padding:.25rem .6rem;border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ulist li:hover{background:var(--panel2)}#ulist em{font-style:normal;color:var(--acc);display:inline-block;width:1ch;margin-right:.3em}
main{display:flex;flex-direction:column;min-width:0;min-height:0}
.title{flex:1;min-width:0;display:flex;flex-direction:column}
.title b{font-size:1.05rem}.title span{color:var(--mut);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#log{flex:1;overflow:auto;padding:.8rem 1rem;font-size:.95rem;line-height:1.45}
.l{display:flex;gap:.7rem;padding:.12rem .4rem;border-radius:6px;overflow-wrap:anywhere}
.l time{color:var(--mut);font-size:.78rem;padding-top:.2em;flex:none;font-variant-numeric:tabular-nums}
.l b{flex:none;min-width:0;max-width:9em;overflow:hidden;text-overflow:ellipsis}
.l.event,.l.notice{color:var(--mut)}.l.action span{font-style:italic;color:#c8d3ea}
.l.error{color:var(--err)}.l.hl{background:var(--hl);box-shadow:inset 3px 0 var(--acc)}.l.self b{color:var(--acc)!important}
.l a{color:var(--acc)}
#f{display:flex;gap:.5rem;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel)}
@media(max-width:820px){
 #app{grid-template-columns:1fr}
 aside{position:fixed;z-index:5;top:0;bottom:0;width:min(270px,80vw);transition:transform .2s;box-shadow:0 0 40px #0008}
 #side{left:0;transform:translateX(-105%)}#users{right:0;transform:translateX(105%)}
 body.s #side,body.u #users{transform:none}
 button.icon{display:block}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}