:root { --bg:#0b1020; --fg:#eef2ff; --muted:#94a3b8; --card:#0f172a; --accent:#22d3ee;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:56px}
@media (max-width:640px){ .brand img{height:48px} }
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px}
.card{background:var(--card);border:1px solid #1e293b;border-radius:16px;padding:18px;text-decoration:none;color:var(--fg);transition:transform .15s, border-color .15s}
.card:hover{transform:translateY(-2px);border-color:var(--accent)}
.badge{background:#0ea5b1;color:#001018;display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.footer{color:var(--muted);margin-top:40px;font-size:14px}
.drop{border:2px dashed #334155;border-radius:16px;padding:24px;text-align:center;background:#0b1228}
.progress{height:10px;background:#0f243d;border-radius:999px;overflow:hidden;margin-top:12px;box-shadow: inset 0 0 0 1px #153052}
.bar{height:10px;background:linear-gradient(90deg,#22d3ee,#818cf8);width:0%}
.hint{color:#a3b7d0;font-size:13px}
.btn{background:#1e293b;border:1px solid #334155;padding:10px 14px;border-radius:12px;cursor:pointer}
.input{background:#0f172a;border:1px solid #334155;border-radius:10px;color:var(--fg);padding:10px 12px;width:100%}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.small{font-size:12px;color:#9bb2cc}
.thumb{border:1px solid #1f2a3b;border-radius:10px;overflow:hidden;background:#0f172a}
.dragghost{opacity:.6}
label.inline{display:flex;align-items:center;gap:8px}
select, input[type=number]{background:#0f172a;border:1px solid #334155;border-radius:8px;color:var(--fg);padding:6px 8px}

.hero{padding:56px 0 36px;background:radial-gradient(1200px 500px at 20% -100px,rgba(34,211,238,.20),transparent 60%);}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 10px}
.hero p{color:#b7c6d9;font-size:18px;margin:0 0 20px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.btn.primary{background:linear-gradient(90deg,#22d3ee,#818cf8);border:0;color:#05141f;font-weight:800}
.search{display:flex;gap:10px;margin:22px 0}
.search input{flex:1}
.subtle{color:#97aabd}
.section{padding:28px 0}
.rowcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.headrow{display:flex;align-items:end;justify-content:space-between;margin-bottom:10px}
.kicker{font-size:12px;letter-spacing:.14em;color:#76e0f0;text-transform:uppercase}
.tool{background:var(--card);border:1px solid #1f2a3b;border-radius:16px;padding:16px;text-decoration:none;color:inherit}
.tool h3{margin:8px 0 6px;font-size:16px}
.tool .meta{font-size:12px;color:#9db0c6}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.proof{background:#0c1528;border:1px solid #17243a;border-radius:14px;padding:14px}
.seo{color:#a1b6cc;font-size:14px}
.footerlinks{display:flex;gap:14px;flex-wrap:wrap}
.badge.cat{background:#132538;border:1px solid #20405c;color:#bfe8ff}
@media (max-width:640px){.hero h1{font-size:30px}}

:root{
  --bg:#0a0f1f; --card:#0e152a; --glass:rgba(255,255,255,0.06);
  --stroke:#1c2746; --accent1:#22d3ee; --accent2:#818cf8; --accent3:#86efac;
}
*{box-sizing:border-box}
.header{position:sticky;top:0;backdrop-filter:saturate(150%) blur(10px);background:linear-gradient(180deg,rgba(10,15,31,.9),rgba(10,15,31,.6) 60%,transparent);z-index:30;border-bottom:1px solid rgba(255,255,255,.04)}
.brand img{height:60px}
@media (max-width:640px){ .brand img{height:52px} }

/* HERO */
.hero{position:relative;padding:80px 0 40px;isolation:isolate;overflow:hidden}
.hero:before,.hero:after{content:'';position:absolute;inset:auto;filter:blur(80px);z-index:-1}
.hero:before{width:42vw;height:42vw;left:-10vw;top:-12vw;background:radial-gradient(closest-side,rgba(34,211,238,.22),transparent)}
.hero:after{width:42vw;height:42vw;right:-10vw;top:-8vw;background:radial-gradient(closest-side,rgba(129,140,248,.18),transparent)}
.hero .panel{background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:22px;box-shadow:0 10px 40px rgba(2,6,23,.35) inset, 0 20px 60px rgba(2,6,23,.25)}
.hero h1{font-size:44px;margin:0 0 8px}
.hero p{color:#b9c8da;font-size:18px;margin:0 0 14px}
.tag{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(129,140,248,.14));border:1px solid rgba(146,163,201,.18);font-size:12px;color:#d5e8ff}
.btn.primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));border:0;color:#05141f;font-weight:800}
.btn.ghost{background:transparent;border:1px solid var(--stroke)}

.search{display:flex;gap:10px;margin:16px 0}
.search input{flex:1}

/* CATEGORY TABS */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.tab{padding:8px 12px;border:1px solid var(--stroke);border-radius:999px;cursor:pointer}
.tab.active{background:linear-gradient(90deg,rgba(34,211,238,.12),rgba(129,140,248,.12));border-color:#2a3b62}

/* TOOL GRID */
.rowcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tool{background:linear-gradient(180deg,var(--card),#0b1226);border:1px solid var(--stroke);border-radius:16px;padding:16px;text-decoration:none;color:inherit;transition:transform .15s ease, box-shadow .15s ease,border-color .2s}
.tool:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(2,6,23,.45);border-color:#30426b}
.tool .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(129,140,248,.10));border:1px solid rgba(255,255,255,.06)}
.tool h3{margin:10px 0 6px;font-size:16px}
.tool .meta{font-size:12px;color:#9db0c6}

/* TRUST + CTA BAND */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.proof{background:#0c1528;border:1px solid #17243a;border-radius:14px;padding:16px}
.ctaband{margin:28px 0;background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(129,140,248,.14));border:1px solid rgba(146,163,201,.18);border-radius:18px;padding:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* FOOTER */
.footergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.footer a{color:#c9daff}

/* === PDFnara Global Dropzone (v4.6.2) === */
.dropwrap{margin:18px 0}
.dropzone{
  position:relative; border:2px dashed rgba(191,232,255,.6); border-radius:18px;
  background:linear-gradient(180deg, rgba(34,211,238,.10), rgba(129,140,248,.10));
  padding:34px 20px; text-align:center; transition:box-shadow .2s,border-color .2s, transform .12s ease-in-out;
  outline:none; cursor:pointer;
}
.dropzone:hover{box-shadow:0 10px 24px rgba(2,6,23,.35); border-color:#86c8ff}
.dropzone.dragover{transform:translateY(-2px); border-color:#bfe8ff; background:linear-gradient(180deg, rgba(34,211,238,.16), rgba(129,140,248,.14))}
.dropzone .dz-icon{width:58px; height:58px; border-radius:16px; margin:0 auto 10px;
  display:grid; place-items:center; color:#e6f6ff;
  background:linear-gradient(135deg, rgba(34,211,238,.28), rgba(129,140,248,.22)); border:1px solid rgba(255,255,255,.12);
}
.dropzone h2{font-size:26px; margin:6px 0 4px}
.dropzone p{color:#bfd7ee; margin:0 0 12px}
.dropzone .dz-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.dropzone .hint{color:#9db0c6; font-size:12px}
.input.hiddenfile{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);}
/* mobile */
@media (max-width:640px){
  .dropzone{padding:26px 14px}
  .dropzone h2{font-size:20px}
}

/* === PDFnara v4.6.3: File list under dropzone === */
.afterdrop{margin-top:14px}
.filelist{
  display:flex; flex-direction:column; gap:10px; margin:10px 0 12px;
}
.filecard{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-radius:14px;
  background:linear-gradient(180deg, #0e172a, #0b1226);
  border:1px solid #1f2a3b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
}
.filemeta{display:flex; align-items:center; gap:10px}
.fileicon{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(34,211,238,.16), rgba(129,140,248,.12));
  border:1px solid rgba(255,255,255,.08);
  color:#def3ff;
}
.filename{font-weight:600}
.filesize{font-size:12px; color:#9db0c6}
.fileact{display:flex; align-items:center; gap:8px}
.fileact .remove{border:1px solid #25314a; background:#0c1528; border-radius:10px; padding:6px 10px; cursor:pointer}
.actionrow{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.actionrow .btn.primary{min-width:160px}
.count{color:#9db0c6; font-size:12px}

/* === PDFnara v4.6.4: Unified placement for progress & results under dropzone === */
.hide-native-file input[type=file]{display:none !important}
/* Progress */
.progresswrap{margin:14px 0 8px}
.progressbar{height:10px;border-radius:8px;background:#0e1a2b;border:1px solid #1a2a45;overflow:hidden}
.progressbar span{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#22d3ee,#818cf8);transition:width .2s ease}
/* Results */
.results{display:flex;flex-direction:column;gap:8px;margin:8px 0 0}
.result-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  background:linear-gradient(180deg,#0e172a,#0b1226);border:1px solid #1f2a3b}
.result-item a{color:#bfe8ff;text-decoration:underline}
.result-item .meta{font-size:12px;color:#9db0c6}

/* === v4.6.4b: hide legacy progress/downloads above tools to avoid duplicates === */
:not(.afterdrop) > #progressbar,
:not(.afterdrop) > .progress-bar,
:not(.afterdrop) > .progress,
:not(.afterdrop) > #progress,
:not(.afterdrop) .download,
:not(.afterdrop) .downloads,
:not(.afterdrop) .result-links { display:none !important; }

/* === v4.6.4c: hide legacy Convert buttons outside afterdrop === */
button._legacy-hidden, ._legacy-hidden { display:none !important; visibility:hidden !important; }

/* === PDFnara v4.6.4c (rev2): layout tweeks + thumbnails + error badge === */
/* Dropzone block spacing */
.dropwrap{margin:22px 0}
.afterdrop{margin-top:16px}
.actionrow{margin-top:8px; gap:12px}
.actionrow .btn.primary{min-width:180px}
.progresswrap{margin:14px 0}
.results{margin-top:10px}
/* File/result cards */
.filecard,.result-item{border-radius:14px; padding:12px 14px}
.result-item .thumb{width:42px;height:42px;border-radius:10px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(34,211,238,.14), rgba(129,140,248,.12)); border:1px solid rgba(255,255,255,.08)}
.result-item .thumb img{max-width:100%;max-height:100%;display:block}
.result-item .name{font-weight:700}
.result-item .meta{font-size:12px;color:#9db0c6}
.result-item .badge{display:inline-block;border-radius:999px;padding:3px 8px;font-size:11px;margin-left:8px;border:1px solid}
.badge.ok{color:#86efac;border-color:#1f3d2b;background:rgba(134,239,172,.08)}
.badge.err{color:#fca5a5;border-color:#4b1f28;background:rgba(252,165,165,.10)}
/* Mobile spacing */
@media (max-width:640px){
  .dropwrap{margin:18px 0}
  .actionrow{gap:10px}
  .actionrow .btn.primary{min-width:140px}
  .results{margin-top:8px}
}

/* === PDFnara v4.6.5: Mobile polish for dropzone + cards === */
@media (max-width: 480px){
  .dropzone{ padding:22px 14px; border-radius:16px }
  .dropzone h2{ font-size:20px; line-height:1.25 }
  .dropzone p{ font-size:14px }
  .dz-actions{ gap:8px }
  .dz-actions .btn.primary{ width:100%; min-width:0 }
  .afterdrop{ margin-top:12px }
  .filelist{ gap:8px }
  .filecard,.result-item{ padding:10px 12px; border-radius:12px }
  .filename, .result-item .name{ 
    max-width: 70vw; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    display:inline-block; 
    vertical-align:bottom;
  }
  .filesize{ font-size:11px }
  .result-item .thumb{ width:38px; height:38px }
  .actionrow{ flex-direction:column; align-items:stretch; gap:8px }
  .actionrow .count{ order:0 }
  .actionrow .btn.primary{ order:1 }
  .progresswrap{ margin:10px 0 }
  /* guard: any floating .pill/search chips shouldn't overlay buttons on small screens */
  .hero .pill, .hero .search, .search-pill, .search-chip{ z-index:1 }
  .hero .btn, .dz-actions .btn{ z-index:2; position:relative }
}
/* prevent unexpected horizontal scroll on small screens */
html, body{ overflow-x:hidden }

/* === PDFnara v4.6.6: Header logo sizing === */
.header{ padding:10px 0 }
.header .brand a{ display:inline-flex; align-items:center; line-height:1 }
.header .brand img{ max-height:28px; height:auto; width:auto; object-fit:contain }
@media (min-width:768px){
  .header .brand img{ max-height:32px }
}

/* === PDFnara v4.7: Global header nav + mobile menu + footer === */
.header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0}
.header .brand{display:flex; align-items:center; gap:10px}
.nav{display:flex; align-items:center; gap:18px}
.nav a{color:#dbeafe; font-weight:600}
.menu{display:flex; gap:16px; align-items:center}
.menu > li{position:relative; list-style:none}
.menu > li > a{padding:8px 6px; border-radius:10px}
.menu > li:hover > a{background:rgba(148,163,184,.12)}
.sub{position:absolute; top:100%; left:0; min-width:200px; background:#0b1226; border:1px solid #1f2a3b; border-radius:12px; padding:8px; display:none; box-shadow:0 12px 24px rgba(2,6,23,.45); z-index:20}
.menu > li:hover .sub{display:block}
.sub a{display:block; padding:8px 10px; border-radius:8px; color:#cfe8ff}
.sub a:hover{background:rgba(148,163,184,.12)}
/* Mobile */
.hamb{display:none; width:42px; height:42px; border-radius:12px; border:1px solid #1f2a3b; background:#0c1528; color:#cfe8ff; display:grid; place-items:center}
.mnav{display:none}
.mnav.open{display:block}
.mlist{margin-top:10px; border:1px solid #1f2a3b; background:#0b1226; border-radius:14px; padding:8px}
.mitem{border-bottom:1px solid rgba(255,255,255,.06)}
.mitem:last-child{border-bottom:none}
.mitem summary{cursor:pointer; padding:10px 12px; font-weight:700; list-style:none}
.mitem summary::-webkit-details-marker{display:none}
.mitem a{display:block; padding:8px 14px}
/* Footer */
.site-footer{margin-top:40px; padding:24px 0; border-top:1px solid #1f2a3b; color:#9db0c6; font-size:14px}
.site-footer .frow{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.site-footer a{color:#cfe8ff; margin-right:14px}
/* Responsive */
@media (max-width: 900px){
  .nav .menu{display:none}
  .hamb{display:grid}
  .site-footer{font-size:13px}
}