:root{--bg: #0f0a1f;--card: #1a1035;--card-hover: #1e1440;--border: #2d1f54;--accent: #00d4ff;--accent-dim: rgba(0, 212, 255, .15);--pink: #ff6bb3;--yellow: #ffd166;--purple: #a78bfa;--text: #e2e8f0;--text-muted: #94a3b8;--radius: 12px;--font: "JetBrains Mono", ui-monospace, monospace}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font);font-size:14px;background:var(--bg);color:var(--text);line-height:1.5}.hidden{display:none!important}.header{padding:1rem 1.5rem;border-bottom:1px solid var(--border)}.logo{margin:0;font-size:1.25rem;font-weight:600;color:var(--text)}.app{display:grid;grid-template-columns:minmax(0,380px) 1fr}@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:auto auto}}.sidebar{order:-1;padding:1rem;border-right:1px solid var(--border);background:var(--card)}@media(max-width:900px){.sidebar{border-right:none;border-bottom:1px solid var(--border)}}.accordion{margin-bottom:.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);transition:background .2s,box-shadow .2s}.accordion:hover{background:var(--card-hover);box-shadow:0 0 0 1px var(--border)}.accordion-header{width:100%;font-family:var(--font);font-size:.875rem;font-weight:500;color:var(--text);background:none;border:none;border-radius:var(--radius);cursor:pointer;text-align:left;position:relative;padding:.75rem 1rem .75rem 1.25rem;border-left:3px solid transparent;transition:border-color .2s,color .2s}.accordion-header:hover{color:var(--accent)}.accordion-header:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);border-radius:2px 0 0 2px;opacity:0;transition:opacity .2s}.accordion-header:hover:before,.accordion[data-open=true] .accordion-header:before{opacity:1}.accordion-header[aria-expanded=true]:after{content:"−";position:absolute;right:1rem;color:var(--text-muted)}.accordion-header[aria-expanded=false]:after{content:"+";position:absolute;right:1rem;color:var(--text-muted)}.accordion-panel{padding:0 1rem 1rem;border-top:1px solid var(--border)}.accordion-panel[hidden]{display:none}.field{margin-bottom:1rem}.field:last-child{margin-bottom:0}.field label{display:block;margin-bottom:.35rem;font-size:.8rem;color:var(--text-muted)}.field label:not([for]){display:inline;margin-bottom:0}input[type=text],input[type=url],input[type=email],input[type=tel],input[type=password],textarea,select{width:100%;padding:.5rem .75rem;font-family:var(--font);font-size:.875rem;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;transition:border-color .2s,box-shadow .2s}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:.8}textarea{resize:vertical;min-height:4rem}input[type=range]{width:100%;height:6px;background:var(--border);border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer;border:2px solid var(--card)}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer;border:2px solid var(--card)}input[type=color]{width:100%;height:36px;padding:2px;background:var(--bg);border:1px solid var(--border);border-radius:6px;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.mode-tabs{display:flex;flex-wrap:wrap;gap:.35rem}.mode-tabs [role=tab]{padding:.4rem .65rem;font-family:var(--font);font-size:.75rem;color:var(--text-muted);background:var(--bg);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}.mode-tabs [role=tab]:hover{color:var(--accent);border-color:var(--accent)}.mode-tabs [role=tab][aria-selected=true]{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}.shape-picker{display:flex;flex-wrap:wrap;gap:.35rem}.shape-picker button{width:2.25rem;height:2.25rem;padding:0;font-size:1rem;color:var(--text-muted);background:var(--bg);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}.shape-picker button:hover,.shape-picker button.active{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}.radio-group{display:flex;flex-wrap:wrap;gap:.75rem}.radio-group label{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;color:var(--text-muted);font-size:.875rem}.radio-group input{width:auto;accent-color:var(--accent)}input[type=checkbox]{width:auto;margin-right:.35rem;accent-color:var(--accent)}.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-family:var(--font);font-size:.875rem;font-weight:500;border-radius:6px;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}.btn-primary{width:100%;margin-top:.5rem;color:var(--accent);background:transparent;border:2px solid var(--accent)}.btn-primary:hover{color:var(--bg);background:var(--accent);box-shadow:0 0 12px var(--accent-dim)}.btn-secondary{margin-top:.5rem;color:var(--text-muted);background:var(--bg);border:1px solid var(--border)}.btn-secondary:hover{color:var(--pink);border-color:var(--pink)}.drop-zone{display:flex;align-items:center;justify-content:center;min-height:80px;padding:1rem;border:2px dashed var(--border);border-radius:var(--radius);background:var(--bg);cursor:pointer;transition:border-color .2s,background .2s}.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:var(--accent-dim)}.drop-zone span{color:var(--text-muted);font-size:.875rem}.preset-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.preset-buttons button{padding:.5rem .75rem;font-family:var(--font);font-size:.8rem;color:var(--text-muted);background:var(--bg);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}.preset-buttons button:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}.preview-area{display:flex;align-items:flex-start;justify-content:center;padding:2rem;background:var(--bg)}@media(max-width:900px){.preview-area{padding:1rem}}.preview-card{position:relative;padding:2rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 0 24px #0000004d;overflow:hidden;will-change:transform}.preview-card .grainient-layer{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;border-radius:var(--radius);overflow:hidden}.preview-card.transparent-bg .grainient-layer{display:block}.grainient-layer .grad-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.85;will-change:transform}.grainient-layer .grad-blob:nth-child(1){width:70%;height:70%;top:-10%;left:-10%;background:#ff9ffc;animation:grainBlob1 8s ease-in-out infinite alternate}.grainient-layer .grad-blob:nth-child(2){width:65%;height:65%;bottom:-15%;right:-10%;background:#5227ff;animation:grainBlob2 10s ease-in-out infinite alternate}.grainient-layer .grad-blob:nth-child(3){width:55%;height:55%;top:30%;left:25%;background:#b19eef;animation:grainBlob3 12s ease-in-out infinite alternate}@keyframes grainBlob1{0%{transform:translate(0) scale(1)}50%{transform:translate(20%,15%) scale(1.15)}to{transform:translate(-5%,25%) scale(.95)}}@keyframes grainBlob2{0%{transform:translate(0) scale(1)}50%{transform:translate(-15%,-10%) scale(1.1)}to{transform:translate(10%,-20%) scale(1.05)}}@keyframes grainBlob3{0%{transform:translate(0) scale(1)}50%{transform:translate(10%,-15%) scale(1.2)}to{transform:translate(-10%,10%) scale(.9)}}.grainient-layer .grain-overlay{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.35;filter:url(#grainNoise);background:transparent;mix-blend-mode:overlay}.qr-container{position:relative;z-index:1;min-width:200px;min-height:200px;display:flex;align-items:center;justify-content:center}.qr-container canvas,.qr-container svg{max-width:100%;height:auto;display:block}.qr-container canvas{background:transparent!important}.qr-container svg{background:transparent}