:root{--glass-bg:#ffffff14;--glass-stroke:#ffffff2e;--glass-blur:12px;--bg:#0b0b0c;--txt:#e7e7ea;--accent:#65d486;--danger:#ff6b6b}html,body{background:var(--bg);height:100%;color:var(--txt);margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden}#app{height:100%}.layout{box-sizing:border-box;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(180px,240px) minmax(0,1fr) minmax(260px,320px);gap:12px;min-width:0;height:100%;padding:12px;display:grid}.glass{background:var(--glass-bg);border:1px solid var(--glass-stroke);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);backdrop-filter:blur(var(--glass-blur)) saturate(180%);border-radius:14px;min-height:0}.sidebar{z-index:10;flex-direction:column;min-width:0;display:flex;position:relative;overflow:visible auto}.sidebar-header{border-bottom:1px solid var(--glass-stroke);flex:none;justify-content:space-between;align-items:center;gap:8px;padding:8px;display:flex}.sidebar-exit{color:#ffd3d3}.sidebar-exit:hover{color:#fff;background:#ff6b6b29;border-color:#ff6b6b73}.users{flex-direction:column;flex:auto;gap:8px;margin:0;padding:8px;list-style:none;display:flex;overflow:visible}.user{background:#ffffff0a;border:1px solid #0000;border-radius:10px;grid-template-columns:8px minmax(0,1fr) repeat(4,30px);align-items:center;gap:8px;min-width:0;padding:6px 8px;display:grid;position:relative}.user .dot{background:#5cff7a;border-radius:50%;flex:none;width:8px;height:8px;box-shadow:0 0 10px #5cff7a99}.user--self{background:#65d4861f;border-color:#65d4866b;padding:8px;box-shadow:inset 3px 0 #65d486d9}.user--peer{color:#e7e7eae6}.user-name{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;font-weight:600;overflow:hidden}.user--peer .user-name{font-weight:500}.user-section-title{color:#e7e7ea94;letter-spacing:0;text-transform:uppercase;margin:8px 2px 2px;font-size:11px;font-weight:700;line-height:1}.user-section-title:first-child{margin-top:0}.user-section-title--others{border-top:1px solid #ffffff1a;padding-top:8px}.user-action{color:#e7e7eae0;background:#ffffff0d;border-radius:9px;flex:none;justify-content:center;align-items:center;width:30px;height:30px;padding:0;display:inline-flex}.user-action:hover{color:#fff;background:#ffffff1a}.user-action.is-active{color:#fff;background:#65d48629;border-color:#65d4866b}.user-action-placeholder{visibility:hidden;pointer-events:none}.user-settings{width:30px;height:30px}.chat{flex-direction:column;min-width:0;display:flex;overflow:hidden}.chat .topbar{flex:none}.chatlog{flex-direction:column;flex:auto;gap:8px;min-width:0;padding:10px;display:flex;overflow:auto}.msg{background:#ffffff0a;border-radius:12px;padding:8px 10px}.inputbar{border-top:1px solid var(--glass-stroke);align-items:center;gap:8px;min-width:0;padding:10px;display:flex;position:relative}.inputbar input{border:1px solid var(--glass-stroke);color:var(--txt);background:#ffffff0f;border-radius:12px;outline:none;flex:1;min-width:0;padding:10px 12px}.icon-btn{box-sizing:border-box;color:#e7e7eae6;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:flex;overflow:hidden}.icon-btn:hover{color:#fff}.ui-icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;display:block}.soundpad{position:relative}.sound-menu{-webkit-backdrop-filter:blur(12px)saturate(180%);backdrop-filter:blur(12px)saturate(180%);border:1px solid var(--glass-stroke);z-index:1000;background:#ffffff14;border-radius:12px;grid-template-columns:repeat(2,1fr);gap:8px;width:max-content;min-width:200px;min-height:44px;padding:8px;display:none;position:absolute;bottom:calc(100% + 10px);left:0;box-shadow:0 4px 18px #00000040}.sound-menu button{text-align:left;box-sizing:border-box;width:100%;padding:6px 12px}.settings{position:relative}.settings-modal{z-index:2000;box-sizing:border-box;background:#00000094;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.settings-dialog{flex-direction:column;width:min(460px,100%);max-height:calc(100vh - 32px);display:flex;overflow:hidden;box-shadow:0 18px 60px #0006}.settings-dialog-header{border-bottom:1px solid var(--glass-stroke);justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.settings-dialog-header h2{margin:0;font-size:18px;line-height:1.2}.settings-form{padding:14px 16px 4px;overflow:auto}.settings-form label{margin-bottom:10px;font-size:14px;display:block}.settings-form select{box-sizing:border-box;width:100%;margin-top:4px;margin-bottom:6px}.settings-form input[type=range]{-webkit-appearance:none;background:0 0;width:100%;margin-top:6px;margin-bottom:8px}.settings-form input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border:1px solid #00000026;border-radius:50%;width:14px;height:14px;margin-top:-5px}.settings-form input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#fffc,#fff3);border-radius:2px;height:4px}.settings-check{align-items:center;gap:8px;display:flex}.settings-error{color:#ffd3d3;min-height:18px;font-size:13px}.settings-actions{justify-content:flex-end;gap:8px;padding:12px 16px 16px;display:flex}.settings-actions button[type=submit]{color:#08100b;background:var(--accent);border-color:#65d486b3}.settings-actions button:disabled{opacity:.55;cursor:default}.settings-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.settings-value{text-align:right;font-variant-numeric:tabular-nums;flex:0 0 48px}main.glass{flex-direction:column;min-width:0;min-height:0;display:flex}.topbar{border-bottom:1px solid var(--glass-stroke);justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:8px 12px;display:flex}.controls{flex-wrap:wrap;gap:8px;min-width:0;display:flex}button{all:unset;cursor:pointer;border:1px solid var(--glass-stroke);background:#ffffff0a;border-radius:12px;padding:8px 12px}button:hover{background:#ffffff14}.small{opacity:.7;font-size:12px}main.glass>.video-grid{flex:auto;min-width:0}.video-grid{box-sizing:border-box;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));align-content:start;gap:12px;min-width:0;min-height:0;padding:12px;display:grid;overflow:auto}.video-grid.focused{grid-template-rows:minmax(0,1fr) clamp(108px,18vh,164px);grid-template-columns:minmax(0,1fr);place-content:stretch;place-items:stretch stretch;display:grid;overflow:hidden}.video-grid.focused .thumbs{box-sizing:border-box;grid-area:2/1;align-items:stretch;gap:12px;min-width:0;height:100%;min-height:0;padding-top:10px;display:flex;overflow:auto hidden}.video-grid.focused .thumbs .tile{aspect-ratio:16/9;flex:0 0 clamp(150px,20vw,240px);width:auto;height:100%}.video-grid.focused .tile.focused{aspect-ratio:auto;grid-area:1/1;place-self:stretch stretch;width:100%;height:100%;min-height:0;max-height:100%}.tile{border:1px solid var(--glass-stroke);contain:layout paint size;aspect-ratio:16/9;box-sizing:border-box;background:#000;border-radius:14px;width:100%;min-width:0;min-height:0;position:relative;overflow:hidden}.tile video{object-fit:contain;background:#111;width:100%;height:100%}.focus-btn{cursor:pointer;z-index:2;background:#0006;border:1px solid #ffffff26;border-radius:8px;padding:4px;position:absolute;top:8px;right:8px}.focus-btn:hover{background:#fff3}.label{z-index:2;background:#0006;border:1px solid #ffffff26;border-radius:10px;align-items:center;gap:8px;padding:4px 8px;display:inline-flex;position:absolute;bottom:8px;left:8px}.label .name{font-weight:600}.user .mic-icon{opacity:.95;color:#e7e7eac7;flex:none;justify-content:center;align-items:center;width:30px;height:30px;display:inline-flex}.user .mic-icon .ui-icon{width:16px;height:16px}.modal{background:#00000080;place-items:center;display:grid;position:fixed;inset:0}.card{width:min(420px,92vw);padding:16px}.badge{border:1px solid var(--glass-stroke);background:#ffffff0a;border-radius:999px;padding:4px 8px;font-size:12px}.dropdown{box-sizing:border-box;-webkit-backdrop-filter:blur(12px)saturate(180%);backdrop-filter:blur(12px)saturate(180%);z-index:1000;background:#ffffff14;border:1px solid #ffffff2e;border-radius:12px;width:calc(100% - 16px);padding:10px 14px;animation:.15s ease-out fadeInScale;display:none;position:absolute;top:36px;left:8px;box-shadow:0 4px 18px #00000040}.dropdown input[type=range]{-webkit-appearance:none;background:0 0;width:100%}.dropdown input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border:1px solid #00000026;border-radius:50%;width:14px;height:14px;margin-top:-5px}.dropdown input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#fffc,#fff3);border-radius:2px;height:4px}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.dropdown:before{content:"";background:inherit;border-top:1px solid #ffffff2e;border-left:1px solid #ffffff2e;width:10px;height:10px;position:absolute;top:-6px;right:14px;transform:rotate(45deg)}@media (width<=768px){.layout{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:1fr;padding:8px}.sidebar{flex-direction:row;grid-area:1/1;align-items:center;overflow:auto hidden}.sidebar-header{border-bottom:0;border-right:1px solid var(--glass-stroke);align-self:stretch}.sidebar .users{flex-direction:row;gap:8px}.sidebar .user{flex:0 0 min(220px,70vw)}.sidebar .user-section-title{flex:none;align-self:center;margin:0 2px}.sidebar .user-section-title--others{border-top:0;border-left:1px solid #ffffff1f;padding-top:0;padding-left:10px}main.glass{grid-area:2/1}.chat{grid-area:3/1;max-height:40vh}}