/* 课堂评分系统 · 界面样式(校徽蓝,卡片式;浅色/深色自动切换) */
:root{
  --bg:#eef3f9; --fg:#14202e; --muted:#5d6b7c; --line:#dbe4ee; --card:#ffffff; --soft:#f5f8fc;
  --accent:#0860a0; --accent-2:#0b3c66; --accent-fg:#fff; --accent-soft:#e6f0f9;
  --orange:#e8822b; --orange-soft:#fdf0e3; --good:#1e8a5a; --good-soft:#e4f5ec; --bad:#c8333f; --bad-soft:#fbe9ea; --warn:#a85a0a; --warn-soft:#fdf0e3; --violet:#6b4fc4;
  --shadow:0 1px 2px rgba(16,40,70,.05),0 10px 28px rgba(16,40,70,.07);
  --font:"Segoe UI","Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  --mono:Consolas,"Cascadia Mono","Courier New",monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1520; --fg:#e4ebf3; --muted:#92a1b3; --line:#243244; --card:#142030; --soft:#101b29;
  --accent:#5aa8e0; --accent-2:#2f7fb8; --accent-fg:#06192b; --accent-soft:#17304a; --orange:#f0a050; --orange-soft:#3a2a14;
  --good:#5bd39c; --good-soft:#143a2a; --bad:#ff8c95; --bad-soft:#40202a; --warn:#f0b35a; --warn-soft:#3b2d12; --violet:#a58cf2;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.25);color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.65 var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
.muted{color:var(--muted)}.small{font-size:13px}.grow{flex:1;min-width:0}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.row.nowrap{flex-wrap:nowrap}.num{font-variant-numeric:tabular-nums;min-width:40px;text-align:right}
.ic{flex:none;vertical-align:-3px}
a{color:var(--accent)}

/* ----- 按钮/输入 ----- */
.btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--card);padding:7px 15px;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--accent);box-shadow:0 3px 10px rgba(8,96,160,.14)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--accent-fg);border-color:var(--accent-2);font-weight:600}
.btn.orange{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:600}
.btn.danger{color:var(--bad)}.btn.danger:hover{border-color:var(--bad)}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.btn.sm{padding:3px 10px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.icon-btn{border:0;background:transparent;cursor:pointer;border-radius:8px;padding:6px;color:var(--muted)}.icon-btn:hover{background:var(--soft);color:var(--fg)}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field-l{font-size:13px;color:var(--muted);font-weight:600}
.field small{color:var(--muted);font-size:12px}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=datetime-local],select,textarea{width:100%;min-width:0;border:1px solid var(--line);background:var(--soft);border-radius:10px;padding:8px 12px;transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);background:var(--card)}
textarea{resize:vertical;line-height:1.6}
.search{position:relative;min-width:200px}.search .ic{position:absolute;left:11px;top:11px;color:var(--muted)}.search input{padding-left:34px}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer}.switch input{display:none}.switch i{width:40px;height:22px;border-radius:99px;background:var(--line);position:relative;transition:.2s}.switch i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}.switch input:checked+i{background:var(--accent)}.switch input:checked+i::after{left:21px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}.seg button{border:0;background:transparent;padding:6px 12px;cursor:pointer;color:var(--muted);display:inline-flex;gap:5px;align-items:center}.seg button.on{background:var(--accent);color:var(--accent-fg)}

/* ----- 卡片/芯片 ----- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line)}
.card-h h2{margin:0;font-size:16px;display:flex;gap:8px;align-items:center}.card-h h2 .ic{color:var(--accent)}
.card-b{padding:18px 20px}
.chip{display:inline-block;font-size:12px;line-height:20px;padding:0 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-weight:600;white-space:nowrap}
.chip.good{background:var(--good-soft);color:var(--good)}.chip.bad{background:var(--bad-soft);color:var(--bad)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.gray{background:var(--soft);color:var(--muted);border:1px solid var(--line)}.chip.violet{background:#ece8fa;color:var(--violet)}
.msg{padding:10px 14px;border-radius:10px;margin-top:10px;font-size:14px}.msg.ok{background:var(--good-soft);color:var(--good)}.msg.err{background:var(--bad-soft);color:var(--bad)}.msg.info{background:var(--accent-soft);color:var(--accent)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 20px;border-radius:99px;font-size:14px;z-index:90;box-shadow:var(--shadow);animation:up .25s}
@keyframes up{from{opacity:0;transform:translate(-50%,10px)}}
.empty{text-align:center;padding:42px 20px;color:var(--muted)}.empty b{display:block;color:var(--fg);font-size:16px;margin:8px 0 2px}.empty p{margin:0 0 14px}
.empty-i{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin:0 auto}

/* ----- 数据 ----- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.kpi.o::before{background:var(--orange)}.kpi.g::before{background:var(--good)}.kpi.r::before{background:var(--bad)}
.kpi .v{font-size:32px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--accent-2)}
.kpi.o .v{color:var(--orange)}.kpi.g .v{color:var(--good)}.kpi.r .v{color:var(--bad)}
.kpi .v small{font-size:14px;font-weight:500;color:var(--muted);margin-left:3px}.kpi .l{font-size:13px;color:var(--muted)}
.g2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px}.g2e{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:980px){.g2,.g2e{grid-template-columns:1fr}}
.hist{display:flex;align-items:flex-end;gap:8px;height:190px;padding:8px 4px 0;border-bottom:1px solid var(--line)}
.hist .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.hist .col b{font-size:12px;color:var(--muted);margin-bottom:3px}
.hist .col i{display:block;width:100%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#3d8fcb,var(--accent));min-height:2px;transition:height .6s cubic-bezier(.2,.8,.2,1)}
.hist .col.hi i{background:linear-gradient(180deg,#f2a560,var(--orange))}
.hist-x{display:flex;gap:8px;padding:6px 4px 0;font-size:12px;color:var(--muted)}.hist-x span{flex:1;text-align:center}
.hb{display:grid;grid-template-columns:minmax(100px,170px) 1fr 44px;gap:10px;align-items:center;margin:9px 0;font-size:13.5px}
.hb .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hb .n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;min-width:60px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:4px;transition:width .5s}
.bar>i.lo{background:linear-gradient(90deg,#f2a560,var(--orange))}.bar>i.hi{background:linear-gradient(90deg,#4cc08a,var(--good))}
.hb .bar{height:10px}
.podium{display:flex;gap:12px;align-items:flex-end;justify-content:center;margin:6px 0 4px}
.podium .p{flex:1;max-width:190px;text-align:center;border-radius:14px 14px 0 0;padding:12px 8px 10px;color:#fff}
.podium .p .m{font-size:26px;line-height:1}.podium .p .nm{font-weight:700;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.podium .p .sc{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.p1{background:linear-gradient(180deg,#f3b53a,#d9921a);height:170px}.p2{background:linear-gradient(180deg,#a9b6c6,#8696aa);height:140px}.p3{background:linear-gradient(180deg,#d9985f,#b87333);height:122px}
.spark{width:100%;height:120px;display:block}
.medal{display:inline-block;min-width:26px;text-align:center;font-weight:800;border-radius:7px;padding:0 6px;font-size:13px;background:var(--accent-soft);color:var(--accent)}
.medal.m1{background:#fbe6b0;color:#8a5a00}.medal.m2{background:#e3e9f0;color:#4a5a6c}.medal.m3{background:#f4d7bd;color:#7d4515}
.ring{position:relative;flex:none}.ring-t{position:absolute;inset:0;display:grid;place-content:center;text-align:center}.ring-t b{font-size:30px;line-height:1;font-variant-numeric:tabular-nums}.ring-t small{color:var(--muted)}

/* ----- 表格 ----- */
.scroll{overflow-x:auto}
.tbl{border-collapse:separate;border-spacing:0;width:100%;font-size:14px}
.tbl th{position:sticky;top:0;background:var(--soft);text-align:left;padding:10px 12px;font-size:12.5px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap;cursor:default}
.tbl th.sortable{cursor:pointer;user-select:none}.tbl th.sortable:hover{color:var(--accent)}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr{transition:background .12s}.tbl tbody tr:hover{background:var(--soft)}.tbl tbody tr.click{cursor:pointer}
.tbl tr.me td{background:var(--orange-soft);font-weight:600}
.heat{display:inline-block;min-width:38px;text-align:center;padding:1px 6px;border-radius:6px;font-variant-numeric:tabular-nums;font-size:13px}
.detail{list-style:none;margin:2px 0 0;padding:0;font-size:13px;color:var(--muted)}
.detail li.ok::before{content:"✓ ";color:var(--good);font-weight:700}.detail li.no::before{content:"✗ ";color:var(--bad);font-weight:700}.detail li.half::before{content:"△ ";color:var(--warn);font-weight:700}
pre.src{font:12.5px/1.6 var(--mono);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px;overflow:auto;max-height:260px;white-space:pre-wrap;word-break:break-all;margin:0}

/* ----- 抽屉 ----- */
.drawer-bg{position:fixed;inset:0;background:rgba(10,25,45,.45);z-index:60;display:flex;justify-content:flex-end;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.drawer{width:min(620px,100%);background:var(--bg);height:100%;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.25);animation:slide .25s}
.drawer.wide{width:min(980px,100%)}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
.drawer>header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--card);border-bottom:1px solid var(--line)}.drawer>header h2{margin:0;font-size:17px}
.drawer-b{padding:18px 20px;overflow:auto;flex:1}

/* ----- 学生端 ----- */
.hero{background:linear-gradient(120deg,var(--accent-2),var(--accent) 60%,#3d8fcb);color:#fff;padding:22px 0 54px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-90px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 65%)}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:12px}.brand img{height:42px;border-radius:50%;background:#fff;padding:2px}.brand b{font-size:13px;letter-spacing:2px;opacity:.85}
.hero h1{margin:14px 0 4px;font-size:30px;letter-spacing:.5px}.hero p{margin:0;opacity:.88}
.steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.steps div{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:4px 14px 4px 5px;font-size:14px;display:flex;align-items:center;gap:8px}.steps b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--accent-2);font-size:13px}
.navtabs{display:flex;gap:6px;margin-top:20px;flex-wrap:wrap}
.navtabs button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;border-radius:99px;padding:7px 20px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.navtabs button.on{background:#fff;color:var(--accent-2);font-weight:700}
.main{max-width:1160px;margin:-28px auto 0;padding:0 20px 56px;position:relative;z-index:2}
.drop{border:2px dashed var(--line);border-radius:14px;background:var(--soft);padding:26px;text-align:center;cursor:pointer;transition:.15s}.drop:hover,.drop.on{border-color:var(--accent);background:var(--accent-soft)}
.drop .ic{color:var(--accent)}.drop b{display:block}
.taskbox{white-space:pre-wrap;line-height:1.85;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.items{display:grid;gap:10px;margin-top:16px}
.item{padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}.item .top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:6px}
.comment{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--accent-soft)}

/* ----- 直播:幻灯片 + 弹幕 ----- */
.stage{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow)}
.stage img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;user-select:none}
.dm-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dm{position:absolute;left:100%;white-space:nowrap;font-weight:700;font-size:clamp(14px,2.2vw,26px);text-shadow:0 0 4px #000,0 0 2px #000,1px 1px 2px #000;animation:fly linear forwards;will-change:transform}
.dm-layer.big .dm{font-size:clamp(22px,3.2vw,48px)}
@keyframes fly{to{transform:translateX(calc(-100vw - 100%))}}
.stage .dm-layer{container-type:inline-size}
.livebar{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.dm-in{display:flex;gap:8px;align-items:center;flex:1;min-width:240px}
.dots{display:flex;gap:6px}.dots i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);cursor:pointer;display:block}.dots i.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.thumbs button{border:2px solid transparent;border-radius:10px;padding:0;background:var(--card);cursor:pointer;overflow:hidden;text-align:left;box-shadow:var(--shadow)}
.thumbs button.on{border-color:var(--orange)}.thumbs img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}.thumbs span{display:block;font-size:11.5px;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bad);animation:pulse 1.4s infinite;margin-right:6px}
@keyframes pulse{50%{opacity:.25}}

/* ----- 教师端布局 ----- */
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,var(--accent-2),#0a2f52);color:#fff;padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}
.side .brand{padding:4px 8px 18px}.side .brand b{display:block;font-size:15px;letter-spacing:1px;opacity:1}.side .brand small{opacity:.7;font-size:12px}
.side nav button{width:100%;display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:12px;border:0;background:transparent;color:rgba(255,255,255,.82);cursor:pointer;text-align:left;font-size:15px}
.side nav button:hover{background:rgba(255,255,255,.1)}.side nav button.on{background:#fff;color:var(--accent-2);font-weight:700}
.side .foot{margin-top:auto;display:grid;gap:8px}
.cont{padding:0 28px 60px;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:20px 0 16px;flex-wrap:wrap}.topbar h1{margin:0;font-size:24px}.topbar .sub{color:var(--muted);font-size:13px}
@media (max-width:860px){.shell{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}.side nav{display:flex;flex-wrap:wrap}.side nav button{width:auto}.side .foot{margin:0 0 0 auto;display:flex}.cont{padding:0 16px 40px}}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.sub{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:.15s}.sub:hover{transform:translateY(-3px);border-color:var(--accent)}
.thumb{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.thumb iframe,.mthumb iframe{position:absolute;left:0;top:0;width:800px;height:600px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.sub .info{padding:11px 14px;display:flex;flex-direction:column;gap:6px}.sub .l1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.sub .nick{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub .sc{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.sub .sc small{font-size:12px;font-weight:400;color:var(--muted)}
.mthumb{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px}
.ritem{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:var(--soft)}
.ritem .rr{display:grid;grid-template-columns:minmax(0,2fr) 90px 150px 36px;gap:10px;align-items:end}
.ritem textarea.chk{font:12.5px/1.5 var(--mono);margin-top:10px}.ritem textarea.bad{border-color:var(--bad)}
.mi{padding:10px 0;border-bottom:1px solid var(--line)}.mi .t{display:flex;justify-content:space-between;gap:10px;align-items:center}.mi input[type=number]{width:78px;padding:4px 8px}
.ctrl{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px}@media (max-width:1100px){.ctrl{grid-template-columns:1fr}}
.dmlist{max-height:430px;overflow:auto;display:grid;gap:6px}.dmrow{display:flex;gap:10px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}.dmrow .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notes{white-space:pre-wrap;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;max-height:200px;overflow:auto;font-size:14px}
.login{max-width:420px;margin:90px auto;padding:0 16px}
.bigbtns{display:flex;gap:10px;margin-top:12px}.bigbtns .btn{flex:1;justify-content:center;padding:12px}

/* ----- 大屏 ----- */
body.scr{--bg:#081522;--fg:#e8f0f8;--muted:#8fa4ba;--line:#1d3248;--card:rgba(255,255,255,.05);--soft:rgba(255,255,255,.04);--accent:#4aa3e8;--accent-2:#1f78bf;--accent-soft:rgba(74,163,232,.15);--orange:#f2a15a;--good:#4cc99a;--bad:#ff8c95;--shadow:none;background:radial-gradient(1200px 700px at 85% -10%,#12395c 0%,transparent 60%),radial-gradient(900px 600px at -10% 110%,#0d2d4a 0%,transparent 60%),#081522;min-height:100vh}
.scr .kpi .v{color:#fff;font-size:42px}.scr .kpi.o .v{color:var(--orange)}.scr .kpi.g .v{color:var(--good)}.scr .kpi.r .v{color:var(--bad)}
.scr .card{backdrop-filter:blur(6px)}.scr .tbl th{background:transparent}.scr .tbl td{font-size:18px}.scr .bar{background:#16293d}
.sh{display:flex;justify-content:space-between;align-items:center;padding:18px 32px 6px;gap:16px;flex-wrap:wrap}.sh h1{font-size:32px;margin:0;letter-spacing:2px}.sh .right{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:20px}
.scr .cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:16px;padding:6px 32px 28px}.scr .kpis{padding:6px 32px 0}
@media (max-width:1100px){.scr .cols{grid-template-columns:1fr}}
.wall{padding:0 32px 28px}.wall .stage{max-height:calc(100vh - 120px);margin:0 auto}
.rank-mini{position:absolute;right:14px;top:14px;background:rgba(0,0,0,.55);color:#fff;border-radius:12px;padding:8px 14px;font-size:14px;z-index:3}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.subt{color:var(--muted);font-size:13px}
.tbl td{white-space:nowrap}
.tbl td .detail,.tbl td ul{white-space:normal}
.ritem.compact{display:flex;gap:12px;align-items:center;cursor:pointer;padding:10px 14px}.ritem.compact:hover{border-color:var(--accent)}
/* ===== 加入课堂 ===== */
.join{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;background:linear-gradient(160deg,var(--accent-2),var(--accent) 55%,#3d8fcb)}
.join-card{width:min(420px,100%);background:var(--card);border-radius:22px;padding:28px 24px;box-shadow:0 20px 50px rgba(0,0,0,.25);text-align:center}
.join-card .field{text-align:left}.join-logo{width:68px;height:68px;border-radius:50%;margin-bottom:6px}
.join-card h1{margin:0 0 4px;font-size:26px}.join-card p{margin:0 0 16px}
.btn.block{display:flex;width:100%;justify-content:center;padding:12px;margin-top:16px;font-size:16px}
.join .credit{color:rgba(255,255,255,.75)}
.credit{text-align:center;font-size:12px;color:var(--muted);padding:18px 8px 10px;letter-spacing:.5px}
.who{display:inline-flex;gap:5px;align-items:center;background:rgba(255,255,255,.16);padding:2px 12px;border-radius:99px;font-size:14px}
.hero .brand{flex-wrap:wrap}.hero .brand .grow{flex:1}
.dot{font-style:normal;background:var(--orange);color:#fff;border-radius:99px;font-size:11px;min-width:18px;height:18px;line-height:18px;padding:0 5px;text-align:center;margin-left:4px}
.tabbar{display:none}

/* ===== 同步看课:放大 / 全屏 ===== */
.livebox{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px;overflow:hidden}
.stage{position:relative}
.pgtag{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.55);color:#fff;border-radius:99px;font-size:12px;padding:1px 10px;z-index:4;pointer-events:none}
.fsbtn{position:absolute;right:10px;top:10px;z-index:5;display:inline-flex;gap:5px;align-items:center;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:99px;padding:6px 14px;cursor:pointer;font-size:13px}
.livebar{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.livebar.send .dm-in{flex:1;min-width:0}.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.livebox.fs{position:fixed;inset:0;z-index:100;border-radius:0;border:0;padding:0;background:#000;display:flex;flex-direction:column;box-shadow:none}
.livebox.fs .stage{flex:1;min-height:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
.livebox.fs .stage img{background:#000}
.livebox.fs .livebar,.livebox.fs .quick{position:relative;z-index:6;margin:0;padding:6px 10px;background:rgba(10,20,34,.88);color:#fff}
.livebox.fs .livebar .btn,.livebox.fs .quick .btn{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}
.livebox.fs .livebar input{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
.livebox.fs .livebar input::placeholder{color:rgba(255,255,255,.55)}
.livebox.fs .chip.good{background:rgba(76,201,154,.2);color:#8fe3c3}
.livebox.fs.barhide .livebar,.livebox.fs.barhide .quick{display:none}
body.noscroll{overflow:hidden}
@media (max-height:520px) and (orientation:landscape){.livebox.fs .quick{display:none}.livebox.fs .livebar{padding:4px 10px}.livebox.fs .dots{display:none}}
/* ===== 图片放大 ===== */
.lb{position:fixed;inset:0;z-index:200;background:rgba(5,10,18,.94);display:flex;flex-direction:column}
.lb-top{display:flex;justify-content:space-between;align-items:center;color:#fff;padding:10px 14px}.lb-top small{opacity:.7;margin-left:8px}.lb-top .icon-btn{color:#fff}.lb-top .icon-btn:hover{background:rgba(255,255,255,.12)}
.lb-stage{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:none}.lb-stage img{max-width:96vw;max-height:calc(100vh - 110px);transition:transform .12s;user-select:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;cursor:pointer}.lb-nav.l{left:14px}.lb-nav.r{right:14px}
.lb-hint{text-align:center;color:rgba(255,255,255,.55);font-size:12px;padding:8px}
/* ===== 截图作业 ===== */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px}
.shot{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--soft);aspect-ratio:4/3}.shot img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
.shot .x{position:absolute;right:4px;top:4px;border:0;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;cursor:pointer}
.wall2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.stu{border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}.stu.fresh{animation:flash 2.4s}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--orange)}}
.stu-h{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.stu .shots{padding:10px;margin:0;grid-template-columns:repeat(2,1fr)}
.big-img{width:100%;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;cursor:zoom-in;display:block}
.qrbox{display:grid;place-items:center;padding:14px;background:#fff;border-radius:16px;width:fit-content;margin:0 auto}
.qrcode{background:#fff;padding:10px;border-radius:12px;display:block}
.invite{font-size:38px;font-weight:800;letter-spacing:6px;color:var(--accent-2);text-align:center;font-variant-numeric:tabular-nums}

/* ===== 手机端适配 ===== */
@media (max-width:760px){
  body{font-size:15px;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .hero{padding:12px 0 22px;border-radius:0 0 18px 18px}.wrap{padding:0 14px}
  .hero .brand b{font-size:12px;letter-spacing:.5px}.hero .brand img{height:30px}
  .hero h1{font-size:20px;margin:8px 0 0}.hero p,.hide-s,.hero .navtabs{display:none}
  .main{padding:0 10px 30px;margin-top:-12px}
  .card{border-radius:14px;margin-bottom:12px}.card-b{padding:14px}.card-h{padding:11px 14px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(16,40,70,.08)}
  .tabbar button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;border:0;background:transparent;color:var(--muted);padding:6px 0;font-size:11.5px;cursor:pointer;min-height:48px}
  .tabbar button.on{color:var(--accent);font-weight:700}.tabbar .dot{position:absolute;top:2px;left:calc(50% + 6px)}
  input[type=text],input[type=search],input[type=password],input[type=number],select,textarea{font-size:16px;padding:10px 12px}
  .btn{padding:9px 14px;min-height:40px}.btn.sm{min-height:36px}
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}.kpi .v{font-size:26px}
  .hist{height:150px}.hb{grid-template-columns:96px 1fr 40px;font-size:12.5px}.podium .p{padding:8px 4px}.podium .p .sc{font-size:20px}
  .livebox{margin:0 -10px;border-radius:0;border-left:0;border-right:0;padding:0 0 10px}
  .livebox .stage{border-radius:0}.livebox>.livebar,.livebox>.quick{padding:0 12px}
  .livebar.nav{gap:6px}.livebar.nav .pg{display:none}
  .dots{order:3;width:100%;justify-content:space-around;margin-top:2px}.dots i{width:28px;height:28px}
  .quick{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.quick .btn{flex:none}
  .fsbtn{padding:8px 12px}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  .drop{padding:20px 12px}
  .item .top{flex-wrap:wrap}.ring{transform:scale(.9)}
  .tbl{font-size:13px}.tbl th,.tbl td{padding:8px}
  .join-card{padding:24px 18px}
}
@media (max-height:540px) and (orientation:landscape){.tabbar button{min-height:38px;flex-direction:row;justify-content:center;gap:6px;font-size:13px}body{padding-bottom:50px}.hero{padding:6px 0 14px}.hero h1{display:none}}
.pager{margin-top:6px}

body.noscroll .tabbar{display:none}
body.noscroll .main{z-index:auto}

/* 手机横屏:画面铺满整个屏幕,控制条浮在底部,轻点画面显示/隐藏 */
@media (max-height:540px) and (orientation:landscape){
  .livebox.fs .stage{position:absolute;inset:0}
  .livebox.fs .livebar.nav{position:absolute;left:0;right:0;bottom:46px;background:rgba(8,16,28,.62);padding:4px 10px}
  .livebox.fs .livebar.send{position:absolute;left:0;right:0;bottom:0;background:rgba(8,16,28,.72);padding:4px 10px}
  .livebox.fs .livebar input{padding:6px 10px;font-size:15px}
}
.taphint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(0,0,0,.5);color:#fff;font-size:12px;border-radius:99px;padding:2px 12px;z-index:4;pointer-events:none;animation:hintfade 6s forwards}
@keyframes hintfade{0%,70%{opacity:1}100%{opacity:0}}

.shot1{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--soft)}.shot1 img{width:100%;max-height:320px;object-fit:contain;display:block;cursor:zoom-in}
.stu .shots{grid-template-columns:1fr}.stu .shot{aspect-ratio:16/10}
.guard{position:fixed;inset:0;z-index:300;background:rgba(5,12,24,.88);display:flex;flex-direction:column;align-items:flex-end;padding:14px}
.guard-arrow{margin:0 14px 0 0}.guard-card{margin:10px auto auto;background:var(--card);border-radius:20px;padding:22px 20px;max-width:360px;width:100%;text-align:center}
.guard-card h2{justify-content:center;margin:0 0 8px}.guard-card h2::before{display:none}.guard-card p{margin:0 0 6px;line-height:1.8}
.linkbtn{border:0;background:none;color:var(--muted);padding:12px;cursor:pointer;text-decoration:underline}