:root{--primary-color:#9d4edd;--primary-hover:#7b2cbf;--accent-color:#c77dff;--bg-gradient:#f8fafc;--surface-color:#fff;--surface-blur:none;--text-main:#1e293b;--text-muted:#64748b;--border-color:#e2e8f0;--error-color:#ef4444;--warning-bg:#fffbeb;--warning-text:#b45309;--radius:12px;--card-shadow:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--input-shadow:0 1px 2px 0 #0000000d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-gradient);color:var(--text-main);flex-direction:column;min-height:100vh;padding-bottom:2rem;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;display:flex}.app-header{background:var(--surface-color);-webkit-backdrop-filter:var(--surface-blur);backdrop-filter:var(--surface-blur);border-bottom:1px solid var(--border-color);z-index:50;margin-bottom:2.5rem;padding:1.25rem 0;position:sticky;top:0;box-shadow:0 4px 6px -1px #00000005}.container{width:92%;max-width:1200px;margin:0 auto}.app-header h1{background:linear-gradient(to right, var(--primary-color), var(--accent-color));-webkit-text-fill-color:transparent;letter-spacing:-.025em;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:800}.bento-layout{flex-direction:column;gap:1.5rem;display:flex}.bento-card{background:var(--surface-color);-webkit-backdrop-filter:var(--surface-blur);backdrop-filter:var(--surface-blur);border-radius:var(--radius);box-shadow:var(--card-shadow);border:1px solid var(--border-color);flex-direction:column;justify-content:flex-start;padding:1.5rem;transition:transform .2s,box-shadow .2s;display:flex}.bento-card:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #0000000d,0 10px 10px -5px #00000005}.bento-card h2{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;align-items:center;gap:.5rem;margin-top:0;margin-bottom:1.25rem;font-size:.875rem;font-weight:700;display:flex}.icon{opacity:.8;font-size:1rem}.card-preview{z-index:20;background:#fff;border:1px solid #0000000d;position:sticky;top:5rem;overflow:visible!important}.qr-canvas-container canvas,.qr-canvas-container svg,.qr-canvas-container img{display:block;max-width:100%!important;height:auto!important}@media (width>=1024px){.bento-layout{grid-template-rows:auto auto auto auto auto auto auto;grid-template-columns:repeat(3,1fr);grid-template-areas:"presets presets presets""input input preview""colors body preview""eyes eyes preview""logo ecc preview""notice notice preview""ad ad ad";align-items:stretch;gap:1.5rem;display:grid}.card-presets{grid-area:presets}.card-ad{grid-area:ad}.card-input{grid-area:input}.card-colors{grid-area:colors}.card-body-pattern{grid-area:body}.card-eye-pattern{grid-area:eyes}.card-layout{grid-area:layout}.card-logo{grid-area:logo}.card-ecc{grid-area:ecc}.card-notice{grid-area:notice}.card-notice .card-preview{z-index:1;background:#fff;border:1px solid #0000000d;grid-area:preview;justify-content:flex-start;align-self:start;align-items:stretch;height:fit-content;position:relative;top:0;overflow:visible!important}.pro-app-layout{width:100%;min-height:100vh;display:flex}.pro-sidebar{z-index:100;background:#fff;border-right:1px solid #e2e8f0;flex-direction:column;flex-shrink:0;width:270px;height:100vh;padding:1.25rem 1rem;display:flex;position:sticky;top:0;box-shadow:4px 0 25px #00000005}.pro-sidebar-brand{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:1.25rem;display:flex}.pro-sidebar-brand .logo{color:#0f172a;align-items:center;gap:8px;font-size:1.15rem;font-weight:800;text-decoration:none;display:flex}.pro-sidebar-nav{flex-direction:column;flex:1;gap:6px;display:flex;overflow-y:auto}.pro-nav-item{color:#64748b;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:12px;align-items:center;gap:12px;padding:10px 14px;font-size:.88rem;font-weight:700;transition:all .2s;display:flex}.pro-nav-item:hover{color:#7c3aed;background:#f8fafc}.pro-nav-item.active{color:#7c3aed;background:linear-gradient(135deg,#7c3aed1f 0%,#6366f114 100%);border:1px solid #7c3aed33}.pro-main-area{background:#f8fafc;flex-direction:column;flex:1;min-width:0;display:flex}.pro-top-bar{z-index:90;background:#fff;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:.85rem 1.75rem;display:flex;position:sticky;top:0}@media (width<=900px){.pro-app-layout{flex-direction:column}.pro-sidebar{border-bottom:1px solid #e2e8f0;border-right:none;width:100%;height:auto;position:relative}}.control-row{flex-direction:column;gap:1rem;display:flex}@media (width>=640px){.control-row{flex-direction:row}}.control-group{flex:1;margin-bottom:.5rem}label{color:var(--text-main);margin-bottom:.5rem;font-size:.875rem;font-weight:500;display:block}input[type=text],select,input[type=range]{border:1px solid var(--border-color);width:100%;color:var(--text-main);box-shadow:var(--input-shadow);background:#fff;border-radius:8px;padding:.75rem 1rem;font-family:inherit;font-size:.95rem;transition:all .2s}input[type=text]:focus,select:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #6366f126}.color-picker-wrapper{border:1px solid var(--border-color);cursor:pointer;background:#fff;border-radius:8px;align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}input[type=color]{appearance:none;cursor:pointer;background:0 0;border:none;width:2rem;height:2rem;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid #0000001a;border-radius:6px}.color-value{color:var(--text-muted);font-family:monospace;font-size:.85rem}.radio-group-grid{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.radio-group-row{flex-wrap:wrap;gap:.5rem;display:flex}.radio-card input[type=radio],.radio-btn input[type=radio]{appearance:none;opacity:0;width:0;height:0;position:absolute}.radio-card{cursor:pointer;border:1px solid var(--border-color);text-align:center;color:var(--text-muted);background:#fff;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;padding:.75rem .25rem;font-size:.8rem;transition:all .2s;display:flex;position:relative}.radio-card:hover{border-color:var(--primary-color);background:#6366f10d}.radio-card:has(input:checked){border-color:var(--primary-color);color:var(--primary-color);box-shadow:0 0 0 1px var(--primary-color);background:#6366f11a;font-weight:600}.radio-btn{cursor:pointer;border:1px solid var(--border-color);text-align:center;color:var(--text-muted);background:#fff;border-radius:6px;flex:1;min-width:3rem;padding:.5rem;font-size:.9rem;transition:all .2s;position:relative}.radio-btn:hover{border-color:var(--text-muted)}.radio-btn:has(input:checked){background:var(--primary-color);border-color:var(--primary-color);color:#fff}.file-upload-btn{border:2px dashed var(--border-color);cursor:pointer;text-align:center;width:100%;color:var(--text-muted);background-color:#f8fafc;border-radius:8px;justify-content:center;align-items:center;padding:1.5rem;font-weight:500;transition:all .2s;display:flex}.file-upload-btn:hover{border-color:var(--primary-color);color:var(--primary-color);background-color:#eff6ff}input[type=file]{display:none}.file-name{color:var(--text-main);text-align:center;margin-top:.5rem;font-size:.8rem;font-weight:500}.primary-btn{background:linear-gradient(to right, var(--primary-color), var(--accent-color));color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;padding:1rem;font-size:1rem;font-weight:600;transition:all .2s;display:block;box-shadow:0 4px 6px -1px #6366f14d,0 2px 4px -1px #6366f126}.primary-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 15px -3px #6366f166,0 4px 6px -2px #6366f133}.primary-btn:disabled{cursor:not-allowed;box-shadow:none;background:#cbd5e1;transform:none}.secondary-btn{color:var(--error-color);cursor:pointer;background:0 0;border:1px solid #ef44444d;border-radius:8px;width:100%;margin-top:.75rem;padding:.5rem;font-size:.8rem;font-weight:500}.secondary-btn:hover{background:#ef44440d}.qr-canvas-container{background:0 0;justify-content:center;align-items:center;margin-bottom:2rem;padding:1rem;display:flex}footer{text-align:center;color:var(--text-muted);margin-top:auto;padding:2rem;font-size:.875rem}.hidden{display:none!important}.error-msg{color:var(--error-color);align-items:center;gap:.25rem;margin-top:.25rem;font-size:.8rem;display:flex}.warning-msg{background:var(--warning-bg);color:var(--warning-text);border-radius:8px;align-items:center;gap:.5rem;margin-top:1rem;padding:.75rem;font-size:.85rem;font-weight:500;display:flex}@keyframes pulse{0%{opacity:.8;transform:scale(.95);box-shadow:0 0 #10b981b3}70%{opacity:1;transform:scale(1.1);box-shadow:0 0 0 10px #10b98100}to{opacity:.8;transform:scale(.95);box-shadow:0 0 #10b98100}}.preset-pill{transition:all .25s cubic-bezier(.16,1,.3,1)!important}.preset-pill:hover{transform:translateY(-2px);box-shadow:0 6px 16px #7c3aed26}.preset-pill.active{border-color:var(--primary-color,#7c3aed)!important;background:#7c3aed1a!important;box-shadow:0 0 12px #7c3aed33!important}.bento-card{-webkit-backdrop-filter:blur(16px)!important;background:#ffffffe0!important;border:1px solid #e2e8f0cc!important;box-shadow:0 12px 30px #1f26870a!important}.qr-canvas-container{transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}.qr-canvas-container:hover{transform:translateY(-4px)scale(1.01);box-shadow:inset 0 0 20px #00000003,0 20px 40px #7c3aed1f!important}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;opacity:0;pointer-events:none;background:#0f172a99;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .3s;display:flex;position:fixed;top:0;left:0}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-card{text-align:center;background:#fff;border-radius:24px;width:90%;max-width:480px;padding:28px;transition:transform .3s cubic-bezier(.16,1,.3,1);transform:scale(.9);box-shadow:0 25px 50px -12px #00000040}.modal-overlay.active .modal-card{transform:scale(1)}.pattern-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:1rem;display:grid}.pattern-btn{aspect-ratio:1;border:1px solid var(--border-color);cursor:pointer;background:#fff;border-radius:8px;justify-content:center;align-items:center;width:100%;padding:8px;transition:all .2s;display:flex;position:relative;overflow:hidden}.pattern-btn:hover{border-color:var(--primary-color);box-shadow:0 4px 6px -1px #9d4edd1a}.pattern-btn:has(input:checked){border-color:var(--primary-color);box-shadow:0 0 0 1px var(--primary-color);background-color:#f8fafc}.pattern-btn input{display:none}.pattern-btn svg{fill:currentColor;color:#1e293b;width:100%;height:100%}.pattern-btn:has(input:checked) svg{color:var(--primary-color)}.pattern-btn svg path[fill=\#000],.pattern-btn svg rect[fill=\#000],.pattern-btn svg path[fill=black],.pattern-btn svg rect[fill=black],.pattern-btn svg path[fill=\#010101],.pattern-btn svg rect[fill=\#010101],.pattern-btn svg path[fill=\#020202],.pattern-btn svg rect[fill=\#020202],.pattern-btn svg path[fill=\#030303],.pattern-btn svg rect[fill=\#030303],.pattern-btn svg path[fill=\#040404],.pattern-btn svg rect[fill=\#040404],.pattern-btn svg path[fill=\#050505],.pattern-btn svg rect[fill=\#050505],.pattern-btn svg path[fill=\#060606],.pattern-btn svg rect[fill=\#060606],.pattern-btn svg path[fill=\#070707],.pattern-btn svg rect[fill=\#070707],.pattern-btn svg path[fill=\#080808],.pattern-btn svg rect[fill=\#080808],.pattern-btn svg path[fill=\#090909],.pattern-btn svg rect[fill=\#090909],.pattern-btn svg path[fill=\#0f0f0f],.pattern-btn svg rect[fill=\#0f0f0f],.pattern-btn svg path[fill=\#181818],.pattern-btn svg rect[fill=\#181818]{fill:currentColor}.pattern-btn svg path[stroke=\#000],.pattern-btn svg rect[stroke=\#000],.pattern-btn svg path[stroke=black]{stroke:currentColor}.pattern-btn svg path[fill=\#fff],.pattern-btn svg rect[fill=\#fff]{fill:#fff}.pattern-btn svg path[fill=\#DDDDDD],.pattern-btn svg rect[fill=\#DDDDDD],.pattern-btn svg path[fill=\#DDE0E4],.pattern-btn svg rect[fill=\#DDE0E4],.pattern-btn svg path[fill=\#727271],.pattern-btn svg rect[fill=\#727271],.pattern-btn svg path[stroke=\#DDDDDD],.pattern-btn svg rect[stroke=\#DDDDDD],.pattern-btn svg path[stroke=\#DDE0E4],.pattern-btn svg rect[stroke=\#DDE0E4],.pattern-btn svg path[stroke=\#727271],.pattern-btn svg rect[stroke=\#727271]{opacity:0;fill:none!important;stroke:none!important}.section-desc{color:var(--text-muted);margin-bottom:1.5rem;font-size:.85rem}.ecc-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;display:grid}.ecc-card{border:1px solid var(--border-color);cursor:pointer;text-align:left;background:#fff;border-radius:12px;flex-direction:column;gap:.5rem;padding:1.25rem 1rem;transition:all .2s;display:flex;position:relative}.ecc-card:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}.ecc-card:has(input:checked){border-color:var(--primary-color);box-shadow:0 0 0 1px var(--primary-color)}.ecc-card input{display:none}.ecc-title{color:var(--text-main);font-size:.95rem;font-weight:700}.ecc-desc{color:var(--text-muted);font-size:.8rem;line-height:1.4}.qr-preview-icon{background-color:#f1f5f9;background-image:linear-gradient(45deg,#1e293b 25%,#0000 25%),linear-gradient(-45deg,#1e293b 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#1e293b 75%),linear-gradient(-45deg,#0000 75%,#1e293b 75%);background-size:16px 16px;border-radius:4px;width:64px;height:64px;margin-bottom:.5rem}.qr-preview-icon.high{background-size:8px 8px}.qr-preview-icon.quart{background-size:10px 10px}.qr-preview-icon.medium{background-size:12px 12px}.qr-preview-icon.low{background-size:16px 16px}.split-controls{flex-direction:column;gap:2rem;display:flex}@media (width>=768px){.split-controls{flex-direction:row}.control-half{flex:1}}}