:root{--bg:#000;--c1:#1c1c1e;--c2:#2c2c2e;--c3:var(--c3);--t:#f2f2f7;--t2:#98989f;--ac:#0a84ff;--wn:#ff9f0a;--ok:#30d158;color-scheme:dark;box-sizing:border-box;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
*,*::before,*::after{box-sizing:inherit}[hidden]{display:none!important}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t);font-family:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
button{-webkit-tap-highlight-color:transparent}
.top,.app,.fw,.copy{max-width:1120px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 20px 10px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:26px;font-weight:300;letter-spacing:-.5px;color:var(--t);text-decoration:none}.brand b{font-weight:600;color:var(--ac)}.brand img{border-radius:8px}
.brand.sm{font-size:20px}.tag{font-size:14px;font-weight:300;color:var(--t2)}
.app{padding:10px 20px 36px;display:grid;grid-template-columns:minmax(0,1fr) 410px;grid-template-areas:"content prev" "custom prev";grid-template-rows:auto 1fr;gap:16px;align-items:start}
#content{grid-area:content}#custom{grid-area:custom}
#prev{grid-area:prev;position:sticky;top:calc(16px + env(safe-area-inset-top,0px));max-height:calc(100vh - 32px);overflow:auto;scrollbar-width:none}
.card{background:var(--c1);border-radius:26px;padding:20px}
.card h2{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-size:13px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--t2)}.card h2 .i{width:17px;height:17px}
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-bottom:18px}
.tile{font:inherit;font-size:13px;color:var(--t);background:var(--c2);border:0;border-radius:16px;padding:13px 4px 11px;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;transition:background .15s,transform .1s}
.tile .i{width:22px;height:22px}.tile:active{transform:scale(.96)}.tile.on{background:var(--ac);color:#fff;font-weight:500}
.fl{margin-top:14px}.fl:first-child{margin-top:0}.fl label{display:block;margin:0 0 6px 4px}
label,.rl{font-size:14px;color:var(--t2)}
.txt{width:100%;font:inherit;font-size:16px;color:var(--t);background:var(--c2);border:0;border-radius:14px;padding:12px 14px;outline:0;resize:vertical}
.txt:focus{box-shadow:0 0 0 2px var(--ac)}.txt::placeholder{color:var(--ph);font-weight:300}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip,.btn{font:inherit;font-size:14px;color:var(--t);background:var(--c2);border:0;border-radius:999px;padding:9px 15px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;justify-content:center;white-space:nowrap;transition:background .15s,transform .1s}
.chip:active,.btn:active{transform:scale(.96)}.chip.on{background:var(--ac);color:#fff;font-weight:500}.chip.sq{padding:9px 12px}
.seg{display:flex;gap:2px;padding:3px;background:var(--c2);border-radius:13px}
.seg button{flex:1;font:inherit;font-size:14px;color:var(--t);background:none;border:0;border-radius:10px;padding:9px 6px;display:flex;gap:7px;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.seg button.on{background:var(--c6);font-weight:500}.seg .i{width:17px;height:17px}.seg.sm button{font-size:13px;padding:8px 0}
#seg{margin-bottom:18px}
.grp{margin-top:18px}.grp:first-child{margin-top:0}
.rl{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.rl b{font-weight:500;color:var(--t);font-size:14px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--c4);outline:0;margin:12px 0;display:block;touch-action:pan-y}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0008;cursor:pointer}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.pres{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.pre{width:36px;height:36px;border-radius:50%;border:2px solid var(--c3);padding:0;display:grid;place-items:center;cursor:pointer;transition:transform .1s}.pre i{width:14px;height:14px;border-radius:50%}.pre.on{border-color:var(--ac);box-shadow:0 0 0 2px var(--c1),0 0 0 4px var(--ac)}.pre:active{transform:scale(.92)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cb{background:var(--c2);border-radius:18px;padding:12px 14px 10px}.cb .rl{margin-bottom:8px}
.hx{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.sw{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;border:2px solid var(--c5);position:relative}
.sw input{position:absolute;inset:-8px;width:60px;height:60px;border:0;padding:0;background:none;cursor:pointer}
.cb .txt{min-width:0;background:var(--c1);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:14px;text-transform:uppercase;padding:9px 10px;border-radius:12px}
.ch{display:grid;grid-template-columns:12px 1fr 26px;gap:8px;align-items:center;height:20px;font-size:11px;color:var(--t2)}.ch b{font-weight:400;text-align:right}
.ch input[type=range]{height:3px;margin:0;background:var(--c5)}
.ch input[type=range]::-webkit-slider-thumb{width:14px;height:14px;box-shadow:0 1px 3px #0009}
.ch input[type=range]::-moz-range-thumb{width:14px;height:14px}
.list{background:var(--c2);border-radius:16px;margin-top:12px}
.li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;min-height:52px;font-size:15px}.li+.li{border-top:1px solid var(--c3)}.li .chip{background:var(--c3)}
.tg{position:relative;width:51px;height:31px;flex:none}.tg input{opacity:0;position:absolute;inset:0;margin:0;cursor:pointer;z-index:1}
.tg i{position:absolute;inset:0;border-radius:16px;background:var(--c4);transition:background .2s}
.tg i::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0006;transition:transform .2s}
.tg input:checked+i{background:var(--ok)}.tg input:checked+i::after{transform:translateX(20px)}
.drop{display:flex;align-items:center;gap:12px;background:var(--c2);border-radius:18px;padding:14px;cursor:pointer;font-size:15px;margin-bottom:18px}.drop small{display:block;color:var(--t2);font-weight:300;font-size:12px}
#qr{background:var(--c2);border-radius:20px;padding:14px}
#qr canvas{display:block;width:100%!important;height:auto!important;border-radius:10px;transition:opacity .2s}#qr.empty canvas{opacity:.35}
.note{display:flex;gap:8px;align-items:center;margin:12px 2px 18px;font-size:13px;font-weight:300;color:var(--t2);min-height:20px}
.note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}.note.w{color:var(--wn)}.note.w::before{background:var(--wn)}
.acts{display:flex;gap:8px;margin-top:14px}
.btn.pri{flex:1;background:var(--ac);color:#fff;font-weight:600;border-radius:16px;padding:14px;font-size:16px}.btn.ico{width:50px;padding:0;border-radius:16px}
.btn.wide{width:100%;margin-top:18px;border-radius:14px;padding:12px}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--c3);padding:12px 20px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:9;box-shadow:0 8px 30px #000a;max-width:90vw;text-align:center}#toast.on{opacity:1;transform:translate(-50%,0)}
.foot{border-top:1px solid var(--c1);padding:28px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.fw{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}.fw p{margin:8px 0 0;max-width:320px;font-size:14px;font-weight:300;color:var(--t2);line-height:1.5}
.fw ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;font-weight:300;color:var(--t2)}.fw li{display:flex;gap:10px;align-items:center}.fw .i{width:17px;height:17px;color:var(--ac)}
.copy{margin-top:24px;font-size:13px;font-weight:300;color:var(--ph)}
@media(max-width:900px){.app{grid-template-columns:minmax(0,1fr);grid-template-areas:"content" "prev" "custom";padding:8px 14px 28px;gap:14px}#prev{position:static;max-height:none;overflow:visible}.top{padding:18px 18px 8px}.foot{padding-left:18px;padding-right:18px}}
@media(max-width:560px){.card{border-radius:22px;padding:16px}.types{grid-template-columns:repeat(4,1fr);gap:6px}.tile{font-size:11.5px;padding:11px 2px 9px;border-radius:14px}.tag{display:none}.seg button{font-size:13px}}
@media(max-width:400px){.two{grid-template-columns:1fr}}

/* ---- refinements: capsules, rounded icons, motion ---- */
.i{stroke-width:1.8}
.brand span{display:inline-block}
.types{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pill{padding:10px 16px 10px 12px;gap:8px}.pill .i{width:18px;height:18px}
.chip,.btn{transition:background-color .25s,color .25s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.chip:active,.btn:active{transform:scale(.93);transition-duration:.1s}
.chip.on{animation:sel .45s cubic-bezier(.34,1.56,.64,1)}
@media(hover:hover){.chip:not(.on):hover,.btn.ico:hover,.li .chip:hover{background:var(--c4)}.btn.pri:hover{background:#2b95ff}}
.seg{gap:0;position:relative}
.seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/var(--n,1));border-radius:10px;background:var(--c6);transform:translateX(calc(var(--i,0)*100%));transition:transform .5s cubic-bezier(.34,1.25,.5,1)}
.seg button{position:relative;z-index:1;transition:color .25s,transform .3s cubic-bezier(.34,1.56,.64,1)}.seg button.on{background:none}.seg button:active{transform:scale(.94)}
.pane:not([hidden]){animation:pin .4s cubic-bezier(.2,.8,.2,1)}
#fields.in .fl{animation:pin .45s cubic-bezier(.2,.8,.2,1) both}
#fields.in .fl:nth-child(2){animation-delay:.05s}#fields.in .fl:nth-child(3){animation-delay:.1s}#fields.in .fl:nth-child(n+4){animation-delay:.15s}
.card{animation:pin .6s cubic-bezier(.2,.8,.2,1) both}#prev{animation-delay:.08s}#custom{animation-delay:.16s}
.app.rs .card{animation:rs .55s cubic-bezier(.2,.8,.2,1) both}
#qr.pop{animation:pop .5s cubic-bezier(.34,1.3,.5,1)}
.spin{animation:spin .7s cubic-bezier(.34,1.2,.5,1)}
.pre{transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .25s}.pre:hover{transform:scale(1.08)}
.txt{transition:box-shadow .2s}.drop,.li{transition:background-color .2s}.drop:hover{background:var(--c3)}.drop:active{transform:scale(.985)}
input[type=range]::-webkit-slider-thumb{transition:transform .2s}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
#toast{transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rs{0%{opacity:.4;transform:scale(.97)}100%{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.94);opacity:.6}60%{transform:scale(1.015);opacity:1}100%{transform:scale(1)}}
@keyframes sel{0%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(-360deg)}}
@media(max-width:560px){.pill{padding:9px 13px 9px 10px;font-size:13.5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- themes ---- */
:root{--c4:#48484a;--c5:#58585a;--c6:#636366;--ph:#636366}
:root[data-theme=light]{--bg:#f2f2f7;--c1:#fff;--c2:#f2f2f7;--c3:#e3e3e8;--c4:#d1d1d6;--c5:#c7c7cc;--c6:#fff;--ph:#aeaeb2;--t:#000;--t2:#6c6c70;--ac:#007aff;--wn:#ff9500;--ok:#34c759;color-scheme:light}
:root[data-theme=midnight]{--bg:#050a17;--c1:#0e1730;--c2:#182348;--c3:#26335f;--c4:#34447a;--c5:#44558f;--c6:#4a5d9c;--ph:#5c6c99;--t:#e8eeff;--t2:#8c9bc4;--ac:#4c8dff;--wn:#ffb340;--ok:#3ddc84;color-scheme:dark}
:root[data-theme=light] .seg::before{box-shadow:0 1px 4px #0003}
:root[data-theme=light] .card{box-shadow:0 1px 2px #0000000d}
:root[data-theme=light] #toast,:root[data-theme=light] .menu{box-shadow:0 10px 40px #00000030}
body,.card,.txt,.cb,.list,#qr,.foot{transition:background-color .35s,color .35s,border-color .35s}
.top{position:relative;z-index:30;gap:12px}.tools{display:flex;align-items:center;gap:10px}.lang{position:relative}
.lb{font:inherit;font-size:14px;font-weight:500;color:var(--t);background:var(--c2);border:0;border-radius:14px;height:42px;padding:0 12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background-color .25s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.lb:active{transform:scale(.94)}.lb .i{width:16px;height:16px;color:var(--t2)}
.flag{width:22px;height:22px;border-radius:50%;flex:none;display:block;box-shadow:0 0 0 1px #8883}
.seg.th button{flex:none;width:36px;padding:8px 0}.seg.th .i{width:18px;height:18px}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--c1);border-radius:18px;padding:6px;box-shadow:0 12px 40px #0007,0 0 0 1px var(--c3);transform-origin:top right;animation:menu .28s cubic-bezier(.34,1.4,.5,1)}
.menu button{display:flex;width:100%;gap:12px;align-items:center;padding:10px 12px;border:0;background:none;color:var(--t);font:inherit;font-size:15px;border-radius:12px;cursor:pointer;transition:background-color .2s}
.menu button:hover,.menu button.on{background:var(--c2)}.menu .ck{margin-left:auto;color:var(--ac);opacity:0;transition:opacity .2s}.menu button.on .ck{opacity:1}
@keyframes menu{from{opacity:0;transform:scale(.9) translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:560px){.brand{font-size:22px}.brand img{width:26px;height:26px}}

/* ---- switchers live in the footer ---- */
.menu{right:auto;left:0;top:auto;bottom:calc(100% + 8px);transform-origin:bottom left;animation-name:menuup}
@keyframes menuup{from{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:none}}
.fb{max-width:1120px;margin:22px auto 0;padding-top:20px;border-top:1px solid var(--c3);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fb .copy{margin:0;max-width:none}
@media(max-width:560px){.fb{flex-direction:column;gap:16px}.tools{order:-1}}

.note:empty::before{display:none}

/* ---- v6: vector preview, actions, legal, corner color ---- */
#qr svg{display:block;width:100%!important;height:auto!important;border-radius:10px;transition:opacity .2s}#qr.empty svg{opacity:.35}
.acts{flex-wrap:wrap}.btn.pri{flex:1 1 100%}.btn.ico{flex:1;width:auto;min-height:46px}
.rt{display:flex;align-items:center;gap:12px;transition:opacity .2s}.sw.sm{width:30px;height:30px;transition:opacity .2s}
.fbl{display:flex;flex-direction:column;gap:8px}.legal{display:flex;gap:16px;flex-wrap:wrap}
.legal a{color:var(--t2);font-size:13px;font-weight:300;text-decoration:none;transition:color .2s}.legal a:hover{color:var(--ac)}
@media(max-width:560px){.fbl{align-items:center}.legal{justify-content:center}}

/* ---- v7: validation, mobile fixes ---- */
*{touch-action:manipulation}.chip,.btn,.seg button,.lb,.menu button,.pre{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fl{min-width:0}.txt[type=datetime-local]{display:block;width:100%;max-width:100%;min-width:0;min-height:48px;-webkit-appearance:none;appearance:none;text-align:left}
.txt[type=datetime-local]::-webkit-date-and-time-value{text-align:left;min-height:1.3em}
.err{margin:6px 0 0 4px;font-size:12.5px;color:#ff453a;animation:pin .3s both}.err:empty{display:none}.txt.bad{box-shadow:0 0 0 2px #ff453a}

/* ---- v8: Add to Home Screen card ---- */
.a2{max-width:1120px;margin:0 auto 28px;background:var(--c1);border-radius:22px;overflow:hidden;animation:pin .6s cubic-bezier(.2,.8,.2,1) both}
.a2h{font:inherit;color:var(--t);background:none;border:0;text-align:left;width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;transition:background-color .2s}
@media(hover:hover){.a2:not(.open) .a2h:hover{background:var(--c2)}}.a2h img{border-radius:11px;flex:none}
.a2t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.a2t b{font-weight:500;font-size:15px}.a2t small{font-size:13px;font-weight:300;color:var(--t2);line-height:1.35}
.a2c{display:flex;align-items:center;gap:8px;color:var(--t2)}.a2c .i:first-child{color:var(--ac)}
.chv{transition:transform .45s cubic-bezier(.34,1.4,.5,1)}.a2.open .chv{transform:rotate(180deg)}
.a2p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}.a2.open .a2p{grid-template-rows:1fr}
.a2p>div{overflow:hidden;min-height:0;padding:0 16px;transition:padding .5s}.a2.open .a2p>div{padding-bottom:16px}
.a2l{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.a2l li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:300;line-height:1.45;animation:pin .4s cubic-bezier(.2,.8,.2,1) both}.a2l li>span:nth-child(2){flex:1}
.n{width:26px;height:26px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;flex:none}
.si{width:36px;height:36px;border-radius:11px;background:var(--c2);display:grid;place-items:center;color:var(--ac);flex:none}

/* ---- v9: print size, advanced fold, scan check ---- */
#note{margin-bottom:6px}#vf{margin:0 2px 18px}#vf:empty{min-height:0;margin-bottom:12px}
.adv{font:inherit;font-size:14px;color:var(--t2);background:none;border:0;padding:4px 0;display:flex;align-items:center;gap:6px;cursor:pointer}.adv .i{width:16px;height:16px}
.fp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}.fold.open .fp{grid-template-rows:1fr}.fp>div{overflow:hidden;min-height:0;padding-top:0}.fold.open .fp>div{padding-top:14px}.fold.open .chv{transform:rotate(180deg)}
#pcm .chip,#dpi .chip{padding:7px 12px;font-size:13px}

/* ---- v10: print size fold ---- */
#prf{margin-top:14px}#prb{width:100%;font-size:14px}#v-pcm{margin-left:auto;font-weight:500;color:var(--t);font-size:13px}#prf+.seg{margin-top:16px}