/* ===== 大屏端 ===== */
body.screen{height:100vh;overflow:hidden;display:flex;flex-direction:column;background:#e9eef4}

.screen-topbar{display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px;background:linear-gradient(100deg,#173a5e,#1d4e79);color:#fff;flex:0 0 auto}
.screen-topbar .left{display:flex;align-items:center;gap:12px}
.screen-topbar .logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#3f8cff,#12a594);
  display:grid;place-items:center;font-size:20px}
.screen-topbar h1{font-size:22px;font-weight:800;letter-spacing:.5px}
.screen-topbar .class-tag{font-size:14px;opacity:.85;margin-left:6px}
.screen-topbar .right{display:flex;align-items:center;gap:10px}

.screen-main{flex:1;display:grid;grid-template-columns:2.05fr 1fr;gap:14px;padding:14px;min-height:0}

/* 作业面板 */
.hw-panel{background:#fff;border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:0}
.hw-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
.hw-head h2{font-size:24px;color:var(--navy);display:flex;align-items:center;gap:10px}
.hw-head h2 .dot{width:10px;height:10px;border-radius:50%;background:var(--teal)}
.hw-head .date{font-size:15px;color:var(--sub)}
.hw-list{flex:1;overflow:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.hw-empty{color:var(--sub);text-align:center;margin:auto;font-size:17px;line-height:1.8}
.hw-item{background:#f7faff;border:1px solid #e2ecfa;border-radius:14px;padding:16px 18px;border-left:5px solid var(--blue)}
.hw-item .subj{display:inline-block;font-size:15px;font-weight:800;color:#fff;background:var(--blue);
  padding:3px 12px;border-radius:20px;margin-bottom:10px}
.hw-item .txt{font-size:20px;line-height:1.6;color:#1b2a3a;white-space:pre-wrap;word-break:break-word}
.hw-item .tm{font-size:13px;color:#8a9aab;margin-top:8px}
.hw-item.highlight{animation:flash 1.6s ease 2}
@keyframes flash{0%,100%{background:#f7faff}50%{background:#fff6e0;border-color:#ffcf7a}}

/* 右侧 */
.side{display:flex;flex-direction:column;gap:14px;min-height:0}
.seat-panel{background:#fff;border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;flex:1;min-height:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line)}
.panel-head h3{font-size:18px;color:var(--navy);display:flex;align-items:center;gap:8px}
.panel-head .hint{font-size:12px;color:var(--sub)}
.seat-grid{flex:1;overflow:auto;padding:14px;display:grid;gap:8px;align-content:start}
.seat{background:#f2f6fc;border:1.5px solid #dbe6f3;border-radius:11px;padding:10px 4px;text-align:center;
  font-size:16px;font-weight:700;color:#243b52;transition:.12s;min-height:46px;display:grid;place-items:center;
  cursor:pointer;user-select:none;position:relative}
.seat:hover{background:#e7f0ff;border-color:var(--blue);transform:translateY(-1px)}
.seat.empty{background:transparent;border:1.5px dashed #d3dde9;color:#b7c3d1;font-weight:500;cursor:default;font-size:13px}
.seat.empty:hover{transform:none;border-color:#d3dde9;background:transparent}
.seat .badge{position:absolute;top:3px;right:5px;font-size:11px;color:#fff;background:var(--amber);
  border-radius:8px;padding:0 5px;line-height:15px}
.seat.punishing{background:#ffe9ea;border-color:var(--red);color:#b42318}
.seat.punishing::after{content:"罚站";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--red)}

/* 时钟 */
.clock-panel{background:linear-gradient(150deg,#173a5e,#22598c);border-radius:18px;box-shadow:var(--shadow);
  color:#fff;padding:18px 20px;text-align:center;flex:0 0 auto}
.clock-panel .time{font-size:64px;font-weight:800;letter-spacing:2px;line-height:1;font-variant-numeric:tabular-nums}
.clock-panel .sec{font-size:24px;opacity:.75}
.clock-panel .date{margin-top:10px;font-size:20px;font-weight:600;opacity:.95}
.clock-panel .weekday{font-size:15px;opacity:.75;margin-top:2px}

/* 喊话横幅 */
.broadcast-bar{position:fixed;left:0;right:0;top:0;background:linear-gradient(90deg,#f2a33c,#f7b955);color:#3a2600;
  padding:14px 26px;font-size:20px;font-weight:700;display:flex;align-items:center;gap:14px;z-index:900;
  transform:translateY(-100%);transition:.35s;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.broadcast-bar.show{transform:translateY(0)}
.broadcast-bar .who{font-size:14px;background:rgba(255,255,255,.4);padding:2px 10px;border-radius:14px}

/* 罚站浮层 */
.punish-box{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:800}
.punish-item{background:#fff;border:2px solid var(--red);border-radius:14px;padding:10px 16px;
  box-shadow:0 8px 24px rgba(229,72,77,.25);display:flex;align-items:center;gap:12px;min-width:210px}
.punish-item .nm{font-weight:800;color:#b42318;font-size:16px}
.punish-item .cd{font-size:20px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums;margin-left:auto}

/* 找老师按钮 */
.find-btn{background:#ff6b3d;color:#fff;font-size:17px;font-weight:800;padding:12px 20px;border-radius:13px;
  box-shadow:0 8px 22px rgba(255,107,61,.4);display:flex;align-items:center;gap:8px}
.find-btn:hover{background:#f45927}

/* 执行确认 */
.exec-big{display:flex;gap:14px}
.exec-big .btn{flex:1;padding:18px;font-size:19px}
.approve{background:var(--green);color:#fff}
.reject{background:var(--red);color:#fff}

/* 常用留言 */
.quick-list{display:flex;flex-wrap:wrap;gap:8px}
.quick-chip{background:#eef4ff;border:1px solid #d7e4f7;color:#1d4e79;border-radius:9px;padding:8px 12px;
  font-size:14px;font-weight:600;cursor:pointer;transition:.12s;text-align:left}
.quick-chip:hover{background:#dfeaff;border-color:var(--blue)}
.find-hint{font-size:13px;color:#2f7d4f;margin-top:8px}
.find-hint.warn{color:#c2410c}

/* 摄像头选择 */
.cam-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto}
.cam-row{display:flex;align-items:center;gap:10px;border:1.5px solid #dbe6f3;border-radius:10px;padding:10px 12px;
  cursor:pointer;font-size:15px}
.cam-row:hover{border-color:var(--blue);background:#f6faff}
.cam-row input{width:18px;height:18px}
.cam-empty{font-size:13px;color:#8a9aab;margin-top:6px;line-height:1.6}

@media (max-width:1100px){
  .screen-main{grid-template-columns:1fr;overflow:auto}
  .clock-panel .time{font-size:48px}
}