:root{font-synthesis:none;font-family:Inter,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden}body{min-width:320px;margin:0}.page-shell{flex-direction:column;width:min(1500px,100%);max-width:100%;height:100dvh;margin:auto;padding:18px 28px 24px;display:flex;overflow:hidden}.room-header{flex:0 0 66px;align-items:center;gap:12px;height:66px;display:flex}.logo{color:#fff;background:linear-gradient(135deg,#7c3aed,#4f46e5);border-radius:12px;place-items:center;width:40px;height:40px;font-size:20px;font-weight:800;display:grid;box-shadow:0 8px 28px #4f46e566}.logo img{border-radius:inherit;object-fit:contain;background:#fff;width:100%;height:100%}.logo span{place-items:center;width:100%;height:100%;display:grid}.room-header h1{margin:0;font-size:18px}.room-header>div:nth-child(2){min-width:0}.room-header h1{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.room-header p{margin:4px 0;font-size:12px}.live-dot{background:#22c55e;border-radius:50%;width:7px;height:7px;margin-right:5px;display:inline-block;box-shadow:0 0 9px #22c55e}.room-grid{flex:1;grid-template-columns:minmax(0,1fr) 360px;gap:18px;min-height:0;display:grid;overflow:hidden}.room-grid.video-only{grid-template-columns:minmax(0,1fr)}.room-main{grid-template-rows:auto minmax(0,1fr);gap:12px;min-width:0;height:100%;min-height:0;display:grid;overflow:hidden}.room-main.without-banners{grid-template-rows:auto}.room-grid>*,.player-panel,.chat-panel{min-width:0;max-width:100%}.player-panel,.chat-panel{border-radius:16px;overflow:hidden}.player-panel{flex-direction:column;justify-content:center;max-height:100%;display:flex}.player-panel video{aspect-ratio:16/9;background:#000;width:100%;max-height:calc(100dvh - 108px);display:block}.chat-panel{height:100%;min-height:0;max-height:none}.banner-carousel{background:var(--panel-bg);border:1px solid var(--panel-border);min-height:72px;box-shadow:0 16px 44px var(--shadow);touch-action:pan-y;cursor:grab;border-radius:14px;position:relative;overflow:hidden}.banner-carousel:active{cursor:grabbing}.banner-slide{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .35s,visibility .35s;position:absolute;inset:0}.banner-slide.active{visibility:visible;opacity:1;pointer-events:auto}.banner-slide>a{width:100%;height:100%;display:block}.banner-carousel img{object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}.banner-placeholder{z-index:1;color:var(--text-muted);background:var(--panel-bg);place-items:center;font-size:12px;display:grid;position:absolute;inset:0}.banner-placeholder:before{content:"";border:2px solid var(--panel-border);border-top-color:#6366f1;border-radius:50%;width:22px;height:22px;margin-bottom:26px;animation:.8s linear infinite spin;position:absolute}.banner-placeholder.banner-error:before{display:none}.banner-arrow{z-index:3;color:#fff;cursor:pointer;opacity:0;background:#0006;border:0;border-radius:50%;width:34px;height:34px;padding:0;font-size:25px;line-height:30px;transition:opacity .2s,background .2s;position:absolute;top:50%;transform:translateY(-50%)}.banner-arrow:hover{background:#0009}.banner-arrow.previous{left:12px}.banner-arrow.next{right:12px}.banner-carousel:hover .banner-arrow{opacity:1}.banner-dots{z-index:3;background:#0005;border-radius:20px;gap:7px;padding:5px 8px;display:flex;position:absolute;bottom:9px;left:50%;transform:translate(-50%)}.banner-dots button{cursor:pointer;background:#ffffff80;border:0;border-radius:50%;width:7px;height:7px;padding:0;transition:all .2s}.banner-dots button.active{background:#fff;border-radius:8px;width:20px}.messages{scrollbar-width:thin;scrollbar-color:#334155 transparent;flex:1;padding:10px 16px;overflow:auto}.welcome{color:#64748b;text-align:center;padding:12px;font-size:12px}.message{grid-template-columns:36px 1fr;gap:10px;padding:10px 0;animation:.25s rise;display:grid}.message>div:last-child{min-width:0}.avatar{color:#fff;border-radius:50%;place-items:center;width:36px;height:36px;font-weight:700;display:grid}.meta{align-items:center;gap:8px;height:22px;display:flex}.meta strong{font-size:13px}.meta time{color:#64748b;font-size:10px}.message p{overflow-wrap:anywhere;border-radius:4px 12px 12px;max-width:100%;margin:2px 0 0;padding:8px 10px;font-size:13px;line-height:1.45;display:inline-block}.chat-wait{color:#59647b;text-align:center;padding:40px 0;font-size:12px}.chat-input{border-top:1px solid;grid-template-columns:1fr auto;gap:8px;display:grid}.chat-input input,.chat-input button{font:inherit;padding:10px}.state-card{color:#98a4bd;text-align:center;place-content:center;min-height:80vh;display:grid}.state-icon{color:#fb7185;background:#3b1820;border-radius:50%;place-items:center;width:50px;height:50px;margin:auto;font-size:24px;display:grid}.loader{border:3px solid #283247;border-top-color:#8b5cf6;border-radius:50%;width:38px;height:38px;margin:auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rise{0%{opacity:0;transform:translateY(5px)}}@media (width<=950px){.room-grid{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr}.room-main{height:auto;display:block;overflow:visible}.banner-carousel{height:90px;margin-top:10px}.banner-arrow{opacity:1}.player-panel video{max-height:min(42dvh,420px)}.chat-panel{height:auto;min-height:0}}@media (width<=600px){.page-shell{padding:8px 12px 12px}.room-header{flex-basis:58px;height:58px}.room-header>div:nth-child(2){flex:1}.room-grid{gap:10px}}.viewer-name{color:#8d98b5;font-size:13px}.live-dot.off{box-shadow:none;background:#64748b}.not-live{text-align:center;background-position:50%;background-size:cover;place-content:center;min-height:min(520px,100dvh - 108px);padding:40px;display:grid}.not-live-icon{color:#64748b;background:#ffffff14;border:1px solid #ffffff20;border-radius:50%;place-items:center;width:72px;height:72px;margin:0 auto 18px;font-size:26px;display:grid}.not-live h2{margin:0 0 10px;font-size:26px}.not-live p{color:#8d98b5;margin:0}.video-error{color:#fecaca;background:#7f1d1d;padding:10px 16px;font-size:12px}.message.own{grid-template-columns:1fr 36px}.message.own>.avatar{grid-column:2}.message.own>div:last-child{text-align:right;grid-area:1/1}.message.own .meta{justify-content:flex-end}.chat-input input:not(:disabled){color:#e5e7eb}.chat-input button:not(:disabled){cursor:pointer;color:#fff;background:#4f46e5}@media (width<=720px){.viewer-name{display:none}.not-live{height:min(36dvh,320px);min-height:0}}:root{--page-bg:radial-gradient(circle at 20% 0, #182039 0, transparent 36%), #080b12;--panel-bg:#10151f;--panel-border:#222b3a;--text-main:#eef2ff;--text-muted:#8d98b5;--message-bg:#1b2331;--input-bg:#151b27;--input-border:#303a4d;--input-focus:#818cf8;--chat-footer:#0d121b;--shadow:#0005}:root[data-theme=light]{--page-bg:radial-gradient(circle at 20% 0, #e6e9ff 0, transparent 38%), #f4f6fb;--panel-bg:#fff;--panel-border:#dfe4ee;--text-main:#172033;--text-muted:#68758d;--message-bg:#eef1f7;--input-bg:#f7f8fb;--input-border:#d7deea;--input-focus:#4f46e5;--chat-footer:#fafbfe;--shadow:#27324a1a}body{background:var(--page-bg);color:var(--text-main);transition:background .2s,color .2s}.player-panel,.chat-panel{background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:0 24px 70px var(--shadow)}.player-panel{align-self:start}.room-header h1,.chat-title strong,.instructor-top h2,.state-card.error h1{color:var(--text-main)}.room-header p,.viewer-name,.instructor-info p,.not-live p,.chat-title small{color:var(--text-muted)}.viewer-name strong{color:var(--text-main)}.chat-title,.chat-input,.instructor-card{border-color:var(--panel-border)}.messages{background:var(--panel-bg)}.message p{background:var(--message-bg);color:var(--text-main);box-shadow:0 3px 12px var(--shadow)}.message.own p{color:#fff;background:linear-gradient(135deg,#5b5ce2,#4338ca)}.chat-input{background:var(--chat-footer);padding:14px}.chat-input input{background:var(--input-bg);min-width:0;color:var(--text-main);border:1px solid var(--input-border);border-radius:11px;outline:none;transition:border-color .2s,box-shadow .2s}.chat-input input:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--input-focus) 16%, transparent)}.chat-input input::placeholder{color:var(--text-muted)}.chat-input button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#4338ca);border:0;border-radius:11px;min-width:70px;font-weight:650;transition:transform .15s,opacity .15s;box-shadow:0 7px 18px #4f46e533}.chat-input button:hover:not(:disabled){transform:translateY(-1px)}.chat-input button:disabled{cursor:not-allowed;opacity:.42;box-shadow:none}.chat-send-error{background:var(--chat-footer);color:#ef4444;padding:7px 14px 0;font-size:11px}.online{white-space:nowrap;align-items:center;gap:5px;display:inline-flex}.online i{background:#4ade80;border-radius:50%;width:6px;height:6px;box-shadow:0 0 8px #4ade80}.sidebar-panel{flex-direction:column;display:flex}.sidebar-tabs{border-bottom:1px solid var(--panel-border);grid-template-columns:repeat(3,1fr);padding:0 10px;display:grid}.sidebar-tabs button{color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:17px 6px 14px;font-weight:650;position:relative}.sidebar-tabs button.active{color:var(--text-main);border-bottom-color:#6366f1}.sidebar-tabs small{color:#22c55e;margin-left:4px;font-size:10px}.chat-tab{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.new-message-tip{z-index:3;color:#fff;cursor:pointer;white-space:nowrap;background:#4f46e5;border:1px solid #6366f166;border-radius:20px;padding:7px 13px;font-size:12px;position:absolute;bottom:72px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0004}.new-message-tip:hover{background:#4338ca}.chat-identity{border-bottom:1px solid var(--panel-border);color:var(--text-muted);padding:10px 16px;font-size:12px}.chat-identity strong{color:var(--text-main)}.chat-tab .messages{flex:1}.instructor-tab{min-height:0;padding:16px;overflow:auto}.instructor-schedule-head{color:var(--text-main);justify-content:space-between;align-items:center;padding:3px 2px 14px;display:flex}.instructor-schedule-head small{color:var(--text-muted)}.instructor-schedules{gap:10px;display:grid}.instructor-schedule{border:1px solid var(--panel-border);background:var(--input-bg);border-radius:12px;grid-template-columns:48px minmax(0,1fr);gap:11px;padding:12px;display:grid}.instructor-schedule.current{background:#22c55e0c;border-color:#22c55e66}.instructor-schedule>img,.instructor-schedule-avatar{object-fit:cover;border-radius:50%;width:48px;height:48px}.instructor-schedule-avatar{color:#fff;background:#4f46e5;place-items:center;font-weight:700;display:grid}.instructor-schedule-info{gap:6px;min-width:0;display:grid}.instructor-schedule-info>div{justify-content:space-between;align-items:center;gap:8px;display:flex}.instructor-schedule-info strong{color:var(--text-main);font-size:13px}.instructor-schedule-info span{white-space:nowrap;border-radius:12px;padding:3px 7px;font-size:10px}.instructor-schedule-info span.live{color:#22c55e;background:#16a34a20}.instructor-schedule-info span.upcoming{color:#818cf8;background:#4f46e520}.instructor-schedule-info span.ended{color:var(--text-muted);background:#64748b1a}.instructor-schedule-info small{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.instructor-schedule-info p{color:var(--text-muted);grid-column:1/-1;margin:2px 0 0;font-size:12px;line-height:1.65}.tab-empty{color:var(--text-muted);padding:80px 10px}.tab-empty strong{color:var(--text-main)}.users-tab{min-height:0;padding:16px;overflow:auto}.users-summary{color:var(--text-muted);background:#22c55e0d;border-radius:12px;align-items:baseline;gap:5px;padding:15px;display:flex}.users-summary span{align-items:center;gap:6px;margin-right:auto;font-size:12px;display:flex}.users-summary i{background:#22c55e;border-radius:50%;width:7px;height:7px;box-shadow:0 0 8px #22c55e}.users-summary strong{color:#22c55e;font-size:24px}.users-list{display:grid}.users-list article{border-bottom:1px solid var(--panel-border);grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 2px;display:grid}.users-list article>div:nth-child(2){gap:3px;min-width:0;display:grid}.users-list strong{color:var(--text-main);font-size:13px}.users-list small{color:var(--text-muted)}.users-list article>span{color:#22c55e;font-size:10px}.users-page-tip{color:var(--text-muted);text-align:center;padding:16px 4px 6px;font-size:11px}:root[data-theme=light] .chat-input input:not(:disabled){color:var(--text-main)}:root[data-theme=light] .online{color:#15803d;background:#dcfce7}.header-tools{align-items:center;gap:14px;margin-left:auto;display:flex}.theme-toggle{border:1px solid var(--panel-border);background:var(--panel-bg);color:var(--text-main);cursor:pointer;box-shadow:0 4px 14px var(--shadow);border-radius:10px;align-items:center;gap:6px;padding:8px 12px;display:inline-flex}.theme-toggle:hover{border-color:#6366f1}:root[data-theme=light] .not-live{background-color:#f8fafc}:root[data-theme=light] .not-live-icon{background:#e9edf5;border-color:#dce2ed}@media (width<=600px){.header-tools{gap:6px}.theme-toggle{justify-content:center;width:36px;height:36px;padding:0;font-size:0}.theme-toggle span{font-size:15px}.sidebar-tabs{padding-inline:4px}.sidebar-tabs button{min-width:0;padding-inline:2px;font-size:12px}.chat-input{padding:12px}.chat-input button{min-width:62px}}