:root { --rtc-ink:#12233f; --rtc-muted:#70809b; --rtc-primary:#3267e3; --rtc-bg:#f4f7fc; }
#rtc-bar { display:none; }
.rtc-classroom-layer { border:1px solid rgba(159,198,255,.55); border-radius:22px; overflow:visible; box-shadow:0 28px 80px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.18) inset; background:#eef4ff; }
.rtc-classroom-layer .layui-layer-title { height:48px; line-height:48px; padding:0 20px; color:#eaf3ff; font-size:16px; font-weight:700; border:0; background:linear-gradient(110deg,#142d59,#2459a3 58%,#3f86d8); }
.rtc-classroom-layer .layui-layer-setwin { top:15px; right:16px; }
.rtc-classroom-layer .layui-layer-content { height:calc(100% - 48px) !important; padding:0 !important; overflow:hidden; border-radius:0 0 22px 22px; background:linear-gradient(145deg,#f9fbff,#eaf2ff); }
.rtc-classroom-panel { position:relative; width:100%; max-width:none; height:100%; min-width:0; min-height:0; margin:0; padding:20px; box-sizing:border-box; border-radius:0; background:linear-gradient(145deg,#f9fbff,#eaf2ff); box-shadow:none; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
.rtc-panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; min-height:28px; }
.rtc-panel-title { color:var(--rtc-ink); font-size:19px; font-weight:800; letter-spacing:.02em; }
.rtc-status { padding:5px 10px; border-radius:99px; font-size:12px; font-weight:600; }
.rtc-status-idle { color:#70809b; background:#edf1f7; } .rtc-status-live { color:#087443; background:#dff8eb; } .rtc-status-warn { color:#986000; background:#fff0cd; } .rtc-status-error { color:#a22c3a; background:#ffe4e7; }
.rtc-teacher-stage { position:relative; min-width:0; min-height:0; height:100%; border-radius:18px; overflow:hidden; background:radial-gradient(circle at 50% 20%,#243f6c,#0b1425 72%); display:flex; align-items:center; justify-content:center; color:#bdc9df; text-align:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 14px 32px rgba(24,55,105,.2); }
.rtc-teacher-stage > div { width:100% !important; height:100% !important; min-width:0; min-height:0; display:flex !important; align-items:center; justify-content:center; overflow:hidden; }
.rtc-teacher-stage video, .rtc-teacher-stage canvas { width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; min-width:0; min-height:0; object-fit:contain !important; object-position:center center !important; display:block; background:#050a14; }
.rtc-audio-host { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.rtc-invite { position:absolute; left:20px; right:20px; bottom:82px; z-index:5; margin:0; padding:12px 14px; border-radius:12px; color:#775100; background:rgba(255,245,217,.96); box-shadow:0 10px 24px rgba(20,34,63,.22); font-size:13px; }
.rtc-actions { position:absolute; left:20px; right:20px; bottom:16px; z-index:6; display:flex; min-height:44px; max-height:96px; align-items:center; gap:9px; flex-wrap:wrap; overflow:auto; margin:0; padding:9px 11px; border:1px solid rgba(255,255,255,.48); border-radius:16px; background:rgba(11,25,49,.84); box-shadow:0 12px 28px rgba(9,20,42,.32); backdrop-filter:blur(12px); opacity:0; visibility:hidden; transform:translateY(12px); pointer-events:none; transition:opacity .2s,transform .2s,visibility .2s; }
.rtc-classroom-panel.rtc-controls-visible .rtc-actions { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.rtc-classroom-panel:not(.rtc-controls-visible) .rtc-invite { opacity:0; pointer-events:none; }
.rtc-action { flex:0 0 auto; border:0; border-radius:12px; padding:10px 15px; color:var(--rtc-ink); background:#e9effa; cursor:pointer; font-size:13px; font-weight:700; box-shadow:0 5px 12px rgba(36,76,142,.1); transition:transform .16s,box-shadow .16s; }
.rtc-action:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 8px 18px rgba(36,76,142,.18); }
.rtc-action:disabled { opacity:.45; cursor:not-allowed; } .rtc-action-primary { color:#fff; background:linear-gradient(135deg,#3267e3,#5b8df2); }
.rtc-resize-handle { position:absolute; z-index:30; pointer-events:auto; touch-action:none; }
.rtc-resize-n,.rtc-resize-s { left:14px; right:14px; height:10px; cursor:ns-resize; }
.rtc-resize-n { top:-5px; } .rtc-resize-s { bottom:-5px; }
.rtc-resize-e,.rtc-resize-w { top:14px; bottom:14px; width:10px; cursor:ew-resize; }
.rtc-resize-e { right:-5px; } .rtc-resize-w { left:-5px; }
.rtc-resize-nw,.rtc-resize-ne,.rtc-resize-sw,.rtc-resize-se { width:16px; height:16px; }
.rtc-resize-nw { left:-5px; top:-5px; cursor:nwse-resize; } .rtc-resize-ne { right:-5px; top:-5px; cursor:nesw-resize; }
.rtc-resize-sw { left:-5px; bottom:-5px; cursor:nesw-resize; } .rtc-resize-se { right:-5px; bottom:-5px; cursor:nwse-resize; }