:root{--navy:#0d1728;--navy2:#1d2a3c;--ink:#182337;--muted:#778193;--line:#e7eaef;--page:#f6f7f9;--orange:#e8774b;--coral:#ffece4;--green:#207866;--white:#fff;--shadow:0 12px 55px rgba(23,35,54,.035)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--page);font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.46}a{text-decoration:none;color:inherit}input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,.upload-button:focus-visible{outline:3px solid #d8aa83;outline-offset:2px}button,input,textarea,select{transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}button:active:not(:disabled){transform:translateY(1px)}.app-shell{min-height:100vh}.topbar{height:76px;background:#0b1423;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1360px)/2));box-shadow:0 2px 9px rgba(0,0,0,.06)}.brand{display:inline-flex;align-items:center;gap:11px}.brand-mark{width:39px;height:39px;background:var(--orange);border-radius:11px;padding:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:rotate(-5deg)}.brand-mark i{display:block;border:2.5px solid #fff;border-radius:2px}.brand-mark i:nth-child(4){border:0;background:white;border-radius:100%}.brand-title{display:flex;align-items:baseline;gap:0;letter-spacing:-.7px;font-weight:850;font-size:22px}.brand-title>span{color:#faad84}.brand-title small{font-size:10px;letter-spacing:1.1px;color:#a2abb8;margin-left:10px;font-weight:600}.topbar-right{display:flex;gap:20px;align-items:center}.privacy-chip{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.2px;color:#a8b9b5;font-weight:760}.privacy-dot{width:7px;height:7px;background:#66cdaa;border-radius:100%;box-shadow:0 0 0 4px rgba(102,205,170,.09)}.top-button{display:flex;align-items:center;gap:9px;border:1px solid #344052;border-radius:9px;padding:11px 13px;background:#172335;color:#edf3fc;font-size:12px;font-weight:650}.top-button:hover{background:#223249}.top-button .icon{font-size:19px;line-height:10px}.top-button b{background:#364253;color:#dce3ed;border-radius:5px;font-size:10px;min-width:20px;padding:3px}.main-wrap{max-width:1408px;margin:auto;padding:43px 24px 30px}.intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:32px;gap:24px}.eyebrow{color:#9b5b43;font-size:10px;letter-spacing:2px;font-weight:850;display:flex;align-items:center;gap:9px;margin-bottom:14px}.eyebrow span{height:9px;width:9px;background:var(--orange);border-radius:2px;transform:rotate(45deg)}h1,h2,h3,p{margin-top:0}h1{font-weight:820;font-size:clamp(28px,3.5vw,44px);letter-spacing:-1.7px;line-height:1.13;margin-bottom:12px}h1 span{color:#c77a57}.intro p{font-size:14px;line-height:1.75;color:#7f8795;max-width:665px;margin:0}.intro-note{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #e9e6e3;border-radius:12px;padding:14px 17px;flex-shrink:0}.intro-note .note-icon{font-size:27px;color:#d48f6a}.intro-note strong,.intro-note small{display:block}.intro-note strong{font-size:12px;color:#3d4654}.intro-note small{font-size:11px;color:#939baa;margin-top:4px}.workspace{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);gap:22px;align-items:start}.panel{background:#fff;border:1px solid #e9ebf0;border-radius:16px;box-shadow:var(--shadow)}.editor{padding:29px 32px 25px}.section-title-row,.preview-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-title-row>div:first-child,.preview-header>div:first-child{display:flex;align-items:center;gap:12px}.section-title-row h2,.preview-header h2{font-size:16px;letter-spacing:-.25px;margin:0;font-weight:760}.step-number{height:25px;width:25px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#eaf0f3;color:#47576b;font-size:10px;font-weight:840;border-radius:7px}.step-number.orange{background:#fae2d7;color:#b85a31}.tiny-label{font-size:10px;font-weight:800;letter-spacing:1px;color:#a4aab4}.type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:21px}.type-button{padding:13px 12px 11px;border:1px solid #e9eaf0;border-radius:11px;min-height:91px;text-align:left;background:white;display:flex;flex-direction:column;gap:12px;color:#596579;font-size:12px;font-weight:720}.type-button .type-icon{color:#818b9b;font-size:22px;width:25px;height:25px;display:flex;align-items:center;justify-content:center}.type-button:hover{border-color:#e5b99f;background:#fffcfa}.type-button.active{border-color:#ecb194;background:#fff4ee;color:#ad582f;box-shadow:inset 0 0 0 1px #ecb194}.type-button.active .type-icon{color:#be6941}.section-divider{height:1px;background:#edf0f3;margin:28px 0}.inputs-head{margin-bottom:19px}.type-badge{font-size:11px;font-weight:760;color:#d06b42;background:#fff2eb;border-radius:100px;padding:6px 11px}.fields{display:flex;flex-direction:column;gap:16px}.field{min-width:0}.field label{display:block;margin-bottom:7px;font-weight:650;font-size:12px;color:#39445a}.optional{font-weight:500;color:#a0a8b5}.field input,.field select,.field textarea{width:100%;background:#fbfcfd;border:1px solid #dfe5ec;border-radius:9px;padding:12px 13px;color:#273449;font-size:13px;min-height:44px;outline:none}.field textarea{resize:vertical;min-height:96px;line-height:1.6}.field input:focus,.field select:focus,.field textarea:focus{border-color:#e7a584;box-shadow:0 0 0 3px rgba(230,153,115,.11);background:#fff}.field input::placeholder,.field textarea::placeholder{color:#abb3be}.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23748394' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:34px}.field-note{color:#929cab;margin:7px 1px 0;font-size:11px;line-height:1.5}.two-inputs{display:grid;grid-template-columns:1fr 1fr;gap:13px}.setting-block{margin:17px 0 18px}.setting-title{font-weight:650;color:#39445a;font-size:12px;margin-bottom:10px}.preset-row{display:flex;align-items:center;gap:12px}.color-dot{width:29px;height:29px;border-radius:50%;border:2px solid white;outline:1px solid #e3e6ed;background:var(--swatch);flex-shrink:0}.color-dot.is-active{outline:2px solid var(--orange);outline-offset:2px}.custom-color{position:relative;cursor:pointer;width:29px;height:29px;display:grid;place-items:center;border:1px dashed #bac3ce;border-radius:50%;overflow:hidden}.custom-color input{position:absolute;inset:-10px;width:60px;height:60px;opacity:0;cursor:pointer}.custom-color span{font-size:19px;color:#8794a6;pointer-events:none}.preset-hint{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;color:#9aa3b0;margin-left:auto}.settings-cols{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:15px}.design-head{margin-bottom:3px}.logo-row{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px dashed #d9dfe8;border-radius:10px;padding:14px;margin-top:16px}.logo-row strong{font-size:12px;font-weight:650}.logo-row small{display:block;color:#949ead;line-height:1.5;font-size:11px;max-width:310px;margin-top:4px}.logo-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}.upload-button{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:7px;background:#edf1f5;color:#47596c;font-size:11px;cursor:pointer;font-weight:780}.upload-button:hover{background:#dfe8f2}.text-button{border:0;color:#a44c3e;background:none;font-size:11px}.design-footnote{font-size:11px;color:#939eaa;line-height:1.5;margin:13px 0 0}.preview{display:flex;flex-direction:column;gap:19px}.preview-panel{overflow:hidden}.preview-header{padding:23px 25px}.live-indicator{font-size:9px;letter-spacing:1px;font-weight:800;color:#418f75;display:flex;align-items:center;gap:6px}.live-indicator>span{display:block;width:7px;height:7px;background:#6ec69c;border-radius:50%}.preview-stage{min-height:392px;background:radial-gradient(circle at 15% 13%,#ffe5d8 0,transparent 47%),linear-gradient(145deg,#fff4ec,#f4e4dd 55%,#f8eeee);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;overflow:hidden;padding:30px 20px 24px}.preview-noise{position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(#cc9c82 .65px,transparent .65px);background-size:15px 15px}.qr-card{width:min(80%,290px);background:#fff;border-radius:14px;padding:14px;box-shadow:0 16px 40px rgba(97,65,51,.14),0 2px 10px rgba(97,65,51,.05);z-index:1;min-height:185px;display:grid;place-items:center}.qr-mount{width:100%;height:auto;display:grid;place-items:center}.qr-mount svg{width:100%;height:auto;max-height:325px;display:block}.stage-label{position:relative;z-index:1;margin-top:23px;letter-spacing:3px;font-size:10px;font-weight:800;color:#a47a6d}.message-box{display:none;margin:16px 24px 0;padding:12px 14px;border-radius:8px;font-size:12px;line-height:1.5}.message-box.show{display:block}.message-box.error{background:#fff0ed;color:#ae5239;border:1px solid #f6d9d0}.message-box.warning{background:#fff8e9;color:#a26f25;border:1px solid #f3e4c9}.payload-panel{margin:21px 25px 0;background:#f6f8fa;border:1px solid #eaf0f4;border-radius:10px;padding:15px 17px}.payload-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.payload-title>span{letter-spacing:1px;color:#98a2ad;font-size:10px;font-weight:800}.copy-payload{border:0;background:none;color:#d1744f;font-size:11px;font-weight:720;padding:0}.payload-value{margin-top:10px;white-space:pre-wrap;word-break:break-word;max-height:80px;overflow:auto;color:#576579;font-size:12px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.qr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid #edf0f2;margin-top:22px;padding:17px 25px 23px}.qr-stats div{display:flex;flex-direction:column;gap:8px}.qr-stats span{font-size:9px;letter-spacing:.8px;color:#adb5bf;font-weight:820}.qr-stats strong{font-size:12px;font-weight:730;color:#526073}.export-panel{padding:23px 25px}.export-head{margin-bottom:19px}.filename-wrap{position:relative}.filename-wrap input{padding-right:124px!important}.filename-wrap span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:#a7afba;pointer-events:none}.download-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:17px}.download-button{border:1px solid #e2e7ed;border-radius:10px;background:white;padding:14px;display:flex;align-items:center;gap:11px;text-align:left;color:#445067;min-height:70px}.download-button:hover:not(:disabled){border-color:#e9ad8a;background:#fffcfa}.download-button.primary{grid-column:1/-1;background:#172337;color:#fff;border-color:#172337}.download-button.primary:hover:not(:disabled){background:#2a3951;border-color:#2a3951}.download-button .download-icon{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border-radius:8px;background:#f3f5f8;color:#617188;font-size:22px}.download-button.primary .download-icon{background:#344258;color:#fff}.download-button span strong{display:block;font-weight:850;letter-spacing:.5px;font-size:13px}.download-button em{font-size:9px;font-style:normal;color:#e7a585;border:1px solid #845c50;border-radius:4px;padding:2px 5px;margin-left:6px;vertical-align:1px}.download-button small{display:block;font-size:11px;margin-top:5px;color:#98a3af}.download-button.primary small{color:#aab6c4}.export-actions{display:flex;gap:9px;margin-top:15px}.secondary-action{border:1px solid #e5eaf0;background:#fff;border-radius:8px;padding:10px 14px;color:#677488;font-size:11px;font-weight:700;flex:1}.secondary-action:hover{background:#f8fafb}.export-footnote{color:#a0a9b4;font-size:10px;line-height:1.5;margin:15px 0 0}footer{font-size:10px;letter-spacing:.15px;color:#a0a7b2;text-align:center;padding:31px 0 7px}footer span{margin-left:3px}footer .sep{margin:0 7px}.dialog-backdrop{position:fixed;inset:0;z-index:30;background:#08121dc9;display:grid;place-items:center;padding:18px}.dialog-backdrop[hidden]{display:none}.dialog{background:#fff;border-radius:16px;width:min(500px,100%);max-height:min(690px,90vh);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 70px #0005}.dialog-head{padding:24px 25px 8px;display:flex;align-items:start;justify-content:space-between}.dialog-head small{font-size:10px;letter-spacing:1.1px;font-weight:760;color:#cc7955}.dialog-head h2{font-size:20px;letter-spacing:-.4px;margin:5px 0 0}.close-dialog{background:#f0f2f5;border:0;border-radius:7px;width:32px;height:32px;font-size:25px;color:#758091}.dialog-info{color:#929aa8;margin:4px 25px 15px;font-size:12px;line-height:1.5}.history-list{padding:5px 25px 20px;overflow:auto;min-height:110px}.history-item{display:flex;align-items:center;gap:12px;border:1px solid #e6ebf0;border-radius:10px;padding:13px;margin-bottom:8px}.history-icon{width:37px;height:37px;border-radius:9px;display:grid;place-items:center;background:#fff1ea;color:#d77751;font-size:19px}.history-item-info{min-width:0;flex:1}.history-item-info strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-item-info small{display:block;color:#98a0ad;margin-top:5px;font-size:10px}.history-item button{border:0;background:#eef2f5;border-radius:7px;padding:8px 10px;color:#40546a;font-size:11px;font-weight:720}.history-item .delete-one{background:transparent;color:#c07860;font-size:18px;padding:5px}.history-empty{text-align:center;color:#97a2ae;padding:25px 5px;font-size:12px;line-height:1.7}.history-empty strong{display:block;color:#4c5a70;margin-bottom:5px}.dialog-footer{border-top:1px solid #edf0f3;padding:15px 25px;display:flex;align-items:center;justify-content:space-between;color:#a2acb7;font-size:11px}.danger-link{border:0;background:none;color:#b86657;font-size:11px;font-weight:750}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px);background:#172337;color:white;border-radius:9px;padding:12px 17px;box-shadow:0 10px 30px #0003;font-size:12px;line-height:1.4;max-width:min(400px,90%);text-align:center;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}@media(max-width:1050px){.topbar{padding:0 25px}.workspace{grid-template-columns:minmax(0,1fr) minmax(330px,.86fr);gap:14px}.main-wrap{padding:35px 16px 22px}.editor{padding:23px}.intro-note{display:none}.preview-header,.export-panel{padding-left:19px;padding-right:19px}.qr-stats{padding-left:19px;padding-right:19px}.payload-panel{margin-left:19px;margin-right:19px}}@media(max-width:800px){.workspace{grid-template-columns:minmax(0,1fr)}.main-wrap{max-width:620px;padding:27px 15px 25px}.intro{margin-bottom:23px}.intro p{font-size:13px}.preview-stage{min-height:375px}.preview{gap:14px}.editor{padding:23px}.privacy-chip{display:none}}@media(max-width:520px){.topbar{height:64px;padding:0 16px}.brand-mark{width:33px;height:33px;border-radius:9px;padding:8px}.brand-title{font-size:18px}.brand-title small{display:none}.top-button{padding:9px;font-size:11px}.top-button span:nth-child(2){display:none}.main-wrap{padding:25px 11px}.intro{padding:0 5px}.intro h1{font-size:33px;letter-spacing:-1.25px}.intro p{font-size:12px}.editor{padding:20px 16px}.type-grid{gap:7px}.type-button{min-height:83px;padding:11px 9px;gap:8px;font-size:11px}.section-title-row h2,.preview-header h2{font-size:15px}.type-button .type-icon{font-size:20px}.settings-cols{gap:9px}.setting-block{margin-top:15px}.preset-row{gap:9px}.color-dot{width:27px;height:27px}.preset-hint{font-size:10px}.logo-row{align-items:start;flex-direction:column}.logo-actions{align-self:end}.preview-header{padding:20px 17px}.preview-stage{min-height:335px}.qr-card{width:min(76%,260px)}.qr-stats{padding:17px}.payload-panel{margin:18px 17px 0}.export-panel{padding:20px 17px}.download-button{padding:12px}.download-button small{font-size:10px}.export-head .tiny-label{font-size:9px}.two-inputs{grid-template-columns:1fr 1fr}.qr-stats span{font-size:8px}.qr-stats strong{font-size:11px}footer{padding-left:12px;padding-right:12px;line-height:1.8}}