:root{
  --ink:#0f172a; --mut:#64748b; --line:#e2e8f0; --bg:#f1f5f9; --panel:#fff;
  --acc:#4f46e5; --accSoft:#eef2ff;
  --wts:#b45309; --exs:#0369a1; --gds:#047857; --none:#64748b;
  --m:#2563eb; --f:#db2777; --o:#7c3aed;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font:14px/1.45 system-ui,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ---------- header ---------- */
header{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap;z-index:20}
h1{font-size:16px;margin-right:4px;white-space:nowrap}
.vr{width:1px;height:22px;background:var(--line);margin:0 2px}
.grow{flex:1}
.btn{padding:6px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-size:13px;color:var(--ink);font-family:inherit}
.btn:hover{background:#f8fafc}
.btn:disabled{opacity:.35;cursor:default;background:#fff}
#undoBtn,#redoBtn{font-size:15px;line-height:1;padding:5px 10px}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.btn.primary:hover{background:#4338ca}
.btn.subtle{color:var(--mut)}
select.btn{padding:6px 8px}
#counts{font-size:12px;color:var(--mut);white-space:nowrap}
#counts.bad{color:#b91c1c;font-weight:600}

/* ---------- layout ---------- */
main{flex:1;display:flex;min-height:0}
aside{width:330px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
#sideHead{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 4px}
.secTitle{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--mut);text-transform:uppercase}
.linkBtn{border:0;background:none;color:var(--mut);font-size:11px;cursor:pointer;text-decoration:underline}
.linkBtn:hover{color:#b91c1c}
#addBox{padding:6px 12px 10px;border-bottom:1px solid var(--line)}
#initialsInput{width:100%;resize:vertical;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:13px/1.4 inherit;margin-bottom:6px}
#initialsInput:focus{outline:2px solid var(--accSoft);border-color:var(--acc)}
#addStudents{width:100%}
#rosterWrap{flex:1;overflow:auto;padding:10px 12px}
.hint{border:1.5px dashed #cbd5e1;border-radius:10px;padding:14px;color:var(--mut);font-size:12.5px;text-align:center;background:#f8fafc}

/* ---------- student cards ---------- */
.card{border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.cardTop{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.badge{min-width:42px;height:30px;padding:0 8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;border:2.5px solid transparent;cursor:grab;user-select:none}
.att-WTS{background:var(--wts)} .att-EXS{background:var(--exs)} .att-GDS{background:var(--gds)} .att-none{background:var(--none)}
.g-M{border-color:var(--m)} .g-F{border-color:var(--f)} .g-O{border-color:var(--o)} .g-none{border-color:transparent}
.seatInfo{font-size:11px;color:var(--mut);flex:1}
.seatInfo.unseated{color:#b45309;font-weight:600}
.iconBtn{border:0;background:none;cursor:pointer;color:#cbd5e1;font-size:16px;line-height:1;padding:2px 4px;border-radius:6px}
.iconBtn:hover{color:#b91c1c;background:#fef2f2}
.seg,.pills{display:flex;gap:4px;margin-bottom:6px}
.seg button,.pill{flex:1;font-size:11px;font-weight:600;padding:3.5px 0;border:1px solid var(--line);background:#f8fafc;border-radius:6px;cursor:pointer;color:var(--mut);font-family:inherit}
.seg button:hover,.pill:hover{border-color:#94a3b8}
.seg button.on{color:#fff}
.sv-M.on{background:var(--m);border-color:var(--m)}
.sv-F.on{background:var(--f);border-color:var(--f)}
.sv-O.on{background:var(--o);border-color:var(--o)}
.sv-WTS.on{background:var(--wts);border-color:var(--wts)}
.sv-EXS.on{background:var(--exs);border-color:var(--exs)}
.sv-GDS.on{background:var(--gds);border-color:var(--gds)}
.pill.on{background:var(--acc);border-color:var(--acc);color:#fff}
.pills{margin-bottom:6px}
.nnRow{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.nnTag{font-size:11px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:1.5px 3px 1.5px 7px;border-radius:6px;display:inline-flex;gap:2px;align-items:center;font-weight:600}
.nnTag button{border:0;background:none;color:#f87171;cursor:pointer;font-size:13px;line-height:1;padding:0 3px}
.nnTag button:hover{color:#b91c1c}
.nnAdd{font-size:11px;border:1px dashed #cbd5e1;background:none;border-radius:6px;padding:2.5px 7px;color:var(--mut);cursor:pointer;font-family:inherit}
.nnAdd:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- legend ---------- */
#legend{border-top:1px solid var(--line);padding:9px 12px;font-size:11px;color:var(--mut);line-height:1.9;background:#f8fafc}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 3px 0 8px;vertical-align:-1px}
.ring{display:inline-block;width:10px;height:10px;border-radius:50%;background:#fff;border:2.5px solid;margin:0 3px 0 8px;vertical-align:-1px}

/* ---------- canvas ---------- */
#canvasWrap{flex:1;overflow:auto;position:relative;touch-action:pan-x pan-y}
#zoomBox{width:2000px;height:1400px;transform-origin:0 0}
#canvas{position:relative;width:2000px;height:1400px;background-image:radial-gradient(circle,#cbd5e1 1px,transparent 1.2px);background-size:20px 20px}
#zoomCtrls{position:absolute;right:18px;bottom:16px;display:flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 14px rgba(15,23,42,.14);padding:4px;z-index:70}
#zoomCtrls .btn{padding:4px 10px;font-size:13px;border-color:transparent}
#zoomPct{min-width:56px;font-variant-numeric:tabular-nums;color:var(--mut);font-size:12px}
#zoomCtrls .sep{width:1px;background:var(--line);margin:3px 1px}
#panTool.on{background:var(--acc);border-color:var(--acc);color:#fff}
#canvasWrap.panReady{cursor:grab}
#canvasWrap.panning,#canvasWrap.panning .desk,#canvasWrap.panning .tab,#canvasWrap.panning .floater{cursor:grabbing}
#frontBanner{position:absolute;left:0;right:0;top:0;height:34px;background:linear-gradient(to bottom,#e0e7ff,#eef2ffcc);border-bottom:1.5px dashed #a5b4fc;color:#4338ca;font-size:12px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:600px;padding:0 60px;pointer-events:none;white-space:nowrap}
#canvasHint{position:absolute;left:130px;top:130px;width:470px;pointer-events:none}

/* ---------- desks ---------- */
.desk{position:absolute;width:80px;height:80px;background:#fff;border:1.5px solid #cbd5e1;border-radius:10px;box-shadow:0 1px 3px rgba(15,23,42,.08);cursor:grab;touch-action:none}
.desk.dragging{cursor:grabbing;box-shadow:0 10px 24px rgba(15,23,42,.2);z-index:40}
.desk .del{position:absolute;inset:0;margin:auto;width:26px;height:26px;border:0;border-radius:50%;background:none;color:#cbd5e1;font-size:16px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}
.desk:hover .del{display:flex}
.desk .del:hover{background:#fef2f2;color:#b91c1c}
.desk.selected{border-color:var(--acc);box-shadow:0 0 0 2.5px #c7d2fe,0 1px 3px rgba(15,23,42,.08)}
.desk .dname{position:absolute;inset:12px;display:flex;align-items:center;justify-content:center;font-size:11.5px;line-height:1.15;font-weight:700;color:#64748b;text-align:center;overflow:hidden;pointer-events:none;overflow-wrap:anywhere;hyphens:auto}
.desk:hover .dname{opacity:.2}
.nameIn{position:absolute;z-index:80;width:120px;padding:3px 6px;border:1.5px solid var(--acc);border-radius:6px;font:600 11px/1.3 inherit;text-align:center;box-shadow:0 4px 12px rgba(15,23,42,.18)}
#marquee{position:absolute;border:1.5px dashed var(--acc);background:rgba(79,70,229,.08);border-radius:4px;z-index:50;pointer-events:none}
#selBarWrap{position:sticky;top:10px;left:10px;height:0;z-index:60;display:none}
#selBar{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px rgba(15,23,42,.14);padding:5px 6px 5px 12px;font-size:12.5px;margin-left:10px}
#selBar .btn{padding:4px 9px;font-size:12px}
#selBar .btn.danger{color:#b91c1c;border-color:#fecaca}
#selBar .btn.danger:hover{background:#fef2f2}
.countBadge{background:var(--accSoft);color:var(--acc);border-radius:10px;padding:1px 8px;font-size:11px;font-weight:700;margin-left:4px;vertical-align:1px}
.tab .lock{position:absolute;top:-9px;right:-10px;font-size:10px;pointer-events:none;text-shadow:0 1px 2px rgba(15,23,42,.35)}
#vio.ok{border-color:#86efac}
#vio.ok #vioHead{background:#f0fdf4;border-bottom-color:#bbf7d0}
#vio.ok #vioTitle{color:#166534}
.side{position:absolute;z-index:2;cursor:pointer}
.side.top{left:9px;right:9px;top:-2px;height:13px}
.side.bottom{left:9px;right:9px;bottom:-2px;height:13px}
.side.left{top:9px;bottom:9px;left:-2px;width:13px}
.side.right{top:9px;bottom:9px;right:-2px;width:13px}
.side::after{content:"";position:absolute;background:transparent;border-radius:4px;transition:background .12s}
.side.top::after{left:0;right:0;top:4px;height:5px}
.side.bottom::after{left:0;right:0;bottom:4px;height:5px}
.side.left::after{top:0;bottom:0;left:4px;width:5px}
.side.right::after{top:0;bottom:0;right:4px;width:5px}
.side:hover::after{background:#c7d2fe}
.side.on::after{background:var(--acc)}
.side.on:hover::after{background:#818cf8}

/* ---------- seat tabs ---------- */
.tab{position:absolute;width:40px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#fff;cursor:pointer;z-index:3;border:2.5px solid transparent;user-select:none;box-shadow:0 1px 2px rgba(15,23,42,.12)}
.tab[data-side=top]{left:50%;transform:translateX(-50%);top:-40px}
.tab[data-side=bottom]{left:50%;transform:translateX(-50%);bottom:-40px}
.tab[data-side=left]{top:50%;transform:translateY(-50%);left:-50px}
.tab[data-side=right]{top:50%;transform:translateY(-50%);right:-50px}
.tab.empty{background:#fff;border:2px dashed #94a3b8;color:#94a3b8;box-shadow:none}
.tab.over{outline:3px solid var(--acc);outline-offset:2px}

/* ---------- floating menu ---------- */
#menu{position:fixed;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(15,23,42,.18);padding:4px;max-height:320px;overflow:auto;min-width:175px;z-index:1000;display:none}
.mItem{display:flex;justify-content:space-between;gap:12px;width:100%;padding:6px 10px;border:0;background:none;border-radius:6px;cursor:pointer;font-size:13px;align-items:center;text-align:left;font-family:inherit}
.mItem:hover{background:var(--accSoft)}
.mItem small{color:var(--mut);font-size:11px}
.mItem.danger{color:#b91c1c;font-weight:600}
.mDiv{height:1px;background:var(--line);margin:4px 6px}

/* ---------- violations panel ---------- */
#vio{position:fixed;right:16px;bottom:16px;width:370px;max-height:45vh;overflow:auto;background:#fff;border:1px solid #fcd34d;border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.18);display:none;z-index:100}
#vioHead{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:#fffbeb;border-bottom:1px solid #fde68a;border-radius:12px 12px 0 0;position:sticky;top:0}
#vioTitle{font-size:13px;font-weight:700;color:#92400e}
#vioList{list-style:none;padding:8px 12px;font-size:12.5px;color:#475569}
#vioList li{padding:4px 0;border-bottom:1px dashed #f1f5f9}
#vioList li:last-child{border-bottom:0}

/* ---------- toasts ---------- */
#toasts{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:1100;pointer-events:none}
.toast{background:#0f172a;color:#fff;padding:8px 16px;border-radius:10px;margin-top:6px;box-shadow:0 8px 20px rgba(15,23,42,.25);font-size:13px;opacity:.97;transition:opacity .3s,transform .3s;max-width:560px;text-align:center}
.toast.warn{background:#b45309}
.toast.err{background:#b91c1c}
.toast.bye{opacity:0;transform:translateY(8px)}

/* ---------- floaters, work-with tags, toggles ---------- */
.floater{position:absolute;z-index:25;min-width:42px;height:30px;padding:0 8px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;border:2.5px solid transparent;cursor:grab;box-shadow:0 4px 10px rgba(15,23,42,.28);user-select:none}
.wwTag{font-size:11px;background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:1.5px 3px 1.5px 7px;border-radius:6px;display:inline-flex;gap:2px;align-items:center;font-weight:600}
.wwTag button{border:0;background:none;color:#4ade80;cursor:pointer;font-size:13px;line-height:1;padding:0 3px}
.wwTag button:hover{color:#15803d}
.toggleRow{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--mut);cursor:pointer;user-select:none}
.toggleRow input{accent-color:var(--acc);margin:0}
.toggleRow em{font-style:normal;margin-left:auto;font-size:11px;font-weight:600}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(79,70,229,.55)}100%{box-shadow:0 0 0 16px rgba(79,70,229,0)}}
.pulse{animation:pulseRing .8s ease-out 2}

/* ---------- print ---------- */
@page{size:landscape}
@media print{
  header,aside,#vio,#toasts,#menu,#canvasHint,#selBarWrap,#marquee,#zoomCtrls,.desk .del{display:none !important}
  #zoomBox{transform:none !important;width:2000px !important;height:1400px !important}
  .desk .dname{color:#475569}
  body{overflow:visible;height:auto}
  main,#canvasWrap{overflow:visible;display:block}
  #canvas{transform:scale(.62);transform-origin:top left;background-image:none}
}