.sudoku-area { max-width:560px; margin:0 auto; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.diff-group, .tool-group { display:flex; flex-wrap:wrap; gap:7px; }
.statusline { display:flex; align-items:center; justify-content:space-between; min-height:26px; margin-bottom:10px; font-size:13px; color:var(--ink); }
.statusline .hint { color:var(--muted); }
.statusline b { color:var(--ink); }
.sudoku-board { display:grid; grid-template-columns:repeat(9,1fr); border:2px solid var(--ink); width:100%; max-width:520px; margin:0 auto; background:var(--panel); }
.sudoku-board .cell { aspect-ratio:1; border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; font-size:clamp(16px,3.4vw,26px); font-weight:700; cursor:pointer; user-select:none; position:relative; }
.sudoku-board .cell.br { border-right:2px solid var(--ink); }
.sudoku-board .cell.bb { border-bottom:2px solid var(--ink); }
.sudoku-board .cell.given { font-weight:800; }
.sudoku-board .cell.selected { background:var(--bluewash); box-shadow:inset 0 0 0 2px var(--blue); }
.sudoku-board .cell.same { background:var(--bluewash); }
.sudoku-board .cell.conflict { color:#c62828 !important; }
.sudoku-board .cell.error { color:#c62828 !important; }
.sudoku-board .cell.finished { color:var(--cyan); }
.sudoku-board .cell .notes { display:grid; grid-template-columns:repeat(3,1fr); position:absolute; inset:2px; font-size:clamp(7px,1.4vw,10px); font-weight:600; color:var(--muted); }
.sudoku-board .cell .notes span { display:flex; align-items:center; justify-content:center; }
.numpad { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; max-width:520px; margin:16px auto 0; }
.numpad .num { height:46px; border:1px solid var(--rule); background:var(--panel); color:var(--ink); font-size:18px; font-weight:800; }
.numpad .num:hover { border-color:var(--blue); color:var(--blue); }
.numpad .eraser { font-size:15px; }
.center { text-align:center; }
@media (max-width:560px) { .toolbar { justify-content:center; } .statusline { font-size:12px; } }