:root{color-scheme:dark;--bg:#151922;--panel:#1d2230;--panel2:#242b3b;--line:#343e52;--text:#edf1f9;--muted:#a9b5ca;--accent:#adadff;--green:#86dfbc;--danger:#ffa5ae;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
button,input,textarea,select{font:inherit}
button{cursor:pointer;color:inherit;background:var(--panel2);border:1px solid transparent;border-radius:9px;padding:.6rem .8rem}
button:hover{background:#354058}
button:disabled{opacity:.5;cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input,textarea,select{width:100%;color:var(--text);background:#121722;border:1px solid var(--line);border-radius:8px;padding:.7rem;min-width:0}
textarea{resize:vertical;min-height:85px;max-height:200px}
label{display:block;margin:.85rem 0 .35rem;color:var(--muted);font-size:.88rem}
input[type=checkbox]{width:auto;margin-right:.5rem}
a{color:#c3c2ff;text-underline-offset:3px;overflow-wrap:anywhere}
h1,h2,h3,p{margin-top:0}
h2{font-size:1.3rem}
h3{font-size:1rem}
small,.muted{color:var(--muted)}
.primary{background:#b8b0ff;color:#17162d;font-weight:650}
.primary:hover{background:#d0caff}
.danger{color:var(--danger)}
.ghost{background:transparent;border-color:var(--line)}
.row{display:flex;align-items:center;gap:.6rem}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.stack{display:grid;gap:.8rem}
.full{width:100%}
.spacer{flex:1}
.hidden{display:none!important}
.badge{padding:3px 7px;border-radius:8px;font-size:.75rem;background:#343c53;color:#d4dcf0}
.divider{height:1px;background:var(--line);margin:1rem 0}
.empty{padding:3rem 1.5rem;color:var(--muted);text-align:center;line-height:1.7}
.loading{padding:3rem;text-align:center}
.eyebrow{letter-spacing:.14em;font-size:.72rem;text-transform:uppercase;color:var(--muted)}
.brand{font-size:1.7rem;font-weight:750;letter-spacing:-.05em}
.brandmark{display:grid;place-items:center;width:43px;height:43px;border-radius:15px;background:#c6b7fc;color:#26203c;font-size:25px;font-weight:800}
.avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;background:#3a425e;color:#d9d9ff;border-radius:13px;font-weight:700;object-fit:cover}
.avatar.large{width:60px;height:60px;border-radius:20px;font-size:24px}
.auth{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr;max-width:1100px;margin:auto;align-items:center;padding:4rem 2rem;gap:5rem}
.auth-hero h1{font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.06em;line-height:1.05;margin:2rem 0 1.5rem}
.auth-hero p{color:var(--muted);font-size:1.1rem;line-height:1.8;max-width:400px}
.auth-card{padding:2rem;background:var(--panel);border:1px solid var(--line);border-radius:20px}
.tabs{display:flex;gap:.4rem;margin-bottom:1.3rem}
.tabs button{flex:1}
.tabs .active{background:#383850;color:#d5d0ff}
.form-error{color:var(--danger);line-height:1.5;margin:.8rem 0}
.app-shell{height:100dvh;display:grid;grid-template-columns:68px 250px minmax(0,1fr)}
.rail{background:#111620;display:flex;flex-direction:column;align-items:center;padding:18px 10px;gap:17px;border-right:1px solid #2c3344}
.rail button{height:43px;width:43px;padding:0;border-radius:14px}
.rail .active{box-shadow:inset 3px 0 var(--accent)}
.sidebar{background:#1a202c;display:flex;min-height:0;flex-direction:column;border-right:1px solid var(--line)}
.side-head{padding:23px 18px 15px}
.side-head h2{margin-bottom:4px}
.side-controls{padding:0 12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.room-list{overflow:auto;flex:1;padding:0 8px}
.room-section{padding:15px 10px 8px;font-size:.7rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.room-button{width:100%;text-align:left;background:transparent;display:flex;align-items:center;gap:10px;border-radius:8px;padding:11px 10px;margin:2px 0;min-width:0}
.room-button.active{background:#34364f;color:#ebe6ff}
.room-button .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.room-button .unread{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.user-foot{padding:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
.user-foot .profile-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}
.chat-area{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-header{height:78px;flex:none;padding:14px 23px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}
.chat-header h2{margin:0 0 4px;font-size:1.15rem}
.chat-header .heading{min-width:0;flex:1}
.chat-header .heading h2{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.chat-body{display:flex;min-height:0;flex:1}
.conversation{min-width:0;flex:1;display:flex;flex-direction:column}
.messages{overflow:auto;flex:1;padding:20px 26px;scrollbar-color:#3e4860 transparent}
.message{display:flex;gap:12px;padding:13px 0}
.message .message-content{flex:1;min-width:0}
.message-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.message-meta time{color:var(--muted);font-size:.73rem}
.message-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.message-tools{display:flex;gap:4px;margin-top:7px;flex-wrap:wrap}
.message-tools button{padding:3px 7px;font-size:.75rem;background:transparent;color:var(--muted)}
.message-tools button:hover{background:var(--panel2);color:var(--text)}
.reply{border-left:2px solid #817ac3;padding:4px 10px;color:var(--muted);font-size:.8rem;margin:0 0 8px;overflow-wrap:anywhere}
.reaction{padding:4px 8px;border:1px solid var(--line);font-size:.8rem}
.reaction.mine{background:#3f3b61;border-color:#77709e}
.attachment{padding:12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;max-width:420px;margin:10px 0;display:block}
.attachment small{display:block;margin-top:4px}
.preview{display:block;max-height:220px;max-width:100%;border-radius:10px;margin:8px 0}
.composer{padding:12px 22px 18px;border-top:1px solid var(--line)}
.composer textarea{background:#222b3a;min-height:70px;max-height:130px}
.compose-meta{padding:6px 0;color:var(--muted);font-size:.8rem}
.connection{font-size:.73rem;color:var(--green)}
.connection.offline{color:var(--danger)}
.info-panel{width:270px;overflow:auto;border-left:1px solid var(--line);padding:22px 18px;background:#191f2a}
.member{padding:10px 0;border-bottom:1px solid #2b3445}
.online-dot{display:inline-block;width:7px;height:7px;background:#7f8a9d;border-radius:50%;margin-right:5px}
.online-dot.on{background:var(--green)}
.toolbar{padding:8px 20px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center}
.toolbar input{padding:.45rem}
.mobile-menu{display:none}
.welcome{display:flex;flex:1;align-items:center;justify-content:center;padding:3rem;text-align:center}
.welcome h1{font-size:2.5rem;letter-spacing:-.05em}
.welcome p{color:var(--muted);line-height:1.8}
.modal-title{display:flex;align-items:center;justify-content:space-between;gap:20px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:1.2rem}
dialog{background:var(--panel);color:var(--text);border:1px solid #495572;border-radius:18px;width:min(560px,calc(100vw - 26px));max-height:88dvh;padding:25px;box-shadow:0 30px 100px #0008}
dialog::backdrop{background:#080b13b8;backdrop-filter:blur(3px)}
dialog p,dialog li{line-height:1.65}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;max-width:calc(100vw - 30px);border-radius:12px;background:#f1ecff;color:#211a36;padding:12px 18px;box-shadow:0 5px 30px #0005;display:none}
.admin-shell{min-height:100dvh;display:grid;grid-template-columns:220px minmax(0,1fr)}
.admin-nav{background:#191f2a;border-right:1px solid var(--line);padding:24px 16px}
.admin-nav button{display:block;width:100%;text-align:left;margin:7px 0}
.admin-main{padding:35px;max-width:1400px;min-width:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:25px 0}
.stat,.card{padding:20px;border:1px solid var(--line);border-radius:13px;background:var(--panel);min-width:0;overflow-wrap:anywhere}
.stat strong{display:block;font-size:1.7rem;margin-top:10px}
.card{margin:12px 0}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px}
.scroll-table{overflow:auto}
table{border-collapse:collapse;width:100%;text-align:left;font-size:.86rem}
td,th{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted)}
pre{white-space:pre-wrap;word-break:break-word;background:#111722;padding:14px;border-radius:10px}
.notice{border-left:3px solid #b9a7fc;padding:12px 16px;background:#26273c;color:#d5d4e9;line-height:1.6;margin:15px 0}
.archive-body{white-space:pre-wrap;overflow-wrap:anywhere}
.admin-mobile-title{display:none}
@media(max-width:1100px){.info-panel{width:230px}
.app-shell{grid-template-columns:62px 215px minmax(0,1fr)}
}
@media(max-width:850px){.info-panel{position:absolute;right:0;top:78px;bottom:0;width:290px;box-shadow:-15px 0 40px #0006;z-index:6}
.chat-header{padding:12px}
.chat-header .small-label{display:none}
.messages{padding:15px}
.auth{gap:2rem}
.admin-main{padding:22px}
.admin-shell{grid-template-columns:170px minmax(0,1fr)}
}
@media(max-width:650px){.auth{display:block;padding:30px 18px}
.auth-hero h1{font-size:2.5rem;margin:22px 0 12px}
.auth-hero p{margin-bottom:22px}
.auth-card{padding:22px}
.app-shell{display:flex}
.rail{display:none}
.sidebar{position:fixed;z-index:9;top:0;bottom:0;left:0;width:285px;transform:translateX(-100%);transition:transform .15s;box-shadow:20px 0 80px #0008}
.sidebar.open{transform:translateX(0)}
.mobile-menu{display:block}
.chat-area{width:100%}
.chat-header{height:74px;gap:8px}
.chat-header h2{font-size:1rem}
.chat-header button{padding:8px}
.composer{padding:10px 12px max(12px,env(safe-area-inset-bottom))}
.messages{padding:10px 12px}
.message{gap:9px}
.message .avatar{width:30px;height:30px;border-radius:10px;font-size:.8rem}
.message-tools button{padding:7px}
.toolbar{padding:8px 12px}
.admin-shell{display:block}
.admin-nav{position:static;padding:14px;border-right:0;border-bottom:1px solid var(--line);display:flex;gap:5px;overflow:auto}
.admin-nav .brand{display:none}
.admin-nav button{width:auto;white-space:nowrap;padding:9px}
.admin-main{padding:20px 14px}
.stats{grid-template-columns:1fr 1fr}
.admin-mobile-title{display:block}
button{min-height:36px}
.welcome{padding:25px}
.welcome h1{font-size:2rem}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}