:root{--crimson:#c81e3a;--crimson-dark:#9e1430;--ink:#1b2a4a;--soft:#5b6b84;--bg:#ffffff;--card:#ffffff;--border:#e6eaf2;--light:#fff5f6}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
a{color:var(--crimson)} header{border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:20}
.hwrap{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:19px;flex:none;white-space:nowrap}
.logo img{width:36px;height:36px} nav.mainnav{margin-left:auto;display:flex;gap:2px;flex-wrap:nowrap;align-items:center}
nav.mainnav a{color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:999px;font-weight:600;white-space:nowrap;font-size:15px}
nav.mainnav a:hover{background:var(--crimson);color:#fff}
.nav-drop{position:relative}
.nav-drop-btn{font:inherit;color:var(--ink);background:transparent;border:none;padding:8px 10px;border-radius:999px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:15px}
.nav-drop-btn:hover,.nav-drop.open .nav-drop-btn{background:var(--crimson);color:#fff}
.nav-drop-btn:focus-visible,.menu-card a:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.nav-drop-btn .caret{font-size:12px}
.menu-card{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 16px 40px rgba(27,42,74,.18);padding:20px 22px;z-index:50;grid-template-columns:1fr 1fr;gap:8px 24px;min-width:520px;text-align:left}
.menu-card::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:14px;height:14px;background:#fff;border:1px solid var(--border);border-right:none;border-bottom:none}
.nav-drop.open .menu-card{display:grid}
/* NOTE: no :hover display rule on purpose. It kept the card visible while
   the cursor was over the dropdown, so a click that removed .open could
   never actually close the menu. Display is controlled only by .open now,
   which the JS mouseenter (desktop hover) and the button click toggle. */
.menu-col{min-width:0}
.menu-head{margin:0 0 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:800}
.menu-card a[role=menuitem]{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:10px;text-decoration:none;color:var(--ink)}
.menu-card a[role=menuitem]:hover{background:var(--light);color:var(--crimson)}
.menu-icon{width:28px;height:28px;flex:none;display:block}.menu-icon img{width:28px;height:28px;display:block;border-radius:7px}
.menu-hub{grid-column:1/-1;border-top:1px solid var(--border);padding-top:12px;margin-top:8px;text-align:center;text-decoration:none;color:var(--crimson);font-weight:700}
.menu-card--single{grid-template-columns:1fr;min-width:300px}
.menu-card--pdf{grid-template-columns:1.05fr 1.35fr 1fr;min-width:780px;max-height:78vh;overflow:auto;left:auto;right:0;transform:none}
.menu-card--pdf::before{left:auto;right:28px;transform:translateX(0) rotate(45deg)}
@media(max-width:640px){.menu-card{min-width:0;width:min(520px,calc(100vw - 32px));grid-template-columns:1fr;gap:16px}.menu-card::before{display:none}}
.searchbar{flex-basis:100%;display:flex;gap:8px}
.searchbar input{flex:1;padding:11px 14px;border:1px solid var(--border);border-radius:10px;font-size:15px}
main{max-width:1080px;margin:0 auto;padding:24px 20px 60px}
.hero{text-align:center;padding:36px 10px 12px} .hero h1{font-size:44px;line-height:1.15;margin:0 0 10px} .hero p{color:var(--soft);font-size:18px;max-width:680px;margin:0 auto}
.hero .searchbar{max-width:560px;margin:22px auto 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.chips button{border:1px solid var(--border);background:#fff;padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:600}
.chips button.active,.chips button:hover{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.toolgrid{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.toolgrid .card{border-radius:18px;padding:22px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;text-decoration:none;color:var(--ink);display:block}
.toolgrid .card:hover h3{color:var(--crimson)}
.toolgrid .card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(27,42,74,.12);border-color:#f0c3cb}
.card-icon{display:block;width:52px;height:52px;margin-bottom:14px}
.card-icon img{width:52px;height:52px;display:block;border-radius:12px}
.card h3{margin:6px 0} .card h3 a{text-decoration:none;color:var(--ink)} .card h3 a:hover{color:var(--crimson)}
.chips-label{align-self:center;font-weight:700;color:var(--soft);font-size:14px}
.no-results{text-align:center;font-weight:700;padding:24px}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson);font-weight:800}
.btn{background:var(--crimson);color:#fff;border:none;padding:11px 18px;border-radius:10px;font-weight:700;cursor:pointer}
.btn:hover{background:var(--crimson-dark)} .btn.secondary{background:#eef2f7;color:var(--ink)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.field{margin:12px 0} label{display:block;font-weight:700;margin-bottom:6px}
input[type=text],input[type=number],input[type=date],input[type=datetime-local],select,textarea{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;font-size:15px;background:#fff;color:var(--ink)}
textarea{min-height:140px}
.tool-sub{font-size:18px;color:var(--soft);margin:8px 0 20px;max-width:680px}
.dropzone{border:2px dashed #cbd5e1;border-radius:16px;padding:48px 24px;text-align:center;cursor:pointer;background:#fff}
.dropzone:hover{border-color:var(--crimson)}
.dropzone.drag{border-color:var(--crimson);border-style:solid;background:var(--light);box-shadow:0 0 0 4px rgba(200,30,58,.08)}
.chooser-btn{display:inline-block;background:var(--crimson);color:#fff;padding:16px 34px;border-radius:12px;font-weight:800;font-size:18px;box-shadow:0 6px 18px rgba(200,30,58,.25)}
.dropzone:hover .chooser-btn,.dropzone.drag .chooser-btn{background:var(--crimson-dark)}
.chooser-drop{margin:16px 0 0;color:var(--soft);font-size:15px}
.status{margin:12px 0;font-weight:600;white-space:pre-wrap} .status.error{color:#b42318} .status.ok{color:#067647}
.result{background:#1b2a4a;color:#fff;border-radius:12px;padding:18px;margin-top:16px}
.result b{font-size:22px} .compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.compare>div{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff}
.compare h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:0 0 10px;text-align:left}
.compare img{max-height:180px;width:auto;max-width:100%;height:auto;object-fit:contain;display:block;margin:0 auto;border-radius:8px;background:#f1f5f9}
.compare p{font-size:13px;color:var(--soft);margin:10px 0 0;text-align:center}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.result-stats div{background:rgba(255,255,255,.08);border-radius:10px;padding:10px 12px}
.result-stats span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
.result-stats b{font-size:20px}
.result .dl-row{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
/* Professional image-tool layout: centred, narrower card, small preview boxes */
.card.img-tool{box-shadow:0 2px 14px rgba(15,23,42,.07)}
.card.img-tool>.field{max-width:520px;margin-left:auto;margin-right:auto}
@media(max-width:640px){.result-stats{grid-template-columns:1fr 1fr}.result-stats div:last-child{grid-column:1/-1}}
.progress{height:12px;background:#eef2f7;border-radius:999px;overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;background:var(--crimson);width:0%}
.pages{display:flex;flex-direction:column;gap:20px;max-height:700px;overflow-y:auto;overflow-x:hidden;background:#1b2a4a;padding:20px;border-radius:12px}
.pagebox{background:#fff;border-radius:6px;padding:10px;position:relative;align-self:flex-start} .pagebox canvas{max-width:100%;height:auto;display:block}
.pagebox span[contenteditable]{position:absolute;white-space:pre;cursor:text} .pagebox span[contenteditable]:hover{outline:1px dashed var(--crimson)}
/* Modern compact footer: one slim row + a separated bottom bar. */
footer.site-footer{border-top:3px solid var(--crimson);background:#fff;color:var(--soft)}
.footer-inner{max-width:1180px;margin:0 auto;padding:18px 20px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.footer-inner .logo{font-size:19px;white-space:nowrap}
.footer-tag{margin:0;color:var(--soft);font-size:14px;white-space:nowrap}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-left:auto;font-size:14px}
.footer-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.footer-group strong{color:var(--ink);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.footer-group a{color:var(--soft);text-decoration:none;font-weight:500}
.footer-group a:hover{color:var(--crimson)}
.footer-bottom{max-width:1180px;margin:0 auto;padding:10px 20px 16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;font-size:13px}
.footer-bottom .sep{color:var(--border);padding:0 2px}
@media(max-width:720px){.footer-inner{flex-direction:column;text-align:center}.footer-links{margin-left:0;justify-content:center}.footer-bottom{flex-direction:column;text-align:center}}
.back{display:inline-block;margin-bottom:14px;text-decoration:none;font-weight:700}
.faq h3{margin-top:18px} .related{margin-top:24px}
.unit-pills{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.unit-pill{padding:10px 22px;border-radius:999px;border:1px solid var(--border);background:#fff;font-weight:700;cursor:pointer;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.unit-pill.active{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.unit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.unit-swap{width:48px;height:46px;border-radius:10px;border:1px solid var(--border);background:#fff;font-size:20px;cursor:pointer;color:var(--ink)}
.unit-swap:hover{border-color:var(--crimson);color:var(--crimson)}
.unit-result-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.unit-result-row span{font-size:12px;letter-spacing:.12em;opacity:.75}
.unit-result-row b{font-size:26px}
@media(max-width:640px){.unit-row{grid-template-columns:1fr 1fr}.unit-swap{grid-column:1/-1;width:100%}}
.pct-card{margin-bottom:16px}
.pct-card h3{margin:0 0 4px}
.pct-example{color:var(--soft);font-size:14px;margin:0 0 12px}
.pct-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}
.pct-row input{width:110px;flex:none}
.pct-row span{font-weight:600}
.age-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.age-row .field{margin:0}
.age-row label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);font-weight:800}
.age-row .btn{padding:13px 22px;white-space:nowrap}
.age-result{background:#1b2a4a;color:#fff;border-radius:16px;padding:22px;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.age-main b{font-size:22px}
.age-stats{display:flex;flex-direction:column;gap:16px}
.age-stats span{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-bottom:2px}
.age-stats b{font-size:22px}
@media(max-width:640px){.age-row{grid-template-columns:1fr}.age-result{grid-template-columns:1fr}}
.dur-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dur-row .field{margin:0}
.dur-row label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);font-weight:800}
.dur-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.dur-result{background:#1b2a4a;color:#fff;border-radius:16px;padding:22px;margin-top:16px;display:grid;grid-template-columns:auto 1.2fr 1fr;gap:20px}
.dur-label span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;font-weight:800}
.dur-main b{font-size:22px}
@media(max-width:640px){.dur-row{grid-template-columns:1fr}.dur-result{grid-template-columns:1fr}}
@media(max-width:640px){.hero h1{font-size:30px}.compare{grid-template-columns:1fr}.hwrap{flex-direction:row}nav.mainnav{flex-wrap:nowrap;overflow-x:auto}}
@media(max-width:1000px){.toolgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.hwrap{gap:10px}.logo{font-size:18px}nav.mainnav{overflow-x:auto;scrollbar-width:none}nav.mainnav::-webkit-scrollbar{display:none}}
@media(max-width:720px){.toolgrid{grid-template-columns:repeat(2,1fr);gap:16px}.hero h1{font-size:34px}}
@media(max-width:480px){.toolgrid{grid-template-columns:1fr}.hero{padding:24px 4px 8px}.hero h1{font-size:30px}.hero p{font-size:16px}}

/* Mobile design: hamburger menu + single-column icon-left cards (<=640px, incl. <=480px) */
.nav-toggle{display:none}
@media(max-width:640px){
  .hwrap{flex-wrap:wrap;align-items:center;gap:12px}
  .logo{flex:none;font-size:18px}
  .logo img{width:32px;height:32px}
  .nav-toggle{display:block;margin-left:auto;flex:none;background:#fff;border:1px solid var(--border);border-radius:10px;padding:9px 11px;cursor:pointer}
  .nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}
  .nav-toggle:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
  nav.mainnav{display:none}
  header.nav-open nav.mainnav{display:flex;flex-direction:column;flex-basis:100%;overflow:visible;flex-wrap:nowrap;gap:2px;margin-left:0;padding-top:6px}
  header.nav-open nav.mainnav a,header.nav-open .nav-drop-btn{width:100%;text-align:left;border-radius:10px}
  header.nav-open .nav-drop{width:100%}
  .hero .searchbar{width:100%;max-width:100%}
  .chips{justify-content:flex-start}
  .toolgrid{grid-template-columns:1fr;gap:14px}
  .toolgrid .card{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto auto;column-gap:14px;row-gap:0;align-items:center;padding:18px}
  .toolgrid .card-icon{grid-column:1;grid-row:1/span 2;margin:0;align-self:center;width:52px;height:52px}
  .toolgrid .card-icon img{width:52px;height:52px}
  .toolgrid .card .eyebrow{grid-column:2;grid-row:1;margin:0}
  .toolgrid .card h3{grid-column:2;grid-row:2;margin:0 0 8px}
  .toolgrid .card > p:not(.eyebrow){grid-column:1/-1;grid-row:3;margin:0}
  /* Mobile dropdowns: fill the full-width nav item, never centred with
     translateX(-50%) — that centring is what pushed cards off the left edge
     on narrow screens (see the 2026-10-26 mobile screenshot). */
  .menu-card{left:0;right:0;transform:none;width:auto;min-width:0}
  .menu-card--pdf,.menu-card--single{left:0;right:0;transform:none;min-width:0;max-height:none}
}
@media(max-width:480px){
  .toolgrid{grid-template-columns:1fr}
  .hero{padding:24px 4px 8px}
}

/* Tool-page bottom content (SEO / AdSense): readable, compact, not a wall of text. */
.seo-content{max-width:760px;margin:32px auto 0;line-height:1.7}
.seo-content h2{margin:28px 0 8px;font-size:22px;color:var(--ink)}
.seo-content p{margin:0 0 12px;color:var(--ink)}
.seo-content ol,.seo-content ul{margin:0 0 12px;padding-left:22px}
.seo-content li{margin-bottom:6px}
.seo-content .seo-note{color:var(--soft);font-size:15px}

/* ---- Tool options panels, split preview, merge list, result footer ---- */
.options-panel{border:1px solid #eee;border-radius:12px;padding:16px;margin:16px 0;background:#fffdfd}
.options-panel h3{margin:0 0 12px;font-size:17px}
.options-panel .field{margin-bottom:12px}
.options-panel input[type=number]{width:110px}
.radio-row{display:flex;gap:8px;align-items:center;margin:6px 0}
.check-row{display:flex;gap:8px;align-items:center;margin:10px 0}
.range-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.range-row input[type=number]{width:90px}
.range-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:12px}
.range-card{border:1px solid #f0c9cd;border-radius:10px;padding:10px;text-align:center;background:#fff8f8}
.range-card strong{display:block;margin-bottom:4px}
.merge-row{display:flex;gap:8px;align-items:center;padding:8px;border:1px solid #eee;border-radius:8px;margin-bottom:8px}
.merge-row .mname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.merge-row button{padding:4px 10px}
.result-footer{margin-top:16px;padding-top:12px;border-top:1px solid #eee;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Visible page previews (Split / Organize / Rotate / Merge) and crop preview */
.page-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:16px 0}
.page-thumbs--large{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.page-thumbs--slides{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.page-thumb .slide-text{font-size:13px;color:var(--ink);text-align:left;white-space:normal;margin:8px 0 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.ocr-preview{border:1px solid var(--border);border-radius:10px;padding:10px;background:#fff;margin:16px 0;text-align:center}
.ocr-preview img{max-width:100%;max-height:360px;object-fit:contain;display:block;margin:0 auto}
.page-thumb{border:1px solid var(--border);border-radius:10px;padding:8px;text-align:center;background:#fff}
.page-thumb canvas{width:100%;height:auto;display:block}
.page-thumb span{display:block;margin-top:6px;font-size:13px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crop-preview-wrap{position:relative;max-width:420px;margin:16px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.crop-preview-wrap canvas{width:100%;height:auto;display:block}
.crop-box{position:absolute;border:2px dashed var(--crimson);pointer-events:auto;box-sizing:border-box;cursor:move;user-select:none}
.crop-handle{position:absolute;width:14px;height:14px;background:#fff;border:2px solid var(--crimson);border-radius:3px;box-sizing:border-box;pointer-events:auto;touch-action:none}
.crop-handle--nw{left:-7px;top:-7px}.crop-handle--n{left:50%;top:-7px;transform:translateX(-50%)}.crop-handle--ne{right:-7px;top:-7px}.crop-handle--e{right:-7px;top:50%;transform:translateY(-50%)}.crop-handle--se{right:-7px;bottom:-7px}.crop-handle--s{left:50%;bottom:-7px;transform:translateX(-50%)}.crop-handle--sw{left:-7px;bottom:-7px}.crop-handle--w{left:-7px;top:50%;transform:translateY(-50%)}
.crop-box-label{position:absolute;top:4px;left:4px;background:var(--crimson);color:#fff;font-size:12px;padding:2px 6px;border-radius:4px}

/* Compression level radio rows */
.radio-row{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;margin:10px 0;cursor:pointer;background:#fff;font-weight:600}
.radio-row input{margin-top:3px;accent-color:var(--crimson)}

/* Image-tool dropzone: small, subtle ("almost invisible") at rest, clear on hover, centred */
.dropzone--image{padding:20px 16px;max-width:520px;margin:0 auto;border:1px solid #eef2f7;border-style:solid;background:#fbfcfe;box-shadow:none}
.dropzone--image .chooser-btn{padding:12px 26px;font-size:16px;box-shadow:none;transition:transform .15s ease, box-shadow .15s ease}
.dropzone--image .chooser-drop{margin-top:10px;font-size:14px}
.dropzone--image:hover,.dropzone--image.drag{border:2px dashed var(--crimson);background:#fff5f6;box-shadow:0 8px 24px rgba(200,30,58,.12)}
.dropzone--image:hover .chooser-btn,.dropzone--image.drag .chooser-btn{transform:translateY(-1px);box-shadow:0 6px 18px rgba(200,30,58,.25)}
/* Centre the image-tool cards and titles */
body[data-tool="image-compressor"] .card,body[data-tool="image-format-converter"] .card,body[data-tool="image-resize-crop"] .card,body[data-tool="image-to-text"] .card{max-width:720px;margin-left:auto;margin-right:auto}
body[data-tool="image-compressor"] h1,body[data-tool="image-format-converter"] h1,body[data-tool="image-resize-crop"] h1,body[data-tool="image-to-text"] h1,body[data-tool="image-compressor"] .tool-sub,body[data-tool="image-format-converter"] .tool-sub,body[data-tool="image-resize-crop"] .tool-sub,body[data-tool="image-to-text"] .tool-sub{text-align:center}
/* Beautiful SEO section (image tools) */
.seo-beautiful{max-width:720px;margin:32px auto 0}
.seo-beautiful h2{font-size:22px;margin:28px 0 10px;padding-left:12px;border-left:4px solid var(--crimson)}
.seo-beautiful h2:first-child{margin-top:0}
.seo-beautiful p{color:#334155;line-height:1.7;margin:0 0 14px}
.seo-beautiful h3{font-size:17px;margin:16px 0 6px;background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.seo-beautiful h3 + p{padding:0 14px}

/* Passport steps + background colour swatches (copied from the live Passport tool) */
.step-label{font-weight:800;color:var(--crimson);text-transform:uppercase;letter-spacing:.05em;font-size:13px;margin:20px 0 8px}
.bg-swatches{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.bg-swatch{position:relative;cursor:pointer;text-align:center;font-size:13px;color:var(--soft)}
.bg-swatch input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.bg-swatch .swatch-dot{display:block;width:46px;height:46px;border-radius:50%;border:2px solid #e5e7eb;margin:0 auto 6px;box-sizing:border-box}
.bg-swatch input[type="radio"]:checked + .swatch-dot{outline:3px solid var(--crimson);outline-offset:2px;border-color:#fff}
.bg-swatch .swatch-dot input[type="color"]{width:100%;height:100%;border:none;border-radius:50%;padding:0;cursor:pointer;background:none}
#positionCanvas{width:100%;max-width:320px;height:auto;display:block;border:1px solid var(--border);border-radius:10px;cursor:grab;background:#fff}
#positionCanvas:active{cursor:grabbing}

/* Resize & Crop tabs */
.tabs{display:flex;gap:8px;margin:16px 0}
.tab-btn{padding:10px 20px;border:1px solid var(--border);border-radius:10px;background:#fff;font-weight:700;cursor:pointer}
.tab-btn.active{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.size-row{display:flex;gap:10px;align-items:flex-end}
.size-row .field{flex:1}
#rsLock{padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;font-size:18px}
#rsLock[aria-pressed="false"]{opacity:.5}
#cropCanvas{max-width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:10px;cursor:crosshair;background:#f8fafc}

/* Merge PDF: draggable file cards with first-page thumbnails, like the reference workspace */
.merge-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin:16px 0}
.merge-card{border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center;background:#fff;cursor:grab;position:relative}
.merge-card.dragging{opacity:.5;border-color:var(--crimson)}
.merge-card.drag-over{outline:2px dashed var(--crimson);outline-offset:2px}
.merge-card canvas{width:100%;height:auto;display:block;border:1px solid #eef2f7;border-radius:6px;background:#fff}
.merge-card .mname{display:block;margin-top:8px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.merge-card .mremove{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:none;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer;font-size:16px;line-height:1;z-index:1}
.merge-card .morder{position:absolute;top:6px;left:6px;background:var(--crimson);color:#fff;font-size:12px;font-weight:700;padding:2px 7px;border-radius:999px;z-index:1}
.info-box{background:#e0f2fe;border:1px solid #bae6fd;border-radius:10px;padding:12px 14px;color:#0c4a6e}

/* Mobile dropdowns must NOT be an absolute overlay: an overlay can be clipped,
   scrolled away, or closed by a tap that lands under it. Inside the open
   hamburger menu the card becomes a normal in-flow block (accordion), so it
   pushes the following nav items down and stays exactly where the user tapped. */
@media(max-width:640px){
  header.nav-open .nav-drop.open .menu-card{position:static;box-shadow:none;border:none;border-top:1px solid var(--border);border-radius:0;padding:12px 0 4px;max-height:none;overflow:visible}
  header.nav-open{max-height:100vh;overflow-y:auto}
}

/* Top Back button: a proper pill button at the top of every tool page */
.back{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:#fff;font-weight:700;text-decoration:none}
.back:hover{background:var(--crimson);color:#fff;border-color:var(--crimson)}