:root{font-family:Inter,Microsoft YaHei,system-ui,sans-serif;color:#20252b;background:#edf0f2;font-synthesis:none;letter-spacing:0}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit;letter-spacing:0}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;grid-template-columns:220px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;padding:22px 14px 16px;color:#d9dee3;background:#191d22;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:0 8px 24px;border-bottom:1px solid #343940}.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:#3a8f62;border-radius:6px;color:#fff}.brand div{display:grid;gap:2px}.brand strong{font-size:15px;color:#fff}.brand small{color:#8f989f;font-size:11px}.sidebar nav{display:grid;gap:6px;margin-top:22px}.sidebar nav button,.teacher-account{height:42px;border:0;border-radius:5px;color:#aeb6bd;background:transparent;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;padding:0 10px;text-align:left}.sidebar nav button:hover,.sidebar nav button.active{background:#2b3137;color:#fff}.sidebar nav button.active{box-shadow:inset 3px 0 #4dae76}.sidebar nav b{min-width:23px;padding:2px 6px;border-radius:10px;background:#3c4248;text-align:center;font-size:11px}.sidebar-status{margin-top:auto;padding:15px 10px;border-top:1px solid #343940;display:flex;align-items:center;justify-content:space-between;font-size:12px}.sidebar-status span{display:flex;align-items:center;gap:7px;color:#9aa3aa}.live-dot{width:7px;height:7px;border-radius:50%;background:#45bb78;box-shadow:0 0 0 3px #45bb7821}.teacher-account{width:100%;grid-template-columns:20px 1fr 18px;border-top:1px solid #343940;margin-top:4px;border-radius:0}main{min-width:0}.topbar{height:82px;padding:0 28px;background:#fff;border-bottom:1px solid #dce1e4;display:flex;align-items:center;justify-content:space-between}.topbar h1{margin:0;font-size:19px;font-weight:650}.topbar p{margin:5px 0 0;color:#7c858c;font-size:12px}.top-actions{display:flex;align-items:center;gap:8px}.search-box{width:250px;height:38px;border:1px solid #d5dade;background:#f8f9fa;border-radius:5px;display:flex;align-items:center;gap:8px;padding:0 11px;color:#828a91}.search-box input{min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:13px}.icon-button{width:38px;height:38px;border:1px solid #d5dade;border-radius:5px;background:#fff;display:grid;place-items:center;color:#586168}.icon-button:hover{background:#f1f3f4}.error-banner{margin:16px 28px 0;min-height:42px;padding:10px 12px;background:#fff4f0;border:1px solid #e8b6a4;color:#9b4228;border-radius:5px;display:flex;align-items:center;gap:8px;font-size:13px}.error-banner button{margin-left:auto;border:0;background:transparent;color:inherit;display:grid;place-items:center}.summary-row{margin:20px 28px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #dce1e4;background:#fff;border-radius:6px}.summary-row>div{min-height:72px;padding:15px 18px;border-right:1px solid #e4e7e9;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:4px}.summary-row>div:last-child{border-right:0}.summary-row span{color:#767f86;font-size:12px}.summary-row strong{font-size:25px;font-weight:650;color:#292f34}.summary-row small{align-self:end;margin-bottom:4px;color:#8a9298}.student-grid{padding:18px 28px 36px;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}.student-card{min-width:0;border:1px solid #d7dcdf;border-radius:6px;background:#fff;overflow:hidden;transition:border-color .15s,transform .15s;cursor:pointer}.student-card:hover{transform:translateY(-1px);border-color:#8da99a}.student-card.attention{border-color:#d9a04c}.student-card.offline{opacity:.67}.student-meta{height:43px;padding:0 12px;display:flex;align-items:center;justify-content:space-between}.student-meta>div{display:flex;min-width:0;align-items:center;gap:7px}.student-meta i,.detail-panel header i{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#a6adb2}.student-meta i.online,.detail-panel header i.online{background:#39a867}.student-meta strong{font-size:13px}.student-meta div span{color:#969da3;font-size:10px}.attention-label,.offline-label{padding:2px 6px;border-radius:3px;font-size:10px}.attention-label{background:#fff0d5;color:#985d07}.offline-label{background:#eceff1;color:#717980}.preview-pair{height:132px;display:grid;grid-template-columns:42% 58%;gap:1px;background:#cfd4d7}.preview{min-width:0;position:relative;overflow:hidden;background:#343a40;display:grid;place-items:center;color:#aab1b6}.preview img,.live-view>img{width:100%;height:100%;display:block;object-fit:cover}.preview>span,.live-view>span{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10px}.preview em,.live-view em{position:absolute;left:7px;bottom:7px;display:flex;align-items:center;gap:4px;padding:3px 6px;background:#111417c7;border-radius:3px;color:#fff;font-size:9px;font-style:normal}.student-card footer{height:38px;padding:0 11px;display:flex;align-items:center;gap:11px;color:#7a8389;font-size:10px}.student-card footer span{display:flex;align-items:center;gap:3px}.student-card footer button{margin-left:auto;padding:0;border:0;background:transparent;color:#277e51;font-size:11px}.empty-state{grid-column:1 / -1;min-height:250px;color:#7e878d;display:grid;place-content:center;justify-items:center;gap:10px}.detail-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;padding:24px;background:#0a0c0e9e;display:grid;place-items:center}.detail-panel{width:min(1120px,100%);max-height:calc(100vh - 48px);overflow:auto;background:#f6f7f8;border-radius:7px;box-shadow:0 20px 70px #00000047}.detail-panel>header{min-height:64px;padding:0 18px 0 22px;border-bottom:1px solid #d9dee1;background:#fff;display:flex;align-items:center;justify-content:space-between}.detail-panel>header>div{display:flex;align-items:center;gap:8px}.detail-panel h2{margin:0;font-size:17px}.detail-panel header span{color:#838b91;font-size:11px}.detail-status{height:42px;padding:0 22px;display:flex;align-items:center;gap:18px;color:#6f787f;font-size:11px}.detail-status span{display:flex;align-items:center;gap:5px}.detail-status span:first-child i{width:7px;height:7px;border-radius:50%;background:#d49b43}.detail-status .rtc-connected i{background:#39a867}.detail-status .rtc-error i{background:#c54}.live-stage{min-height:430px;padding:0 22px;display:grid;grid-template-columns:minmax(260px,.62fr) minmax(420px,1.38fr);gap:10px}.live-view{min-width:0;position:relative;overflow:hidden;background:#252a2f;border-radius:5px;display:grid;place-items:center;color:#aab1b6}.rtc-view{position:absolute;top:0;right:0;bottom:0;left:0}.talk-bar{min-height:78px;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.talk-bar>div{display:grid;gap:4px}.talk-bar strong{font-size:13px}.talk-bar span{color:#80898f;font-size:11px}.talk-button{min-width:206px;height:46px;border:0;border-radius:5px;background:#247a4d;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:650;-webkit-user-select:none;user-select:none;touch-action:none}.talk-button:hover{background:#1f6c44}.talk-button.talking{background:#b34e39}.talk-button:disabled{cursor:not-allowed;background:#9da4a8}@media (max-width: 900px){.app-shell{grid-template-columns:66px minmax(0,1fr)}.brand div,.sidebar nav span,.sidebar nav b,.sidebar-status,.teacher-account:not(svg){display:none}.sidebar nav button{grid-template-columns:1fr;justify-items:center}.teacher-account{grid-template-columns:1fr;justify-items:center}.teacher-account svg:last-child{display:none}.summary-row{grid-template-columns:repeat(2,1fr)}.summary-row>div:nth-child(2){border-right:0}.live-stage{min-height:620px;grid-template-columns:1fr;grid-template-rows:240px 370px}}@media (max-width: 620px){.app-shell{display:block}.sidebar{display:none}.topbar{height:auto;padding:15px;align-items:flex-start;gap:12px}.topbar p{display:none}.search-box{width:min(46vw,210px)}.summary-row{margin:12px 12px 0}.student-grid{padding:12px;grid-template-columns:1fr}.detail-backdrop{padding:0}.detail-panel{width:100%;min-height:100vh;max-height:100vh;border-radius:0}.live-stage{padding:0 12px;min-height:540px;grid-template-rows:200px 330px}.talk-bar{align-items:stretch;flex-direction:column}.talk-button{width:100%}}