:root{--bg:#070a14;--s1:rgba(255,255,255,.04);--s2:rgba(255,255,255,.07);--line:rgba(255,255,255,.09);--tx:#e8ecf8;--mut:#8590ad;--acc:#4f7cff;--acc2:#8b5cf6;--ok:#34d399;--warn:#fbbf24;--bad:#fb7185;--r:16px}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{color:var(--tx);font:14px/1.5 Inter,system-ui,"Segoe UI",sans-serif;display:flex;flex-direction:column;
background:radial-gradient(900px 500px at 85% -10%,rgba(79,124,255,.22),transparent 60%),radial-gradient(700px 500px at -10% 110%,rgba(139,92,246,.16),transparent 60%),var(--bg)}
#root{flex:1;display:flex;flex-direction:column;min-height:0}
button,input,select{font:inherit;color:inherit}
header{display:flex;align-items:center;gap:18px;padding:14px 24px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.3px}
.mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:grid;place-items:center;font-size:15px;box-shadow:0 6px 24px rgba(79,124,255,.45)}
.logo i{font-style:normal;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tabs{display:flex;gap:4px;padding:4px;background:var(--s1);border:1px solid var(--line);border-radius:999px;margin-left:10px}
.tab{padding:7px 16px;border-radius:999px;cursor:pointer;color:var(--mut);font-weight:500;border:0;background:none}.tab:hover{color:var(--tx)}
.tab.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;box-shadow:0 4px 16px rgba(79,124,255,.4)}
.sp{flex:1}
.pill{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--s1);border:1px solid var(--line);color:var(--mut);display:inline-flex;align-items:center;gap:7px;text-decoration:none}
button.pill{cursor:pointer}button.pill:hover{color:var(--tx)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);display:inline-block;flex:none}.dot.w{background:var(--warn);box-shadow:0 0 10px var(--warn)}.dot.b{background:var(--bad);box-shadow:0 0 10px var(--bad)}.dot.o{background:var(--mut);box-shadow:none}
main{flex:1;min-height:0;min-width:0;padding:0 24px 20px;display:flex}
.view{display:flex;flex:1;min-height:0;min-width:0;gap:16px}
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(14px)}
aside{width:250px;padding:14px 10px;overflow:auto;flex:none}
.net{display:flex;justify-content:space-between;align-items:center;padding:12px 10px 6px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--mut);font-weight:600;cursor:pointer}
.ch{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:10px;cursor:pointer;color:#b6bfd6;gap:8px}
.ch span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ch.off{opacity:.55}
.ch:hover{background:var(--s2)}.ch.on{background:linear-gradient(135deg,rgba(79,124,255,.28),rgba(139,92,246,.2));color:#fff;box-shadow:inset 0 0 0 1px rgba(79,124,255,.45)}
.bd{font-size:11px;min-width:22px;text-align:center;border-radius:999px;padding:1px 7px;background:var(--s2);color:var(--tx)}.bd.m{background:var(--bad);color:#fff;box-shadow:0 0 12px rgba(251,113,133,.55)}
.empty{color:var(--mut);padding:30px;text-align:center}
.chat{flex:1;display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}.top b{font-size:16px}.top .t{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.msgs{flex:1;overflow:auto;padding:16px 20px;font-size:14px}
.l{display:flex;gap:12px;padding:6px 10px;border-radius:10px;word-break:break-word}.l:hover{background:var(--s1)}
.av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff}
.l .h{font-size:13px}.l .h b{margin-right:8px}.tm{color:var(--mut);font-size:11px}.l.me{box-shadow:inset 3px 0 0 var(--acc)}.l.men{background:rgba(79,124,255,.1);box-shadow:inset 3px 0 0 var(--bad)}
.l.act,.l.nt{color:#c9b6ff}.l.act .h,.l.nt .h{display:inline}
.sep{margin:14px 0;display:flex;align-items:center;gap:12px;color:var(--acc);font-size:12px;font-weight:600}.sep:before,.sep:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent)}
.ev{color:var(--mut);font-size:12px;padding:3px 52px}
.more{display:block;margin:0 auto 10px}
.inp{padding:14px 20px;display:flex;gap:10px}.inp input{flex:1}
input[type=text],input[type=password],input[type=number],input:not([type]),select{padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--s2);outline:none;min-width:0}
input:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(79,124,255,.25)}
select option{background:#151a2e}
.mem{width:190px;padding:16px;overflow:auto;flex:none}.mem h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--mut)}.mem div{padding:3px 0;display:flex;gap:8px;align-items:center;cursor:pointer;word-break:break-all}.mem div:hover{color:#fff}
.page{flex:1;overflow:auto;padding:4px 2px;min-width:0}.page h2{margin:6px 0 16px;font-size:24px;letter-spacing:-.4px}.page h3{margin:26px 0 10px;font-size:16px}
.srch{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.srch input{flex:1;max-width:560px}
.btn{padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:var(--s2);cursor:pointer;font-weight:500;text-decoration:none;display:inline-block}.btn:hover{background:rgba(255,255,255,.12)}
.btn.p{background:linear-gradient(135deg,var(--acc),var(--acc2));border:0;color:#fff;box-shadow:0 6px 20px rgba(79,124,255,.4)}.btn.d{color:var(--bad)}
.btn.s{padding:6px 12px;font-size:13px}
.res{padding:14px 16px;margin-bottom:10px;cursor:pointer}.res:hover{border-color:var(--acc)}.res small{display:block;color:var(--mut);margin-bottom:4px}mark{background:rgba(79,124,255,.35);color:#fff;border-radius:4px;padding:0 2px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}.stat{padding:18px}.stat b{font-size:30px;letter-spacing:-1px;display:block}.stat span{color:var(--mut);font-size:12px}
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line)}th{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:600}tr:last-child td{border:0}
.tag{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:600}.tag.g{background:rgba(52,211,153,.15);color:var(--ok)}.tag.y{background:rgba(251,191,36,.15);color:var(--warn)}.tag.r{background:rgba(251,113,133,.15);color:var(--bad)}
.map{padding:22px;margin-bottom:18px}.map svg{width:100%;height:auto;max-height:340px}
@keyframes fl{to{stroke-dashoffset:-40}}.flow{stroke-dasharray:6 8;animation:fl 1.6s linear infinite;fill:none;stroke-width:2;opacity:.85}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;padding:16px;margin-bottom:10px}.form label{display:flex;flex-direction:column;gap:4px;color:var(--mut);font-size:12px}.form .chk{flex-direction:row;align-items:center;gap:8px;color:var(--tx)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.secret{font-family:ui-monospace,Consolas,monospace;background:var(--s2);border:1px solid var(--acc);border-radius:12px;padding:12px 16px;margin:10px 0;word-break:break-all}
.msg{color:var(--mut);font-size:13px;margin:6px 0}.msg.err{color:var(--bad)}
.login{margin:auto;width:min(380px,92vw);padding:30px;display:flex;flex-direction:column;gap:14px}.login .logo{justify-content:center;font-size:26px}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px;word-break:break-all}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1b2140;border:1px solid var(--line);padding:10px 18px;border-radius:12px;z-index:9}
a{color:#8fb0ff}
@media(max-width:820px){aside{width:150px}.mem{display:none}header{padding:12px}main{padding:0 10px 10px}}
.loginwrap{margin:auto;display:flex;flex-direction:column;gap:18px;align-items:center;width:min(420px,94vw);padding:16px 0}.loginwrap .login{margin:0;width:100%;box-sizing:border-box}
.gchat{width:100%;box-sizing:border-box;padding:14px;display:flex;flex-direction:column;gap:10px}.gchead{display:flex;flex-direction:column;gap:2px}
.gclog{height:200px;overflow:auto;font-size:13px;background:rgba(0,0,0,.18);border-radius:10px;padding:8px;word-break:break-word}
.gcl.sys{color:var(--mut);font-style:italic}.gcl.act{color:var(--mut)}.gcl.own span{opacity:.9}
.lang{position:relative;display:inline-block}.loginwrap>.lang{align-self:flex-end}
.langbtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.langmenu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:60;min-width:190px;max-height:65vh;overflow:auto;background:#121833;border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.langmenu[hidden]{display:none}
.langopt{display:flex;align-items:center;gap:10px;padding:8px 10px;background:none;border:0;border-radius:8px;color:inherit;cursor:pointer;font:inherit;text-align:start}
.langopt:hover,.langopt.on{background:rgba(255,255,255,.1)}
.flag{border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.25);flex:none}

.copyright{text-align:center;color:var(--mut);font-size:12px;padding:14px 16px}.copyright a{color:var(--mut);text-decoration:underline}

/* login pages: same look as bsdforall.org (paper, serif, yellow accent bar) */
body:has(.loginwrap){--bg:#f6f7f9;--tx:#1c2530;--mut:#5a6573;--line:#d5dae1;--s1:#fff;--s2:#fff;--acc:#d9a406;--acc2:#d9a406;--link:#1f4fa3;--cmdbg:#fff4cc;background:var(--bg);font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;font-size:17px;line-height:1.6}
@media (prefers-color-scheme:dark){body:has(.loginwrap){--bg:#17202b;--tx:#e4e8ee;--mut:#9aa6b5;--line:#2c3847;--s1:#1d2835;--s2:#17202b;--acc:#e3b341;--acc2:#e3b341;--link:#8fb6ff;--cmdbg:#2a2716}}
body:has(.loginwrap) .card{border-radius:0;backdrop-filter:none;border:1px solid var(--line);border-left:4px solid var(--acc)}
body:has(.loginwrap) .login .logo{font-family:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;font-size:30px;font-weight:700;letter-spacing:-.01em}
body:has(.loginwrap) .mark{display:none}
body:has(.loginwrap) .logo i{background:none;color:var(--acc);-webkit-text-fill-color:currentColor}
body:has(.loginwrap) input{border-radius:0;font:inherit;font-size:16px;background:var(--s2);border:1px solid var(--line);color:var(--tx)}
body:has(.loginwrap) input:focus{border-color:var(--acc);box-shadow:0 0 0 2px var(--cmdbg)}
body:has(.loginwrap) .btn{border-radius:0;font-family:inherit;color:var(--tx);background:var(--s2)}
body:has(.loginwrap) .btn:hover{background:var(--cmdbg)}
body:has(.loginwrap) .btn.p{background:var(--acc);color:#1c2530;border:0;box-shadow:none;font-weight:700}
body:has(.loginwrap) .langmenu{background:var(--s1);border-radius:0;box-shadow:0 8px 24px -10px rgba(0,0,0,.4)}
body:has(.loginwrap) .langopt{border-radius:0}body:has(.loginwrap) .langopt:hover{background:var(--cmdbg)}
body:has(.loginwrap) .copyright a{color:var(--link)}
/* chat sidebar, member menu, emoticons */
.sh{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--mut);margin:12px 6px 4px}
.chgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:2px 0 8px}
.chgrid .ch{min-width:0;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:var(--s1)}
.chgrid .ch>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mem .mm{padding:3px 6px;border-radius:6px;cursor:pointer;user-select:none}.mem .mm:hover{background:rgba(255,255,255,.06)}.mem .mm.sel{background:rgba(79,124,255,.3)}
.ctx{position:fixed;z-index:200;min-width:230px;max-height:calc(100vh - 8px);overflow:auto;background:#121833;color:var(--tx);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.5);display:flex;flex-direction:column}
.ctxh{padding:6px 10px;font-weight:700;color:var(--mut);word-break:break-all}
.ctxs{padding:8px 10px 2px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--mut);border-top:1px solid var(--line);margin-top:4px}
.ctxb{background:none;border:0;color:inherit;font:inherit;text-align:start;padding:6px 10px;border-radius:8px;cursor:pointer}.ctxb:hover{background:rgba(255,255,255,.1)}
.ctxi{display:flex;flex-direction:column;gap:3px;padding:4px 10px}.ctxi span{font-size:12px;color:var(--mut)}.ctxi input{padding:6px 8px;border-radius:8px}
.emopanel{position:fixed;z-index:200;width:min(340px,92vw);max-height:260px;overflow:auto;background:#121833;border:1px solid var(--line);border-radius:12px;padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.emoi{background:none;border:0;font-size:20px;cursor:pointer;border-radius:8px;padding:4px;line-height:1.2}.emoi:hover{background:rgba(255,255,255,.12)}
.emo{background:none;border:0;font-size:22px;cursor:pointer;padding:0 6px;line-height:1}.ch{position:relative}.ch .cx{background:none;border:0;color:var(--mut);font-size:16px;line-height:1;cursor:pointer;padding:0 4px;margin-inline-start:auto;border-radius:6px;opacity:0}.ch:hover .cx,.ch.on .cx{opacity:1}.ch .cx:hover{color:#fff;background:rgba(251,113,133,.35)}
/* tablet / touch */
.dots{display:none;background:none;border:0;color:var(--mut);font-size:18px;line-height:1;padding:0 6px;margin-inline-start:auto;cursor:pointer;border-radius:6px}
.mem .mm .dots{margin-inline-start:auto}
.mm,.ch{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media (hover:none){.dots{display:inline-block}.ch .cx{opacity:1}.ch .dots{margin-inline-start:auto}.ch .dots+.cx{margin-inline-start:0}input,select{font-size:16px}.mm{padding:7px 6px!important}}
@media (max-width:900px){aside{width:175px;padding:12px 8px}.mem{width:150px;padding:12px}main{padding:0 10px 12px}.top{padding:12px}.inp{padding:10px 12px}.msgs{padding:12px}header{flex-wrap:wrap}}.memtog{display:none}
@media (max-width:820px){.memtog{display:inline-block}.mem.open{display:flex!important;flex-direction:column;position:fixed;right:8px;top:76px;bottom:8px;z-index:150;width:min(260px,85vw);background:#121833;box-shadow:0 12px 40px rgba(0,0,0,.6)}.chgrid{grid-template-columns:1fr}}
/* media cards (YouTube, Spotify, images) */
.mediabox{margin:6px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.media{display:inline-block;padding:6px 12px;border-radius:10px;border:1px solid var(--line);background:var(--s2);color:var(--tx);cursor:pointer;font:inherit;font-size:13px;text-decoration:none}.media:hover{background:rgba(255,255,255,.12)}
.mediabox iframe{width:min(480px,100%);aspect-ratio:16/9;border:0;border-radius:12px;background:#000}
.mediabox iframe.sp{aspect-ratio:auto;height:152px}.mediabox iframe.sp.tall{height:352px}
.mediabox img{max-width:min(420px,100%);max-height:320px;border-radius:10px}
/* floating media windows */
.mwin{position:fixed;z-index:120;width:min(480px,92vw);min-width:240px;min-height:90px;resize:both;overflow:hidden;display:flex;flex-direction:column;background:#121833;color:var(--tx);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 50px rgba(0,0,0,.6)}
.mwh{display:flex;align-items:center;gap:10px;padding:6px 10px;cursor:move;touch-action:none;border-bottom:1px solid var(--line);font-size:13px;user-select:none}
.mwh span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mwh a{color:var(--mut);text-decoration:none}
.mwx{background:none;border:0;color:var(--mut);font-size:20px;line-height:1;cursor:pointer;border-radius:6px;padding:0 6px}.mwx:hover{color:#fff;background:rgba(251,113,133,.35)}
.mwb{flex:1;min-height:0;background:#000;display:flex;align-items:center;justify-content:center}
.mwb iframe,.mwb video{width:100%;height:100%;border:0}.mwb img{max-width:100%;max-height:100%;object-fit:contain}.mwb audio{width:100%}