/* ════════════════════════════════════════════
   PNG To JPG — Complete Stylesheet v2
   Light + Dark Mode | Mobile First | High-Tech
════════════════════════════════════════════ */

:root {
  --primary:    #E8540A;
  --primary2:   #FF6B2B;
  --primary-l:  #FFF4EE;
  --teal:       #0F7B6C;
  --teal2:      #13A896;
  --teal-l:     #E6F7F5;
  --dark:       #0F0E0D;
  --dark2:      #1A1815;
  --text:       #2D2926;
  --text2:      #6B6560;
  --text3:      #A09A94;
  --bg:         #F5F2EE;
  --bg2:        #EAE7E2;
  --white:      #FFFFFF;
  --border:     #E2DDD8;
  --border2:    #D0CBC4;
  --red:        #DC2626;
  --red-l:      #FEF2F2;
  --green:      #059669;
  --green-l:    #F0FDF4;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.07);
  --shadow:     0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --radius:     10px;
  --radius-lg:  16px;
  --trans:      all .2s ease;
}

/* ── DARK MODE ── */
body.dark {
  --bg:     #111010;
  --bg2:    #1C1B1A;
  --white:  #1F1E1C;
  --text:   #F0EDE8;
  --text2:  #A09A94;
  --text3:  #6B6560;
  --border: #2E2C2A;
  --border2:#3A3836;
  --dark:   #0A0908;
  --dark2:  #111010;
  --primary-l: #1F1008;
  --teal-l: #071612;
  --red-l:  #1A0808;
  --green-l:#071209;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow:    0 2px 12px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
}

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{font-family:'Lora',Georgia,serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.7;transition:background .3s,color .3s}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;font-family:inherit}

h1,h2,h3,h4,h5{font-family:'Lora',Georgia,serif;color:var(--text);line-height:1.2;letter-spacing:-.3px}
h1{font-size:clamp(26px,5vw,52px);font-weight:700}
h2{font-size:clamp(20px,3.5vw,32px);font-weight:700}
h3{font-size:clamp(15px,2vw,19px);font-weight:700}
p{color:var(--text2);line-height:1.8;margin-bottom:12px}
ul,ol{padding-left:20px}
li{color:var(--text2);line-height:1.8;margin-bottom:4px}

.container{max-width:1080px;margin:0 auto;padding:0 20px}

/* ══════════════════════════
   NAV
══════════════════════════ */
.nav{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;transition:background .3s,box-shadow .2s}
body.dark .nav{background:rgba(15,14,13,.92) !important;border-bottom-color:rgba(255,255,255,.08) !important}
body.dark .nav-link{color:rgba(255,255,255,.5) !important}
body.dark .nav-link:hover,body.dark .nav-link.active{color:var(--primary) !important;background:rgba(232,84,10,.12) !important}
body.dark .nav-logo{color:rgba(255,255,255,.9) !important}
body.dark .btn-dark-toggle{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.1) !important;color:rgba(255,255,255,.7) !important}
body.dark .nav-menu{background:#0F0E0D !important;border-right:1px solid rgba(255,255,255,.07) !important}
body.dark .nav-dropdown-menu{background:#1A1918 !important;border-color:rgba(255,255,255,.1) !important}
body.dark .dropdown-link{color:rgba(255,255,255,.5) !important}
body.dark .dropdown-link:hover{color:var(--primary) !important;background:rgba(232,84,10,.1) !important}
.nav.scrolled{box-shadow:var(--shadow)}
.nav-inner{max-width:1080px;margin:0 auto;padding:0 20px;height:62px;display:flex;align-items:center;gap:8px}
.nav-logo{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;color:var(--text);text-decoration:none;margin-right:8px;letter-spacing:-.3px}
.nav-logo:hover{text-decoration:none}
.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--primary),var(--primary2));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.logo-text{color:var(--text)}
.logo-text span{color:var(--primary)}
.logo-badge{background:var(--primary);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.5px;font-family:sans-serif}
.nav-menu{display:flex;align-items:center;gap:2px;flex:1}
.nav-link{padding:6px 11px;border-radius:7px;font-size:13px;font-weight:600;color:var(--text2);background:none;border:none;transition:var(--trans);white-space:nowrap;text-decoration:none;display:block}
.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--primary-l);text-decoration:none}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn-dark-toggle{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:14px;transition:var(--trans)}
.btn-dark-toggle:hover{background:var(--border)}

/* Dropdown */
.nav-dropdown{position:relative}
.nav-drop-btn{cursor:pointer}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 10px);left:0;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:16px;min-width:360px;gap:16px;z-index:300}
.nav-dropdown-menu.show{display:flex}
.dropdown-col{display:flex;flex-direction:column;gap:2px;flex:1}
.dropdown-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.dropdown-link{font-size:13px;font-weight:500;color:var(--text2);padding:5px 8px;border-radius:6px;transition:var(--trans);text-decoration:none;display:block}
.dropdown-link:hover{color:var(--primary);background:var(--primary-l);text-decoration:none}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;margin-left:auto}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:var(--trans)}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ══════════════════════════
   HERO — HIGH TECH
══════════════════════════ */
.hero{background:var(--dark);position:relative;overflow:hidden;padding:64px 20px 52px;text-align:center;color:#fff}

/* Animated grid background */
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(232,84,10,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,84,10,.07) 1px,transparent 1px);
  background-size:40px 40px;
  animation:gridMove 20s linear infinite;
}
@keyframes gridMove{0%{background-position:0 0}100%{background-position:40px 40px}}

/* Glow orbs */
.hero::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%,rgba(232,84,10,.18) 0%,transparent 60%),
    radial-gradient(ellipse 40% 60% at 20% 60%,rgba(15,123,108,.14) 0%,transparent 60%);
  pointer-events:none;
}

/* Floating format pills */
.hero-floats{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.float-pill{
  position:absolute;height:28px;padding:0 12px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;font-family:"DM Mono",monospace;
  border:1px solid;animation:floatOrb 8s ease-in-out infinite;
  letter-spacing:.8px;white-space:nowrap;
}
.fp1{top:18%;left:5%;background:rgba(59,130,246,.1);color:rgba(147,197,253,.7);border-color:rgba(59,130,246,.2);animation-delay:0s}
.fp2{top:22%;right:5%;background:rgba(139,92,246,.1);color:rgba(196,181,253,.7);border-color:rgba(139,92,246,.2);animation-delay:1.5s}
.fp3{bottom:32%;left:3%;background:rgba(249,115,22,.1);color:rgba(252,169,122,.7);border-color:rgba(249,115,22,.2);animation-delay:3s}
.fp4{bottom:22%;right:4%;background:rgba(234,179,8,.1);color:rgba(253,230,138,.7);border-color:rgba(234,179,8,.2);animation-delay:2s}
.fp5{top:52%;left:6%;background:rgba(16,185,129,.1);color:rgba(110,231,183,.7);border-color:rgba(16,185,129,.2);animation-delay:4s}
.fp6{top:62%;right:7%;background:rgba(217,70,239,.1);color:rgba(232,121,249,.7);border-color:rgba(217,70,239,.2);animation-delay:1s}
@keyframes floatOrb{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.hero-inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:6px 16px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:20px}
.hero-badge .dot{width:7px;height:7px;background:var(--teal2);border-radius:50%;animation:blink 2s infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{color:#fff;margin-bottom:14px;letter-spacing:-.5px}
.hero h1 .accent{color:var(--primary2)}
.hero-sub{font-size:16px;color:rgba(255,255,255,.68);max-width:540px;margin:0 auto 26px;line-height:1.7}

.hero-formats{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.hfmt{padding:4px 10px;border-radius:5px;font-size:11px;font-weight:700;font-family:'DM Mono',monospace;border:1.5px solid}
.hf-webp{background:rgba(59,130,246,.12);color:#93C5FD;border-color:rgba(59,130,246,.25)}
.hf-svg{background:rgba(139,92,246,.12);color:#C4B5FD;border-color:rgba(139,92,246,.25)}
.hf-bmp{background:rgba(249,115,22,.12);color:#FCA97A;border-color:rgba(249,115,22,.25)}
.hf-gif{background:rgba(234,179,8,.12);color:#FDE68A;border-color:rgba(234,179,8,.25)}
.hf-tiff{background:rgba(16,185,129,.12);color:#6EE7B7;border-color:rgba(16,185,129,.25)}
.hf-avif{background:rgba(217,70,239,.12);color:#E879F9;border-color:rgba(217,70,239,.25)}
.hf-ico{background:rgba(244,63,94,.12);color:#FDA4AF;border-color:rgba(244,63,94,.25)}
.hf-arr{font-size:14px;color:rgba(255,255,255,.25);display:flex;align-items:center}
.hf-png{background:rgba(14,165,233,.12);color:#7DD3FC;border-color:rgba(14,165,233,.25)}
.hf-jpg{background:rgba(234,179,8,.12);color:#FDE68A;border-color:rgba(234,179,8,.25)}

.hero-pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.hpill{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:5px 12px;font-size:12px;color:rgba(255,255,255,.6);font-weight:500}

/* ══════════════════════════
   CONVERTER TOOL
══════════════════════════ */
.tool-section{max-width:860px;margin:0 auto;padding:28px 20px 0}

.output-select{display:flex;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:5px;margin-bottom:14px;box-shadow:var(--shadow-sm);gap:5px}
.out-btn{flex:1;padding:11px 10px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--text2);font-family:'Lora',serif;transition:var(--trans);display:flex;align-items:center;justify-content:center;gap:6px}
.out-btn .sub{font-size:11px;opacity:.65;font-weight:500}
.out-btn.active-jpg{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(232,84,10,.3)}
.out-btn.active-png{background:var(--teal);color:#fff;box-shadow:0 2px 8px rgba(15,123,108,.3)}

.dropzone{background:var(--white);border:2.5px dashed var(--border);border-radius:var(--radius-lg);padding:40px 20px;text-align:center;cursor:pointer;transition:var(--trans);margin-bottom:14px}
.dropzone:hover,.dropzone.over{border-color:var(--primary);background:var(--primary-l);transform:scale(1.002)}
.dropzone.over{border-style:solid}
.drop-icon{font-size:40px;margin-bottom:12px;display:block}
.drop-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:5px}
.drop-sub{font-size:13px;color:var(--text2);margin-bottom:14px}
.drop-sub strong{color:var(--primary)}
.fmt-chips{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.chip{padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;font-family:'DM Mono',monospace;background:var(--bg2);color:var(--text2);border:1px solid var(--border)}
.btn-select{display:inline-flex;align-items:center;gap:7px;background:var(--dark);color:#fff;border:none;border-radius:8px;padding:11px 22px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Lora',serif;transition:var(--trans)}
.btn-select:hover{background:#333;transform:translateY(-1px)}
.drop-hint{font-size:10px;color:var(--text3);margin-top:8px;font-family:'DM Mono',monospace}

/* OPTIONS BAR */
.opts{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm);flex-wrap:wrap}
.opts-left{display:flex;align-items:center;flex:1;min-width:200px;background:var(--bg2);border-radius:8px;overflow:hidden}
.q-row{display:flex;align-items:center;gap:8px;padding:8px 14px;flex:1;min-width:0}
.opt-lbl{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
input[type=range]{flex:1;min-width:80px;appearance:none;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;background:var(--primary);border-radius:50%;cursor:pointer;box-shadow:0 1px 5px rgba(232,84,10,.35);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.q-val{font-family:'DM Mono',monospace;font-size:13px;font-weight:500;color:var(--primary);min-width:30px;flex-shrink:0}
.q-kb{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.q-kb.good{color:var(--teal)}
.q-kb.warn{color:var(--primary)}
.btn-conv{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Lora',serif;display:flex;align-items:center;gap:7px;transition:var(--trans);white-space:nowrap;flex-shrink:0}
.btn-conv:hover:not(:disabled){background:#d44a06;transform:translateY(-1px);box-shadow:0 4px 14px rgba(232,84,10,.3)}
.btn-conv:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-conv.teal{background:var(--teal)}
.btn-conv.teal:hover:not(:disabled){background:var(--teal2)}

/* FILE LIST */
.file-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.file-row{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:11px 13px;display:flex;align-items:center;gap:10px;transition:var(--trans);animation:fIn .2s ease both}
@keyframes fIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.file-row:hover{box-shadow:var(--shadow);border-color:var(--border2)}
.file-thumb{width:48px;height:48px;border-radius:7px;overflow:hidden;flex-shrink:0;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:20px}
.file-thumb img{width:100%;height:100%;object-fit:cover}
.file-info{flex:1;min-width:0}
.file-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.file-meta{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.fmt-tag{background:var(--bg2);padding:1px 5px;border-radius:3px;color:var(--text2)}
.file-prog{height:3px;background:var(--bg2);border-radius:2px;margin-top:5px;overflow:hidden}
.file-prog-fill{height:100%;border-radius:2px;width:0%;transition:width .4s ease}
.fp-ready{background:var(--border)}
.fp-done{background:var(--teal)}
.fp-error{background:var(--red)}
.fp-loading{background:var(--primary);animation:pAnim 1s ease infinite}
@keyframes pAnim{0%{width:15%}50%{width:85%}100%{width:15%}}
.file-out{flex-shrink:0;display:flex;align-items:center;gap:7px}
.out-badge{padding:3px 9px;border-radius:5px;font-size:11px;font-weight:700;font-family:'DM Mono',monospace;white-space:nowrap}
.ob-ready{background:var(--bg2);color:var(--text3)}
.ob-done{background:var(--teal-l);color:var(--teal)}
.ob-error{background:var(--red-l);color:var(--red)}
.btn-save{background:var(--white);border:1.5px solid var(--border);color:var(--text2);border-radius:6px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer;font-family:'Lora',serif;display:flex;align-items:center;gap:5px;transition:var(--trans);white-space:nowrap}
.btn-save:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.btn-save:disabled{opacity:.4;cursor:not-allowed}
.btn-rm{background:none;border:none;color:var(--text3);cursor:pointer;font-size:15px;padding:4px;border-radius:4px;transition:var(--trans);flex-shrink:0;line-height:1}
.btn-rm:hover{background:var(--red-l);color:var(--red)}

/* BOTTOM BAR */
.bottom-bar{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--border);padding:10px 20px;display:none;align-items:center;justify-content:space-between;gap:12px;z-index:150;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.bottom-bar.show{display:flex}
.bar-stats{display:flex;gap:16px}
.bs{text-align:center}
.bs-n{font-size:17px;font-weight:800;color:var(--text);line-height:1}
.bs-n.g{color:var(--teal)}
.bs-n.o{color:var(--primary)}
.bs-l{font-size:9px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:1px}
.bar-btns{display:flex;gap:7px}
.btn-clr{background:var(--white);border:1.5px solid var(--border);color:var(--text2);border-radius:8px;padding:9px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Lora',serif;transition:var(--trans)}
.btn-clr:hover{border-color:var(--red);color:var(--red)}
.btn-dla{background:var(--dark);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Lora',serif;display:flex;align-items:center;gap:6px;transition:var(--trans)}
.btn-dla:hover{background:#333}
.btn-dla:disabled{opacity:.4;cursor:not-allowed}

/* ══════════════════════════
   CONTENT SECTIONS
══════════════════════════ */
.content-section{padding:56px 20px}
.content-section.bg-alt{background:var(--white)}
.section-inner{max-width:900px;margin:0 auto}
.section-label{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--primary);margin-bottom:10px}
.section-inner h2{margin-bottom:12px}
.section-inner>p{font-size:15px;margin-bottom:20px;max-width:680px}

/* FEATURE GRID */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:20px}
.feat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:var(--trans)}
.feat-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.feat-icon{font-size:24px;margin-bottom:10px}
.feat-card h3{font-size:14px;margin-bottom:5px}
.feat-card p{font-size:13px;margin:0}

/* FORMAT CARDS */
.fmt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px;margin-top:20px}
.fmt-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:9px;transition:var(--trans);text-decoration:none}
.fmt-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--primary);text-decoration:none}
.fmt-card-head{display:flex;align-items:center;gap:10px}
.fmt-card-icon{font-size:20px}
.fmt-card-tag{padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;font-family:'DM Mono',monospace}
.ftag-webp{background:#EFF6FF;color:#1D4ED8}.ftag-svg{background:#F5F3FF;color:#6D28D9}
.ftag-bmp{background:#FFF7ED;color:#C2410C}.ftag-gif{background:#FEF3C7;color:#92400E}
.ftag-tiff{background:#F0FDF4;color:#166534}.ftag-avif{background:#FDF4FF;color:#86198F}
.ftag-ico{background:#FFF1F2;color:#BE123C}.ftag-png{background:#E0F2FE;color:#0369A1}
.ftag-jpg{background:#FEF9C3;color:#854D0E}
.fmt-card h3{font-size:13px;margin:0}
.fmt-card p{font-size:12px;margin:0;flex:1}
.fmt-card-cta{font-size:12px;font-weight:700;color:var(--primary)}

/* COMPARE TABLE */
.cmp-table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);margin:20px 0}
.cmp-table th{padding:10px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text3);background:var(--bg2);border-bottom:1.5px solid var(--border);text-align:left}
.cmp-table td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text2);font-size:13px}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table tr:hover td{background:var(--bg2)}
.ck{color:var(--teal);font-weight:700}
.cx{color:var(--red)}

/* STEPS */
.steps-grid{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.step-item{display:flex;gap:14px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px;align-items:flex-start}
.step-num{width:30px;height:30px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.step-content h3{font-size:14px;margin-bottom:4px}
.step-content p{font-size:13px;margin:0}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.faq-item{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq-q{padding:14px 16px;font-size:14px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--text)}
.faq-q:hover{color:var(--primary)}
.faq-icon{font-style:normal;transition:transform .2s;color:var(--text3);font-size:18px;font-weight:400;flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{padding:0 16px 13px;font-size:13px;color:var(--text2);line-height:1.7;display:none}
.faq-item.open .faq-a{display:block}

/* TWO COL */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.col-card{border-radius:var(--radius);padding:18px}
.col-danger{background:var(--red-l);border:1px solid #FECACA}
.col-safe{background:var(--green-l);border:1px solid #A7F3D0}
.col-card h3{font-size:14px;margin-bottom:10px}
.col-card li{font-size:13px}

/* CTA BANNER */
.cta-banner{background:linear-gradient(135deg,var(--dark) 0%,#1F1C18 100%);position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:40px;text-align:center;color:#fff;margin:40px 0}
.cta-banner::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(232,84,10,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(232,84,10,.06) 1px,transparent 1px);background-size:30px 30px}
.cta-banner h2{color:#fff;margin-bottom:10px;position:relative;z-index:1}
.cta-banner p{color:rgba(255,255,255,.65);margin-bottom:20px;position:relative;z-index:1}
.btn-cta{display:inline-flex;align-items:center;gap:7px;background:var(--primary);color:#fff;text-decoration:none;border-radius:9px;padding:12px 26px;font-size:14px;font-weight:700;transition:var(--trans);position:relative;z-index:1}
.btn-cta:hover{background:var(--primary2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(232,84,10,.4);text-decoration:none}

/* ══════════════════════════
   FORMAT PAGE
══════════════════════════ */
.page-hero{background:var(--dark);position:relative;overflow:hidden;padding:42px 20px;color:#fff}
.page-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(232,84,10,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(232,84,10,.06) 1px,transparent 1px);background-size:32px 32px}
.page-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 80% 50%,rgba(232,84,10,.15) 0%,transparent 60%)}
.page-hero-inner{max-width:740px;margin:0 auto;position:relative;z-index:2}
.breadcrumb{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:12px}
.breadcrumb a{color:rgba(255,255,255,.4)}
.breadcrumb a:hover{color:rgba(255,255,255,.8)}
.page-hero h1{color:#fff;margin-bottom:10px}
.page-hero .sub{font-size:15px;color:rgba(255,255,255,.7);margin-bottom:20px;line-height:1.7}
.page-main{max-width:740px;margin:0 auto;padding:40px 20px 60px}
.page-main h2{margin-bottom:12px}
.page-main h3{margin:18px 0 6px}
.page-main p{margin-bottom:12px}
.page-main ul{margin-bottom:14px}
.how-to-box{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:24px}
.info-box{background:var(--primary-l);border:1px solid #FED7AA;border-radius:var(--radius);padding:14px;margin:14px 0}
.info-box h3{font-size:13px;color:#C2410C;margin-bottom:4px}
.info-box p{font-size:13px;margin:0;color:#92400E}
.use-cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:14px 0}
.use-case{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.use-case h3{font-size:13px;margin-bottom:4px}
.use-case p{font-size:12px;margin:0}

/* ══════════════════════════
   BLOG
══════════════════════════ */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:22px}
.blog-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--trans);text-decoration:none;display:flex;flex-direction:column}
.blog-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);text-decoration:none}
.blog-img{height:170px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:44px}
.blog-body{padding:18px;flex:1;display:flex;flex-direction:column}
.blog-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--primary);margin-bottom:7px}
.blog-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.4}
.blog-excerpt{font-size:13px;color:var(--text2);margin-bottom:12px;flex:1}
.blog-meta{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace}

/* ══════════════════════════
   STATIC PAGES
══════════════════════════ */
.static-page{max-width:740px;margin:0 auto;padding:46px 20px 60px}
.static-page h1{margin-bottom:20px}
.static-page h2{font-size:18px;margin:26px 0 10px}
.static-page p,.static-page li{font-size:14px;color:var(--text2)}
.contact-form{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:5px}
.form-control{width:100%;border:1.5px solid var(--border);border-radius:var(--radius);padding:10px 13px;font-size:14px;color:var(--text);background:var(--white);font-family:'Lora',serif;outline:none;transition:var(--trans)}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(232,84,10,.1)}
textarea.form-control{resize:vertical;min-height:120px}
.btn-submit{background:var(--primary);color:#fff;border:none;border-radius:var(--radius);padding:11px 26px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Lora',serif;transition:var(--trans)}
.btn-submit:hover{background:var(--primary2);transform:translateY(-1px)}
.alert{padding:11px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:14px}
.alert-success{background:var(--green-l);border:1px solid #A7F3D0;color:#065F46}
.alert-error{background:var(--red-l);border:1px solid #FECACA;color:#991B1B}

/* ══════════════════════════
   FOOTER — ALWAYS DARK (light + dark mode both)
══════════════════════════ */
.footer,body.dark .footer,body:not(.dark) .footer{
  background:#0F0E0D !important;
  color:rgba(255,255,255,.4) !important;
  padding:48px 20px 0 !important;
}
.footer *,.footer *:not(a){
  background-color:transparent;
  border-color:rgba(255,255,255,.08);
}
.footer-top{
  max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:260px 1fr;
  gap:48px;padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.footer-logo{
  font-size:17px;font-weight:800;
  color:#fff !important;
  margin-bottom:9px;display:flex;align-items:center;gap:8px;
}
.footer-brand p{
  font-size:13px;line-height:1.7;max-width:230px;
  color:rgba(255,255,255,.45) !important;
}
.footer-badges{display:flex;gap:6px;margin-top:13px;flex-wrap:wrap}
.fbadge{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;
  color:rgba(255,255,255,.5) !important;
}
.footer-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.footer-col h4{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:rgba(255,255,255,.55) !important;margin-bottom:11px;
}
.footer-col a{
  display:block;font-size:13px;
  color:rgba(255,255,255,.38) !important;
  text-decoration:none;margin-bottom:7px;transition:color .15s;
}
.footer-col a:hover{color:rgba(255,255,255,.85) !important;text-decoration:none}
.footer-bottom{
  max-width:1080px;margin:0 auto;padding:16px 0;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;flex-wrap:wrap;gap:8px;
  color:rgba(255,255,255,.3) !important;
  background:#0F0E0D !important;
}
.footer-bottom-links{display:flex;gap:14px}
.footer-bottom-links a{color:rgba(255,255,255,.3) !important;text-decoration:none}
.footer-bottom-links a:hover{color:rgba(255,255,255,.7) !important}
body.dark .footer-col a,body .footer-col a{color:rgba(255,255,255,.38) !important}
body.dark .footer-col a:hover,body .footer-col a:hover{color:rgba(255,255,255,.85) !important}
body.dark .footer-logo,body .footer-logo{color:#fff !important}
body.dark .fbadge,body .fbadge{background:rgba(255,255,255,.06) !important;color:rgba(255,255,255,.5) !important}

/* ══════════════════════════
   TOAST & MISC
══════════════════════════ */
#toast{position:fixed;bottom:80px;right:20px;background:var(--dark);color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;font-weight:600;z-index:999;box-shadow:var(--shadow-lg);max-width:260px;display:none;animation:slideUp .3s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════
   RESPONSIVE
══════════════════════════ */
@media(max-width:1024px){
  .footer-top{grid-template-columns:1fr}
  .footer-nav{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .hero-floats{display:none}
  .nav-menu{display:none;position:fixed;top:62px;left:0;right:0;bottom:0;background:var(--white);flex-direction:column;padding:16px;overflow-y:auto;z-index:199;gap:2px}
  .nav-menu.open{display:flex}
  .nav-toggle{display:flex}
  .nav-dropdown-menu{position:static;box-shadow:none;border:1px solid var(--border);margin-top:6px;min-width:auto;flex-direction:column;border-radius:var(--radius)}
  .nav-dropdown-menu.show{display:flex}
  .out-btn .sub{display:none}
  .two-col{grid-template-columns:1fr}
  .fmt-grid{grid-template-columns:1fr 1fr}
  .step-item{flex-direction:column;gap:8px}
  .footer-nav{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .use-cases{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
  .bar-stats{gap:10px}
  .bs-n{font-size:15px}
}
@media(max-width:480px){
  .hero{padding:44px 14px 36px}
  .tool-section{padding:20px 14px 0}
  .output-select{gap:4px}
  .out-btn{padding:9px 6px;font-size:12px}
  .opts{flex-direction:column;align-items:stretch;gap:8px}
  .opts-left{flex:none;width:100%}
  .q-row{width:100%;min-width:0}
  .q-row input[type=range]{flex:1;min-width:0;width:100%}
  .btn-conv{justify-content:center;width:100%}
  .file-out{flex-wrap:wrap;gap:5px}
  .out-badge{font-size:10px}
  .fmt-grid{grid-template-columns:1fr}
  .footer-nav{grid-template-columns:1fr}
  .hero-formats{gap:4px}
  .hfmt{font-size:10px;padding:3px 7px}
  .hero-pills{gap:5px}
  .hpill{font-size:11px;padding:4px 10px}
}

/* ══════════════════════════════════════════════
   DARK MODE — COMPLETE OVERRIDES
   Every component that was broken is fixed here
══════════════════════════════════════════════ */

/* Related Articles (blog posts) - was invisible */
body.dark [style*="background:var(--bg)"] { background: var(--bg2) !important; }

/* Converter */
body.dark .converter-wrap { background: var(--bg2) !important; border-color: var(--border) !important; }
body.dark .output-select { background: var(--bg) !important; border-color: var(--border) !important; }
body.dark .out-btn { color: var(--text2) !important; background: transparent !important; }
body.dark .out-btn:hover { border-color: var(--primary) !important; color: var(--primary) !important; }
body.dark .dropzone { background: var(--bg) !important; border-color: var(--border) !important; }
body.dark .dropzone:hover, body.dark .dropzone.over { background: var(--primary-l) !important; }
body.dark .file-row { background: var(--bg2) !important; border-color: var(--border) !important; }
body.dark .file-name { color: var(--text) !important; }
body.dark .file-meta { color: var(--text3) !important; }
body.dark .fmt-tag { background: var(--bg) !important; color: var(--text3) !important; border-color: var(--border) !important; }
body.dark .bbar { background: var(--bg2) !important; border-color: var(--border) !important; }
body.dark .q-row label { color: var(--text2) !important; }

/* Format cards */
body.dark .fmt-card { background: var(--bg2) !important; border-color: var(--border) !important; }
body.dark .fmt-card:hover { border-color: var(--primary) !important; }
body.dark .fmt-card h3 { color: var(--text) !important; }
body.dark .fmt-card p { color: var(--text3) !important; }

/* Blog cards */
body.dark .blog-card { background: var(--bg2) !important; border-color: var(--border) !important; }
body.dark .blog-card h3, body.dark .blog-card-title { color: var(--text) !important; }
body.dark .blog-card p, body.dark .blog-card-excerpt { color: var(--text3) !important; }
body.dark .blog-card-meta { color: var(--text3) !important; }
body.dark .blog-tag { background: var(--primary-l) !important; color: var(--primary) !important; }

/* Blog search */
body.dark #blog-search { background: var(--bg2) !important; border-color: var(--border) !important; color: var(--text) !important; }
body.dark .tag-f { background: var(--bg2) !important; border-color: var(--border) !important; color: var(--text2) !important; }

/* FAQ */
body.dark .faq-item { background: var(--bg2) !important; border-color: var(--border) !important; }
body.dark .faq-q { color: var(--text) !important; background: var(--bg2) !important; }
body.dark .faq-q:hover { background: var(--bg) !important; }
body.dark .faq-a { color: var(--text2) !important; background: var(--bg2) !important; }

/* How-to / Steps */
body.dark .how-to-box { background: var(--bg2) !important; border-color: var(--border) !important; }
body.dark .step-item { background: var(--bg) !important; border-color: var(--border) !important; }
body.dark .step-num { background: var(--primary) !important; color: #fff !important; }
body.dark .step-content h3 { color: var(--text) !important; }
body.dark .step-content p { color: var(--text2) !important; }

/* Comparison tables */
body.dark .cmp-table { background: var(--bg2) !important; }
body.dark .cmp-table th { background: var(--bg) !important; color: var(--text2) !important; border-color: var(--border) !important; }
body.dark .cmp-table td { color: var(--text2) !important; border-color: var(--border) !important; }
body.dark .cmp-table tr:hover td { background: var(--bg) !important; }
body.dark .cmp-table .ck { color: #4ade80 !important; }
body.dark .cmp-table .cx { color: #f87171 !important; }

/* Page content */
body.dark .page-main h2 { color: var(--text) !important; }
body.dark .page-main h3 { color: var(--text) !important; }
body.dark .page-main p { color: var(--text2) !important; }
body.dark .page-main li { color: var(--text2) !important; }
body.dark .page-main strong { color: var(--text) !important; }
body.dark .page-main code { background: var(--bg) !important; color: #f97316 !important; border: 1px solid var(--border); }
body.dark .page-main pre { background: #0d1117 !important; }

/* Donate section */
body.dark .donate-box, body.dark [class*="donate"] { background: var(--bg2) !important; border-color: var(--border) !important; }

/* Contact form */
body.dark input[type="text"], body.dark input[type="email"], body.dark textarea, body.dark select {
  background: var(--bg2) !important; border-color: var(--border) !important; color: var(--text) !important;
}

/* Output buttons - active states for all formats */
.out-btn.active-webp { background: #3b82f6 !important; color: #fff !important; }
.out-btn.active-bmp  { background: #8b5cf6 !important; color: #fff !important; }
.out-btn.active-gif  { background: #10b981 !important; color: #fff !important; }
.out-btn.active-tiff { background: #6366f1 !important; color: #fff !important; }
.out-btn.active-ico  { background: #f59e0b !important; color: #fff !important; }
.out-btn.active-svg  { background: #ec4899 !important; color: #fff !important; }

/* Mobile nav close button */
.nav-close { display: none; }
@media(max-width: 768px) {
  .nav-close { display: flex !important; position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text); width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; z-index: 201; }
  .nav-menu { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 70px 20px 30px !important; z-index: 200 !important; }
  body.dark .nav-menu { background: #111010 !important; }
}