/* ═══════════════════════════════════════════════════════════
   PIXLITE — style.css
   Free Image Compressor & Converter
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Light Theme */
  --bg: #f2f5f8; --s1: #ffffff; --s2: #e8ecf1; --s3: #e2e8f0; --s4: #cbd5e1; --s5: #94a3b8;
  --b0: rgba(15,23,42,.12); --b1: rgba(15,23,42,.22); --b2: rgba(15,23,42,.25); --sh: rgba(15,23,42,.08);
  /* Deep Blue - Primary Brand */
  --lime: #0A0093; --lime-rgb: 10,0,147; --lA: rgba(10,0,147,.15); --lB: rgba(10,0,147,.08); --lC: rgba(10,0,147,.03);
  /* Bright Sky Blue - Secondary Brand */
  --cyan: #0077cc; --cyan-rgb: 0,119,204; --cA: rgba(0,119,204,.15);
  --red:#ff4d4d;--grn:#22c55e;--amb:#d4a017;--pur:#a78bfa;
  --t1: #0f172a; --t2: #334155; --t3: #475569;
  --r:8px;--px:calc(max(0px, (100vw - 1140px) / 2) + clamp(14px,3vw,40px));--rl:12px;--nav:58px;
  --ff:'Lato',sans-serif;
  --fh:'Cal Sans',sans-serif;
  --bg-grad: radial-gradient(ellipse 80% 50% at 50% -10%,rgba(10,0,147,.1) 0%,transparent 70%);
}

[data-theme="dark"] {
  /* Very Dark Blue backgrounds (derived from #0A0093) */
  --bg:#04002b;--s1:#060045;--s2:#0a0066;--s3:#0e0088;--s4:#1300aa;--s5:#1700cc;
  --b0:rgba(255,255,255,.1);--b1:rgba(255,255,255,.2);--b2:rgba(255,255,255,.33); --sh: rgba(0,0,0,.5);
  /* Neon Cyan - Primary Accent for high contrast in dark mode */
  --lime:#00d4ff; --lime-rgb: 0,212,255; --lA: rgba(0,212,255,.18);--lB: rgba(0,212,255,.1);--lC: rgba(0,212,255,.04);
  /* Lightened Blue - Secondary Accent */
  --cyan:#4d40ff; --cyan-rgb: 77,64,255; --cA: rgba(77,64,255,.14);
  --t1:#ffffff;--t2:#cbd5e1;--t3:#64748b;
  --bg-grad: radial-gradient(ellipse 80% 50% at 50% -10%,rgba(10,0,147,.6) 0%,transparent 70%);
}

html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}

body{
  background:var(--bg);
  background-image:var(--bg-grad);
  color:var(--t1);
  font-family:var(--ff);
  font-size:13px;
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}

::selection{background:var(--lA);color:var(--lime)}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:var(--s4);border-radius:3px}


/* ═══════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════ */

nav{
  position:fixed;top:0;left:0;right:0;z-index:400;
  height:var(--nav);display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--px);
  background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--b0);
}

.logo{display:flex;align-items:center;gap:9px;cursor:pointer}

.logo img{
        height: 32px;
}

.logo-mark{
  width:30px;height:30px;background:var(--lime);border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-weight:800;font-size:12px;color:var(--bg);flex-shrink:0;
}

.logo-text{font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:.14em;color:var(--t1)}
.logo-text span{color:var(--lime)}

.nav-links{display:flex;gap:4px}

.nav-btn{
  padding:6px 13px;border-radius:var(--r);color:var(--t2);
  font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.04em;
  cursor:pointer;background:none;border:none;transition:all .18s;
}
.nav-btn:hover{color:var(--t1);background:var(--s2)}

.nav-right{display:flex;align-items:center;gap:8px}

.nav-tag{
  font-size:10px;font-weight:500;letter-spacing:.1em;padding:4px 11px;
  border:1px solid rgba(var(--lime-rgb),.28);color:var(--lime);border-radius:20px;background:var(--lB);
}

.net-dot{
  width:7px;height:7px;border-radius:50%;background:var(--grn);
  display:block;flex-shrink:0;transition:background .4s;box-shadow:0 0 6px var(--grn);
}
.net-dot.offline{background:var(--red);box-shadow:0 0 6px var(--red)}

.nav-install{
  padding:5px 13px;border:1px solid rgba(var(--lime-rgb),.4);background:var(--lB);
  color:var(--lime);font-family:var(--ff);font-size:10px;font-weight:500;
  letter-spacing:.08em;cursor:pointer;border-radius:20px;transition:all .18s;white-space:nowrap;
}
.nav-install:hover{background:var(--lime);color:var(--bg)}

.ham{
  display:none;flex-direction:column;gap:4px;cursor:pointer;
  background:none;border:1px solid var(--b1);border-radius:var(--r);padding:7px 8px;
}
.ham span{width:16px;height:1.5px;background:var(--t1);border-radius:2px;display:block;transition:all .25s}
.ham.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

.mnav{
  display:none;position:fixed;top:var(--nav);left:0;right:0;z-index:399;
  background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--b0);flex-direction:column;
  padding:8px var(--px) 14px;
}
.mnav.open{display:flex}
.mnav a,.mnav button{
  color:var(--t2);text-decoration:none;font-size:13px;font-weight:500;
  padding:10px;border-radius:var(--r);transition:all .15s;cursor:pointer;
  background:none;border:none;font-family:var(--ff);text-align:left;display:block;width:100%;
}
.mnav a:hover,.mnav button:hover{color:var(--t1);background:var(--s2)}


/* ═══════════════════════════════════════════════════════════
   LIVE COUNTER
   ═══════════════════════════════════════════════════════════ */

.live-counter{
  display:flex;align-items:center;gap:6px;padding:4px 12px;
  border:1px solid rgba(var(--lime-rgb),.22);border-radius:20px;
  background:rgba(var(--lime-rgb),.07);cursor:default;user-select:none;
}
.live-counter .lc-dot{
  width:6px;height:6px;border-radius:50%;background:var(--grn);
  flex-shrink:0;animation:lcpulse 1.8s ease-in-out infinite;
}
@keyframes lcpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.55)}}
.live-counter .lc-num{
  font-size:12px;font-weight:600;color:var(--lime);letter-spacing:-.01em;
  min-width:24px;text-align:right;font-family:var(--fh);transition:all .4s;
}
.live-counter .lc-lbl{font-size:10px;font-weight:500;color:var(--t2);letter-spacing:.06em;white-space:nowrap}


/* ═══════════════════════════════════════════════════════════
   FOOTER COUNTER
   ═══════════════════════════════════════════════════════════ */

.footer-counter{
  display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;
}
.fc-stat{display:flex;align-items:center;gap:8px}
.fc-stat .fcs-dot{
  width:5px;height:5px;border-radius:50%;background:var(--grn);
  flex-shrink:0;animation:lcpulse 1.8s ease-in-out infinite;
}
.fc-stat .fcs-val{
  font-family:var(--fh);font-size:14px;font-weight:700;color:var(--lime);
  min-width:40px;text-align:right;letter-spacing:-.01em;transition:all .4s;
}
.fc-stat .fcs-lbl{font-size:10px;color:var(--t2);letter-spacing:.08em;text-transform:uppercase}
.fc-sep{width:1px;height:22px;background:var(--b0);flex-shrink:0}


/* ═══════════════════════════════════════════════════════════
   TICKER
   ═══════════════════════════════════════════════════════════ */

.ticker{
  margin-top:var(--nav);background:var(--s1);border-bottom:1px solid var(--b0);
  display:flex;align-items:center;justify-content:center;overflow-x:auto;min-height:48px;
  padding:0 var(--px); scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ticker::-webkit-scrollbar{display:none}
.ti{display:flex;align-items:center;gap:7px;padding:0 18px;border-right:1px solid var(--b0);flex-shrink:0}
.ti:first-child{padding-left:0}
.ti:last-child{border-right:none}
.ti-dot{width:5px;height:5px;border-radius:50%;background:var(--grn);flex-shrink:0;animation:blink 2.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.2;transform:scale(.5)}}
.ti-lbl{font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--t2);white-space:nowrap}
.ti-val{font-size:13px;font-weight:500;color:var(--lime);letter-spacing:-.01em;min-width:28px;text-align:right}
.ti-unit{font-size:10px;color:var(--t2);margin-left:1px}


/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */

.hero{
  max-width:1140px;margin:0 auto;
  padding:clamp(40px,6vh,88px) clamp(14px,3vw,40px) clamp(26px,4vh,52px);
  display:grid;grid-template-columns:1fr 380px;gap:52px;align-items:center;
}

.h-eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.h-eline{width:22px;height:1px;background:var(--lime)}
.h-etxt{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--lime)}

h1{font-family:var(--fh);font-size:clamp(32px,4.5vw,60px);line-height:1.04;font-weight:800;margin-bottom:14px;letter-spacing:-.02em}
h1 .lime{color:var(--lime)}

.h-desc{color:var(--t2);line-height:1.8;font-size:12px;margin-bottom:22px;max-width:380px}

.h-kpis{display:grid;grid-template-columns:repeat(4,1fr);background:var(--s1);border:1px solid var(--b0);border-radius:var(--rl);overflow:hidden}
.kpi{padding:13px 8px;border-right:1px solid var(--b0);text-align:center}
.kpi:last-child{border-right:none}
.kpi-n{font-family:var(--fh);font-size:21px;font-weight:800;color:var(--t1);letter-spacing:-.02em}
.kpi-l{font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t2);margin-top:2px}

/* Hero Card */
.hcard{background:var(--s1);border:1px solid var(--b0);border-radius:var(--rl);overflow:hidden;position:relative}
.hcard::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--lime) 50%,transparent)}
.hc-h{padding:11px 15px;border-bottom:1px solid var(--b0);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px}
.hc-ht{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--t2)}
.hc-chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{font-size:10px;padding:2px 7px;border:1px solid var(--b0);border-radius:20px;color:var(--t2);font-weight:500}
.chip.on{border-color:rgba(var(--lime-rgb),.28);color:var(--lime);background:var(--lB)}
.chip.new{border-color:rgba(var(--cyan-rgb),.28);color:var(--cyan);background:var(--cA)}
.hc-b{padding:15px}
.hc-row{display:grid;grid-template-columns:1fr 20px 1fr;align-items:center;gap:0;margin-bottom:11px}
.hcbox{background:var(--s2);border:1px solid var(--b0);border-radius:var(--r);padding:11px;text-align:center}
.hcbox-sz{font-size:15px;font-weight:500;color:var(--t1)}
.hcbox-l{font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);margin-top:3px}
.hcbox.after .hcbox-sz{color:var(--lime)}
.hc-arr{text-align:center;color:var(--lime);font-size:13px}
.hc-pill{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--lB);border:1px solid rgba(var(--lime-rgb),.22);border-radius:var(--r);padding:6px 12px}
.hc-pill-v{font-size:13px;font-weight:500;color:var(--lime)}
.hc-pill-n{font-size:10px;color:var(--t2)}
.hc-f{padding:11px 15px;border-top:1px solid var(--b0);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ftag{font-size:10px;padding:2px 8px;border:1px solid var(--b0);border-radius:20px;color:var(--t2)}


/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */

.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(14px,3vw,40px) 72px}
.sec-hd{display:flex;align-items:center;gap:11px;margin-bottom:18px;padding-bottom:13px;border-bottom:1px solid var(--b0);flex-wrap:wrap}
.sec-n{font-size:10px;font-weight:500;color:var(--t2);letter-spacing:.14em}
.sec-t{font-family:var(--fh);font-size:12px;font-weight:700;color:var(--t2);letter-spacing:.08em;text-transform:uppercase}
.sec-badge{margin-left:auto;font-size:10px;font-weight:500;padding:3px 10px;border:1px solid rgba(var(--lime-rgb),.28);color:var(--lime);border-radius:20px;background:var(--lB);letter-spacing:.06em}


/* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */

.tabs{display:flex;box-shadow:0 4px 14px var(--sh);background:var(--s1);border:1px solid var(--b0);border-radius:var(--rl);overflow:hidden;margin-bottom:22px}
.tab{flex:1;padding:13px 10px;background:none;border:none;color:var(--t2);font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .18s;position:relative;display:flex;align-items:center;justify-content:center;gap:6px;border-right:1px solid var(--b0)}
.tab:last-child{border-right:none}
.tab:hover{color:var(--t1);background:var(--s2)}
.tab.on{color:var(--lime);background:var(--lB)}
.tab.on::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--lime)}
.tbadge{background:var(--lime);color:var(--bg);font-size:9px;font-weight:700;padding:1px 5px;border-radius:20px;display:none;line-height:1.4}
.tbadge.show{display:inline-block}
.tc{display:none}
.tc.on{display:block}


/* ═══════════════════════════════════════════════════════════
   DROPZONE
   ═══════════════════════════════════════════════════════════ */

.dz{border:1.5px dashed var(--b1);border-radius:var(--rl);background:var(--s1);transition:all .2s;position:relative;overflow:hidden;cursor:pointer}
.dz:hover{border-color:var(--lime);background:var(--lC)}
.dz.drag{border-color:var(--lime);background:var(--lC);transform:scale(1.02);box-shadow:0 8px 30px rgba(var(--lime-rgb),.12)}
.dz.has{border-style:solid;border-color:rgba(var(--lime-rgb),.25);background:var(--lC)}
.dz-glow{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:280px;height:200px;background:radial-gradient(ellipse,var(--lB) 0%,transparent 68%);pointer-events:none}
.dz-inner{padding:clamp(22px,3.5vh,44px) clamp(16px,3vw,32px);text-align:center;position:relative;z-index:1}
.dz-ico{width:48px;height:48px;margin:0 auto 12px;border:1px solid var(--b1);border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--s2)}
.dz-ico svg{width:20px;height:20px;fill:none;stroke-width:1.6}
.dz-title{font-family:var(--fh);font-size:clamp(16px,2.5vw,21px);font-weight:700;color:var(--t1);margin-bottom:6px}
.dz-sub{color:var(--t2);font-size:12px;line-height:1.7}
.dz-sub .hl{color:var(--lime)}
.dz-fmts{margin-top:9px;font-size:10px;font-weight:500;color:var(--t2);letter-spacing:.07em}
.dz-acts{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}


/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

.bp{padding:8px 20px;border:none;background:var(--lime);color:var(--bg);font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;border-radius:var(--r);transition:all .18s}
.bp:hover{background:var(--cyan);transform:translateY(-1px)}
.bp:active{transform:none}
.bp:disabled{opacity:.33;cursor:not-allowed;transform:none}
.bs{padding:8px 16px;border:1px solid var(--b1);background:transparent;color:var(--t2);font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;border-radius:var(--r);transition:all .18s}
.bs:hover{color:var(--t1);background:var(--s2)}
.bd{padding:8px 16px;border:1px solid rgba(255,69,69,.3);background:rgba(255,69,69,.07);color:var(--red);font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;border-radius:var(--r);transition:all .18s}
.bd:hover{border-color:rgba(255,69,69,.55);background:rgba(255,69,69,.12)}
.bc{padding:8px 16px;border:1px solid rgba(var(--cyan-rgb),.28);background:rgba(var(--cyan-rgb),.07);color:var(--cyan);font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;border-radius:var(--r);transition:all .18s}
.bc:hover{background:rgba(var(--cyan-rgb),.12)}
.bc:disabled{opacity:.33;cursor:not-allowed}


/* ═══════════════════════════════════════════════════════════
   PREVIEW GRID
   ═══════════════════════════════════════════════════════════ */

.pg-wrap{padding:0 14px 14px;border-top:1px solid var(--b0);display:none}
.pg-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 0;flex-wrap:wrap;gap:6px}
.pg-info{font-size:11px;color:var(--t2)}
.pg-info strong{color:var(--t1)}
.pg-btns{display:flex;gap:6px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:7px;max-height:260px;overflow-y:auto;padding-right:2px}
.pgrid::-webkit-scrollbar{width:3px}
.pgrid::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px}
.fc{position:relative;background:var(--s2);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;aspect-ratio:1;transition:border-color .18s}
.fc:hover{border-color:var(--b1)}
.fc img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.fc-ov{position:absolute;inset:0;background:rgba(0,0,5,.84);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;padding:5px;gap:3px;pointer-events:none}
.fc:hover .fc-ov{opacity:1}
.fc-nm{font-size:8.5px;color:var(--t1);text-align:center;word-break:break-all;line-height:1.35;max-height:30px;overflow:hidden}
.fc-sz{font-size:9px;color:var(--lime);font-weight:500}
.fc-rm{position:absolute;top:3px;right:3px;width:17px;height:17px;background:rgba(255,69,69,.9);border:none;border-radius:50%;color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;padding:0;line-height:1;pointer-events:all;z-index:2}
.fc:hover .fc-rm{opacity:1}
.fc-add{border:1.5px dashed var(--b1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:all .18s;aspect-ratio:1;border-radius:var(--r)}
.fc-add:hover{border-color:var(--lime);background:var(--lC)}
.fc-add svg{width:17px;height:17px;stroke:var(--t2);fill:none;stroke-width:1.6;transition:stroke .18s}
.fc-add:hover svg{stroke:var(--lime)}
.fc-add span{font-size:9px;color:var(--t2);transition:color .18s}
.fc-add:hover span{color:var(--lime)}


/* ═══════════════════════════════════════════════════════════
   SETTINGS
   ═══════════════════════════════════════════════════════════ */

.settings{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:1px;background:var(--b0);border:1px solid var(--b0);border-radius:var(--rl);overflow:hidden;margin:16px 0}
.sblk{box-shadow:0 6px 20px var(--sh);background:var(--s1);padding:clamp(16px, 3vw, 24px);display:flex;flex-direction:column}
.sblk-lbl{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.tip{width:16px;height:16px;border:1px solid var(--b1);background:var(--s2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:var(--t1);cursor:help;flex-shrink:0;transition:all .2s ease}
.tip:hover{border-color:var(--lime);color:var(--lime);background:var(--lC)}
.q-disp{display:flex;align-items:baseline;gap:5px;margin-bottom:6px}
.q-n{font-family:var(--fh);font-size:36px;font-weight:800;color:var(--t1);letter-spacing:-.04em;line-height:1}
.q-u{font-size:12px;color:var(--t2)}
.q-desc{font-size:10px;color:var(--t2);margin-bottom:9px;min-height:13px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--b1);border-radius:2px;outline:none;cursor:pointer;margin:12px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--lime);cursor:pointer;box-shadow:0 0 10px rgba(var(--lime-rgb),.3);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(0.9)}
.q-ticks{display:flex;justify-content:space-between;margin-top:7px;margin-bottom:auto}
.q-ticks span{font-size:9px;color:var(--t2);letter-spacing:.05em}

/* Format Buttons */
.fmts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fb{padding:12px 4px;border:1px solid var(--b0);background:var(--s2);color:var(--t2);font-family:var(--ff);font-size:11px;font-weight:600;letter-spacing:.05em;cursor:pointer;border-radius:var(--r);text-align:center;transition:all .2s ease;position:relative;line-height:1.3}
.fb:hover{border-color:var(--b1);color:var(--t1);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.fb.on{border-color:rgba(var(--lime-rgb),.28);color:var(--lime);background:var(--lB)}
.fb .new-tag{position:absolute;top:2px;right:2px;font-size:7px;background:var(--cyan);color:var(--bg);padding:1px 3px;border-radius:3px;font-weight:700;line-height:1.3}
.fb .mode-tag{font-size:8px;color:var(--t2);display:block;margin-top:1px;font-weight:400}
.fb.on .mode-tag{color:rgba(227,167,48,.6)}
.fnote{margin-top:auto;font-size:10px;color:var(--t2);line-height:1.65;background:var(--s2);border:1px solid var(--b0);border-radius:var(--r);padding:7px 9px;margin-top:12px}

/* Resize */
.rsz-row{display:flex;align-items:center;gap:5px;margin-bottom:7px}
.ri{flex:1;background:var(--s2);border:1px solid var(--b0);color:var(--t1);font-family:var(--ff);font-size:14px;padding:10px 12px;border-radius:var(--r);outline:none;transition:all .2s ease;-moz-appearance:textfield;min-width:0}
.ri::-webkit-inner-spin-button,.ri::-webkit-outer-spin-button{-webkit-appearance:none}
.ri:focus{border-color:var(--lime);box-shadow:0 0 0 2px rgba(var(--lime-rgb),.2)}
.ri::placeholder{color:var(--t2)}
.r-sep{color:var(--t2);font-size:12px;flex-shrink:0}
.lbtn{width:38px;height:38px;border:1px solid var(--b0);background:var(--s2);cursor:pointer;border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--lime);font-size:14px;transition:all .2s ease;flex-shrink:0}
.lbtn:hover{background:var(--s3);border-color:var(--b1)}
.lbtn.off{color:var(--t2)}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.preset{padding:5px 12px;border:1px solid var(--b0);background:var(--s1);color:var(--t2);font-family:var(--ff);font-size:11px;font-weight:500;cursor:pointer;border-radius:20px;transition:all .2s ease;white-space:nowrap}
.preset:hover{border-color:var(--lime);color:var(--t1);background:rgba(var(--lime-rgb),.1)}
.r-note{font-size:10px;color:var(--t2);line-height:1.6;margin-top:auto;padding-top:12px}



/* ═══════════════════════════════════════════════════════════
   CONVERT PANEL
   ═══════════════════════════════════════════════════════════ */

.cpanel{box-shadow:0 6px 20px var(--sh);background:var(--s1);border:1px solid var(--b0);border-radius:var(--rl);padding:17px;margin-top:17px}
.cpanel-lbl{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);margin-bottom:12px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin-bottom:14px}
.cc{padding:13px 7px;border:1px solid var(--b0);border-radius:var(--r);background:var(--s2);text-align:center;cursor:pointer;transition:all .18s}
.cc:hover{border-color:var(--b1)}
.cc.on{border-color:rgba(var(--cyan-rgb),.32);background:var(--cA)}
.cc.lime-card.on{border-color:rgba(var(--lime-rgb),.28);background:var(--lB)}
.cc-type{font-size:9px;font-weight:500;letter-spacing:.1em;color:var(--t2);margin-bottom:4px;text-transform:uppercase}
.cc.on .cc-type{color:rgba(var(--cyan-rgb),.7)}
.cc.lime-card.on .cc-type{color:rgba(var(--lime-rgb),.7)}
.cc-name{font-family:var(--fh);font-size:17px;font-weight:700;color:var(--t1);margin-bottom:3px}
.cc.on .cc-name{color:var(--cyan)}
.cc.lime-card.on .cc-name{color:var(--lime)}
.cc-desc{font-size:9px;color:var(--t2);line-height:1.5}
.cq-row{padding-top:13px;border-top:1px solid var(--b0)}
.cq-lbl{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t2);margin-bottom:8px}
.cq-inner{display:flex;align-items:center;gap:11px}
.cq-val{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--t1);min-width:34px;text-align:right}


/* ═══════════════════════════════════════════════════════════
   PROGRESS
   ═══════════════════════════════════════════════════════════ */

.prog{display:none;margin:13px 0}
.prog.show{display:block}
.prog-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.prog-txt{font-size:11px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}
.prog-pct{font-size:11px;color:var(--lime);font-weight:500}
.prog-bar{height:3px;background:var(--s3);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:var(--lime);border-radius:2px;width:0;transition:width .28s ease}
.prog-fill.anim{animation:panim 1.4s ease-in-out infinite}
@keyframes panim{0%,100%{opacity:1}50%{opacity:.45}}
.prog-fill.cyan{background:var(--cyan)}


/* ═══════════════════════════════════════════════════════════
   ACTION ROW
   ═══════════════════════════════════════════════════════════ */

.act-row{display:flex;gap:9px;margin:16px 0}
.act-main{flex:1;padding:13px;border:none;background:var(--lime);color:var(--bg);font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;border-radius:var(--r);transition:all .18s;display:flex;align-items:center;justify-content:center;gap:8px}
.act-main:hover{background:var(--cyan);transform:translateY(-1px);box-shadow:0 6px 20px rgba(var(--lime-rgb),.2)}
.act-main:active{transform:none;box-shadow:none}
.act-main:disabled{opacity:.33;cursor:not-allowed;transform:none;box-shadow:none}
.act-cyan{flex:1;padding:13px;border:1px solid rgba(var(--cyan-rgb),.28);background:rgba(var(--cyan-rgb),.07);color:var(--cyan);font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;border-radius:var(--r);transition:all .18s;display:flex;align-items:center;justify-content:center;gap:8px}
.act-cyan:hover{background:rgba(var(--cyan-rgb),.12);border-color:rgba(var(--cyan-rgb),.45);transform:translateY(-1px)}
.act-cyan:disabled{opacity:.33;cursor:not-allowed;transform:none}
.act-rst{padding:13px 16px;border:1px solid var(--b0);background:transparent;color:var(--t2);font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:var(--r);transition:all .18s}
.act-rst:hover{border-color:var(--b1);color:var(--t1);background:var(--s2)}


/* ═══════════════════════════════════════════════════════════
   RESULTS
   ═══════════════════════════════════════════════════════════ */

#rsec{display:none}
.cmp-wrap{position:relative;overflow:hidden;border-radius:var(--r);cursor:col-resize;user-select:none;background:var(--s2);margin-bottom:14px;border:1px solid var(--b0)}
.cmp-wrap img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;display:block}
.cmp-wrap .ia{clip-path:inset(0 50% 0 0)}
.cmp-pad{padding-top:44%}
.cmp-div{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--lime);transform:translateX(-1px);cursor:col-resize}
.cmp-hdl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--bg);font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.6)}
.cmp-lbls{position:absolute;bottom:9px;left:0;right:0;display:flex;justify-content:space-between;padding:0 11px;pointer-events:none}
.cmp-lbl{font-size:10px;padding:3px 8px;border-radius:20px;font-weight:500}
.cmp-lbl.orig{background:rgba(0,0,5,.84);color:var(--t2)}
.cmp-lbl.comp{background:rgba(var(--lime-rgb),.18);color:var(--lime);border:1px solid rgba(var(--lime-rgb),.28)}

.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.rc{background:var(--s1);border:1px solid var(--b0);border-radius:var(--rl);overflow:hidden}
.rc.compr{border-color:rgba(var(--lime-rgb),.22)}
.rc-hd{padding:9px 13px;border-bottom:1px solid var(--b0);display:flex;align-items:center;justify-content:space-between}
.rc-lbl{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--t2)}
.rc-sz{font-size:12px;font-weight:500;color:var(--t1)}
.rc.compr .rc-sz{color:var(--lime)}
.rc-img{position:relative;background:var(--s2);display:flex;align-items:center;justify-content:center;min-height:130px;overflow:hidden}
.rc-img img{max-width:100%;max-height:220px;display:block;object-fit:contain}
.rc-dims{position:absolute;bottom:6px;right:6px;background:rgba(0,0,5,.9);padding:2px 7px;border-radius:20px;font-size:10px;color:var(--t2)}

.sbar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--s1);border:1px solid var(--b0);border-radius:var(--rl);overflow:hidden;margin-bottom:12px}
.sb{padding:13px;border-right:1px solid var(--b0);text-align:center}
.sb:last-child{border-right:none}
.sb-l{font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);margin-bottom:5px}
.sb-v{font-family:var(--fh);font-size:18px;font-weight:700;color:var(--t1);letter-spacing:-.02em}
.sb-v.lime{color:var(--lime)}
.sb-v.grn{color:var(--grn)}

.savbar{background:var(--s1);border:1px solid var(--b0);border-radius:var(--rl);padding:14px 17px;margin-bottom:12px}
.sav-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sav-title{font-size:10px;font-weight:500;color:var(--t2);letter-spacing:.1em;text-transform:uppercase}
.sav-pct{font-size:11px;color:var(--lime);font-weight:500}
.sav-track{height:7px;background:var(--s3);border-radius:4px;overflow:hidden}
.sav-fill{height:100%;background:linear-gradient(90deg,var(--lime),var(--cyan));border-radius:4px;width:0;transition:width .85s cubic-bezier(.16,1,.3,1)}

.dl-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.dl-btn{flex:1;min-width:150px;padding:11px 14px;border:1px solid rgba(var(--lime-rgb),.28);background:var(--lB);color:var(--lime);font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;cursor:pointer;border-radius:var(--r);transition:all .18s;display:flex;align-items:center;justify-content:center;gap:7px}
.dl-btn:hover{background:var(--lime);color:var(--bg)}


/* ═══════════════════════════════════════════════════════════
   BATCH
   ═══════════════════════════════════════════════════════════ */

.blist{margin-top:4px}
.bi{background:var(--s1);border:1px solid var(--b0);border-radius:var(--r);padding:10px 13px;margin-bottom:6px;display:flex;align-items:center;gap:10px;animation:slin .26s ease}
@keyframes slin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.bi.done{border-color:rgba(var(--lime-rgb),.14)}
.bi.cdone{border-color:rgba(var(--cyan-rgb),.14)}
.bi.err{border-color:rgba(255,69,69,.18)}
.bi-thumb{width:40px;height:40px;border-radius:5px;object-fit:cover;flex-shrink:0;background:var(--s2)}
.bi-info{flex:1;min-width:0}
.bi-name{font-size:11px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;font-weight:500}
.bi-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.bi-sizes{font-size:10px;color:var(--t2)}

.badge{font-size:9px;font-weight:600;padding:2px 6px;border-radius:20px}
.badge.sv{border:1px solid rgba(34,197,94,.28);color:var(--grn);background:rgba(34,197,94,.07)}
.badge.cv{border:1px solid rgba(var(--cyan-rgb),.28);color:var(--cyan);background:rgba(var(--cyan-rgb),.07)}
.badge.er{border:1px solid rgba(255,69,69,.28);color:var(--red);background:rgba(255,69,69,.07)}
.badge.wa{border:1px solid rgba(245,158,11,.28);color:var(--amb);background:rgba(245,158,11,.07)}

.bi-acts{display:flex;gap:5px;flex-shrink:0}
.bib{padding:4px 10px;border:1px solid var(--b0);background:transparent;color:var(--t2);font-family:var(--ff);font-size:10px;font-weight:500;letter-spacing:.07em;cursor:pointer;border-radius:20px;transition:all .14s;white-space:nowrap}
.bib:hover{border-color:var(--lime);color:var(--lime)}
.bib.c:hover{border-color:var(--cyan);color:var(--cyan)}
.bib.pv:hover{border-color:var(--b1);color:var(--t1)}

.bsum{padding:11px 0;display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:11px;color:var(--t2);border-top:1px solid var(--b0);margin-top:3px}
.bsum .sv{color:var(--lime);font-weight:500}
.bsum .gv{color:var(--grn);font-weight:500}
.bsum .cv{color:var(--cyan);font-weight:500}

.dl-all{width:100%;margin-top:9px;padding:11px 14px;border:1px solid rgba(var(--lime-rgb),.28);background:var(--lB);color:var(--lime);font-family:var(--ff);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:var(--r);transition:all .18s;display:flex;align-items:center;justify-content:center;gap:7px}
.dl-all:hover{background:var(--lime);color:var(--bg)}
.dl-all.cyan{border-color:rgba(var(--cyan-rgb),.28);background:rgba(var(--cyan-rgb),.07);color:var(--cyan)}
.dl-all.cyan:hover{background:var(--cyan);color:var(--bg)}


/* ═══════════════════════════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════════════════════════ */

.feats{max-width:1140px;margin:0 auto;padding:50px clamp(14px,3vw,40px);border-top:1px solid var(--b0)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--b0);border:1px solid var(--b0);border-radius:var(--rl);overflow:hidden;margin-top:22px}
.fi{background:var(--s1);padding:22px 19px}
.fi-ico{width:32px;height:32px;margin-bottom:11px;border:1px solid var(--b1);border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--s2)}
.fi-ico svg{width:14px;height:14px;stroke:var(--lime);fill:none;stroke-width:1.6}
.fi-title{font-family:var(--fh);font-size:12px;font-weight:700;color:var(--t1);margin-bottom:6px}
.fi-desc{font-size:11px;line-height:1.8;color:var(--t2)}


/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */

.site-footer { border-top: 1px solid var(--b0); padding: 40px var(--px) 20px; background: var(--bg); font-family: var(--ff); }
.sf-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; }
.sf-brand { max-width: 380px; }
.sf-logo { font-family: var(--fh); font-size: 20px; font-weight: 800; color: var(--t1); letter-spacing: -.02em; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.sf-logo span { color: var(--lime); }
.sf-brand p { font-size: 13px; color: var(--t2); line-height: 1.7; margin-bottom: 12px; }
.sf-links { display: flex; gap: clamp(30px, 6vw, 80px); flex-wrap: wrap; flex: 1; justify-content: flex-end; }
@media (max-width: 880px) { .sf-links { justify-content: flex-start; } }
.sf-col h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--t1); margin-bottom: 16px; }
.sf-col a { display: block; font-size: 12px; color: var(--t2); text-decoration: none; margin-bottom: 12px; transition: color .2s; }
.sf-col a:hover { color: var(--lime); }
.sf-col a:focus-visible { outline: 2px solid var(--lime); border-radius: 2px; outline-offset: 2px; }
.sf-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--b0); padding-top: 20px; font-size: 11px; color: var(--t2); flex-wrap: wrap; gap: 16px; }


/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */

.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:600;display:flex;align-items:center;justify-content:center;padding:14px;backdrop-filter:blur(8px);animation:fin .18s ease}
@keyframes fin{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--s1);border:1px solid var(--b1);border-radius:var(--rl);padding:18px;max-width:540px;width:100%;max-height:90vh;overflow-y:auto;animation:sup .2s ease}
@keyframes sup{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:9px}
.modal-title{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:82%}
.modal-x{width:26px;height:26px;border:1px solid var(--b0);background:none;color:var(--t2);cursor:pointer;border-radius:var(--r);font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .14s;flex-shrink:0}
.modal-x:hover{border-color:rgba(255,69,69,.35);color:var(--red)}
.modal-img{width:100%;border-radius:var(--r);display:block;margin-bottom:10px;background:var(--s2)}
.modal-tags{display:flex;gap:6px;flex-wrap:wrap}
.mtag{font-size:10px;padding:3px 8px;border:1px solid var(--b0);border-radius:20px;color:var(--t2)}


/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */

.toast{position:fixed;bottom:16px;right:16px;z-index:700;background:var(--s2);border:1px solid var(--b1);border-radius:var(--r);padding:9px 14px;font-size:12px;color:var(--t1);display:flex;align-items:center;gap:8px;box-shadow:0 8px 26px var(--sh);transform:translateY(12px);opacity:0;transition:all .28s;max-width:300px;word-break:break-word;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1;pointer-events:all}
.tdot{width:5px;height:5px;border-radius:50%;background:var(--grn);flex-shrink:0}
.toast.err .tdot{background:var(--red)}
.toast.info .tdot{background:var(--cyan)}
.toast.warn .tdot{background:var(--amb)}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media(max-width:880px){
  .nav-links{display:none}
  .ham{display:flex}
  .hero{grid-template-columns:1fr}
  .hcard{display:none}
  .rgrid{grid-template-columns:1fr}
  .sbar{grid-template-columns:1fr 1fr}
  .sbar .sb:nth-child(2){border-right:none}
  .sbar .sb:nth-child(3){border-top:1px solid var(--b0)}
  .fgrid{grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
  .tabs{flex-wrap:wrap}
  .tab{min-width:50%;flex:none}
  .act-row{flex-wrap:wrap}
  .act-main,.act-cyan{flex:1 1 100%}
  .act-rst{flex:1}
  .dl-row{flex-direction:column}
  .dl-btn{min-width:unset}
  .cmp-pad{padding-top:56%}
  .fgrid{grid-template-columns:1fr}
  footer{flex-direction:column}
  .bi-acts{flex-direction:column;gap:4px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
  .h-kpis{grid-template-columns:1fr 1fr}
  .kpi:nth-child(2){border-right:none}
  .kpi:nth-child(3){border-top:1px solid var(--b0)}
}

@media(max-width:360px){
  .sbar{grid-template-columns:1fr}
  .sbar .sb{border-right:none;border-bottom:1px solid var(--b0)}
  .sbar .sb:last-child{border-bottom:none}
}

/* ═══════════════════════════════════════════════════════════
   LEGAL / PRIVACY
   ═══════════════════════════════════════════════════════════ */
.legal-wrap {
  max-width: 800px;
  margin: calc(var(--nav) + 40px) auto 80px;
  padding: 0 clamp(20px, 4vw, 40px);
}
.legal-wrap h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 8px; }
.legal-wrap .last-updated { color: var(--lime); font-size: 11px; margin-bottom: 32px; letter-spacing: .05em; }
.legal-wrap h2 { font-family: var(--fh); font-size: 20px; color: var(--t1); margin: 32px 0 12px; }
.legal-wrap p, .legal-wrap li { font-size: 13px; color: var(--t2); line-height: 1.8; margin-bottom: 16px; }
.legal-wrap ul { margin-left: 20px; margin-bottom: 16px; }
.legal-wrap a { color: var(--cyan); text-decoration: none; }
.legal-wrap a:hover { text-decoration: underline; }
.legal-wrap strong { color: var(--t1); }

/* Accessibility Focus States */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES

/* Theme Toggle */
.theme-toggle {
  background: var(--s2);
  border: 1px solid var(--b0);
  color: var(--t2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
  margin-right: 12px;
}
.theme-toggle:hover {
  color: var(--lime);
  border-color: var(--lime);
  background: var(--lC);
  transform: scale(1.05);
}
.sun-icon { display: none; } 
[data-theme="dark"] .sun-icon { display: block !important; }
.moon-icon { display: block !important; } 
[data-theme="dark"] .moon-icon { display: none !important; }

/* Attractive Footer Overrides */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, var(--s1) 0%, var(--bg) 100%);
  border-top: none;
  box-shadow: inset 0 1px 0 var(--b0);
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 50%, transparent 100%);
  opacity: 0.7;
}
.sf-col a:hover {
  color: var(--lime);
  transform: translateX(3px);
}

/* Light theme nav */
[data-theme="dark"] nav { background: rgba(4,0,43,.96); }
[data-theme="dark"] .mnav { background: rgba(4,0,43,.98); }

@media (max-width: 600px) {
  .nav-tag { display: none !important; }
  .lc-lbl { display: none !important; }
  .live-counter { padding: 4px 8px; }
  .fc-stat { display: none; }
  .fc-stat:nth-child(1) { display: flex; } /* Only show live visitors in footer on mobile */
  .fc-sep { display: none; }
}

@media (max-width: 380px) {
  .live-counter { display: none !important; } /* If extremely small, just hide the nav live counter too */
}

@media (max-width: 800px) {
  .ticker { justify-content: flex-start; }
}