* { box-sizing: border-box; }
:root {
  --page:#111827;
  --panel:#1f2937;
  --text:#f9fafb;
  --muted:#9ca3af;
  --border:#374151;
}
body {
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg,#111827,#0b1020);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.wrap {
  width:min(1200px, calc(100% - 32px));
  margin:32px auto;
}
h1 { margin:0 0 6px; font-size:30px; }
.sub { color:var(--muted); margin:0 0 24px; }
.layout {
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.controls {
  background:rgba(31,41,55,.92);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  position:sticky;
  top:20px;
}
.field { margin-bottom:18px; }
label {
  display:block;
  margin-bottom:7px;
  font-size:14px;
  font-weight:700;
}
input, textarea {
  width:100%;
  background:#0f172a;
  color:white;
  border:1px solid #475569;
  border-radius:10px;
  font:inherit;
  padding:11px 12px;
  outline:none;
}
input:focus, textarea:focus {
  border-color:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.15);
}
input[type="file"] {
  padding:9px;
  font-size:13px;
}
textarea {
  min-height:150px;
  resize:vertical;
  line-height:1.45;
}
.hint {
  color:var(--muted);
  font-size:12px;
  margin-top:6px;
  line-height:1.4;
}
.clear-button {
  margin-top:8px;
  width:100%;
  border:1px solid #475569;
  border-radius:9px;
  background:#182235;
  color:#e5e7eb;
  font:inherit;
  font-size:13px;
  font-weight:700;
  padding:8px 10px;
  cursor:pointer;
}
.clear-button:disabled {
  opacity:.4;
  cursor:not-allowed;
}
.download-button {
  width:100%;
  border:0;
  border-radius:11px;
  background:#f8fafc;
  color:#111827;
  font:inherit;
  font-weight:800;
  padding:12px 14px;
  cursor:pointer;
  box-shadow:0 5px 16px rgba(0,0,0,.2);
  transition:transform .12s, background-color .12s;
}
.download-button:hover { background:#e2e8f0; }
.download-button:active { transform:translateY(1px); }
.preview-shell { min-width:0; }
.preview-label {
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  margin:0 0 10px 2px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.stage {
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:
    linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
    linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
    linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
  background-size:24px 24px;
  background-position:0 0,0 12px,12px -12px,-12px 0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #303030;
}
.supa {
  width:min(850px,100%);
  border-radius:28px;
  overflow:hidden;
  border:5px solid #00796b;
  box-shadow:0 14px 40px rgba(0,0,0,.3);
  transition:background-color .18s, border-color .18s;
}
.supa-head {
  min-height:120px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 28px;
  background:#11a98f;
  transition:background-color .18s;
}
.avatar {
  width:76px;
  height:76px;
  border-radius:50%;
  border:5px solid rgba(0,0,0,.45);
  flex:none;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#e9eef5;
  color:#253042;
  font-size:34px;
  font-weight:800;
  text-transform:uppercase;
}
.avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.meta {
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  align-items:baseline;
}
.name, .price {
  font-weight:800;
  line-height:1.05;
}
.name { font-size:clamp(25px,4vw,38px); }
.price { font-size:clamp(22px,3.5vw,34px); }
.supa-body {
  min-height:170px;
  padding:34px 40px 38px;
  background:#22e0bd;
  transition:background-color .18s;
}
.message {
  color:#071713;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:clamp(25px,3.4vw,39px);
  line-height:1.22;
}
.empty { opacity:.45; }
.tier-pill {
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#0f172a;
  color:#cbd5e1;
  border:1px solid #334155;
  margin-top:6px;
}
.legend {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:5px;
  margin-top:12px;
}
.legend span {
  height:7px;
  border-radius:999px;
}
.footer-note {
  color:var(--muted);
  font-size:12px;
  margin-top:10px;
}
@media (max-width: 820px) {
  .layout { grid-template-columns:1fr; }
  .controls { position:static; }
  .stage { min-height:380px; padding:16px; }
  .supa-head { min-height:96px; padding:14px 18px; }
  .avatar { width:62px; height:62px; font-size:28px; }
  .supa-body { padding:24px 24px 28px; }
}