@import url('./image-converter.css?v=501351c0339b');
/* Hallmark · macrostructure: Split Studio · existing LumHub brand and shared chrome.
 * Audience: everyday image publishing · real files, measured output, restrained motion.
 * Pre-emit critique: P4 H5 E4 S5 R5 V4. */
.optimizer.tool-page{--optimizer-checker:color-mix(in oklch,var(--color-muted) 12%,var(--color-surface));--optimizer-divider:var(--tool-canvas);--optimizer-divider-shadow:var(--tool-shadow-strong);padding-top:0}
.optimizer .tool-heading{padding-block:28px 30px;gap:32px;grid-template-columns:minmax(0,1fr) 180px}
.optimizer .tool-heading h1{font-size:clamp(2rem,3.5vw,3.25rem);max-width:22ch}


.optimizer .tool-privacy{margin-bottom:12px}.optimizer .tool-heading-meta{margin-top:10px}.optimizer .tool-lede{margin-top:12px}
.optimizer .tool-workflow{max-width:640px;padding-bottom:24px}
.optimizer-studio-bar{display:flex;justify-content:space-between;gap:12px;padding:16px 24px;border:1px solid var(--color-rule);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--color-well);color:var(--color-muted);box-shadow:inset 0 1px 0 var(--color-rim),inset 0 -1px 0 var(--color-accent-line);font:500 11px/1.4 var(--font-body);letter-spacing:.12em}
.optimizer.tool-page .converter-workspace{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-radius:0 0 16px 16px;align-items:stretch;overflow:visible}
.optimizer.tool-page .converter-source{padding:28px 32px;background:var(--tool-stage);border-radius:0 0 0 16px}
.optimizer.tool-page .converter-settings{padding:28px 32px;border-radius:0 0 16px 0}
.optimizer .tool-panel-heading{margin-bottom:6px}.optimizer .tool-panel-heading h2{font-size:1.05rem;margin:0}
.optimizer-panel-number{font:400 13px var(--font-display);color:var(--tool-accent);font-variant-numeric:tabular-nums}
.optimizer-section-intro{font-size:13px;line-height:1.65;color:var(--color-muted);margin:0 0 22px}
.optimizer.tool-page .converter-drop{min-height:310px;background:var(--color-surface);border:1px dashed var(--tool-accent);border-radius:12px;margin-top:24px;box-shadow:0 8px 20px -16px var(--tool-shadow-strong)}
.optimizer .tool-upload-symbol{transform:none;width:64px;height:72px;border-radius:12px;background:var(--tool-accent-soft);border-color:var(--color-transparent);box-shadow:none;margin-bottom:16px}
.optimizer.tool-page .converter-drop>p:first-of-type{font-size:1.15rem;margin:0}
.optimizer.tool-page .converter-drop .converter-hint{font-size:12px;max-width:33ch}
.optimizer.tool-page .converter-drop .button{padding-inline:24px}
.optimizer.tool-page .converter-files li:first-child{border-top:0}.optimizer.tool-page .converter-files li{grid-template-columns:64px minmax(0,1fr) auto;padding-block:16px}
.optimizer.tool-page .converter-files img{width:64px;height:64px;background:var(--color-surface);border-radius:8px}
.optimizer.tool-page .converter-file-name{font-size:14px}.optimizer.tool-page .converter-files small{font-size:12px}
.optimizer-output-plan{display:flex;gap:16px;margin-top:32px;padding:22px;border:1px solid var(--color-rule);border-radius:12px;background:var(--color-surface);min-width:0}
.optimizer-plan-icon{flex:none;width:32px;height:32px;color:var(--tool-accent)}.optimizer-plan-icon svg{width:100%;height:100%}
.optimizer-output-plan>div{min-width:0}.optimizer-output-plan h3{font:500 14px/1.4 var(--font-display);margin:0 0 12px}
.optimizer-output-plan p{font-size:13px;line-height:1.7;margin:4px 0;overflow-wrap:anywhere}.optimizer-output-plan small{display:block;font-size:11px;line-height:1.7;color:var(--color-muted);margin-top:12px}
.optimizer-local-note{font-size:12px;line-height:1.7;color:var(--color-muted);margin:18px 0 0}
.optimizer-presets{display:grid;gap:9px;margin:0 0 24px}
.optimizer-preset{display:flex;align-items:center;gap:14px;width:100%;min-width:0;text-align:left;padding:14px 16px;border:1px solid var(--color-rule);border-radius:9px;background:var(--color-surface);color:var(--color-ink);font-family:var(--font-body);cursor:pointer;transition:border-color 150ms var(--ease-out),background 150ms var(--ease-out)}
.optimizer-preset:hover:not(:disabled){border-color:var(--tool-accent);background:var(--tool-stage)}.optimizer-preset:active:not(:disabled){transform:translateY(1px)}
.optimizer-preset[aria-pressed=true]{border-color:var(--tool-accent);background:var(--tool-accent-soft);box-shadow:inset 3px 0 var(--tool-accent)}
.optimizer-preset-mark{width:18px;height:18px;border:1px solid var(--color-rule);border-radius:50%;flex:none;display:grid;place-items:center}
.optimizer-preset[aria-pressed=true] .optimizer-preset-mark{border-color:var(--tool-accent)}.optimizer-preset[aria-pressed=true] .optimizer-preset-mark:after{content:'';width:8px;height:8px;border-radius:50%;background:var(--tool-accent)}
.optimizer-preset-content{display:block;min-width:0;width:100%}.optimizer-preset strong{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;font-weight:500;line-height:1.6}
.optimizer-preset-content>span{display:block;font-size:12px;line-height:1.6;color:var(--color-muted);margin-top:2px}.optimizer-preset small{display:block;color:var(--tool-accent);font-size:11px;font-weight:500;line-height:1.5;margin-top:5px;font-variant-numeric:tabular-nums}
.optimizer-recommended{font-size:9px;font-weight:500;color:var(--tool-accent);letter-spacing:.03em}
.optimizer.tool-page .optimizer-custom,.optimizer.tool-page .optimizer-advanced{border:1px solid var(--color-rule);border-radius:9px;padding:0 16px;margin:0 0 18px}
.optimizer :is(.optimizer-custom,.optimizer-advanced)>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;font-size:13px;font-weight:500;cursor:pointer;list-style:none}
.optimizer :is(.optimizer-custom,.optimizer-advanced)>summary::-webkit-details-marker{display:none}
.optimizer :is(.optimizer-custom,.optimizer-advanced)>summary:after{content:'+';font-size:19px;color:var(--tool-accent)}.optimizer :is(.optimizer-custom,.optimizer-advanced)[open]>summary:after{content:'−'}
.optimizer .optimizer-custom[open]{padding-bottom:4px}
.optimizer .converter-settings label{font-size:13px;line-height:1.6}.optimizer .converter-settings .converter-hint{font-size:12px;line-height:1.7}
.optimizer .optimizer-target{padding:0 0 2px}.optimizer .optimizer-target>label{margin-top:0}
.optimizer.tool-page .optimizer-check{display:flex;justify-content:flex-start;align-items:flex-start;gap:10px;font-size:12px;font-weight:400;margin:16px 0}
.optimizer-check input{accent-color:var(--tool-accent);flex:none;width:18px;height:18px;margin-top:2px}
.optimizer input[type=number]{min-height:46px}.optimizer .optimizer-action-block>.button{width:100%;font-size:14px;min-height:52px}
.optimizer [data-action-hint]{text-align:center;margin:10px 0 0;font-size:11px!important}.optimizer .converter-secondary{margin-top:0;min-height:44px}
.optimizer.tool-page .converter-quota{margin:16px 0 0;padding-top:16px}.optimizer .converter-quota>strong{font-size:12px}.optimizer .converter-quota [data-quota]{margin-block:5px}
.optimizer .converter-quota summary{font-size:11px;min-height:36px;cursor:pointer;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.optimizer.tool-page .converter-feedback{padding:0 4px;margin:16px 0 24px}
.optimizer.tool-page .converter-results{border:1px solid var(--color-rule);padding:32px;border-radius:16px}
.optimizer-eyebrow{display:block;font-size:12px;letter-spacing:.1em;color:var(--tool-accent);margin-bottom:8px}
.optimizer .converter-results-head{align-items:center}.optimizer .converter-results-head h2{font-size:1.6rem;margin:0 0 8px}.optimizer .converter-results-head .optimizer-section-intro{margin:0}
.optimizer-batch-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:24px 0 28px;padding:24px 0;border-block:1px solid var(--color-rule)}
.optimizer-batch-summary dt{font-size:12px;color:var(--color-muted);line-height:1.5}.optimizer-batch-summary dd{font:500 clamp(1rem,1.7vw,1.35rem)/1.5 var(--font-display);font-variant-numeric:tabular-nums;margin:8px 0 0;overflow-wrap:anywhere}
.optimizer .converter-results-list{grid-template-columns:minmax(0,1fr);gap:24px}
.optimizer.tool-page .optimizer-result{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);padding:24px;gap:32px;align-items:start;background:var(--tool-stage);border:1px solid var(--color-rule);border-radius:12px}
.optimizer-result>div{min-width:0}.optimizer-result strong{font-size:14px;font-weight:500;line-height:1.7}
.optimizer-result-saving{font:500 1.6rem/1.3 var(--font-display);margin:0 0 12px;letter-spacing:-.035em}
.optimizer-saving{color:var(--color-success)}.optimizer-warning{color:var(--color-muted)}
.optimizer-result-metrics{margin:20px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.optimizer-result-metrics dt{font-size:11px;line-height:1.6;color:var(--color-muted)}.optimizer-result-metrics dd{font-size:13px;line-height:1.6;font-weight:500;margin:3px 0 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.optimizer-target-status{font-size:12px;line-height:1.7;margin:12px 0 18px}
.optimizer.tool-page .optimizer-download{font-size:13px;padding:12px 20px;text-decoration:none;min-height:46px;color:var(--tool-action-ink)}
.optimizer-comparison{min-width:0}.optimizer-comparison h3{font:500 14px/1.5 var(--font-display);margin:0 0 16px}
.optimizer-compare-labels{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:500;margin-bottom:8px;color:var(--color-muted)}
.optimizer-compare-frame{position:relative;aspect-ratio:16/11;background-color:var(--color-surface);background-image:conic-gradient(var(--optimizer-checker) 25%,var(--color-transparent) 0 50%,var(--optimizer-checker) 0 75%,var(--color-transparent) 0);background-size:16px 16px;overflow:clip;border:1px solid var(--color-rule);border-radius:8px}
.optimizer .optimizer-compare-frame img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;background:none;object-fit:contain}
.optimizer-after{clip-path:inset(0 0 0 50%)}.optimizer-divider{position:absolute;inset-block:0;left:50%;width:2px;background:var(--optimizer-divider);box-shadow:0 0 3px 1px var(--optimizer-divider-shadow);pointer-events:none}
.optimizer-divider:after{content:'⟷';display:grid;place-items:center;position:absolute;top:calc(50% - 15px);left:-14px;width:30px;height:30px;background:var(--tool-action);color:var(--tool-action-ink);border:2px solid var(--optimizer-divider);border-radius:50%;font-size:17px}
.optimizer-comparison input{width:100%;accent-color:var(--tool-accent);margin:8px 0 0;min-height:44px}
.optimizer-compare-controls{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}
.optimizer-compare-controls button{background:none;border:0;color:var(--tool-accent);font:500 12px var(--font-body);min-height:44px;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.optimizer-comparison>small{display:block;color:var(--color-muted);font-size:11px;line-height:1.7}
.optimizer .button:hover:not(:disabled){filter:brightness(1.08)}.optimizer .button:active:not(:disabled){transform:translateY(1px)}
.optimizer[aria-busy=true] [data-convert]{cursor:progress}.optimizer[aria-busy=true] .optimizer-studio-bar{opacity:.8}
@media(min-width:1100px){.optimizer-output-plan{position:sticky;top:24px}}
@media(max-width:1000px){.optimizer.tool-page .converter-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.optimizer.tool-page :is(.converter-source,.converter-settings){padding:24px}.optimizer.tool-page .optimizer-result{gap:24px}}
@media(max-width:800px){.optimizer.tool-page .converter-workspace{grid-template-columns:minmax(0,1fr)}.optimizer.tool-page .converter-source{border-radius:0}.optimizer.tool-page .converter-settings{border-left:0;border-top:1px solid var(--color-rule);border-radius:0 0 16px 16px}.optimizer .tool-heading{grid-template-columns:minmax(0,1fr) 120px}.optimizer.tool-page .converter-drop{min-height:245px}.optimizer-presets{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.optimizer-preset{padding:14px 12px;gap:8px;align-items:flex-start;flex-direction:column}.optimizer-preset strong{font-size:13px}.optimizer-recommended{font-size:9px}.optimizer-preset-content>span{font-size:11px}.optimizer.tool-page .optimizer-result{grid-template-columns:minmax(0,1fr)}.optimizer .converter-results-head{align-items:flex-start}.optimizer-batch-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(max-width:600px){.optimizer .tool-heading{grid-template-columns:minmax(0,1fr);padding-block:24px}.optimizer .tool-heading-art{display:none}.optimizer .tool-heading h1{font-size:clamp(2rem,8vw,2.75rem)}.optimizer-studio-bar{padding:14px 18px;font-size:10px}.optimizer.tool-page :is(.converter-source,.converter-settings){padding:22px 18px}.optimizer .tool-panel-heading h2{font-size:15px;max-width:25ch}.optimizer-section-intro{font-size:12px;margin-bottom:18px}.optimizer .tool-panel-heading{align-items:flex-start}.optimizer.tool-page .converter-drop{margin-top:18px;min-height:260px;padding:24px 14px}.optimizer.tool-page .converter-drop>p:first-of-type{font-size:16px}.optimizer.tool-page .converter-drop .converter-hint{font-size:11px}.optimizer-output-plan{padding:18px 16px;gap:12px;margin-top:24px}.optimizer-plan-icon{width:24px;height:24px}.optimizer-output-plan p{font-size:12px}.optimizer.tool-page .converter-files li{grid-template-columns:44px minmax(0,1fr) auto;gap:8px}.optimizer.tool-page .converter-files img{width:44px;height:44px}.optimizer.tool-page .converter-file-name{font-size:12px}.optimizer.tool-page .converter-files small{font-size:10px}.optimizer.tool-page .converter-results{padding:20px 16px}.optimizer .converter-results-head{flex-direction:column;gap:18px}.optimizer .converter-results-head h2{font-size:1.4rem}.optimizer .converter-results-head>.button{width:100%}.optimizer.tool-page .optimizer-result{padding:18px 14px;gap:28px}.optimizer-result-saving{font-size:1.4rem}.optimizer-batch-summary{gap:20px 12px;padding-block:20px}.optimizer-batch-summary dd{font-size:1.05rem}.optimizer.tool-page .converter-settings label{font-size:12px}}
@media(max-width:500px){.optimizer-presets{grid-template-columns:minmax(0,1fr)}.optimizer-preset{flex-direction:row;align-items:center;padding:13px 14px;gap:12px}.optimizer-preset strong{font-size:14px}.optimizer-preset-content>span{font-size:12px}.optimizer-recommended{margin-left:auto}.optimizer .converter-settings .converter-hint{font-size:11px}}
@media(prefers-reduced-motion:reduce){.optimizer *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.optimizer.tool-page .optimizer-result-jump{display:flex;justify-content:center;margin-top:24px;color:var(--tool-action-ink);text-decoration:none}.optimizer #optimizer-results{scroll-margin-top:24px}