
:root{
  --bg:#f4f7fb;--card:#fff;--line:#dbe2ee;--primary:#3157d5;--primary2:#eef2ff;
  --text:#182033;--muted:#697386;--warn:#b76b0d;--danger:#b63d46;--ok:#16794a;
  --seat:#dce8ff;--seat2:#f1f5ff;--disabled:#e6e9ee;--locked:#fff1b8;
  --shadow:0 14px 36px rgba(24,32,51,.08);--soft:0 5px 16px rgba(24,32,51,.06)
}
*{box-sizing:border-box}
body{margin:0;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:12px 18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.brand{font-weight:850;margin-right:4px;line-height:1.15}.brand small{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:4px}
.toolbar-group{display:flex;align-items:center;gap:7px;padding:4px;border-radius:12px;background:#f6f8fc;border:1px solid #e7ebf2}
.ctrl{height:38px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;color:var(--text)}
.btn{height:38px;border-radius:10px;padding:0 13px;background:#fff;border:1px solid var(--line);color:var(--text);transition:.15s}
.btn:hover{background:#f8fafc;transform:translateY(-1px)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.warn{color:#85500a;background:#fff8e9;border-color:#edd49a}.btn.danger{color:#9e333c;background:#fff1f2;border-color:#efc7ca}
.btn.soft{background:var(--primary2);color:#2948b2;border-color:#d9e0ff}.grow{flex:1}.status{font-size:12px;color:var(--muted);white-space:nowrap}
.layout{display:grid;grid-template-columns:minmax(900px,1fr) 310px;gap:16px;padding:16px;align-items:start}
.classroom-wrap{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:auto}
.classroom{min-width:1000px;padding:14px 16px 18px;position:relative}.zone-label{text-align:center;font-weight:800;letter-spacing:.28em}
.corridor{background:#b8b5b7;padding:7px;border-radius:8px;margin-bottom:12px}.window{background:#b9c9ed;padding:7px;border-radius:8px;margin-top:12px}
.room{display:grid;grid-template-columns:88px 1fr;gap:18px;min-height:570px}.podium{align-self:center;height:210px;background:#8fa8db;border:1px solid #536da1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;writing-mode:vertical-rl;letter-spacing:.3em}
.seat-area{display:flex;flex-direction:column;justify-content:space-between;padding:14px 0}.row{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.cluster{display:grid;gap:6px}.cluster.c2{grid-template-columns:repeat(2,90px)}.cluster.c4{grid-template-columns:repeat(4,90px)}
.seat{width:90px;height:88px;border:1px solid #9fb3db;border-radius:10px;background:linear-gradient(180deg,var(--seat),var(--seat2));padding:6px;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;user-select:none;transition:transform .15s,box-shadow .15s,background .18s}
.seat:hover{box-shadow:0 7px 16px rgba(49,87,213,.13)}.seat.drag-over{outline:3px solid rgba(49,87,213,.3);transform:translateY(-3px)}
.seat.disabled{background:var(--disabled);border-style:dashed;color:#8a9099}.seat.gender-male{background:linear-gradient(180deg,#eaf4ff,#dcecff);border-color:#8db9e8}.seat.gender-female{background:linear-gradient(180deg,#fff0f6,#ffe2ee);border-color:#e5a5bf}.seat.locked{border-color:#d3b452;box-shadow:inset 0 0 0 2px rgba(211,180,82,.22)}
.seat.randomizing{animation:seatShuffle .18s ease-in-out infinite alternate}.seat.randomizing .seat-name,.seat.randomizing .empty{filter:blur(1px);opacity:.6}
@keyframes seatShuffle{from{transform:translateY(-1px) rotate(-.4deg)}to{transform:translateY(2px) rotate(.4deg)}}
@media(prefers-reduced-motion:reduce){.seat.randomizing{animation:none}.seat{transition:none}}
.pcno{position:absolute;top:5px;left:7px;font-size:11px;color:#52647f;font-weight:750}.seat-name{font-size:15px;font-weight:800;text-align:center;line-height:1.25;max-width:76px;word-break:break-all}.empty{font-size:12px;color:#8993a4}
.icons{position:absolute;right:4px;top:4px;display:flex;gap:2px}.mini{border:0;background:transparent;padding:1px 3px;font-size:11px;color:#52647f}.mini:hover{background:rgba(255,255,255,.75);border-radius:5px}.seat-help{font-size:11px;color:var(--muted);margin-top:8px;text-align:right}
.side{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:14px;position:sticky;top:76px}.side-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.side h3{margin:0;font-size:17px}.side-actions{display:flex;gap:5px}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.stat{background:#f7f9fc;border:1px solid #eef1f6;border-radius:11px;padding:10px}.stat b{font-size:20px;display:block}.stat span{font-size:11px;color:var(--muted)}
.panel{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:13px;font-weight:800}.unseated{display:flex;flex-wrap:wrap;gap:6px;max-height:180px;overflow:auto}.chip{padding:6px 9px;border-radius:999px;background:#eef2ff;border:1px solid #cfd8ff;font-size:12px;cursor:grab}.chip.gender-male{background:#eaf4ff;border-color:#acd0f2;color:#285f99}.chip.gender-female{background:#fff0f6;border-color:#efbdd0;color:#9a4668}.chip.dragging{opacity:.45}.hint{font-size:12px;line-height:1.6;color:var(--muted)}
.list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}.scheme{border:1px solid var(--line);border-radius:10px;padding:8px}.scheme strong{font-size:12px}.scheme small{color:var(--muted);display:block;margin-top:2px}.scheme-actions{display:flex;gap:5px;margin-top:6px}.tinybtn{border:1px solid var(--line);background:#fff;border-radius:7px;font-size:11px;padding:4px 7px}.tinybtn:hover{background:#f7f9fc}.tinybtn.danger{color:var(--danger)}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.46);z-index:50;display:none;align-items:center;justify-content:center;padding:18px}.modal.show{display:flex}.dialog{width:min(700px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.22);padding:20px}.dialog.wide{width:min(940px,100%)}.dialog h2{margin:0 0 6px}.dialog p{color:var(--muted);font-size:13px;line-height:1.6}.form-row{display:flex;gap:8px;margin:10px 0}.form-row>*{flex:1}.textarea{width:100%;min-height:220px;border:1px solid var(--line);border-radius:10px;padding:10px;resize:vertical}.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.notice{padding:9px 10px;background:#f7f8fb;border-radius:9px;font-size:12px;color:var(--muted);margin:8px 0}
.table-wrap{border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:55vh}.student-table{width:100%;border-collapse:collapse;min-width:720px}.student-table th,.student-table td{padding:9px 10px;border-bottom:1px solid #edf0f5;text-align:left;font-size:13px}.student-table th{position:sticky;top:0;background:#f8fafc;z-index:2;color:#536074}.student-table tr:last-child td{border-bottom:0}.student-table input,.student-table select{height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 8px}.student-table .name-input{width:150px}.student-table .no-input{width:120px}.student-table .gender-select{width:86px}.student-table .seat-select{width:110px}.lock-toggle{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#5a6475}.student-empty{padding:26px;text-align:center;color:var(--muted)}
.class-manage-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fafbfe}.class-manage-card label{display:block;font-size:12px;font-weight:700;color:#596477;margin-bottom:7px}.danger-zone{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}.danger-zone strong{color:var(--danger)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;background:#111827;color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1}
.presentation .topbar,.presentation .side,.presentation .seat-help{display:none}.presentation .layout{display:block;padding:0}.presentation .classroom-wrap{border:0;border-radius:0;box-shadow:none}.presentation .classroom{min-width:100vw;min-height:100vh;padding:8px}.presentation .room{min-height:calc(100vh - 88px)}
@media(max-width:1600px){.layout{grid-template-columns:1fr}.side{position:static}.topbar{position:static}.toolbar-group{flex-wrap:wrap}}
@media print{body{background:#fff}.topbar,.side,.seat-help{display:none!important}.layout{display:block;padding:0}.classroom-wrap{border:0;box-shadow:none}.classroom{min-width:0;zoom:.82}.room{min-height:680px}}

/* 课堂管理 */
.class-session-group{background:#f7fbf8;border-color:#d8ebe0}.btn.success{background:#16794a;color:#fff;border-color:#16794a}.session-live{font-size:12px;font-weight:750;color:#16794a;white-space:nowrap}.session-live::before{content:"●";margin-right:5px}.seat.has-mark{box-shadow:inset 0 0 0 2px var(--mark-color,#e0a12a),0 7px 16px rgba(24,32,51,.08)}.seat.mark-misconduct{--mark-color:#c5454e}.seat.mark-leave{--mark-color:#7a67c7}.seat.mark-late{--mark-color:#c9861a}.seat.mark-other{--mark-color:#5577b9}.seat.mark-praise{--mark-color:#25845b}.seat.device-issue{outline:2px dashed #d78023;outline-offset:2px}.mark-badge{position:absolute;left:5px;bottom:5px;max-width:76px;padding:2px 5px;border-radius:6px;background:var(--mark-color,#5577b9);color:#fff;font-size:9px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-badge{position:absolute;right:5px;bottom:5px;background:#fff5e8;color:#9b5b10;border:1px solid #efcc9c;border-radius:6px;padding:1px 4px;font-size:9px;font-weight:750}.classroom-panel{background:#f8fafc;border:1px solid #e5eaf2;border-radius:12px;padding:10px}.classroom-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}.summary-pill{padding:6px 5px;border-radius:8px;background:#fff;border:1px solid #e8edf4;text-align:center;font-size:11px}.summary-pill b{display:block;font-size:15px}.record-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}.record-item{border:1px solid #e4e9f1;background:#fff;border-radius:9px;padding:7px}.record-main{display:flex;align-items:center;gap:6px;font-size:12px}.record-main strong{flex:1}.record-time{font-size:10px;color:var(--muted)}.record-note{font-size:11px;color:#657084;margin-top:4px;line-height:1.45}.record-actions{margin-top:5px;display:flex;justify-content:flex-end}.event-tag{display:inline-flex;align-items:center;border-radius:999px;padding:2px 6px;font-size:10px;font-weight:800;background:#eef2ff;color:#425ca3}.event-tag.违纪{background:#fff0f1;color:#a5323b}.event-tag.请假{background:#f1edff;color:#6750a4}.event-tag.迟到{background:#fff5df;color:#9a620c}.event-tag.表扬{background:#eaf8f0;color:#167047}.mark-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.mark-action{border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 8px;font-weight:800}.mark-action:hover{background:#f7f9fc}.mark-action[data-type="违纪"]{color:#a5323b;background:#fff7f7}.mark-action[data-type="请假"]{color:#6750a4;background:#faf8ff}.mark-action[data-type="迟到"]{color:#94600e;background:#fffaf0}.mark-action[data-type="表扬"]{color:#167047;background:#f4fbf7}.mark-action[data-type="设备异常"]{color:#995b11;background:#fff8ef}.history-session{border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0;background:#fff}.history-session-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.history-session-head strong{font-size:13px}.history-session-head small{color:var(--muted)}.history-events{margin-top:8px;display:flex;flex-direction:column;gap:5px}.history-row{display:grid;grid-template-columns:120px 70px 1fr;gap:8px;padding:6px 8px;background:#f8fafc;border-radius:7px;font-size:11px}.empty-record{text-align:center;color:var(--muted);font-size:12px;padding:12px}.end-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}.end-summary .stat{text-align:center}
@media(max-width:700px){.mark-grid{grid-template-columns:repeat(2,1fr)}.end-summary{grid-template-columns:repeat(2,1fr)}.history-row{grid-template-columns:95px 55px 1fr}}


.quick-note-section{margin-top:10px;padding:10px;border:1px solid #e4e9f1;border-radius:12px;background:#fafbfd}.quick-note-section.hidden{display:none}.quick-note-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.quick-note-head strong{font-size:12px}.quick-note-head span{font-size:10px;color:var(--muted)}.quick-note-grid{display:flex;flex-wrap:wrap;gap:7px}.quick-note-btn{border:1px solid #d8deea;background:#fff;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:750;cursor:pointer}.quick-note-btn:hover{background:#f1f5fb;border-color:#b9c6dd}.quick-note-btn.misconduct{color:#a5323b;background:#fff7f7;border-color:#efcdd0}.quick-note-btn.praise{color:#167047;background:#f4fbf7;border-color:#c9ead7}.mark-custom-row{display:flex;gap:8px;margin-top:8px}.mark-custom-row .textarea{flex:1}.student-stats-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:12px 0}.student-stat-card{border:1px solid #e4e9f1;border-radius:10px;background:#fff;padding:10px 6px;text-align:center}.student-stat-card b{display:block;font-size:20px;line-height:1.1}.student-stat-card span{font-size:11px;color:var(--muted)}.student-stat-card.total{background:#f2f6ff;border-color:#ccd9f4}.student-stat-events{display:flex;flex-direction:column;gap:7px;max-height:360px;overflow:auto}.student-stat-row{display:grid;grid-template-columns:120px 72px 1fr;gap:8px;align-items:center;border:1px solid #e8ecf3;background:#fff;border-radius:9px;padding:8px;font-size:11px}.student-stat-note{color:#667085}.stats-empty{text-align:center;color:var(--muted);padding:24px 10px;font-size:12px}

/* 班级总览 */
.overview-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.overview-card{border:1px solid #e3e8f0;border-radius:12px;background:#fff;padding:12px}.overview-card b{display:block;font-size:24px;line-height:1.1;margin-bottom:4px}.overview-card span{font-size:11px;color:var(--muted)}
.overview-card.primary{background:#f2f6ff;border-color:#cad7f2}.overview-card.warn{background:#fff8ec;border-color:#efd6a7}.overview-card.danger{background:#fff2f3;border-color:#efc9cd}.overview-card.ok{background:#eef9f3;border-color:#c8e7d5}
.overview-section{margin-top:16px}.overview-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.overview-section-head h3{font-size:14px;margin:0}.overview-section-head small{color:var(--muted)}
.trend-list{display:flex;flex-direction:column;gap:7px}.trend-row{display:grid;grid-template-columns:120px 1fr 170px;gap:10px;align-items:center;border:1px solid #e7ebf2;border-radius:10px;background:#fff;padding:8px 10px}.trend-date{font-size:11px;color:#596579}.trend-bars{display:flex;gap:4px;height:16px;align-items:center}.trend-bar{min-width:3px;height:9px;border-radius:999px}.trend-bar.late{background:#d99a2b}.trend-bar.misconduct{background:#c94d57}.trend-bar.praise{background:#3b9569}.trend-counts{font-size:10px;color:#667085;text-align:right;white-space:nowrap}
.overview-legend{display:flex;gap:12px;align-items:center;font-size:10px;color:#667085}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.legend-dot.late{background:#d99a2b}.legend-dot.misconduct{background:#c94d57}.legend-dot.praise{background:#3b9569}
.alert-list{display:flex;flex-direction:column;gap:8px}.overview-alert{display:flex;align-items:flex-start;gap:9px;border:1px solid #e6eaf1;border-radius:10px;padding:9px 10px;background:#fff}.overview-alert .alert-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#f4f6fa;flex:0 0 auto}.overview-alert strong{font-size:12px}.overview-alert p{margin:2px 0 0;font-size:11px;color:#667085;line-height:1.5}.overview-alert.danger{border-color:#efc9cd;background:#fff7f7}.overview-alert.warn{border-color:#efd6a7;background:#fffaf1}.overview-alert.device{border-color:#efd5b1;background:#fff9f0}.overview-alert.ok{border-color:#cee8d8;background:#f5fbf7}
.overview-note{margin-top:10px;padding:9px 10px;border-radius:9px;background:#f7f9fc;color:#667085;font-size:11px;line-height:1.55}
@media(max-width:900px){.overview-summary{grid-template-columns:repeat(2,1fr)}.trend-row{grid-template-columns:90px 1fr}.trend-counts{grid-column:1 / -1;text-align:left}}
@media(max-width:900px){.student-stats-summary{grid-template-columns:repeat(3,1fr)}.student-stat-row{grid-template-columns:95px 64px 1fr}}
