/* iFixMyPDF — style.css v7 | Final Polish | 95+ Speed */

/* FONTS — woff2 inlined, no blocking */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2) format('woff2');unicode-range:U+0000-00FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hiJ-Ek-_EeA.woff2) format('woff2');unicode-range:U+0000-00FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hiJ-Ek-_EeA.woff2) format('woff2');unicode-range:U+0000-00FF;}

/* VARIABLES */
:root{
  --bg:#F8FAFC; --surface:#FFFFFF; --border:#E2E8F0; --border-d:#CBD5E1;
  --blue:#1A88E5; --blue-d:#1565C0; --blue-l:#EBF5FF;
  --text:#0F172A; --muted:#64748B; --muted2:#94A3B8;
  --green:#10B981; --red:#EF4444;
  --sh:0 1px 3px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.06);
  --sh-lg:0 8px 30px rgba(0,0,0,.09);
  --sh-xl:0 20px 60px rgba(0,0,0,.12);
  --r:16px; --max:800px; --gap:36px;
}
[data-theme="dark"]{
  --bg:#0B1120; --surface:#141D2E; --border:#1E2D45; --border-d:#2A3D56;
  --text:#E2E8F0; --muted:#94A3B8; --muted2:#64748B;
  --blue-l:rgba(26,136,229,.12);
  --sh:0 1px 3px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.3);
  --sh-lg:0 8px 30px rgba(0,0,0,.4); --sh-xl:0 20px 60px rgba(0,0,0,.5);
}

/* RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s;}

/* ═══ HEADER ═══ */
header{position:sticky;top:0;z-index:300;background:rgba(248,250,252,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
[data-theme="dark"] header{background:rgba(11,17,32,.97);}
nav{max-width:1200px;margin:0 auto;padding:0 1.5rem;height:64px;display:flex;align-items:center;gap:1rem;}

/* Logo */
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0;}
.logo-box{width:38px;height:38px;min-width:38px;background:var(--blue);border-radius:10px;box-shadow:0 2px 8px rgba(26,136,229,.3);display:flex;align-items:center;justify-content:center;}
.logo-box svg{width:22px;height:22px;color:#fff;}
.logo-text{font-size:1.05rem;font-weight:700;color:var(--text);letter-spacing:-.02em;line-height:1;}
.logo-text span{color:var(--blue);}

/* Sticky search (hidden by default, shows on scroll) */
.nav-search-wrap{flex:1;max-width:380px;display:none;margin:0 1rem;}
.nav-search-wrap.visible{display:block;}
.nav-srch-in{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:999px;padding:.4rem 1rem .4rem 2.4rem;font-size:.85rem;font-family:inherit;color:var(--text);outline:none;transition:border-color .15s;}
.nav-srch-in:focus{border-color:var(--blue);}
.nav-srch-ic{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--muted2);pointer-events:none;}
.nav-srch-wrap-inner{position:relative;}

/* Nav right */
.nav-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;}

/* All Tools button — desktop text, mobile icon-only */
.all-tools-btn{display:flex;align-items:center;gap:.4rem;padding:.45rem .75rem;border-radius:8px;border:none;background:none;color:var(--muted);font-size:.875rem;font-weight:600;cursor:pointer;font-family:inherit;transition:color .15s,background .15s;min-height:40px;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.all-tools-btn:hover{color:var(--text);background:var(--border);}
.all-tools-btn .btn-text{font-size:.875rem;}
.all-tools-btn .arr{transition:transform .2s;flex-shrink:0;}
.all-tools-btn.open .arr{transform:rotate(180deg);}

/* Dark toggle */
.dm-btn{width:40px;height:40px;border-radius:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:color .15s,background .15s;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.dm-btn:hover{color:var(--text);background:var(--border);}
.dm-btn svg{width:18px;height:18px;display:block;}

/* Mega dropdown */
.mega-wrap{position:relative;}
.mega-dd{position:absolute;top:calc(100% + 8px);right:0;width:min(700px,96vw);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-xl);z-index:500;display:none;padding:1.1rem;grid-template-columns:repeat(3,1fr);gap:.2rem;}
.mega-dd.open{display:grid;}
.mega-col{display:flex;flex-direction:column;}
.mega-col-hd{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);padding:.3rem .5rem .2rem;}
.m-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .5rem;border-radius:7px;text-decoration:none;min-height:40px;transition:background .12s;}
.m-item:hover{background:var(--blue-l);}
.m-item:hover .m-nm{color:var(--blue);}
.m-ic{width:24px;height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.82rem;flex-shrink:0;}
.m-nm{font-size:.79rem;font-weight:600;color:var(--text);}

/* Mobile overlay menu */
.mob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;display:none;opacity:0;transition:opacity .2s;}
.mob-overlay.show{display:flex;opacity:1;}
.mob-menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,90vw);background:var(--surface);z-index:500;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:1rem;}
.mob-overlay.show .mob-menu{transform:translateX(0);}
.mob-menu-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border);}
.mob-menu-title{font-weight:700;font-size:.95rem;color:var(--text);}
.mob-close{background:none;border:none;cursor:pointer;color:var(--muted);padding:.25rem;display:flex;align-items:center;justify-content:center;border-radius:6px;}
.mob-cat-hd{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);padding:.5rem 0 .3rem;}
.mob-tool-link{display:flex;align-items:center;gap:.55rem;padding:.5rem .5rem;border-radius:8px;text-decoration:none;min-height:40px;transition:background .12s;margin-bottom:.1rem;}
.mob-tool-link:hover{background:var(--blue-l);}
.mob-tool-link:hover .mob-nm{color:var(--blue);}
.mob-ic{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;}
.mob-nm{font-size:.82rem;font-weight:600;color:var(--text);}
.mob-d{font-size:.71rem;color:var(--muted2);}

/* ═══ BREADCRUMB ═══ */
.breadcrumb{max-width:var(--max);margin:0 auto;padding:.6rem 1.25rem;font-size:.76rem;color:var(--muted2);display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;}
.breadcrumb a{color:var(--muted2);text-decoration:none;transition:color .15s;}
.breadcrumb a:hover{color:var(--blue);}
.bc-s{opacity:.4;}

/* ═══ HOME HERO ═══ */
.home-hero{text-align:center;padding:3.5rem 1.25rem 2rem;max-width:1200px;margin:0 auto;}
.h-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--blue-l);color:var(--blue);font-size:.72rem;font-weight:700;padding:.28rem .85rem;border-radius:999px;margin-bottom:1.5rem;letter-spacing:.04em;text-transform:uppercase;}
.home-hero h1{font-size:clamp(2rem,5.5vw,3.6rem);font-weight:800;color:var(--text);line-height:1.1;letter-spacing:-.03em;margin-bottom:.85rem;}
.home-hero h1 em{font-style:normal;color:var(--blue);}
.home-hero p{font-size:1rem;color:var(--muted);max-width:460px;margin:0 auto;}

/* ═══ CHROME SEARCH BAR ═══ */
.hero-search-wrap{max-width:640px;margin:2rem auto 0;padding:0 1.25rem;}
.hero-srch-outer{position:relative;}
.hero-srch-in{
  width:100%;background:var(--surface);
  border:2px solid var(--border);border-radius:28px;
  padding:.9rem 1.4rem .9rem 3rem;
  font-size:1rem;font-family:inherit;color:var(--text);outline:none;
  box-shadow:var(--sh-lg);transition:border-color .2s,box-shadow .2s;
}
.hero-srch-in:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(26,136,229,.1),var(--sh-lg);}
.hero-srch-in::placeholder{color:var(--muted2);}
.hero-srch-ic{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--muted2);pointer-events:none;}
.hero-srch-ic svg{width:18px;height:18px;display:block;}
.hero-srch-wrap:focus-within .hero-srch-ic svg{color:var(--blue);}
.hero-srch-clr{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:var(--border);border:none;border-radius:50%;width:22px;height:22px;display:none;align-items:center;justify-content:center;cursor:pointer;font-size:.65rem;color:var(--muted);padding:0;transition:background .15s;}
.hero-srch-clr.show{display:flex;}
.hero-srch-clr:hover{background:var(--red);color:#fff;}

/* Search dropdown */
.srch-dd{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:16px;box-shadow:var(--sh-xl);z-index:300;
  max-height:340px;overflow-y:auto;display:none;
}
.srch-dd.open{display:block;}
.srch-dd-item{display:flex;align-items:center;gap:.65rem;padding:.65rem 1rem;text-decoration:none;color:inherit;transition:background .12s;border-bottom:1px solid var(--border);min-height:50px;}
.srch-dd-item:last-child{border-bottom:none;}
.srch-dd-item:hover,.srch-dd-item.s-hi{background:var(--blue-l);}
.srch-dd-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
.srch-dd-nm{font-weight:600;font-size:.875rem;color:var(--text);}
.srch-dd-d{font-size:.74rem;color:var(--muted2);}
.srch-dd-nm mark{background:var(--blue-l);color:var(--blue);border-radius:2px;padding:0 2px;font-style:normal;}
.srch-hint{text-align:center;font-size:.72rem;color:var(--muted2);margin-top:.4rem;}
.srch-hint kbd{background:var(--surface);border:1px solid var(--border-d);border-radius:4px;padding:.05rem .35rem;font-size:.68rem;font-family:monospace;box-shadow:0 1px 0 var(--border-d);}

/* ═══ HOME STATS ═══ */
.h-stats{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;padding:2rem 1.25rem;max-width:1200px;margin:0 auto;border-top:1px solid var(--border);}
.h-stat{text-align:center;}
.h-sn{font-size:1.75rem;font-weight:800;color:var(--text);display:block;line-height:1;margin-bottom:.2rem;}
.h-sl{font-size:.68rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.09em;font-weight:600;}

/* ═══ HOME SECTIONS ═══ */
.h-sec{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 2.5rem;}
.h-sec-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.5rem;}
.h-sec-ttl{font-size:1.35rem;font-weight:700;color:var(--text);}
.see-all{font-size:.82rem;color:var(--blue);font-weight:700;padding:.3rem .65rem;border-radius:7px;text-decoration:none;transition:background .15s;}
.see-all:hover{background:var(--blue-l);}

/* Popular grid */
.pop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;}
.pop-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:1rem;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;align-items:center;gap:.75rem;}
.pop-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--blue);}
.pop-ic{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;}
.pop-nm{font-weight:700;font-size:.85rem;color:var(--text);}
.pop-d{font-size:.72rem;color:var(--muted2);line-height:1.4;margin-top:.06rem;}

/* Pills */
.pills{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1.15rem;}
.pill{padding:.32rem .85rem;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);font-size:.78rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;font-family:inherit;min-height:34px;}
.pill:hover,.pill.on{background:var(--blue);border-color:var(--blue);color:#fff;}

/* Tools grid */
.t-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.cat-s{display:none;}.cat-s.vis{display:contents;}
.ti{background:var(--surface);padding:1rem .9rem;transition:background .12s;display:flex;align-items:flex-start;gap:.65rem;text-decoration:none;color:inherit;min-height:68px;}
.ti:hover{background:var(--blue-l);}.ti:hover .ti-nm{color:var(--blue);}
.ti-ic{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
.ti-nm{font-weight:600;font-size:.81rem;color:var(--text);margin-bottom:.1rem;transition:color .12s;}
.ti-d{font-size:.7rem;color:var(--muted2);line-height:1.4;}
.no-res{display:none;grid-column:1/-1;text-align:center;padding:2.5rem;color:var(--muted2);}
.no-res.show{display:block;}

/* Features */
.h-feats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem;}
.h-feat{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:1.15rem;display:flex;gap:.8rem;align-items:flex-start;}
.h-feat-ic{width:36px;height:36px;border-radius:9px;background:var(--blue-l);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.h-feat h4{font-weight:700;font-size:.85rem;color:var(--text);margin-bottom:.18rem;}
.h-feat p{font-size:.76rem;color:var(--muted);line-height:1.55;}

/* ═══ TOOL PAGE ═══ */
.page-wrap{max-width:var(--max);margin:0 auto;padding:1.5rem 1.25rem 4rem;}
.tool-hero{text-align:center;margin-bottom:2rem;}
.tool-hero h1{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800;color:var(--text);letter-spacing:-.025em;line-height:1.18;margin-bottom:.45rem;}
.tool-hero .sub{font-size:.9rem;color:var(--muted);line-height:1.6;max-width:520px;margin:0 auto;}

/* ═══ TOOL BOX — f2.png exact ═══ */
.tool-box{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-xl);margin-bottom:var(--gap);overflow:visible;position:relative;}

/* Outer box with dashed border (f2.png) */
.dz-outer{margin:1.5rem;border:1.5px dashed var(--border-d);border-radius:12px;overflow:hidden;}

/* Dropzone — label wraps all for click bug fix */
.dz-label{display:block;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.dz-inner{padding:2.5rem 2rem 2rem;text-align:center;transition:background .2s;}
.dz-inner:hover,.dz-inner.drag-ov{background:var(--blue-l);}
.dz-file-svg{margin:0 auto .9rem;display:block;color:var(--muted2);}
.upload-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--blue);color:#fff;border:none;border-radius:12px;
  padding:.82rem 2rem;font-size:1rem;font-weight:700;font-family:inherit;
  pointer-events:none;min-height:50px;letter-spacing:-.01em;
}
.dz-or{font-size:.85rem;color:var(--muted2);margin:.7rem 0 0;}

/* Hidden file input */
.dz-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0,0,0,0);}

/* Cloud import */
.cloud-row{padding:.85rem 1.5rem 1rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:center;}
.cloud-lbl{font-size:.74rem;color:var(--muted2);}
.cloud-btn{display:inline-flex;align-items:center;gap:.35rem;background:var(--surface);border:1.5px solid var(--border);border-radius:999px;padding:.35rem .85rem;font-size:.78rem;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s,background .15s;min-height:34px;}
.cloud-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-l);}
.cloud-btn svg{width:13px;height:13px;flex-shrink:0;}

/* URL inline panel */
.url-panel{background:var(--bg);border-top:1px solid var(--border);padding:1rem 1.5rem;display:none;animation:slideDown .2s ease;}
.url-panel.show{display:block;}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.url-panel-hdr{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:.6rem;}
.url-row{display:flex;gap:.45rem;}
.url-in{flex:1;background:var(--surface);border:1.5px solid var(--border);border-radius:8px;padding:.48rem .8rem;font-size:.84rem;font-family:inherit;color:var(--text);outline:none;transition:border-color .15s;}
.url-in:focus{border-color:var(--blue);}
.url-in::placeholder{color:var(--muted2);}
.url-fetch{display:inline-flex;align-items:center;gap:.3rem;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:.48rem 1rem;font-size:.82rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s;white-space:nowrap;}
.url-fetch:hover{background:var(--blue-d);}
.url-close{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:.75rem;padding:.2rem .45rem;border-radius:5px;font-family:inherit;margin-left:auto;transition:color .15s;}
.url-close:hover{color:var(--red);}
.url-st{font-size:.76rem;margin-top:.45rem;display:none;}
.url-st.err{color:var(--red);}
.url-st.inf{color:var(--blue);}

/* File info */
.file-info{padding:.8rem 1.5rem;border-top:1px solid var(--border);display:none;align-items:center;gap:.6rem;}
.file-info.show{display:flex;}
.fi-ic{font-size:1.05rem;flex-shrink:0;}
.fi-nm{flex:1;font-weight:600;font-size:.84rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fi-sz{font-size:.73rem;color:var(--muted2);flex-shrink:0;}
.fi-rm{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:.95rem;border-radius:4px;min-width:28px;min-height:28px;display:flex;align-items:center;justify-content:center;transition:color .15s;}
.fi-rm:hover{color:var(--red);}

/* Options */
.tool-opts{padding:.9rem 1.5rem;border-top:1px solid var(--border);display:none;}
.tool-opts.show{display:block;}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.55rem;flex-wrap:wrap;}
.opt-row:last-child{margin-bottom:0;}
.opt-lbl{font-size:.82rem;color:var(--muted);font-weight:500;}
.opt-in{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:.38rem .7rem;font-size:.82rem;font-family:inherit;color:var(--text);outline:none;transition:border-color .15s;}
.opt-in:focus{border-color:var(--blue);}
select.opt-in{cursor:pointer;}

/* Privacy badge (f2.png teal style) */
.priv-badge{display:flex;align-items:flex-start;gap:.5rem;background:#E6FFFA;border:1.5px solid #81E6D9;border-radius:0;padding:.75rem 1.5rem;font-size:.8rem;color:#234E52;line-height:1.55;}
.priv-ic{font-size:.95rem;flex-shrink:0;margin-top:.05rem;}
.priv-badge strong{color:#1A4044;}
[data-theme="dark"] .priv-badge{background:rgba(45,184,122,.08);border-color:rgba(45,184,122,.2);color:#6EE7B7;}

/* Action button — full width blue (f2.png) */
.action-wrap{padding:0;}
.action-btn{
  width:100%;padding:1rem;background:var(--blue);color:#fff;border:none;
  border-radius:0 0 var(--r) var(--r);
  font-size:1rem;font-weight:700;font-family:inherit;cursor:pointer;
  transition:background .15s;display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;letter-spacing:-.01em;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.action-btn:hover:not(:disabled){background:var(--blue-d);}
.action-btn:disabled{opacity:.45;cursor:not-allowed;}

/* Progress */
.prog-wrap{padding:1rem 1.5rem;border-top:1px solid var(--border);display:none;}
.prog-wrap.show{display:block;}
.prog-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:.45rem;}
.prog-lbl{font-size:.8rem;font-weight:600;color:var(--text);}
.prog-pct{font-size:.8rem;font-weight:700;color:var(--blue);}
.prog-track{height:7px;background:var(--border);border-radius:999px;overflow:hidden;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--blue),#60A5FA);border-radius:999px;width:0%;transition:width .3s cubic-bezier(.4,0,.2,1);}
.prog-step{font-size:.72rem;color:var(--muted2);margin-top:.35rem;}

/* Result */
.result-wrap{padding:1.25rem 1.5rem;border-top:1px solid var(--border);text-align:center;display:none;}
.result-wrap.show{display:block;}
.res-icon{font-size:2rem;margin-bottom:.35rem;}
.res-title{font-weight:700;font-size:.95rem;color:var(--text);margin-bottom:.2rem;}
.res-sub{font-size:.8rem;color:var(--muted);margin-bottom:.85rem;}
#dlBtn{display:none;}
#dlBtn.show{display:inline-flex;}
.dl-btn{align-items:center;gap:.4rem;background:var(--green);color:#fff;border:none;border-radius:9px;padding:.62rem 1.4rem;font-size:.9rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s;min-height:44px;}
.dl-btn:hover{background:#059669;}
.res-note{font-size:.72rem;color:var(--muted2);margin-top:.45rem;}

/* ═══ BELOW TOOL BOX ═══ */
.del-note{text-align:center;font-size:.82rem;font-style:italic;color:var(--blue);margin-bottom:var(--gap);}

/* Rating */
.rating-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:1rem 1.25rem;margin-bottom:var(--gap);display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.rt-l{display:flex;flex-direction:column;gap:.18rem;}
.rt-lbl{font-weight:700;font-size:.875rem;color:var(--text);}
.stars{display:flex;gap:.18rem;}
.star{font-size:1.2rem;cursor:pointer;color:var(--border);transition:color .12s,transform .12s;line-height:1;user-select:none;}
.star.on,.star.hv{color:#F59E0B;}
.star:hover{transform:scale(1.2);}
.rt-r{border-left:1px solid var(--border);padding-left:1rem;display:flex;align-items:center;gap:.65rem;}
.rt-sc{font-size:1.35rem;font-weight:800;color:var(--text);}
.rt-vo{font-size:.72rem;color:var(--muted2);}
.rt-msg{font-size:.76rem;color:var(--muted);font-style:italic;margin-top:.12rem;}

/* Ad blocks */
.ad-block{border:2px dashed var(--border-d);border-radius:12px;min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--muted2);font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--gap);}

/* Recent files */
.rec-sec{margin-bottom:var(--gap);}
.rec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem;}
.rec-ttl{font-size:.72rem;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.07em;}
.rec-clr{background:none;border:none;font-size:.72rem;color:var(--muted2);cursor:pointer;font-family:inherit;transition:color .15s;padding:0;}
.rec-clr:hover{color:var(--red);}
.rec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;}
.rec-item{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:.55rem .75rem;display:flex;align-items:center;gap:.5rem;font-size:.77rem;transition:border-color .15s;}
.rec-item:hover{border-color:var(--blue);}
.ri-nm{flex:1;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ri-sz{font-size:.68rem;color:var(--muted2);}

/* Sec title */
.sec-ttl{font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:.85rem;}

/* Steps */
.steps-sec{margin-bottom:var(--gap);}
.steps{display:flex;flex-direction:column;gap:.55rem;}
.step-item{display:flex;align-items:flex-start;gap:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.8rem 1rem;}
.step-n{width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.step-t{font-size:.875rem;color:var(--muted);line-height:1.55;}
.step-t strong{color:var(--text);}

/* Features */
.feats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:.7rem;margin-bottom:var(--gap);}
.feat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.95rem;display:flex;gap:.65rem;align-items:flex-start;}
.feat-ic{width:32px;height:32px;border-radius:8px;background:var(--blue-l);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.feat-t{font-weight:700;font-size:.82rem;color:var(--text);margin-bottom:.1rem;}
.feat-d{font-size:.75rem;color:var(--muted);line-height:1.5;}

/* SEO */
.seo-art{margin-bottom:var(--gap);}
.seo-art h2{font-size:1.1rem;font-weight:700;color:var(--text);margin:1.4rem 0 .55rem;}
.seo-art h3{font-size:.93rem;font-weight:700;color:var(--text);margin:1rem 0 .35rem;}
.seo-art p{color:var(--muted);font-size:.875rem;line-height:1.82;margin-bottom:.75rem;}
.seo-art ul,.seo-art ol{color:var(--muted);padding-left:1.3rem;margin-bottom:.75rem;}
.seo-art li{font-size:.875rem;line-height:1.78;margin-bottom:.2rem;}
.seo-art strong{color:var(--text);font-weight:600;}

/* FAQ */
.faq-sec{margin-bottom:var(--gap);}
.faq-item.open /* Related */
.rel-sec{margin-bottom:var(--gap);}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:.6rem;}
.rel-card{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:.9rem;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column;gap:.3rem;}
.rel-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--blue);}
.rel-ic{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.9rem;}
.rel-nm{font-weight:600;font-size:.8rem;color:var(--text);}
.rel-d{font-size:.71rem;color:var(--muted2);line-height:1.4;}

/* Feedback */
.fb-sec{margin-bottom:var(--gap);}
.fb-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.6rem;}
.fb-in{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;padding:.5rem .8rem;font-size:.858rem;font-family:inherit;color:var(--text);outline:none;transition:border-color .15s;}
.fb-in:focus{border-color:var(--blue);}
.fb-ta{width:100%;min-height:86px;resize:vertical;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;padding:.5rem .8rem;font-size:.858rem;font-family:inherit;color:var(--text);outline:none;transition:border-color .15s,min-height .2s;margin-bottom:.6rem;}
.fb-ta:focus{border-color:var(--blue);min-height:125px;}
.fb-sub{display:inline-flex;align-items:center;gap:.4rem;background:var(--text);color:#fff;border:none;border-radius:9px;padding:.6rem 1.25rem;font-size:.858rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s;min-height:42px;}
.fb-sub:hover{background:#1E293B;}
.fb-ok{font-size:.78rem;color:var(--green);font-weight:600;display:none;margin-left:.85rem;}

/* Cloud modals */
.cloud-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .2s;}
.cloud-modal-overlay.show{opacity:1;pointer-events:all;}
.cloud-modal{background:var(--surface);border-radius:20px;box-shadow:var(--sh-xl);max-width:420px;width:100%;transform:scale(.95) translateY(10px);transition:transform .25s cubic-bezier(.34,1.56,.64,1);overflow:hidden;}
.cloud-modal-overlay.show .cloud-modal{transform:scale(1) translateY(0);}
.cm-hdr{padding:1.4rem 1.4rem 0;display:flex;align-items:flex-start;justify-content:space-between;}
.cm-ic-wrap{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;}
.cm-close{background:var(--bg);border:none;border-radius:8px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:background .15s,color .15s;}
.cm-close:hover{background:var(--border);color:var(--text);}
.cm-body{padding:1rem 1.4rem 1.4rem;}
.cm-badge{display:inline-flex;align-items:center;gap:.35rem;background:var(--blue-l);color:var(--blue);font-size:.73rem;font-weight:700;padding:.25rem .75rem;border-radius:999px;margin-bottom:.75rem;}
.cm-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.35rem;}
.cm-desc{font-size:.84rem;color:var(--muted);line-height:1.65;margin-bottom:.9rem;}
.cm-steps{background:var(--bg);border-radius:10px;padding:.8rem .95rem;margin-bottom:.9rem;}
.cm-step{display:flex;align-items:flex-start;gap:.5rem;font-size:.79rem;color:var(--muted);margin-bottom:.45rem;line-height:1.5;}
.cm-step:last-child{margin-bottom:0;}
.cm-dot{width:17px;height:17px;border-radius:50%;background:var(--blue-l);color:var(--blue);font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.cm-code{background:#0F172A;border-radius:9px;padding:.8rem .95rem;font-family:'Courier New',monospace;font-size:.74rem;color:#7DD3FC;margin:.55rem 0;line-height:1.65;overflow-x:auto;}
.cm-code .c{color:#94A3B8;}.cm-code .k{color:#F472B6;}.cm-code .s{color:#86EFAC;}.cm-code .f{color:#FDE68A;}
.cm-foot{display:flex;gap:.6rem;padding:0 1.4rem 1.4rem;}
.cm-pri{flex:1;background:var(--blue);color:#fff;border:none;border-radius:10px;padding:.62rem;font-size:.858rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s;min-height:42px;}
.cm-pri:hover{background:var(--blue-d);}
.cm-sec{background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:.62rem 1rem;font-size:.858rem;font-weight:600;font-family:inherit;color:var(--muted);cursor:pointer;transition:background .15s;min-height:42px;}
.cm-sec:hover{background:var(--border);}

/* FOOTER */
hr{border:none;border-top:1px solid var(--border);}
footer{border-top:1px solid var(--border);background:var(--surface);}
.ft-inner{max-width:1200px;margin:0 auto;padding:2.25rem 1.5rem;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:1.5rem;}
.ft-brand p{font-size:.8rem;color:var(--muted);line-height:1.7;margin-top:.55rem;max-width:200px;}
.fc h5{font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);margin-bottom:.75rem;}
.fc ul{list-style:none;}.fc ul li{margin-bottom:.35rem;}
.fc ul a{color:var(--muted);text-decoration:none;font-size:.8rem;transition:color .15s;}.fc ul a:hover{color:var(--blue);}
.ft-bot{border-top:1px solid var(--border);padding:.9rem 1.5rem;max-width:1200px;margin:0 auto;display:flex;justify-content:center;}
.ft-bot p{font-size:.75rem;color:var(--muted2);}.heart{color:var(--red);}

/* Spin */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{width:15px;height:15px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite;display:inline-block;}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .ft-inner{grid-template-columns:1fr 1fr;}
  .mega-dd{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  :root{--gap:24px;}
  nav{padding:0 1rem;height:58px;}
  .page-wrap,.breadcrumb{padding-left:1rem;padding-right:1rem;}
  .h-sec{padding-left:1rem;padding-right:1rem;}
  .home-hero{padding:2.5rem 1rem 1.5rem;}
  .hero-search-wrap{padding:0 1rem;}
  .dz-outer{margin:1rem;}
  .dz-inner{padding:2rem 1.25rem 1.5rem;}
  .cloud-row,.file-info,.tool-opts,.prog-wrap,.result-wrap{padding-left:1rem;padding-right:1rem;}
  .priv-badge{padding:.65rem 1rem;}
  .fb-row{grid-template-columns:1fr;}
  .feats-grid{grid-template-columns:1fr 1fr;}
  .rel-grid{grid-template-columns:1fr 1fr;}
  .rec-grid{grid-template-columns:1fr 1fr;}
  .pop-grid{grid-template-columns:1fr 1fr;}
  .h-stats{gap:1.5rem;}
  .ft-inner{grid-template-columns:1fr;gap:1rem;}
  /* Hide desktop nav text */
  .all-tools-btn .btn-text,.all-tools-btn .arr{display:none;}
  .all-tools-btn{width:40px;height:40px;border-radius:8px;padding:0;justify-content:center;}
  /* Show mega-dd as side menu on mobile */
  .mega-dd{display:none!important;}
}
@media(max-width:380px){
  .rel-grid,.rec-grid{grid-template-columns:1fr;}
  .feats-grid{grid-template-columns:1fr;}
}

/* ═══ v8 OVERHAUL ADDITIONS ═══ */

/* HERO — zero gap tight stack */
.hero-wrap{max-width:1200px;margin:0 auto;text-align:center;padding:1.1rem 1.25rem 0;}
.h-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--blue-l);color:var(--blue);font-size:.72rem;font-weight:700;padding:.28rem .85rem;border-radius:999px;margin-bottom:.75rem;letter-spacing:.04em;text-transform:uppercase;}
.hero-h1{font-size:clamp(1.9rem,5vw,3.2rem);font-weight:800;color:var(--text);line-height:1.1;letter-spacing:-.03em;margin-bottom:.9rem;}

/* CHROME SEARCH */
.hero-srch-section{max-width:640px;margin:0 auto;padding:0 1.25rem 1rem;position:relative;}
.hero-srch-outer{position:relative;}
.hero-srch-in{width:100%;background:var(--surface);border:2px solid var(--border);border-radius:28px;padding:.9rem 3.2rem .9rem 3rem;font-size:1rem;font-family:inherit;color:var(--text);outline:none;box-shadow:0 4px 20px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);transition:border-color .2s,box-shadow .2s;}
.hero-srch-in:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(26,136,229,.12),0 4px 20px rgba(0,0,0,.08);}
.hero-srch-in::placeholder{color:var(--muted2);}
.hero-srch-ic{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--muted2);pointer-events:none;transition:color .15s;}
.hero-srch-section:focus-within .hero-srch-ic{color:var(--blue);}
.hero-srch-clr{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:var(--border);border:none;border-radius:50%;width:22px;height:22px;display:none;align-items:center;justify-content:center;cursor:pointer;font-size:.62rem;color:var(--muted);padding:0;transition:background .15s;}
.hero-srch-clr.show{display:flex;}
.hero-srch-clr:hover{background:var(--red);color:#fff;}
.srch-hint{text-align:center;font-size:.71rem;color:var(--muted2);margin-top:.35rem;}
.srch-hint kbd{background:var(--surface);border:1px solid var(--border-d);border-radius:4px;padding:.04rem .35rem;font-size:.67rem;font-family:monospace;box-shadow:0 1px 0 var(--border-d);}

/* Search dropdown */
.srch-dd{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;box-shadow:var(--sh-xl);z-index:300;max-height:340px;overflow-y:auto;display:none;}
.srch-dd.open{display:block;}
.sdi{display:flex;align-items:center;gap:.65rem;padding:.65rem 1rem;text-decoration:none;color:inherit;transition:background .12s;border-bottom:1px solid var(--border);min-height:50px;}
.sdi:last-child{border-bottom:none;}
.sdi:hover,.sdi.hi{background:var(--blue-l);}
.sdi-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
.sdi-nm{font-weight:600;font-size:.875rem;color:var(--text);}
.sdi-d{font-size:.73rem;color:var(--muted2);}
.sdi-nm mark{background:var(--blue-l);color:var(--blue);border-radius:2px;padding:0 2px;font-style:normal;}

/* STATS — hidden on mobile */
.h-stats{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;padding:1.1rem 1.25rem 0;max-width:1200px;margin:.8rem auto 0;border-top:1px solid var(--border);}
.h-stat{text-align:center;}
.h-sn{font-size:1.7rem;font-weight:800;color:var(--text);display:block;line-height:1;margin-bottom:.18rem;}
.h-sl{font-size:.67rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.09em;font-weight:600;}

/* NAV sticky search — desktop */
.nav-srch-wrap{flex:1;max-width:400px;display:none;position:relative;margin:0 .75rem;}
.nav-srch-wrap.vis{display:block;}
.nav-srch-in{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:999px;padding:.42rem 1rem .42rem 2.5rem;font-size:.858rem;font-family:inherit;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh);}
.nav-srch-in:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,136,229,.1);}
.nav-srch-ic{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--muted2);pointer-events:none;}
.nav-srch-dd{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;box-shadow:var(--sh-xl);z-index:400;max-height:280px;overflow-y:auto;display:none;min-width:280px;}
.nav-srch-dd.open{display:block;}

/* Mobile search icon (sticky) */
.mob-srch-btn{display:none;width:40px;height:40px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--muted);align-items:center;justify-content:center;transition:color .15s,background .15s;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.mob-srch-btn:hover{color:var(--text);background:var(--border);}
.mob-srch-btn.vis{display:flex;}

/* Mobile full-screen search overlay */
.mob-srch-ov{position:fixed;inset:0;background:rgba(248,250,252,.98);z-index:500;display:flex;flex-direction:column;transform:translateY(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);padding:1rem 1.1rem;}
[data-theme="dark"] .mob-srch-ov{background:rgba(11,17,32,.98);}
.mob-srch-ov.open{transform:translateY(0);}
.mob-srch-row{display:flex;align-items:center;gap:.65rem;margin-bottom:.85rem;}
.mob-srch-fw{flex:1;position:relative;}
.mob-srch-fi{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--blue);pointer-events:none;}
.mob-srch-input{width:100%;background:var(--surface);border:2px solid var(--blue);border-radius:28px;padding:.75rem 1.25rem .75rem 2.9rem;font-size:1rem;font-family:inherit;color:var(--text);outline:none;box-shadow:0 0 0 4px rgba(26,136,229,.1);}
.mob-srch-x{width:38px;height:38px;border:none;background:var(--border);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.mob-srch-x:hover{background:var(--border-d);}
.mob-srch-res{flex:1;overflow-y:auto;}

/* LOGO scaled up */
.logo-box{width:40px;height:40px;min-width:40px;min-height:40px;background:var(--blue);border-radius:10px;box-shadow:0 2px 10px rgba(26,136,229,.3);display:flex;align-items:center;justify-content:center;}

/* Footer cross-promo */
.ft-xpromo{margin-top:1rem;padding-top:.85rem;border-top:1px dashed var(--border-d);}
.ft-xpromo a{font-size:1.2rem;font-weight:800;color:var(--blue);text-decoration:none;display:block;margin-bottom:.2rem;letter-spacing:-.02em;transition:color .15s;}
.ft-xpromo a:hover{color:var(--blue-d);}
.ft-xpromo p{font-size:.75rem;color:var(--muted2);line-height:1.5;margin:0;}

/* STATIC PAGES */
.static-wrap{max-width:760px;margin:0 auto;padding:2.5rem 1.5rem 4rem;}
.static-hero{margin-bottom:2rem;}
.static-hero h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;color:var(--text);letter-spacing:-.025em;margin-bottom:.4rem;}
.static-hero p{font-size:.92rem;color:var(--muted);line-height:1.65;}
.static-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.75rem;margin-bottom:1.25rem;}
.static-card h2{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);}
.static-card p{font-size:.875rem;color:var(--muted);line-height:1.82;margin-bottom:.7rem;}
.static-card p:last-child{margin-bottom:0;}
.static-card ul,.static-card ol{color:var(--muted);padding-left:1.3rem;margin-bottom:.7rem;}
.static-card li{font-size:.875rem;line-height:1.78;margin-bottom:.2rem;}
.static-card a{color:var(--blue);font-weight:500;}
.static-card strong{color:var(--text);font-weight:600;}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.6rem;}
.cf-in,.cf-ta{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;padding:.52rem .8rem;font-size:.875rem;font-family:inherit;color:var(--text);outline:none;transition:border-color .15s;}
.cf-in:focus,.cf-ta:focus{border-color:var(--blue);}
.cf-ta{min-height:110px;resize:vertical;}
.cf-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--blue);color:#fff;border:none;border-radius:9px;padding:.62rem 1.3rem;font-size:.875rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s;min-height:42px;margin-top:.5rem;}
.cf-btn:hover{background:var(--blue-d);}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:1rem;margin-bottom:var(--gap);}
.blog-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column;}
.blog-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--blue);}
.bc-img{height:150px;background:linear-gradient(135deg,var(--blue-l),var(--blue));display:flex;align-items:center;justify-content:center;font-size:2.5rem;}
.bc-body{padding:1.1rem;flex:1;display:flex;flex-direction:column;}
.bc-tag{display:inline-flex;align-items:center;background:var(--blue-l);color:var(--blue);font-size:.67rem;font-weight:700;padding:.18rem .52rem;border-radius:999px;margin-bottom:.5rem;letter-spacing:.04em;text-transform:uppercase;}
.blog-card h3{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.35rem;line-height:1.4;}
.blog-card p{font-size:.77rem;color:var(--muted);line-height:1.6;flex:1;}
.bc-meta{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;font-size:.71rem;color:var(--muted2);}

/* Mobile responsive additions */
@media(max-width:640px){
  .h-stats{display:none !important;}
  .nav-srch-wrap.vis{display:none !important;}
  .mob-srch-btn.vis{display:flex !important;}
  .abt-text,.abt-arr{display:none;}
  .all-tools-btn{width:40px;height:40px;padding:0;justify-content:center;}
  .hero-srch-section{padding:0 1rem .9rem;}
  .hero-wrap{padding:.9rem 1rem 0;}
  .cf-row{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .static-wrap{padding-left:1rem;padding-right:1rem;}
}

/* ═══════════════════════════════════════════════════
   v8.3 STAGE 2 — All 10 Fixes
   ═══════════════════════════════════════════════════ */

/* FIX 6: Unified max-width — tools match homepage */
:root{--max-w-page:1200px;}
.page-wrap,.tool-page-inner,.below-fold,.static-wrap,.article-wrap{
  max-width:var(--max-w-page);margin-left:auto;margin-right:auto;
  padding-left:1.5rem;padding-right:1.5rem;
}
.tool-box{max-width:800px;margin-left:auto;margin-right:auto;}

/* FIX 2+3: Desktop sticky search — centered pill, no shrink */
.nav-desktop-srch-wrap{
  position:absolute;left:50%;transform:translateX(-50%);
  width:min(480px,40vw);display:none;
}
.nav-desktop-srch-wrap.vis{display:block;}
.nav-desktop-srch-in{
  width:100%;background:var(--surface);
  border:2px solid var(--border);border-radius:28px;
  padding:.48rem 1.1rem .48rem 2.8rem;
  font-size:.875rem;font-family:inherit;color:var(--text);outline:none;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  transition:border-color .15s,box-shadow .15s;
}
.nav-desktop-srch-in:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,136,229,.12);}
.nav-desktop-srch-ic{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--muted2);pointer-events:none;}
.nav-desktop-srch-dd{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12);z-index:400;max-height:300px;overflow-y:auto;display:none;}
.nav-desktop-srch-dd.open{display:block;}

/* FIX 2: Mobile inline search — NO overlay, expands in header only */
.nav-mob-srch-wrap{
  position:absolute;left:0;right:0;top:0;bottom:0;
  display:flex;align-items:center;padding:0 1rem;
  background:rgba(248,250,252,.98);
  opacity:0;pointer-events:none;transition:opacity .2s;
  z-index:10;
}
[data-theme="dark"] .nav-mob-srch-wrap{background:rgba(11,17,32,.98);}
.nav-mob-srch-wrap.mob-srch-active{opacity:1;pointer-events:all;}
.nav-mob-srch-field{
  flex:1;background:var(--surface);
  border:2px solid var(--blue);border-radius:28px;
  padding:.52rem 1rem .52rem 2.6rem;
  font-size:.9rem;font-family:inherit;color:var(--text);outline:none;
  box-shadow:0 0 0 3px rgba(26,136,229,.1);
}
.nav-mob-srch-field-ic{position:absolute;left:1.7rem;top:50%;transform:translateY(-50%);color:var(--blue);pointer-events:none;}
.nav-mob-srch-close{width:36px;height:36px;border:none;background:var(--border);border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;margin-left:.5rem;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.nav-mob-srch-close:hover{background:var(--border-d);}
.nav-mob-srch-dd{position:absolute;top:calc(100% + 4px);left:1rem;right:1rem;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:400;max-height:260px;overflow-y:auto;display:none;}
.nav-mob-srch-dd.open{display:block;}

/* Mobile search icon (sticky, no overlay) */
.mob-srch-btn{
  display:none;width:40px;height:40px;border:none;background:none;
  border-radius:8px;cursor:pointer;color:var(--muted);
  align-items:center;justify-content:center;
  transition:color .15s,background .15s;
  -webkit-tap-highlight-color:rgba(0,0,0,0);flex-shrink:0;
}
.mob-srch-btn:hover{color:var(--text);background:var(--border);}
.mob-srch-btn.vis{display:flex;}

/* FIX 4: Compress controls */
.compress-panel{margin:0 1.5rem .5rem;padding:1rem;background:var(--bg);border:1px solid var(--border);border-radius:12px;}
.compress-panel-title{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.7rem;}
.compress-counter{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem;}
.compress-btn{width:34px;height:34px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.compress-btn:hover{border-color:var(--blue);color:var(--blue);}
.compress-kb-input{flex:1;text-align:center;background:var(--surface);border:1.5px solid var(--border);border-radius:8px;padding:.38rem .5rem;font-size:.95rem;font-weight:700;font-family:inherit;color:var(--text);outline:none;transition:border-color .15s;}
.compress-kb-input:focus{border-color:var(--blue);}
.compress-kb-label{font-size:.78rem;color:var(--muted);font-weight:600;flex-shrink:0;}
.preset-chips{display:flex;gap:.4rem;flex-wrap:wrap;}
.preset-chip{padding:.28rem .72rem;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);font-size:.76rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;font-family:inherit;}
.preset-chip:hover,.preset-chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}

/* FIX 5: Merge file list */
.merge-list{margin:.5rem 1.5rem .25rem;display:none;}
.ml-hdr{display:flex;justify-content:space-between;align-items:center;padding:.5rem .2rem;margin-bottom:.35rem;}
.ml-title{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.ml-hint{font-size:.71rem;color:var(--muted2);}
.ml-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:9px;margin-bottom:.35rem;transition:border-color .15s;}
.ml-item:hover{border-color:var(--blue);}
.ml-icon{font-size:.95rem;flex-shrink:0;}
.ml-name{flex:1;font-size:.82rem;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ml-size{font-size:.72rem;color:var(--muted2);flex-shrink:0;}
.ml-rm{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:.85rem;border-radius:4px;min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;transition:color .15s;flex-shrink:0;}
.ml-rm:hover{color:var(--red);}

/* Start Over button */
.start-over-btn{display:none;align-items:center;gap:.4rem;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:.55rem 1.1rem;font-size:.845rem;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;transition:all .15s;min-height:40px;margin-left:.5rem;}
.start-over-btn:hover{border-color:var(--blue);color:var(--blue);}

/* PDF Info grid */
.pdf-info-grid{display:flex;flex-direction:column;gap:.35rem;text-align:left;}
.pi-row{display:flex;align-items:center;gap:.75rem;padding:.45rem .5rem;background:var(--bg);border-radius:7px;}
.pi-k{font-size:.78rem;font-weight:700;color:var(--muted);width:110px;flex-shrink:0;}
.pi-v{font-size:.82rem;color:var(--text);font-weight:500;}

/* FIX 9: Comment module */
.comment-module{margin-bottom:var(--gap);}
.comment-form-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.35rem;margin-bottom:1rem;}
.cmt-star-row{display:flex;gap:.2rem;margin-bottom:.65rem;}
.cmt-star{font-size:1.3rem;cursor:pointer;color:var(--border);transition:color .12s,transform .12s;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.cmt-star:hover{transform:scale(1.15);}
.comment-card{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:.9rem 1.1rem;margin-bottom:.6rem;}
.cc-hdr{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-bottom:.35rem;}
.cc-name{font-weight:700;font-size:.85rem;color:var(--text);}
.cc-stars{display:flex;gap:.1rem;font-size:.85rem;}
.cc-date{font-size:.72rem;color:var(--muted2);margin-left:auto;}
.cc-text{font-size:.845rem;color:var(--muted);line-height:1.7;}
.no-comments{font-size:.82rem;color:var(--muted2);text-align:center;padding:1.25rem;font-style:italic;}
.comment-ok{font-size:.78rem;color:var(--green);font-weight:600;display:none;margin-left:.75rem;}

/* FIX 1: Rich FAQ — paragraph-length answers */
/* Blog */
.blog-page-wrap{max-width:var(--max-w-page);margin:0 auto;padding:0 1.5rem 4rem;}
.blog-hero-tight{padding:.9rem 0 1.5rem;border-bottom:1px solid var(--border);margin-bottom:1.75rem;}
.blog-hero-tight h1{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800;color:var(--text);letter-spacing:-.025em;margin-bottom:.25rem;}
.blog-hero-tight p{font-size:.9rem;color:var(--muted);}
.blog-seo-body{margin-bottom:2rem;}
.blog-seo-body p{font-size:.92rem;color:var(--muted);line-height:1.85;margin-bottom:.9rem;}
.blog-seo-body strong{color:var(--text);font-weight:600;}
.ad-slot-styled{border:2px dashed var(--border-d);text-align:center;font-weight:700;padding:15px;margin:20px 0;color:var(--muted2);border-radius:8px;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;}
.blog-grid-v2{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem;margin-bottom:1.5rem;}

/* Responsive fixes */
@media(max-width:900px){.nav-desktop-srch-wrap{width:min(360px,38vw);}}
@media(max-width:640px){
  :root{--gap:24px;}
  nav{position:relative;}/* for absolute positioned mob search */
  .nav-desktop-srch-wrap{display:none!important;}
  .compress-panel{margin:.5rem 1rem;}
  .merge-list{margin:.5rem 1rem .25rem;}
  .blog-page-wrap,.page-wrap,.static-wrap{padding-left:1rem;padding-right:1rem;}
  .tool-box{max-width:100%;}
}

/* ═══════════════════════════════════════════════
   8-POINT FIX PATCH
   ═══════════════════════════════════════════════ */

/* FIX 1: Unified 880px max-width for ALL internal pages */
:root { --max-inner: 880px; }

.page-wrap,
.static-wrap,
.article-wrap,
.blog-page-wrap {
  max-width: var(--max-inner) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* Tool box also unified */
.tool-box {
  max-width: var(--max-inner) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* All below-tool sections match */
.rating-block,
.ad-block,
.rec-sec,
.steps-sec,
.feats-grid,
.seo-art,


/* FIX 3: Larger logo text */
.logo-text {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}


/* FIX 7: Hide static cloud leak blocks if any */
.cloud-static-block { display: none !important; }

/* Blog grid unified width */
.blog-grid-v2 {
  max-width: var(--max-inner);
  margin-left: auto;
  margin-right: auto;
}
.blog-seo-body {
  max-width: var(--max-inner);
  margin-left: auto;
  margin-right: auto;
}

/* Single post template */
.post-wrap {
  max-width: var(--max-inner);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.post-hero { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.post-hero h1 { font-size: clamp(1.6rem,4vw,2.4rem); font-weight:800; color:var(--text); letter-spacing:-.025em; line-height:1.18; margin-bottom:.5rem; }
.post-meta { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; font-size:.78rem; color:var(--muted2); margin-bottom:.35rem; }
.post-tag { background:var(--blue-l); color:var(--blue); font-size:.68rem; font-weight:700; padding:.18rem .55rem; border-radius:999px; letter-spacing:.04em; text-transform:uppercase; }
.post-body { font-size:.95rem; color:var(--muted); line-height:1.92; }
.post-body h2 { font-size:1.25rem; font-weight:700; color:var(--text); margin:2rem 0 .65rem; }
.post-body h3 { font-size:1rem; font-weight:700; color:var(--text); margin:1.5rem 0 .5rem; }
.post-body p { margin-bottom:1rem; }
.post-body ul, .post-body ol { padding-left:1.4rem; margin-bottom:1rem; }
.post-body li { margin-bottom:.35rem; }
.post-body a { color:var(--blue); font-weight:500; }
.post-body strong { color:var(--text); font-weight:600; }
.post-body blockquote { border-left:3px solid var(--blue); padding:.75rem 1rem; background:var(--blue-l); border-radius:0 8px 8px 0; margin:1rem 0; font-style:italic; }
.post-body code { background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:.12rem .4rem; font-family:monospace; font-size:.85em; color:var(--blue); }
.post-ad { border:2px dashed var(--border-d); border-radius:10px; min-height:90px; display:flex; align-items:center; justify-content:center; color:var(--muted2); font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin:1.5rem 0; }
.post-nav { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.post-nav a { color:var(--blue); font-size:.85rem; font-weight:600; text-decoration:none; }
.post-nav a:hover { text-decoration:underline; }

/* Contact email block */
.contact-email-block {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:2rem 1.75rem;
  text-align:center;
  margin-bottom:1.5rem;
}
.contact-email-block .email-icon { font-size:2.5rem; margin-bottom:.85rem; }
.contact-email-block h2 { font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:.5rem; }
.contact-email-block a.email-link {
  display:inline-block;
  font-size:1.2rem;
  font-weight:700;
  color:var(--blue);
  text-decoration:none;
  padding:.5rem 1.25rem;
  background:var(--blue-l);
  border-radius:10px;
  margin-bottom:1rem;
  transition:background .15s,color .15s;
  letter-spacing:-.01em;
}
.contact-email-block a.email-link:hover { background:var(--blue); color:#fff; }
.contact-email-block p { font-size:.9rem; color:var(--muted); line-height:1.75; max-width:480px; margin:0 auto; }

@media(max-width:640px) {
  .page-wrap, .static-wrap, .blog-page-wrap {
    padding-left:1rem !important;
    padding-right:1rem !important;
  }
  .logo-text { font-size:1.1rem !important; }
}

/* ═══ FIX 7: Cloud Modal — correct .cm-ov/.cm-box naming ═══ */
.cm-ov{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:1rem;opacity:0;pointer-events:none;
  transition:opacity .22s;visibility:hidden;
}
.cm-ov.show{opacity:1;pointer-events:all;visibility:visible;}
.cm-box{
  background:var(--surface);border-radius:18px;
  box-shadow:var(--sh-xl);max-width:420px;width:100%;
  transform:scale(.94) translateY(12px);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  max-height:88vh;overflow-y:auto;
}
.cm-ov.show .cm-box{transform:scale(1) translateY(0);}
.cm-ic-w{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.cm-close{
  background:var(--bg);border:none;border-radius:8px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);transition:background .15s,color .15s;flex-shrink:0;
}
.cm-close:hover{background:var(--border);color:var(--text);}
.cm-badge{
  display:inline-flex;align-items:center;gap:.32rem;
  background:var(--blue-l);color:var(--blue);
  font-size:.71rem;font-weight:700;padding:.22rem .7rem;
  border-radius:999px;margin-bottom:.7rem;
}
.cm-title{font-size:.98rem;font-weight:700;color:var(--text);margin-bottom:.3rem;}
.cm-desc{font-size:.83rem;color:var(--muted);line-height:1.62;margin-bottom:.85rem;}
.cm-steps{background:var(--bg);border-radius:9px;padding:.75rem .9rem;margin-bottom:.85rem;}
.cm-step{display:flex;align-items:flex-start;gap:.48rem;font-size:.78rem;color:var(--muted);margin-bottom:.42rem;line-height:1.5;}
.cm-step:last-child{margin-bottom:0;}
.cm-dot{width:16px;height:16px;border-radius:50%;background:var(--blue-l);color:var(--blue);font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.cm-code{background:#0F172A;border-radius:8px;padding:.75rem .9rem;font-family:'Courier New',monospace;font-size:.73rem;color:#7DD3FC;margin:.5rem 0;line-height:1.62;overflow-x:auto;white-space:pre-wrap;}
.cm-pri{flex:1;background:var(--blue);color:#fff;border:none;border-radius:9px;padding:.6rem;font-size:.84rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s;min-height:40px;}
.cm-pri:hover{background:var(--blue-d);}
.cm-sec{background:var(--bg);border:1.5px solid var(--border);border-radius:9px;padding:.6rem .95rem;font-size:.84rem;font-weight:600;font-family:inherit;color:var(--muted);cursor:pointer;transition:background .15s;min-height:40px;}
.cm-sec:hover{background:var(--border);}
.cm-foot{display:flex;gap:.55rem;padding:0 1.35rem 1.35rem;}
.cm-hdr{padding:1.35rem 1.35rem 0;display:flex;align-items:flex-start;justify-content:space-between;}
.cm-body{padding:.95rem 1.35rem 1.35rem;}

/* ═══════════════════════════════════════════════
   PRODUCTION PATCH — 8 Hostinger Fixes
   ═══════════════════════════════════════════════ */

/* FIX 1: Mobile bento dropdown — absolute, right-aligned */
@media(max-width:640px){
  .mob-menu{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    right:10px !important;
    left:auto !important;
    bottom:auto !important;
    width:min(280px,82vw) !important;
    max-height:75vh;
    border-radius:14px !important;
    box-shadow:var(--sh-xl);
    border:1px solid var(--border);
    transform:scale(.95) translateY(-6px) !important;
    opacity:0;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1), opacity .18s !important;
    pointer-events:none;
  }
  .mob-ov{
    background:transparent !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    padding:0 !important;
  }
  .mob-ov.show .mob-menu,
  .mob-menu.show{
    transform:scale(1) translateY(0) !important;
    opacity:1;
    pointer-events:all;
  }
  /* anchor dropdown under header */
  #mobOv{ top:58px !important; }
}

/* FIX 2: Expandable mobile search — class-based animation */
.nav-mob-srch-wrap{
  opacity:0;pointer-events:none;
  transform:scaleX(.85);
  transform-origin:right center;
  transition:opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.nav-mob-srch-wrap.search-expanded{
  opacity:1;pointer-events:all;
  transform:scaleX(1);
}

/* FIX 3: Universal comment embed placeholder */
.comment-embed-placeholder{
  background:var(--surface);
  border:1.5px dashed var(--border-d);
  border-radius:var(--r);
  padding:2rem 1.5rem;
  text-align:center;
  color:var(--muted2);
  font-size:.82rem;
  margin-bottom:var(--gap);
}
.comment-embed-placeholder strong{ color:var(--muted); display:block; margin-bottom:.35rem; font-size:.85rem; }

/* FIX 4: Static pagination */
.pagination{
  display:flex;align-items:center;justify-content:center;
  gap:.5rem;margin:2rem auto;flex-wrap:wrap;
}
.pg-link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.55rem 1.1rem;border-radius:9px;
  border:1.5px solid var(--border);background:var(--surface);
  color:var(--text);font-size:.85rem;font-weight:600;
  text-decoration:none;transition:all .15s;min-height:42px;
}
.pg-link:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-l);}
.pg-link.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.pg-link.disabled{opacity:.4;pointer-events:none;}

/* FIX 6: Back to top floating button */
.back-to-top{
  position:fixed;right:1.25rem;bottom:1.25rem;
  width:46px;height:46px;border-radius:50%;
  background:var(--blue);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:700;cursor:pointer;
  box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s, transform .25s, background .15s;
  z-index:250;-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--blue-d);}
@media(max-width:640px){.back-to-top{right:.85rem;bottom:.85rem;width:42px;height:42px;}}

/* FIX 7: Compress panel always visible */
.compress-panel{display:block !important;margin-top:0;}

/* FIX 8: Rating disabled state */
.stars.rated .star{cursor:default;pointer-events:none;}
.rt-rated-msg{font-size:.75rem;color:var(--green);font-weight:600;}

/* ═══════════════════════════════════════════════
   v8.4 — 5 Live Fixes
   ═══════════════════════════════════════════════ */

/* FIX 1+2: Mobile search expand — nav wrapper starts hidden, expands via class */
#navMobSrchWrap {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s ease !important;
}
#navMobSrchWrap.search-expanded {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* FIX 2: Mobile bento — transparent overlay (no page lock), only menu card clickable */
@media(max-width: 640px) {
  .mob-ov {
    background: transparent !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 500 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: hidden !important;
    display: block !important;
  }
  .mob-ov.show {
    pointer-events: none !important; /* backdrop NOT clickable */
    visibility: visible !important;
  }
  .mob-menu {
    position: absolute !important;
    top: 62px !important;
    right: 10px !important;
    left: auto !important;
    width: min(300px, 88vw) !important;
    max-height: 72vh !important;
    overflow-y: auto !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.18) !important;
    transform: scale(.94) translateY(-8px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s !important;
    z-index: 501 !important;
  }
  .mob-ov.show .mob-menu,
  .mob-menu.show {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }
  .mob-mhdr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: .85rem 1rem !important;
    border-bottom: 1px solid var(--border) !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--surface) !important;
    z-index: 1 !important;
  }
}

/* FIX 4: Hide embed placeholder text entirely */
.comment-embed-placeholder {
  display: none !important;
}

/* FIX 5: Rating stars — hover + click working states */
.star {
  cursor: pointer !important;
  font-size: 1.35rem !important;
  color: var(--border) !important;
  transition: color .12s, transform .12s !important;
  user-select: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  display: inline-block !important;
}
.star.on,
.star.hv {
  color: #F59E0B !important;
  transform: scale(1.18) !important;
}
.stars.rated .star {
  cursor: default !important;
  pointer-events: none !important;
}
.rt-rated-msg {
  font-size: .74rem !important;
  color: var(--green, #16A34A) !important;
  font-weight: 600 !important;
  display: block !important;
  margin-top: .25rem !important;
}

/* ═══════════════════════════════════════════════
   v8.5 — 4 Critical Mobile Fixes (FINAL AUTHORITY BLOCK)
   These rules use maximum specificity and !important to
   override all earlier conflicting/stale mob-menu rules.
   ═══════════════════════════════════════════════ */

/* FIX 1: Mobile bento dropdown — clean 2-col grid, flush below header */
@media (max-width: 768px) {
  #mobOv.mob-ov {
    position: fixed !important;
    inset: 0 !important;
    background: transparent !important;
    z-index: 900 !important;
    pointer-events: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: hidden !important;
  }
  #mobOv.mob-ov.show {
    visibility: visible !important;
    pointer-events: none !important;
  }

  #mobOv .mob-menu {
    position: absolute !important;
    top: 60px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: 420px !important;
    margin-left: auto !important;
    max-height: 76vh !important;
    overflow-y: auto !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 48px rgba(0,0,0,.2) !important;
    padding: .6rem !important;
    transform: scale(.95) translateY(-10px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s !important;
    z-index: 901 !important;
  }
  #mobOv.mob-ov.show .mob-menu,
  #mobOv .mob-menu.show {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }

  #mobOv .mob-mhdr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: .55rem .6rem .65rem !important;
    margin-bottom: .4rem !important;
    border-bottom: 1px solid var(--border) !important;
  }
  #mobOv .mob-mtitle {
    font-size: .92rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
  }
  #mobOv .mob-mclose {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    border: none !important;
    background: var(--bg) !important;
    color: var(--muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  #mobOv .mob-cat-hd {
    grid-column: 1 / -1 !important;
    font-size: .66rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--muted2) !important;
    padding: .55rem .35rem .3rem !important;
  }

  /* Grid container holding each category's links — direct sibling grouping via CSS grid on the menu itself */
  #mobOv .mob-menu {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .4rem !important;
    align-content: start !important;
  }
  #mobOv .mob-mhdr {
    grid-column: 1 / -1 !important;
  }

  /* Each tool link = a tight card with icon + text inline, side-by-side */
  #mobOv .mob-tlink {
    display: flex !important;
    align-items: center !important;
    gap: .45rem !important;
    padding: .55rem .5rem !important;
    border-radius: 10px !important;
    background: var(--bg) !important;
    text-decoration: none !important;
    transition: background .15s !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  #mobOv .mob-tlink:active,
  #mobOv .mob-tlink:hover {
    background: var(--blue-l) !important;
  }
  #mobOv .mob-ic {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .8rem !important;
    flex-shrink: 0 !important;
  }
  #mobOv .mob-nm {
    font-size: .76rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.25 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* FIX 2: Mobile header search dropdown — sits flush under header row */
#navMobSrchDd {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.15) !important;
  z-index: 950 !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  display: none !important;
}
#navMobSrchDd.open {
  display: block !important;
}
/* Hide the home hero search dropdown while the header one is in use, to prevent double-result clutter */
body.mob-header-search-active #heroSrchDd {
  display: none !important;
}

/* FIX 4: Comment module placeholder — restored, visible, premium card */
.comment-module-placeholder {
  max-width: var(--max-inner, 880px);
  margin: 0 auto var(--gap, 32px);
  width: 100%;
  box-sizing: border-box;
}
.comment-module-placeholder .cmp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 14px);
  padding: 1.75rem 1.5rem;
  text-align: center;
}
.comment-module-placeholder .cmp-icon {
  font-size: 1.6rem;
  margin-bottom: .5rem;
}
.comment-module-placeholder .cmp-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .3rem;
}
.comment-module-placeholder .cmp-sub {
  font-size: .8rem;
  color: var(--muted2);
}

/* ═══════════════════════════════════════════════
   v8.6 — Functional Comment Form + Global Rating Sync
   ═══════════════════════════════════════════════ */

/* FIX 1: Real comment form — 880px bound, premium card */
.comment-form-block {
  max-width: var(--max-inner, 880px);
  margin: 0 auto var(--gap, 32px);
  width: 100%;
  box-sizing: border-box;
}
.comment-form-block .cfb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r, 14px);
  padding: 1.75rem 1.6rem;
}
.cfb-hdr {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.1rem;
}
.cfb-hdr-icon { font-size: 1.25rem; }
.cfb-hdr-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.cfb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin-bottom: .65rem;
}
.cfb-input,
.cfb-textarea {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: .65rem .85rem;
  font-size: .85rem;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.cfb-input:focus,
.cfb-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,136,229,.12);
}
.cfb-textarea {
  resize: vertical;
  min-height: 96px;
  margin-bottom: .9rem;
  line-height: 1.55;
}
.cfb-foot {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.cfb-submit {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: .68rem 1.4rem;
  font-size: .86rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, transform .1s;
  min-height: 44px;
}
.cfb-submit:hover { background: var(--blue-d); }
.cfb-submit:active { transform: scale(.97); }
.cfb-submit:disabled { opacity: .6; cursor: default; }
.cfb-ok {
  font-size: .8rem;
  color: var(--green, #16A34A);
  font-weight: 600;
  display: none;
  align-items: center;
  gap: .3rem;
}
.cfb-ok.show { display: flex; }
.cfb-list { margin-top: 1.1rem; }
.cfb-comment-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin-bottom: .6rem;
}
.cfb-comment-card:last-child { margin-bottom: 0; }
.ccc-hdr {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .3rem;
}
.ccc-name { font-size: .82rem; font-weight: 700; color: var(--text); }
.ccc-date { font-size: .71rem; color: var(--muted2); margin-left: auto; }
.ccc-text { font-size: .82rem; color: var(--muted); line-height: 1.65; }
.cfb-empty {
  font-size: .8rem;
  color: var(--muted2);
  text-align: center;
  padding: 1rem;
  font-style: italic;
}
@media(max-width: 560px) {
  .cfb-row { grid-template-columns: 1fr; }
}

/* FIX 2: Rating sync status hint (subtle, optional) */
.rt-sync-note {
  font-size: .68rem;
  color: var(--muted2);
  margin-top: .15rem;
}

/* ═══════════════════════════════════════════════════════════════
   AUTHORITATIVE FAQ / ACCORDION RULES (single source of truth)
   Works for:
     1. Tool pages  — .faq-item / .faq-q / .faq-a  (via initFAQ in tools.js)
     2. Blog posts  — same classes, triggered by inline onclick
     3. Rich FAQ    — .rich-faq-item / .rich-faq-q / .rich-faq-a
   ═══════════════════════════════════════════════════════════════ */

/* Shared section wrapper */
.art-faq { margin-top: 2.5rem; }
.art-faq h2,
.rich-faq-sec h2 { font-size: 1.4rem; font-weight: 800; color: var(--text); margin-bottom: 1rem; }
.rich-faq-sec { margin-bottom: var(--gap); }

/* ── Base item card ── */
.faq-item,
.rich-faq-item {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  margin-bottom: .55rem;
  overflow: hidden;
  transition: border-color .18s;
}
.faq-item.open,
.rich-faq-item.open { border-color: var(--blue); }

/* ── Clickable question header ── */
.faq-q,
.rich-faq-q {
  padding: .9rem 1.1rem;
  font-weight: 600;
  font-size: .875rem;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  transition: background .15s;
  min-height: 48px;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
  position: relative;
}
.faq-q:hover,
.rich-faq-q:hover { background: var(--blue-l); }

/* CSS-only chevron — works even when there is no .faq-ic element in the HTML.
   Blog posts use plain text inside .faq-q with no child icon element. */
.faq-q::after,
.rich-faq-q::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A88E5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-q::after,
.rich-faq-item.open .rich-faq-q::after {
  transform: rotate(180deg);
}

/* Legacy .faq-ic element (tool pages use this inside .faq-q) */
.faq-ic,
.rich-faq-ic {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--border); display: flex; align-items: center;
  justify-content: center; font-size: .75rem; font-weight: 700;
  color: var(--muted); transition: all .22s; flex-shrink: 0;
  /* Hide the old +/x icon since ::after chevron now handles it */
  display: none;
}

/* ── Answer panel — max-height transition (works with inline onclick + JS) ── */
.faq-a,
.rich-faq-a {
  display: block;          /* MUST be block so max-height transition works */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 1.1rem;
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.78;
  transition: max-height .32s cubic-bezier(.4,0,.2,1),
              opacity .25s ease,
              padding .22s ease;
  box-sizing: border-box;
}

/* ── Open state — triggered by .open class on parent ── */
.faq-item.open .faq-a,
.rich-faq-item.open .rich-faq-a {
  max-height: 1000px;   /* large enough for any realistic answer */
  opacity: 1;
  padding: 0 1.1rem .9rem;
}