:root{font-family:Inter,Segoe UI,Microsoft YaHei,sans-serif;color:#e8eaf3;background:#101421;font-synthesis:none;font-weight:400;font-size:14px;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;transition:background .18s,border-color .18s,transform .18s}button:disabled{cursor:not-allowed;opacity:.5}button:not(:disabled):hover{filter:brightness(1.13)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #a39aff;outline-offset:3px}button{color:inherit}h1,h2,h3,h4,p{margin:0}h1{font-size:30px;letter-spacing:-1px}h2{font-size:21px}h3{font-size:16px}p{line-height:1.8;color:#959db6}small{color:#8d96ae}svg{flex-shrink:0}input,textarea,select{width:100%;padding:13px 14px;color:#e8eaf3;background:#141928;border:1px solid #30374c;border-radius:9px}input::placeholder,textarea::placeholder{color:#656f89}textarea{resize:vertical;min-height:100px}label{display:flex;flex-direction:column;gap:9px;font-size:13px;color:#bcc3d7}form{display:flex;flex-direction:column;gap:20px}.primary{display:flex;align-items:center;justify-content:center;gap:10px;background:#8c7af6;color:#fff;border:1px solid #9e8cff;border-radius:9px;padding:12px 18px;font-weight:600}.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#262c42;border:1px solid #3a425d;padding:10px 16px;border-radius:8px}.eyebrow{display:block;color:#a397f4;font-size:11px;font-weight:700;letter-spacing:2px}.brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:700}.brand-icon{display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:14px;background:#8c7af6;color:#fff;box-shadow:0 5px 20px #8c7af622}.brand-en{display:block;font-size:8px;letter-spacing:2px;font-weight:500;color:#8d96ae;margin-top:4px}.grow{flex:1;min-width:0}.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #30364a;border-radius:20px;font-size:11px;white-space:nowrap;color:#aeb6cc;background:#1b2131}.online-dot,.offline-dot,.idle-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#61d5a4;flex-shrink:0}.offline-dot{background:#eea677}.idle-dot{background:#78839c}.avatar{display:inline-flex;align-items:center;justify-content:center;background:#444069;color:#d4caff;border-radius:12px;font-weight:600;flex-shrink:0}.avatar.small{width:37px;height:37px}.avatar.tiny{width:28px;height:28px;border-radius:9px;font-size:12px}.icon-button{display:inline-flex;align-items:center;justify-content:center;padding:8px;border:0;border-radius:8px;background:transparent;color:#a8b1c9}.icon-button.primary{background:#8c7af6;color:#fff}.error-banner,.form-error{background:#432736;color:#ffbfca;border:1px solid #70404e;padding:12px 16px;border-radius:9px;font-size:13px}.error-banner{display:flex;align-items:center;justify-content:space-between;margin:16px 28px 0}.error-banner button{background:none;border:0;font-size:22px;color:#ffbfca}.success{font-size:12px;color:#81d9b5;margin-top:18px}.muted-text{color:#7c879f}.danger-text{color:#efa8b3}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-height:100dvh;color:#ac9cff}.login-shell{min-height:100dvh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:100px;max-width:1160px;margin:auto;padding:70px 50px 100px;position:relative}.login-shell:before{content:"";position:fixed;z-index:-1;inset:0;background:radial-gradient(ellipse at 18% 50%,#30294d55,transparent 60%)}.login-story>.brand{margin-bottom:75px}.login-story h1{font-size:56px;line-height:1.3;letter-spacing:-2px;margin:18px 0 22px}.login-story h1 span{color:#b4a5ff}.login-story>p{font-size:15px}.sound-art{height:110px;display:flex;align-items:center;gap:6px;margin:22px 0 32px}.sound-art i,.banner-wave i{display:block;width:6px;height:28px;border-radius:8px;background:#9d88eb66}.sound-art i:nth-child(3n){height:55px;background:#a992f9}.sound-art i:nth-child(4n){height:84px;background:#8c7af6}.sound-art i:nth-child(5n){height:40px}.sound-art i:nth-child(7n){height:100px}.story-tags{display:flex;gap:23px;font-size:12px;color:#a7aec4}.story-tags span{display:flex;align-items:center;gap:7px}.story-tags svg{width:15px}.login-card{padding:40px;border:1px solid #34364b;background:#1a1f30e8;border-radius:20px;box-shadow:0 20px 70px #0002}.login-card h2{font-size:27px;margin:12px 0}.login-card>p{font-size:12px;margin-bottom:30px}.login-submit{margin-top:5px;justify-content:space-between}.invite-note{border-top:1px solid #303649;padding-top:24px;margin-top:26px;display:flex;gap:12px;font-size:12px;color:#b2a4f5;line-height:1.8}.invite-note small{font-size:11px}.login-footer{position:absolute;bottom:35px;text-align:center;left:0;right:0;font-size:10px;letter-spacing:2px;color:#626d89}.app-shell{display:flex;min-height:100dvh}.sidebar{position:sticky;top:0;width:238px;height:100dvh;flex-shrink:0;background:#151a28;border-right:1px solid #262c3e;display:flex;flex-direction:column;padding:30px 18px 0}.sidebar .brand{padding:0 12px 35px}.workspace-label{display:flex;align-items:center;justify-content:space-between;border:1px solid #2d3448;border-radius:8px;background:#1b2131;padding:12px;font-size:12px;color:#b0bad1;margin-bottom:27px}nav{display:flex;flex-direction:column;gap:7px}.nav-item{display:flex;align-items:center;gap:11px;text-align:left;border:0;background:transparent;color:#8f9bb5;padding:12px;border-radius:8px}.nav-item.selected{background:#2b2843;color:#b7a7ff}.nav-count{margin-left:auto;font-size:10px;background:#413954;padding:2px 6px;border-radius:4px}.section-label{display:flex;align-items:center;justify-content:space-between;color:#727e98;font-size:10px;letter-spacing:1px;padding:34px 12px 15px}.room-nav{display:flex;flex-direction:column;gap:5px;overflow-y:auto}.room-nav-item{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#97a3bd;padding:10px 12px;border-radius:7px;text-align:left;font-size:13px}.room-nav-item.active{background:#232a3d;color:#ddd5ff}.room-nav-item small{margin-left:auto;font-size:11px}.room-hash{font-size:19px;color:#66728d}.sidebar-note{margin:auto 4px 24px;padding:20px 13px;background:linear-gradient(130deg,#26273e,#1c2334);border:1px solid #30334a;border-radius:12px}.sidebar-note svg{color:#a693f3;margin-bottom:12px}.sidebar-note strong{display:block;font-size:11px;font-weight:500}.sidebar-note p{font-size:10px;margin-top:7px}.user-profile{display:flex;align-items:center;gap:9px;padding:19px 3px;border-top:1px solid #2a3043}.user-profile strong{display:block;font-size:12px}.user-profile small{font-size:10px}.main-area{flex:1;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:74px;border-bottom:1px solid #262c3e;font-size:12px}.breadcrumb{padding:0 14px;color:#49536c}.connection-label{display:flex;align-items:center;gap:8px;font-size:11px;color:#8794ab}.lobby,.admin-page{padding:42px 42px 32px;max-width:1500px;margin:auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:32px}.page-heading h1{margin-top:12px}.page-heading p{margin-top:10px;font-size:13px}.title-dot{color:#a590ff}.welcome-banner{display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden;background:linear-gradient(110deg,#302b4c,#222b45);border:1px solid #49405f;border-radius:14px;padding:30px 34px;margin-bottom:36px}.welcome-banner .eyebrow{font-size:10px;letter-spacing:1px}.welcome-banner h2{font-size:23px;margin:12px 0 9px}.welcome-banner p{font-size:12px}.banner-wave{display:flex;align-items:center;gap:7px;height:100px;margin-right:25px;transform:rotate(-10deg)}.banner-wave i{width:7px;height:25px}.banner-wave i:nth-child(3n){height:60px;background:#a18ced}.banner-wave i:nth-child(4n){height:90px;background:#aa92fb}.banner-wave i:nth-child(5n){height:42px}.list-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.list-heading h3{font-size:15px}.list-heading h3 span{color:#929bb1;font-size:12px;margin-left:10px}.list-heading>span{color:#76829c;font-size:11px}.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}.room-card{border:1px solid #30364b;border-radius:14px;background:#1a2030;padding:25px 24px;transition:border-color .2s}.room-card:hover{border-color:#726390}.room-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.room-icon{display:inline-flex;align-items:center;justify-content:center;width:49px;height:49px;border-radius:13px}.color-0{--accent:#b6a1ff;--tint:#3b315c}.color-1{--accent:#7fd7c3;--tint:#23443e}.color-2{--accent:#e7ba81;--tint:#4a3a2d}.room-icon{color:var(--accent);background:var(--tint)}.room-card h2{font-size:18px;margin-bottom:10px}.room-card>p{font-size:12px;min-height:44px}.room-card-bottom{margin-top:27px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #2c3346;padding-top:19px}.room-card-bottom>span{display:flex;align-items:center;gap:7px;font-size:11px;color:#909cb6}.join-button{background:#29263f;color:#c4b6ff;border:1px solid #4b3f6b;border-radius:7px;padding:8px 12px;font-size:12px;display:flex;gap:18px}.lobby-tip{display:flex;align-items:center;gap:9px;margin-top:28px;color:#74809c;font-size:11px}.room-workspace{display:grid;grid-template-columns:minmax(350px,1fr) 340px;min-height:calc(100dvh - 74px)}.voice-area{display:flex;flex-direction:column;padding:35px 32px 24px;min-width:0}.room-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.room-heading h1{font-size:27px;margin:12px 0 8px}.room-heading p{font-size:12px}.participants{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:18px;margin:38px 0;align-content:start}.participant{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 12px;background:#1b2131;border:1px solid #30354b;border-radius:14px;min-height:173px}.participant.speaking{border-color:#736396;background:linear-gradient(135deg,#27243c,#1b2131)}.participant-avatar{position:relative;width:66px;height:66px;display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--accent);border:1px solid var(--accent);border-radius:23px;font-size:27px;margin-bottom:17px}.mic-badge{position:absolute;bottom:-4px;right:-7px;width:25px;height:25px;border-radius:50%;background:#695394;border:3px solid #1b2131;display:flex;justify-content:center;align-items:center;color:#fff}.muted-mic{background:#424c66;color:#a7b2c9}.muted-mic:after{content:"";position:absolute;width:14px;height:1px;background:#a7b2c9;transform:rotate(-45deg)}.participant strong{font-size:13px}.participant strong small{font-size:10px}.participant>span{font-size:10px;color:#8e9bb4;margin-top:8px}.peer-state{font-size:9px;margin-top:7px;color:#93ab9f}.audio-settings{margin-top:auto;background:#171d2c;border:1px solid #2d3549;padding:21px 23px;border-radius:12px}.settings-title{display:flex;align-items:center;gap:8px;color:#a89cde}.settings-title h3{font-size:13px;color:#c6cee0}.settings-title>span{margin-left:auto;font-size:9px;color:#6e7c96}.switch-row{flex-direction:row;align-items:center;justify-content:space-between;margin-top:23px}.switch-row strong{font-size:12px}.switch-row small{display:block;margin-top:7px;font-size:10px}.switch-row input{width:34px;height:18px;accent-color:#a28af8;cursor:pointer}.device-label{margin-top:22px;font-size:11px}.device-label select{font-size:11px;padding:9px 12px}.audio-features{display:flex;gap:20px;font-size:10px;color:#7487a2;margin-top:17px}.voice-controls{display:flex;align-items:center;gap:10px;margin-top:25px}.control-button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #343d53;background:#232a3d;border-radius:10px;padding:13px 16px;font-size:11px}.control-button.mic-on{background:#413459;color:#d4baff;border-color:#74579b}.control-button.active{color:#f4c0a4;border-color:#805d4f}.leave-button{background:#352431;border-color:#654151;color:#f1a8b7}.controls-spacer{flex:1}.audio-unlock{margin-bottom:22px;color:#d2bbff}.chat-area{display:flex;flex-direction:column;border-left:1px solid #2a3043;background:#151a28;height:calc(100dvh - 74px);position:sticky;top:0;min-height:480px}.chat-area>header{display:flex;align-items:center;gap:9px;padding:26px 22px;border-bottom:1px solid #2a3043;color:#a2adc5}.chat-area>header h3{font-size:13px;color:#d3daeb}.chat-area>header .pill{margin-left:auto;font-size:9px}.chat-messages{flex:1;overflow-y:auto;padding:23px 19px;scrollbar-width:thin}.chat-intro{padding:26px 6px;text-align:center;margin-bottom:25px;color:#9485ce}.chat-intro strong{display:block;font-size:12px;color:#c1cadf;margin:15px 0 8px}.chat-intro p{font-size:10px}.chat-message{display:flex;align-items:flex-start;gap:10px;margin-bottom:22px}.chat-message>div{min-width:0;flex:1}.message-meta{display:flex;align-items:center;gap:9px;margin:1px 0 7px}.message-meta strong{font-size:11px;font-weight:500}.message-meta time{font-size:9px;color:#67748f}.chat-message p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7;color:#c0cadf;background:#202738;padding:10px 12px;border-radius:0 10px 10px}.chat-message.own p{background:#302a46;color:#d4c9ef}.chat-composer{flex-direction:row;gap:7px;padding:13px;margin:0 15px;border:1px solid #343c52;border-radius:10px;background:#1d2435}.chat-composer input{padding:0;border:0;background:transparent;font-size:12px;min-width:0}.chat-composer button{flex-shrink:0}.chat-hint{font-size:9px;padding:12px 18px 20px;color:#6e7a92}.tabs{display:flex;gap:25px;border-bottom:1px solid #30354a;margin-bottom:27px}.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 0;color:#8b99b5;font-size:13px}.tabs button.active{color:#bfaaff;border-bottom-color:#a78aef}.tabs small{margin-left:8px}.admin-grid{display:grid;grid-template-columns:310px 1fr;gap:23px}.panel{background:#1a2030;border:1px solid #31384d;border-radius:13px;padding:25px}.panel h3{display:flex;align-items:center;gap:9px;margin-bottom:28px}.directory-row{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #2f354a}.directory-row:last-child{border-bottom:0}.directory-row strong{display:block;font-size:12px;margin-bottom:5px}.directory-row small{display:block;font-size:10px}.subtle{padding:7px;background:transparent;border:1px solid #3b4257;border-radius:6px;color:#aab8d4;font-size:10px;white-space:nowrap}.subtle.danger-text{color:#efa8b3}.reset-form{margin-top:25px;padding-top:25px;border-top:1px solid #42485e}.reset-form h4{font-size:13px}.reset-form p{font-size:11px}.button-row{display:flex;gap:10px}@media(min-width:1500px){.room-workspace{grid-template-columns:1fr 390px}.voice-area{padding:45px 50px}.participants{grid-template-columns:repeat(4,1fr)}}@media(max-width:1100px){.sidebar{width:208px;padding-left:12px;padding-right:12px}.lobby,.admin-page{padding:32px 25px}.room-workspace{grid-template-columns:minmax(300px,1fr) 290px}.voice-area{padding:28px 20px}.voice-controls{flex-wrap:wrap}.controls-spacer{display:none}.control-button{padding:12px 10px}.admin-grid{grid-template-columns:1fr}.login-shell{gap:45px;padding:50px 30px 90px}.login-card{padding:30px}.login-story h1{font-size:48px}.banner-wave{margin:0}.settings-title>span{display:none}}@media(max-width:760px){.app-shell{display:block}.sidebar{position:relative;width:100%;height:auto;padding:15px 18px;border-right:0;border-bottom:1px solid #30354a}.sidebar .brand{padding:0;font-size:20px}.sidebar .brand-icon{width:35px;height:35px;border-radius:10px}.sidebar .brand-en{font-size:7px}.workspace-label,.section-label,.room-nav,.sidebar-note{display:none}nav{flex-direction:row;margin-top:17px}.nav-item{padding:10px 12px;flex:1}.user-profile{position:absolute;top:14px;right:18px;padding:0;border:0}.user-profile .avatar{display:none}.user-profile strong{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar{height:55px;padding:0 20px;font-size:11px}.connection-label{font-size:9px}.lobby,.admin-page{padding:30px 20px}.page-heading h1{font-size:23px}.page-heading{align-items:flex-start}.page-heading>.pill{display:none}.welcome-banner{padding:24px}.welcome-banner h2{font-size:20px}.banner-wave{display:none}.room-grid{grid-template-columns:1fr}.room-workspace{display:flex;flex-direction:column;min-height:0}.voice-area{padding:26px 20px}.room-heading h1{font-size:24px}.participants{margin:26px 0;grid-template-columns:repeat(2,1fr)}.participant{min-height:170px}.voice-controls{justify-content:space-between}.control-button{flex:1;font-size:10px}.voice-controls svg{width:17px}.chat-area{position:relative;height:520px;min-height:0;border-top:1px solid #30354a;border-left:0}.chat-area>header{padding:20px}.audio-settings{padding:18px}.audio-features{gap:13px;font-size:9px}.login-shell{display:block;padding:35px 24px 80px;max-width:500px}.login-story>.brand{margin-bottom:35px}.login-story h1{font-size:37px;margin:15px 0}.login-story>p,.sound-art,.story-tags{display:none}.login-card{margin-top:32px;padding:27px}.login-card h2{font-size:24px}.login-footer{font-size:8px}.error-banner{margin:15px 18px 0;font-size:12px}.directory-row{gap:8px;flex-wrap:wrap}.directory-row .grow{min-width:100px}.panel{padding:22px}.lobby-tip{line-height:1.8}.settings-title h3{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
