:root{--ink: #1f2933;--muted: #667085;--paper: #f4efe6;--panel: #fffdf8;--line: #e4d8c4;--blue: #3b82f6;--blue-deep: #1d4ed8;--pink: #f472b6;--pink-deep: #db2777;--wood: #8b5e3c;--board: #1f4d3a;--shadow: 0 16px 40px rgba(88, 64, 32, .12)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;color:var(--ink);background:radial-gradient(circle at top left,rgba(255,255,255,.7),transparent 28%),linear-gradient(180deg,#f8f3ea,#efe4d2)}button,input,select{font:inherit}button{cursor:pointer}.app{min-height:100vh;padding:24px}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:20px}.eyebrow{margin:0 0 6px;color:var(--muted);font-size:13px;letter-spacing:.08em}h1{margin:0;font-size:32px;letter-spacing:.04em}.subtitle{margin:8px 0 0;color:var(--muted)}.toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.btn{border:1px solid transparent;border-radius:12px;padding:10px 14px;background:#fff;color:var(--ink);box-shadow:0 4px 12px #50381814}.btn.primary{background:#1f4d3a;color:#fff}.btn.ghost{background:transparent;border-color:var(--line);box-shadow:none}.layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.side{padding:18px;position:sticky;top:20px}.side-head,.chart-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.legend{display:flex;gap:10px}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-size:12px;background:#f7f1e6}.dot{width:10px;height:10px;border-radius:50%}.dot.male{background:var(--blue)}.dot.female{background:var(--pink)}.search-box{display:grid;gap:8px;margin:16px 0 12px}.search-row{display:grid;grid-template-columns:1fr auto;gap:8px}.gender-picks{display:grid;grid-template-columns:1fr 1fr;gap:8px}.gender-picks .btn.active.male{background:var(--blue);color:#fff}.gender-picks .btn.active.female{background:var(--pink);color:#fff}input,select{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}.hint{margin:0;color:var(--muted);font-size:12px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.stat{padding:10px;border-radius:14px;background:#f7f1e6}.stat b{display:block;font-size:18px}.stat span{color:var(--muted);font-size:12px}.roster{display:grid;gap:8px;max-height:calc(100vh - 360px);overflow:auto;padding-right:4px}.block{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:8px 10px;border:0;border-radius:14px;color:#fff;text-align:left;box-shadow:0 8px 16px #1f4d3a14}.block.male{background:linear-gradient(180deg,#60a5fa 0%,var(--blue) 100%)}.block.female{background:linear-gradient(180deg,#f9a8d4 0%,var(--pink) 100%)}.block.seated{opacity:.55}.block.match{outline:3px solid #f59e0b;outline-offset:2px;opacity:1}.block small{display:block;opacity:.86;font-size:11px}.classroom{padding:20px}.grid-controls{display:flex;gap:10px;align-items:center}.grid-controls label{display:grid;gap:4px;font-size:12px;color:var(--muted)}.grid-controls input{width:72px}.export-area{margin-top:16px}.blackboard{margin:0 auto 18px;max-width:520px;padding:14px 20px;border-radius:8px 8px 18px 18px;background:linear-gradient(180deg,#24614a 0%,var(--board) 100%);color:#e8f5ee;text-align:center;box-shadow:inset 0 0 0 6px #184233,0 10px 20px #1432242e}.blackboard strong{display:block;font-size:22px;letter-spacing:.4em}.blackboard span{font-size:12px;opacity:.8}.seat-grid{display:grid;gap:10px}.seat{min-height:78px;border:1px dashed #cbb89a;border-radius:16px;background:#fffaf1;padding:6px;transition:border-color .2s ease,transform .2s ease}.seat.over{border-color:#1f4d3a;background:#eef6f1;transform:translateY(-2px)}.seat-label{display:block;margin-bottom:4px;color:var(--muted);font-size:11px}.seat .block{width:100%;min-height:56px}.empty{min-height:56px;display:grid;place-items:center;color:#b7a48a;font-size:12px}.toast{margin-top:12px;color:#9a3412;font-size:13px}@media (max-width: 980px){.layout,.topbar{grid-template-columns:1fr;display:grid}.side{position:static}}