:root { --bg:#f3f6f8; --panel:#fff; --ink:#15232d; --muted:#70808a; --accent:#0e817c; --accent-dark:#08635f; --line:#dbe4e8; --danger:#b94b43; }
* { box-sizing:border-box; }
html { touch-action:manipulation; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif; }
.app { max-width:1500px; margin:auto; padding:clamp(20px,3vw,48px); }
header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.eyebrow { color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.16em; margin:0 0 8px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:6px; font-size:clamp(2rem,4vw,3.5rem); } h2 { margin:0; font-size:1.15rem; }.subtitle,.hint,.saved-at,.history-empty { color:var(--muted); }.saved-at { font-size:.9rem; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 8px 24px #19313b0a; }
.setup { display:grid; grid-template-columns:repeat(2,1fr); align-items:end; gap:14px; }
.setup .message { grid-column:1 / -1; margin-top:0; min-height:0; }.field { display:flex; flex-direction:column; gap:7px; }.field label { font-size:.82rem; font-weight:700; color:var(--muted); }.field input,.field select { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px; font:inherit; background:#fff; }.wide input { min-width:220px; }
.setup-divider { border-top:1px solid var(--line); margin:20px 0 0; }.setup-subtitle { font-size:.85rem; font-weight:700; color:var(--muted); margin:16px 0 4px; }.setup-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; }.setup-meta .wide { grid-column:span 2; }
.setup-cadres { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.overlay-backdrop { position:fixed; inset:0; background:rgba(10,20,25,.5); z-index:40; }
.floating-panel { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:50; width:min(560px,92vw); max-height:85vh; overflow:auto; box-shadow:0 24px 60px rgba(10,20,25,.35); }
button { border:0; border-radius:10px; padding:12px 16px; font:inherit; font-weight:750; cursor:pointer; transition:.15s; } button:active { transform:scale(.98); }.primary { color:#fff; background:var(--accent); }.primary:hover { background:var(--accent-dark); }.secondary { color:var(--accent-dark); background:#e6f3f1; }.danger { color:var(--danger); background:#fff0ee; }.text-button { color:var(--muted); background:none; padding:10px 0; }
.roster-panel .panel-title { margin-bottom:6px; }.hint-inline { font-size:.8rem; color:var(--muted); font-weight:600; }.roster-input { width:100%; min-height:110px; resize:vertical; border:1px solid var(--line); border-radius:10px; padding:12px; font:inherit; line-height:1.6; box-sizing:border-box; }.roster-panel .tool-row { justify-content:flex-start; gap:16px; margin-top:14px; }.roster-panel .message { min-height:0; margin-top:0; }
.workspace { display:grid; grid-template-columns:440px 1fr; gap:20px; align-items:start; }.sidebar { min-height:400px; }.panel-title { display:flex; justify-content:space-between; align-items:center; gap:12px; }.panel-title span { font-size:.8rem; color:var(--muted); }.title-actions { display:flex; align-items:center; gap:10px; }.history-actions { flex-wrap:wrap; justify-content:flex-end; }.icon-button { min-width:44px; padding:8px 14px; font-size:1.2rem; line-height:1; color:var(--accent-dark); background:#e6f3f1; }.icon-button.active { color:#fff; background:var(--accent); }.hint { font-size:.88rem; line-height:1.6; margin:16px 0; }.student-list { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; min-height:90px; align-content:start; }.student-item { display:flex; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#f5f8f9; }.student { flex:1; min-width:0; border-radius:0; background:transparent; color:var(--ink); padding:9px 6px; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.student.selected { color:#fff; background:var(--accent); }.student.assigned { color:var(--accent-dark); background:#e8f6f4; }.remove-student { padding:9px 7px; border-radius:0; color:var(--danger); background:transparent; border-left:1px solid var(--line); flex:0 0 auto; }.tool-row { display:flex; align-items:center; justify-content:space-between; margin-top:20px; }.actions { display:grid; gap:10px; margin-top:20px; }.message { min-height:24px; margin-top:14px; color:var(--danger); font-size:.86rem; }
.seating-panel { min-height:400px; }.panel-title.seating-title { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }.seating-title h2 { justify-self:start; }.seating-title .icon-button { justify-self:end; }.front-label { justify-self:center; border-bottom:3px solid var(--accent); padding:0 16px 5px; }.seat-grid { display:grid; gap:10px; margin:30px auto 20px; max-width:1050px; }.seat-grid-empty { text-align:center; margin:30px auto; max-width:520px; }.seat { min-height:84px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; border:2px dashed #c8d5da; border-radius:12px; background:#fbfcfc; color:var(--muted); font-size:clamp(1.25rem,2.8vw,2.2rem); font-weight:800; cursor:pointer; text-align:center; padding:4px; overflow:hidden; }.seat.assigned { border-style:solid; border-color:#83c7c2; background:#e8f6f4; color:var(--accent-dark); }.seat-no { font-size:clamp(1.1rem,2.4vw,1.9rem); line-height:1.15; }.seat-name { font-size:clamp(.72rem,1.5vw,1.05rem); font-weight:700; line-height:1.15; color:var(--accent-dark); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.02em; }.seat.fixed { box-shadow:inset 0 0 0 3px #f2b84b; }.seat.empty { border-style:solid; border-color:#e5e8e9; background:#eef0f1; color:#a0a9ad; font-size:1rem; }.legend { text-align:center; color:var(--muted); font-size:.82rem; }.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin:0 5px 0 14px; background:#c8d5da; }.dot:first-child { margin-left:0; }.dot.assigned { background:#83c7c2; }.dot.empty { background:#b8c0c3; }.history-panel { margin-top:20px; }.history-empty { margin:14px 0 0; font-size:.9rem; }.history-item { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
@media(max-width:850px) { .setup,.workspace { grid-template-columns:1fr; }.setup { align-items:stretch; }.wide input { min-width:0; } header { align-items:start; flex-direction:column; }.seat { min-height:55px; }.seating-title { grid-template-columns:1fr auto; row-gap:8px; }.seating-title h2 { order:1; }.seating-title .icon-button { order:2; }.seating-title .front-label { grid-column:1 / -1; justify-self:start; order:3; } }
button { min-height:48px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.seat { touch-action:none; -webkit-tap-highlight-color:transparent; }
.seat.dragging { opacity:.55; transform:scale(.96); }
@media (pointer:coarse) {
  .app { padding:20px; }
  .field input { min-height:52px; font-size:1.05rem; }
  .seat { min-height:100px; }
  .student { min-height:52px; font-size:1rem; }
  .remove-student { min-width:48px; min-height:52px; font-size:1.3rem; }
  .text-button { min-height:48px; }
}

.print-view { display:none; }
@page { size:A4 portrait; margin:12mm; }
@media print {
  main.app { display:none !important; }
  #printView { display:block !important; }
}
.print-view { font-family:"Noto Sans TC",sans-serif; color:#000; }
.print-header { margin-bottom:6mm; }
.print-title-line { font-size:15pt; font-weight:700; margin-bottom:4mm; text-align:center; }
.print-teacher-line { font-size:11pt; text-align:center; }
.print-cadre-wrap { width:calc(100% - 0.5mm); border:1px solid #000; }
.print-cadre-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:9pt; border-style:hidden; }
.print-cadre-table th, .print-cadre-table td { border:1px solid #000; text-align:center; padding:1.5mm 1mm; overflow:hidden; }
.print-cadre-table th { font-weight:700; }
.print-cadre-table td { height:6.5mm; }
.print-cadre-col-no { width:4mm; }
.print-cadre-table td.print-cadre-no { font-size:8pt; color:#000; border-right-style:hidden; text-align:right; padding:1.5mm 0; }
.print-cadre-table td.print-cadre-name { border-left-style:hidden; text-align:left; padding-left:1mm; }
.print-body { display:flex; align-items:flex-start; gap:8mm; }
.print-roster { width:fit-content; flex:0 0 auto; }
.print-roster-table { border-collapse:collapse; font-size:8pt; }
.print-roster-table th, .print-roster-table td { border:1px solid #000; padding:1.5px 6px; text-align:center; }
.print-roster-table th { font-weight:700; }
.print-seat-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:6mm; }
.print-seat-grid { display:grid; width:100%; border:1px solid #000; }
.print-seat { border-right:1px solid #000; border-bottom:1px solid #000; min-height:22mm; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.print-seat-no { font-size:13pt; font-weight:700; }
.print-seat-name { font-size:10pt; font-weight:500; margin-top:2mm; }
.print-seat-empty { color:#666; font-weight:400; font-size:9pt; }
.print-podium { display:inline-block; border:1px solid #000; padding:4mm 14mm; font-weight:700; font-size:12pt; }
.print-footer-row { position:relative; width:100%; text-align:center; }
.print-date { position:absolute; right:0; top:50%; transform:translateY(-50%); color:#000; font-size:11pt; }