:root{
  --bg:#f6f7fb; --surface:#fff; --border:#e5e7eb; --text:#1f2937; --muted:#6b7280;
  --primary:#2563eb; --shadow:0 10px 25px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text); font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.container{max-width:980px; margin:24px auto; padding:0 16px}
h1{margin:0 0 16px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow); margin:12px 0}
.row{display:flex; gap:8px; align-items:center}
.row.between{justify-content:space-between}
input{padding:10px 12px; border:1px solid var(--border); border-radius:10px; min-width:220px}
button{padding:10px 14px; border:1px solid var(--border); background:#f8fafc; border-radius:10px; cursor:pointer}
button:hover{background:#eef2ff}
.hint{color:var(--muted)}
.tables{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:12px}
.tableCard{border:1px solid var(--border); border-radius:12px; padding:12px}
.tableHeader{font-weight:600; margin-bottom:8px}
.slot{display:flex; justify-content:space-between; margin:6px 0; padding:8px; border:1px dashed var(--border); border-radius:10px; background:#fafafa}
.slot.free{background:#f0fdf4; border-color:#bbf7d0}
.slot.you{background:#e0f2fe; border-color:#bae6fd}
.board{display:grid; grid-template-columns:repeat(3,110px); gap:8px; margin-top:12px}
.cell{width:110px; height:110px; display:flex; align-items:center; justify-content:center; font-size:48px; border:1px solid var(--border); border-radius:12px; background:#fff; cursor:pointer; user-select:none}
.cell:hover{background:#f3f4f6}
.status{color:var(--muted); font-size:14px}
.badge{font-size:12px; padding:2px 6px; border-radius:8px; background:#eef2ff; border:1px solid #e5e7eb}