:root{
  --bg:#f7f7fb; --panel:#fff; --text:#1c1b29; --sub:#5d5b73; --border:#e2e1ee;
  --accent:#4f46e5; --accent-dark:#3d34c9; --accent-soft:#ecebff; --ok:#12805c; --ok-soft:#e6f6ef; --warn:#a15c07; --danger:#c0362c;
  --radius:14px; --maxw:960px; --checker:#dcdce8;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#12121a; --panel:#1b1b27; --text:#eeeef7; --sub:#a4a3bd; --border:#2f2f44; --accent:#8b83ff; --accent-dark:#a9a3ff;
    --accent-soft:#272546; --ok:#4cd6a0; --ok-soft:#153229; --warn:#f0b35a; --danger:#ff8b82; --checker:#2a2a3a;}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}
header.site{background:var(--panel);border-bottom:1px solid var(--border)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;text-decoration:none;color:var(--text)}
.logo{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;font-size:16px}
.lang-switch{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.lang-switch a{padding:5px 11px;font-size:12px;font-weight:700;text-decoration:none;color:var(--sub)}
.lang-switch a.active{background:var(--accent);color:#fff}
.lang-switch a:not(.active):hover{background:var(--accent-soft)}
.toolbar{border-top:1px solid var(--border)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:thin}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:999px;
  font-size:13.5px;text-decoration:none;color:var(--sub);background:var(--panel);white-space:nowrap}
.chip:hover,.chip[aria-current]{color:var(--accent-dark);border-color:var(--accent);background:var(--accent-soft)}
.prose .chips{flex-wrap:wrap;overflow:visible;padding:0}
.langbar{background:var(--accent-soft);border-bottom:1px solid var(--border);padding:8px 18px;text-align:center;font-size:14px}
.langbar button{margin-left:8px}
main{padding-top:26px;padding-bottom:56px}
h1{font-size:clamp(26px,4.5vw,36px);line-height:1.15;margin:0 0 8px}
h2{font-size:21px;margin:0 0 10px}
h3{margin:0 0 4px;font-size:17px}
.lede{color:var(--sub);font-size:17px;margin:0 0 14px;max-width:70ch}
.privacy-pill{display:inline-block;margin:0 0 20px;padding:5px 12px;background:var(--ok-soft);color:var(--ok);border-radius:999px;font-size:13.5px;font-weight:600}
.tool{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:34px}
.prose{margin-bottom:30px;max-width:78ch}
.prose ol{padding-left:22px}
.prose li{margin-bottom:6px}
details{border:1px solid var(--border);border-radius:10px;background:var(--panel);margin-bottom:8px;padding:10px 14px}
summary{cursor:pointer;font-weight:600}
details p{margin:8px 0 2px;color:var(--sub)}

/* home */
.hero{padding:10px 0 18px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:12px 0 30px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.tool-card{display:block;text-decoration:none;color:var(--text)}
.tool-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.tool-card p{margin:0;color:var(--sub);font-size:14.5px}
.card-icon{font-size:26px;display:block;margin-bottom:6px}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.why .card p{margin:0;color:var(--sub);font-size:15px}

/* controls */
button,.btn{font:inherit;cursor:pointer;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:9px 16px;text-decoration:none;display:inline-block}
button:hover,.btn:hover{border-color:var(--accent)}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
button.primary:hover,.btn.primary:hover{background:var(--accent-dark)}
button.small,.btn.small{padding:5px 11px;font-size:13.5px}
button:disabled{opacity:.5;cursor:not-allowed}
button.danger{color:var(--danger)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
label{display:block;font-size:13.5px;font-weight:600;color:var(--sub);margin-bottom:4px}
input[type=number],input[type=text],select{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:9px;font:inherit;background:var(--bg);color:var(--text)}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:16px 0}
.check{display:flex;align-items:center;gap:8px;font-weight:500}
.check input{width:auto}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.hidden{display:none!important}
.muted{color:var(--sub);font-size:14px}
.status{margin:12px 0 0;min-height:1.4em;color:var(--sub);font-size:14.5px}
.status.error{color:var(--danger);font-weight:600}
.progress{height:8px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:10px}
.progress>i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}

/* dropzone */
.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:34px 16px;text-align:center;cursor:pointer;background:var(--bg);transition:.15s}
.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-soft)}
.dz-icon{font-size:34px;line-height:1}
.dz-title{font-weight:700;margin:8px 0 2px}
.dz-sub{color:var(--sub);font-size:14px;margin:0}

/* file / result lists */
.list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.item .thumb{width:56px;height:56px;flex:0 0 56px;border-radius:8px;object-fit:cover;background:var(--checker)}
.item .thumb.doc{display:grid;place-items:center;font-size:26px;background:var(--accent-soft)}
.item .meta{flex:1;min-width:0;font-size:14px}
.item .meta strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px}
.item .meta span{color:var(--sub)}
.item .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.badge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;font-weight:700;background:var(--ok-soft);color:var(--ok);margin-left:6px}
.badge.warn{background:var(--accent-soft);color:var(--warn)}

/* canvases */
.checker{background-color:var(--checker);background-image:linear-gradient(45deg,rgba(128,128,128,.25) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.25) 75%),linear-gradient(45deg,rgba(128,128,128,.25) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.25) 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.stage{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.stage.single{grid-template-columns:1fr}
.stage figure{margin:0;text-align:center}
.stage figcaption{font-size:13px;color:var(--sub);margin-top:6px}
.stage canvas,.stage img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--border);background:var(--panel)}
@media (max-width:640px){.stage{grid-template-columns:1fr}.item{flex-wrap:wrap}}

/* drawing */
.draw-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.draw-tools .seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.draw-tools .seg button{border:0;border-radius:0;padding:7px 11px}
.draw-tools .seg button.on{background:var(--accent);color:#fff}
.draw-tools .swatches{display:inline-flex;gap:5px}
.swatch{width:26px;height:26px;padding:0;border-radius:50%;border:2px solid var(--border)}
.swatch.on{outline:3px solid var(--accent);outline-offset:1px}
.draw-tools label{margin:0;display:flex;align-items:center;gap:8px}
.draw-tools input[type=range]{width:110px}
#board{width:100%;height:auto;aspect-ratio:16/10;border:1px solid var(--border);border-radius:10px;touch-action:none;cursor:crosshair;display:block}

footer.site{border-top:1px solid var(--border);background:var(--panel);padding:22px 0;color:var(--sub);font-size:14px;text-align:center}
footer.site p{margin:4px 0}

/* per-mode option groups (image tools share one template) */
.only-convert,.only-compress,.only-resize{display:none}
body[data-mode="convert"] .only-convert,body[data-mode="compress"] .only-compress,body[data-mode="resize"] .only-resize{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card.prose{max-width:none;margin-bottom:14px}
.card.prose h2{margin-bottom:6px}
.card.prose p{margin:0;color:var(--sub)}

/* extra tools: form fields, QR generator, small print */
textarea,input[type=email],input[type=url]{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:9px;font:inherit;background:var(--bg);color:var(--text)}
textarea{resize:vertical;min-height:80px}
.fineprint{color:var(--sub);font-size:12.5px;margin:-12px 0 26px}
.qr-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;align-items:start}
.qr-frame{display:grid;place-items:center;padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--checker)}
#qrCanvas{max-width:100%;height:auto;image-rendering:pixelated;background:#fff;border-radius:4px}
.qr-out{position:sticky;top:10px}
@media (max-width:760px){.qr-layout{grid-template-columns:1fr}.qr-out{position:static}}

/* ID photo maker */
.idp-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px;align-items:start;margin-top:16px}
.idp-preview{position:sticky;top:10px}
.idp-frame{display:grid;place-items:center;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--checker)}
#preview.idp,.idp-frame canvas{max-width:100%;height:auto;cursor:grab;touch-action:none;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.idp-frame canvas:active{cursor:grabbing}
.idp-h{margin:18px 0 0;font-size:16px}
.notice{margin:16px 0 0;padding:10px 14px;border-radius:10px;background:var(--accent-soft);color:var(--text);font-size:14px}
@media (max-width:760px){.idp-layout{grid-template-columns:1fr}.idp-preview{position:static;order:-1}}