:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;background:#f6f8fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}.app-shell{background:linear-gradient(#ffffffb8,#f6f8fbf0),#f6f8fb;min-height:100vh;padding:24px}.workspace{grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:24px;width:min(1180px,100%);margin:0 auto;display:grid}.controls,.preview-zone{min-width:0}.controls{background:#ffffffe0;border:1px solid #dce3ed;border-radius:8px;flex-direction:column;gap:16px;padding:22px;display:flex;box-shadow:0 22px 60px #40506b1f}.brand{align-items:center;gap:14px;padding-bottom:6px;display:flex}.brand-mark{background:linear-gradient(#ec4899 0 0) 50%/10px 10px no-repeat,#fff;border:10px solid #172033;border-radius:8px;flex:none;width:44px;height:44px;box-shadow:inset 0 0 0 4px #fff}h1,h2,h3,p{margin:0}h1{font-size:1.5rem;line-height:1.05}.brand p{color:#637083;margin-top:4px;font-size:.92rem;line-height:1.35}.field-group,.panel{flex-direction:column;gap:12px;display:flex}.field-group label,.panel-title{color:#334155;align-items:center;gap:8px;font-size:.88rem;font-weight:760;display:flex}.label-icon,[data-icon]{justify-content:center;align-items:center;display:inline-flex}.field-group input[type=url]{color:#111827;background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;min-height:46px;padding:0 14px}.field-group input[type=url]:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb24}.panel{background:#fbfdff;border:1px solid #e2e8f0;border-radius:8px;padding:16px}.color-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.color-grid label{color:#475569;gap:8px;font-size:.78rem;font-weight:720;display:grid}input[type=color]{background:#fff;border:1px solid #cbd5e1;border-radius:8px;width:100%;height:38px;padding:3px}.hex-input{color:#172033;text-transform:uppercase;background:#fff;border:1px solid #cbd5e1;border-radius:8px;width:100%;min-height:36px;padding:0 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.8rem;font-weight:760}.hex-input:focus{border-color:#177c46;outline:none;box-shadow:0 0 0 3px #177c4624}.preset-row{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.swatch{background:radial-gradient(circle at 74% 50%, var(--swatch-c) 0 18%, transparent 19%), linear-gradient(90deg, var(--swatch-a) 0 50%, var(--swatch-b) 50% 100%);border:1px solid #cbd5e1;border-radius:8px;min-height:34px}.segmented{background:#eef2f7;border-radius:8px;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;display:grid}.segmented button{color:#475569;background:0 0;border:0;border-radius:6px;min-height:34px;font-size:.82rem;font-weight:760}.segmented button.active{color:#111827;background:#fff;box-shadow:0 1px 5px #0f172a1f}.slider-row{color:#475569;grid-template-columns:88px minmax(0,1fr) 52px;align-items:center;gap:10px;font-size:.84rem;font-weight:720;display:grid}input[type=range]{accent-color:#2563eb;width:100%}output{color:#172033;text-align:right}.file-drop{color:#475569;text-align:center;background:#fff;border:1px dashed #94a3b8;border-radius:8px;place-items:center;gap:8px;min-height:98px;padding:16px;font-weight:720;display:grid}.file-drop input{opacity:0;pointer-events:none;block-size:1px;inline-size:1px;position:absolute}.upload-icon{color:#2563eb;background:#dbeafe;border-radius:999px;width:38px;height:38px}.logo-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.logo-actions button,.preview-actions button{color:#172033;background:#fff;border:1px solid #cbd5e1;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:40px;padding:0 14px;font-weight:780;display:inline-flex}.check-row{color:#475569;align-items:center;gap:8px;font-size:.84rem;font-weight:720;display:inline-flex}.preview-zone{background:#fff;border:1px solid #dce3ed;border-radius:8px;grid-template-rows:auto minmax(360px,1fr) auto auto;gap:20px;padding:28px;display:grid;box-shadow:0 22px 60px #40506b1f}.preview-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.eyebrow{color:#2563eb;letter-spacing:0;text-transform:uppercase;font-size:.76rem;font-weight:820}h2{margin-top:3px;font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.05}.status-pill{color:#177c46;white-space:nowrap;background:#f0fdf4;border:1px solid #177c463d;border-radius:999px;align-items:center;gap:8px;min-height:38px;padding:0 12px;font-size:.84rem;font-weight:820;display:inline-flex}.qr-stage{background-color:#0000;background-image:linear-gradient(45deg,#f8fafc 25%,#0000 25%),linear-gradient(-45deg,#f8fafc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f8fafc 75%),linear-gradient(-45deg,#0000 75%,#f8fafc 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:20px 20px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border:1px solid #e2e8f0;border-radius:8px;place-items:center;min-height:360px;padding:28px;display:grid}.qr-code{background:#fff;border:1px solid #e2e8f0;border-radius:8px;place-items:center;max-width:100%;padding:12px;display:grid}.qr-code svg,.qr-code canvas{width:min(100%, var(--qr-size,320px));height:auto;display:block}.preview-actions{flex-wrap:wrap;gap:10px;display:flex}.preview-actions .primary{color:#fff;background:#172033;border-color:#172033}.scan-notes{padding-top:4px}.scan-notes h3{font-size:1rem}.scan-notes ul{color:#475569;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin:10px 0 0;padding-left:18px;line-height:1.45;display:grid}@media (width<=880px){.app-shell{padding:14px}.workspace{grid-template-columns:1fr}.preview-zone{grid-template-rows:auto auto auto auto}}@media (width<=540px){.controls,.preview-zone{padding:16px}.brand{align-items:flex-start}.color-grid,.preset-row,.segmented,.scan-notes ul{grid-template-columns:1fr}.slider-row{grid-template-columns:1fr;gap:6px}output{text-align:left}.preview-header{flex-direction:column;align-items:flex-start}.qr-stage{min-height:280px;padding:14px}}