:root{--bg:#0e1621;--panel:#17212b;--panel2:#1d2a36;--in:#182533;--out:#2b5278;
--txt:#e9edf0;--muted:#8a9aa8;--accent:#5ea9dd;--sep:#0b1218;--svc:#1b2733;
--ok:#4fae6a;--warn:#e0a84f;--err:#e06c6c}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--txt);font:14px/1.45 -apple-system,Segoe UI,Roboto,Arial,sans-serif;min-height:100vh}
a{color:var(--accent)}
h1{font-size:20px;margin:8px 0 14px}
h2{font-size:16px;margin:24px 0 10px}
h3{font-size:14px;margin:18px 0 8px}
code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:13px}
.muted{color:var(--muted)}
.warn{color:var(--warn)}
.grow{flex:1;min-width:140px}
.wrap{max-width:1000px;margin:0 auto;padding:16px}
.narrow{max-width:380px;margin:60px auto;padding:16px}

/* top bar */
header.top{position:sticky;top:0;z-index:10;background:var(--panel);border-bottom:1px solid var(--sep);
  display:flex;gap:14px;align-items:center;padding:8px 16px;flex-wrap:wrap}
.brand{font-weight:700;color:var(--txt);text-decoration:none}
header.top nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
header.top nav a{color:var(--txt);text-decoration:none;padding:5px 10px;border-radius:6px}
header.top nav a:hover{background:var(--panel2)}
.logout{margin:0}
.accsel{position:relative}
.accsel summary{cursor:pointer;list-style:none;padding:5px 10px;border:1px solid var(--sep);border-radius:6px;background:var(--panel2)}
.accsel summary::after{content:' ▾';color:var(--muted)}
.accsel .menu{position:absolute;top:110%;left:0;background:var(--panel);border:1px solid var(--sep);border-radius:8px;
  min-width:220px;padding:4px;z-index:20}
.accsel .menu a{display:block;padding:6px 10px;color:var(--txt);text-decoration:none;border-radius:6px}
.accsel .menu a:hover,.accsel .menu a.cur{background:var(--panel2)}

/* controls */
.btn{background:var(--panel2);color:var(--txt);border:1px solid var(--sep);border-radius:8px;
  padding:7px 12px;cursor:pointer;font-size:13px;text-decoration:none;display:inline-block}
.btn:hover{background:#243442}
.btn.primary{background:#2b5278;border-color:#2b5278}
.btn.primary:hover{background:#346393}
.btn.danger{color:var(--err)}
.btn.small{padding:3px 9px;font-size:12px}
input,select{padding:7px 9px;border-radius:7px;border:1px solid var(--sep);background:var(--panel2);color:var(--txt);
  font:inherit;outline:none;max-width:100%}
input:focus,select:focus{border-color:var(--accent)}
input.short{width:150px}
.card{background:var(--panel);border:1px solid var(--sep);border-radius:10px;padding:14px 16px;margin:10px 0}
.card.highlight{border-color:var(--accent)}
.card p{margin:6px 0}
.card form + form{margin-top:12px}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:4px}
.form label.check{flex-direction:row;align-items:center;gap:8px}
.form.row{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
.form fieldset{border:1px solid var(--sep);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.form legend{color:var(--muted);padding:0 6px}
form.inline{display:flex;gap:4px;margin:0}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.actions form{margin:0}
.flash{padding:10px 14px;border-radius:8px;margin:10px 0}
.flash.ok{background:rgba(79,174,106,.15);border:1px solid rgba(79,174,106,.4)}
.flash.err{background:rgba(224,108,108,.15);border:1px solid rgba(224,108,108,.4)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.toolbar form{margin:0}
.status{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;background:var(--panel);
  border:1px solid var(--sep);border-radius:8px;padding:8px 12px;margin-bottom:6px}
.st{font-size:12px;border-radius:6px;padding:1px 7px;background:var(--panel2)}
.st-ok{color:var(--ok)}.st-error,.st-aborted{color:var(--err)}.st-flood,.st-abandoned{color:var(--warn)}
.st-running{color:var(--accent)}.st-off{color:var(--muted)}
.badge{display:inline-block;font-size:11px;color:var(--muted);border:1px solid var(--sep);
  border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.badge.warn{color:var(--warn)}
.code{font:600 28px/1.2 ui-monospace,Consolas,monospace;letter-spacing:3px;margin:8px 0}
.qr{background:#fff;border-radius:8px;padding:4px;display:block;margin:8px 0}
.empty{color:var(--muted);text-align:center;padding:40px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--muted);font-weight:500;border-bottom:1px solid var(--sep);padding:6px 8px}
.tbl td{border-bottom:1px solid var(--sep);padding:6px 8px;vertical-align:top}
.tbl tr:hover td{background:var(--panel)}
pre.log{background:var(--panel);border:1px solid var(--sep);border-radius:8px;padding:12px;overflow:auto;
  font-size:12px;max-height:70vh;white-space:pre-wrap}
mark{background:rgba(94,169,221,.35);color:var(--txt);border-radius:3px}

/* chat list */
.list{list-style:none;margin:0;padding:0;background:var(--panel);border-radius:10px;border:1px solid var(--sep)}
.list li{border-bottom:1px solid var(--sep)}
.list li:last-child{border-bottom:0}
.list a{display:flex;justify-content:space-between;gap:10px;padding:11px 16px;text-decoration:none;color:var(--txt)}
.list a:hover{background:var(--panel2)}
.list .nm{font-weight:600}
.list .meta{color:var(--muted);font-size:12px;white-space:nowrap;text-align:right}
.results .snip{color:var(--txt);font-size:13px}

/* chat */
.chatwrap{max-width:900px;margin:0 auto;padding:0 16px 24px}
.chatbar{position:sticky;top:45px;z-index:5;background:var(--bg);display:flex;gap:12px;align-items:center;
  padding:10px 0;flex-wrap:wrap;border-bottom:1px solid var(--sep)}
.chatbar h1{font-size:16px;margin:0}
.chatbar .sub{color:var(--muted);font-size:12px}
.daysep{text-align:center;color:var(--muted);font-size:12px;margin:14px 0 8px}
.daysep span{background:var(--svc);padding:3px 10px;border-radius:10px}
.msg{display:flex;margin:3px 0}
.msg.out{justify-content:flex-end}
.bubble{max-width:78%;padding:7px 10px;border-radius:12px;background:var(--in);position:relative;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.out .bubble{background:var(--out)}
.who{font-size:12px;color:var(--accent);font-weight:600;margin-bottom:2px}
.reply{border-left:3px solid var(--accent);padding-left:7px;margin-bottom:4px;color:var(--muted);font-size:12px;cursor:pointer;border-radius:3px}
.reply:hover{background:rgba(94,169,221,.14);color:var(--txt)}
.reply .rp-aut{color:var(--accent);font-weight:600}
.msg.hl .bubble{animation:hl 1.6s ease-out}
@keyframes hl{0%,40%{box-shadow:0 0 0 2px var(--accent)}100%{box-shadow:0 0 0 2px transparent}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--panel2);
  border:1px solid var(--sep);color:var(--txt);padding:8px 14px;border-radius:8px;font-size:13px;
  opacity:0;transition:opacity .2s;pointer-events:none;z-index:20}
.toast.show{opacity:1}
.fwd{color:var(--muted);font-size:12px;font-style:italic;margin-bottom:3px}
.media{color:#cfe3f2;font-size:13px;margin:2px 0}
.thumb{display:block;max-width:100%;max-height:320px;border-radius:8px;margin:4px 0}
.player{display:block;width:280px;max-width:100%;height:36px;margin:4px 0}
video.round{display:block;width:220px;height:220px;max-width:100%;border-radius:50%;object-fit:cover;margin:4px 0;
  background:#000;cursor:pointer}
.rcts{margin-top:4px;display:flex;gap:6px;flex-wrap:wrap}
.rct{background:rgba(94,169,221,.18);border-radius:10px;padding:1px 8px;font-size:12px}
.meta2{color:var(--muted);font-size:11px;text-align:right;margin-top:3px}
.svc{text-align:center;margin:8px 0}
.svc span{background:var(--svc);color:var(--muted);padding:3px 12px;border-radius:10px;font-size:12px}
.loadmore{text-align:center;margin:12px 0}
.hit{cursor:pointer}
.hit:hover .bubble{box-shadow:0 0 0 1px var(--accent)}

@media (max-width:640px){
  header.top{gap:8px}
  .chatbar{top:0;position:static}
  .bubble{max-width:92%}
  .tbl{display:block;overflow-x:auto}
}