.app{min-height:100vh;padding:2rem clamp(1rem,3vw,2.5rem) 3rem}.app-header{max-width:1200px;margin:0 auto 2rem}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:#475569;margin:0 0 .35rem;font-size:.8rem;font-weight:600}.app-header h1{margin:0;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.15}.lede{color:#475569;max-width:52ch;margin:.75rem 0 0}.app-layout{grid-template-columns:minmax(280px,380px) minmax(0,1fr);align-items:start;gap:1.5rem;max-width:1200px;margin:0 auto;display:grid}.controls-column{flex-direction:column;gap:1rem;display:flex}.panel{background:#fff;border:1px solid #d7e0ef;border-radius:14px;padding:1.1rem 1.2rem;box-shadow:0 10px 30px #0f172a0d}.panel-header h2{margin:0;font-size:1rem}.panel-header p{color:#64748b;margin:.35rem 0 .9rem;font-size:.88rem}.dropzone{cursor:pointer;background:#f8fafc;border:2px dashed #b8c7df;border-radius:12px;padding:1.25rem;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone-active{background:#eff6ff;border-color:#3b82f6}.dropzone-filled{border-style:solid}.dropzone-content{text-align:center;flex-direction:column;align-items:center;gap:.35rem;display:flex}.dropzone-icon{font-size:1.5rem}.muted{color:#64748b;font-size:.85rem}.text-button{color:#2563eb;cursor:pointer;background:0 0;border:none;margin-top:.25rem;padding:0;text-decoration:underline}.field{flex-direction:column;gap:.4rem;font-size:.9rem;display:flex}.field+.field{margin-top:.85rem}.field input[type=url],.field input[type=text],.field input[type=search],.field select{background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:.65rem .75rem}.field input[type=url]:focus,.field input[type=text]:focus,.field input[type=search]:focus,.field select:focus{border-color:#3b82f6;outline:2px solid #93c5fd}.range-field input[type=range]{accent-color:#2563eb;width:100%}.field-error{color:#b91c1c;font-size:.82rem}.primary-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#1d4ed8,#2563eb);border:none;border-radius:10px;width:100%;padding:.85rem 1rem;font-weight:600;transition:opacity .15s,transform .15s}.primary-button:hover:not(:disabled){transform:translateY(-1px)}.primary-button:disabled{opacity:.55;cursor:not-allowed}.error-banner{color:#b91c1c;background:#fef2f2;border-radius:8px;margin:.75rem 0 0;padding:.65rem .75rem;font-size:.88rem}.preview-panel{position:sticky;top:1.5rem}.preview-frame{background:#0f172a;border-radius:12px;justify-content:center;align-items:center;min-height:420px;display:flex;overflow:hidden}.preview-placeholder{color:#cbd5e1;text-align:center;max-width:28ch;padding:2rem}.preview-document{width:100%;line-height:0;position:relative}.preview-image{width:100%;height:auto;display:block}.position-grid{background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;grid-template-rows:repeat(3,1.15rem);grid-template-columns:repeat(3,1.15rem);gap:.28rem;width:fit-content;padding:.45rem;display:grid}.position-cell{cursor:pointer;background:#fff;border:1px solid #94a3b8;border-radius:3px;width:1.15rem;height:1.15rem;padding:0}.position-cell:hover{background:#dbeafe;border-color:#3b82f6}.position-cell.active{background:#2563eb;border-color:#1d4ed8}.preview-qr-layer{pointer-events:none;position:absolute;inset:4%}.segmented{background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;grid-template-columns:1fr 1fr;gap:.3rem;width:100%;padding:.25rem;display:grid}.segmented button{color:#334155;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:.45rem .6rem}.segmented button.active{color:#1d4ed8;background:#fff;font-weight:600;box-shadow:0 1px 3px #0f172a1f}.font-search{margin-bottom:.15rem}.icon-picker input[type=search]{border:1px solid #cbd5e1;border-radius:8px;padding:.65rem .75rem}.icon-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;max-height:240px;padding:.15rem;display:grid;overflow:auto}.icon-cell{cursor:pointer;background:#fff;border:1px solid #d7e0ef;border-radius:8px;flex-direction:column;align-items:center;gap:.3rem;min-width:0;padding:.45rem .3rem;display:flex}iconify-icon{width:1em;height:1em;display:inline-block}.icon-cell iconify-icon{color:#0f172a;width:22px;height:22px;font-size:22px}.icon-cell-label{color:#475569;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.68rem;line-height:1.2;overflow:hidden}.icon-cell:hover,.icon-cell.active{background:#eff6ff;border-color:#3b82f6}.preview-qr{box-sizing:content-box;background:#fff;border-radius:8px;flex-direction:column;align-items:center;display:flex;position:absolute;box-shadow:0 8px 24px #00000040}.preview-qr-caption{color:#1e293b;text-align:center;word-break:break-word;width:100%;margin:0;font-weight:700;line-height:1.25}.preview-qr img{aspect-ratio:1;width:100%;display:block}.advanced-details summary{cursor:pointer;list-style:none}.advanced-details summary::-webkit-details-marker{display:none}.advanced-summary{padding-right:1.5rem;position:relative}.advanced-summary h2:after{content:"▸";color:#64748b;font-weight:500;position:absolute;top:0;right:0}.advanced-details[open] .advanced-summary h2:after{content:"▾"}.advanced-details .style-grid{margin-top:.25rem}.style-grid{grid-template-columns:1fr 1fr;gap:.75rem .85rem;margin:.85rem 0;display:grid}.style-grid .field{margin-top:0}.color-input-row{align-items:center;gap:.55rem;display:flex}.color-input-row input[type=color]{cursor:pointer;background:0 0;border:1px solid #cbd5e1;border-radius:6px;width:2.4rem;height:2rem;padding:0}.color-input-row .text-button{margin-top:0;font-size:.82rem}.color-hex{color:#475569;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem}.logo-field{margin-top:.95rem}.logo-preview-row{align-items:center;gap:.75rem;display:flex}.logo-preview{object-fit:contain;background:#f8fafc;border:1px solid #d7e0ef;border-radius:8px;width:40px;height:40px}.secondary-button{color:#1e293b;cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;width:fit-content;padding:.55rem .85rem}.secondary-button:hover{background:#eff6ff;border-color:#93c5fd}.reset-style-button{margin-top:.85rem}.panel-header.advanced-summary p{margin-bottom:.9rem}@media (width<=900px){.app-layout{grid-template-columns:1fr}.preview-panel{position:static}}:root{color:#0f172a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#e8edf5;font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}*,:before,:after{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}#root{min-height:100vh}button,input{font:inherit}
