*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--bg:#0f0f13;--surface:#1a1a24;--surface2:#24242f;--border:#2e2e3a;--accent:#6c63ff;--accent-hover:#5a52e0;--danger:#e55353;--text:#e8e8f0;--text-muted:#88a;--radius:10px;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,sans-serif}body{min-height:100dvh;padding-bottom:env(safe-area-inset-bottom,0px)}button{touch-action:manipulation}.btn{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;touch-action:manipulation;padding:10px 18px;font-size:14px;transition:background .15s}.btn:hover{background:var(--border)}.btn-primary{background:var(--accent);border-color:var(--accent)}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-sm{padding:7px 14px;font-size:13px}.btn:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{-webkit-appearance:none;font-size:16px}.navbar{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;padding:12px 24px;padding-left:max(24px, env(safe-area-inset-left));padding-right:max(24px, env(safe-area-inset-right));justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.navbar-brand{color:var(--accent);white-space:nowrap;font-size:18px;font-weight:700;text-decoration:none}.navbar-right{align-items:center;gap:12px;min-width:0;display:flex}.navbar-user{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;max-width:200px;font-size:14px;overflow:hidden}.auth-page{justify-content:center;align-items:center;min-height:100dvh;padding:24px;display:flex}.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:420px;padding:40px}.auth-card h1{margin-bottom:24px;font-size:24px}.auth-form{flex-direction:column;gap:14px;display:flex}.auth-form input{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface2);color:var(--text);outline:none;width:100%;padding:12px 14px}.auth-form input:focus{border-color:var(--accent)}.auth-card p{color:var(--text-muted);text-align:center;margin-top:16px;font-size:14px}.auth-card a{color:var(--accent);text-decoration:none}.auth-form .btn-primary{width:100%;padding:12px;font-size:15px}.error-banner{border:1px solid var(--danger);color:var(--danger);border-radius:var(--radius);background:#e5535326;padding:10px 14px;font-size:14px}.rooms-page{max-width:1100px;margin:0 auto;padding:32px 24px}.rooms-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;display:flex}.rooms-header h1{font-size:28px}.rooms-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.loading,.empty-state{text-align:center;color:var(--text-muted);margin-top:48px}.room-card{background:var(--surface);border:1px solid var(--border);cursor:pointer;touch-action:manipulation;border-radius:12px;padding:20px;transition:border-color .15s,transform .15s}.room-card:hover{border-color:var(--accent);transform:translateY(-2px)}.room-card:active{border-color:var(--accent);transform:scale(.98)}.room-card-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.room-card-header h3{text-overflow:ellipsis;white-space:nowrap;font-size:17px;overflow:hidden}.room-description{color:var(--text-muted);margin-bottom:12px;font-size:13px}.room-card-footer{color:var(--text-muted);justify-content:space-between;margin-top:12px;font-size:12px;display:flex}.room-card-actions{border-top:1px solid var(--border);justify-content:flex-end;gap:6px;margin-top:10px;padding-top:10px;display:flex}.room-action-btn{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;padding:4px 8px;font-size:14px;line-height:1;transition:background .15s}.room-action-btn:hover{background:var(--surface2)}.room-action-btn--danger:hover{border-color:var(--danger);background:#e5535326}.room-action-btn:disabled{opacity:.5;cursor:not-allowed}.status-badge{text-transform:uppercase;border-radius:99px;flex-shrink:0;padding:2px 8px;font-size:11px;font-weight:600}.status-waiting{color:#63b3ed;background:#63b3ed26}.status-active{color:#48bb78;background:#48bb7826}.status-closed{color:var(--text-muted);background:#a0a0a01a}.modal-overlay{z-index:200;background:#0009;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:100%;max-width:440px;padding:32px}.modal h2{margin-bottom:20px}.modal label{color:var(--text-muted);flex-direction:column;gap:6px;font-size:13px;display:flex}.modal-actions{justify-content:flex-end;gap:10px;margin-top:16px;display:flex}.modal-actions .btn{text-align:center;flex:1}.room-page{background:var(--bg);flex-direction:column;height:100svh;display:flex;overflow:hidden}.room-page-header{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 24px;display:flex}.room-page-header h2{font-size:17px;font-weight:600}.participant-count{color:var(--text-muted);font-size:13px}.room-loading{height:100dvh;color:var(--text-muted);text-align:center;justify-content:center;align-items:center;padding:24px;display:flex}.room-error{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:20px;height:100dvh;padding:24px;display:flex}.media-error-banner{color:#edb348;background:#edb3481f;border-bottom:1px solid #edb348;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font-size:13px;display:flex}.media-error-banner button{color:#edb348;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 4px;font-size:16px;line-height:1}.room-body{flex:1;min-height:0;display:flex;overflow:hidden}.video-grid{flex:1;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-auto-rows:1fr;gap:8px;min-height:0;padding:12px;display:grid;overflow-y:auto}.video-grid--spotlight{grid-template-rows:1fr auto;gap:8px;padding:12px;display:grid;overflow:hidden}.spotlight-main{align-items:stretch;gap:8px;min-height:0;display:flex}.spotlight-main .video-tile{flex:1;min-width:0;height:100%}.spotlight-main .video-tile video{height:100%}.spotlight-strip{gap:8px;height:110px;padding-bottom:2px;display:flex;overflow-x:auto}.spotlight-strip .video-tile{flex-shrink:0;width:170px;height:100%}.video-tile{background:var(--surface2);border:2px solid var(--border);border-radius:10px;min-height:0;transition:border-color .2s;position:relative;overflow:hidden}.video-tile--local{border-color:var(--accent)}.video-tile--local video{transform:scaleX(-1)}.video-tile--speaking{border-color:#48bb78;box-shadow:0 0 0 2px #48bb7859}.video-tile--screen{border-color:#edb348}.video-tile video{object-fit:contain;background:#0a0a0e;width:100%;height:100%;display:block}.video-tile-no-cam{background:var(--surface2);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.no-cam-avatar{background:var(--accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:24px;font-weight:700;display:flex}.video-tile-label{color:#fff;pointer-events:none;background:#0009;border-radius:99px;align-items:center;gap:4px;padding:2px 8px;font-size:12px;display:flex;position:absolute;bottom:8px;left:10px}.screen-badge{font-size:11px}.quality-badge{letter-spacing:1px;pointer-events:none;background:#0000008c;border-radius:4px;padding:2px 5px;font-family:monospace;font-size:9px;position:absolute;top:8px;right:8px}.quality--excellent{color:#48bb78}.quality--good{color:#edb348}.quality--poor{color:#e55353}.quality--lost{color:#e55353;font-weight:700}.control-bar{padding:14px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;justify-content:center;align-items:center;gap:12px;display:flex}.control-btn{background:var(--surface2);cursor:pointer;touch-action:manipulation;border:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:3px;width:54px;height:54px;transition:background .15s;display:flex}.control-btn:hover{background:var(--border)}.control-btn--off{background:var(--danger)}.ctrl-icon{font-size:20px;line-height:1;display:block}.ctrl-label{color:var(--text-muted);font-size:10px;font-weight:500;line-height:1;display:none}.control-btn--off .ctrl-label{color:#ffffffb3}.control-btn--leave{background:var(--danger);color:#fff;border-radius:22px;flex-direction:row;gap:6px;width:auto;height:44px;padding:0 20px}.control-btn--leave .ctrl-icon{font-size:16px}.control-btn--leave .ctrl-label{color:#fff;font-size:14px;font-weight:600;display:block}.control-btn--leave:hover{background:#c0392b}.control-btn--active{border:1px solid var(--accent);background:#6c63ff40}.control-btn--active:hover{background:#6c63ff66}.ctrl-chat{position:relative}.ctrl-badge{background:var(--danger);color:#fff;pointer-events:none;border-radius:99px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 3px;font-size:9px;font-weight:700;line-height:1;display:flex;position:absolute;top:4px;right:4px}.side-panel{background:var(--surface);border-left:1px solid var(--border);flex-direction:column;flex-shrink:0;width:300px;display:flex;overflow:hidden}.side-panel-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 16px;font-size:14px;font-weight:600;display:flex}.panel-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 6px;font-size:18px;line-height:1;display:none}.panel-close-btn:hover{color:var(--text);background:var(--surface-2)}.chat-messages{flex-direction:column;flex:1;gap:8px;padding:12px;display:flex;overflow-y:auto}.chat-empty{color:var(--text-muted);text-align:center;margin-top:24px;font-size:13px}.chat-msg{flex-direction:column;gap:2px;max-width:85%;display:flex}.chat-msg--self{align-self:flex-end;align-items:flex-end}.chat-msg-sender{color:var(--text-muted);padding:0 4px;font-size:11px}.chat-msg-bubble{background:var(--surface2);word-break:break-word;border-radius:12px;padding:7px 12px;font-size:13px;line-height:1.45}.chat-msg--self .chat-msg-bubble{background:var(--accent);color:#fff}.chat-msg-time{color:var(--text-muted);padding:0 4px;font-size:10px}.chat-input{border-top:1px solid var(--border);flex-shrink:0;gap:8px;padding:10px 12px;display:flex}.chat-input input{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface2);color:var(--text);outline:none;flex:1;padding:8px 12px;font-size:13px}.chat-input input:focus{border-color:var(--accent)}.participant-list{flex-direction:column;flex:1;gap:4px;padding:8px;display:flex;overflow-y:auto}.participant-item{border-radius:8px;align-items:center;gap:10px;padding:8px 10px;transition:background .15s;display:flex}.participant-item:hover{background:var(--surface2)}.participant-item--speaking{background:#48bb7814}.participant-avatar{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:15px;font-weight:700;display:flex}.participant-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.participant-name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;overflow:hidden}.you-tag{color:var(--text-muted);font-weight:400}.participant-status{align-items:center;gap:4px;font-size:11px;display:flex}.speaking-dot{color:#48bb78;font-size:8px}.participant-icons{flex-shrink:0;align-items:center;gap:6px;font-size:14px;display:flex}.icon-muted{opacity:.4}.q-dots{letter-spacing:1px;font-family:monospace;font-size:10px}.q-excellent{color:#48bb78}.q-good{color:#edb348}.q-poor{color:#e55353}.q-lost{color:#e55353;font-weight:700}.field-group{flex-direction:column;gap:4px;display:flex}.field-error{color:var(--danger);padding-left:2px;font-size:12px;line-height:1.3}.input-error{border-color:var(--danger)!important}.input-error:focus{box-shadow:0 0 0 2px #e5535333;border-color:var(--danger)!important}.toast-container{z-index:9999;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:fixed;top:16px;right:16px}.toast{border-radius:var(--radius);pointer-events:all;cursor:default;opacity:0;border:1px solid #0000;align-items:flex-start;gap:10px;min-width:280px;max-width:400px;padding:12px 14px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;display:flex;transform:translate(calc(100% + 24px));box-shadow:0 4px 24px #00000073}.toast--visible{opacity:1;transform:translate(0)}.toast--success{color:#48bb78;background:#48bb7821;border-color:#48bb78}.toast--error{border-color:var(--danger);color:var(--danger);background:#e5535321}.toast--warning{color:#edb348;background:#edb34821;border-color:#edb348}.toast--info{border-color:var(--accent);color:var(--accent);background:#6c63ff21}.toast-icon{flex-shrink:0;margin-top:1px;font-size:15px;font-weight:700}.toast-message{color:var(--text);flex:1;font-size:13px;line-height:1.45}.toast-close{cursor:pointer;color:var(--text-muted);background:0 0;border:none;flex-shrink:0;padding:0;font-size:18px;line-height:1;transition:color .1s}.toast-close:hover{color:var(--text)}@media (width<=640px){.navbar{gap:8px;padding:10px 16px}.navbar-brand{font-size:16px}.navbar-user{max-width:120px;font-size:13px}.auth-page{align-items:flex-start;padding:32px 16px 16px}.auth-card{border-radius:12px;padding:24px 20px}.auth-card h1{margin-bottom:18px;font-size:20px}.rooms-page{padding:20px 16px}.rooms-header h1{font-size:22px}.rooms-grid{grid-template-columns:1fr;gap:12px}.modal-overlay{align-items:flex-end;padding:0}.modal{padding:24px 20px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));border-bottom:none;border-left:none;border-right:none;border-radius:20px 20px 0 0;max-width:100%}.modal-actions .btn{min-height:44px}.room-page-header{padding:8px 16px}.room-page-header h2{font-size:15px}.side-panel{z-index:50;border-left:none;width:100%;position:absolute;inset:0}.panel-close-btn{display:block}.video-grid{grid-template-columns:1fr;gap:6px;padding:8px}.control-bar{padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:8px}.control-btn{border-radius:14px;width:60px;height:60px}.ctrl-label{display:block}.ctrl-icon{font-size:22px}.control-btn--leave{border-radius:14px;gap:6px;height:52px;padding:0 16px}.toast-container{top:12px;left:12px;right:12px}.toast{min-width:unset;width:100%;max-width:100%;transform:translateY(-16px)scale(.95)}.toast--visible{transform:translateY(0)scale(1)}}@media (width<=480px){.navbar-user{display:none}.rooms-header h1{font-size:20px}.control-bar{gap:6px}.control-btn{width:56px;height:56px}}@media (height<=500px) and (orientation:landscape){.room-page-header{padding:5px 16px}.room-page-header h2{font-size:13px}.participant-count{font-size:12px}.video-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:4px;padding:4px}.video-tile video{max-height:200px}.control-bar{padding:6px 16px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));gap:8px}.control-btn{border-radius:50%;width:40px;height:40px;font-size:14px}.ctrl-label{display:none!important}.ctrl-icon{font-size:18px}.control-btn--leave{border-radius:18px;gap:4px;height:36px;padding:0 14px}.control-btn--leave .ctrl-label{font-size:13px;display:block!important}}