:root{--bg: #eef1f8;--bg-accent: #dfe6f7;--panel: #ffffff;--panel-border: #e2e6f0;--text: #1d2236;--text-dim: #6b7390;--accent: #5b6bff;--accent-hot: #00b596;--viewer-bg: #f4f6fc;--input-bg: #f6f8fd;--shadow: 0 10px 30px rgba(40, 54, 110, .1)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:radial-gradient(1200px 800px at 80% -10%,var(--bg-accent) 0%,var(--bg) 55%);min-height:100vh}.app{max-width:1100px;margin:0 auto;padding:clamp(18px,4vw,32px) clamp(14px,4vw,20px) 40px;display:flex;flex-direction:column;min-height:100vh}.header{text-align:center;margin-bottom:clamp(18px,4vw,28px)}.header h1{margin:0;font-size:clamp(1.7rem,6vw,3rem);letter-spacing:-.02em}.tagline{margin:6px 0 0;color:var(--text-dim);font-size:clamp(.95rem,3vw,1.05rem)}.layout{display:grid;grid-template-columns:360px 1fr;gap:24px;flex:1;align-items:start}@media (min-width: 821px){.viewer{height:min(72vh,640px)}}@media (max-width: 820px){.layout{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;padding:clamp(16px,4vw,22px);box-shadow:var(--shadow)}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field-label{font-size:.85rem;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.04em}input[type=text],input[type=number]{background:var(--input-bg);border:1px solid var(--panel-border);border-radius:10px;color:var(--text);font-size:1rem;padding:11px 13px;width:100%;transition:border-color .15s ease,box-shadow .15s ease}input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #5b6bff2e}#name{font-size:1.25rem;font-weight:600}.colour-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:30px;height:30px;border-radius:50%;border:2px solid #ffffff;background:var(--swatch);cursor:pointer;padding:0;box-shadow:0 0 0 1px var(--panel-border);transition:transform .1s ease,box-shadow .1s ease}.swatch:hover{transform:scale(1.1)}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}input[type=color]{width:44px;height:32px;padding:2px;border:1px solid var(--panel-border);border-radius:8px;background:var(--input-bg);cursor:pointer}.link-btn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.9rem;font-weight:600;padding:4px 0;margin-bottom:8px}.link-btn:hover{text-decoration:underline}.custom-fields{border:1px solid var(--panel-border);border-radius:12px;padding:14px 16px 2px;margin:4px 0 16px}.custom-fields legend{color:var(--text-dim);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:0 6px}.actions{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap}.primary-btn,.secondary-btn{flex:1 1 140px;border-radius:11px;font-size:1rem;font-weight:700;padding:13px 16px;cursor:pointer;border:1px solid transparent;transition:transform .08s ease,filter .15s ease,opacity .15s ease}.primary-btn{background:linear-gradient(135deg,var(--accent) 0%,#8a6cff 100%);color:#fff}.secondary-btn{background:#effff9;border-color:var(--accent-hot);color:var(--accent-hot)}.primary-btn:hover,.secondary-btn:hover:not(:disabled){filter:brightness(1.05)}.primary-btn:active,.secondary-btn:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}.status{min-height:1.2em;margin:14px 0 0;font-size:.9rem;color:var(--text-dim)}.status.error{color:#d13b54}.viewer{display:flex;flex-direction:column;padding:14px}.viewer-canvas{flex:1;min-height:clamp(280px,50vh,460px);border-radius:12px;overflow:hidden;background:radial-gradient(700px 500px at 50% 0%,#ffffff 0%,var(--viewer-bg) 80%);border:1px solid var(--panel-border);touch-action:none}.viewer-canvas canvas{display:block;max-width:100%}.hint{text-align:center;color:var(--text-dim);font-size:.82rem;margin:10px 0 2px}.footer{text-align:center;color:var(--text-dim);font-size:.82rem;margin-top:26px}