:root{ --blue:#2f4787; }
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{margin:0;background:#f7f7f9;color:#111;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.app{max-width:1100px;margin:28px auto;padding:0 16px}
h1{font-size:22px;margin:0 0 4px;font-weight:900}
.sub{margin:0 0 18px;color:#555}
.controls{background:#fff;border:1px solid #e8e8ec;border-radius:14px;padding:14px}
.row{margin-bottom:12px}
label{display:block;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#333;margin-bottom:6px}
select,input[type=text]{height:40px;border:1px solid #ddd;border-radius:10px;padding:0 10px;font-size:14px;width:100%;box-sizing:border-box}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.group-title{font-weight:800;font-size:12px;margin-bottom:6px;color:#444}
.sizes label{display:block;font-weight:600;margin:6px 0 0}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
button{height:40px;padding:0 14px;border-radius:10px;border:1px solid #ddd;background:#fff;font-weight:800;cursor:pointer}
button.primary{background:#111;color:#fff;border-color:#111}
.hint{font-size:12px;color:#666}
.stage{margin-top:14px;background:#fff;border:1px dashed #d2d2e0;border-radius:12px;padding:10px;text-align:center}
#canvas{max-width:100%;height:auto;background:#fff;border-radius:8px}
.stage-note{font-size:12px;color:#666;margin-top:8px}
#pad{width:100%}