:root{
  --bg:#f3f4f1;
  --surface:#ffffff;
  --ink:#1e2a38;
  --accent:#b5482f;
  --muted:#707b85;
  --line:#dcdfda;
  --radius:10px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:980px;margin:0 auto;padding:28px 20px 60px;}
header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
  margin-bottom:28px;
  flex-wrap:wrap;
  gap:6px;
}
header h1{font-size:22px;font-weight:650;margin:0;letter-spacing:-0.01em;}
header span{font-size:12px;color:var(--muted);}
.grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;}
@media (max-width:760px){ .grid{grid-template-columns:1fr;} }

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;}
.preview-stage{display:flex;flex-direction:column;align-items:center;gap:14px;}
.crop-box{
  position:relative;width:280px;height:280px;
  background:repeating-conic-gradient(#eceeeb 0% 25%, #f6f7f5 0% 50%) 50% / 20px 20px;
  border-radius:4px;overflow:hidden;touch-action:none;cursor:grab;border:1px solid var(--line);
}
.crop-box:active{cursor:grabbing;}
.crop-box canvas{position:absolute;top:0;left:0;width:100%;height:100%;}
.guide{position:absolute;inset:0;pointer-events:none;}
.guide svg{width:100%;height:100%;}
.empty-state{
  width:280px;height:280px;border:1.5px dashed var(--line);border-radius:4px;
  display:flex;align-items:center;justify-content:center;color:var(--muted);
  font-size:13px;text-align:center;padding:20px;
}
.dims{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
.zoom-row{display:flex;align-items:center;gap:10px;width:280px;}
.zoom-row input[type=range]{flex:1;accent-color:var(--accent);}
.zoom-row label{font-size:12px;color:var(--muted);white-space:nowrap;}

.steps{display:flex;flex-direction:column;gap:18px;}
.step{display:flex;gap:12px;}
.step-num{
  flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);margin-top:2px;
}
.step.active .step-num{background:var(--ink);border-color:var(--ink);color:#fff;}
.step-body{flex:1;}
.step-title{font-size:14px;font-weight:600;margin-bottom:6px;}
.step-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:8px;}

button, .small-btn{
  font-family:inherit;font-size:13px;font-weight:600;border-radius:7px;
  border:1px solid var(--ink);background:var(--ink);color:#fff;padding:9px 14px;
  cursor:pointer;text-decoration:none;display:inline-block;
}
button.secondary{background:transparent;color:var(--ink);}
button:disabled{opacity:0.35;cursor:not-allowed;}
.small-btn{padding:6px 10px;font-size:12px;}

input[type=file]{display:none;}
.file-btn{
  display:inline-block;font-size:13px;font-weight:600;border:1px solid var(--line);
  background:#fff;color:var(--ink);padding:9px 14px;border-radius:7px;cursor:pointer;
}

.swatches{display:flex;gap:8px;}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;}
.swatch.selected{border-color:var(--accent);}

.status{font-size:12px;color:var(--accent);min-height:16px;text-align:center;max-width:280px;}

.output-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;}

.sheet-preview{margin-top:14px;border:1px solid var(--line);border-radius:4px;padding:8px;background:#fafaf8;}
.sheet-preview img{width:100%;display:block;border-radius:2px;}

.divider{height:1px;background:var(--line);margin:22px 0;}