:root{--ink:#122039;--navy:#091529;--navy2:#101e36;--muted:#64738c;--line:#e3eaf1;--soft:#f5f8fc;--white:#fff;--teal:#05b6a4;--teal2:#007e77;--lime:#a6f2c6;--amber:#ffd083;--shadow:0 20px 55px rgba(1,15,36,.13)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f6f9fc;color:var(--ink);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit}button,select,input{font:inherit}button{cursor:pointer}
.visually-hidden{position:absolute;clip:rect(0 0 0 0);height:1px;width:1px;overflow:hidden;white-space:nowrap}
.shell{width:min(1160px,calc(100% - 40px));margin:auto}
.site-top{background:var(--navy);color:#eaf7fd;position:relative;overflow:hidden}
.site-top::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 86% 15%,rgba(16,193,172,.15),transparent 38%),radial-gradient(circle at 12% 90%,rgba(64,108,231,.17),transparent 45%);pointer-events:none}
.site-top::after{content:"";position:absolute;inset:0;opacity:.06;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(to bottom,#000,transparent);pointer-events:none}
nav{position:relative;z-index:1;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:850;font-size:1.3rem;letter-spacing:-.04em}
.brand-mark{width:37px;height:37px;border-radius:12px;background:linear-gradient(135deg,#00d9bb,#6ae8e5);display:grid;place-items:center;color:#062b37;box-shadow:0 6px 23px #00d9bb2e;font-size:1.2rem}
.nav-links{display:flex;align-items:center;gap:24px;font-size:.91rem;color:#b9cadd}
.nav-links a{text-decoration:none}.nav-links a:hover{color:white}
.nav-pill{border:1px solid #36556b;padding:8px 15px;border-radius:99px;color:#9debdc;font-weight:650;white-space:nowrap;font-size:.81rem}
.hero{position:relative;z-index:1;text-align:center;padding:42px 0 105px}
.eyebrow{display:inline-flex;gap:9px;align-items:center;padding:7px 13px;border:1px solid #29514e;background:#0f3239;border-radius:100px;font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9ce9df}
.sparkle{color:#54efc7;font-size:1rem}
h1{font-size:clamp(2.3rem,5vw,4.5rem);line-height:1.08;letter-spacing:-.065em;max-width:875px;margin:21px auto 17px;font-weight:850;color:#fff}
.hero h1 em{font-style:normal;color:#76e8cb}
.hero p{color:#b4c8d9;max-width:630px;margin:0 auto;font-size:clamp(.98rem,1.7vw,1.14rem)}
.main-wrap{position:relative;z-index:2;margin-top:-67px}
.workspace{background:#fff;border-radius:24px;box-shadow:var(--shadow);overflow:hidden;border:1px solid #e6edf3}
.workspace-header{padding:25px 30px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.workspace-header h2{font-size:1.21rem;margin:0;letter-spacing:-.035em}
.workspace-header p{color:var(--muted);margin:3px 0 0;font-size:.86rem}
.privacy{display:inline-flex;align-items:center;gap:7px;color:#16806f;font-size:.76rem;font-weight:750;background:#eafbf5;border-radius:99px;padding:7px 12px;white-space:nowrap}
.workspace-body{padding:30px}
.dropzone{padding:35px 25px;text-align:center;border:2px dashed #afc8d2;background:linear-gradient(130deg,#f7fdfc,#f9fbff);border-radius:18px;transition:background .2s,border .2s;position:relative;outline:none}
.dropzone.drag{border-color:#03b69e;background:#e6fbf7}.dropzone:focus-visible{outline:3px solid #2ab5af;outline-offset:3px}
.upload-icon{width:64px;height:64px;background:#e0f9f3;border-radius:18px;color:#057f73;display:grid;place-items:center;font-size:2rem;margin:0 auto 14px}
.dropzone strong{font-size:1.18rem;display:block;letter-spacing:-.028em}
.dropzone p{color:var(--muted);margin:5px 0 20px;font-size:.88rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;border:1px solid transparent;font-weight:750;min-height:44px;padding:10px 18px;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:focus-visible,.option:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #55dcd2;outline-offset:2px}
.btn-primary{background:#0b988a;color:white;box-shadow:0 4px 16px #099a8822}.btn-primary:hover{background:#047e75}
.btn-dark{background:#10223a;color:#fff}.btn-dark:hover{background:#1d3551}
.btn-ghost{border-color:#d7e2ec;background:#fff;color:#243a54}.btn-ghost:hover{background:#eef6f8}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.shortcut{margin:12px 0 0!important;font-size:.77rem!important;color:#8495a6!important}
.file-line{display:none;margin:18px 0 0;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#f0f8f7;border:1px solid #c8ece6;border-radius:12px}
.file-line.active{display:flex}.file-main{min-width:0}.file-main strong{font-size:.89rem;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.file-main span{font-size:.77rem;color:#52716e}.text-btn{border:0;background:none;font-weight:750;color:#087f75;padding:8px}
.settings{margin-top:28px;display:none}.settings.active{display:block}
.group-title{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.group-title h3{font-size:1rem;letter-spacing:-.02em;margin:0}.group-title small{font-size:.78rem;color:var(--muted)}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.option{border:1.5px solid #dde7ee;background:white;border-radius:13px;padding:14px 15px;text-align:left;min-height:105px;display:flex;flex-direction:column;gap:5px;color:var(--ink)}
.option:hover{border-color:#7eb9b3}.option[aria-pressed="true"]{border-color:#00a890;background:#f0fffb;box-shadow:0 0 0 1px #00a890 inset}
.option strong{font-size:.94rem}.option span{font-size:.78rem;color:var(--muted);line-height:1.45}
.option .opt-top{font-weight:850;color:#029d89;font-size:1.1rem}
.config-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:24px}
.field{display:flex;flex-direction:column;gap:8px}.field label{font-weight:740;font-size:.85rem}
.field select,.field input[type=number]{width:100%;border-radius:10px;border:1px solid #d5e0e9;background:#fbfdff;color:#1c3049;min-height:46px;padding:10px 12px}
.field-note{color:#728399;font-size:.77rem}
.dimension-row{display:grid;grid-template-columns:1fr 20px 1fr;align-items:center;gap:8px}.dimension-row i{text-align:center;color:#a1acb6;font-style:normal}
.checkbox-line{display:flex;align-items:center;gap:8px;font-size:.81rem;color:#4c5f73;margin-top:9px;user-select:none}.checkbox-line input{accent-color:#058f7e;width:16px;height:16px}
.target-row{display:none;margin-top:22px}.target-row.active{display:block}
.presets{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.preset{border:1px solid #d5e5e6;border-radius:9px;padding:6px 11px;color:#08756d;background:#fff;font-weight:750;font-size:.8rem}.preset:hover{background:#e9faf6}
.actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;margin-top:25px}
.actions .btn{min-width:190px}
.status{font-size:.84rem;color:#536982;flex:1;margin:0}
.status.error{color:#b03b3b}.status.success{color:#087a6c}
.output-section{display:none;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}.output-section.active{display:block}
.output-header{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.output-header h3{margin:0;font-size:1.16rem}.saving{font-size:.83rem;color:#138675;font-weight:700}
.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:17px}
.preview-card{border:1px solid #dfe9ee;border-radius:14px;overflow:hidden;background:#fcfdff}
.preview-caption{padding:11px 13px;display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:720;gap:8px}
.preview-caption span{color:#6a7989;font-weight:600}
.preview-stage{height:250px;background-color:#edf2f5;background-image:linear-gradient(45deg,#e1e8ef 25%,transparent 25%),linear-gradient(-45deg,#e1e8ef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e1e8ef 75%),linear-gradient(-45deg,transparent 75%,#e1e8ef 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;display:grid;place-items:center;overflow:hidden}
.preview-stage img{width:100%;height:100%;object-fit:contain;display:none}
.output-bottom{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:16px;flex-wrap:wrap}
.output-bottom .btn{min-width:190px}.output-facts{font-size:.84rem;color:#52677c}.output-facts strong{color:#15283d}
.warning{font-size:.83rem;color:#82530e;background:#fff8e9;border:1px solid #f2deb3;border-radius:10px;padding:10px 12px;margin:16px 0 0;display:none}
.warning.active{display:block}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:30px 0 0}
.trust{display:flex;gap:12px;align-items:flex-start}.trust-icon{width:36px;height:36px;flex:none;background:#ddf9f3;color:#058a7a;border-radius:10px;display:grid;place-items:center;font-size:1.1rem}
.trust strong{font-size:.9rem}.trust p{font-size:.81rem;color:var(--muted);margin:3px 0 0}
.content{padding:72px 0 56px;display:grid;grid-template-columns:1fr 1fr;gap:80px}
.content h2,.more-tools h2{font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.052em;line-height:1.2;margin:0 0 15px}
.content p,.content li{font-size:.94rem;color:#53677e;line-height:1.75}
.steps{counter-reset:steps;list-style:none;padding:0;margin:0}.steps li{position:relative;padding:0 0 18px 43px;counter-increment:steps}.steps li::before{content:counter(steps);position:absolute;left:0;top:0;display:grid;place-items:center;height:28px;width:28px;background:#e3f6f3;border-radius:9px;color:#0a867b;font-size:.87rem;font-weight:800}
.faqs{border:1px solid #e0e8f0;border-radius:16px;overflow:hidden;background:#fff}.faqs details{padding:16px 20px;border-bottom:1px solid #e9eef3}.faqs details:last-child{border-bottom:0}.faqs summary{font-weight:700;cursor:pointer;font-size:.9rem}.faqs p{font-size:.86rem;margin-bottom:0;line-height:1.55}
.more-tools{padding:10px 0 78px}.more-tools h2{font-size:1.62rem}.link-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.link-tile{border:1px solid #dce6ee;border-radius:14px;padding:17px;background:#fff;text-decoration:none;transition:border .2s,transform .2s}.link-tile:hover{border-color:#58baac;transform:translateY(-2px)}.link-tile strong{display:block;font-size:.9rem;letter-spacing:-.02em}.link-tile small{display:block;margin-top:6px;color:#758698}
footer{background:#0c1b30;color:#a7bccd;padding:28px 0;font-size:.82rem}footer .shell{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}footer strong{color:white}
@media(max-width:800px){.content{gap:30px}.link-grid{grid-template-columns:repeat(2,1fr)}.trust-row{gap:12px}}
@media(max-width:650px){.shell{width:min(100% - 24px,1160px)}.nav-links a{display:none}.site-top nav{min-height:68px}.hero{padding:34px 0 98px}.hero h1{font-size:clamp(2.1rem,9vw,3rem)}.main-wrap{margin-top:-60px}.workspace{border-radius:17px}.workspace-header,.workspace-body{padding:18px}.workspace-header{align-items:flex-start}.workspace-header h2{font-size:1.13rem}.workspace-header p{font-size:.77rem}.privacy{font-size:.64rem;padding:6px 8px}.dropzone{padding:27px 13px}.mode-grid{grid-template-columns:1fr;gap:8px}.option{min-height:72px;padding:11px 13px;display:block}.option .opt-top{float:left;margin-right:10px;line-height:1.3}.option span{display:block}.config-grid{grid-template-columns:1fr;gap:17px}.actions .btn,.output-bottom .btn{width:100%}.preview-grid{grid-template-columns:1fr}.preview-stage{height:225px}.trust-row{grid-template-columns:1fr}.content{grid-template-columns:1fr;gap:28px;padding:50px 0}.link-grid{grid-template-columns:1fr 1fr;gap:8px}.link-tile{padding:12px}.link-tile strong{font-size:.82rem}.output-bottom .btn{order:-1}.output-bottom{flex-direction:column;align-items:stretch}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Use the browser's actual file input as the touch target (including mobile WebViews). */
.choose-image{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer}
.choose-image .native-file-picker{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:100px}
.choose-image:focus-within{outline:3px solid #05b6a4;outline-offset:3px}

/* Bulk image tool, separate second tab; the single-image workflow stays untouched. */
.workspace-body[hidden]{display:none!important}
.tool-tabs{display:flex;gap:6px;align-items:center;border-bottom:1px solid var(--line);padding:10px 30px 0;background:#f9fbfe}
.tool-tab{border:0;border-bottom:3px solid transparent;background:transparent;color:#596c83;font-weight:760;min-width:150px;padding:13px 17px 15px;font-size:.94rem;text-align:center;cursor:pointer}
.tool-tab:hover{color:#124337}.tool-tab.active,.tool-tab[aria-selected="true"]{color:#077f74;border-bottom-color:#05b6a4;background:#f0fcf9;border-radius:11px 11px 0 0}
.tool-tab-new{font-size:.68rem;background:#e2f7ef;color:#087f70;border-radius:99px;padding:3px 7px;vertical-align:middle;margin-left:5px}
.bulk-panel .bulk-workflow{margin-top:26px}.bulk-panel .bulk-workflow[hidden],.bulk-panel .bulk-progress[hidden]{display:none}
.bulk-list-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.bulk-list-top h3{font-size:1.05rem;letter-spacing:-.02em;margin:0}.bulk-list-top p{margin:3px 0 0;font-size:.82rem;color:#687a90}
.bulk-count{display:inline-grid;place-items:center;min-width:23px;height:23px;font-size:.74rem;padding:0 5px;border-radius:30px;background:#ddf7f1;color:#05796f;margin-left:5px}
.bulk-list{border:1px solid #e1eaf1;border-radius:14px;overflow:hidden;max-height:420px;overflow-y:auto}
.bulk-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;background:#fff;padding:11px 13px;border-bottom:1px solid #e9eef2}
.bulk-row:last-child{border-bottom:0}.bulk-thumb{width:42px;height:42px;border-radius:8px;background:#edf2f7;object-fit:cover}
.bulk-row-content{min-width:0}.bulk-filename{font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bulk-subline{color:#65778e;font-size:.75rem;overflow-wrap:anywhere}
.bulk-row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.bulk-small-btn{border:1px solid #d8e5e9;background:#fff;color:#21635d;border-radius:9px;padding:6px 10px;font-weight:740;font-size:.75rem;text-decoration:none;cursor:pointer}
.bulk-small-btn:hover{background:#effaf6}.bulk-small-btn:disabled{color:#8fa3ae;cursor:not-allowed}
.bulk-row-error{color:#ae3939}.bulk-row-done{color:#078677}
.bulk-settings{border-top:1px solid var(--line);padding-top:25px;margin-top:25px}
.bulk-progress{height:9px;background:#eaf1f5;overflow:hidden;border-radius:99px;margin-top:16px}
.bulk-progress-fill{width:0;height:100%;background:linear-gradient(90deg,#08b6a5,#62dbb7);transition:width .2s ease}
.bulk-panel .actions .btn[disabled]{opacity:.45;cursor:not-allowed}
.bulk-hint{font-size:.78rem;color:#6b7b8a;margin:12px 0 0}
@media(max-width:650px){.tool-tabs{padding:8px 14px 0}.tool-tab{flex:1;min-width:0;padding:12px 9px;font-size:.85rem}.bulk-row{grid-template-columns:38px minmax(0,1fr);gap:8px;padding:10px}.bulk-thumb{width:38px;height:38px}.bulk-row-actions{grid-column:2;justify-content:flex-start}.bulk-row-actions .bulk-small-btn{padding:5px 9px}.bulk-list-top{align-items:flex-start}.bulk-list-top p{max-width:235px}}

/* 1.2 enhancements: keep four modes readable and download choices prominent. */
.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.enhance-row{display:none;border:1px solid #b6e9df;border-radius:13px;background:#f2fcf8;padding:14px 16px;margin:18px 0 0}
.enhance-row.active{display:block}.enhance-row p{font-size:.81rem;color:#51746d;margin:5px 0 0;line-height:1.5}
.enhance-row .checkbox-line{font-weight:750;color:#154f45;margin:0}
.btn-outline{background:#fff;color:#0b8174;border:1px solid #94cfc4}
.btn-outline:hover{background:#f2fcf9}
.bulk-small-btn.download-one{background:#ecfaf5;color:#026c60;border-color:#a5e6da;font-weight:800}
.bulk-row-actions{min-width:155px}
@media(max-width:650px){.mode-grid{grid-template-columns:1fr}.bulk-row-actions{min-width:0}.bulk-panel .actions .btn{width:100%}}