* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1a1a1a;
  background: #f8fafc;
}

header {
  padding: 14px 18px;
  background: #0f172a;
  color: #fff;
}
header h1 { margin: 0; font-size: 20px; }
.tag { margin: 6px 0 0; font-size: 13px; color: #cbd5e1; }

main { max-width: 1100px; margin: 0 auto; padding: 16px; }

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab {
  padding: 8px 18px; border: 1px solid #cbd5e1; background: #fff;
  border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.tab.active { background: #0f172a; color: #fff; border-color: #0f172a; }

.workspace { display: flex; gap: 16px; flex-wrap: wrap; }
.left { flex: 1 1 300px; min-width: 280px; }
.right { flex: 2 1 420px; min-width: 280px; }

.drop {
  border: 2px dashed #cbd5e1; border-radius: 12px; padding: 26px 16px;
  text-align: center; background: #fff; cursor: pointer; font-size: 14px;
}
.drop.hover { border-color: #0f172a; background: #f1f5f9; }
.hint { margin: 8px 0 0; color: #475569; font-size: 12px; word-break: break-all; }

.controls { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.ctl { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.ctl .val { font-weight: 400; color: #475569; }
.ctl .row { display: flex; align-items: center; gap: 8px; }
.ctl input[type=range] { width: 100%; }
.ctl.hidden, .hidden { display: none; }

button { font-family: inherit; }
.link {
  border: none; background: none; color: #2563eb; cursor: pointer;
  padding: 0; font-size: 14px; text-decoration: underline;
}
.mini {
  border: 1px solid #cbd5e1; background: #fff; border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-size: 12px;
}
.primary {
  display: inline-block; text-align: center; background: #16a34a; color: #fff;
  padding: 11px 16px; border: none; border-radius: 8px; cursor: pointer;
  font-weight: 700; font-size: 14px; text-decoration: none; width: 100%;
}
.primary:disabled { opacity: .5; cursor: not-allowed; }

.canvas-wrap {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  min-height: 260px; border: 1px solid #cbd5e1; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; overflow: auto;
}
#preview { max-width: 100%; height: auto; display: block; }
.note { font-size: 12px; color: #64748b; margin: 10px 2px 0; }

.status { font-size: 12px; color: #475569; min-height: 16px; margin: 0; }

@media (max-width: 640px) {
  .workspace { flex-direction: column; }
}