:root {
  --bg: #f7f5ef;
  --panel: #ffffff;
  --ink: #06263F;
  --accent: #0B6E4F;
  --gold: #D9A853;
  --muted: #6b7c8e;
}
*{box-sizing:border-box;}
body {
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.app-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4.5rem;
}
h1 {
  font-size:1.4rem;
  margin:0 0 1rem 0;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.h2 {
  margin:.35rem 0 .25rem 0;
  font-size:1rem;
}
.muted {
  color:var(--muted);
}
.tiny {
  font-size:.67rem;
}
.stepper {
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  margin-bottom:1rem;
}
.step {
  background:rgba(255,255,255,.75);
  border:1px solid rgba(6,38,63,.04);
  border-radius:999px;
  padding:.4rem .9rem;
  font-size:.75rem;
  white-space:nowrap;
}
.step.active {
  background:var(--ink);
  color:#fff;
  font-weight:600;
}
.panel {
  background:var(--panel);
  border-radius:1rem;
  box-shadow:0 18px 40px rgba(0,0,0,.03);
  padding:1rem;
  margin-bottom:1rem;
}
label {
  display:block;
  font-size:.75rem;
  margin-bottom:.25rem;
  color:var(--muted);
}
input[type="file"],
input[type="text"],
textarea,
select {
  width:100%;
  border:1px solid rgba(0,0,0,.06);
  border-radius:.75rem;
  padding:.55rem .6rem;
  font-size:.9rem;
  background:#fff;
}
textarea {
  min-height:140px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  word-break:break-all;
}
button {
  border:none;
  border-radius:.75rem;
  background:var(--accent);
  color:#fff;
  padding:.55rem 1rem;
  font-size:.78rem;
  font-weight:600;
}
button.secondary {
  background:#eaeef1;
  color:#06263F;
}
.btn-small {
  font-size:.6rem;
  padding:.4rem .6rem;
}
.actions {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.75rem;
}
.svg-frame {
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:1rem;
  padding:.75rem;
  text-align:center;
}
.badge {
  display:inline-block;
  background:rgba(217,168,83,.05);
  border:1px solid rgba(217,168,83,.35);
  border-radius:999px;
  padding:.2rem .65rem;
  font-size:.6rem;
  color:var(--ink);
  margin-bottom:.5rem;
}

/* BG remover layout */
.bg-flex {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.bg-controls {
  flex:0 0 250px;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.bg-canvas-wrap {
  flex:1 1 280px;
  position:relative;
  background:#0c1622;
  border-radius:1rem;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#canvas {
  background:#1a2430;
  border-radius:.75rem;
  max-width:100%;
  touch-action:none;
  cursor:grab;
}
.color-preview {
  width:30px;
  height:30px;
  border-radius:.75rem;
  border:1px solid rgba(0,0,0,.1);
}
.row2 {
  display:flex;
  align-items:center;
  gap:.5rem;
}
.progress {
  background:rgba(0,0,0,.04);
  border-radius:.5rem;
  overflow:hidden;
  position:relative;
  height:10px;
}
.progress .bar {
  background:linear-gradient(90deg, #0B6E4F, #D9A853);
  width:0%;
  height:100%;
}
.progress-text {
  font-size:.58rem;
  margin-top:.3rem;
  color:var(--muted);
}
.hidden { display:none; }
.loading {
  font-size:.65rem;
  color:#fff;
  padding:.25rem .5rem;
  background:rgba(0,0,0,.25);
  border-radius:.35rem;
  margin-top:.35rem;
  display:inline-block;
}
.status {
  margin-top:.35rem;
}
.palette {
  display:flex;
  gap:.3rem;
  margin-top:.5rem;
}
.palette-color {
  width:26px;
  height:26px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.25);
  cursor:pointer;
}
.color-tooltip {
  position:absolute;
  top:10px;
  left:10px;
  background:rgba(0,0,0,.7);
  color:#fff;
  padding:.2rem .4rem;
  font-size:.6rem;
  border-radius:.35rem;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s;
}
.color-tooltip.show {
  opacity:1;
}
.footer-tiny {
  text-align:center;
  color:rgba(0,0,0,.3);
  font-size:.62rem;
  margin-top:2.5rem;
}
@media (max-width:680px) {
  .bg-flex { flex-direction:column; }
  .bg-controls { width:100%; }
  #canvas { width:100%; height:auto; }
}