/* PDF Toolkit - Created by Haider Ali */
:root{--ink:#0d0d10;--mute:#5d606b;--line:#fff;--card:rgba(255,255,255,.72);--err:#b3261e;--ok:#1e7a46}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Sora,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:linear-gradient(180deg,#f6f6f8 0%,#e4e5ea 45%,#d1d3dd 100%) fixed;min-height:100vh;line-height:1.55}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:inherit}
.btn{border:0;cursor:pointer;font:600 14px Sora,sans-serif;color:#fff;background:linear-gradient(135deg,#0d0d10,#3b3d48);padding:12px 22px;border-radius:14px;box-shadow:0 8px 20px rgba(13,13,16,.22);text-decoration:none;display:inline-block}
.btn:disabled{opacity:.4;cursor:not-allowed}
.ghost{cursor:pointer;font:600 13px Sora,sans-serif;background:#fff;color:var(--ink);border:1px solid #dcdde3;padding:8px 14px;border-radius:12px;text-decoration:none;display:inline-block}
.btn:focus-visible,.ghost:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.tool:focus-visible{outline:3px solid #6b6e7c;outline-offset:2px}
.hero{padding:48px 0 30px}
h1{font-size:clamp(40px,8vw,76px);letter-spacing:-2.5px;margin:0;line-height:1.02;font-weight:800;color:#3a3b44}
.by{font-size:clamp(16px,2.4vw,20px);color:var(--mute);margin:10px 0 0;font-weight:500}
.lead{max-width:560px;color:var(--mute);margin:18px 0 0}
.note{margin-top:22px;display:inline-flex;gap:8px;align-items:center;background:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;box-shadow:0 4px 14px rgba(20,20,30,.06)}
.dot{width:8px;height:8px;border-radius:50%;background:#22c55e}
h2.cat{font-size:26px;letter-spacing:-.6px;margin:46px 0 4px}
h2.cat::after{content:"";display:block;width:30px;height:2px;background:var(--ink);margin-top:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-top:18px}
.tool{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 12px 30px rgba(20,20,30,.07);cursor:pointer;text-decoration:none;display:flex;flex-direction:column;gap:2px;transition:transform .15s}
.tool:hover{transform:translateY(-3px)}
.ic{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#0d0d10,#3b3d48);display:grid;place-items:center;font-size:19px;margin-bottom:12px}
.tool h3{margin:0;font-size:17px;letter-spacing:-.3px}
.slogan{margin:0;font-size:13px;font-weight:600;color:#3a3b44}
.tool h4,.page h4{margin:12px 0 2px;font-size:12px;font-weight:700;color:var(--mute)}
.tool p.d{margin:0;font-size:13px;color:var(--mute)}
.tag{display:inline-block;font-size:11px;font-weight:600;background:#e3e4ea;border-radius:999px;padding:2px 10px;margin-top:12px;align-self:flex-start;color:#3a3b44}
.tag.na{background:#f0dcdc;color:var(--err)}
.tool.na{opacity:.75}
.page{padding:20px 0 60px}
.head{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 12px 30px rgba(20,20,30,.07);margin:16px 0}
.head h1{font-size:clamp(30px,5vw,46px);letter-spacing:-1.5px}
.head .slogan{font-size:16px;margin-top:6px}
.head p.d{max-width:720px;color:var(--mute);margin:4px 0 0}
.work{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:0 12px 30px rgba(20,20,30,.07)}
.drop{border:2px dashed #a9abb7;border-radius:20px;padding:34px 16px;text-align:center;background:rgba(255,255,255,.6);cursor:pointer}
.drop.over{background:#fff;border-color:var(--ink)}
.drop small{color:var(--mute)}
.files{list-style:none;margin:14px 0;padding:0;display:grid;gap:8px}
.files li{display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:10px 12px;font-size:13px}
.files .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.files .m{color:var(--mute);font-size:12px}
.files .bad{color:var(--err);font-size:12px}
.files button{border:0;background:#eceef2;border-radius:8px;width:28px;height:28px;cursor:pointer}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:18px 0}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--mute)}
label.f.wide{grid-column:1/-1}
input[type=text],input[type=number],input[type=color],select,textarea{font:500 14px Sora,sans-serif;padding:10px 12px;border:1px solid #d3d5dd;border-radius:12px;background:#fff;color:var(--ink);width:100%}
input[type=checkbox]{width:20px;height:20px;accent-color:#0d0d10}
canvas#sig{background:#fff;border:1px solid #d3d5dd;border-radius:12px;width:100%;max-width:400px;touch-action:none}
.bar{height:8px;border-radius:99px;background:#d9dbe2;overflow:hidden;margin-top:14px;display:none}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0d0d10,#4a4c58);transition:width .15s}
.st{font-size:13px;margin:10px 0 0;color:var(--mute)}
.st.err{color:var(--err);font-weight:600}.st.ok{color:var(--ok);font-weight:600}
.res{display:grid;gap:8px;margin-top:14px}
.res .r{display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:10px 12px;font-size:13px;flex-wrap:wrap}
.res img{height:44px;border-radius:6px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.out{width:100%;margin-top:14px;min-height:200px}
.back{font-size:13px;font-weight:600;text-decoration:none;color:var(--mute)}
footer{border-top:1px solid rgba(0,0,0,.08);margin-top:50px;padding:24px 0 40px;font-size:13px;color:var(--mute);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer b{color:var(--ink)}

/* ===== Layout, nav ===== */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}
.wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.skip{position:absolute;left:-999px;top:8px;background:#0d0d10;color:#fff;padding:8px 14px;border-radius:10px;z-index:100}
.skip:focus{left:12px}
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blobs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;animation:float 16s ease-in-out infinite}
.blobs i:nth-child(1){width:380px;height:380px;background:#c7cae4;top:-80px;left:-80px}
.blobs i:nth-child(2){width:320px;height:320px;background:#e5d6e8;top:35%;right:-90px;animation-delay:-5s}
.blobs i:nth-child(3){width:340px;height:340px;background:#cfe3ea;bottom:-100px;left:25%;animation-delay:-9s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.12)}}
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(240,241,245,.72);border-bottom:1px solid rgba(255,255,255,.7);padding-top:env(safe-area-inset-top)}
.nav{display:flex;justify-content:space-between;align-items:center;padding-top:12px;padding-bottom:12px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:17px;letter-spacing:-.3px}
.logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#0d0d10,#3b3d48);display:grid;place-items:center;font-size:17px;transition:transform .3s}
.brand:hover .logo{transform:rotate(-8deg) scale(1.08)}
.menuwrap{position:relative}
.chev{display:inline-block;transition:transform .25s}
[aria-expanded=true] .chev{transform:rotate(180deg)}
.menu-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(760px,calc(100vw - 32px));max-height:75vh;overflow:auto;background:rgba(255,255,255,.96);border:1px solid #fff;border-radius:22px;box-shadow:0 24px 60px rgba(20,20,30,.2);padding:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:.22s}
.menu-panel.open{opacity:1;visibility:visible;transform:none}
.mcol h4{margin:0 0 6px;font-size:12px;color:var(--mute)}
.mcol a{display:flex;gap:8px;align-items:center;text-decoration:none;font-size:14px;font-weight:600;padding:8px 10px;border-radius:10px;min-height:40px;transition:background .15s}
.mcol a:hover{background:#eceef2}

/* ===== Hero + home ===== */
.hero{padding:44px 0 14px}
.search{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:4px 16px;margin-top:26px;max-width:520px;box-shadow:0 10px 26px rgba(20,20,30,.08);border:1px solid #fff;transition:box-shadow .2s,transform .2s}
.search:focus-within{box-shadow:0 12px 32px rgba(20,20,30,.16);transform:translateY(-1px)}
.search input{border:0!important;box-shadow:none;background:transparent!important;padding:12px 0!important;outline:0!important;font-size:16px}
.go{margin-top:14px;font-size:13px;font-weight:700;align-self:flex-start}
.go i{display:inline-block;font-style:normal;transition:transform .2s}
.tool:hover .go i{transform:translateX(5px)}
.tool{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.tool:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(20,20,30,.14)}
.tool:active{transform:scale(.985)}
.tool .ic{transition:transform .3s}
.tool:hover .ic{transform:rotate(-8deg) scale(1.1)}
.tool.hide,.catsec.hide{display:none}
.tool .d{margin-top:8px}

/* ===== Tool page ===== */
.crumbs{font-size:13px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.crumbs a{text-decoration:none;font-weight:600}
.crumbs b{color:var(--ink)}
.head .ic.big{width:56px;height:56px;font-size:26px;border-radius:17px}
.work{margin-bottom:10px;animation:rise .5s both .1s}
.drop{transition:background .2s,border-color .2s,transform .2s}
.drop:hover{border-color:var(--ink);transform:scale(1.005)}
.drop.over{transform:scale(1.015)}
.files li{animation:pop .3s both}
.btn{transition:transform .15s,box-shadow .2s,opacity .2s;min-height:44px}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 26px rgba(13,13,16,.3)}
.btn:active:not(:disabled){transform:scale(.97)}
.ghost{min-height:40px;transition:background .15s,transform .15s}
.ghost:hover{background:#eceef2}
.ghost:active{transform:scale(.96)}
.bar i{background-size:200% 100%;background-image:linear-gradient(90deg,#0d0d10,#6b6e7c,#0d0d10);animation:shimmer 1.2s linear infinite}
.res .r{animation:pop .35s both}
.res .r:nth-child(2){animation-delay:.05s}.res .r:nth-child(3){animation-delay:.1s}.res .r:nth-child(4){animation-delay:.15s}
.files button{transition:background .15s,transform .15s}
.files button:hover{background:#dcdfe6}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ===== SEO sections ===== */
.prose{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:26px;box-shadow:0 12px 30px rgba(20,20,30,.06);margin-top:26px}
.prose h2{margin:0 0 10px;font-size:22px;letter-spacing:-.5px}
.prose p{color:var(--mute);margin:8px 0}
.steps{margin:0;padding-left:22px;color:var(--mute)}
.steps li{margin:8px 0;padding-left:4px}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px}
.feats div{background:#fff;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute);transition:transform .2s}
.feats div:hover{transform:translateY(-3px)}
.feats b{color:var(--ink);font-size:15px}
details{background:#fff;border-radius:14px;padding:0 16px;margin:8px 0;transition:box-shadow .2s}
details[open]{box-shadow:0 6px 18px rgba(20,20,30,.08)}
summary{cursor:pointer;font-weight:600;font-size:14px;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:10px;min-height:44px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:20px;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 14px;animation:rise .3s both}

/* ===== Footer ===== */
.foot{border-top:1px solid rgba(0,0,0,.08);margin-top:50px;padding:34px 0 30px;font-size:13px;color:var(--mute)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:22px}
.fgrid h4{margin:0 0 8px;font-size:12px;color:var(--ink)}
.fgrid a{display:block;text-decoration:none;padding:3px 0;transition:color .15s,transform .15s}
.fgrid a:hover{color:var(--ink);transform:translateX(3px)}
.fbrand p{margin:6px 0 0;max-width:260px}
.fbot{margin-top:26px;padding-top:18px;border-top:1px solid rgba(0,0,0,.06);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.fbot b{color:var(--ink)}

/* ===== Entrance animations ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease var(--d,0ms),transform .6s ease var(--d,0ms),box-shadow .25s}
.reveal.in{opacity:1;transform:none}
.tool.reveal.in:hover{transform:translateY(-5px)}
.anim-in{animation:rise .7s both var(--d,0ms)}
.no-js .reveal{opacity:1;transform:none}

/* ===== Responsive ===== */
@media(max-width:900px){.fgrid{grid-template-columns:repeat(3,1fr)}.fbrand{grid-column:1/-1}}
@media(max-width:600px){
 .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 .hero{padding-top:28px}
 h1{letter-spacing:-1.5px}
 .grid{grid-template-columns:1fr;gap:12px}
 .head,.work,.prose{padding:18px;border-radius:20px}
 .menu-panel{position:fixed;left:12px;right:12px;top:calc(60px + env(safe-area-inset-top));width:auto;max-height:80vh}
 .row .btn,.row .ghost{flex:1 1 auto;text-align:center}
 .files li{flex-wrap:wrap}
 .files .n{flex-basis:100%}
 .res .r .btn{flex:1 1 100%;text-align:center}
 .opts{grid-template-columns:1fr}
 .fgrid{grid-template-columns:repeat(2,1fr)}
 .fbot{flex-direction:column}
 .drop{padding:26px 12px}
}
/* 16px inputs stop iOS zoom-on-focus */
input[type=text],input[type=number],input[type=search],select,textarea{font-size:16px;min-height:44px}
input[type=color]{min-height:44px;padding:4px}
@media(hover:none){.tool:hover,.feats div:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}