/* public/style.css — PDFOperations (v33 - WIDE OPEN TOOL-FIRST + “NOT CRAMPED” + PREMIUM RHYTHM)
   ✅ Matches index.html v33 tool-first layout (toolHead/trustBar/toolMega/etc.)
   ✅ Keeps ALL existing IDs/classes used by index.html + app.js + modal + success/share pages
   ✅ Backwards compatible: .modeOption still works
   ✅ Fixes “cramped/amateur” feel via spacing rhythm, bigger max-width, cleaner type scale
   ✅ No JS changes required
*/

/* =========================
   TOKENS
========================= */
:root{
  /* Neutrals */
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel2: #fbfcfe;

  --ink: #0b1220;
  --muted: rgba(11,18,32,.74);
  --muted2: rgba(11,18,32,.58);

  --border: rgba(15,23,42,.10);
  --border2: rgba(15,23,42,.16);

  /* Accent (quiet teal) */
  --accent: #0ea5a4;
  --accent2: #0f766e;
  --ring: rgba(14,165,164,.22);

  /* Radii */
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;

  /* Shadows */
  --shadow-0: 0 1px 0 rgba(2,6,23,.05);
  --shadow-1: 0 10px 28px rgba(2,6,23,.10);
  --shadow-2: 0 22px 64px rgba(2,6,23,.14);
  --shadow-3: 0 45px 140px rgba(2,6,23,.20);

  /* Wider container */
  --container: 1240px;

  --ease: cubic-bezier(.2,.8,.2,1);

  /* Nav */
  --navBgA: rgba(11,18,32,.96);
  --navBgB: rgba(11,18,32,.86);
  --navInk: rgba(255,255,255,.92);
  --navInkMuted: rgba(255,255,255,.68);
  --navHover: rgba(255,255,255,.10);
  --navBorder: rgba(255,255,255,.10);

  /* Background glow */
  --glowA: rgba(14,165,164,.08);
  --glowB: rgba(2,132,199,.06);
  --glowC: rgba(2,6,23,.03);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 18% 10%, var(--glowA), transparent 60%),
    radial-gradient(900px 560px at 86% 16%, var(--glowB), transparent 62%),
    radial-gradient(900px 520px at 50% 92%, var(--glowC), transparent 62%),
    linear-gradient(180deg, #f7f9fd 0%, #f4f6fb 45%, #f5f7fb 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.premium{}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
a:hover{ opacity:.92; }
p{ margin:0; }
strong,b{ font-weight: 800; }

.container{
  width: min(var(--container), calc(100% - 44px));
  margin: 0 auto;
}
.container.narrow{
  width: min(900px, calc(100% - 44px));
}

:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 12px;
}

.srOnly{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* =========================
   NAV
========================= */
.nav{
  position: sticky;
  top:0;
  z-index: 30;
  background: linear-gradient(180deg, var(--navBgA), var(--navBgB));
  border-bottom: 1px solid var(--navBorder);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.18), rgba(255,255,255,.05));
  opacity: .9;
}
.navInner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--navInk);
}
.brand span{ font-size: 14px; }
.brand img{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.22));
}

.navLinks{
  display:flex;
  align-items:center;
  gap: 18px;
  color: var(--navInkMuted);
  font-size: 13px;
}
.navLinks a{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0);
  transition: transform .12s var(--ease), background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), opacity .16s var(--ease);
  color: var(--navInkMuted);
}
.navLinks a:hover{
  background: var(--navHover);
  border-color: rgba(255,255,255,.14);
  color: var(--navInk);
  opacity: 1;
  transform: translateY(-1px);
}
.navCta{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}
.navCta:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

@media (max-width: 860px){
  .navLinks{ display:none; }
}

/* =========================
   HERO (TOOL-FIRST, WIDE OPEN)
========================= */
.hero{
  position: relative;
  padding: 28px 0 18px;
}

/* v33: container wrapper for tool-first layout */
.heroWide{
  display:block;
}

/* Preserve legacy hooks */
.heroPremium{}
.heroToolFirst{}

/* Legacy heroInner/heroText safe defaults (older pages might still use them) */
.heroInner{
  position: relative;
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items:start;
  justify-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.heroInner::before{ display:none; }

.heroText{
  position: relative;
  z-index: 2;
  justify-self: center;
  width: 100%;
  max-width: 78ch;
  padding: 0;
  text-align: center;
}

.hero h1{
  margin: 0;
  font-size: clamp(34px, 4.2vw, 62px);
  letter-spacing: -0.07em;
  line-height: 1.02;
  font-weight: 950;
}

.heroSub{
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(11,18,32,.70);
}

.heroMeta{
  margin: 14px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: rgba(11,18,32,.56);
  line-height: 1.55;
}

/* legacy chip UI neutralised */
.heroChips,
.heroMetaRow,
.chip,
.metaPill{ display:none !important; }

/* =========================
   TOOL (DOMINANT, WIDE, CENTERED)
========================= */
.tool{
  text-align: left;
  border-radius: 22px;
  padding: 18px;
  position: relative;
  overflow:hidden;
  z-index: 2;

  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90));
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: var(--shadow-3);

  width: 100%;
  max-width: 1060px; /* ✅ wider than before = “not cramped” */
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
}

.tool::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(740px 220px at 18% 0%, rgba(14,165,164,.08), transparent 62%),
    radial-gradient(680px 240px at 92% 8%, rgba(2,132,199,.06), transparent 62%);
  opacity:.85;
}
.tool::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.60) inset;
  opacity:.9;
}
.tool > *{ position: relative; z-index: 1; }

/* premium hooks (kept) */
.toolPremium{}
.toolMega{ padding: 18px; }
.dropzonePremium{}
.actionRowPremium{}
.modeRowPremium{}
.convertRowPremium{}
.dropzoneUltra{}
.footerPremium{}
.premiumModal{}

/* =========================
   TOOL HEAD (v33)
========================= */
.toolHead{
  padding: 6px 4px 14px;
  text-align: center;
}

/* =========================
   TOOL HEAD — MINIMAL (v34)
========================= */
.toolHeadMinimal{
  padding: 4px 0 6px;
  text-align: center;
}

.toolHeadMinimal .toolTitle{
  margin: 0;
  font-size: clamp(26px, 2.8vw, 40px);
  letter-spacing: -0.05em;
  line-height: 1.05;
  font-weight: 950;
}

.toolKicker{
  display:inline-block;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,18,32,.62);
  background: rgba(2,6,23,.03);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  padding: 8px 10px;
}

.toolTitle{
  margin: 14px 0 0;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.06em;
  line-height: 1.05;
  font-weight: 950;
}

.toolSub{
  margin: 10px auto 0;
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(11,18,32,.72);
}

.trustBar{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 10px;
}

.trustPill{
  font-size: 12px;
  font-weight: 950;
  color: rgba(11,18,32,.70);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.80);
  border-radius: 999px;
  padding: 9px 12px;
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
}

/* =========================
   STATUS
========================= */
.statusWrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;

  margin: 6px 0 10px;
  padding: 10px 12px;

  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.70);
}

.statusLeft{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 140px;
}

.status{
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

.statusHint{
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(11,18,32,.58);
  font-size: 12px;
  line-height: 1.40;
  text-align: right;
}

.spinner{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.14);
  border-top-color: rgba(11,18,32,.78);
  display:none;
  animation: spin .8s linear infinite;
}
.spinner.isOn{ display:inline-block; }
@keyframes spin{ to { transform: rotate(360deg); } }

/* =========================
   MODE SELECTOR (SEGMENTED)
========================= */
.modeRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.66);
  margin: 12px 0 10px 0;
}

.modeTabs{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}

.modeTabsWide{
  /* v33: sits nicer under toolHead */
  margin-top: 4px;
}

.modeTab{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width: 0;

  border: 0;
  border-right: 1px solid rgba(15,23,42,.10);
  background: transparent;
  box-shadow: none;
  overflow:hidden;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.modeTab:last-of-type{ border-right: 0; }

.modeTab span{
  padding: 13px 10px;
  font-weight: 950;
  color: rgba(11,18,32,.74);
  white-space: nowrap;
  font-size: 12.5px;
  letter-spacing: -0.01em;
}

.modeTab input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.modeTab:hover{
  background: rgba(2,6,23,.03);
}

.modeTab:has(input:checked){
  background: rgba(14,165,164,.12);
}
.modeTab:has(input:checked) span{
  color: rgba(11,18,32,.94);
}

.modeTab:focus-within{
  outline: 3px solid var(--ring);
  outline-offset: -3px;
}

@media (max-width: 920px){
  .modeTabs{ grid-template-columns: 1fr 1fr; }
  .modeTab{
    border-right: 1px solid rgba(15,23,42,.10);
    border-bottom: 1px solid rgba(15,23,42,.10);
  }
  .modeTab:nth-child(2n){ border-right: 0; }
  .modeTab:nth-last-child(-n+2){ border-bottom: 0; }
}

/* Back-compat modeOption */
.modeOption{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  box-shadow: none;
  overflow:hidden;
  transition: background .14s var(--ease), border-color .16s var(--ease);
}
.modeOption span{
  padding: 10px 14px;
  font-weight: 950;
  color: rgba(11,18,32,.74);
  white-space: nowrap;
  font-size: 13px;
}
.modeOption input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.modeOption:hover{
  border-color: rgba(15,23,42,.18);
  background: rgba(2,6,23,.02);
}
.modeOption:has(input:checked){
  border-color: rgba(14,165,164,.30);
  background: rgba(14,165,164,.12);
}

/* =========================
   CONTROLS ROWS
========================= */
.convertRow{
  width:100%;
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(2,6,23,.06);
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.convertRowFull{
  /* v33: gives the controls a full-row identity */
}

/* =========================
   COMPRESS PDF — PRESETS (compress-pdf.html)
========================= */
.presetRow{
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(2,6,23,.06);
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.presetLabel{
  font-size: 12px;
  font-weight: 950;
  color: rgba(11,18,32,.68);
  letter-spacing: -0.01em;
}

.presetButtons{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.presetBtn{
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  color: rgba(11,18,32,.78);
  transition: transform .10s var(--ease), background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), opacity .16s var(--ease);
}

.presetBtn:hover{
  border-color: rgba(15,23,42,.18);
  background: rgba(2,6,23,.02);
  box-shadow: 0 14px 34px rgba(2,6,23,.08);
}

.presetBtn.isActive,
.presetBtn[aria-pressed="true"]{
  border-color: rgba(14,165,164,.34);
  background: rgba(14,165,164,.12);
  box-shadow: 0 18px 52px rgba(14,165,164,.10);
  color: rgba(11,18,32,.92);
}

@media (max-width: 720px){
  .presetButtons{ width: 100%; margin-left: 0; }
  .presetBtn{ flex: 1 1 auto; text-align: center; }
}

.convertGroup{ min-width: 160px; }
.convertGroupWide{ min-width: 280px; }

.convertLabel{
  font-size: 12px;
  font-weight: 950;
  color: rgba(11,18,32,.68);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.convertArrow{
  font-weight: 950;
  color: rgba(11,18,32,.62);
}

.convertRow select{
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  color: rgba(11,18,32,.88);
  font-weight: 900;
  outline: none;
  box-shadow: 0 10px 20px rgba(2,6,23,.06);
}
.convertRow select:focus{
  border-color: rgba(14,165,164,.40);
  box-shadow: 0 0 0 4px rgba(14,165,164,.16), 0 10px 24px rgba(2,6,23,.08);
}

.convertHint{
  margin-left:auto;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: rgba(11,18,32,.58);
}

/* =========================
   COMPRESSOR PRESETS (Target size buttons)
   Used by: compress-pdf.html v2
========================= */
.presetRow{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(2,6,23,.06);
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.presetLabel{
  font-size: 12px;
  font-weight: 950;
  color: rgba(11,18,32,.68);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.presetButtons{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  margin-left: auto;
}

.presetBtn{
  appearance:none;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.96);
  color: rgba(11,18,32,.86);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: -0.01em;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  transition: transform .10s var(--ease), background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.presetBtn:hover{
  border-color: rgba(15,23,42,.18);
  background: rgba(2,6,23,.02);
  box-shadow: 0 16px 34px rgba(2,6,23,.08);
}

.presetBtn:active{
  transform: translateY(1px);
}

/* Optional “selected” styling (we’ll toggle this in app.js later).
   Safe to include now even if unused. */
.presetBtn.isActive{
  border-color: rgba(14,165,164,.30);
  background: rgba(14,165,164,.12);
  box-shadow: 0 18px 52px rgba(14,165,164,.10);
}

@media (max-width: 720px){
  .presetButtons{ margin-left: 0; }
  .presetBtn{ width: 100%; text-align: center; }
}

/* =========================
   DROPZONE
========================= */
.dropzone{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  padding: 28px 22px;
  overflow:hidden;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .10s var(--ease);
  box-shadow: 0 22px 64px rgba(2,6,23,.10);
  margin-top: 14px;
}

.dropzoneMega{
  /* v33: a touch more room */
  padding: 30px 22px;
}

.dropzone::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(820px 220px at 50% 0%, rgba(14,165,164,.10), transparent 64%);
  opacity:.80;
}

.dropzone:hover{
  border-color: rgba(15,23,42,.18);
  box-shadow: 0 28px 78px rgba(2,6,23,.12);
}

.dropzone.isDrag{
  border-color: rgba(14,165,164,.40);
  box-shadow: 0 18px 56px rgba(14,165,164,.10), 0 28px 78px rgba(2,6,23,.12);
  transform: translateY(-1px);
}

.dzCenter{
  position: relative;
  display:grid;
  place-items:center;
  text-align:center;
  gap: 6px;
  padding: 12px 10px 6px;
}

.dzIcon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  margin-bottom: 4px;

  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 28px rgba(2,6,23,.10);
}

.dzArrow{
  font-size: 18px;
  font-weight: 950;
  color: rgba(11,18,32,.92);
  line-height: 1;
}

.dzTitle{
  font-weight: 950;
  letter-spacing:-0.02em;
  font-size: 16px;
}

.dzSub{
  color: rgba(11,18,32,.58);
  font-size: 13px;
  margin-bottom: 10px;
}

.dzFine{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(11,18,32,.56);
}

/* =========================
   MOBILE-SAFE FILE PICKER
========================= */
.filePick{
  position: relative;
  display: inline-block;
}
.filePick #files{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;
}
.filePick #chooseBtn{
  position: relative;
  z-index: 1;
}

/* =========================
   FILE META / LIST
========================= */
.fileMeta{
  position: relative;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
}

.fileMetaTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.fileSummary{
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(11,18,32,.66);
  font-size: 12px;
}

.fileList{
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.fileList li{ margin:0; padding:0; }

.fileCard{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;

  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  transition: transform .12s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.fileCard:hover{
  border-color: rgba(15,23,42,.16);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(2,6,23,.08);
}

.thumb{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.96);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex: 0 0 42px;
}
.thumbImg{ width:100%; height:100%; object-fit: cover; }
.thumbPdf{
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  color: rgba(11,18,32,.70);
}

.fileInfo{ min-width: 0; flex: 1 1 auto; }

.fileName{
  font-weight: 950;
  font-size: 13px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.fileMetaLine{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(11,18,32,.60);
}

.iconBtn{
  background: transparent;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: none;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 950;
  font-size: 12px;
  color: rgba(11,18,32,.68);
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .10s var(--ease);
}
.iconBtn:hover{
  background: rgba(2,6,23,.04);
  border-color: rgba(15,23,42,.18);
}
.iconBtn:active{ transform: translateY(1px); }

/* =========================
   BUTTONS
========================= */
button{
  appearance:none;
  border: 1px solid rgba(15,23,42,.14);
  background:#fff;
  color: var(--ink);
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 950;
  letter-spacing: -0.01em;
  cursor:pointer;
  transition: transform .10s var(--ease), background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), opacity .16s var(--ease);
  box-shadow: var(--shadow-0);
}
button:hover{ border-color: rgba(15,23,42,.22); box-shadow: var(--shadow-1); }
button:active{ transform: translateY(1px); }
button:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; transform: none; }

.btnPrimary{
  position: relative;
  background: linear-gradient(180deg, #0b1220, #0b1220);
  border-color: rgba(2,6,23,.82);
  color:#fff;
  box-shadow: 0 14px 40px rgba(2,6,23,.18);
}
.btnPrimary::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: radial-gradient(420px 140px at 18% 0%, rgba(14,165,164,.14), transparent 62%);
  opacity: .70;
  pointer-events:none;
}
.btnPrimary:hover{ box-shadow: 0 18px 56px rgba(2,6,23,.22); }

.btnStrong{
  background: #0b1220;
  border-color: rgba(2,6,23,.92);
}

.btnLarge{ padding: 12px 16px; border-radius: 16px; }

.btnSoft{
  background: rgba(2,6,23,.04);
  border-color: rgba(2,6,23,.12);
  color: rgba(11,18,32,.94);
  box-shadow: none;
}
.btnSoft:hover{ background: rgba(2,6,23,.06); }

.btnGhost{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px 10px;
  color: rgba(11,18,32,.62);
}
.btnGhost:hover{
  background: rgba(2,6,23,.04);
  border-radius: 12px;
}

/* v33: action row spacing */
.actionRow{
  display:flex;
  gap: 12px;
  margin-top: 16px;
}
.actionRowWide{
  margin-top: 16px;
}
.actionRow button{ flex: 1; }

.fineprint{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(11,18,32,.58);
  text-align: center;
}

/* =========================
   PROGRESS
========================= */
.progressWrap{
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  border-radius: 16px;
}
.progressTop{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 900;
}
.progressBar{
  height: 10px;
  border-radius: 999px;
  background: rgba(2, 6, 23, .07);
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.10);
}
.progressFill{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: #0b1220;
  transition: width .16s var(--ease);
}
#progressMeta{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(11,18,32,.55);
}

/* =========================
   SECTIONS (How + FAQ) — kept for other pages
========================= */
/* =========================
   SUPPORT SECTIONS (How + FAQ) — PROFESSIONAL CARD (HOME)
========================= */
.sectionSupport{
  padding: 34px 0 0;
}

.supportCard{
  max-width: 1060px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: 0 22px 70px rgba(2,6,23,.10);
  overflow: hidden;
  position: relative;
}

.supportCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(900px 240px at 20% 0%, rgba(14,165,164,.08), transparent 62%);
  opacity:.9;
}

.supportHead{
  position: relative;
  z-index: 1;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.supportHead h2{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.03em;
  font-weight: 950;
}

.supportSub{
  margin-top: 8px;
  color: rgba(11,18,32,.66);
  font-size: 13px;
  line-height: 1.6;
  max-width: 78ch;
}

.supportGrid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  padding: 14px 18px 18px;
}

.supportStep{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 14px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
}

.stepNum{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(11,18,32,.92);
  background: rgba(14,165,164,.12);
  border: 1px solid rgba(14,165,164,.22);
  flex: 0 0 32px;
}

.stepTitle{
  font-weight: 950;
  letter-spacing: -0.01em;
  font-size: 13px;
}

.stepText{
  margin-top: 5px;
  color: rgba(11,18,32,.68);
  font-size: 13px;
  line-height: 1.55;
}

.faqPro{
  position: relative;
  z-index: 1;
  padding: 10px 18px 18px;
  display:grid;
  gap: 10px;
}

.faqItemPro{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.94);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
  transition: transform .12s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.faqItemPro summary{
  cursor:pointer;
  font-weight: 950;
  list-style:none;
  letter-spacing: -0.01em;
}
.faqItemPro summary::-webkit-details-marker{ display:none; }

.faqItemPro[open]{
  border-color: rgba(14,165,164,.26);
  box-shadow: 0 22px 70px rgba(2,6,23,.10);
}

.faqBodyPro{
  margin-top: 10px;
  color: rgba(11,18,32,.70);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 900px){
  .supportGrid{ grid-template-columns: 1fr; }
}

.section{ padding: 56px 0 0; }

.sectionHead{
  text-align:center;
  max-width: 760px;
  margin: 0 auto 18px;
}
.sectionHead h2{
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.04em;
  font-weight: 950;
}
.sectionSub{
  margin: 0 auto;
  color: rgba(11,18,32,.66);
  line-height: 1.6;
  font-size: 14px;
}

.howGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.howCard{
  text-align:left;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: var(--shadow-0);
  transition: transform .12s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.howCard:hover{
  border-color: rgba(15,23,42,.16);
  box-shadow: 0 18px 54px rgba(2,6,23,.10);
  transform: translateY(-1px);
}
.howNum{
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 850;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,18,32,.55);
}
.howTitle{
  margin-top: 8px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(11,18,32,.92);
}
.howText{
  margin-top: 6px;
  color: rgba(11,18,32,.70);
  line-height: 1.6;
  font-size: 13px;
}

.faqList{ margin-top: 14px; }
.faqItem{
  text-align:left;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.94);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: var(--shadow-0);
  max-width: 720px;
  margin: 0 auto 10px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.faqItem summary{
  cursor:pointer;
  font-weight: 950;
  list-style:none;
  letter-spacing: -0.01em;
}
.faqItem summary::-webkit-details-marker{ display:none; }

.faqItem[open]{
  border-color: rgba(14,165,164,.26);
  box-shadow: 0 22px 70px rgba(2,6,23,.10);
  background: rgba(255,255,255,.98);
}
.faqBody{
  margin-top: 10px;
  color: rgba(11,18,32,.72);
  font-size: 13px;
  line-height: 1.55;
}

/* =========================
   FOOTER
========================= */
.footer{
  padding: 34px 0 46px;
  margin-top: 64px;
  border-top: 1px solid rgba(15,23,42,.08);
}
.footerPremium{
  background: rgba(255,255,255,.60);
  border-top: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.footerInner{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 14px;
  color: rgba(11,18,32,.58);
  font-size: 13px;
}
.footerLeft{ display:grid; gap: 8px; }
.footerBrand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(11,18,32,.86);
}
.footerBrand img{ opacity:.92; }
.footerNote{
  color: rgba(11,18,32,.60);
  line-height: 1.55;
  max-width: 52ch;
}

.footerRight{
  display:flex;
  align-items:center;
  gap: 14px;
}
.footerRight a{
  color: rgba(11,18,32,.58);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footerRight a:hover{ color: rgba(11,18,32,.78); opacity: 1; }

/* =========================
   PAGE SHELL (privacy/terms etc.)
========================= */
.pageShell{ padding: 46px 0 42px; }

.pageInner{
  position: relative;
  border-radius: var(--r-2xl);
  padding: 34px 28px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow:
    0 1px 0 rgba(255,255,255,.70) inset,
    var(--shadow-2);
  overflow:hidden;
}
.pageInner::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--r-2xl);
  pointer-events:none;
  background: radial-gradient(980px 240px at 30% 0%, rgba(14,165,164,.08), transparent 62%);
  opacity:.9;
}

.pageTitle{
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.055em;
  line-height: 1.06;
  font-weight: 950;
}
.pageLead{
  position: relative;
  z-index: 2;
  margin-top: 10px;
  color: rgba(11,18,32,.70);
  line-height: 1.6;
  max-width: 70ch;
}
.doc{
  position: relative;
  z-index: 2;
  margin-top: 18px;
  max-width: 78ch;
}
.doc h2{
  margin: 22px 0 10px;
  font-size: 15px;
  letter-spacing: -0.02em;
  font-weight: 950;
}
.doc p, .doc li{
  color: rgba(11,18,32,.78);
  line-height: 1.75;
  font-size: 14px;
}
.doc ul{ padding-left: 18px; margin: 10px 0 0; }
.doc .meta{
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: rgba(11,18,32,.55);
  margin-top: 10px;
}
#actionsRow{ display:grid; gap:10px; }

/* =========================
   PDF REORDER (merge mode UI)
========================= */
.pdfReorderWrap{
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,23,42,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pdfReorderHead{ margin-bottom: 14px; }
.pdfReorderTitle{ font-weight: 950; font-size: 15px; }
.pdfReorderSub{ font-size: 12px; color: rgba(11,18,32,.60); margin-top: 4px; }

.pdfThumbGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
  gap: 14px;
}

.pdfThumb{
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  cursor: grab;
  transition: transform .12s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease), opacity .16s var(--ease);
}
.pdfThumb:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15,23,42,.08);
  border-color: rgba(15,23,42,.14);
}
.pdfThumb.dragging{ opacity: .5; transform: scale(.98); }
.pdfThumb.over{ outline: 2px solid rgba(14,165,164,.30); }
.pdfThumb canvas{ width: 100%; display:block; }
.pdfThumbMeta{
  padding: 6px 8px;
  font-size: 11px;
  text-align:center;
  background: rgba(15,23,42,.03);
  color: rgba(11,18,32,.66);
}

/* =========================
   SUCCESS PAGE UI
========================= */
.successBox{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-0);
}

.successIcon{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  flex: 0 0 34px;
  font-weight: 950;
  color: rgba(255,255,255,.95);
  background: #0b1220;
  box-shadow: 0 18px 50px rgba(2,6,23,.16);
}

.successTitle{
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(11,18,32,.92);
  margin-top: 2px;
}

.successDesc{
  margin-top: 6px;
  color: rgba(11,18,32,.68);
  line-height: 1.55;
  font-size: 13px;
}

.successActions{
  display:grid;
  gap: 10px;
  margin-top: 14px;
}

.btnBlock{
  display:block;
  width: 100%;
  text-align:center;
}

.btnSm{
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12px;
}

/* Share box */
.shareBox{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.76);
  border-radius: 18px;
  padding: 12px;
}
.shareLabel{
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  color: rgba(11,18,32,.55);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.shareRow{
  display:flex;
  gap: 10px;
  align-items:center;
}
.shareInput{
  flex: 1 1 auto;
  min-width: 0;
  appearance:none;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.96);
  padding: 11px 12px;
  font-weight: 950;
  font-size: 13px;
  color: rgba(11,18,32,.86);
  box-shadow: 0 1px 0 rgba(255,255,255,.70) inset;
}
.shareHint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(11,18,32,.58);
  line-height: 1.45;
}
@media (max-width: 520px){
  .shareRow{ flex-direction: column; align-items: stretch; }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1100px){
  .tool{ max-width: 100%; }
}

@media (max-width: 860px){
  .howGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .hero{ padding: 34px 0 24px; }
  .tool{ padding: 14px; }
  .toolMega{ padding: 16px; }
  .dropzone{ padding: 20px 14px; }
  .actionRow{ flex-direction: column; }
  .footerInner{ flex-direction: column; }
  .statusHint{ text-align:left; }
  .convertHint{ width: 100%; margin-left: 0; }
  .trustBar{ gap: 8px; }
  .trustPill{ padding: 8px 10px; }
}

/* =========================
   MODAL — REQUIRED (kept intact)
========================= */
.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 9999;
  padding: 18px;
}
.modalOverlay.isOpen{ display:flex; }

.modalCard{
  width: min(660px, 100%);
  background: #fff;
  border: 1px solid rgba(2,6,23,.14);
  border-radius: 24px;
  box-shadow: 0 70px 200px rgba(2,6,23,.36);
  overflow: hidden;
  margin: 18px auto;
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  transform: translateY(10px);
  animation: modalIn .14s var(--ease) forwards;
}
@keyframes modalIn{ to { transform: translateY(0); } }

.modalTop{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(2,6,23,.08);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(2,6,23,.04), rgba(255,255,255,0));
}
.modalTitle{ font-weight: 950; letter-spacing: -0.02em; font-size: 14px; }

.modalClose{
  border: 1px solid rgba(2,6,23,.12);
  background: #fff;
  border-radius: 14px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 950;
  font-size: 12px;
  box-shadow: var(--shadow-0);
}
.modalClose:hover{ border-color: rgba(2,6,23,.20); }

.modalBody{
  padding: 14px 16px 6px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 36px - 60px - 72px);
}
.modalLead{ margin: 0; color: rgba(11,18,32,.86); font-size: 14px; line-height: 1.45; }

.modalSummary{
  margin-top: 12px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(2,6,23,.02);
  border-radius: 18px;
  padding: 12px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.modalSummaryKicker{
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 850;
  color: rgba(107,114,128,.98);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.modalSummaryMain{
  font-size: 14px;
  font-weight: 950;
  color: rgba(11,18,32,.95);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 420px;
}
.modalSummaryAmt{ font-size: 16px; font-weight: 950; white-space: nowrap; color: rgba(11,18,32,.95); }

.priceGrid{ display:grid; gap: 10px; margin-top: 12px; }
.priceRow{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(2,6,23,.02);
}
.priceRow.isChosen{
  border-color: rgba(14,165,164,.34);
  background: rgba(14,165,164,.10);
  box-shadow: 0 18px 52px rgba(14,165,164,.10);
}
.priceName{ font-weight: 950; font-size: 13px; }
.priceDesc{ font-size: 12px; color: rgba(75,85,99,.95); }
.priceAmt{ font-weight: 950; font-size: 13px; white-space: nowrap; }
.priceAmt label{ display:inline-flex; align-items:center; gap: 8px; font-weight: 950; cursor:pointer; }
.priceAmt input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--accent); }

.modalNote{ margin-top: 10px; font-size: 12px; color: rgba(107,114,128,.98); line-height: 1.45; }
.modalFoot{
  padding: 14px 16px;
  border-top: 1px solid rgba(2,6,23,.08);
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(2,6,23,.01);
}

@media (max-width: 520px){
  .modalOverlay{ padding: 12px; }
  .modalCard{ margin: 12px auto; max-height: calc(100vh - 24px); }
  .modalBody{ max-height: calc(100vh - 24px - 60px - 72px); }
}