/* Quiet materials, clear hierarchy. Loaded last on every screen. */
:root{--ink:#24282f;--muted:#747c87;--line:rgba(61,75,92,.12);--paper:#f2f4f7;--card:#ffffffd9;--night:#252c36;--violet:#3478c8;--violet-2:#5a92d4;--lime:#dce9f8;--green:#4a9274;--glass:rgba(255,255,255,.68);--ease:cubic-bezier(.22,1,.36,1);--shadow:0 24px 80px #25365018}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 10% 0%,#dce6ee,transparent 60%),linear-gradient(125deg,#edf0f4,#e4e8ed)!important;color:var(--ink)}
button,input,textarea,select{font-family:inherit}button,a,label.tool-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,.tool-btn,.custom-bg-upload,[role=tab],a{transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .25s ease,transform .32s var(--ease),opacity .2s ease}
button:not(:disabled):active,.tool-btn:active,[data-pressed=true]{transform:scale(.955);filter:brightness(.97)}
button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,label.tool-btn:focus-within{outline:3px solid #3478c878;outline-offset:3px}
input:not([type=checkbox]):not([type=file]),textarea,select{transition:border-color .2s,box-shadow .25s,background .25s;border-color:var(--line);border-radius:12px;background:#ffffffa6;color:var(--ink)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:#3478c88c;box-shadow:0 0 0 4px #3478c814;background:#fffffff2}
:where(.messages,.users,.groups,.preview-content,.emoji-panel,.message-list,.admin-member-picker,.member-picker){scrollbar-width:thin;scrollbar-color:#8b98a650 transparent;overscroll-behavior:contain}
::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:20px;background:#8b98a65c;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background-color:#71809299}::-webkit-scrollbar-track{background:transparent}
.ambient{display:none}.shell{max-width:1500px;border:1px solid #ffffffc9;border-radius:24px;background:#ffffff52!important;box-shadow:0 24px 85px #27394c20,0 1px 2px #fff inset!important}
.sidebar,.topbar,.composer,.emoji-panel,dialog,.notification-prompt,.transfer,.form-card,.admin-main>header,.admin-sidebar{background:var(--glass);-webkit-backdrop-filter:blur(26px) saturate(130%);backdrop-filter:blur(26px) saturate(130%)}
.sidebar{color:var(--ink);border-right:1px solid #ffffffa6;padding:26px 18px 18px}.sidebar:before,.sidebar:after{display:none}.brand b{font-size:16px;font-weight:650;letter-spacing:-.4px}.brand small{color:#7c8590;letter-spacing:1.8px;font-size:8px}.brand-mark,.brand>span,.admin-brand>span{background:#e0eaf5;color:#477baa;box-shadow:none;border-radius:13px}.identity{border-color:var(--line);background:#ffffff40;border-radius:16px}.identity-copy strong{color:var(--ink)}.identity-copy small,.identity-copy span{color:#7b8490}.avatar{border-radius:15px;background:#dce6f2;color:#3d658d;box-shadow:none}
.section-label,.online-label,.private-hint{color:#737f8d;letter-spacing:.3px}.private-hint{font-size:10px;line-height:1.5}.online-label em{background:#e1e7ee;color:#657181}.room-nav,.group-item,.user{border-radius:13px;color:#414c5a}.room-nav b,.group-item b,.user b{font-size:12px;font-weight:600}.room-nav small,.group-item small,.user small{color:#7a8592}.room-nav.active,.group-item.active,.user.active{background:#ffffffcf;color:#255e9e;border-color:#ffffff;box-shadow:0 3px 12px #30485f09,0 0 0 1px #3b587808}.room-nav>span:first-child,.group-avatar{background:#dde8f4;color:#4c75a1;border-radius:11px}.section-label button{background:#ffffff9c;color:#55718e}.unread-badge{background:#367bc8;color:white}.mesh-card{border:1px solid #ffffffad;background:#ffffff58;border-radius:16px;box-shadow:none}.mesh-title strong{color:#4b5a68;font-size:11px}.mesh-card p,.mesh-stat{color:#7b8793;font-size:10px;line-height:1.65}.mesh-stat b{color:#52677e}.pulse{box-shadow:none}.chat{background:transparent!important}.topbar{border-bottom:1px solid #ffffffaf;min-height:84px}.topbar h1{font-size:18px;letter-spacing:-.45px;font-weight:650}.topbar p{color:var(--muted);font-size:11px}.room-icon{background:#e3ebf5;color:#53789d;border:1px solid #ffffffb3;border-radius:14px;box-shadow:0 2px 7px #304a6708}.connection-pill{background:#ffffff75;border-color:#e4e9ee;color:#607183}.top-actions button,.back-room,.mobile-menu{border-color:#ffffffb3;background:#ffffff7a;color:#5b6c7e;border-radius:12px}.top-actions button{min-height:36px}.connection-pill i{box-shadow:none}.messages{padding:26px 30px}.messages .welcome-card{border:0;background:transparent;box-shadow:none;margin:12px auto 24px;padding:22px;max-width:450px;text-align:center}.welcome-card h2{font-size:21px;font-weight:550;letter-spacing:-.6px;color:#435367}.welcome-card p{font-size:12px;line-height:1.9;color:#85909c}.welcome-symbol{margin:auto auto 14px;background:#ffffff8f;border:1px solid #fff;color:#7189a2;border-radius:18px;box-shadow:0 5px 18px #53687e0a}.day-divider,.system{color:#8b95a0;font-size:10px}.day-divider:before,.day-divider:after{background:#cbd3dd66}
body[data-chat-bg=mist] .messages{background:linear-gradient(145deg,#f4f6f980,#e7edf466)}
.bubble{border:1px solid #ffffffc9;border-radius:7px 18px 18px 18px;padding:11px 15px;background:#ffffffe3;box-shadow:0 2px 8px #263c5106;color:#303b48;font-size:14px;line-height:1.65}.message.mine .bubble{border-color:#d9e6f6;border-radius:18px 7px 18px 18px;background:#dfebfa;color:#294b71;box-shadow:0 2px 8px #30568106}.msg-meta{color:#8a95a2}.msg-meta b{font-weight:550}.msg-avatar{border-radius:13px}.default-avatar{background:linear-gradient(145deg,hsl(var(--avatar-h) 24% 85%),hsl(var(--avatar-h) 23% 68%));color:#fff}.file-card{background:#ffffff6b;border-color:#c8d8e85c;border-radius:14px}.file-actions button{background:#ffffff9e;border:1px solid #ffffffc2;color:#50749a;border-radius:10px}.private-tag{background:#e4edf6;color:#527caa}
.composer{margin:0 16px 14px;padding:10px 12px;border:1px solid #ffffffd9;border-radius:20px;box-shadow:0 5px 25px #3248620c;gap:7px}.composer textarea{background:transparent;border:0;box-shadow:none;font-size:14px;padding:11px 8px;min-height:42px}.composer textarea:focus{background:transparent;box-shadow:none}.tool-btn{border:0;border-radius:12px;color:#738497;background:transparent;min-width:38px;min-height:40px}.send-btn{background:#3678bd;color:#fff;box-shadow:0 3px 10px #3478c822;border-radius:13px;width:40px;height:40px;font-size:24px}.emoji-panel{border:1px solid #ffffffd9;border-radius:20px;box-shadow:0 20px 65px #25375020;transform-origin:bottom left;animation:material-in .25s var(--ease)}.transfer{border:1px solid #ffffffbd;border-radius:13px;box-shadow:0 4px 20px #34475b0b}.transfer-bar i{background:#5a89bb;transition:width .35s var(--ease)}.notification-prompt{color:#516a83;border-color:#ffffffb0;border-radius:16px}.notification-prompt button{background:#527faa}
/* Dialog open and close are progressive enhancements, never delayed in JS. */
dialog{border:1px solid #ffffffda;border-radius:24px;color:var(--ink);box-shadow:0 32px 100px #23354b35;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .2s ease,transform .32s var(--ease),display .32s allow-discrete,overlay .32s allow-discrete}dialog[open]{opacity:1;transform:none}dialog::backdrop{background:#17263a38;backdrop-filter:blur(6px);opacity:0;transition:opacity .25s,display .25s allow-discrete,overlay .25s allow-discrete}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;transform:translateY(15px) scale(.965)}dialog[open]::backdrop{opacity:0}}dialog h2{font-weight:600;letter-spacing:-.6px}dialog p{line-height:1.7}.dialog-icon{background:#e2ebf5;color:#6285a8;box-shadow:none}.dialog-actions button{background:#3678bd;border-radius:11px}.dialog-actions .secondary{background:#e6ebf1;color:#5c6b7c}.setting-section{background:#ffffff68;border-color:#ffffffbe;border-radius:16px}.setting-title button{background:#526e8b;border-radius:10px}.background-choices button{background:#ffffff9c}.background-choices button.active{border-color:#6793c4;color:#4e78a5}.setting-section input[type=checkbox]{accent-color:#3678bd}
/* Sign-in: one quiet material surface, no oversized gradient decoration. */
.auth-shell{max-width:1180px;margin:auto;grid-template-columns:1fr 1fr}.intro{background:transparent;color:#354558;padding:64px 10%}.intro .brand span{background:none;color:#6382a0}.intro h1{font-size:clamp(34px,4vw,54px);font-weight:550;letter-spacing:-2px;line-height:1.4}.intro .eyebrow{color:#8694a3;letter-spacing:2px}.intro-copy>p:last-child{color:#7b8999;font-size:15px}.intro small{color:#8c97a3}.form-card{padding:34px;border:1px solid #ffffffe0;border-radius:25px;max-width:430px;box-shadow:0 22px 70px #3045590e,0 1px 0 #fff inset}.form-card h2{color:#344457;font-size:26px;font-weight:600}.form-card .subtitle,.form-card .footnote{color:#7a8797}.form-card label{color:#596b7e;font-weight:550}.tabs{position:relative;background:#dce3ec7a;border:1px solid #fff7;border-radius:12px;padding:4px;gap:4px;margin-bottom:28px}.tabs button{flex:1;border:0;border-radius:9px;padding:9px;color:#738398;font-size:13px}.tabs button[aria-selected=true]{background:#ffffffeb;box-shadow:0 2px 7px #34465a10;color:#415f7f;font-weight:600}.form-card input{background:#ffffffa3}.form-card .submit{background:#3678bd;border-radius:12px;font-size:14px;padding:14px}.password-field button{color:#778b9f}.strength-track{background:#dfe5ed}.strength-track span{transition:width .4s var(--ease),background .3s}.match-text{color:#7d8d9c}
/* Administration uses the same restrained materials. */
.admin-shell{background:transparent}.admin-sidebar{color:#3e5269;border-right:1px solid #fff9}.admin-sidebar .admin-brand{color:#3d526c}.admin-brand small{color:#8b97a6}.admin-sidebar nav button{color:#708197;border-radius:12px;font-size:12px}.admin-sidebar nav button.active{background:#ffffffb5;color:#3d6b9e;border-color:white}.admin-sidebar nav button.active i{background:#dfebf6;color:#517fac}.sidebar-foot{background:#ffffff64;border-color:#fff9}.sidebar-foot small{color:#8391a2}.admin-main>header{background:#ffffff75;border-bottom-color:#fff9}.admin-main header h1{font-weight:600;letter-spacing:-.5px}.stat-card,.panel{border:1px solid #ffffffcc;background:#ffffffa8;box-shadow:0 5px 25px #334c6707;border-radius:18px}.stat-card:after{display:none}.stat-card b{font-weight:550;color:#3d566e}.panel-head h2{font-weight:600}.data-table th{background:#eef2f67a}.data-table td{border-color:#dce3ec6b}.panel-head p,.stat-card small{color:#8290a0}.person-avatar{background:#9aafc3}.header-actions button,.header-actions a{background:#ffffff9e;border-color:#fff9}.admin-message:hover{background:#ffffff8a}.row-actions button{background:#e6edf5;color:#567495}.row-actions .danger-action{background:#f7e7e5;color:#a36058}.sidebar-foot b{color:#596f85}.admin-toast{background:#34475ce8;backdrop-filter:blur(18px)}
@media(hover:hover) and (pointer:fine){button:not(:disabled):hover,.tool-btn:hover{filter:brightness(1.025);box-shadow:0 4px 14px #324a6310}.room-nav:hover,.group-item:hover,.user.private-ready:hover{background:#ffffff8a;border-color:#ffffffaa;color:#3f627f;transform:translateX(2px)}.tool-btn:hover,.top-actions button:hover{background:#ffffffd1;transform:translateY(-1px)}.send-btn:hover,.form-card .submit:hover{background:#2b6eb5;box-shadow:0 6px 18px #3478c829}.file-card:hover{border-color:#94b4d880;box-shadow:0 3px 18px #4261840a}.background-choices button:hover{transform:translateY(-2px)}.admin-sidebar nav button:hover{background:#ffffff85;color:#496d94}}
@media(pointer:coarse){.top-actions button,.tool-btn,.send-btn,.back-room,.mobile-menu{min-width:44px;min-height:44px}.room-nav,.group-item,.user{min-height:48px}.password-field button{min-width:44px}.header-actions button{min-height:44px}}
@media(max-width:900px){.shell{border-radius:0;border:0}.composer{margin-inline:12px}.admin-sidebar{transition:transform .4s var(--ease)}.header-actions #logoutAdmin{display:block}}
@media(max-width:700px){.shell{height:100dvh;margin:0}.sidebar{background:#f0f4f9ed;transition:transform .42s var(--ease);box-shadow:16px 0 70px #1e32442b}.topbar{min-height:76px;padding-inline:12px}.topbar h1{font-size:16px}.messages{padding:18px 14px}.composer{margin:0 8px max(8px,env(safe-area-inset-bottom));padding:7px;gap:3px;border-radius:19px}.composer textarea{min-width:0;padding-inline:5px}.welcome-card h2{font-size:19px}.auth-shell{display:block}.intro{padding:28px}.intro .brand{font-size:18px}.form-panel{padding:0 18px 32px}.form-card{padding:26px 22px;border-radius:22px}.top-actions .install-btn{display:none}.admin-content{padding:14px}}
@supports not (backdrop-filter:blur(1px)){.sidebar,.topbar,.composer,.emoji-panel,dialog,.form-card,.admin-sidebar,.admin-main>header{background:#f4f6f9}}
@media(prefers-reduced-transparency:reduce){.sidebar,.topbar,.composer,.emoji-panel,dialog,.form-card,.admin-sidebar,.admin-main>header{background:#f4f6f9;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:active,[data-pressed=true]{transform:none!important}}
@keyframes material-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.setting-title .material-switch{position:relative;flex:none;width:48px;height:29px;min-height:29px;padding:3px;border:1px solid #95a4b629;background:#bdc8d4;border-radius:20px;box-shadow:inset 0 1px 3px #52627915;transition:background .28s,border-color .28s}
.material-switch span{display:block;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #23364c2c;transform:translateX(0);transition:transform .35s var(--ease),width .2s}
.setting-title .material-switch[aria-checked=true]{background:#598bbd;border-color:#598bbd}.material-switch[aria-checked=true] span{transform:translateX(18px)}.material-switch:active span{width:24px}.material-switch[aria-checked=true]:active span{transform:translateX(15px)}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body[data-chat-bg=night] .welcome-card h2,body[data-chat-bg=aurora] .welcome-card h2{color:#dce6f2}body[data-chat-bg=night] .welcome-card p,body[data-chat-bg=aurora] .welcome-card p{color:#9baabd}
.topbar .room-heading{flex:1}.top-actions{flex-shrink:0;gap:5px}
@media(max-width:560px){.top-actions .connection-pill{display:none}.room-heading .room-icon{display:none}.topbar{gap:7px}.topbar .room-heading h1{font-size:15px}.topbar .room-heading p{font-size:10px}.top-actions{gap:2px}}