:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#182238;background:#f6f7fb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--blue: #2563eb;--navy: #172554;--muted: #8490a5;--border: #e8ebf1}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;background:#f6f7fb;color:#182238;transition:background-color .2s ease,color .2s ease}.topbar{position:sticky;top:0;z-index:10;height:72px;padding:0 max(32px,calc((100vw - 1200px)/2));display:flex;align-items:center;justify-content:space-between;background:#ffffffbd;border-bottom:1px solid rgba(225,229,237,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}.brand{display:inline-flex;align-items:center;gap:11px;color:#172238;text-decoration:none;font:800 18px system-ui,sans-serif;letter-spacing:-.6px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--blue);box-shadow:0 5px 12px #2563eb38}.brand-mark svg{width:22px;height:22px}.brand-mark path:first-child{fill:#fff}.brand-mark path:nth-child(2){fill:#fff}.topbar-note{display:flex;align-items:center;gap:9px;color:#69758b;font-size:12px;font-weight:600}.header-actions{display:flex;align-items:center;gap:18px}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:76px;height:34px;padding:0 10px;border:1px solid #e2e6ee;border-radius:9px;background:#ffffffc7;color:#536078;font-size:11px;font-weight:600;transition:background .15s,border-color .15s,color .15s}.theme-toggle:hover{border-color:#b8cafa;color:#225bd5}.theme-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.privacy-dot{width:7px;height:7px;border-radius:50%;background:#2eb880;box-shadow:0 0 0 3px #e8f8f1}.main-content{width:min(1100px,calc(100% - 48px));margin:0 auto}.intro{padding:58px 0 33px;text-align:center}.eyebrow{display:inline-flex;align-items:center;gap:7px;color:#66738b;font-size:10px;font-weight:700;letter-spacing:1.8px}.eyebrow span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4e79e8}h1,h2,p{margin-top:0}h1{margin:13px 0 10px;color:#172238;font:800 clamp(36px,5vw,48px)/1.1 system-ui,sans-serif;letter-spacing:-2.8px}h1 span{color:var(--blue)}.intro p{margin:0;color:#727e92;font-size:14px}.generator{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);overflow:hidden;border:1px solid #e8eaf0;border-radius:18px;background:#fff;box-shadow:0 14px 45px #2739570d}.editor{padding:30px 34px 0}.editor-heading,.preview-topline{display:flex;align-items:center;justify-content:space-between}.step-label{margin-bottom:6px;color:#8d99ad;font-size:9px;font-weight:700;letter-spacing:1.7px}h2{margin:0;color:#19243b;font:700 18px system-ui,sans-serif;letter-spacing:-.5px}.step-number{color:#9ca6b5;font-size:12px}.step-number i{padding:0 4px;color:#d1d6df;font-style:normal}.tab-list{display:flex;gap:20px;margin-top:24px;border-bottom:1px solid var(--border)}.tab{position:relative;display:flex;align-items:center;gap:8px;padding:0 0 12px;border:0;background:transparent;color:#8792a5;font-size:12px;font-weight:600}.tab span{font-size:14px}.tab.active{color:#225bd5}.tab.active:after{position:absolute;right:0;bottom:-1px;left:0;height:2px;border-radius:4px;background:var(--blue);content:""}.tab-panel{min-height:400px;padding-top:19px}.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}.type-button{display:flex;min-height:58px;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #e9ecf2;border-radius:9px;background:#fff;color:#68768c;font-size:10px;font-weight:600;transition:.16s ease}.type-button:hover{border-color:#b8cafa;color:#315fc3}.type-button.selected{border-color:#8eaff6;background:#f0f5ff;color:#225bd5;box-shadow:inset 0 0 0 1px #dce7ff}.type-icon{font:500 17px system-ui,sans-serif}.field{display:grid;gap:7px;min-width:0;margin-bottom:14px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.field-label{display:flex;align-items:center;justify-content:space-between;color:#4d5a70;font-size:11px;font-weight:600}.field-label span{color:#a2acba;font-size:10px;font-weight:400}.field input,.field textarea,.field select{width:100%;min-height:40px;padding:10px 12px;border:1px solid #e4e8ef;border-radius:8px;outline:none;background:#fff;color:#27344b;font-size:12px;transition:border-color .15s,box-shadow .15s}.field textarea{min-height:82px;resize:vertical;line-height:1.5}.field input::placeholder,.field textarea::placeholder{color:#aab2bf}.field input:focus,.field textarea:focus,.field select:focus{border-color:#8caef4;box-shadow:0 0 0 3px #eaf0ff}.check-row{display:flex;align-items:center;gap:8px;margin:2px 0 10px;color:#68758a;font-size:11px}.check-row input{accent-color:var(--blue)}.form-description{margin:2px 0 16px;color:#7f8a9c;font-size:11px;line-height:1.5}.editor-footer{display:flex;align-items:center;min-height:46px;border-top:1px solid #f0f1f5}.local-note{display:flex;align-items:center;gap:7px;color:#8b95a7;font-size:10px}.local-note span{font-size:15px}.design-panel{padding-top:25px}.design-panel .field-row{align-items:center;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #f0f1f5}.design-panel .field-row .field-label{margin:0}.color-control{position:relative;display:flex;align-items:center;gap:9px}.color-picker{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer}.color-swatch{display:block;width:26px;height:26px;flex:0 0 auto;border:1px solid #dfe3eb;border-radius:7px;cursor:pointer}.color-text{width:75px;color:#546177;font:11px monospace}.native-color{position:absolute;top:0;left:0;width:26px;height:26px;opacity:0;cursor:pointer}.design-panel>.field{margin-top:22px}.text-button{justify-self:start;padding:3px 0;border:0;background:transparent;color:#5275c8;font-size:10px}.hint-box{display:flex;gap:9px;margin-top:25px;padding:12px;border:1px solid #e8eefc;border-radius:8px;background:#f7f9ff;color:#75829b;font-size:10px;line-height:1.5}.hint-box span{color:#5580e7;font-size:14px}.preview-panel{display:flex;flex-direction:column;padding:30px 30px 23px;border-left:1px solid #eff0f4;background:#fbfcfe}.live-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #e1f1e8;border-radius:20px;background:#f4fbf6;color:#51a579;font-size:8px;font-weight:700;letter-spacing:.6px}.live-badge i{width:5px;height:5px;border-radius:50%;background:#47b47b}.qr-stage{display:grid;min-height:325px;flex:1;place-items:center;margin-top:20px;border:1px dashed #dce2ec;border-radius:13px;background-color:#fff;background-image:radial-gradient(#e8ebf2 .8px,transparent .8px);background-size:14px 14px}.qr-card{display:grid;width:250px;height:250px;place-items:center;border-radius:12px;background:#fff;box-shadow:0 9px 28px #17255412}.qr-mount{display:flex;width:218px;height:218px;align-items:center;justify-content:center;opacity:.25;transition:opacity .2s}.qr-mount.ready{opacity:1}.qr-mount canvas,.qr-mount svg{display:block;max-width:100%;max-height:100%}.qr-empty{max-width:150px;color:#9aa5b5;font-size:11px;line-height:1.5;text-align:center}.qr-error{max-width:190px;color:#c24141;font-size:11px;line-height:1.5;text-align:center}.preview-summary{display:flex;align-items:center;gap:10px;padding:17px 0 15px;border-bottom:1px solid #e9ecf1}.summary-icon{display:grid;width:31px;height:31px;flex:0 0 auto;place-items:center;border:1px solid #e7ebf4;border-radius:8px;background:#fff;color:#6680bb}.preview-summary div{display:grid;gap:3px;flex:1;min-width:0}.preview-summary strong{overflow:hidden;color:#3a4860;font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.preview-summary small{overflow:hidden;color:#9aa4b3;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.copy-button{width:29px;height:29px;border:1px solid #e7ebf1;border-radius:7px;background:#fff;color:#7d899a}.copy-button:disabled{opacity:.4;cursor:not-allowed}.download-area{padding-top:15px}.download-row{display:flex;gap:8px}.download-button{display:flex;height:42px;flex:1;align-items:center;justify-content:center;gap:9px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-size:11px;font-weight:600;box-shadow:0 5px 12px #2563eb26;transition:background .15s,transform .15s}.download-button:hover:not(:disabled){transform:translateY(-1px);background:#1d4ed8}.download-button:disabled{opacity:.45;cursor:not-allowed}.download-button span{font-size:16px}.format-picker{position:relative}.format-button{display:flex;height:42px;min-width:68px;align-items:center;justify-content:center;gap:10px;padding:0 9px;border:1px solid #e4e8ef;border-radius:8px;background:#fff;color:#68758a;font-size:9px;font-weight:700}.format-button span{color:#a7afbc}.format-menu{position:absolute;right:0;bottom:48px;z-index:2;width:95px;overflow:hidden;border:1px solid #e5e9f0;border-radius:8px;background:#fff;box-shadow:0 8px 20px #1822381a}.format-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;padding:9px 12px;border:0;background:#fff;color:#4c5a70;font-size:10px}.format-menu button:hover{background:#f3f6fc}.format-menu button span{color:var(--blue)}.download-caption{display:flex;align-items:center;justify-content:center;gap:5px;margin:11px 0 0;color:#99a3b1;font-size:9px}.download-caption span{color:#38a875}.action-feedback{min-height:14px;margin:6px 0 0;color:#6680bb;font-size:9px;line-height:1.4;text-align:center}.page-footer{display:flex;justify-content:center;padding:21px 3px 28px;color:#9aa3b1;font-size:10px;text-align:center}.page-footer i{padding:0 4px;color:#c6ccd5;font-style:normal}.app-shell[data-theme=dark]{background:#111827;color:#e6ebf4}.app-shell[data-theme=dark] .topbar{background:#111827c2;border-bottom-color:#374151b8}.app-shell[data-theme=dark] .brand{color:#f1f5fb}.app-shell[data-theme=dark] .topbar-note{color:#a5b0c1}.app-shell[data-theme=dark] .theme-toggle{border-color:#3a465a;background:#1f293bd1;color:#d5deed}.app-shell[data-theme=dark] .theme-toggle:hover{border-color:#648be5;color:#a9c1ff}.app-shell[data-theme=dark] h1{color:#f1f5fb}.app-shell[data-theme=dark] .intro p,.app-shell[data-theme=dark] .eyebrow,.app-shell[data-theme=dark] .step-label,.app-shell[data-theme=dark] .step-number,.app-shell[data-theme=dark] .local-note{color:#9aa8bd}.app-shell[data-theme=dark] .generator{border-color:#344155;background:#1b2536;box-shadow:0 14px 45px #00000024}.app-shell[data-theme=dark] h2{color:#edf2fa}.app-shell[data-theme=dark] .tab-list{border-bottom-color:#354155}.app-shell[data-theme=dark] .tab{color:#9aa8bd}.app-shell[data-theme=dark] .tab.active{color:#8eafff}.app-shell[data-theme=dark] .type-button{border-color:#39465b;background:#202b3d;color:#b4c0d2}.app-shell[data-theme=dark] .type-button:hover{border-color:#6688d3;color:#adc3ff}.app-shell[data-theme=dark] .type-button.selected{border-color:#6688d3;background:#263a60;color:#b5c9ff;box-shadow:inset 0 0 0 1px #354f7d}.app-shell[data-theme=dark] .field-label,.app-shell[data-theme=dark] .check-row{color:#bdc8d8}.app-shell[data-theme=dark] .field input,.app-shell[data-theme=dark] .field textarea,.app-shell[data-theme=dark] .field select{border-color:#3a475c;background:#151e2d;color:#e2e9f4;color-scheme:dark}.app-shell[data-theme=dark] .field input::placeholder,.app-shell[data-theme=dark] .field textarea::placeholder{color:#77859a}.app-shell[data-theme=dark] .field input:focus,.app-shell[data-theme=dark] .field textarea:focus,.app-shell[data-theme=dark] .field select:focus{border-color:#7195eb;box-shadow:0 0 0 3px #4469b533}.app-shell[data-theme=dark] .form-description{color:#a5b0c1}.app-shell[data-theme=dark] .editor-footer,.app-shell[data-theme=dark] .design-panel .field-row{border-color:#354155}.app-shell[data-theme=dark] .preview-panel{border-color:#354155;background:#172132}.app-shell[data-theme=dark] .live-badge{border-color:#28563f;background:#1b352c;color:#81c69d}.app-shell[data-theme=dark] .qr-stage{border-color:#3b4a61;background-color:#1d293a;background-image:radial-gradient(#3a4658 .8px,transparent .8px)}.app-shell[data-theme=dark] .preview-summary{border-color:#354155}.app-shell[data-theme=dark] .summary-icon,.app-shell[data-theme=dark] .copy-button,.app-shell[data-theme=dark] .format-button{border-color:#3a475c;background:#202b3d;color:#bdc8d8}.app-shell[data-theme=dark] .preview-summary strong{color:#dbe4f1}.app-shell[data-theme=dark] .preview-summary small,.app-shell[data-theme=dark] .download-caption,.app-shell[data-theme=dark] .page-footer{color:#8f9db1}.app-shell[data-theme=dark] .format-menu{border-color:#3a475c;background:#202b3d}.app-shell[data-theme=dark] .format-menu button{background:#202b3d;color:#dbe4f1}.app-shell[data-theme=dark] .format-menu button:hover{background:#2a3850}.app-shell[data-theme=dark] .hint-box{border-color:#35476a;background:#202e48;color:#b2bfd3}.app-shell[data-theme=dark] .color-text{color:#c3cede}.app-shell[data-theme=dark] .text-button{color:#a9c1ff}@media(max-width:760px){.topbar{height:62px;padding:0 20px}.main-content{width:min(560px,calc(100% - 28px))}.intro{padding:42px 0 25px}.generator{grid-template-columns:1fr}.editor{padding:24px 22px 0}.tab-panel{min-height:0;padding-bottom:20px}.preview-panel{padding:24px 22px;border-top:1px solid #eff0f4;border-left:0}.qr-stage{min-height:300px}.page-footer{gap:12px;flex-wrap:wrap}}@media(max-width:430px){.topbar-note{display:none}.header-actions{gap:0}.topbar-note .privacy-dot{width:8px;height:8px}.main-content{width:calc(100% - 22px)}.editor,.preview-panel{padding-right:16px;padding-left:16px}.type-grid{gap:6px}.type-button{min-height:54px;font-size:9px}.field-row{gap:8px}.qr-stage{min-height:280px}.qr-card{width:228px;height:228px}.qr-mount{width:200px;height:200px}.page-footer{justify-content:center;text-align:center}}