:root { --ink:#1b1f24; --muted:#586069; --line:#d0d7de; --accent:#1f6feb; --bg:#f6f8fa; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:#fff; }
.site-header { padding:12px 16px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--ink); text-decoration:none; }
.container { max-width:1080px; margin:0 auto; padding:16px; }
h1 { margin:8px 0 12px; font-size:1.6rem; }
.lead { color:var(--muted); }
.catalog { list-style:none; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.card { border:1px solid var(--line); border-radius:8px; padding:16px; background:var(--bg); }
.card h2 { margin-top:0; }
.button, button { font:inherit; padding:10px 16px; border-radius:6px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block; min-height:44px; }
.button, #submit-btn { background:var(--accent); border-color:var(--accent); color:#fff; }
button:disabled { opacity:.5; cursor:not-allowed; }
button:focus-visible, input:focus-visible, textarea:focus-visible, canvas:focus-visible, .swatch input:focus-visible + span { outline:3px solid #0969da; outline-offset:2px; }

.designer { display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width: 860px) { .designer { grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr); } .designer h1 { grid-column:1 / -1; } .preview-pane { position:sticky; top:12px; align-self:start; } }
.stage { position:relative; background:linear-gradient(#eef2f6,#dfe5ec); border-radius:8px; overflow:hidden; aspect-ratio:5/3; }
.stage canvas { width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
.stage canvas[hidden] { display:none; }
.stage canvas:active { cursor:grabbing; }
.stage-status { position:absolute; left:8px; bottom:8px; right:8px; font-size:.9rem; color:var(--muted); pointer-events:none; }
.stage-status.error { color:#b42318; font-weight:600; }
.fallback-note { background:#fff8c5; border:1px solid #d4a72c; border-radius:6px; padding:8px 12px; }
.viewer-controls { display:flex; gap:8px; margin:8px 0; flex-wrap:wrap; }
.hint { color:var(--muted); font-size:.9rem; }

.form-pane { display:flex; flex-direction:column; gap:8px; }
label, legend { font-weight:600; margin-top:8px; }
.optional { font-weight:400; color:var(--muted); }
input[type=text], input[type=email], textarea { font:inherit; padding:10px; border:1px solid var(--line); border-radius:6px; width:100%; }
fieldset { border:0; padding:0; margin:0; }
.swatches { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.swatch { position:relative; }
.swatch input { position:absolute; opacity:0; inset:0; }
.swatch span { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:2px solid var(--line); border-radius:999px; min-height:44px; cursor:pointer; background:#fff; }
.swatch i { width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.35); display:inline-block; }
.swatch input:checked + span { border-color:var(--accent); box-shadow:0 0 0 2px #cfe2ff; }
.swatch input:disabled + span { opacity:.4; cursor:not-allowed; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.message { min-height:1.5em; }
.message.error { color:#b42318; }
.message.ok { color:#1a7f37; font-weight:600; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }