*{box-sizing:border-box}body{color:#1f2937;overscroll-behavior:contain;background:#f4f7fb;margin:0;font-family:Segoe UI,PingFang SC,Microsoft YaHei,system-ui,sans-serif}#root{min-height:100dvh}.app{max-width:1440px;padding:16px;padding-bottom:max(16px, env(safe-area-inset-bottom));padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right));margin:0 auto}.top{margin-bottom:12px}.top h1{margin:0;font-size:30px}.top p{color:#4b5563;margin:8px 0 0}.layout{grid-template-columns:300px 1fr 260px;gap:12px;display:grid}.toolbar,.panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;height:fit-content;padding:12px}.toolbar section+section{margin-top:14px}h3{margin:0 0 8px;font-size:15px}.tool-row{gap:6px;display:flex}.tool-row.wrap{flex-wrap:wrap}button{cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:6px 10px}button.active{background:#dbeafe;border-color:#2563eb}button:disabled{opacity:.5;cursor:not-allowed}.palette-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.color-chip{aspect-ratio:1;border:2px solid #0000;border-radius:8px;width:100%}.color-chip.selected{border-color:#111827}.color-adder{justify-content:space-between;align-items:center;margin-top:8px;font-size:13px;display:flex}.canvas-wrap{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px}.board-shell{width:100%;max-width:860px;margin:0 auto}.board{aspect-ratio:1;touch-action:none;border:1px solid #d1d5db;width:100%;display:grid}.cell{border:1px solid #00000012;border-radius:0;width:100%;height:100%;padding:0}.card{border:1px solid #e5e7eb;border-radius:10px;padding:10px}.card+.card{margin-top:10px}.card p{margin:6px 0}.hidden-input{display:none}@media (width<=1100px){.layout{grid-template-columns:1fr}}@media (width<=480px){.app{padding:12px}.top h1{font-size:22px}.palette-grid{grid-template-columns:repeat(5,1fr)}}