:root {
  --bg: #0b1020;
  --panel: #0f172a;
  --accent: #0ea5a4;
  --accent-2: #22d3ee;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --danger: #ef4444;
  --ok: #22c55e;
  --cell: #0b1229;
  --cell-alt: #0e1430;
  --cell-fixed: #0b1f2a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  background: radial-gradient(1000px 600px at 10% -10%, #1f2937 0%, transparent 50%),
              radial-gradient(800px 500px at 90% 0%, #0b2a2a 0%, transparent 60%),
              var(--bg);
  color: var(--text);
}

.app-header, .app-footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}
.app-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
}
.app-header h1 { margin: 0; font-weight: 700; letter-spacing: 0.5px; }
.controls, .status { display: flex; gap: 8px; align-items: center; }

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.board {
  width: min(96vw, 640px);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  background: linear-gradient(180deg, #0d162b, #0b1229);
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.04);
  margin: 0 auto;
}

.cell {
  display: grid;
  place-items: center;
  font-size: clamp(16px, 4.2vw, 28px);
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.07);
  background: var(--cell);
  color: var(--text);
  user-select: none;
  cursor: pointer;
  position: relative;
}
.cell:nth-child(odd) { background: var(--cell-alt); }
.cell.fixed { background: var(--cell-fixed); color: #cbd5e1; cursor: default; }
.cell.selected { outline: 2px solid var(--accent-2); z-index: 1; }
.cell.error { background: rgba(239, 68, 68, 0.15); }
.cell.conflict { background: rgba(250, 204, 21, 0.15); }

/* 3x3 边框 */
.cell { box-shadow: inset 0 0 0 0 transparent; }
.cell[data-row="0"], .cell[data-row="3"], .cell[data-row="6"] { box-shadow: 0 -2px 0 0 var(--accent) inset; }
.cell[data-col="0"], .cell[data-col="3"], .cell[data-col="6"] { box-shadow: -2px 0 0 0 var(--accent) inset; }
.cell[data-row="8"] { box-shadow: 0 2px 0 0 var(--accent) inset; }
.cell[data-col="8"] { box-shadow: 2px 0 0 0 var(--accent) inset; }

.numpad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 640px; margin: 0 auto; }
.num-key {
  padding: 10px 0;
  font-size: 18px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
}

button.primary { background: linear-gradient(180deg, #0ea5a4, #0284c7); color: white; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,0.15); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
button.danger { background: #7f1d1d; color: #fecaca; border: 1px solid #ef4444; padding: 8px 12px; border-radius: 8px; cursor: pointer; }

dialog { border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; background: var(--panel); color: var(--text); padding: 16px; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.stats-list { max-height: 50vh; overflow: auto; display: grid; gap: 8px; }
.stat-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; background: #0b1328; }
.badge { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); font-size: 12px; color: #cbd5e1; }
.badge.ok { border-color: var(--ok); color: #bbf7d0; }
.badge.bad { border-color: var(--danger); color: #fecaca; }

.app-footer { text-align: center; color: var(--muted); }

@media (min-width: 768px) {
  .numpad { grid-template-columns: repeat(10, 1fr); }
}