/* Page UI (the exported image is drawn via Canvas) */
:root { --ink:#111827; --muted:#6b7280; --border:#e5e7eb; --brand:#151822; }
*{ box-sizing: border-box; }
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--ink); margin:0; }
.container{ max-width: 960px; margin: 32px auto; padding: 0 16px; }
h1{ font-size:28px; margin:0 0 8px; }
p{ color:var(--muted); margin-top: 0; }
.panel{ border:1px solid var(--border); border-radius: 12px; padding: 16px; margin: 16px 0; background:#fff; }
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.field label{ display:block; font-weight:600; margin-bottom:6px; }
.field input{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; }
.controls{ display:flex; gap:12px; align-items:center; margin-top:8px; flex-wrap:wrap; }
button{ padding:10px 14px; border:0; border-radius:10px; background:var(--brand); color:#fff; cursor:pointer; }
button:hover{ filter:brightness(0.95); }
.copied{ color:#059669; font-weight:600; }
.canvas{ width:520px; height:auto; max-width:100%; border:1px dashed var(--border); border-radius:10px; background:#fafafa; }
.hint{ color:var(--muted); margin-top:8px; }
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
}