:root {

  --bg: #fbfbfb;

  --fg: #111;

  --muted: #666;

  --line: #e6e6e6;

  --occupied: #f0f0f0;

  --shadow: 0 10px 30px rgba(0,0,0,0.06);

  --radius: 14px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

}



* { box-sizing: border-box; }



body {

  margin: 0;

  background: var(--bg);

  color: var(--fg);

  font-family: var(--sans);

}



.wrap {

  max-width: 1100px;

  margin: 0 auto;

  padding: 28px 18px 60px;

}



.top {

  display: grid;

  gap: 8px;

  margin-bottom: 18px;

}



.title {

  font-size: 22px;

  letter-spacing: 0.5px;

}



.subtitle {

  font-size: 13px;

  color: var(--muted);

}



.status {

  font-family: var(--mono);

  font-size: 12px;

  color: var(--muted);

}



.grid {

  display: grid;

  grid-template-columns: repeat(10, minmax(0, 1fr));

  gap: 8px;

}



@media (max-width: 900px) {

  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }

}

@media (max-width: 640px) {

  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

}



.cell {

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: 10px 10px 9px;

  background: #fff;

  display: grid;

  gap: 8px;

  min-height: 74px;

  cursor: pointer;

  user-select: none;

}



.cell:hover { box-shadow: var(--shadow); }



.cell.occupied {

  background: var(--occupied);

  cursor: default;

  box-shadow: none;

}



.n {

  font-family: var(--mono);

  font-size: 12px;

  color: var(--muted);

}



.p {

  font-family: var(--mono);

  font-size: 12px;

  color: var(--fg);

}



.u {

  font-size: 12px;

  color: var(--muted);

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}



.badge {

  font-family: var(--mono);

  font-size: 11px;

  color: var(--muted);

}



.dialog {

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 18px;

  width: min(520px, calc(100vw - 24px));

  background: #fff;

}



.dialog::backdrop { background: rgba(0,0,0,0.25); }



.dialogForm { display: grid; gap: 12px; }



.dialogTitle {

  font-size: 16px;

  letter-spacing: 0.2px;

}



.dialogMeta {

  font-family: var(--mono);

  font-size: 12px;

  color: var(--muted);

}



.label {

  display: grid;

  gap: 6px;

  font-size: 12px;

  color: var(--muted);

}



.input {

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: 10px 12px;

  font-size: 14px;

  outline: none;

}



.input:focus { border-color: #cfcfcf; }



.row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

}



.btn {

  border: 1px solid var(--fg);

  background: var(--fg);

  color: #fff;

  padding: 10px 12px;

  border-radius: 12px;

  cursor: pointer;

  font-size: 13px;

}



.btn.ghost {

  background: transparent;

  color: var(--fg);

}



.error {

  font-size: 12px;

  color: #333;

  font-family: var(--mono);

}