*{box-sizing:border-box}html{scrollbar-gutter:stable}:root{--teal: #0f7f88;--blue: #3d5cc4;--pink: #e07fb3;--pink-bright: #fc97d1;--purple: #5540a5;--bg: #eef3f6;--bg-elevated: #ffffff;--ink: #22343d;--ink-soft: #5a6b73;--line: #d7e2e6}body{margin:0;font-family:Poppins,sans-serif;background:var(--bg);color:var(--ink)}.app{max-width:1100px;margin:0 auto;padding:2rem 1.5rem 4rem;display:flex;flex-direction:column;gap:1.5rem}.app h1{font-family:Fredoka,sans-serif;color:var(--purple);margin:0}.workspace{display:flex;align-items:flex-start;gap:1.5rem}.controls-column{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.5rem}.preview-column{flex:0 0 320px;position:sticky;top:1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}@media (max-width: 860px){.workspace{flex-direction:column-reverse;align-items:stretch}.preview-column{position:static;align-self:center}}.content-panel,.design-panel{background:var(--bg-elevated);border:1px solid var(--line);border-radius:12px;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;min-width:0}.tabs{display:flex;gap:.5rem;flex-wrap:wrap}.tab{border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);border-radius:999px;padding:.4rem 1rem;cursor:pointer;font-family:Poppins,sans-serif}.tab.active{background:var(--teal);border-color:var(--teal);color:#fff}.field,.field-group>.field{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:var(--ink-soft)}.field input,.field select,.field textarea{font-family:Poppins,sans-serif;padding:.5rem;border:1px solid var(--line);border-radius:8px;color:var(--ink)}.field-disabled{opacity:.4}.field-disabled input,.field-disabled select{cursor:not-allowed}.checkbox-field{flex-direction:row;align-items:center}.field-group{display:flex;flex-direction:column;gap:.75rem}.field-error{color:#b02f2f;font-size:.85rem;margin:0}.field-error-caution{color:#a56e0d}.palette-presets{display:flex;gap:.5rem}.swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--bg-elevated);outline:1px solid var(--line);cursor:pointer}.color-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.hex-color-input{display:inline-flex;align-items:center;gap:.4rem}.hex-input{width:6.5rem;font-family:Poppins,sans-serif;padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-transform:uppercase}.color-swatch-input{width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:8px;cursor:pointer}.preset-row{display:flex;gap:.5rem;flex-wrap:wrap}.preset-row.preset-row-icons{display:grid;grid-template-columns:repeat(6,44px)}.preset-button{font-family:Poppins,sans-serif;border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);border-radius:999px;padding:.35rem .9rem;cursor:pointer;font-size:.85rem}.preset-button.active{background:var(--teal);border-color:var(--teal);color:#fff}.preset-button.icon-button{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center}.gradient-editor{display:flex;flex-direction:column;gap:.75rem}.gradient-preview{height:20px;border-radius:999px;border:1px solid var(--line)}.gradient-stops{display:flex;align-items:flex-end;gap:.75rem}.gradient-stop{display:flex;flex-direction:column;gap:.3rem}.gradient-stop-label{font-size:.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em}.swap-button{border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.3rem;padding:.35rem .9rem;font-size:.85rem;font-family:Poppins,sans-serif;align-self:flex-start}.swap-button:hover{background:var(--teal);border-color:var(--teal);color:#fff}.section-divider{height:1px;background:var(--line);border:none;margin:0}.qr-preview{display:flex;justify-content:center;padding:1rem}.qr-preview canvas{border-radius:12px}.frame-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem}.frame-border,.frame-bordered{border-width:3px;border-style:solid;border-radius:20px;overflow:hidden;display:inline-flex;flex-direction:column;background:#fff}.frame-bar{padding:.6rem 0;text-align:center;font-weight:600;font-size:1.6rem}.frame-corner-marks{position:relative;display:inline-block;padding:1.5rem}.corner-mark{position:absolute;width:24px;height:24px;border-color:currentColor;border-style:solid;border-width:0;pointer-events:none}.corner-tl{top:0;left:0;border-top-width:4px;border-left-width:4px}.corner-tr{top:0;right:0;border-top-width:4px;border-right-width:4px}.corner-bl{bottom:0;left:0;border-bottom-width:4px;border-left-width:4px}.corner-br{bottom:0;right:0;border-bottom-width:4px;border-right-width:4px}.frame-label-plain{font-weight:600;font-size:1.5rem}.frame-ribbon{padding:.5rem 2rem;margin-top:-.75rem;font-weight:600;font-size:1.4rem;clip-path:polygon(0 50%,10% 0,90% 0,100% 50%,90% 100%,10% 100%)}.frame-circle{position:relative;border-radius:50%;padding:1.5rem;display:flex;align-items:center;justify-content:center}.frame-circle-inner{background:#fff;border-radius:50%;padding:4.1rem}.frame-circle-inner .qr-preview{padding:0}.frame-pill{margin-top:-1rem;padding:.5rem 1.4rem;border-radius:999px;font-weight:600;font-size:1.4rem}.frame-viewfinder{position:relative;display:inline-block;padding:1.5rem}.viewfinder-ring,.circle-band-text{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.primary-button,.secondary-button{font-family:Fredoka,sans-serif;border-radius:999px;padding:.6rem 1.4rem;border:none;cursor:pointer}.secondary-button{align-self:flex-start}.primary-button{background:var(--purple);color:#fff;align-self:center}.primary-button:disabled{background:var(--line);color:var(--ink-soft);cursor:not-allowed}.secondary-button{background:var(--bg);border:1px solid var(--line);color:var(--ink-soft)}@media (max-width: 860px){.app{padding:1.5rem 1rem 3rem}.field,.field-group>.field{font-size:1rem}.tabs{flex-wrap:wrap;min-width:0}.tab{padding:.7rem 1.15rem;font-size:1rem}.preset-row:not(.preset-row-icons){row-gap:.6rem}.preset-row.preset-row-icons{grid-template-columns:repeat(5,44px)}.preset-button:not(.icon-button){padding:.6rem 1.1rem;font-size:1rem;min-height:44px}.swatch{width:36px;height:36px}.color-swatch-input{width:40px;height:40px}.hex-input{font-size:1rem;padding:.55rem .6rem}.swap-button{padding:.6rem 1.1rem;font-size:1rem;min-height:44px}.primary-button,.secondary-button{padding:.75rem 1.6rem;font-size:1.05rem;min-height:44px}}