:root{--bg:#eef4ff;--card:#fff;--text:#1f2a44;--sub:#637192;--line:#9ab0df;--fixed:#eaf0ff;--bad:#ffd8d8}
*{box-sizing:border-box}
body{margin:0;font-family:"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
.app{max-width:1180px;margin:0 auto;padding:16px}.card{background:var(--card);border-radius:16px;box-shadow:0 10px 24px rgba(43,76,160,.12)}
.hero{padding:16px;margin-bottom:14px}.hero h1{margin:0 0 6px}.hero p{margin:0;color:var(--sub)}
.layout{display:grid;grid-template-columns:1fr 320px;gap:14px}
.board-wrap{padding:14px;display:flex;justify-content:center}
.board{display:grid;grid-template-columns:repeat(9,52px);grid-template-rows:repeat(9,52px);border:3px solid #6a84bd}
.cell{width:52px;height:52px;border:1px solid var(--line);text-align:center;font-size:1.3rem;font-weight:700;color:#21325b;outline:none}
.cell.fixed{background:var(--fixed)}.cell.bad{background:var(--bad)}
.cell:nth-child(3n){border-right:2px solid #6a84bd}
.cell.row-cut{border-bottom:2px solid #6a84bd}
.panel{padding:14px}.panel h2{margin-top:0}
.actions{display:grid;gap:8px;margin:10px 0}button,select{font:inherit}
button{border:0;border-radius:10px;padding:8px 12px;background:#4d71ff;color:#fff;font-weight:700;cursor:pointer}
button.ghost{background:#eaf0ff;color:var(--text)}
.status{min-height:42px;color:var(--sub);font-weight:700}
@media (max-width:980px){.layout{grid-template-columns:1fr}.board{grid-template-columns:repeat(9,38px);grid-template-rows:repeat(9,38px)}.cell{width:38px;height:38px;font-size:1rem}}