:root{--bg:#f4f5f9;--card:#fff;--ink:#12141d;--mut:#5b6072;--line:#dfe2ec;--acc:#3b4fd8;--acc-ink:#fff;--accsoft:#e8ebff;--ok:#0f7a4d;--okbg:#e5f6ee;--warn:#8a5a00;--warnbg:#fff3d6;--bad:#b3261e;--badbg:#fde8e6;--paper:#fff;--r:14px;--sh:0 1px 2px rgba(20,24,40,.06),0 8px 24px rgba(20,24,40,.06);color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e1017;--card:#171a24;--ink:#eceef6;--mut:#a0a5b8;--line:#2a2e3d;--acc:#7b8cff;--acc-ink:#0b0e1d;--accsoft:#252c55;--ok:#6fe0a8;--okbg:#10301f;--warn:#f3c768;--warnbg:#3a2c0a;--bad:#ff9a92;--badbg:#3d1512;--paper:#222637;--sh:none;color-scheme:dark}}
:root[data-theme=dark]{--bg:#0e1017;--card:#171a24;--ink:#eceef6;--mut:#a0a5b8;--line:#2a2e3d;--acc:#7b8cff;--acc-ink:#0b0e1d;--accsoft:#252c55;--ok:#6fe0a8;--okbg:#10301f;--warn:#f3c768;--warnbg:#3a2c0a;--bad:#ff9a92;--badbg:#3d1512;--paper:#222637;--sh:none;color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 'Golos Text',system-ui,sans-serif;min-width:320px}

/* Cookie Consent Banner */
.cookie-consent{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:var(--card);
    border-top:1px solid var(--line);
    z-index:1000;
    box-shadow:0 -2px 10px rgba(0,0,0,0.1);
}

.cookie-content{
    max-width:1200px;
    margin:0 auto;
    padding:16px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}

.cookie-content p{
    margin:0;
    font-size:14px;
    color:var(--ink);
    flex:1;
    min-width:250px;
}

.cookie-link{
    color:var(--accent-text);
    text-decoration:underline;
}

.cookie-link:hover{
    color:var(--acc);
}

.cookie-buttons{
    display:flex;
    gap:8px;
    flex-shrink:0;
}

@media(max-width:640px){
    .cookie-content{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    
    .cookie-content p{
        min-width:100%;
    }
    
    .cookie-buttons{
        width:100%;
        justify-content:flex-end;
    }
}
h1,h2,h3{margin:0;line-height:1.25}h1{font-size:1.5rem}h2{font-size:1.05rem}a{color:var(--accent-text)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.skip{position:absolute;left:8px;top:-60px;background:var(--acc);color:var(--acc-ink);padding:10px 14px;border-radius:8px;z-index:50}.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px clamp(12px,3vw,32px);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{min-height:44px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:1.05rem;white-space:nowrap}.brand b span{color:var(--accent-text)}.brand-mark{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--acc);fill:var(--acc-ink)}
.main-nav,.top>nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}.main-nav::-webkit-scrollbar{display:none}
.main-nav button,.top>nav a{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:none;color:var(--mut);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;text-decoration:none}
.main-nav button:hover{background:var(--accsoft);color:var(--ink)}.main-nav button[aria-current=page]{background:var(--accsoft);color:var(--accent-text)}
.icon-btn{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center;flex:none}.icon-btn svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2}
.wrap{max-width:1280px;margin:0 auto;padding:20px clamp(12px,3vw,32px) 120px}
.create{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}.pad{padding:20px}
.type-bar{margin-bottom:14px}.types{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.types button{flex:none;scroll-snap-align:start;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.types button svg{width:18px;height:18px;stroke:currentColor;flex:none}.types button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--accent-text)}
.step-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line)}
.step-tabs button{min-height:56px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-bottom:3px solid transparent;background:none;color:var(--mut);font:inherit;font-weight:600;cursor:pointer;padding:0 4px}
.step-tabs i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--line);font-size:12px;color:var(--ink)}
.step-tabs button[aria-selected=true]{color:var(--accent-text);border-bottom-color:var(--accent-text)}.step-tabs button[aria-selected=true] i{background:var(--acc);color:var(--acc-ink)}
.panel{padding:20px}.panel[hidden]{display:none}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.panel-head.sep,h2.sep{margin-top:26px}
.muted{color:var(--mut);font-size:13px}.note{color:var(--mut);font-size:13px;margin:8px 0}.foot-note{color:var(--mut);font-size:12px;text-align:center;margin:14px 0 0}
label{display:block;font-size:13px;font-weight:600;color:var(--mut);margin:0 0 14px}
input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]),select,textarea{display:block;width:100%;min-height:46px;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px;font-weight:400}
textarea{min-height:110px;resize:vertical}input[type=color]{display:block;width:100%;height:46px;margin-top:6px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer}
input[type=range]{display:block;width:100%;margin-top:10px;accent-color:var(--accent-text);height:28px}input[type=file]{margin-top:6px;max-width:100%}
.chk{display:flex;align-items:center;gap:12px;min-height:44px;font-weight:500;color:var(--ink);cursor:pointer;margin:0}.chk input{width:22px;height:22px;accent-color:var(--accent-text);flex:none;margin:0}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.btn,button.btn{min-height:46px;padding:0 18px;border:1px solid var(--acc);border-radius:10px;background:var(--acc);color:var(--acc-ink);font:inherit;font-weight:700;cursor:pointer}.btn.ghost{background:none;color:var(--accent-text)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:not(:disabled):hover{filter:brightness(1.08)}
.upload{flex:1;min-width:200px}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-bottom:16px}
.presets button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);cursor:pointer;font:inherit}.presets span{width:36px;height:36px;border-radius:10px;border:1px solid var(--line)}.presets i{font-style:normal;font-size:11px;text-align:center}.presets button:hover{border-color:var(--accent-text)}
.shape-grid,.icon-grid,.seg,.frame-grid{display:grid;gap:8px}.shape-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}.shape-grid.eyes{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));margin:12px 0}.seg{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));margin-bottom:14px}.frame-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));margin-bottom:16px}
.shape-grid button,.icon-grid button,.seg button,.frame-grid button{min-height:52px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);cursor:pointer;display:grid;place-items:center;font:inherit;font-size:13px;font-weight:600}
.shape-grid svg{width:36px;height:36px;color:var(--ink)}.icon-grid svg{width:26px;height:26px}.frame-grid button{gap:4px;padding:8px 4px;font-size:11px;font-weight:600;text-align:center}.frame-grid svg{width:44px;height:44px;color:var(--ink)}
[aria-pressed=true]{border-color:var(--accent-text)!important;box-shadow:0 0 0 2px var(--acc);background:var(--accsoft)!important}
.preview{padding:16px}.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.stage{display:grid;place-items:center;min-height:240px;padding:14px;border-radius:12px;background:repeating-conic-gradient(color-mix(in srgb,var(--line) 55%,transparent) 0 25%,transparent 0 50%) 0 0/16px 16px,var(--paper)}.stage svg{display:block;width:100%;height:auto;max-width:420px;max-height:min(60vh,520px)}
.check{display:flex;gap:12px;align-items:flex-start;margin:12px 0;padding:12px 14px;border-radius:12px;border:1px solid var(--line)}.check b{display:block}.check p{margin:2px 0 0;font-size:13px;color:inherit}.check .dot{width:12px;height:12px;border-radius:50%;margin-top:5px;flex:none;background:var(--mut)}
.check[data-state=ok]{background:var(--okbg);color:var(--ok);border-color:currentColor}.check[data-state=ok] .dot{background:var(--ok)}.check[data-state=warn]{background:var(--warnbg);color:var(--warn);border-color:currentColor}.check[data-state=warn] .dot{background:var(--warn)}.check[data-state=fail]{background:var(--badbg);color:var(--bad);border-color:currentColor}.check[data-state=fail] .dot{background:var(--bad)}
.check[data-state=checking] .dot{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}@media(prefers-reduced-motion:reduce){.check .dot{animation:none!important}*{scroll-behavior:auto!important}}
.export-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.export-set label{margin:0}.export-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.export-actions .primary{grid-column:1/-1}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:14px 0}.tpl{display:grid;gap:6px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);cursor:pointer;font:inherit;font-size:12px;font-weight:600}.tpl svg{width:100%;height:auto;border-radius:6px}.save-style{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.save-style label{flex:1;min-width:200px;margin:0}
.tool{max-width:760px;margin:0 auto}.tag{font-size:11px;padding:3px 9px;border-radius:99px;background:var(--accsoft);color:var(--accent-text);font-weight:700}
#batchRows p{margin:4px 0;font-size:13px;color:var(--mut);overflow-wrap:anywhere}
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line)}.mobile-bar[hidden]{display:none!important}
.mini{width:48px;height:48px;flex:none;border-radius:8px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}.mini svg{width:100%;height:100%;display:block;object-fit:contain}.mini-status{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px}.mini-status b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:899px){.mobile-bar{display:flex}.export-actions .primary{display:none}.col-preview{order:-1}.col-preview .preview{position:static}.stage{min-height:200px}.stage svg{max-height:42vh}}
@media(max-width:560px){.top{gap:6px}.brand b{font-size:.95rem}.brand-mark{display:none}.step-tabs span{display:none}.step-tabs button{min-height:52px}.grid3{grid-template-columns:1fr 1fr}.export-set{grid-template-columns:1fr}.panel{padding:16px}.main-nav button{padding:0 10px;font-size:14px}}
@media(min-width:900px){.create{grid-template-columns:minmax(0,1fr) 400px;align-items:start;gap:24px}.col-preview{position:sticky;top:76px}}
@media(min-width:1280px){.create{grid-template-columns:minmax(0,1fr) 460px}}
/* dynamic-code management page (server-rendered) */
.dynamic-qr,.stats-grid,.status-box,.chart,form,.secret-note,.eyebrow,.dl,.row{max-width:760px}
body:not(.editor) main{max-width:800px;margin:0 auto;padding:24px clamp(12px,3vw,24px) 60px}.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--accent-text);font-weight:700;margin:0 0 6px}.secret-note{padding:12px 14px;border-radius:12px;background:var(--warnbg);color:var(--warn);font-size:14px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}.stat{padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}.stat strong{display:block;font-size:1.6rem}.stat span{color:var(--mut);font-size:13px}
.dynamic-qr{padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin:16px 0}#dynamic-stage{display:grid;place-items:center;padding:12px;background:#fff;border-radius:12px}#dynamic-stage svg,#dynamic-stage .qr{width:100%;max-width:340px;height:auto}
#dynamic-status[data-state=ok]{color:var(--ok)}#dynamic-status[data-state=fail]{color:var(--bad)}.dl{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.dl button,form button{min-height:46px;padding:0 18px;border:0;border-radius:10px;background:var(--acc);color:var(--acc-ink);font:inherit;font-weight:700;cursor:pointer}.dl button:disabled{opacity:.45}
.status-box{padding:12px 14px;border-radius:12px;background:var(--accsoft);overflow-wrap:anywhere}.chart{display:flex;gap:8px;align-items:flex-end;height:130px;margin:12px 0}.chart>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;font-size:11px;color:var(--mut);gap:3px}.chart i{display:block;width:100%;background:var(--acc);border-radius:4px 4px 0 0}
.types button[aria-pressed=true]{background:var(--acc)!important;color:var(--acc-ink)!important;box-shadow:none}
.wrap{padding-bottom:140px}@media(min-width:900px){.wrap{padding-bottom:40px}}

.tool.wide{max-width:1100px}.pic-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}@media(min-width:900px){.pic-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.pic-out{position:sticky;top:76px}}
.my-styles{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}.my-styles summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}.upload-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin:0;border:1px solid var(--acc);border-radius:10px;min-height:46px;padding:0 18px;color:var(--accent-text);font-weight:700}
.export-actions{grid-template-columns:1fr 1fr}.export-actions .btn{padding:0 10px;font-size:14px}
.types{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);padding-right:30px}.type-cap{margin:0 2px 6px;font-size:12px}
.upload-btn input{display:none}.range .muted{font-weight:400;font-size:12px;display:block}
.step-tabs button{padding:0 2px}@media(min-width:900px){.col-preview .preview{max-height:calc(100vh - 96px);overflow:auto}}
@media(max-width:430px){.top{padding:8px 10px;gap:4px}.brand b{font-size:.88rem}.main-nav{gap:0;margin-left:2px;flex:1;justify-content:flex-end}.main-nav button{padding:0 8px;font-size:13px}.icon-btn{width:40px;height:40px}.step-tabs span{display:none}}

/* ---- v10: one editor page, independent optional sections ---- */
.create{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"preview" "settings" "foot"}
.editor-settings{grid-area:settings;min-width:0;display:flex;flex-direction:column;gap:16px}#cardContent{padding:18px}#previewPanel{grid-area:preview;min-width:0}#cardStyle{padding:18px}.foot-note{grid-area:foot}
@media(min-width:900px){.create{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"settings preview" "foot preview";align-items:start;column-gap:24px}#previewPanel{position:sticky;top:76px;align-self:start}}
@media(min-width:1280px){.create{grid-template-columns:minmax(0,1fr) 460px}}
.field-title{margin:14px 0 8px;font-size:15px}.types{margin:10px 0 0;padding:2px 30px 8px 2px}
.mode-box{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.seg2 button{min-height:44px;border:0;border-radius:9px;background:none;color:var(--mut);font:inherit;font-weight:700;cursor:pointer;box-shadow:none!important}
.seg2 button[aria-pressed=true]{background:var(--card)!important;color:var(--accent-text);box-shadow:0 0 0 2px var(--acc)!important}
.limits{margin:8px 0 0;padding:12px 14px 12px 30px;border-radius:12px;background:var(--warnbg);color:var(--warn);font-size:13px}.limits li{margin:2px 0}
.sec{border:1px solid var(--line);border-radius:12px;margin-top:10px;background:var(--card)}.sec>summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px}
.sec>summary::-webkit-details-marker{display:none}.sec>summary::after{content:"+";font-size:20px;color:var(--mut);margin-left:6px}.sec[open]>summary::after{content:"–"}
.sec>summary .sum{margin-left:auto;font-size:12px;text-align:right}.sec-body{padding:2px 14px 14px}.sub{font-size:13px;color:var(--mut);margin:16px 0 8px;font-weight:700}
.adv{padding:0;margin-top:0}.btn.small{min-height:36px;padding:0 12px;font-size:13px}
.dl-row{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:end;margin-top:4px}.dl-row label{margin:0}.dl-row .btn{min-height:46px;width:100%}.dl-row:has(label[hidden]){grid-template-columns:1fr}
.more{margin-top:10px}.more>summary{cursor:pointer;color:var(--mut);font-weight:600;min-height:44px;display:flex;align-items:center}.more-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.more-actions .btn{padding:0 8px;font-size:13px}
.presets{margin-bottom:6px}.step-tabs,.type-bar{display:none}
@media(max-width:899px){#previewPanel{position:static}.stage{min-height:180px}.stage svg{max-height:30vh}#exportMain{display:none}.preview{padding:12px}.wrap{padding-bottom:110px}.mobile-bar .mini,.mobile-bar .mini-status{display:none}.mobile-bar .btn{width:100%}.mobile-bar{padding:8px 14px calc(8px + env(safe-area-inset-bottom))}}
@media(max-width:560px){.dl-row{grid-template-columns:1fr}}

/* v10 polish */
.top .brand b{white-space:nowrap}.main-nav{min-width:0}
@media(max-width:560px){.brand b{font-size:0}.brand b::before{content:"QR";font-size:1rem;font-weight:800}.brand-mark{display:grid}.brand-mark{width:28px;height:28px}.main-nav button{padding:0 9px;font-size:13px;min-height:40px}.top{padding:8px 10px}
 #cardContent{padding:14px}.field-title{display:none}.mode-box{margin-top:10px;padding-top:10px}.limits{display:block}.preview-head{margin-bottom:4px}.stage{min-height:0;padding:8px}.stage svg{max-height:34vh}#check{padding:8px 10px;margin:8px 0}}
.presets{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:560px){.presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.presets i{font-size:10px}}
.presets button{min-height:72px}.presets i{font-size:12px;color:var(--ink)}
.more>summary{list-style:none;display:flex;justify-content:space-between;padding:0 4px}.more>summary::-webkit-details-marker{display:none}.more>summary::after{content:"+";font-size:20px}.more[open]>summary::after{content:"–"}
.types{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.muted,.note{color:var(--mut)}.note{font-size:13px}
.limits[hidden],[hidden]{display:none!important}
@media(max-width:560px){#cardContent .panel-head{margin-bottom:6px}.types{margin-top:6px}.stage svg{max-height:30vh}}
.stage.transp{background:repeating-conic-gradient(color-mix(in srgb,var(--line) 55%,transparent) 0 25%,transparent 0 50%) 0 0/16px 16px,var(--paper)}
.sec>summary .sum{max-width:48%}.sec>summary b{white-space:nowrap}
@media(max-width:899px){#sec-colors .grid3:first-child{grid-template-columns:repeat(3,minmax(0,1fr))}#sec-colors .grid3 label{font-size:12px}}

label.btn.upload-btn,.btn.upload-btn{background:var(--card);color:var(--accent-text);border:1px solid var(--acc)}
.btn.primary.upload-btn{background:var(--acc);color:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed}
#picSec .row,#sec-image .row{display:flex;flex-wrap:wrap;gap:8px}#sec-image .row .btn{flex:1 1 30%;min-width:0;padding:0 10px}

/* v16: big, obvious shape tiles (5 per row) */
.shape-grid,.shape-grid.eyes{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media(min-width:560px){.shape-grid,.shape-grid.eyes{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}}
.shape-grid button{aspect-ratio:1;min-height:0;padding:10px;background:var(--card);border:2px solid var(--line);border-radius:12px}
.shape-grid svg{width:100%;height:100%}
.shape-grid button[aria-pressed=true]{border-color:var(--accent-text);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 25%,transparent)}
.sec-body .panel-head .muted{font-weight:600;color:var(--accent-text)}
/* v17 */
.shape-grid button[aria-pressed=true]{background:color-mix(in srgb,var(--acc) 14%,var(--card));border-color:var(--accent-text);color:var(--accent-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
.shape-grid button{color:var(--ink)}.shape-grid button:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--line))}
input[type=range]{height:32px}input[type=range]::-webkit-slider-thumb{width:24px;height:24px}input[type=range]::-moz-range-thumb{width:24px;height:24px}
@media(max-width:899px){.wrap{padding-bottom:110px}.sec-body .panel-head .muted{font-size:13px}}
/* v18: no scrollbars, no sliders */
.types{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;padding:2px!important;gap:8px}
.types button{justify-content:center;border-radius:12px;padding:0 10px}
@media(max-width:560px){.types{grid-template-columns:repeat(3,minmax(0,1fr))}.types button{gap:5px;padding:0 6px;font-size:13px}}
input[type=range].stepped{display:none}
.stepper{display:grid;grid-template-columns:48px 1fr 48px;gap:8px;align-items:center;margin-top:6px}
.stepper button{min-height:46px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--accent-text);font:inherit;font-size:22px;font-weight:700;cursor:pointer}
.stepper button:active{background:color-mix(in srgb,var(--acc) 14%,var(--card))}
.stepper output{text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:560px){.types button{min-width:0;overflow:hidden;font-size:12.5px;padding:0 4px}.types button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.types button svg{width:16px;height:16px}.main-nav button{padding:0 8px}}

label.off{opacity:.45}.chk:has(input:disabled){opacity:.5}#colorLock{background:var(--warnbg);color:var(--warn);padding:10px 12px;border-radius:10px}

/* Public help is outside the editor grid and never changes its controls. */
.editor-title{font-size:clamp(1.05rem,2vw,1.35rem);margin:0 0 16px}
.seo-guide{margin:32px auto 0;padding:24px;max-width:880px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow-wrap:anywhere}
.seo-guide h2{font-size:1.2rem}.seo-guide h3{font-size:1rem;margin:22px 0 10px}.seo-guide p,.public-copy p{line-height:1.7}
.faq-item{border-top:1px solid var(--line)}.faq-item summary{cursor:pointer;min-height:48px;padding:12px 0;font-weight:600}.faq-item p{margin:0 0 16px}
.site-footer{max-width:1280px;margin:auto;padding:20px clamp(12px,3vw,32px) 32px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;color:var(--mut);font-size:13px}.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}.site-footer a{display:inline-flex;align-items:center;min-height:44px}
.public-copy{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;overflow-wrap:anywhere}.public-copy h1{margin-bottom:20px}.public-copy h2{font-size:1.12rem;margin:28px 0 10px}.public-copy li{margin:8px 0}.public-copy ul,.public-copy ol{padding-left:24px}
@media(max-width:899px){.editor .wrap{padding-bottom:28px}.editor .site-footer{padding-bottom:100px}}
@media(max-width:560px){.seo-guide,.public-copy{padding:16px}.editor-title{margin-bottom:12px}.public-page .top nav a{padding:0 8px;font-size:13px}}

.editor-settings>details.sec{margin-top:0}.editor-settings>#cardStyle>.sec{margin-top:10px}
.editor #savedStyles{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}.editor #savedStyles .tpl{align-content:start;justify-items:center}.editor #savedStyles .tpl svg{width:56px;height:56px}.tpl span{max-width:100%;overflow-wrap:anywhere}
.editor .sec-body,.editor .panel-head,.editor .more-actions{min-width:0}.editor .sec>summary{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.editor .sec>summary .sum{max-width:none;flex:1 1 100%;order:2;text-align:left;margin-left:0}.editor .sec>summary::after{margin-left:auto}
.editor .stage:not(.transp){background:var(--paper)}.editor .dl-row{grid-template-columns:110px minmax(0,1fr)}.editor #copyStatus{overflow-wrap:anywhere}
@media(max-width:899px){.editor .top{position:static}.editor #previewPanel{position:static}.editor #previewPanel .preview{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:14px}.editor .preview-head,.editor .stage,.editor #check,.editor #copyStatus{grid-column:1/-1}.editor .stage{min-height:0}.editor .stage svg{max-height:19vh}.editor .dl-row{grid-template-columns:1fr;margin:0}.editor .dl-row label{max-width:160px}.editor .more{align-self:end;margin:0}.editor .more>summary{line-height:1.25;min-height:46px}.editor .more[open]{grid-column:1/-1}.editor .save-style label{min-width:0;flex-basis:100%}.editor .more-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Expanded mobile preview: artwork left, complete readability feedback right. */
@media(max-width:899px){
.editor #previewPanel:not(.is-pinned) .preview{grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:10px 12px}
.editor #previewPanel:not(.is-pinned) .preview-head{grid-column:1/-1;margin:0}
.editor #previewPanel:not(.is-pinned) .stage{grid-column:1;grid-row:2;align-self:start;min-width:0;min-height:0;padding:0}
.editor #previewPanel:not(.is-pinned) .stage>svg{width:100%;height:auto;max-height:none;object-fit:contain}
.editor #previewPanel:not(.is-pinned) #check{grid-column:2;grid-row:2;align-self:start;min-width:0;margin:0;padding:10px 8px;gap:6px;font-size:13px}
.editor #previewPanel:not(.is-pinned) #check>div{min-width:0;overflow-wrap:anywhere}
.editor #previewPanel:not(.is-pinned) #check .dot{width:8px;height:8px;margin-top:6px}
.editor #previewPanel:not(.is-pinned) .dl-row{grid-column:1;grid-row:3}
.editor #previewPanel:not(.is-pinned) .more{grid-column:2;grid-row:3}
.editor #previewPanel:not(.is-pinned) .more[open]{grid-column:1/-1;grid-row:4}
}

/* Mobile preview: reserve its flow space while a compact live QR is pinned. */
.preview-slot{display:none}.preview-expand{display:none}
@media(max-width:899px){
.preview-slot{display:block;grid-area:preview;min-width:0;pointer-events:none;position:relative;z-index:1}
.editor #previewPanel.is-pinned{position:fixed;z-index:19;margin:0;align-self:start;will-change:transform}
.editor #previewPanel.is-pinned .preview{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;gap:0 12px;padding:8px;border-radius:0 0 14px 14px;box-shadow:0 4px 14px #10162220}
.editor #previewPanel.is-pinned .stage{grid-column:1;grid-row:1/3;width:96px;height:96px;padding:0;margin:0;min-height:0;will-change:transform}
.editor #previewPanel.is-pinned .stage>svg{width:100%;height:100%;max-height:96px;object-fit:contain;will-change:transform}
.editor #previewPanel.is-pinned .preview-head{grid-column:2;grid-row:1;flex-wrap:wrap;gap:4px;margin:0;will-change:transform}
.editor #previewPanel.is-pinned .preview-head h2{font-size:13px;margin:0}
.editor #previewPanel.is-pinned #dimInfo{display:none}
.editor #previewPanel.is-pinned .preview-expand{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;padding:4px 6px 4px 11px;border:0;border-radius:14px;background:#FFCC00;color:#101622;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 2px 0 #d99a00,0 4px 10px #FF65001a;transition:transform .15s ease,box-shadow .15s ease;will-change:transform}
.editor #previewPanel.is-pinned .preview-expand svg{display:block;flex:none;width:26px;height:26px;padding:3px;border-radius:9px;background:#FF6500;color:#101622;transition:transform .15s ease;will-change:transform}
.editor #previewPanel.is-pinned .preview-expand:focus-visible{outline:3px solid #FF6500;outline-offset:3px}
@media(hover:hover){.editor #previewPanel.is-pinned .preview-expand:hover{background:#FFCC00;box-shadow:0 2px 0 #d99a00,0 5px 14px #FF650033;transform:translateY(-1px)}.editor #previewPanel.is-pinned .preview-expand:hover svg{transform:translateY(1px)}}
.editor #previewPanel.is-pinned .preview-expand:active{transform:translateY(1px);box-shadow:0 1px 0 #d99a00}
@media(prefers-reduced-motion:reduce){.editor #previewPanel.is-pinned .preview-expand,.editor #previewPanel.is-pinned .preview-expand svg{transition:none;transform:none}}
.editor #previewPanel.is-pinned #check{grid-column:2;grid-row:2;padding:4px 0;margin:0;border:0;background:none;font-size:12px;will-change:transform}
.editor #previewPanel.is-pinned #check p{display:none}
.editor #previewPanel.is-pinned .dl-row,.editor #previewPanel.is-pinned .more,.editor #previewPanel.is-pinned #copyStatus{display:none}
.editor #previewPanel.is-pinned .preview-head{display:flex;align-items:center;justify-content:space-between;gap:8px;will-change:transform}
.editor-settings :is(input,select,textarea,button,summary),.editor-settings>.sec{scroll-margin-top:136px;scroll-margin-bottom:90px}
}

/* Mobile zoom layout fixes */
@media(max-width:899px){
    /* Ensure smooth transitions during zoom changes */
    .editor #previewPanel.is-pinned {
        transform-origin: top left;
    }
    
    /* Prevent layout shifts during zoom by maintaining consistent positioning */
    .editor #previewPanel.is-pinned .preview {
        contain: layout style paint;
    }
    
    /* Handle zoom level changes by updating positioning */
    @media (prefers-reduced-motion: no-preference) {
        .editor #previewPanel.is-pinned {
            transition: none;
        }
    }
    
    /* Ensure proper stacking context during zoom */
    .editor #previewPanel.is-pinned {
        isolation: isolate;
    }
}

/* Enhanced mobile preview handling */
@media(max-width:899px){
    /* Prevent content jumping during zoom by maintaining consistent dimensions */
    .editor #previewPanel.is-pinned .stage {
        contain: strict;
    }
    
    /* Ensure smooth positioning during scroll and zoom */
    .editor #previewPanel.is-pinned {
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    /* Handle zoom-induced layout changes */
    @media (orientation: portrait) {
        .editor #previewPanel.is-pinned {
            max-height: calc(100vh - 120px);
        }
    }
}
@font-face{font-family:'Golos Text';src:url('/static/fonts/GolosText-400.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Golos Text';src:url('/static/fonts/GolosText-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Golos Text';src:url('/static/fonts/GolosText-600.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
:root{--bg:#F7F7F2;--card:#fff;--ink:#101622;--mut:#60646b;--line:#e0e1da;--acc:#FFCC00;--acc-ink:#101622;--accsoft:#fff5cc;--accent-text:#101622;--secondary:#FF6500;--paper:#fff;--r:18px;--sh:0 2px 3px #10162203,0 10px 30px #10162204}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#101622;--card:#1b2331;--ink:#F7F7F2;--mut:#b2bac6;--line:#354051;--acc:#FFCC00;--acc-ink:#101622;--accsoft:#36311c;--accent-text:#FFCC00;--paper:#fff;--sh:none}}
:root[data-theme=dark]{--bg:#101622;--card:#1b2331;--ink:#F7F7F2;--mut:#b2bac6;--line:#354051;--acc:#FFCC00;--acc-ink:#101622;--accsoft:#36311c;--accent-text:#FFCC00;--paper:#fff;--sh:none}
h1,h2,h3,b,strong{font-weight:600}.btn,button.btn,.types button,.seg2 button,.main-nav button,.top>nav a,.upload-btn{font-weight:500}
a{text-underline-offset:3px}a:hover{text-decoration-thickness:2px}:focus-visible{outline-color:var(--secondary)}
.brand{gap:9px;font-size:24px;letter-spacing:-.8px}.brand b{font-weight:600}.brand-duck{width:46px;height:46px;object-fit:contain;background:#F7F7F2;border-radius:12px;flex:none}
.top{background:var(--card)}.top .brand b{font-size:24px}.brand b::before{content:none!important}.main-nav button[aria-current=page]{background:var(--acc);color:#101622}
.qwak-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:2px 0 22px;padding:2px 4px}
.qwak-kicker{font-size:11px;letter-spacing:.1em;font-weight:500;margin:0 0 8px;display:flex;align-items:center;gap:8px}.qwak-kicker::before{content:'';width:8px;height:8px;background:var(--secondary);border-radius:3px}
.editor-title{font-size:clamp(24px,3vw,34px);letter-spacing:-1px;line-height:1.13;margin:0 0 9px}.qwak-description{font-size:14px;color:var(--mut);max-width:530px;margin:0;line-height:1.5}
.intro-duck{width:116px;height:116px;object-fit:contain;flex:none;background:#F7F7F2;border-radius:20px;border:1px solid var(--line)}
.preview{border-top:4px solid var(--acc)}.preview-head h2,.panel-head h2{font-size:16px}.card .panel-head{align-items:center}.btn.primary,.btn.primary.upload-btn{background:#FFCC00;color:#101622;border-color:#FFCC00}.btn.primary:not(:disabled):hover{background:#f1bf00;filter:none}
.btn.ghost,label.btn.upload-btn,.btn.upload-btn{color:var(--ink);border-color:var(--line);background:var(--card)}.btn.ghost:hover,label.btn.upload-btn:hover{border-color:var(--secondary)}
.seg2 button[aria-pressed=true]{color:var(--ink)}.types button[aria-pressed=true]{color:#101622!important}.types button,.shape-grid button,.sec{transition:border-color .15s ease}.types button:hover{border-color:var(--secondary)}
.seo-guide a,.public-copy a,.site-footer a,.row>a{text-decoration:underline}.footer-brand{font-weight:600;color:var(--ink)}.footer-brand>span{font-weight:400;color:var(--mut)}.site-footer{align-items:center;justify-content:space-between}
.public-page .brand,.top .brand{color:var(--ink)}.public-copy h1{letter-spacing:-.7px;font-size:28px}.public-copy{border-top:4px solid var(--acc)}
#dynamic-stage{background:#fff}.eyebrow{color:var(--accent-text)}.stats-grid .stat:first-child{border-top:3px solid var(--secondary)}
@media(max-width:899px){.qwak-intro{margin-bottom:16px;gap:14px}.intro-duck{width:96px;height:96px}.editor .stage svg{max-height:19vh}.site-footer{justify-content:flex-start}}
@media(max-width:560px){.editor .top{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:8px 12px}.editor .main-nav{grid-row:2;grid-column:1/-1;width:100%;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;overflow:visible}.main-nav button{justify-content:center;padding:0 6px;font-size:13px}.editor #themeBtn{grid-column:2;grid-row:1}.brand-duck{width:38px;height:38px;border-radius:10px}.top .brand b{font-size:22px}.qwak-intro{padding:0;gap:10px;align-items:center}.editor-title{font-size:24px;letter-spacing:-.8px}.qwak-kicker{font-size:9px;letter-spacing:.06em;margin-bottom:6px}.qwak-description{font-size:12px}.intro-duck{width:96px;height:96px}.wrap{padding-top:16px}.public-page .top{gap:6px;padding:8px 12px}.public-copy h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){.types button,.shape-grid button,.sec{transition:none}}

/* Mobile first screen: primary input precedes optional type/style choices. */
@media(max-width:899px){
  .editor .wrap{padding-top:10px;padding-bottom:110px}
  .editor .qwak-intro{margin:0 0 12px;padding:0;gap:0}
  .editor .qwak-kicker,.editor .qwak-description,.editor .intro-duck{display:none}
  .editor .editor-title{font-size:20px;line-height:1.2;margin:0;letter-spacing:-.5px}
  .editor #previewPanel:not(.is-pinned) .preview{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px 12px;padding:10px}
  .editor #previewPanel:not(.is-pinned) .preview-head{grid-column:1/-1;margin:0}
  .editor #previewPanel:not(.is-pinned) .stage{grid-column:1;grid-row:2;width:112px;height:112px;min-height:0;padding:0;align-self:start}
  .editor #previewPanel:not(.is-pinned) .stage>svg{width:100%;height:100%;max-height:none;object-fit:contain}
  .editor #previewPanel:not(.is-pinned) #check{grid-column:2;grid-row:2;margin:0;padding:8px;gap:6px;font-size:13px;align-self:start}
  .editor #check>div{min-width:0;overflow-wrap:anywhere}
  .editor #previewPanel:not(.is-pinned) #check p{font-size:12px;line-height:1.35}
  .editor #previewPanel:not(.is-pinned) .dl-row{grid-column:1;grid-row:3;margin:0}
  .editor #previewPanel:not(.is-pinned) .dl-row label{font-size:12px;max-width:none}
  .editor #previewPanel:not(.is-pinned) .dl-row select{margin-top:2px;min-height:44px;padding:8px}
  .editor #previewPanel:not(.is-pinned) .more{grid-column:2;grid-row:3;margin:0;align-self:end}
  .editor #previewPanel:not(.is-pinned) .more>summary{font-size:12px;min-height:44px;padding:0;gap:6px}
  .editor #previewPanel:not(.is-pinned) .more[open]{grid-column:1/-1;grid-row:4}
  .editor #copyStatus:empty{display:none}
  .editor #cardContent{display:flex;flex-direction:column;padding:12px}
  .editor #cardContent>.panel-head{order:-2;margin-bottom:8px}
  .editor #cardContent>#fields{order:-1}
  .editor #fields>label:last-child{margin-bottom:6px}
  .editor .top{padding-top:4px;padding-bottom:4px}
  .editor #previewPanel.is-pinned{contain:layout style;transform:none;backface-visibility:visible;perspective:none;max-height:none}
  .editor #previewPanel.is-pinned .preview{grid-template-columns:96px minmax(0,1fr);padding:8px;gap:0 12px}
  .editor #previewPanel.is-pinned .stage{width:96px;height:96px;contain:none}
  .editor #previewPanel.is-pinned .preview-expand{min-height:44px;min-width:44px}
  .editor #mobileBar{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .editor #cookieConsent{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .editor .cookie-content{display:flex;flex-direction:column;gap:8px;padding:0}
  .editor .cookie-content p{font-size:12px;line-height:1.4;margin:0}
  .editor .cookie-buttons{display:flex;gap:8px;width:100%}
  .editor .cookie-buttons .btn{min-height:44px;flex:1}
  .editor.is-editing #mobileBar,.editor.is-editing #cookieConsent{display:none}
  .editor .editor-settings :is(input,select,textarea,button,summary){scroll-margin-top:136px;scroll-margin-bottom:100px}
}

/* Compact mobile preview/footer: move the one live selector, keep QR quiet zone. */
@media(max-width:899px){
  .editor #previewPanel:not(.is-pinned) .preview{row-gap:4px;padding:8px 10px}
  .editor #previewPanel #dimInfo{display:none}
  .editor #previewPanel:not(.is-pinned) #check{align-self:center}
  .editor #previewPanel:not(.is-pinned) .dl-row{display:none}
  .editor #previewPanel:not(.is-pinned) .more{grid-column:1/-1;grid-row:3;align-self:start}
  .editor #previewPanel:not(.is-pinned) .more>summary{min-height:32px}
  .editor #previewPanel:not(.is-pinned) .more[open]{grid-row:3}
  .editor #mobileBar{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px;align-items:center;padding:6px 12px calc(6px + env(safe-area-inset-bottom))}
  .editor #mobileBar .mini,.editor #mobileBar .mini-status{display:none}
  .editor #mobileBar .export-format{display:block;margin:0;min-width:0;font-size:0;line-height:0}
  .editor #mobileBar #format{width:100%;min-width:0;min-height:44px;margin:0;padding:8px;font-size:14px;line-height:1.2}
  .editor #mobileBar #exportBar{width:100%;min-width:0;min-height:44px;margin:0;padding:8px 6px;white-space:nowrap;font-size:13px}
  .editor.is-editing #mobileBar,.editor #mobileBar[hidden]{display:none}
}

@media(max-width:899px){.editor #mobileBar .export-format[hidden]{display:none}.editor #mobileBar:has(.export-format[hidden]){grid-template-columns:minmax(0,1fr)}}