@font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
--bg:#fbfaf8;--surface:#fff;--surface-2:#f3f1ed;--surface-3:#eae6df;
--border:#e7e3dc;--border-strong:#d6d0c6;
--text:#23201c;--muted:#6b655c;--faint:#948d82;
--accent:#2f6f62;--accent-hover:#255a4f;--accent-soft:#e6f1ee;--accent-ring:rgba(47,111,98,.28);
--pop:#c4622d;--pop-soft:#fbeee5;
--ok:#3f8f63;--ok-soft:#e8f4ed;--warn:#c08a2e;--warn-soft:#fbf2e0;
--danger:#c0503f;--danger-soft:#fceeeb;
--r:10px;--r-lg:16px;--r-pill:999px;--maxw:1140px;--readw:720px;
--ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
--t-fast:140ms;--t:220ms;--t-slow:380ms;
--sh:0 1px 2px rgba(35,32,28,.05),0 2px 8px rgba(35,32,28,.05);
--sh-lg:0 2px 6px rgba(35,32,28,.06),0 14px 34px rgba(35,32,28,.09);
--font:'Switzer',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--font-display:'Switzer',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
html[data-theme=dim]{
--bg:#22201e;--surface:#2a2825;--surface-2:#312e2a;--surface-3:#3a3733;
--border:#3b3833;--border-strong:#4b473f;
--text:#f0ece5;--muted:#b3aaa0;--faint:#8b837a;
--accent:#5fb3a1;--accent-hover:#77c4b3;--accent-soft:#26443d;--accent-ring:rgba(95,179,161,.32);
--pop:#e08b53;--pop-soft:#40301f;
--ok:#63b487;--ok-soft:#243a2e;--warn:#d7a955;--warn-soft:#3d3320;
--danger:#d97a68;--danger-soft:#3f2723;
--sh:0 1px 2px rgba(0,0,0,.3);--sh-lg:0 14px 34px rgba(0,0,0,.42)
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.62;
-webkit-font-smoothing:antialiased;font-size:16.5px;overflow-x:hidden}
img,canvas,svg{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}
h1,h2,h3,h4{line-height:1.22;letter-spacing:-.012em;font-weight:650}
h1,h2{font-family:var(--font-display);word-spacing:.14em;letter-spacing:0}
h3,h4{font-family:var(--font);font-weight:680;letter-spacing:-.015em}
h1{font-size:clamp(1.85rem,4.4vw,2.9rem)}
h2{font-size:clamp(1.35rem,2.7vw,1.85rem);margin-bottom:.5rem}
h3{font-size:1.11rem}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.25rem}
li{margin:.3rem 0}
hr{border:0;border-top:1px solid var(--border);margin:1.1rem 0}
b,strong{font-weight:680}
:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.15rem}
.read{max-width:var(--readw)}
.sec{margin:2.7rem 0}
.center{text-align:center}
.small{font-size:.875rem}
.muted{color:var(--muted)}
.hint{color:var(--faint);font-size:.83rem;line-height:1.5;display:block}
.hide{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;
padding:.6rem 1rem;z-index:200;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid transparent;
transition:border-color var(--t),box-shadow var(--t)}
.hdr.stuck{border-bottom-color:var(--border);box-shadow:0 1px 14px rgba(35,32,28,.05)}
.hdr .in{display:flex;align-items:center;gap:.7rem;height:60px;
max-width:var(--maxw);margin:0 auto;padding:0 1.15rem}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.12rem;
color:var(--text);letter-spacing:-.01em;font-family:var(--font-display)}
.brand:hover{text-decoration:none;color:var(--text)}
.brand .m{width:26px;height:26px;border-radius:8px;background:var(--accent);
display:grid;place-items:center;color:#fff;flex:0 0 auto}
.brand .m svg{width:15px;height:15px}
nav.main{display:flex;gap:.15rem;margin-left:auto;align-items:center}
nav.main a{padding:.42rem .68rem;border-radius:var(--r-pill);color:var(--muted);
font-size:.905rem;font-weight:560;transition:background var(--t-fast),color var(--t-fast)}
nav.main a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
nav.main a.on{color:var(--accent);background:var(--accent-soft)}
.icon-btn{width:35px;height:35px;display:grid;place-items:center;border-radius:var(--r-pill);
border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;
transition:background var(--t-fast),color var(--t-fast)}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn svg{width:17px;height:17px}
.burger{display:none}
@media(max-width:860px){
nav.main{position:fixed;inset:60px 0 auto;flex-direction:column;align-items:stretch;
background:var(--surface);border-bottom:1px solid var(--border);padding:.6rem 1rem 1rem;
gap:.1rem;box-shadow:var(--sh-lg);transform:translateY(-8px);opacity:0;pointer-events:none;
transition:opacity var(--t),transform var(--t)}
nav.main.open{transform:none;opacity:1;pointer-events:auto}
nav.main a{padding:.66rem .8rem;border-radius:var(--r);font-size:1rem}
.burger{display:grid}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
padding:.62rem 1.12rem;border-radius:var(--r-pill);border:1px solid var(--accent);
background:var(--accent);color:#fff;font:inherit;font-size:.945rem;font-weight:640;
cursor:pointer;text-decoration:none;white-space:nowrap;
transition:transform var(--t-fast) var(--ease),background var(--t-fast),
box-shadow var(--t-fast),opacity var(--t-fast);box-shadow:0 1px 2px rgba(35,32,28,.08)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;
text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 14px var(--accent-ring)}
.btn:active{transform:translateY(0) scale(.985)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text);border-color:var(--accent);
box-shadow:none}
.btn.quiet{background:transparent;border-color:transparent;color:var(--muted);box-shadow:none}
.btn.quiet:hover{background:var(--surface-2);color:var(--text);box-shadow:none}
.btn.danger{background:var(--danger);border-color:var(--danger)}
.btn.danger:hover{background:#a94433;border-color:#a94433}
.btn.google{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn.google:hover{background:var(--surface-2);color:var(--text)}
.btn.sm{padding:.4rem .8rem;font-size:.86rem}
.btn.lg{padding:.8rem 1.4rem;font-size:1.02rem}
.btn.block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.btn .spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);
border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
.btn.ghost .spin{border-color:var(--border-strong);border-top-color:var(--accent)}
@keyframes sp{to{transform:rotate(360deg)}}
.grid{display:grid;gap:1rem}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(198px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
padding:1.15rem;box-shadow:var(--sh)}
.tcard{display:flex;flex-direction:column;background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;color:var(--text);
box-shadow:var(--sh);position:relative;overflow:hidden;
transition:transform var(--t) var(--ease),box-shadow var(--t),border-color var(--t)}
.tcard::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--accent);
transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--border-strong);
text-decoration:none;color:var(--text)}
.tcard:hover::after{transform:scaleX(1)}
.tcard .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
margin-bottom:.75rem;color:var(--accent);position:relative;z-index:2;
background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--pop-soft) 55%,var(--surface)));
border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.tcard .ico svg{width:22px;height:22px}
.tcard h3{margin-bottom:.3rem}
.tcard p{color:var(--muted);font-size:.905rem;margin-bottom:.85rem;flex:1}
.tcard .go{color:var(--accent);font-weight:640;font-size:.88rem;display:inline-flex;
align-items:center;gap:.32rem}
.tcard:hover .go svg{transform:translateX(3px)}
.tcard .go svg{transition:transform var(--t) var(--ease)}
.num{font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:.42rem}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.36rem .78rem;
border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);
font-size:.86rem;color:var(--text);font-weight:560;
transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-hover);
text-decoration:none;transform:translateY(-1px)}
.hero{padding:3.1rem 0 2.2rem;position:relative}
.hero::before{content:"";position:absolute;inset:-40% 40% 40% -20%;pointer-events:none;
background:radial-gradient(closest-side,var(--accent-soft),transparent 72%);opacity:.75;z-index:-1}
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.79rem;font-weight:680;
letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
padding:.3rem .74rem;border-radius:var(--r-pill);margin-bottom:.95rem}
.hero .lede{font-size:1.1rem;color:var(--muted);max-width:640px;margin-bottom:1.35rem}
.trust{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.4rem;color:var(--muted);font-size:.855rem}
.trust span{display:inline-flex;align-items:center;gap:.36rem}
.trust svg{width:15px;height:15px;color:var(--ok);flex:0 0 auto}
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem;flex:1;min-width:0}
.field label{font-size:.845rem;font-weight:620;color:var(--text)}
.row{display:flex;gap:.65rem;flex-wrap:wrap}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],select,textarea{width:100%;padding:.56rem .72rem;border-radius:var(--r);
border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
font:inherit;font-size:.94rem;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-ring)}
input[type=color]{width:100%;height:34px;padding:2px;border:1px solid var(--border-strong);
border-radius:8px;background:var(--surface);cursor:pointer}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;
background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;
background:var(--surface-3)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;
border-radius:50%;background:var(--accent);border:2px solid var(--surface);margin-top:-6px;
box-shadow:0 1px 4px rgba(35,32,28,.24);transition:transform var(--t-fast)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.16)}
input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:var(--surface-3)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
background:var(--accent);border:2px solid var(--surface)}
.checkline{display:flex;align-items:center;gap:.52rem;font-size:.9rem;margin-bottom:.75rem;
cursor:pointer;user-select:none}
.checkline input{width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto;cursor:pointer}
.tabs{display:flex;gap:.25rem;background:var(--surface-2);padding:.25rem;
border-radius:var(--r-pill);margin-bottom:1rem}
.tabs button{flex:1;padding:.5rem .8rem;border:0;border-radius:var(--r-pill);
background:transparent;color:var(--muted);font:inherit;font-size:.9rem;font-weight:620;
cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.tabs button[aria-selected=true]{background:var(--surface);color:var(--text);box-shadow:var(--sh)}
.notice{display:flex;gap:.7rem;padding:.85rem 1rem;border-radius:var(--r);
border:1px solid var(--border);background:var(--surface-2);font-size:.9rem;margin:1rem 0}
.notice.info{background:var(--accent-soft);border-color:transparent;color:var(--accent-hover)}
.notice.warn{background:var(--warn-soft);border-color:transparent}
.notice.ok{background:var(--ok-soft);border-color:transparent}
.notice.bad{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.badge{display:inline-block;padding:.16rem .55rem;border-radius:var(--r-pill);
font-size:.74rem;font-weight:700;background:var(--surface-3);color:var(--muted)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
table.tbl th,table.tbl td{padding:.62rem .85rem;text-align:left;
border-bottom:1px solid var(--border);vertical-align:top}
table.tbl th{background:var(--surface-2);font-weight:680;font-size:.83rem;
text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td:first-child{font-weight:620;width:38%}
.spec{margin:1rem 0}
.spec .src{font-size:.79rem;color:var(--faint);margin-top:.5rem}
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;padding:.95rem 2rem .95rem 0;font-weight:640;position:relative;
list-style:none;transition:color var(--t-fast)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:.35rem;top:1.35rem;width:9px;height:9px;
border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
transform:rotate(45deg);transition:transform var(--t) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 1.4rem 1.05rem 0;color:var(--muted);font-size:.945rem}
.steps{list-style:none;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 1.05rem 2.7rem;
border-left:2px solid var(--border);margin-left:.85rem}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:-.92rem;top:-.12rem;width:1.8rem;
height:1.8rem;border-radius:50%;background:var(--accent);color:#fff;display:grid;
place-items:center;font-size:.83rem;font-weight:750}
.ad{min-height:96px;display:grid;place-items:center;background:var(--surface-2);
border:1px dashed var(--border-strong);border-radius:var(--r);color:var(--faint);
font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;margin:1.7rem 0}
.ad.tall{min-height:250px}
.crumb{font-size:.83rem;color:var(--muted);padding:.9rem 0 .1rem;display:flex;
flex-wrap:wrap;gap:.35rem;align-items:center}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--accent)}
.crumb .sep{color:var(--faint)}
footer.ft{border-top:1px solid var(--border);background:var(--surface-2);
margin-top:3.4rem;padding:2.4rem 0 1.6rem;font-size:.9rem}
footer.ft .cols{display:grid;gap:1.7rem;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
footer.ft h4{font-size:.77rem;text-transform:uppercase;letter-spacing:.06em;
color:var(--faint);margin-bottom:.6rem;font-weight:700}
footer.ft ul{list-style:none;padding:0;margin:0}
footer.ft li{margin:.28rem 0}
footer.ft a{color:var(--muted)}
footer.ft a:hover{color:var(--accent)}
footer.ft .base{margin-top:1.9rem;padding-top:1.1rem;border-top:1px solid var(--border);
display:flex;flex-wrap:wrap;gap:.7rem;justify-content:space-between;color:var(--faint);
font-size:.83rem}
#toasts{position:fixed;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:300;
display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;
width:min(94vw,430px)}
.toast{background:var(--text);color:var(--bg);padding:.62rem 1.05rem;border-radius:var(--r-pill);
font-size:.89rem;font-weight:560;box-shadow:var(--sh-lg);animation:tin .28s var(--ease);
max-width:100%}
.toast.bad{background:var(--danger);color:#fff}
.toast.ok{background:var(--ok);color:#fff}
.toast.out{animation:tout .26s var(--ease-io) forwards}
@keyframes tin{from{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes tout{to{opacity:0;transform:translateY(8px) scale(.97)}}

/* ===== visual upgrade layer: hero art, section art, floating chips ===== */
.hero .wrap.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:center}
.hero-art{position:relative;display:grid;place-items:center;min-height:340px}
.hero-art img{width:min(94%,470px);height:auto;
filter:drop-shadow(0 26px 44px rgba(35,32,28,.20))}
html[data-theme=dim] .hero-art img{filter:drop-shadow(0 26px 44px rgba(0,0,0,.5))}
.fchip{position:absolute;display:inline-flex;align-items:center;gap:.42rem;
padding:.48rem .85rem;border-radius:var(--r-pill);
background:color-mix(in srgb,var(--surface) 90%,transparent);
border:1px solid var(--border);box-shadow:var(--sh-lg);
font-size:.85rem;font-weight:640;backdrop-filter:blur(8px);white-space:nowrap}
.fchip svg{width:14px;height:14px;color:var(--ok);flex:0 0 auto}
.fchip.b svg{color:var(--accent)}
.fchip.c svg{color:var(--pop)}
.fchip.a{top:5%;left:0}
.fchip.b{bottom:12%;left:-2%}
.fchip.c{top:34%;right:-2%}
@media(max-width:900px){
.hero .wrap.hgrid{grid-template-columns:1fr;gap:1.6rem}
.hero-art{min-height:0}
.hero-art img{width:min(78%,360px)}
.fchip.a{left:4%}.fchip.b{left:6%}.fchip.c{right:4%}
}
.why-grid{display:grid;grid-template-columns:330px 1fr;gap:2.2rem;align-items:center;margin-top:1.2rem}
.why-grid .art{display:grid;place-items:center}
.why-grid .art img{width:100%;max-width:330px;height:auto;
filter:drop-shadow(0 20px 36px rgba(35,32,28,.16))}
html[data-theme=dim] .why-grid .art img{filter:drop-shadow(0 20px 36px rgba(0,0,0,.45))}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}.why-grid .art img{max-width:250px}}
.cta-art{width:150px;height:auto;margin:0 auto 1rem}

/* ============ mascot & new badge ============ */
.mascot{pointer-events:none;user-select:none}
.hero-art img.m-hero{position:absolute;width:clamp(88px,10vw,128px);height:auto;bottom:-3%;left:1%;z-index:2}
.m-tools{display:block;margin:0 auto -.35rem;width:92px;height:auto}
.why-grid .art{position:relative}
.why-grid .art img.m-why{position:absolute;width:clamp(82px,9vw,108px);height:auto;right:0;bottom:-5%;z-index:2}
.cta-duo{display:flex;align-items:flex-end;justify-content:center;gap:.5rem;margin:0 auto 1rem}
.cta-duo .cta-art{margin:0}
.cta-duo .m-cta{width:112px;height:auto}
.m-404{display:block;margin:0 auto 1rem;width:140px;height:auto}
.tool-note .m-note{width:36px;height:40px;flex:0 0 auto;transition:transform .25s var(--ease,ease)}
.tool-note:hover .m-note{transform:rotate(-7deg) scale(1.14)}
.tcard{position:relative}
.newb{position:absolute;top:.75rem;right:.75rem;background:linear-gradient(135deg,var(--pop),#d97b35);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.2rem .52rem;border-radius:999px;box-shadow:0 3px 10px rgba(196,98,45,.35)}
@media(max-width:640px){.hero-art img.m-hero{bottom:-1%;left:0;width:74px}.cta-duo .m-cta{width:86px}.why-grid .art img.m-why{width:74px}}
.fchip.b{bottom:32%}

/* ============ dropzone ============ */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:2.4rem 1.2rem;border:2px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--surface);cursor:pointer;transition:border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t) var(--ease)}
.drop:hover{border-color:var(--accent);background:var(--accent-soft)}
.drop.over{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.008)}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop .di{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.drop b{font-size:1.04rem}
.drop .sub{color:var(--muted);font-size:.87rem}
.drop.mini{padding:1.1rem .8rem;border-width:1px}
.drop.mini .di{width:32px;height:32px}
.drop.mini b{font-size:.9rem}

/* ============ workbench: preview beside the controls ============ */
.wb{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:18px;align-items:start}
.wb.hide{display:none}
.wb-view{position:sticky;top:76px;min-width:0}
.stage{position:relative;display:grid;place-items:center;padding:12px;min-height:200px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.stage.checker{background-color:var(--surface-2);background-image:linear-gradient(45deg,rgba(0,0,0,.055) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.055) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.055) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.055) 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.holder{position:relative;line-height:0;max-width:100%}
.holder canvas,.holder img{display:block;max-width:100%;height:auto;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.16)}

/* ============ crop overlay ============ */
.cropov{position:absolute;left:0;top:0;right:0;bottom:0;touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;border-radius:5px;overflow:hidden}
.cropov.off{display:none}
.cbox{position:absolute;box-shadow:0 0 0 9999px rgba(18,16,14,.5);outline:1px solid rgba(255,255,255,.92);cursor:move;will-change:left,top,width,height}
.cbox:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;opacity:0;transition:opacity var(--t) var(--ease);background-image:linear-gradient(to right,rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.4) 1px,transparent 1px);background-size:33.333% 33.333%}
.cbox.live:after{opacity:1}
.ch{position:absolute;width:28px;height:28px;display:grid;place-items:center;touch-action:none;z-index:3}
.ch i{display:block;width:13px;height:13px;background:#fff;border:2px solid var(--accent);border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:transform var(--t-fast) var(--ease)}
.ch:hover i,.ch:active i{transform:scale(1.22)}
.ch[data-c=nw]{left:-14px;top:-14px;cursor:nwse-resize}
.ch[data-c=ne]{right:-14px;top:-14px;cursor:nesw-resize}
.ch[data-c=sw]{left:-14px;bottom:-14px;cursor:nesw-resize}
.ch[data-c=se]{right:-14px;bottom:-14px;cursor:nwse-resize}
.ce{position:absolute;touch-action:none;z-index:2}
.ce[data-c=n]{left:22px;right:22px;top:-10px;height:20px;cursor:ns-resize}
.ce[data-c=s]{left:22px;right:22px;bottom:-10px;height:20px;cursor:ns-resize}
.ce[data-c=w]{top:22px;bottom:22px;left:-10px;width:20px;cursor:ew-resize}
.ce[data-c=e]{top:22px;bottom:22px;right:-10px;width:20px;cursor:ew-resize}

/* ============ tool bar under the preview ============ */
.vbar{display:flex;align-items:center;gap:.25rem;margin-top:.55rem;padding:.3rem .35rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill)}
.vbar button{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.vbar button:hover{background:var(--surface-2);color:var(--text)}
.vbar button:active{transform:scale(.88)}
.vbar button.on{background:var(--accent-soft);color:var(--accent)}
.vbar button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.vsep{width:1px;height:19px;background:var(--border);margin:0 .18rem;flex:0 0 auto}
.vinfo{margin-left:auto;padding-right:.55rem;font-size:.75rem;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============ control panel ============ */
.wb-panel{position:sticky;top:76px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px}
.pt{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 .75rem}
.wb-panel .field{margin-bottom:.72rem}
.wb-panel .field:last-child{margin-bottom:0}
.wb-panel .field>label{display:block;font-size:.79rem;font-weight:600;margin-bottom:.26rem;color:var(--text)}
.wb-panel input[type=text],.wb-panel input[type=number],.wb-panel input[type=date],.wb-panel select{width:100%;padding:.48rem .58rem;font-size:.92rem}
.wb-panel .hint{font-size:.74rem;margin-top:.22rem;display:block;line-height:1.4}
.wb-panel hr{border:0;border-top:1px solid var(--border);margin:.85rem 0}
.wb-panel .btn.block{margin-top:.9rem}

/* ============ size + dimension composites ============ */
.szf{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:.38rem}
.dimf{display:grid;grid-template-columns:minmax(0,1fr) 13px minmax(0,1fr) 76px;gap:.32rem;align-items:center}
.dimf .x{text-align:center;color:var(--faint);font-size:.88rem;line-height:1}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.opt{font-weight:400;color:var(--faint);font-size:.73rem}

/* ============ advanced disclosure ============ */
.adv{margin-top:.85rem;border-top:1px solid var(--border);padding-top:.35rem}
.adv>summary{list-style:none;display:flex;align-items:center;gap:.42rem;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--accent);padding:.45rem 0}
.adv>summary::-webkit-details-marker{display:none}
.adv>summary::marker{content:""}
.adv>summary:hover{color:var(--accent-hover)}
.adv>summary .cv{flex:0 0 auto;transition:transform var(--t) var(--ease)}
.adv[open]>summary .cv{transform:rotate(90deg)}
.adv-b{padding-top:.5rem;animation:advIn var(--t-slow) var(--ease) both}
@keyframes advIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============ progress ============ */
.working{display:flex;align-items:center;gap:.85rem;padding:.9rem;background:var(--accent-soft);border:1px solid var(--border);border-radius:var(--r);margin-top:.8rem}
.working.hide{display:none}
.ring{position:relative;width:52px;height:52px;flex:0 0 auto}
.ring svg{width:52px;height:52px;transform:rotate(-90deg)}
.ring .bgc{fill:none;stroke:var(--border-strong);stroke-width:5}
.ring .fg{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:157;transition:stroke-dashoffset var(--t) linear}
.ring .pct{position:absolute;left:0;top:0;right:0;bottom:0;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--accent)}
.working .lbl{font-weight:650;font-size:.92rem}
.working .sub{font-size:.78rem;color:var(--muted);margin-top:.12rem}

/* ============ result ============ */
.result{margin-top:.85rem;padding:1rem;text-align:center;background:var(--ok-soft);border:1px solid var(--border);border-radius:var(--r-lg);animation:advIn var(--t-slow) var(--ease) both}
.result.hide{display:none}
.result .big{font-size:1.75rem;font-weight:750;letter-spacing:-.02em;line-height:1.1}
.result .meta{font-size:.82rem;color:var(--muted);margin:.2rem 0 .8rem}
.result .btn-row{gap:.5rem;flex-wrap:wrap}

/* ============ bulk queue ============ */
.queue{display:flex;flex-direction:column;gap:.5rem;margin-top:.9rem;max-height:52vh;overflow:auto;padding-right:.15rem}
.qrow{display:flex;align-items:center;gap:.65rem;padding:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);animation:advIn var(--t) var(--ease) both}
.qthumb{width:42px;height:42px;flex:0 0 auto;border-radius:5px;object-fit:cover;background:var(--surface-2)}
.qmeta{min-width:0;flex:1}
.qmeta b{display:block;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qmeta span{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.qbar{height:3px;border-radius:2px;background:var(--surface-3);margin-top:.3rem;overflow:hidden}
.qbar i{display:block;height:100%;width:0;background:var(--accent);transition:width var(--t) var(--ease)}
.sum{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.8rem;padding:.7rem .85rem;background:var(--ok-soft);border:1px solid var(--border);border-radius:var(--r);font-size:.88rem}
.sum.hide{display:none}

/* ============ before / after compare ============ */
.cmp{position:relative;line-height:0;max-width:100%;overflow:hidden;border-radius:6px;touch-action:none;-webkit-user-select:none;user-select:none}
.cmp img{display:block;max-width:100%;height:auto}
.cmp .after{position:absolute;left:0;top:0;height:100%;overflow:hidden;width:50%}
.cmp .after img{height:100%;width:auto;max-width:none}
.cmp .bar{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);cursor:ew-resize}
.cmp .knob{position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3);display:grid;place-items:center;color:var(--text)}
.cmp .tag{position:absolute;bottom:8px;padding:.16rem .45rem;border-radius:var(--r-pill);background:rgba(20,18,16,.66);color:#fff;font-size:.7rem;line-height:1.5}
.cmp .tagL{left:8px}
.cmp .tagR{right:8px}

/* ============ signature pad ============ */
.padwrap{position:relative;background:#fff;border:1px solid var(--border-strong);border-radius:var(--r);overflow:hidden;touch-action:none}
.padwrap canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
.baseline{position:absolute;left:7%;right:7%;bottom:26%;border-bottom:1px dashed var(--border-strong);pointer-events:none}
.calc{display:block;padding:.4rem .55rem;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;font-size:.76rem;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;margin-top:.3rem}

/* ============ misc ============ */
.checkline{display:flex;align-items:center;gap:.45rem;font-size:.83rem;margin:.4rem 0;cursor:pointer}
.checkline input{width:auto!important;flex:0 0 auto}
.tool-note{display:flex;gap:.5rem;align-items:flex-start;margin-top:.9rem;font-size:.78rem;color:var(--muted);line-height:1.5}
.tool-note svg{flex:0 0 auto;margin-top:.1rem;color:var(--accent)}

/* ============ mobile: everything in one screen ============ */
@media (max-width:920px){
.wb{grid-template-columns:1fr;gap:11px}
.wb-view{position:sticky;top:56px;z-index:6;background:var(--bg);padding-bottom:.35rem}
.stage{padding:8px;min-height:130px}
.holder canvas,.holder img{max-height:31vh;width:auto}
.wb-panel{position:static;padding:12px}
.vbar button{width:32px;height:32px}
.vinfo{font-size:.7rem}
.queue{max-height:44vh}
.result .big{font-size:1.5rem}
}
@media (max-width:420px){
.dimf{grid-template-columns:minmax(0,1fr) 11px minmax(0,1fr) 66px}
.szf{grid-template-columns:minmax(0,1fr) 74px}
}
@media (prefers-reduced-motion:reduce){
.adv-b,.result,.qrow{animation:none}
}

.vbar button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.wb-panel hr{border:0;border-top:1px solid var(--border);margin:.95rem 0}
.dimf .x{display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:.85rem}
.holder canvas{display:block;max-width:100%;height:auto;border-radius:8px}
.padwrap{position:relative;width:100%;background:var(--surface);border:1px dashed var(--border-strong);border-radius:10px;overflow:hidden}
#pad{display:block;width:100%;touch-action:none;cursor:crosshair}
.baseline{position:absolute;left:8%;right:8%;bottom:26%;border-bottom:1px dashed var(--border-strong);pointer-events:none}
.stage .tabs{width:100%}
.stage>div{width:100%}
.drop.mini{padding:.7rem .8rem;text-align:center;display:block}
.field .opt{font-weight:400;color:var(--faint);font-size:.74rem;margin-left:.28rem}
.wb-panel .field:last-of-type{margin-bottom:.2rem}
.wb-panel .btn.block{margin-top:.9rem}

/* ---- v6 stage: one fixed preview height, width follows the picture ---- */
.stage{--stgH:334px}
.stage.checker{background-image:none}
.stage.fixh{display:flex;align-items:center;justify-content:center;gap:0;padding:12px;height:calc(var(--stgH) + 24px);transition:height var(--t-slow) var(--ease)}
.stage.fixh>.holder{flex:0 0 auto;width:var(--hw,auto);height:var(--hh,auto);max-width:100%;transition:width var(--t-slow) var(--ease),height var(--t-slow) var(--ease)}
.holder>canvas,.holder>img{display:block;width:100%;height:100%;max-width:none;max-height:none;background:#fff;border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,.14)}
.holder>canvas.hide,.holder>img.hide{display:none}
.stage.done{flex-wrap:wrap;gap:12px}
.stage.fixh.done{flex-wrap:nowrap;justify-content:flex-start;height:auto;min-height:calc(var(--stgH) + 24px)}
.stage.fixh.done>.holder{height:96px;width:calc(96px * var(--ar,1));opacity:.9}
.stage.fixh.done>.holder:hover{opacity:1}
.stage.done .cropov{display:none}
.stage .result{width:auto;flex:1 1 auto;min-width:0;margin:0;padding:0;background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;text-align:center;animation:outIn var(--t-slow) var(--ease) both}
.stage .result.hide{display:none}
.ohold{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px}
.ohold img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--stgH);border-radius:8px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.ohold img.hide{display:none}
.odoc{display:flex;align-items:center;gap:.6rem;padding:.75rem .9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.odoc.hide{display:none}
.oext{display:grid;place-items:center;width:38px;height:46px;flex:0 0 auto;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-weight:750;font-size:.7rem}
.oname{font-size:.8rem;color:var(--muted);word-break:break-all;text-align:left}
.orow{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;width:100%}
.osz{text-align:left}
.stage .result .big{font-size:1.2rem;font-weight:750;line-height:1.15}
.stage .result .meta{font-size:.73rem;color:var(--muted);margin:0}
.xbtn{position:absolute;top:8px;right:8px;z-index:6;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:1.05rem;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.16);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.xbtn:hover{background:var(--danger-soft);color:var(--danger);transform:rotate(90deg)}
.xbtn:active{transform:scale(.9)}
.xbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.xbtn.hide{display:none}
@keyframes outIn{from{opacity:0;transform:translateX(20px) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:920px){.stage{--stgH:240px}.stage.fixh.done{gap:10px}.stage.fixh.done>.holder{height:74px;width:calc(74px * var(--ar,1))}.osz{text-align:center}}
@media (max-width:420px){.stage{--stgH:208px}.stage.fixh.done>.holder{height:58px;width:calc(58px * var(--ar,1))}}
@media (prefers-reduced-motion:reduce){.stage.fixh,.stage.fixh>.holder,.stage .result{transition:none;animation:none}}


/* ===================================================================
   v7 - unhurried hand-off, crop confirm, options before upload
   =================================================================== */

/* The finished file takes over the stage in one continuous motion instead
   of snapping into place. About 165ms of settling then a 470ms reveal, so
   the whole thing is over well inside a second. */
.stage{transition:height 520ms var(--ease),min-height 520ms var(--ease)}
.stage.fixh{transition:height 520ms var(--ease)}
.stage.fixh>.holder{transition:width 520ms var(--ease),height 520ms var(--ease),
  transform 520ms var(--ease),opacity 300ms linear 60ms,filter 300ms linear}
.stage.fixh.done>.holder{opacity:.5;transform:scale(.98);filter:saturate(.86)}
.stage .result{animation:ffReveal 470ms var(--ease) 165ms both}
@keyframes ffReveal{from{opacity:0;transform:translateY(12px) scale(.966)}
  55%{opacity:1}to{opacity:1;transform:none}}
.stage .result .big{animation:rise 400ms var(--ease) 300ms both}
.working{animation:ffReveal 300ms var(--ease) both}

/* Tick and cross, sitting on the picture itself. */
.cfbar{position:absolute;left:0;top:0;z-index:7;display:flex;gap:.4rem;
  transform:translate(-100%,10px);transition:opacity 150ms linear}
.cfbar.lft{transform:translate(0,10px)}
.cfbar.inside{transform:translate(-100%,calc(-100% - 10px))}
.cfbar.lft.inside{transform:translate(0,calc(-100% - 10px))}
.cfbar.dim{opacity:.18}
.cropov.off .cfbar{display:none}
.cfb{width:36px;height:36px;padding:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.92);display:grid;place-items:center;
  cursor:pointer;color:#fff;box-shadow:0 5px 16px rgba(0,0,0,.42);
  transition:transform 150ms var(--ease),filter 150ms linear}
.cfb svg{width:16px;height:16px;display:block}
.cfb.ok{background:#2f9e70}
.cfb.no{background:#d1495b}
.cfb:hover{transform:scale(1.1)}
.cfb:active{transform:scale(.92)}
.cfb:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Every control is on screen from the first paint, with the dropzone
   standing in for the preview until a file arrives. */
#wb.pre .vbar,#wb.pre .wb-view>.field{display:none}
#wb.pre .stage>.holder{display:none}
.stage.empty{height:auto;min-height:calc(var(--stgH) + 24px);overflow:visible}
.stage.empty>#dropWrap{width:100%;max-width:540px}
.stage.empty .xbtn{display:none}
#dropWrap.nudge{animation:ffNudge 560ms var(--ease)}
@keyframes ffNudge{0%,100%{transform:none}18%{transform:translateX(-7px)}
  36%{transform:translateX(7px)}54%{transform:translateX(-5px)}
  72%{transform:translateX(4px)}86%{transform:translateX(-2px)}}
.btn.off{opacity:.55;filter:saturate(.5);cursor:not-allowed}
.btn.off:hover{transform:none;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .stage,.stage.fixh,.stage.fixh>.holder{transition:none}
  .stage .result,.stage .result .big,.working,#dropWrap.nudge{animation:none}
}


/* ================= v8: full screen preview ================= */
.fsbtn{position:absolute;top:8px;right:8px;z-index:4;display:grid;place-items:center;
width:30px;height:30px;padding:0;border:1px solid var(--border,#ddd6ca);border-radius:8px;
background:var(--surface,#fff);color:var(--text,#23201c);opacity:.5;cursor:pointer;
box-shadow:0 1px 6px rgba(35,32,28,.18);
transition:opacity var(--t-fast,140ms) var(--ease,ease),transform var(--t-fast,140ms) var(--ease,ease)}
.fsbtn:hover,.fsbtn:focus-visible{opacity:1}
.fsbtn:active{transform:scale(.92)}
.fsbtn svg{display:block}
/* The button steps aside while the crop overlay is up. */
.cropov{z-index:5}
.holder:has(.cropov:not(.off)) .fsbtn{display:none}
.ohold{position:relative}
.ohold:has(#outImg.hide) .fsbtn{display:none}

.fsov{position:fixed;inset:0;z-index:999;background:rgba(15,17,21,0);cursor:zoom-out;
transition:background 420ms var(--ease,ease)}
.fsov.on{background:rgba(15,17,21,.84)}
.fsov .fsimg{position:fixed;left:0;top:0;margin:0;border-radius:10px;background:#fff;
box-shadow:0 14px 52px rgba(0,0,0,.5);will-change:transform,width,height;
transition:transform 420ms var(--ease,ease),width 420ms var(--ease,ease),
height 420ms var(--ease,ease),opacity 300ms var(--ease,ease)}
@media (prefers-reduced-motion:reduce){
  .fsov,.fsov .fsimg{transition:none}
}

/* ================= v8: pen bar under the signature pad ================= */
.penbar{display:flex;align-items:center;gap:.6rem;margin-top:.55rem;
padding:.45rem .65rem;background:var(--surface,#fff);border:1px solid var(--border,#ddd6ca);border-radius:10px}
.penbar .pl{font-size:.78rem;font-weight:650;color:var(--muted,#6b675f)}
.penbar input[type=range]{flex:1 1 auto;min-width:80px}
.penbar input[type=color]{width:36px;height:30px;padding:2px;border:1px solid var(--border,#ddd6ca);
border-radius:8px;background:var(--surface,#fff);cursor:pointer;flex:0 0 auto}


/* ===================================================================
   v9 - crop handles that are always visible, a signature stage that
        never overflows, droplet size presets, tidy ad slots
   =================================================================== */

:root{
  --crop:#6ec8ff;            /* light blue, the crop colour everywhere */
  --crop-soft:rgba(110,200,255,.55);
  --crop-glow:rgba(110,200,255,.9);
}

/* ---------- 1. the crop box ----------
   The overlay no longer clips its own children, so a handle sitting on the
   very corner of the picture is drawn in full instead of being sliced in
   half by the edge of the canvas. The dimming that used to come from one
   enormous box-shadow is now four panels that stay inside the picture, so
   nothing leaks over the rest of the page. */
.cropov{overflow:visible}
.cbox{box-shadow:none;outline:0}
.cbox:before{content:"";position:absolute;inset:0;pointer-events:none;
  border:1.5px solid rgba(255,255,255,.95);border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(20,26,34,.28),0 0 14px rgba(110,200,255,.3)}

/* The four dimmed panels around the selection. */
.cshade{position:absolute;background:rgba(16,20,26,.52);pointer-events:none;z-index:1;
  transition:background 160ms linear}
.cropov.live .cshade{background:rgba(16,20,26,.6)}

/* Handles sit on their own layer above the picture and above the shading. */
.ch{width:36px;height:36px;z-index:14;place-items:center;pointer-events:auto}
.ch i{position:relative;width:22px;height:22px;background:none;border:0;border-radius:0;
  box-shadow:none;transition:transform 160ms var(--ease)}
.ch i:before,.ch i:after{content:"";position:absolute;background:var(--crop);border-radius:3px;
  box-shadow:0 0 0 1px rgba(10,26,40,.35),0 0 9px var(--crop-glow);
  animation:cropPulse 2.6s var(--ease-io) infinite}
.ch i:before{width:22px;height:5px}
.ch i:after{width:5px;height:22px}
.ch[data-c=nw] i:before,.ch[data-c=nw] i:after{left:0;top:0}
.ch[data-c=ne] i:before,.ch[data-c=ne] i:after{right:0;top:0}
.ch[data-c=sw] i:before,.ch[data-c=sw] i:after{left:0;bottom:0}
.ch[data-c=se] i:before,.ch[data-c=se] i:after{right:0;bottom:0}
.ch[data-c=nw]{left:-11px;top:-11px}
.ch[data-c=ne]{right:-11px;top:-11px}
.ch[data-c=sw]{left:-11px;bottom:-11px}
.ch[data-c=se]{right:-11px;bottom:-11px}
.ch:hover i,.ch:active i{transform:scale(1.16)}
.cbox.live .ch i:before,.cbox.live .ch i:after{animation-duration:1.5s}

/* A slow breathing glow, so the corners read as "grab me" without shouting. */
@keyframes cropPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(10,26,40,.35),0 0 6px var(--crop-soft);opacity:.94}
  50%{box-shadow:0 0 0 1px rgba(10,26,40,.35),0 0 17px var(--crop-glow);opacity:1}
}

/* Midpoint grips get a matching light-blue bar. */
.ce{z-index:13}
.ce:before{content:"";position:absolute;background:var(--crop);border-radius:3px;opacity:.9;
  box-shadow:0 0 8px var(--crop-soft)}
.ce[data-c=n]:before,.ce[data-c=s]:before{left:50%;width:26px;height:4px;margin-left:-13px;top:8px}
.ce[data-c=s]:before{top:auto;bottom:8px}
.ce[data-c=w]:before,.ce[data-c=e]:before{top:50%;height:26px;width:4px;margin-top:-13px;left:8px}
.ce[data-c=e]:before{left:auto;right:8px}

/* Let the handles spill past the picture while a crop is open. The stage
   keeps a little breathing room so nothing is trimmed by its own edge. */
.stage:has(.cropov:not(.off)){overflow:visible}
.stage.fixh:has(.cropov:not(.off)){padding:16px}
.holder:has(.cropov:not(.off)){overflow:visible}
.cfbar{z-index:16}

@media (prefers-reduced-motion:reduce){
  .ch i:before,.ch i:after{animation:none}
}

/* ---------- 2. zoom button clear of the close button ----------
   Both used to sit in the top right corner and land on top of each other
   once a file had been processed. The zoom control now lives in the bottom
   right, which is always empty. */
.fsbtn{top:auto;bottom:8px;right:8px;z-index:8;border-radius:9px;opacity:.72}
.fsbtn:hover,.fsbtn:focus-visible{opacity:1}
.xbtn{z-index:12}
/* No zoom control on the shrunken thumbnail once the result takes over. */
.stage.fixh.done>.holder .fsbtn{display:none}
.ohold .fsbtn{bottom:6px;right:6px}

/* ---------- 3. the signature stage ----------
   The pad, its tabs and the pen bar are taller than one fixed preview
   height, so this stage grows with its content instead of hiding the
   bottom of the drawing area behind an overflow. */
.stage.sigstage{height:auto;min-height:calc(var(--stgH) + 24px);overflow:visible;
  align-items:stretch;padding:12px}
.stage.sigstage>div{width:100%;min-width:0}
.stage.sigstage.done{height:auto}

/* The upload tab gets a real target in the middle of the canvas area
   rather than a thin strip tucked underneath it. */
#uploadPane.sigpane{position:relative;display:grid;place-items:center;
  min-height:calc(var(--stgH) - 46px)}
#uploadPane.sigpane>.holder{max-width:100%}
.sigdz{position:absolute!important;inset:0;margin:0!important;display:grid;
  place-content:center;justify-items:center;gap:.45rem;padding:1.1rem;z-index:4;
  border:2px dashed var(--border-strong);border-radius:12px;background:var(--surface);
  text-align:center;cursor:pointer;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.sigdz:hover,.sigdz.over{border-color:var(--accent);background:var(--accent-soft)}
.sigdz .di{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent)}
.sigdz b{font-size:1rem}
.sigdz .sub{color:var(--muted);font-size:.84rem}
.sigdz.hide{display:none}
.sigswap{margin-top:.55rem}
.sigswap.hide{display:none}

/* ---------- 4. water droplet size presets ---------- */
.drops{display:flex;flex-wrap:wrap;gap:.55rem;margin:.6rem 0 .1rem;padding:.15rem 0 .35rem}
.drops .dlbl{width:100%;font-size:.73rem;color:var(--faint);margin-bottom:.1rem}
.dropb{position:relative;width:54px;height:54px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  border-radius:52% 52% 52% 8%;transform:rotate(-45deg);overflow:hidden;
  box-shadow:inset 0 -5px 12px rgba(47,111,98,.08),0 2px 7px rgba(35,32,28,.1);
  animation:dropFloat 5.4s var(--ease-io) infinite;
  animation-delay:calc(var(--i,0) * 420ms);
  transition:border-color 220ms var(--ease),background 220ms var(--ease),
    color 220ms var(--ease),box-shadow 220ms var(--ease)}
.dropb .dt{display:grid;place-items:center;width:100%;height:100%;transform:rotate(45deg);
  line-height:1.05;pointer-events:none}
.dropb .dv{font-size:.94rem;font-weight:750;letter-spacing:-.02em}
.dropb .du{font-size:.6rem;font-weight:650;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase}
/* The light catching the top of the drop, drifting slowly. */
.dropb:after{content:"";position:absolute;left:22%;top:16%;width:34%;height:26%;
  border-radius:50%;background:rgba(255,255,255,.6);pointer-events:none;
  animation:dropShine 5.4s var(--ease-io) infinite;
  animation-delay:calc(var(--i,0) * 420ms)}
.dropb:hover{border-color:var(--accent);background:var(--accent-soft);
  box-shadow:inset 0 -6px 14px rgba(47,111,98,.14),0 6px 14px rgba(35,32,28,.14)}
.dropb:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dropb.on{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.14),0 6px 16px rgba(47,111,98,.34)}
.dropb.on .du{color:rgba(255,255,255,.86)}
.dropb.on:after{background:rgba(255,255,255,.42)}

/* A ring that spreads like a ripple on water when a drop is chosen. */
.dripple{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;border:2px solid var(--accent);opacity:.75;pointer-events:none;
  animation:dropRipple 900ms var(--ease-io) forwards}

@keyframes dropFloat{
  0%,100%{transform:rotate(-45deg) translate3d(0,0,0)}
  50%{transform:rotate(-45deg) translate3d(0,-7px,0)}
}
@keyframes dropShine{
  0%,100%{opacity:.55;transform:translate3d(0,0,0) scale(1)}
  50%{opacity:.85;transform:translate3d(1px,2px,0) scale(1.06)}
}
@keyframes dropRipple{
  from{width:12px;height:12px;margin:-6px 0 0 -6px;opacity:.7}
  to{width:120px;height:120px;margin:-60px 0 0 -60px;opacity:0}
}
@media (max-width:420px){
  .dropb{width:48px;height:48px}
  .dropb .dv{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .dropb,.dropb:after{animation:none}
  .dripple{display:none}
}

/* ---------- 5. the preset banner ----------
   Tells you, in one line, that the form's numbers are already in the boxes. */
.pnote{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .85rem;padding:.55rem .65rem;
  background:var(--accent-soft);border:1px solid var(--border);border-radius:var(--r);
  font-size:.78rem;line-height:1.45;color:var(--text)}
.pnote svg{flex:0 0 auto;margin-top:.12rem;color:var(--accent)}
.pnote b{font-weight:700}
.pnote .pclear{margin-left:auto;flex:0 0 auto;border:0;background:none;padding:.1rem .2rem;
  color:var(--muted);font-size:.74rem;text-decoration:underline;cursor:pointer}
.pnote .pclear:hover{color:var(--accent)}

/* ---------- 6. advertising slots ----------
   Reserved, labelled and always in the same two places: under the tool and
   at the foot of the article. The space is held before the ad arrives, so
   the page never jumps, which is what makes an ad feel like clutter. */
.ad{position:relative;display:grid;place-items:center;min-height:104px;margin:1.9rem 0;
  padding:1.15rem .8rem .8rem;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-lg);color:var(--faint);font-size:.74rem;letter-spacing:.04em;
  text-transform:none;overflow:hidden}
.ad:before{content:"Advertisement";position:absolute;top:.42rem;left:.7rem;font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);opacity:.75}
.ad>*{max-width:100%}
.ad.tall{min-height:250px}
.ad-end{margin-bottom:.6rem}
.ad:has(iframe),.ad:has(ins){background:transparent}
@media (max-width:920px){
  .ad{min-height:120px;margin:1.4rem 0}
  .ad.tall{min-height:250px}
}

/* ---------- 7. two corrections found while testing ---------- */
/* .drop.mini sets block layout, so the centred upload target needs the same
   weight to stack its icon, title and hint down the middle of the canvas. */
.drop.mini.sigdz{display:grid;place-content:center;justify-items:center;gap:.45rem;
  text-align:center}
.drop.mini.sigdz .sub{display:block}
/* Nothing to zoom into while the upload pane is still empty. */
#uploadPane.sigpane:has(.sigdz:not(.hide)) .fsbtn{display:none}

/* ============ v9: full screen PDF preview ============ */
.odoc.click{cursor:pointer;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.odoc.click:hover,.odoc.click:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.odoc.click::after{content:'Preview';flex:0 0 auto;margin-left:.3rem;padding:.28rem .6rem;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.68rem;font-weight:650;letter-spacing:.01em}
body.pvlock{overflow:hidden}
.fsov.pdfov{cursor:default;display:flex;flex-direction:column;background:rgba(15,17,21,.94)}
.pvbar{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:rgba(24,27,33,.97);color:#fff;border-bottom:1px solid rgba(255,255,255,.1);flex:0 0 auto}
.pvname{font-size:.78rem;font-weight:650;max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pvpages{font-size:.7rem;opacity:.6;white-space:nowrap}
.pvgrow{flex:1 1 auto}
.pvzl{font-size:.74rem;min-width:44px;text-align:center;opacity:.85;font-variant-numeric:tabular-nums}
.pvz,.pvx{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-size:1.05rem;line-height:1;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.pvz:hover,.pvx:hover,.pvz:focus-visible,.pvx:focus-visible{background:rgba(255,255,255,.16)}
.pvx{font-size:1.35rem}
.pvbar .pvdl{padding:.4rem .85rem}
.pvscroll{flex:1 1 auto;overflow:auto;padding:.9rem .8rem 2.2rem;-webkit-overflow-scrolling:touch}
.pvinner{margin:0 auto;max-width:100%}
.pvpage{position:relative;margin:0 auto 14px;background:#fff;border-radius:6px;box-shadow:0 4px 20px rgba(0,0,0,.45);overflow:hidden}
.pvpage canvas{display:block;width:100%;height:auto}
.pvnum{position:absolute;right:8px;bottom:8px;padding:.12rem .5rem;border-radius:999px;background:rgba(15,17,21,.72);color:#fff;font-size:.66rem;pointer-events:none}
@media (max-width:600px){.pvname{display:none}.pvbar{gap:.4rem}}
@media (prefers-reduced-motion:reduce){.fsov.pdfov{transition:none}}

/* ============ photo-to-pdf queue controls ============ */
.qctl{display:flex;gap:.28rem;margin-left:auto}
.qctl button{width:27px;height:27px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:inherit;font-size:.88rem;line-height:1;cursor:pointer;transition:transform .15s,border-color .15s,color .15s}
.qctl button:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}

/* v11 additions on top of the live stylesheet: ad reserve, consent notice, Hindi, small utilities */
.ad-slot{position:relative;display:grid;place-items:center;min-height:270px}
.ad-slot__label{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.ad-slot__box{position:absolute;inset:0;display:grid;place-items:center}
.ad-slot__box:empty{pointer-events:none}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(0,0,0,.08);padding:.8rem 1rem;font-size:.86rem}
.consent .in{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between}
.consent p{margin:0;flex:1 1 320px;color:var(--muted)}
.consent .acts{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.consent[hidden]{display:none}
.linkbtn{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline}
ul.plain{padding-left:1.1rem}
.read h2{margin-top:1.6rem}
[lang="hi"] body,[lang="hi"] .lede,[lang="hi"] h1,[lang="hi"] h2{font-family:"Noto Sans Devanagari",system-ui,sans-serif}
/* compact tool panel (user request): smaller boxes, unit toggle, JPEG default */
.drop{padding:1.3rem 1rem;gap:.35rem}
.drop .di{width:38px;height:38px}
.drop b{font-size:.98rem}
#empty.hint{margin-top:.5rem!important;font-size:.78rem}
.wb-panel{padding:12px}
.wb-panel .field{margin-bottom:.5rem;gap:.22rem}
.wb-panel .field label{font-size:.78rem}
.wb-panel input[type=text],.wb-panel input[type=number],.wb-panel input[type=date],.wb-panel select{min-height:36px;padding:.38rem .55rem;font-size:.92rem}
.wb-panel .pt{margin:0 0 .4rem}
.wb-panel .btn.block.lg{padding:.7rem 1rem;font-size:.98rem}
.useg-src{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.dimf:has(.useg-src){grid-template-columns:minmax(0,1fr) 13px minmax(0,1fr)}
.useg{display:inline-flex;gap:4px;margin:.3rem 0 .1rem;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2)}
.useg button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.78rem;font-weight:600;padding:.28rem .65rem;border-radius:999px;cursor:pointer;line-height:1.2}
.useg button[aria-pressed="true"]{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.useg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ad-top{min-height:100px;margin:.6rem 0 1rem}
.ad-top .ad-slot__box{min-height:90px}
/* tight option rows */
.wb-panel .duo.compact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:.45rem;align-items:end}
.wb-panel .duo.compact .field{margin-bottom:.5rem}
.wb-panel .dimf{grid-template-columns:minmax(64px,1fr) 13px minmax(64px,1fr) auto;max-width:300px}
.wb-panel .dimf .unit-fixed{font-size:.8rem;color:var(--muted);padding:0 .3rem}
.wb-panel .szf{grid-template-columns:minmax(0,1fr) 78px}
.wb-panel .szf select,.wb-panel .duo.compact select{padding:.38rem 1.3rem .38rem .5rem;font-size:.86rem}
.wb-panel .useg{margin:.25rem 0 0}
.wb-panel .field label .opt{font-size:.7rem}
.wb-panel details.adv{margin-top:.55rem}
.wb-panel .adv-b .field{margin-bottom:.45rem}
.wb-panel .drops{margin:.1rem 0 .55rem}
.wb-panel .drops .dropb{transform:scale(.86);margin:-4px -3px}
.wb-panel .drops .dlbl{font-size:.74rem}
/* labelled rotate bar, crop moved onto the image */
.vbar button{width:auto;height:auto;min-width:44px;padding:.22rem .4rem;border-radius:10px;display:grid;justify-items:center;gap:1px}
.vbar button .vl{font-size:.58rem;line-height:1;letter-spacing:.01em;color:var(--muted)}
.vbar button.vhide{display:none}
.vbar .vsep{display:none}
/* buttons anchored to the picture */
.imgacts{position:absolute;top:8px;right:8px;display:grid;gap:6px;z-index:5}
.imgacts button{display:grid;justify-items:center;gap:1px;min-width:54px;padding:.32rem .45rem;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.92);color:var(--text);font:inherit;font-size:.6rem;font-weight:600;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.14);backdrop-filter:blur(3px)}
[data-theme="dim"] .imgacts button{background:rgba(30,32,36,.9)}
.imgacts button svg{width:16px;height:16px}
.imgacts button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.imgacts[hidden]{display:none}
/* no spinner arrows on number boxes */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.wb-panel details.adv{margin:.2rem 0 .6rem}
.imgacts.out{right:-66px}
.holder{overflow:visible}
.imgacts.out{top:40px}
/* resize popover */
.rzpop{position:absolute;z-index:7;width:220px;padding:.6rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.18);transform:scale(.15);opacity:0;transform-origin:top left;transition:transform .22s cubic-bezier(.2,.9,.3,1.2),opacity .18s ease}
.rzpop:not(.side){transform-origin:top right}
.rzpop.in{transform:scale(1);opacity:1}
.rzpop .rzrow{display:grid;grid-template-columns:1fr 12px 1fr auto;gap:.3rem;align-items:center}
.rzpop .rzrow .x,.rzpop .rzrow .u{font-size:.78rem;color:var(--muted);text-align:center}
.rzpop input[type=number]{min-height:34px;padding:.3rem .45rem;font-size:.9rem}
.rzpop .checkline{margin:.45rem 0 .4rem;font-size:.8rem}
.rzpop .rzacts{display:flex;gap:.35rem}
.rzpop .rzacts .btn{padding:.35rem .7rem;font-size:.8rem}
.rzpop{line-height:1.3}.rzpop .rzacts .btn{line-height:1.2}
/* mobile: never scroll sideways */
html,body{overflow-x:hidden;max-width:100%}
.hero-art,.hero-art img,.why-grid .art,.why-grid .art img,.cta-art{max-width:100%;height:auto}
@media (max-width:760px){.hgrid{grid-template-columns:1fr}.hero-art{margin:0 auto;width:min(100%,360px)}}
/* bottom bar retired: rotate lives on the picture */
.vbar{display:none}
.rotbtn{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:4px;padding:.26rem .55rem;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.94);color:var(--text);font:inherit;font-size:.62rem;font-weight:600;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.16);white-space:nowrap;transition:top .12s linear,left .12s linear,opacity .15s}
.rotbtn svg{width:14px;height:14px}
.rotbtn.crop{background:var(--accent);color:#fff;border-color:var(--accent)}
.rotbtn[hidden]{display:none}
[data-theme="dim"] .rotbtn{background:rgba(30,32,36,.92)}
/* unit pills: only as wide as the options, premium selected state */
.useg{width:max-content;align-self:flex-start;gap:2px;padding:2px;background:var(--surface-2);border-color:var(--border)}
.useg button{padding:.24rem .55rem;font-size:.74rem}
.useg button[aria-pressed="true"]{background:linear-gradient(135deg,#2f6f62 0%,#1c4a41 100%);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18)}
/* smaller boxes on phones */
@media (max-width:600px){
  .wb-panel input[type=text],.wb-panel input[type=number],.wb-panel input[type=date],.wb-panel select{min-height:34px;padding:.32rem .5rem;font-size:.88rem}
  .wb-panel .dimf{max-width:250px;grid-template-columns:minmax(56px,1fr) 12px minmax(56px,1fr) auto}
  .wb-panel .szf{grid-template-columns:minmax(0,1fr) 70px;max-width:250px}
  .wb-panel .field label{font-size:.74rem}
  .wb-panel .drops .dropb{transform:scale(.8);margin:-6px -4px}
}
.useg-src{width:1px!important;height:1px!important;min-height:0!important;left:0;top:0;margin:0!important;padding:0!important;border:0!important}
.stage{padding-bottom:34px}
.rzpop.sheet{position:fixed;left:10px;right:10px;width:auto;top:auto;bottom:10px;z-index:80;padding:.75rem .8rem;border-radius:14px;box-shadow:0 -6px 30px rgba(0,0,0,.22)}
.rzpop.sheet .rzrow{grid-template-columns:1fr 14px 1fr auto}
.rzpop.sheet input[type=number]{min-height:40px;font-size:1rem}
.rzpop.sheet .rzacts .btn{padding:.5rem 1rem;font-size:.9rem}
.drops{display:none!important}
.rotbtn{padding:0;width:34px;height:34px;justify-content:center;border-radius:50%}
.rotbtn svg{width:19px;height:19px}
/* compact size rows: W × H + unit pills on one line, small boxes */
.wb-panel .dimf{grid-template-columns:74px 12px 74px auto;max-width:none;gap:.3rem;align-items:center}
.wb-panel .dimf input[type=number]{min-height:32px;padding:.28rem .45rem;font-size:.86rem}
.wb-panel .dimf .useg{margin:0 0 0 .15rem;align-self:center}
.wb-panel .szf{grid-template-columns:110px 66px;max-width:none}
.wb-panel .szf input[type=number]{min-height:32px;padding:.28rem .45rem;font-size:.86rem}
.wb-panel .szf select{min-height:32px;padding:.2rem 1.2rem .2rem .45rem;font-size:.82rem}
.wb-panel .duo.compact input,.wb-panel .duo.compact select{min-height:32px;padding:.28rem .5rem;font-size:.86rem}
.wb-panel .field{margin-bottom:.45rem}
/* unit pills: light sky background (20%), blue selected */
.useg,.wb-panel .useg{background:rgba(135,206,250,.2);border:1px solid rgba(135,206,250,.5);padding:2px;gap:2px}
.useg button{padding:.2rem .45rem;font-size:.7rem;color:var(--muted)}
.useg button[aria-pressed="true"]{background:#1a73e8;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
@media (max-width:600px){
  .wb-panel .dimf{grid-template-columns:66px 12px 66px auto}
  .wb-panel .dimf .useg{margin-left:.1rem}
  .useg button{padding:.2rem .4rem;font-size:.68rem}
}
@media (max-width:359px){.wb-panel .dimf{grid-template-columns:60px 10px 60px auto}}
.wb-panel .szf{grid-template-columns:110px 74px}.wb-panel .szf select{padding:.2rem 1.25rem .2rem .5rem}
/* result state: size on its own centred line, buttons in a tidy row */
.stage .result .orow{flex-wrap:wrap;row-gap:.55rem}
.stage .result .osz{flex:1 1 100%;text-align:center}
.stage .result .osz .meta{max-width:320px;margin:0 auto}
.stage .result .orow .btn{min-width:118px}
/* after the file is built: hide editor-only bits (straighten slider, stale size bar) */
body.fk-done .wb-view>.field,body.fk-done .wb-view .calc{display:none}
/* tool search + filters (home + /tools/) */
.tsearch{max-width:640px;margin:0 auto 1.1rem;display:flex;flex-direction:column;gap:.55rem;align-items:center}
.tsearch input[type=search]{width:100%;min-height:44px;font-size:16px;padding:.5rem .9rem;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text)}
.tsearch input[type=search]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tfilters{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center}
.tfilters button{min-height:32px;padding:.3rem .8rem;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:.85rem;font-weight:600;cursor:pointer}
.tfilters button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.tcount{font-size:.85rem;margin:0;min-height:1.2em}
.tempty{text-align:center;margin:.6rem 0 0}
.tempty.hide,.tgrid.hide,.ghead.hide,.tcard.hide{display:none}
.tcard.vis{opacity:1;transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* result extras */
.stage .result .oextra{display:flex;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:.1rem}
.olink{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;padding:.35rem .4rem;min-height:24px;color:var(--accent);font-size:.86rem;font-weight:600;cursor:pointer;text-decoration:none}
.olink:hover{text-decoration:underline}
/* WCAG 2.2 target size + iOS: 16px inputs on phones (no zoom), still compact boxes */
.useg button{min-height:24px}
@media (max-width:600px){
  .wb-panel input[type=number],.wb-panel input[type=text],.wb-panel input[type=date],.wb-panel select{font-size:16px!important;min-height:36px}
  .wb-panel .dimf{grid-template-columns:72px 12px 72px auto}
  .wb-panel .szf{grid-template-columns:104px 74px}
  .useg button{padding:.22rem .42rem}
  .hero{padding-top:.9rem}
  .hero h1{font-size:clamp(1.55rem,7vw,2.1rem);margin-bottom:.45rem}
  .hero .lede{font-size:.98rem}
}
/* fonts self-hosted 2026-09-09 */
/* generated tool icons: 64px mint tile, image fills it */
.tcard .ico.tico{width:72px;height:72px;border-radius:18px;background:var(--accent-soft,#e6f1ee);overflow:hidden}
.tcard .ico.tico img{width:66px;height:66px;object-fit:contain;display:block}
html[data-theme=dim] .tcard .ico.tico{background:rgba(255,255,255,.08)}
/* header language toggle */
.lang-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:32px;padding:0 .55rem;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:700;font-size:.82rem;text-decoration:none;line-height:1}
.lang-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);text-decoration:none}
@media (max-width:860px){.hdr .in{gap:.45rem}.lang-btn{min-width:36px;height:30px;font-size:.78rem}}
/* compact hub cards */
.tgrid .tcard{padding:.9rem .95rem}
.tgrid .tcard .ico.tico{width:56px;height:56px;border-radius:14px;margin-bottom:.55rem}
.tgrid .tcard .ico.tico img{width:50px;height:50px}
.tgrid .tcard h3{font-size:1rem;margin-bottom:.25rem}
.tgrid .tcard p{font-size:.84rem;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* preset search results */
.tsr{width:100%;max-width:640px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:.55rem .7rem .3rem;box-shadow:var(--sh-lg)}
.tsr[hidden]{display:none}
.tsr-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .3rem;font-weight:700}
.tsr ul{list-style:none;margin:0;padding:0}
.tsr li a{display:flex;align-items:center;gap:.6rem;padding:.42rem .3rem;border-radius:var(--r);text-decoration:none;color:var(--text);min-height:36px}
.tsr li a:hover,.tsr li a:focus-visible{background:var(--accent-soft)}
.tsr .tg{flex:0 0 auto;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.15rem .45rem;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent)}
.tsr .tn{font-weight:600;font-size:.92rem}
.tsr .ts{margin-left:auto;font-size:.78rem;color:var(--muted);white-space:nowrap}
@media (max-width:600px){.tsr .ts{display:none}}
.wb-view .field.straighten{margin-top:1.6rem}
.drop.mini .sub{display:block;margin-top:.15rem}
.duo.compact label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.duo.compact label .opt{display:none}}

/* compact tool grid (home): 4 / 3 / 2 columns, small cards */
.grid.tgrid-compact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;max-width:1000px;margin:0 auto}
.tgrid-compact .tcard{padding:.8rem .85rem .75rem;min-height:0;display:flex;flex-direction:column}
.tgrid-compact .tcard .ico.tico{width:52px;height:52px;border-radius:14px;margin-bottom:.5rem}
.tgrid-compact .tcard .ico.tico img{width:48px;height:48px}
.tgrid-compact .tcard h3{font-size:.98rem;margin:0 0 .25rem;line-height:1.25}
.tgrid-compact .tcard p{font-size:.8rem;line-height:1.4;margin:0 0 .5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tgrid-compact .tcard .go{font-size:.8rem;margin-top:auto}
.tgrid-compact .tcard.hide{display:none}
@media (max-width:1023px){.grid.tgrid-compact{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.grid.tgrid-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .tgrid-compact .tcard{padding:.7rem .7rem .65rem}.tgrid-compact .tcard .ico.tico{width:44px;height:44px;border-radius:12px;margin-bottom:.4rem}.tgrid-compact .tcard .ico.tico img{width:40px;height:40px}
  .tgrid-compact .tcard h3{font-size:.9rem}.tgrid-compact .tcard p{font-size:.74rem;-webkit-line-clamp:2}.tgrid-compact .tcard .go{font-size:.76rem}}
/* tools menu under the "All tools" nav item */
.nitem{position:relative;display:flex;align-items:center}
.ncaret{display:none;width:28px;height:28px;border:0;background:none;color:var(--muted);border-radius:var(--r-pill);cursor:pointer;place-items:center}
.megamenu{position:absolute;top:calc(100% + 8px);left:0;min-width:520px;display:none;grid-template-columns:1fr 1fr;gap:.15rem .5rem;padding:.6rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);z-index:60}
.megamenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.mitem{display:flex;align-items:center;gap:.6rem;padding:.45rem .55rem;border-radius:var(--r);text-decoration:none;color:var(--text)}
.mitem:hover,.mitem:focus-visible{background:var(--accent-soft);text-decoration:none}
.mitem img{width:40px;height:40px;flex:0 0 40px;border-radius:10px;background:var(--accent-soft)}
.mitem span{display:flex;flex-direction:column;line-height:1.2}
.mitem b{font-size:.9rem;font-weight:650}.mitem small{font-size:.74rem;color:var(--muted)}
.mall{grid-column:1/-1;text-align:right;font-size:.82rem;font-weight:650;color:var(--accent);padding:.35rem .55rem .1rem;text-decoration:none}
@media (min-width:861px){
  .nitem.has-menu:hover .megamenu,.nitem.has-menu:focus-within .megamenu,.nitem.has-menu.open .megamenu{display:grid}
}
@media (max-width:860px){
  .nitem{flex-wrap:wrap}.nitem>a{flex:1}
  .ncaret{display:grid}
  .megamenu{position:static;min-width:0;width:100%;box-shadow:none;border:0;border-left:2px solid var(--border);border-radius:0;padding:.2rem 0 .3rem .6rem;margin:0 0 .3rem .6rem;grid-template-columns:1fr}
  .nitem.open .megamenu{display:grid}
  .mitem{padding:.4rem .4rem}.mitem img{width:32px;height:32px;flex-basis:32px}
  .mall{text-align:left}
}
.tgrid-compact .tcard.rv,.tgrid .tcard.rv{opacity:1;transform:none}
/* phone: collapsed guide (content stays in DOM; only overflow is clipped) */
@media (max-width:600px){
  .sec.read[data-collapsed="true"]{position:relative;max-height:384px;overflow:hidden;padding-bottom:4rem}
  .sec.read[data-collapsed="true"]::after{content:"";position:absolute;inset:auto 0 0;height:8rem;background:linear-gradient(to bottom,transparent,var(--bg) 58%);pointer-events:none}
  .sec.read>.readmore{display:inline-flex;margin-top:.5rem}
  .sec.read[data-collapsed="true"]>.readmore{position:absolute;left:0;bottom:.5rem;z-index:2}
}
@media (min-width:601px){.sec.read>.readmore{display:none}}
/* desktop: sticky in-page mini-nav on tool pages */
.page-nav{display:none}
@media (min-width:1024px){
  .page-nav{position:sticky;top:68px;z-index:45;display:flex;width:max-content;max-width:100%;gap:.25rem;margin:.6rem 0 1rem;padding:.3rem;overflow-x:auto;white-space:nowrap;background:color-mix(in srgb,var(--bg) 94%,transparent);border:1px solid var(--border);border-radius:var(--r-pill);box-shadow:var(--sh);backdrop-filter:blur(10px)}
  .page-nav a{padding:.34rem .7rem;border-radius:var(--r-pill);color:var(--muted);font-size:.84rem;font-weight:600;text-decoration:none}
  .page-nav a:hover{color:var(--text)}
  .page-nav a[aria-current]{color:var(--accent);background:var(--accent-soft)}
  #tool,#guide,#sizes,#steps,#faq{scroll-margin-top:128px}
}
.tool-sec{margin:0;padding:0}