:root{
  --bg:#f6f8fb;--card:#fff;--text:#1d2433;--muted:#64748b;--border:#e2e8f0;--soft:#f8fafc;
  --header:#fff;--preview-a:#eee;--preview-b:transparent;--shadow:0 10px 30px rgba(0,0,0,.05);
  --upload-hover:#eff6ff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
header{background:var(--header);border-bottom:1px solid var(--border);padding:18px 8%;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:24px;font-weight:800;color:#2563eb}.logo span{color:var(--text)}
nav{display:flex;gap:24px}nav a{text-decoration:none;color:var(--muted);font-size:14px}
.container{max-width:1100px;margin:auto;padding:20px}

.upload-card-wrapper{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:20px}

.upload-box{background:var(--soft);border:2px dashed #52637c;border-radius:14px;padding:18px 15px;text-align:center;cursor:pointer;transition:.2s;color:var(--text)}
.upload-box:hover,.upload-box.dragover{border-color:#2563eb;background:var(--upload-hover)}
.upload-icon{font-size:28px;margin-bottom:4px}
.upload-box h2{margin-bottom:4px;font-size:18px;color:var(--text)}
.upload-box p{color:var(--muted);margin-bottom:10px;font-size:13px}
#fileInput{display:none}
.btn{border:0;background:#2563eb;color:#fff;padding:9px 20px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:bold}.btn:hover{background:#1d4ed8}

.how-it-works-inline{border-top:1px solid var(--border);padding-top:18px}
.how-it-works-inline h3.inline-title{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px;text-align:center}
.steps-grid-inline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step-inline{background:var(--soft);border:1px solid var(--border);padding:12px 10px;border-radius:10px;text-align:center}
.step-num-inline{width:24px;height:24px;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;margin:0 auto 6px;font-size:12px}
.step-inline h4{font-size:13px;margin-bottom:3px;color:var(--text)}
.step-inline p{color:var(--muted);font-size:11px;line-height:1.4}

.notification{display:none;margin-top:15px;padding:14px 16px;border-radius:10px;font-size:14px;line-height:1.5}.notification.show{display:block}.notification.error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.notification.success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.editor{display:none;margin-top:20px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:25px;align-items:start}
.editor.is-open{display:grid}
.card{background:var(--card);border-radius:18px;padding:25px;box-shadow:var(--shadow);border:1px solid var(--border);min-width:0}
.preview-container{min-height:460px;display:flex;justify-content:center;align-items:center;background:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border-radius:12px;overflow:hidden;padding:15px}
.settings h2{margin-bottom:20px}.field{margin-bottom:22px}.field>label{display:block;font-size:14px;font-weight:bold;margin-bottom:8px}.input-row{display:flex;gap:10px}
input,select{width:100%;padding:13px;border:1px solid #dbe1ea;border-radius:9px;font-size:15px;outline:none;font-family:inherit}input:focus,select:focus{border-color:#2563eb}
.ratio{display:flex;align-items:center;gap:10px;margin:20px 0;color:var(--muted);font-size:14px}.ratio input{width:auto}
.fit-options{display:none;margin:20px 0;padding-top:20px;border-top:1px solid #e2e8f0}.fit-options.active{display:block}.fit-options-title{font-size:14px;font-weight:bold;margin-bottom:12px}
.fit-option{display:flex;gap:12px;padding:14px;border:1px solid #e2e8f0;border-radius:10px;margin-bottom:10px;cursor:pointer}.fit-option:hover{border-color:#2563eb;background:#f8fbff}.fit-option input[type=radio]{width:auto;height:auto;margin-top:3px}.fit-option-content{display:flex;flex-direction:column;gap:5px;width:100%}.fit-option-content strong{font-size:14px}.fit-option-content span{font-size:12px;color:#64748b;line-height:1.4}
.color-row{display:flex;align-items:center;gap:8px;margin-top:8px}.color-row input[type=color]{width:48px;height:35px;padding:3px;cursor:pointer}#colorValue{font-size:13px;font-weight:bold;color:#475569}
.eyedropper-btn{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:12px;font-weight:bold;color:#334155}.eyedropper-btn:hover{background:#e2e8f0}
.transparent-option.disabled{opacity:.45;cursor:not-allowed;background:#f8fafc;pointer-events:none}.transparent-option.disabled:hover{border-color:#e2e8f0;background:#f8fafc}
.presets{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.preset{background:#f8fafc;border:1px solid #e2e8f0;padding:11px;border-radius:8px;cursor:pointer;font-size:13px;font-family:inherit}.preset:hover{border-color:#2563eb;color:#2563eb}
.format-section{padding-top:20px;border-top:1px solid #e2e8f0}.field-description{font-size:12px;color:#64748b;line-height:1.5;margin-bottom:10px}
.info{margin-top:20px;padding:14px;background:#f8fafc;border-radius:10px;color:#475569;font-size:13px;line-height:1.6}.actions{margin-top:25px;display:flex;flex-direction:column;gap:10px}.download-btn{display:none;background:#16a34a;text-decoration:none;text-align:center;padding:13px 25px;border-radius:10px;color:#fff;font-weight:bold;cursor:pointer;border:0;width:100%;font-size:15px}.download-btn:hover{background:#15803d}
.batch-btn{display:none;background:#7c3aed;color:#fff;text-align:center;padding:13px 25px;border-radius:10px;font-weight:bold;cursor:pointer;border:0;width:100%;font-size:15px}.batch-btn:hover{background:#6d28d9}

.features{max-width:1000px;margin:60px auto;padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.feature{background:#fff;padding:28px;border-radius:16px;text-align:center;box-shadow:0 5px 25px rgba(0,0,0,.04)}.feature .emoji{font-size:35px;margin-bottom:15px}.feature h3{margin-bottom:10px}.feature p{color:#64748b;font-size:14px;line-height:1.6}
/* footer base replaced */

/* --- Tabs --- */
.tabs{display:flex;gap:4px;margin-bottom:22px;border-bottom:1px solid #e2e8f0;overflow-x:auto}
.tab-btn{background:none;border:0;padding:10px 6px;margin-right:18px;font-size:14px;font-weight:bold;color:#94a3b8;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;white-space:nowrap;min-height:44px}
.tab-btn:hover{color:#2563eb}
.tab-btn.active{color:#2563eb;border-bottom-color:#2563eb}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* --- Transform & Tools --- */
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.tool-btn{flex:1;min-width:110px;background:#f8fafc;border:1px solid #e2e8f0;padding:12px 8px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:bold;color:#334155;font-family:inherit}
.tool-btn:hover{border-color:#2563eb;color:#2563eb}
.tool-btn.toggle.active{background:#eff6ff;border-color:#2563eb;color:#2563eb}
.tool-status{margin-top:10px;font-size:12px;color:#64748b}

/* --- Compression & Settings --- */
.quality-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.quality-row span{font-size:13px;font-weight:bold;color:#2563eb}
input[type=range]{width:100%;accent-color:#2563eb;padding:0}
input[type=range]:disabled{opacity:.4;cursor:not-allowed;accent-color:#94a3b8}
.estimate{margin-top:14px;font-size:13px;color:#334155;font-weight:bold}
.note{font-size:12px;color:#64748b;line-height:1.6;margin-top:14px;padding:12px 14px;background:#f8fafc;border-radius:10px;border:1px solid #eef1f6}

/* --- Section titles --- */
.section-title{text-align:center;font-size:28px;margin-bottom:12px}
.section-subtitle{text-align:center;color:#64748b;font-size:15px;max-width:600px;margin:0 auto 35px;line-height:1.6}

/* --- FAQ --- */
.faq{max-width:800px;margin:60px auto;padding:0 20px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px 22px}
.faq-item summary{cursor:pointer;font-weight:bold;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:20px;color:#2563eb;font-weight:normal;flex-shrink:0}
.faq-item[open] summary::after{content:'\2212'}
.faq-item p{margin-top:12px;color:#64748b;font-size:14px;line-height:1.65}

/* --- Optimized Ad Placeholders --- */
.ad-slot{display:block;width:100%;margin:20px auto;text-align:center;overflow:hidden;background:transparent}
.ad-slot span.ad-size{font-size:11px;letter-spacing:.03em;text-transform:none;color:#b0b9c6;font-weight:normal}
.ad-leaderboard{min-height:90px;height:90px;max-width:970px}
.ad-rectangle{min-height:250px;height:250px;max-width:336px}
.ad-banner{min-height:90px;height:90px;max-width:970px}
.ad-vertical{height:100%;min-height:360px;max-height:500px;width:100%;margin:0}


/* ===== Phase 2 UX ===== */
.processing-status{display:none;margin:14px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--soft);font-size:13px;color:var(--text)}
.processing-status.active{display:block}.progress-track{height:8px;background:rgba(100,116,139,.18);border-radius:999px;overflow:hidden;margin-top:8px}.progress-bar{height:100%;width:0;background:#2563eb;border-radius:999px;transition:width .25s ease}.progress-meta{display:flex;justify-content:space-between;gap:10px;margin-top:7px;color:var(--muted);font-size:12px}
.file-size-compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.size-card{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--soft);font-size:12px}.size-card strong{display:block;font-size:15px;margin-top:3px}.size-saving{grid-column:1/-1;font-weight:700;color:#2563eb;text-align:center;padding:7px}
.preset.active{border-color:#2563eb;background:#dbeafe;color:#1d4ed8;box-shadow:0 0 0 2px rgba(37,99,235,.12)}body.dark-mode .preset.active{background:#1e3a5f;color:#bfdbfe}
.reset-section{margin-top:12px;font-size:12px;padding:7px 12px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.section-head label{margin:0}.drop-feedback{margin-top:8px;font-size:12px;color:var(--muted);min-height:18px}.upload-box.dragover{transform:scale(1.01);box-shadow:0 0 0 3px rgba(37,99,235,.16)}.upload-box.dragover .drop-feedback{color:#2563eb;font-weight:700}
.batch-results{white-space:pre-line;margin-top:10px;font-size:12px;color:var(--muted)}

@media(max-width:900px){.editor,.editor.is-open{grid-template-columns:1fr!important}}
@media(max-width:800px){header{padding:18px 20px}.editor,.editor.is-open{grid-template-columns:1fr!important;gap:14px}.features{grid-template-columns:1fr}.preview-container{min-height:300px}.steps-grid-inline{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.steps-grid-inline{grid-template-columns:1fr}}

/* ===== Dark theme ===== */
body{background:var(--bg);color:var(--text);transition:background .2s,color .2s}
body.dark-mode{
  --bg:#0f172a;--card:#162033;--text:#e5edf8;--muted:#9aa9bd;--border:#2a3950;--soft:#111b2c;
  --header:#111a2b;--preview-a:#26344a;--preview-b:transparent;--shadow:0 10px 30px rgba(0,0,0,.22);
  --upload-hover:#1e3a5f;
}
header{display:block;padding:0;background:var(--header);border-color:var(--border)}
.header-main{min-height:70px;padding:14px 8%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.logo{color:#3b82f6}.logo span{color:var(--text)}
.header-title{font-size:clamp(18px,2vw,28px);font-weight:800;text-align:center;white-space:nowrap}
.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px}nav{gap:18px}nav a{color:var(--muted)}
.theme-toggle{border:1px solid var(--border);background:var(--soft);color:var(--text);border-radius:9px;padding:9px 11px;cursor:pointer;font-size:13px;font-weight:bold;font-family:inherit;white-space:nowrap}.theme-toggle:hover{border-color:#2563eb;color:#60a5fa}
.header-subtitle{border-top:1px solid var(--border);padding:8px 20px 10px;text-align:center;color:var(--muted);font-size:12px;line-height:1.5}

.upload-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:stretch;max-width:1100px;margin:0 auto;padding:15px 20px}
.container{max-width:1100px}.container.main-container{max-width:1300px;padding-top:0}.card,.feature,.step-inline,.faq-item{background:var(--card);box-shadow:var(--shadow);border-color:var(--border)}
.preview-container{background-color:var(--soft);background-image:linear-gradient(45deg,var(--preview-a) 25%,var(--preview-b) 25%),linear-gradient(-45deg,var(--preview-a) 25%,var(--preview-b) 25%),linear-gradient(45deg,var(--preview-b) 75%,var(--preview-a) 75%),linear-gradient(-45deg,var(--preview-b) 75%,var(--preview-a) 75%)}
input,select{background:var(--soft);color:var(--text);border-color:var(--border)}
.fit-option,.tool-btn,.preset,.note,.info,.eyedropper-btn{background:var(--soft);border-color:var(--border);color:var(--text)}
.fit-option-content span,.field-description,.tool-status,.note,.info,.section-subtitle,.feature p,.faq-item p{color:var(--muted)}
.tabs,.fit-options,.format-section{border-color:var(--border)}
/* footer base replaced */
.reset-btn{width:100%;margin-top:10px;background:#475569}.reset-btn:hover{background:#334155}

/* --- Preview Stage --- */
.compare-stage{position:relative;width:100%;height:100%;min-height:430px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.compare-stage img{max-width:100%;max-height:600px;width:100%;height:100%;object-fit:contain}
.compare-toggle{display:flex;justify-content:center;gap:10px;margin-top:14px}
.compare-toggle button{border:1px solid var(--border);background:var(--soft);color:var(--text);padding:10px 24px;border-radius:9px;cursor:pointer;font:inherit;font-size:14px;font-weight:700;transition:.2s}
.compare-toggle button:hover{border-color:#2563eb}
.compare-toggle button.active{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 4px 12px rgba(37,99,235,.22)}

.straighten-row{display:flex;align-items:center;gap:12px}.straighten-row input{flex:1}.straighten-value{min-width:52px;text-align:right;font-size:13px;font-weight:bold;color:#60a5fa}
.enlarge-custom{display:flex;gap:10px;margin-top:12px}.enlarge-custom input{flex:1}.enlarge-custom button{white-space:nowrap}
.control-group{margin-bottom:18px}.control-group label{display:block;font-size:14px;font-weight:bold;margin-bottom:8px}

.batch-list{margin-top:10px;font-size:12px;color:var(--muted);max-height:100px;overflow-y:auto}
@media(max-width:1100px){.upload-layout{grid-template-columns:minmax(0,1fr);max-width:1100px}.ad-vertical{display:none}.container.main-container{max-width:1100px}.header-main{grid-template-columns:auto 1fr}.header-title{order:3;grid-column:1/-1;white-space:normal}.header-actions{justify-content:flex-end}}
@media(max-width:800px){.compare-stage{min-height:280px}.compare-toggle button{padding:9px 18px}.header-main{padding:12px 20px;grid-template-columns:1fr auto}.header-title{font-size:19px}.header-actions nav{display:flex}.theme-toggle{padding:8px 10px}.upload-layout{padding:15px 20px}.header-subtitle{font-size:11px}}

/* ===== Phase 3: Workflow, Mobile & Results ===== */
.file-meta{margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--soft);font-size:12px;line-height:1.6;display:none}.file-meta strong{color:var(--text)}
.history-actions{display:flex;gap:8px;margin:12px 0}.history-actions button{flex:1}.history-actions button:disabled{opacity:.45;cursor:not-allowed}
.batch-results{display:none;margin-top:14px;border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--soft)}.batch-results.active{display:block}.batch-results h3{font-size:15px;margin-bottom:8px}.batch-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.result-chip{padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--card);border:1px solid var(--border)}.batch-result-list{max-height:170px;overflow:auto;font-size:12px;line-height:1.6}.batch-result-row{padding:7px 0;border-top:1px solid var(--border)}.batch-result-row.ok::before{content:'✓ ';font-weight:700}.batch-result-row.error::before{content:'⚠ ';font-weight:700}
@media(max-width:800px){.header-main{grid-template-columns:1fr auto;gap:10px}.header-title{grid-column:1/-1;grid-row:2;text-align:left;white-space:normal;font-size:20px}.header-actions{justify-self:end}.upload-layout{grid-template-columns:1fr;padding:14px 0}.ad-vertical{display:none}.container{padding:14px}.editor,.editor.is-open{grid-template-columns:1fr!important;gap:14px}.tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}.tab-btn{white-space:nowrap;flex:0 0 auto}.presets{grid-template-columns:1fr!important}.input-row{grid-template-columns:1fr!important}.actions,.btn-row,.history-actions{flex-direction:column}.actions button,.btn-row button{width:100%}.preview-container{min-height:260px}.processing-status{position:sticky;bottom:8px;z-index:5}.actions{margin-bottom:72px}.compare-toggle{display:grid;grid-template-columns:1fr 1fr}.compare-toggle button{width:100%}.file-meta,.batch-results{font-size:12px}}
@media(max-width:480px){.actions{margin-bottom:88px}.header-main{padding:12px 16px}.header-title{font-size:18px}.upload-card-wrapper{padding:14px}.upload-box{padding:20px 12px}.step-inline{padding:12px}.settings{padding:14px}.card{border-radius:14px}.preset{min-height:52px;font-size:15px}.download-btn,.batch-btn,.btn{min-height:46px}.progress-meta{font-size:11px}}


/* ===== Phase 4: Accessibility, Launch & Aspect-Ratio Emphasis ===== */
.skip-link{position:fixed;left:12px;top:-60px;z-index:1000;background:#2563eb;color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700}.skip-link:focus{top:12px}
:focus-visible{outline:3px solid rgba(59,130,246,.55);outline-offset:3px}
.aspect-lock-card{display:flex;align-items:flex-start;gap:13px;margin:0 0 18px;padding:16px 17px;border-radius:14px;background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(37,99,235,.03));box-shadow:0 8px 22px rgba(37,99,235,.10);cursor:pointer;transition:.2s}
.aspect-lock-card:hover{border-color:#1d4ed8;transform:translateY(-1px)}
.aspect-lock-card input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:#2563eb}
.aspect-lock-content{display:flex;flex-direction:column;gap:4px}.aspect-lock-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--text)}
.aspect-lock-badge{font-size:10px;letter-spacing:.04em;text-transform:uppercase;background:#2563eb;color:#fff;border-radius:999px;padding:3px 7px;font-weight:800}
.aspect-lock-content span{font-size:12px;line-height:1.45;color:var(--muted)}
.aspect-lock-card.unlocked{border-color:var(--border);background:var(--soft);box-shadow:none}.aspect-lock-card.unlocked .aspect-lock-badge{background:#64748b}
.footer-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:10px}.footer-link{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;padding:3px}
.legal-modal{position:fixed;inset:0;background:rgba(15,23,42,.66);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}.legal-modal.active{display:flex}.legal-dialog{width:min(720px,100%);max-height:min(82vh,780px);overflow:auto;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.35)}.legal-dialog h2{margin-bottom:14px}.legal-dialog h3{margin:18px 0 7px;font-size:15px}.legal-dialog p,.legal-dialog li{color:var(--muted);line-height:1.65;font-size:14px}.legal-dialog ul{padding-left:20px}.legal-close{float:right;border:1px solid var(--border);background:var(--soft);color:var(--text);border-radius:8px;padding:7px 10px;cursor:pointer}
.compatibility-note{margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--soft);font-size:12px;color:var(--muted);line-height:1.55}
@media(max-width:600px){.aspect-lock-card{padding:15px}.aspect-lock-title{font-size:15px}.aspect-lock-content span{font-size:11px}.legal-dialog{padding:20px}.footer-links{gap:8px}.footer-link{padding:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}


.consent-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:1100;max-width:720px;margin:0 auto;padding:16px 18px;border-radius:14px;border:1px solid var(--border);background:var(--card);color:var(--text);box-shadow:0 18px 50px rgba(0,0,0,.28);display:none}
.consent-banner.active{display:block}
.consent-banner p{font-size:13px;line-height:1.55;color:var(--muted);margin-bottom:12px}
.consent-banner strong{color:var(--text)}
.consent-actions{display:flex;flex-wrap:wrap;gap:8px}
.consent-actions button{border:1px solid var(--border);background:var(--soft);color:var(--text);border-radius:9px;padding:10px 14px;cursor:pointer;font:inherit;font-size:13px;font-weight:700}
.consent-actions button.primary{background:#2563eb;border-color:#2563eb;color:#fff}
.consent-actions button.primary:hover{background:#1d4ed8}
.consent-actions button:hover{border-color:#2563eb}
@media(max-width:480px){.consent-banner{left:8px;right:8px;bottom:8px}.consent-actions{flex-direction:column}.consent-actions button{width:100%}}


/* How It Works + Details */
.how-it-works-title{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.details-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;color:#fff;background:#2563eb;
  padding:6px 12px;border-radius:999px;line-height:1.2;
  box-shadow:0 4px 12px rgba(37,99,235,.25);
  transition:background .15s,transform .15s;
}
.details-btn:hover{background:#1d4ed8;transform:translateY(-1px);color:#fff}
.details-btn:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
body.dark-mode .details-btn{background:#3b82f6}
body.dark-mode .details-btn:hover{background:#2563eb}

/* Mobile nav: show & wrap to ~3 lines instead of hiding */
.header-actions nav{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:flex-end;
  max-width:min(420px,70vw);
}
.header-actions nav a{font-size:13px;line-height:1.25;white-space:nowrap}
.header-actions nav a.nav-details{font-weight:700;color:#2563eb}
body.dark-mode .header-actions nav a.nav-details{color:#60a5fa}

@media(max-width:900px){
  .header-actions nav{
    display:flex!important;
    max-width:100%;
    width:100%;
    justify-content:flex-start;
    gap:6px 10px;
    margin-top:4px;
  }
  .header-actions nav a{font-size:12px;padding:4px 2px}
  .header-main{align-items:start}
}
@media(max-width:800px){
  .header-actions nav{display:flex!important} /* override earlier display:none */
}
@media(max-width:480px){
  .header-actions{
    grid-column:1/-1;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .header-actions nav{
    order:2;
    width:100%;
    max-width:100%;
    justify-content:flex-start;
    /* ~3 rows of compact links */
    row-gap:6px;
    column-gap:12px;
  }
  .header-actions .theme-toggle{align-self:flex-end;order:1}
}

/* ===== Header nav wraps on small screens ===== */
.header-actions{display:flex;align-items:flex-start;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.header-actions nav{display:flex!important;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:flex-end;max-width:min(520px,100%)}
.header-actions nav a{font-size:13px;line-height:1.3;white-space:nowrap;padding:4px 2px;color:var(--muted);text-decoration:none}
.header-actions nav a:hover{color:#2563eb}
.header-actions nav a.nav-details{font-weight:700;color:#2563eb;background:rgba(37,99,235,.1);padding:4px 10px;border-radius:999px}
body.dark-mode .header-actions nav a.nav-details{color:#93c5fd;background:rgba(59,130,246,.18)}
@media(max-width:900px){
  .header-main{grid-template-columns:1fr auto;gap:10px;align-items:start}
  .header-actions{grid-column:1/-1;width:100%}
  .header-actions nav{max-width:100%;justify-content:flex-start}
}
@media(max-width:600px){
  .header-actions{flex-direction:column;align-items:stretch}
  .header-actions .theme-toggle{align-self:flex-end}
  .header-actions nav{width:100%;gap:8px 14px}
}

/* ===== Bottom stack: full width, centered, never side-by-side with footer ===== */
.guide-cta{
  display:block;
  width:100%;
  max-width:720px;
  margin:48px auto 28px;
  padding:0 20px;
  box-sizing:border-box;
  text-align:center;
  float:none;
  clear:both;
}
.guide-cta-inner{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:32px 28px;
  box-shadow:var(--shadow);
}
.guide-cta .section-title{
  font-size:24px;
  line-height:1.3;
  margin:0 0 12px;
  color:var(--text);
  text-align:center;
}
.guide-cta .section-subtitle{
  font-size:14px;
  line-height:1.6;
  margin:0 0 20px;
  color:var(--muted);
  text-align:center;
}
.guide-cta .btn{
  display:inline-block;
  text-decoration:none;
  padding:12px 22px;
  border-radius:10px;
  background:#2563eb;
  color:#fff!important;
  font-weight:700;
  border:0;
}
.guide-cta .btn:hover{background:#1d4ed8}

.faq{
  display:block;
  width:100%;
  max-width:720px;
  margin:0 auto 32px;
  padding:0 20px;
  box-sizing:border-box;
  float:none;
  clear:both;
}
.faq .section-title{
  text-align:center;
  font-size:24px;
  margin:0 0 8px;
  color:var(--text);
}
.faq > p,
.faq .section-subtitle{
  text-align:center;
  color:var(--muted);
  font-size:14px;
  margin:0 0 18px;
}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 18px;
  width:100%;
  box-sizing:border-box;
}

footer{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:28px 20px 40px!important;
  text-align:center!important;
  clear:both!important;
  float:none!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  grid-column:1 / -1!important;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
  box-sizing:border-box;
}
footer > div{max-width:640px;margin:0 auto}
.footer-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:12px;
}
.footer-link{
  background:none;border:0;color:var(--muted);
  text-decoration:underline;cursor:pointer;font:inherit;padding:4px 2px;
}
.footer-link:hover{color:#2563eb}

.how-it-works-title{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.details-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;color:#fff;background:#2563eb;
  padding:6px 12px;border-radius:999px;
}
.details-btn:hover{background:#1d4ed8;color:#fff}

/* Features stay centered */
.features{max-width:1000px;margin-left:auto;margin-right:auto}

@media(max-width:600px){
  .guide-cta,.faq{margin-left:auto;margin-right:auto;padding:0 16px}
  .guide-cta-inner{padding:24px 18px}
  .guide-cta .section-title,.faq .section-title{font-size:20px}
}


/* --- Fix: Image Fit selected state and dark mode contrast --- */
.fit-option:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}
.fit-option:has(input:checked) .fit-option-content strong {
  color: #1e40af;
}
body.dark-mode .fit-option {
  background: var(--soft);
  border-color: var(--border);
}
body.dark-mode .fit-option:hover {
  background: #1e293b;
  border-color: #3b82f6;
}
body.dark-mode .fit-option:has(input:checked) {
  background: #1e293b;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
}
body.dark-mode .fit-option:has(input:checked) .fit-option-content strong {
  color: #e5edf8;
}
body.dark-mode .fit-option:has(input:checked) .fit-option-content span {
  color: #9aa9bd;
}
/* Compare toggle 3 buttons equal size */
.compare-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.compare-toggle button {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  font-size: 13px;
}
@media(max-width:600px){
  .compare-toggle {
    grid-template-columns: 1fr;
  }
}

/* --- Attention highlight for Resize Dimensions and Convert Image Format --- */
#width, #height, #format {
  border-color: #2563eb !important;
  border-width: 2px !important;
}
#width:focus, #height:focus, #format:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22) !important;
}