:root {
  --bg: #100e0c;
  --bg-raised: #18140f;
  --bg-raised-2: #1e1712;
  --border: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.25);
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.6);
  --text-dimmer: rgba(255, 255, 255, 0.52);
  --text-dimmest: rgba(255, 255, 255, 0.3);
  --red: #C8722F;
  --red-hover: #A85F26;
  --green: #22c55e;
  --green-hover: #16a34a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
  overflow-x: hidden;
  overflow-x: clip; /* clip (not hidden) so sticky side panels keep following the page */
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
/* #site-header/#site-footer start empty and get their real content
   injected by JS after the HTML parses — reserving roughly their real
   rendered height here keeps that insertion from visibly shifting
   everything below it (this is most of this site's Cumulative Layout
   Shift score). Approximate is fine; exact isn't needed. */
#site-header { min-height: 73px; }
#site-footer { min-height: 320px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
}
.logo svg { width: 32px; height: 32px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
}
.nav-links a:hover { color: var(--text); }

/* "Products" dropdown — native <details>/<summary>, so opening it works
   identically via click, tap, or keyboard with zero JS. summary's default
   disclosure triangle is hidden and replaced with a small chevron that
   matches the rest of the nav's styling. */
.nav-dropdown { position: relative; }
.nav-dropdown summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px;
  color: var(--text-dim); font-size: 14px; font-weight: 500;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary:hover { color: var(--text); }
.nav-dropdown summary::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; transition: transform 0.15s;
}
.nav-dropdown[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 170px;
  background: #161616; border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); z-index: 50;
}
.nav-dropdown-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 6px; font-size: 14px; font-weight: 500;
  color: var(--text-dim); white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.nav-dropdown-menu .ext-arrow { color: var(--text-dimmest); font-size: 12px; }
.header-right { display: flex; align-items: center; gap: 12px; }
.badge-pill {
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.btn-white {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
}
.btn-white:hover { background: rgba(255,255,255,0.9); }

.hamburger-btn {
  display: none; background: transparent; border: 1px solid var(--border-hover);
  border-radius: 8px; width: 38px; height: 38px; align-items: center; justify-content: center;
  color: #fff;
}
.hamburger-btn svg { width: 20px; height: 20px; }

.mobile-nav {
  display: none; flex-direction: column; border-top: 1px solid var(--border);
  background: var(--bg); padding: 8px 0;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 14px 24px; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover { color: #fff; background: rgba(255,255,255,0.03); }
.header-account-btn { display: inline-block; }

@media (max-width: 960px) {
  .nav-links, .badge-pill, .header-account-btn { display: none; }
  .hamburger-btn { display: flex; }
}

/* ---------- Hero ---------- */
.hero { padding: 80px 0 60px; }
.hero h1 { font-size: 48px; font-weight: 900; line-height: 1.05; margin: 0 0 20px; }
@media (min-width: 640px) { .hero h1 { font-size: 60px; } }
.hero p { max-width: 480px; color: var(--text-dim); font-size: 18px; line-height: 1.6; margin: 0 0 28px; }

/* ---------- Format Picker Widget ---------- */
.format-picker { display: flex; align-items: center; gap: 12px; position: relative; }
.fp-box {
  width: 128px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--bg-raised); border-radius: 12px;
  padding: 20px 16px; color: #fff; position: relative; border-width: 1px;
}
.fp-box.target { background: var(--bg-raised-2); }
.fp-box:hover { border-color: var(--border-hover); }
.fp-box svg.file-icon { width: 32px; height: 32px; color: rgba(255,255,255,0.7); }
.fp-box.target svg.file-icon { color: rgba(227,148,91,0.8); }
.fp-box .fp-label { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; }
.fp-box .fp-chevron { width: 14px; height: 14px; color: var(--text-dimmer); }

.fp-swap-col { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 2px; }
.fp-swap-line { width: 24px; height: 1px; background: rgba(255,255,255,0.15); }
.fp-swap-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(200,114,47,0.4); background: rgba(200,114,47,0.1); color: var(--red);
}
.fp-swap-btn:hover { background: rgba(200,114,47,0.2); }
.fp-swap-btn svg { width: 16px; height: 16px; }
.fp-swap-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--text-dimmer); }

.fp-dropdown {
  position: fixed; z-index: 50; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 25px 50px rgba(0,0,0,0.5); overflow: hidden;
  max-width: calc(100vw - 24px);
}
.fp-search { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.fp-search svg { width: 16px; height: 16px; color: var(--text-dimmer); flex-shrink: 0; }
.fp-search input { width: 100%; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-size: 14px; }
.fp-search input::placeholder { color: var(--text-dimmer); }

.fp-body { display: flex; max-height: 356px; min-width: 0; }
.fp-categories { width: 150px; flex-shrink: 0; overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--border); padding: 8px 0; }
.fp-cat-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left;
  padding: 10px 12px; font-size: 13px; color: var(--text-dim); background: transparent; border: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-cat-item:hover, .fp-cat-item.active { background: rgba(255,255,255,0.05); color: #fff; }
.fp-cat-item svg { width: 14px; height: 14px; opacity: 0.5; flex-shrink: 0; }

.fp-grid {
  flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; padding: 12px; overflow-y: auto; overflow-x: hidden; align-content: start;
}
.fp-format-btn {
  min-width: 0; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.8);
  border-radius: 6px; padding: 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-format-btn:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.07); }
.fp-format-btn.selected { border-color: var(--red); background: var(--red); color: #fff; }
.fp-empty { grid-column: 1 / -1; text-align: center; padding: 32px 0; color: var(--text-dimmer); font-size: 14px; }

@media (max-width: 480px) {
  .fp-categories { width: 110px; }
  .fp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
  .format-picker { gap: 6px; }
  .fp-box { width: 96px; padding: 14px 8px; }
  .fp-box svg.file-icon { width: 24px; height: 24px; }
  .fp-box .fp-label { font-size: 12px; }
  .fp-swap-btn { width: 30px; height: 30px; }
  .fp-swap-btn svg { width: 13px; height: 13px; }
}

/* ---------- Privacy strip ---------- */

/* ---------- Format catalog ---------- */

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg); }
/* Footer: brand on its own row on phones/tablets, two link columns per row on
   phones, four across on tablets, and brand + four columns on desktop. */
.footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; padding-top: 48px; padding-bottom: 40px; }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; } .footer-brand { grid-column: auto; } }
.footer-brand p { color: var(--text-dimmer); font-size: 14px; margin-top: 12px; max-width: 280px; line-height: 1.55; }
.footer-col h4, .footer-col .footer-h { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { font-size: 14px; color: var(--text-dimmer); }
.footer-col a:hover { color: rgba(255,255,255,0.8); }
.footer-col a.footer-more { color: #E3945B; font-weight: 600; }
.footer-col a.footer-more:hover { color: #f0aa78; }
.footer-bottom-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { font-size: 13px; color: var(--text-dimmer); }
.footer-legal a:hover { color: rgba(255,255,255,0.8); }
.footer-bottom-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-top: 1px solid var(--border); }
.footer-payments { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.2px; color: var(--text-dimmer); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 5px; padding: 4px 9px; }
.footer-trademark { font-size: 12px; color: var(--text-dimmest); white-space: nowrap; }
@media (max-width: 640px) {
  .footer-bottom-row { justify-content: center; text-align: center; }
  .footer-bottom-left { justify-content: center; width: 100%; }
  .footer-trademark { white-space: normal; }
  .footer-payments { justify-content: center; width: 100%; }
}
.seg-toggle { display: inline-flex; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.seg-toggle input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-toggle label { padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-dimmer); border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s; user-select: none; }
.seg-toggle input[type="radio"]:checked + label { background: rgba(200,114,47,0.16); color: #E3945B; }
.seg-toggle label:hover { color: rgba(255,255,255,0.85); }

/* ---------- Converter page ---------- */
.conv-hero { padding: 64px 0 40px; }
.conv-hero h1 { font-size: 40px; font-weight: 900; line-height: 1.1; margin: 0 0 20px; }
@media (min-width: 640px) { .conv-hero h1 { font-size: 48px; } }
.conv-hero p { max-width: 440px; color: var(--text-dim); margin: 0 0 24px; }
.conv-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-dimmer); }
.conv-checklist li { display: flex; align-items: center; gap: 8px; }
.conv-checklist svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; }

.upload-section { max-width: 720px; margin: 0 auto; padding: 0 24px 64px; }

.file-card { border: 1px solid var(--border); background: rgba(255,255,255,0.02); border-radius: 16px; padding: 32px; }
.file-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.file-card-top svg.arrow { width: 16px; height: 16px; color: var(--text-dimmest); flex-shrink: 0; }
.btn-convert { background: var(--red); color: #fff; }
.btn-convert:hover { background: var(--red-hover); }
.error-box { border: 1px solid rgba(200,114,47,0.3); background: rgba(200,114,47,0.1); color: #fca5a5; border-radius: 8px; padding: 14px; font-size: 14px; }
.error-box a { color: #E3945B; font-weight: 700; text-decoration: underline; }
/* Same link treatment wherever a result/warning box links out (e.g. every
   "Unlock PDF" link inside an inline message) — a dedicated class rather
   than matching the href, so it doesn't also grab the Unlock PDF tool
   card's own link on pdf-tools.html. */
.inline-link { color: #E3945B; font-weight: 700; text-decoration: underline; }
.reset-link { display: block; width: 100%; text-align: center; background: none; border: none; margin-top: 12px; font-size: 12px; color: var(--text-dimmer); }
.reset-link:hover { color: rgba(255,255,255,0.7); } /* 760px of content, lined up with the guide below */

/* ---------- Options panel ---------- */

/* Polished select — custom chevron, proper focus ring, consistent with
   the rest of the design system instead of a bare browser default. */

/* ---------- Merge / multi-file tool ---------- */
.drag-handle {
  cursor: grab; color: var(--text-dimmer); flex-shrink: 0; display: flex; align-items: center;
  touch-action: none;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 16px; height: 16px; }

/* ---------- Page thumbnail grid (Rearrange PDF) ---------- */

.hidden { display: none !important; }

/* Announcement bar above the header — a single still message, or (when
   there are 2+ in the ANNOUNCEMENT_MESSAGES array) a smooth fade between
   them every few seconds instead of a scrolling ticker. */
.announcement-bar {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(200,114,47,0.25), rgba(200,114,47,0.08));
  border-bottom: 1px solid rgba(200,114,47,0.3);
  padding: 9px 44px 9px 16px;
  overflow: hidden;
}
.announcement-link { display: block; width: 100%; text-decoration: none; }
.announcement-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px; font-weight: 600; color: #fff;
  transition: opacity 0.3s ease;
}
.announcement-text.fade-out { opacity: 0; }
.announcement-close {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer;
  padding: 0 14px; display: flex; align-items: center; justify-content: center;
}
.announcement-close:hover { color: #fff; }
@media (max-width: 640px) {
  .announcement-bar { padding: 9px 40px 9px 12px; }
  .announcement-text { font-size: 11.5px; }
}

/* Shared styling for the calculator hub + every individual calculator page. */
.calc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px; margin-top: 24px;
}
.calc-card {
  display: block; border: 1px solid var(--border); background: rgba(255,255,255,0.02);
  border-radius: 14px; padding: 22px; transition: border-color 0.15s, background 0.15s;
}
.calc-card:hover { border-color: rgba(200,114,47,0.4); background: rgba(255,255,255,0.04); }
.calc-card .icon {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(200,114,47,0.12); color: #E3945B; margin-bottom: 14px;
}
.calc-card .icon svg { width: 20px; height: 20px; }
.calc-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #fff; }
.calc-card p { margin: 0; font-size: 13px; color: var(--text-dimmer); line-height: 1.5; }
.calc-category { margin-top: 56px; }
.calc-category:first-of-type { margin-top: 40px; }
.calc-category h2 { font-size: 22px; margin: 0 0 4px; }
.calc-category .cat-desc { color: var(--text-dimmer); font-size: 14px; margin: 0; }
.calc-faq { margin: 56px auto 0; max-width: 760px; } /* same centred column as the guide text below it */ /* app pages use a wider content column */
.calc-faq h2 { font-size: 24px; margin-bottom: 24px; }
.calc-faq .faq-item { padding: 18px 0; border-top: 1px solid var(--border); }
.calc-faq .faq-item h3 { font-size: 15px; margin: 0 0 8px; }
.calc-faq .faq-item p { font-size: 14px; color: var(--text-dimmer); margin: 0; line-height: 1.6; }

/* Shared layout for the typing-tools hub + every individual language page. */
.typing-tool-actions { display: flex; gap: 10px; margin-top: 16px; }
.typing-tool-actions button {
  font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-dim);
}
.typing-tool-actions button:hover { border-color: var(--border-hover); color: #fff; }
.typing-tool-actions button.primary { background: var(--red); border-color: var(--red); color: #fff; }
.typing-tool-actions button.primary:hover { opacity: 0.9; }
.typing-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.typing-guide-item {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; text-align: center;
  background: rgba(255,255,255,0.02);
}
.typing-guide-item .latin { font-size: 12px; color: var(--text-dimmer); font-weight: 600; }
.typing-guide-item .native { font-size: 20px; color: #fff; margin-top: 4px; }
.typing-note { font-size: 13px; color: var(--text-dimmer); margin-top: 16px; line-height: 1.6; }

/* New single-textarea typing tool UI (word-boundary commit + Google Input
   Tools suggestion chips), replacing the earlier two-box live-preview
   layout with a closer match to how Google's own Input Tools actually work. */
.typing-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  color: var(--text-dim); cursor: pointer;
}
.lang-toggle .dot2 { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dimmest); flex-shrink: 0; }
.lang-toggle.on { border-color: rgba(34,197,94,0.4); color: #fff; }
.lang-toggle.on .dot2 { background: #22c55e; }
.input-area {
  width: 100%; min-height: 260px; box-sizing: border-box; resize: vertical;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px; color: #fff; font-size: 19px; line-height: 1.8; font-family: inherit;
}
.input-area:focus { outline: none; border-color: rgba(200,114,47,0.5); }
.typing-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dimmest); margin-top: 8px; }
.suggest-bar { display: none; margin-top: 12px; padding: 10px; border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); }
.suggest-bar.show { display: block; }
.suggest-chip {
  font-size: 16px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.03); color: var(--text-dim); cursor: pointer;
}
.suggest-chip:hover { border-color: var(--border-hover); color: #fff; }
.suggest-chip.active { border-color: var(--red); color: #fff; background: rgba(200,114,47,0.12); }
.action-btn {
  font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-dim);
}
.action-btn:hover { border-color: var(--border-hover); color: #fff; }
.action-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.action-btn.primary:hover { opacity: 0.9; }
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200;
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: #161616; border: 1px solid var(--border); border-radius: 14px; padding: 28px;
  max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto; position: relative;
}
.modal-close {
  position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text-dimmer);
  font-size: 22px; cursor: pointer; line-height: 1;
}
.modal-close:hover { color: #fff; }

/* ---------- Free daily AI credits ---------- */
.qb-gift-pill {
  display: inline-block; margin: 0 auto 16px; padding: 7px 14px; border-radius: 999px;
  background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #86efac; font-size: 13px;
}
.qb-gift-pill strong { color: #bbf7d0; }
.qb-free-line { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-dimmer); line-height: 1.5; }
.qb-free-line strong { color: #86efac; font-weight: 700; }
.qb-free-line a { color: #E3945B; font-weight: 700; }
.qb-corner-card {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1000;
  width: 320px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 18px 18px 16px;
  background: #1c1916; border: 1px solid rgba(200,114,47,0.45); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5); color: #fff;
  opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.qb-corner-card.show { opacity: 1; transform: translateY(0); }
.qb-corner-close {
  position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--text-dimmer);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 4px;
}
.qb-corner-close:hover { color: #fff; }
.qb-corner-title { font-size: 15px; font-weight: 800; margin: 0 22px 6px 0; }
.qb-corner-text { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin-bottom: 14px; }
.qb-corner-actions { display: flex; gap: 8px; }
.qb-corner-actions a { flex: 1; text-align: center; text-decoration: none; font-size: 13px; font-weight: 700; padding: 9px 12px; border-radius: 8px; }
.qb-corner-primary { background: var(--red); color: #fff; }
.qb-corner-primary:hover { background: var(--red-hover); }
.qb-corner-secondary { border: 1px solid var(--border-hover); color: rgba(255,255,255,0.85); }
@media (max-width: 640px) {
  .qb-corner-card { left: 16px; right: 16px; width: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Install app ---------- */
.btn-install {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(200,114,47,0.55); background: rgba(200,114,47,0.12); color: #E3945B;
  font-size: 13px; font-weight: 700; font-family: inherit; white-space: nowrap;
}
.btn-install svg { width: 15px; height: 15px; }
.btn-install:hover { background: rgba(200,114,47,0.22); color: #fff; }
.badge-pill.qb-pill-hidden { display: none; }
/* Phones and small tablets: keep the header clean — installing is offered
   from the menu (📲 Install the Quikbench app) instead. */
@media (max-width: 960px) {
  .btn-install { display: none; }
}
.qb-install-overlay {
  position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center; padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.qb-install-sheet {
  position: relative; width: 100%; max-width: 420px; box-sizing: border-box; padding: 22px 20px 18px;
  background: #1c1916; border: 1px solid rgba(200,114,47,0.45); border-radius: 16px; color: #fff;
}
.qb-install-steps { margin: 0 0 16px; padding-left: 20px; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.88); }
.qb-install-done {
  width: 100%; padding: 11px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--red); color: #fff; font-weight: 700; font-size: 14px; font-family: inherit;
}

/* ---------- Image compressor ---------- */

/* Header on mid-size screens (small laptops, tablets in landscape): keep
   every nav label on one line, drop the decorative badge, tighten spacing. */
.nav-links a, .nav-dropdown summary, .logo { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1240px) {
  .badge-pill { display: none; }
  .nav-links { gap: 16px; }
}
@media (min-width: 961px) and (max-width: 1040px) {
  .nav-links { gap: 12px; }
  .nav-links a, .nav-dropdown summary { font-size: 13.5px; }
  .header-right { gap: 8px; }
  .btn-install span { display: none; }
  .btn-install { padding: 7px 9px; }
}

/* ---------- Shopify apps (apps.html + app pages) ---------- */

/* Old Photo Repair: next-step buttons under each result */

/* ---------- Creative AI tools: animate, photo editor, alt text ---------- */
/* labels sitting directly on their field (found by the layout check) */

/* AI hub: three groups of three cards. 3 across on desktop, 2 on tablets, 1 on phones. */

/* ---------- Website assistant (chat widget) ---------- */
.qb-chat-launcher {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1050;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(200,114,47,0.6); background: #C8722F; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45); transition: transform 0.15s ease, background 0.15s ease;
}
.qb-chat-launcher:hover { background: #d97f38; transform: translateY(-1px); }
.qb-chat-launcher svg { width: 20px; height: 20px; flex-shrink: 0; }
.qb-chat {
  position: fixed; right: 20px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 1060;
  width: 372px; max-width: calc(100vw - 32px); height: min(580px, calc(100vh - 120px)); box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
  background: #1c1916; border: 1px solid rgba(200,114,47,0.45); border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,0.6); color: #fff;
}
.qb-chat[hidden] { display: none; }
.qb-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: rgba(200,114,47,0.08); }
.qb-chat-head strong { display: block; font-size: 15px; }
.qb-chat-head span { display: block; font-size: 12px; color: var(--text-dimmer); margin-top: 2px; }
.qb-chat-close { background: none; border: none; color: var(--text-dim); font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.qb-chat-close:hover { color: #fff; }
.qb-chat-log { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.qb-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.55; word-break: break-word; }
.qb-msg p { margin: 0 0 6px; }
.qb-msg p:last-child, .qb-msg ul:last-child { margin-bottom: 0; }
.qb-msg ul { margin: 4px 0 6px; padding-left: 18px; }
.qb-msg li { margin-bottom: 3px; }
.qb-msg a { color: #E3945B; font-weight: 700; text-decoration: underline; }
.qb-msg-user { align-self: flex-end; background: #C8722F; color: #fff; border-bottom-right-radius: 4px; }
.qb-msg-assistant { align-self: flex-start; background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: rgba(255,255,255,0.92); border-bottom-left-radius: 4px; }
.qb-msg-error { border-color: rgba(252,165,165,0.4); color: #fca5a5; }
.qb-typing { display: inline-flex; gap: 5px; padding: 13px 15px; }
.qb-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dimmer); animation: qb-dot 1.2s infinite ease-in-out; }
.qb-typing span:nth-child(2) { animation-delay: 0.15s; }
.qb-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes qb-dot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.qb-chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px; }
.qb-chat-chips[hidden] { display: none; }
.qb-chat-chips button { padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(200,114,47,0.45); background: rgba(200,114,47,0.08); color: #E3945B; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; text-align: left; }
.qb-chat-chips button:hover { background: rgba(200,114,47,0.18); color: #fff; }
.qb-chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.qb-chat-input { flex: 1; min-width: 0; padding: 11px 13px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: #fff; font-size: 14px; font-family: inherit; }
.qb-chat-input:focus { outline: none; border-color: rgba(200,114,47,0.7); }
.qb-chat-send { width: 44px; border-radius: 10px; border: none; background: #C8722F; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qb-chat-send:hover { background: #d97f38; }
.qb-chat-send:disabled { opacity: 0.55; cursor: wait; }
.qb-chat-send svg { width: 18px; height: 18px; }
.qb-chat-note { margin: 0; padding: 0 14px 10px; font-size: 11px; line-height: 1.5; color: var(--text-dimmest); }
.qb-chat-note a { color: var(--text-dimmer); text-decoration: underline; }
/* The free-credits card and the install sheet sit above the launcher, not on top of it. */
body.qb-has-assistant .qb-corner-card { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  .qb-chat-launcher { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 13px; }
  .qb-chat-launcher span { display: none; }
  .qb-chat { left: 8px; right: 8px; width: auto; max-width: none; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); height: min(78vh, 600px); }
  body.qb-chat-open .qb-chat-launcher { display: none; }
  body.qb-has-assistant .qb-corner-card { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .qb-chat-launcher, .qb-chat { display: none !important; } }

/* ---------- Guide content under tools (how-to, tips, FAQ) ---------- */
.guide { max-width: 760px; margin: 0 auto; padding: 8px 0 72px; }
.guide h2 { font-size: 24px; margin: 44px 0 14px; color: #fff; line-height: 1.25; }
.guide h2:first-child { margin-top: 24px; }
.guide h3 { font-size: 16.5px; margin: 24px 0 8px; color: #fff; }
.guide p, .guide li { font-size: 15.5px; line-height: 1.75; color: var(--text-dim); }
.guide p { margin: 0 0 14px; }
.guide ul, .guide ol { padding-left: 22px; margin: 10px 0 18px; }
.guide li { margin-bottom: 8px; }
.guide li strong, .guide p strong { color: rgba(255,255,255,0.92); }
.guide a { color: #E3945B; }
.guide .faq-item { padding: 14px 0; border-top: 1px solid var(--border); }
.guide .faq-item:first-of-type { border-top: none; }
.guide .faq-item h3 { margin: 0 0 6px; font-size: 16px; }
.guide .faq-item p { margin: 0; font-size: 15px; }
.guide .guide-table { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 14px; }
.guide .guide-table th, .guide .guide-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-dim); vertical-align: top; }
.guide .guide-table th { color: #fff; font-weight: 700; background: rgba(255,255,255,0.03); }
.guide-table-wrap { overflow-x: auto; }
@media (max-width: 640px) { .guide h2 { font-size: 21px; } .guide p, .guide li { font-size: 15px; } }

/* ---------- Upscale PDF (batch) ---------- */

/* ---------- About / Contact content ---------- */

/* ---------- Footer social links ---------- */
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-dim); transition: color .15s, border-color .15s, background .15s; }
.footer-social a:hover, .footer-social a:focus-visible { color: #fff; border-color: var(--border-hover); background: rgba(255,255,255,0.05); }

/* ---------- Assistant: "Try again" on an error message ---------- */
.qb-retry { display: inline-block; margin: 8px 0 0; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(252,165,165,0.5); background: transparent; color: #fca5a5; font-size: 13px; font-weight: 700; cursor: pointer; }
.qb-retry:hover, .qb-retry:focus-visible { background: rgba(252,165,165,0.12); color: #fff; }


/* ---------- Free AI credits without an account ---------- */
.qb-anon-note { flex-basis: 100%; width: 100%; font-size: 13px; line-height: 1.5; color: var(--text-dimmer); }
.qb-anon-note a { color: #E3945B; font-weight: 600; }

/* ---------- Share + bookmark bar under results ---------- */
.qb-share { display: block; width: 100%; flex-basis: 100%; box-sizing: border-box; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,0.03); text-align: left; }
.qb-share-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.qb-share-head strong { font-size: 14px; color: #fff; }
.qb-share-head span { font-size: 12px; color: var(--text-dimmer); }
.qb-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.qb-share-btn { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border-hover, rgba(255,255,255,0.18)); background: transparent; color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; font-family: inherit; }
.qb-share-btn:hover, .qb-share-btn:focus-visible { border-color: #C8722F; color: #fff; background: rgba(200,114,47,0.12); outline: none; }
.qb-share-btn[hidden] { display: none; }
.qb-share-whatsapp:hover { border-color: #25D366; background: rgba(37,211,102,0.12); }
.qb-share-facebook:hover { border-color: #1877F2; background: rgba(24,119,242,0.14); }
.qb-share-linkedin:hover { border-color: #0A66C2; background: rgba(10,102,194,0.14); }
.qb-share-telegram:hover { border-color: #26A5E4; background: rgba(38,165,228,0.14); }
.qb-share-note { margin-top: 8px; font-size: 13px; color: #86efac; }
.qb-share-note[hidden] { display: none; }

/* ---------- AI Image Generator + AI Video Generator ---------- */

/* ---------- Style buttons (image + video generators) ---------- */
.gen-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gen-chip { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.88); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; line-height: 1.2; transition: border-color .15s, background .15s; }
.gen-chip:hover { border-color: rgba(200,114,47,0.6); }
.gen-chip.active { background: rgba(200,114,47,0.18); border-color: #C8722F; color: #fff; }
.gen-chip:focus-visible { outline: 2px solid #E3945B; outline-offset: 2px; }

/* ---------- Generator pages: wide two-column layout ---------- */

/* ---------- AI Video Upscaler ---------- */

/* ---------- Bulk Product SEO Optimiser ---------- */

/* ---------- Product Photo Batch Processor ---------- */

/* ---------- Structured Data Checker ---------- */
.sd-card { max-width: 860px; margin: 0 auto; }
.sd-tabs { margin-bottom: 18px; }
.sd-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: #fff; font-size: 15px; font-family: inherit; }
.sd-input:focus { outline: none; border-color: rgba(200,114,47,0.6); }
.sd-go { flex: 0 0 auto; padding: 0 22px; border: 0; border-radius: 10px; font-weight: 700; cursor: pointer; font-family: inherit; }
@media (max-width: 600px) { .sd-go { padding: 14px; } }

/* ---------- Website SEO Audit / Internal Link Planner ---------- */

/* ---------- Print File Checker ---------- */

/* ---------- Photo Library Cleaner ---------- */

/* ---------- Homepage tool hub ---------- */
.hub { padding: 64px 0 24px; }
.hub h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 900px; color: #fff; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 30px; }
#convert { scroll-margin-top: 70px; }
@media (max-width: 520px) { .hub { padding-top: 36px; } }

/* ---------- Robots.txt Generator ---------- */

/* ---------- Sitemap Generator & hosted sitemaps ---------- */
/* assistant voice */
.qb-chat-mic { width: 44px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qb-chat-mic[hidden], .qb-chat-lang[hidden] { display: none; }
.qb-chat-mic svg { width: 18px; height: 18px; }
.qb-chat-mic:hover { border-color: rgba(200,114,47,0.7); }
.qb-chat-mic.qb-mic-on { background: #C8722F; border-color: #C8722F; animation: qbMicPulse 1.2s ease-in-out infinite; }
.qb-chat-mic.qb-mic-talk { background: rgba(200,114,47,0.25); border-color: #C8722F; }
@keyframes qbMicPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,114,47,0.55); } 50% { box-shadow: 0 0 0 7px rgba(200,114,47,0); } }
@media (prefers-reduced-motion: reduce) { .qb-chat-mic.qb-mic-on { animation: none; } }
.qb-chat-lang { margin-left: auto; margin-right: 6px; min-width: 38px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: #fff; font: 600 12px/1 inherit; cursor: pointer; }
.qb-chat-lang:hover { border-color: rgba(200,114,47,0.7); }
/* assistant: language, sound, greeting pop-up */
.qb-chat-head > div:first-child { min-width: 0; }
select.qb-chat-lang { margin-left: auto; margin-right: 0; max-width: 128px; height: 32px; padding: 0 26px 0 10px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23aaa' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center; color: #fff; font: 600 12.5px/1 inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
select.qb-chat-lang option { background: #1c1917; color: #fff; }
.qb-chat-sound { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.qb-chat-sound[hidden] { display: none; }
.qb-chat-sound svg { width: 16px; height: 16px; }
.qb-chat-sound .qb-mute { display: none; }
.qb-chat-sound.qb-off { color: var(--text-dimmer); }
.qb-chat-sound.qb-off .qb-wave { display: none; }
.qb-chat-sound.qb-off .qb-mute { display: inline; }
.qb-chat-lang:hover, .qb-chat-sound:hover { border-color: rgba(200,114,47,0.7); }
.qb-chat-head { gap: 8px; }
.qb-nudge { position: fixed; right: 20px; bottom: 86px; z-index: 9998; max-width: 290px; display: flex; align-items: flex-start; background: #1c1917; border: 1px solid rgba(200,114,47,0.55); border-radius: 14px 14px 4px 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); animation: qbNudgeIn .35s ease-out; }
.qb-nudge-body { flex: 1; text-align: left; background: none; border: none; color: #fff; padding: 13px 4px 13px 15px; cursor: pointer; font-family: inherit; }
.qb-nudge-body strong { display: block; font-size: 14.5px; line-height: 1.35; }
.qb-nudge-body span { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.qb-nudge-x { background: none; border: none; color: var(--text-dimmer); font-size: 20px; line-height: 1; padding: 8px 10px; cursor: pointer; }
.qb-nudge-x:hover { color: #fff; }
@keyframes qbNudgeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qb-nudge { animation: none; } }
@media (max-width: 600px) { .qb-nudge { right: 12px; left: auto; bottom: 78px; max-width: calc(100vw - 24px); } }
/* QR tools */
.qr-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-dim); cursor: pointer; align-self: end; padding-bottom: 12px; }
.qr-check input { width: 16px; height: 16px; accent-color: #C8722F; }
/* QR generator — 3-step layout */
.qrg-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
.qrg-seg input { position: absolute; opacity: 0; pointer-events: none; }
.qrg-seg label { padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.qrg-seg input:checked + label { background: #2a2420; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.qrg-seg input:focus-visible + label { outline: 2px solid #E3945B; }
.qrg-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border-hover); background: rgba(255,255,255,0.04); color: #fff; font: 600 13.5px/1.2 inherit; cursor: pointer; text-decoration: none; }
.qrg-btn2:hover:not(:disabled) { border-color: rgba(200,114,47,0.6); background: rgba(200,114,47,0.08); }
.qrg-btn2:disabled { opacity: 0.45; cursor: not-allowed; }
.qrg-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--text-dimmer); margin: 2px 0 0; }
.qrg-privacy svg { width: 13px; height: 13px; flex-shrink: 0; }
.upload-section.qrg-section { max-width: 1088px; }
/* Domain age */
/* Signature resizer */
/* Sign PDF */
/* GST invoice */
/* Compress PDF to size */
/* Fancy text */
.ft-card{display:flex;flex-direction:column;gap:12px;position:relative}
.ft-lab{font-weight:600;font-size:14px}
.ft-in{width:100%;resize:vertical;min-height:56px;font-size:17px;padding:12px 14px;box-sizing:border-box}
.ft-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.ft-row{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--border)}
.ft-row:first-child{border-top:0}
.ft-name{font-size:12.5px;color:var(--text-dimmer)}
.ft-out{font-size:19px;color:var(--text);overflow-wrap:anywhere;cursor:pointer;line-height:1.35}
.ft-copy{border:1px solid var(--border);background:var(--bg-raised);color:var(--text);border-radius:8px;padding:7px 14px;font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;min-width:74px}
.ft-copy:hover{border-color:var(--border-hover)}
.ft-copy.done{background:#C8722F;border-color:#C8722F;color:#fff}
.ft-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#f4efe8;color:#1a1a1a;box-shadow:0 6px 24px rgba(0,0,0,.35);padding:10px 16px;border-radius:10px;font-size:14px;transition:.2s;z-index:50}
.ft-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:560px){.ft-row{grid-template-columns:1fr auto;gap:4px 10px}.ft-name{grid-column:1/-1}.ft-out{font-size:18px}}
/* AI subtitles */
.st-field{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--text)}
.st-field small{font-weight:400;color:var(--text-dimmer)}
.st-field .sd-input{width:100%;box-sizing:border-box}
/* Bank statement to Excel */
.bk-card{display:flex;flex-direction:column;gap:14px}
.bk-card>.sd-go{padding:12px 20px}
/* Credit panel (shared by AI tools; older pages also style it inline) */
.credit-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-radius:12px;background:rgba(200,114,47,0.08);border:1px solid rgba(200,114,47,0.25)}
.credit-bar .balance{font-size:15px;font-weight:700;color:#fff}
.credit-bar .balance span{color:#E3945B}
.credit-bar .pack-buttons{display:flex;gap:8px;flex-wrap:wrap}
.credit-bar .pack-btn{font-size:13px;font-weight:700;padding:9px 16px;border-radius:8px;cursor:pointer;border:1px solid var(--border);background:rgba(255,255,255,0.03);color:var(--text-dim);font-family:inherit}
.credit-bar .pack-btn:hover{border-color:var(--red);color:#fff}
/* Credits as one line on every AI tool */
.credit-bar.qb-compact:not(.hidden){display:block!important}
.credit-bar.qb-compact{padding:0!important;border:0!important;background:none!important;margin:0 0 16px!important}
.qb-credit-line{margin:0;font-size:14px;color:var(--text-dim);line-height:1.6}
.qb-credit-line strong{color:var(--text)}
.qb-credit-line .qb-cl-bal span{color:inherit}
.qb-credit-line a{color:#E3945B;font-weight:600;text-decoration:underline}
/* Subtitles: language dropdown and words box look the same (Safari draws its own short select otherwise) */
.st-field input.sd-input,.st-field select.sd-input{height:48px;padding:0 14px;font-size:15px;border-radius:10px}
.st-field select.sd-input{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.credit-bar .qb-credit-line{font-size:14px!important;line-height:1.6!important;font-weight:400!important;color:var(--text-dim)!important;margin:0!important}
.qb-credit-line .qb-cl-ok{color:#86efac!important}
.credit-bar .qb-credit-line{max-width:none!important}
#hubCreditBar .qb-credit-line{white-space:nowrap}
@media (max-width:760px){#hubCreditBar .qb-credit-line{white-space:normal}}
/* Text & SEO tools */
.tt-card{display:flex;flex-direction:column;gap:14px}
.tt-area{width:100%;box-sizing:border-box;resize:vertical;min-height:180px;font-size:15px;line-height:1.55;padding:12px 14px;font-family:inherit}
.tt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tt-stats div{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-raised)}
.tt-stats b{display:block;font-size:22px;color:var(--text)}
.tt-stats span{font-size:12.5px;color:var(--text-dimmer)}
.tt-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tt-note{font-size:13px;color:var(--text-dim)}
.tt-more{border:1px solid var(--border);border-radius:12px;padding:10px 14px}
.tt-more summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--text)}
.tt-more[open] summary{margin-bottom:10px}
.tt-limits{display:flex;flex-direction:column;gap:8px}
.tt-lim{display:grid;grid-template-columns:150px 1fr 110px;gap:10px;align-items:center;font-size:13px;color:var(--text-dim)}
.tt-lim i{height:6px;border-radius:6px;background:var(--border);overflow:hidden}
.tt-lim em{display:block;height:100%;background:#86efac}
.tt-lim.over em{background:#f87171}.tt-lim.over b{color:#f87171}
.tt-lim b{text-align:right;font-weight:600;color:var(--text)}
.tt-top{display:flex;flex-wrap:wrap;gap:6px}
.tt-chip{padding:5px 10px;border:1px solid var(--border);border-radius:20px;font-size:13px;color:var(--text)}
.tt-chip b{color:#E3945B;margin-left:4px}
.tt-inline{flex:1;min-width:200px}
.tt-cases{display:flex;flex-wrap:wrap;gap:8px}
.tt-cases button{border:1px solid var(--border);background:var(--bg-raised);color:var(--text);border-radius:8px;padding:9px 14px;font-size:14px;font-family:inherit;cursor:pointer}
.tt-cases button:hover{border-color:var(--border-hover)}
.tt-cases button.on{border-color:#C8722F;color:#E3945B}
.tt-card .sd-go{padding:11px 20px;font-size:14.5px}
.tt-pwout{display:flex;gap:8px;align-items:stretch}
.tt-pwout code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;padding:13px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-raised);font-size:16px;color:var(--text);font-family:ui-monospace,Menlo,Consolas,monospace}
.tt-pwout code{font-size:19px;letter-spacing:.5px}
.tt-opts{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.tt-opts .qr-check{align-self:center;padding:0}
.tt-wide{flex:1 1 100%}
.tt-wide input[type=range]{width:100%;accent-color:#C8722F}
.tt-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tt-diff{border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:520px}
.tt-diff:empty{display:none}
.tt-diff table{width:100%;border-collapse:collapse;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.tt-diff td{padding:2px 8px;vertical-align:top;white-space:pre-wrap;word-break:break-word;color:var(--text)}
.tt-diff td.ln{width:1%;color:var(--text-dimmer);text-align:right;user-select:none}
.tt-diff td.s{width:1%;color:var(--text-dimmer)}
.tt-diff tr.add td{background:rgba(34,197,94,.13)}.tt-diff tr.del td{background:rgba(248,113,113,.13)}
.tt-wdiff{padding:12px 14px;white-space:pre-wrap;line-height:1.7;font-size:14.5px;color:var(--text)}
.tt-wdiff ins{background:rgba(34,197,94,.22);text-decoration:none;border-radius:3px}
.tt-wdiff del{background:rgba(248,113,113,.22);border-radius:3px}
.tt-meter{height:8px;border-radius:8px;background:var(--border);overflow:hidden}
.tt-meter i{display:block;height:100%;transition:width .2s}
.tt-meter .l0{background:#f87171}.tt-meter .l1{background:#fbbf24}.tt-meter .l2{background:#86efac}.tt-meter .l3{background:#22c55e}
.tt-card small .ok{color:#86efac}.tt-card small .warn{color:#fbbf24}
@media (max-width:700px){.tt-stats{grid-template-columns:1fr 1fr}.tt-two{grid-template-columns: minmax(0, 1fr)}.tt-lim{grid-template-columns:110px 1fr 90px}}
/* SEO Autopilot */
/* Slug + compare v2 */
.tt-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;color:var(--text-dim);user-select:none}
.tt-switch input{position:absolute;opacity:0;width:0;height:0}
.tt-switch i{width:36px;height:20px;border-radius:20px;background:var(--border);position:relative;flex:0 0 auto;transition:.15s}
.tt-switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.tt-switch input:checked+i{background:#C8722F}.tt-switch input:checked+i::after{left:18px}
.tt-switch input:focus-visible+i{outline:2px solid #E3945B;outline-offset:2px}
.tt-grow{flex:1}
.tt-toolbar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-raised)}
.tt-toolbar .qrg-btn2{height:38px;padding:0 14px}
.tt-diffstats{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.tt-diffstats:empty{display:none}
.tt-diffstats span{padding:5px 11px;border-radius:20px;border:1px solid var(--border);color:var(--text-dim)}
.tt-diffstats .add{color:#86efac;border-color:rgba(134,239,172,.3)}.tt-diffstats .del{color:#fca5a5;border-color:rgba(248,113,113,.3)}.tt-diffstats .chg{color:#fcd34d;border-color:rgba(252,211,77,.3)}
.tt-diffstats .sim{margin-left:auto;color:var(--text)}.tt-diffstats .sim b{color:#E3945B}
.tt-diffstats .ok{color:#86efac;border-color:rgba(134,239,172,.3)}
.tt-split{table-layout:fixed}
.tt-split col.ln{width:42px}
.tt-split td{border-bottom:1px solid rgba(255,255,255,.03)}
.tt-split td.ln{background:rgba(255,255,255,.02)}
.tt-split td.l.del,.tt-split tr.chg td.l{background:rgba(248,113,113,.10)}
.tt-split td.r.add,.tt-split tr.chg td.r{background:rgba(34,197,94,.10)}
.tt-split td.gap{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.025) 6px 12px)}
.tt-diff del{background:rgba(248,113,113,.35);color:#fff;text-decoration:none;border-radius:3px}
.tt-diff ins{background:rgba(34,197,94,.35);color:#fff;text-decoration:none;border-radius:3px}
.tt-wdiff del{text-decoration:line-through}
@media (max-width:700px){.tt-diffstats .sim{margin-left:0}}
/* YouTube subscriber goal tracker */
/* Sliders: one clear look everywhere (Safari ignores accent-color on the track). The hidden before/after slider keeps its own style. */
input[type=range]:not(#baRange){-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:linear-gradient(to right,#C8722F 0,#C8722F var(--p,50%),#5a524a var(--p,50%),#5a524a 100%);outline:none;cursor:pointer;margin:10px 0}
input[type=range]:not(#baRange)::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #C8722F;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer;margin-top:0}
input[type=range]:not(#baRange)::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #C8722F;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:pointer}
input[type=range]:not(#baRange)::-moz-range-track{background:transparent;border:0}
input[type=range]:not(#baRange):focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(200,114,47,.35)}
input[type=range]:not(#baRange):disabled{opacity:.5;cursor:not-allowed}
/* ---- AI create tools (js/aiCreate.js) */
.st-field textarea.sd-input{min-height:96px;padding:12px 14px;font-size:15px;border-radius:10px;resize:vertical;font-family:inherit;line-height:1.5}
.acr-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.acr-note{font-size:12.5px;color:var(--text-dimmer);margin:10px 0 0}
.acr-actions .qrg-btn2{min-height:44px}
/* AI create — loading panel + result buttons */
.acr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:11px;font:700 14.5px/1 inherit;font-family:inherit;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}
.acr-btn svg{width:17px;height:17px}
.acr-primary{background:var(--red);color:#fff;border:0}
.acr-primary:hover{filter:brightness(1.08)}
.acr-ghost{background:rgba(255,255,255,.04);color:#fff;border:1px solid var(--border)}
.acr-ghost:hover{border-color:rgba(200,114,47,.6);background:rgba(200,114,47,.08)}
.acr-actions{margin-top:16px}
@media (max-width:600px){.acr-actions .acr-btn{flex:1 1 100%}}
/* YouTube goal tracker — dark theme to match the other tools */
/* exam pages: spec table + exam links */
/* ---- Exam photo & signature resizer layout */
.upload-section:has(.ex-grid){max-width:980px}
/* ---- Form-field baseline (every page). A text box must never collapse, look unstyled or be shorter than its button.
   Stacked rows (mobile) use flex-direction:column, where `flex:1` would squash the field to its text height — undone here. */
input.sd-input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select.sd-input{min-height:46px}
/* Every text box and dropdown on every page: at least 44px tall (easy to tap, never squashed). */
main :is(input[type=text],input[type=number],input[type=email],input[type=url],input[type=password],input[type=search],input[type=date],input:not([type]),select){min-height:44px;box-sizing:border-box}
/* Dropdowns and boxes that were left with browser defaults get the site look. */
main select:not([class]),main input[type=number]:not([class]),main input[type=text]:not([class]){padding:0 12px;border-radius:10px;background-color:rgba(255,255,255,.04);border:1px solid var(--border);color:#fff;font:500 15px/1.2 inherit;font-family:inherit}
main select:not([class]) option{background:#1a1716}
/* Links inside sentences are underlined, so they are recognisable without relying on colour. */
.guide p a,.guide li a,.calc-faq p a,.faq-item p a,.conv-hero p a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.footer-trademark{color:rgba(255,255,255,.55)!important}
/* ---- AI create tools: form on the left, result on the right (stacks on phones) */
.upload-section:has(.acr-layout){max-width:1200px}
.acr-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){.acr-layout{grid-template-columns: minmax(0, 1fr)}}
/* ---- Salary slip & rent receipt */
.ss-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.ss-grid{grid-template-columns: minmax(0, 1fr)}}
.ss-h{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.ss-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 32px;gap:6px;margin-bottom:6px;align-items:center}
.ss-row .sd-input{min-height:42px;padding:0 10px;font-size:14px}
.ss-x{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-dimmer);font-size:18px;cursor:pointer}
.ss-x:hover{color:#fca5a5;border-color:rgba(248,113,113,.5)}
.ss-mini{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin-top:10px;font-size:13px;color:var(--text-dimmer)}
.ss-mini b{color:#fff;text-align:right}
.ss-warn{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:#fcd34d;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);border-radius:8px;padding:8px 10px}
/* ---- money calculators (inputs left, results right) */
.guide-link{margin:0 0 22px;padding:14px 16px;border:1px solid rgba(227,148,91,.28);background:rgba(227,148,91,.07);border-radius:12px;font-size:15px;color:var(--text-dim)}
/* Kruti Dev converter */
.kd-wrap{max-width:1180px;margin:0 auto}
.kd-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.kd-bar .gen-chips{margin:0}
.kd-grid{display:grid;grid-template-columns: minmax(0, 1fr);gap:16px}
@media (min-width:900px){.kd-grid{grid-template-columns:1fr 1fr}}
.kd-pane{display:flex;flex-direction:column;margin:0}
.kd-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.kd-head span{font-weight:700;color:#fff;font-size:14.5px}
.kd-head small{color:var(--text-dimmer);font-size:12.5px}
.kd-font{font-size:13px;color:var(--text-dim);display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.kd-text{min-height:260px;resize:vertical;font:15px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;width:100%}
.kd-text.kd-hi{font:17px/1.8 "Noto Sans Devanagari","Mangal","Nirmala UI",system-ui,sans-serif}
.kd-text.kd-kruti{font:20px/1.7 "Kruti Dev 010","KrutiDev010",monospace}
.kd-note{margin-top:14px}
/* Age calculator */
/* Wide tools (form + result side by side): centre the page heading over the tool so edges line up */
main:has(.acr-layout, .kd-wrap, .gen-section) .conv-hero{text-align:center;padding-bottom:32px}
main:has(.acr-layout, .kd-wrap, .gen-section) .conv-hero .container{max-width:900px!important}
main:has(.acr-layout, .kd-wrap, .gen-section) .conv-hero p{max-width:640px;margin-left:auto;margin-right:auto}
main:has(.acr-layout, .kd-wrap, .gen-section) .conv-checklist{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.kd-wrap{max-width:1200px;padding:0 24px 64px}
.upload-section:has(.kd-wrap){max-width:none;padding:0}
/* Amazon seller tools */
.acr-layout>.sd-card{margin:0;max-width:none;min-width:0}
/* Drag & zoom frame editor */
input[type=range]{accent-color:#c8722f}
/* Consistent spacing inside every tool card */
.st-field{gap:8px}
/* Size chart maker */
/* Older calculators & forms: same rhythm as the newer tools */
.calc-faq .guide-link{margin-top:0}
.calc-faq > .guide-link + h2{margin-top:20px}
/* Genuine-use / safety notices on document and payment tools */
/* Characters */
.ch-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02);display:flex;flex-direction:column;transition:border-color .15s}
.ch-card.active{border-color:#E3945B;box-shadow:0 0 0 2px rgba(227,148,91,.35)}
.ch-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#f2efe9;display:block}
.ch-acts{display:flex;gap:6px;padding:8px 12px 12px;align-items:center}
/* ---- What's next panel (js/nextSteps.js) */
.qb-next{max-width:1100px;margin:22px auto 8px;padding:20px 22px;border:1px solid rgba(227,148,91,.35);border-radius:16px;background:linear-gradient(180deg,rgba(227,148,91,.08),rgba(255,255,255,.02));box-sizing:border-box;width:calc(100% - 32px);animation:qbnIn .35s ease}
.qb-next.qbn-float{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);margin:0;z-index:60;max-width:760px;background:#1d1a17;box-shadow:0 18px 50px rgba(0,0,0,.45)}
@keyframes qbnIn{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.qb-next.qbn-float{animation:none}
.qbn-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.qbn-head b{display:block;font-size:17px;margin-bottom:3px}
.qbn-head span{font-size:13.5px;opacity:.75}
.qbn-x{background:none;border:0;color:inherit;opacity:.6;font-size:16px;cursor:pointer;padding:4px 6px}
.qbn-x:hover{opacity:1}
.qbn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.qbn-card{display:flex;flex-direction:column;gap:4px;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.qbn-card:hover{border-color:#E3945B;transform:translateY(-1px)}
.qbn-card.first{border-color:rgba(227,148,91,.55)}
.qbn-card b{font-size:14.5px}
.qbn-card small{font-size:12.5px;opacity:.7;line-height:1.4}
.qbn-go{margin-top:auto;padding-top:6px;font-size:12.5px;font-weight:700;color:#E3945B}
.qbn-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#1d1a17;border:1px solid rgba(227,148,91,.5);color:#f3ece5;padding:11px 18px;border-radius:999px;font-size:14px;z-index:70;box-shadow:0 10px 30px rgba(0,0,0,.4)}
@media (max-width:640px){.qb-next{padding:16px}}
.qb-next.qbn-inline{width:100%;max-width:none;margin:16px 0 4px;padding:16px 18px}
.qb-next.qbn-inline .qbn-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.qb-next.qbn-inline .qbn-head b{font-size:16px}
/* ---- Spacing fixes from the site-wide spacing audit (keep blocks from touching) */
.qrg-privacy ~ .error-box{margin-top:14px}
/* ---- Tool ratings */
.qb-rating{display:flex;width:fit-content;max-width:100%;align-items:center;gap:8px;margin:14px 0 18px;padding:6px 14px 6px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.035);font-size:13.5px;line-height:1.2;color:var(--text-dim,#bbb);box-sizing:border-box;flex-wrap:wrap}
.qb-rating.qbr-center{margin-left:auto;margin-right:auto}.qb-rating.qbr-right{margin-left:auto}.qb-rating.qbr-left{margin-left:0;margin-right:auto}
.qb-rating .qbr-st{color:#fbbf24;letter-spacing:1px;font-size:14px;line-height:1}.qb-rating .qbr-st i{font-style:normal;color:rgba(255,255,255,.2)}.qb-rating b{color:#fff;font-weight:700}
.qbr{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.qbr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.qbr-q{font-weight:700;font-size:14.5px}
.qbr-stars{display:flex;gap:4px}.qbr-stars button{background:none;border:0;cursor:pointer;font-size:28px;line-height:1;padding:2px 3px;color:rgba(255,255,255,.22);transition:color .12s,transform .12s}
.qbr-stars button.on{color:#fbbf24}.qbr-stars button:hover{transform:scale(1.12)}.qbr-stars button:focus-visible{outline:2px solid #E3945B;border-radius:6px}
.qbr-thanks{display:flex;flex-direction:column;gap:10px}.qbr-thanks span{font-size:13.5px;opacity:.85}.qbr-thanks small{opacity:.7}
.qbr-thanks textarea,.qbr-thanks input[type=email]{width:100%;box-sizing:border-box;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px;color:inherit;font:inherit;font-size:14px}
.qbr-thanks textarea:focus,.qbr-thanks input:focus{outline:none;border-color:#E3945B}.qbr-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.qbr-acts{display:flex;gap:10px;flex-wrap:wrap}.qbr-send{background:#C8722F;color:#fff;border:0;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer}.qbr-send:disabled{opacity:.6}
.qbr-skip{background:none;border:1px solid rgba(255,255,255,.16);color:inherit;border-radius:10px;padding:10px 16px;cursor:pointer}
.qbr-toast{position:fixed;left:16px;bottom:16px;z-index:65;width:min(380px,calc(100vw - 32px));box-sizing:border-box;background:#1d1a17;border:1px solid rgba(227,148,91,.45);border-radius:16px;padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.45);animation:qbnIn .35s ease}
.qbr-toast .qbr{margin:0;padding:0;border:0}.qbr-toast .qbn-x{position:absolute;top:8px;right:8px}.qbr-toast .qbr-row{padding-right:22px}
@media (max-width:640px){.qbr-toast{bottom:88px}}
/* ---- Bulk sections (js/batchKit.js + js/bulkTools.js) */
.bk-card{max-width:1100px;margin:0 auto;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:linear-gradient(180deg,rgba(227,148,91,.06),rgba(255,255,255,.015));padding:26px 28px;box-sizing:border-box}
@media (max-width:640px){.bk-card{padding:20px 16px}}
.qbr-form:empty{display:none}.qbr-form{display:flex;flex-direction:column;gap:10px;margin-top:14px}.qbr-form .qbr-sel{font-size:14px}.qbr-form .qbr-ask{font-size:13.5px;opacity:.85}.qbr-form small{opacity:.7}
.qbr-form textarea,.qbr-form input[type=email]{width:100%;box-sizing:border-box;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px;color:inherit;font:inherit;font-size:14px}
.qbr-form textarea:focus,.qbr-form input:focus{outline:none;border-color:#E3945B}.qbr-err{color:#fca5a5}

/* ---- Original / AI-cleaned switch (both versions kept — no paying twice) */
.qb-ver{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.qb-ver button{background:none;border:0;color:inherit;opacity:.7;font:inherit;font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:9px;cursor:pointer}
.qb-ver button.on{background:#C8722F;color:#fff;opacity:1}.qb-ver button:not(.on):hover{opacity:1;background:rgba(255,255,255,.06)}
.qb-ver.hidden{display:none}
.qb-next.qbn-inline{grid-column:1 / -1;flex-basis:100%}

/* Amazon Image Checker: once photos are checked, settings sit on top and the report gets the full width */
/* Buttons keep their label on one line and a steady height on every screen size */
.action-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;white-space:nowrap;line-height:1.2}
.typing-tool-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:480px){.typing-tool-actions .action-btn{flex:1 1 auto}}
.acr-btn{flex-shrink:0}
@media (max-width:480px){.typing-tool-actions{gap:8px}.typing-tool-actions .action-btn{padding:10px 12px}}
/* Amazon checker: compact settings bar and summary */
/* Scan to PDF: captured page thumbnails */
/* Scan to PDF: camera with live page outline, looks, corner editor */
/* Page board (Merge / Split PDF) */
/* Split PDF */
/* Image to PDF: page settings + true page previews */
/* Compress PDF levels + before/after */
/* Image studio (Resize Image) */
.is-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;margin-top:18px;align-items:start}
.is-preview{position:sticky;top:88px}
.is-stage{display:flex;align-items:center;justify-content:center;min-height:240px;max-height:420px;padding:12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.is-stage canvas{max-width:100%;max-height:396px;width:auto;height:auto;box-shadow:0 2px 12px rgba(0,0,0,.45)}
.is-stage canvas.is-alpha{background:repeating-conic-gradient(#3a3631 0 25%,#2c2925 0 50%) 0 0/16px 16px}
.is-meta{margin:10px 0 0;font-size:13px;color:var(--text-dim);line-height:1.6;text-align:center}
.is-meta b{color:#fff}.is-arrow{color:#E3945B;margin:0 4px}
.is-ctrl{display:flex;flex-direction:column;gap:16px;min-width:0}
.is-dims{display:flex;align-items:flex-end;gap:10px}
.is-dims label{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text-dim)}
.is-dims input{height:42px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:#fff;padding:0 12px;font:inherit;font-size:15px;font-weight:600;width:100%}
.is-unit{font-size:13px;color:var(--text-dimmer);padding-bottom:12px}
.is-lock{flex:0 0 auto;width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:rgba(255,255,255,.45);cursor:pointer;display:flex;align-items:center;justify-content:center}
.is-lock.on{background:rgba(200,114,47,.14);color:#E3945B;border-color:rgba(200,114,47,.4)}
.is-scale{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--text-dim);font-weight:600}
.is-scale span{margin-right:2px}
.is-scale button,.is-mini{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:#fff;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.is-scale button:hover,.is-mini:hover{border-color:var(--border-hover)}
.is-field{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:var(--text-dim)}
.is-field b{color:#fff}
.is-seg{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.is-seg button{flex:1;min-height:38px;padding:6px 8px;background:transparent;border:0;border-right:1px solid var(--border);color:var(--text-dim);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.is-seg button:last-child{border-right:0}
.is-seg button.on{background:rgba(200,114,47,.16);color:#fff}
.is-bg{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--text-dim)}
.is-bg input[type=color]{width:42px;height:30px;border:1px solid var(--border);border-radius:8px;background:none;padding:2px;cursor:pointer}
.is-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.is-row2 select{height:40px}
.is-row2 input[type=range]{width:100%;accent-color:#c8722f;height:40px}
.is-presets{border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.02)}
.is-presets summary{cursor:pointer;padding:12px 14px;font-size:13.5px;font-weight:700;color:#fff;list-style-position:inside}
.is-presets[open] summary{border-bottom:1px solid var(--border)}
.is-pg-h{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#E3945B;margin-bottom:6px}
.is-chips{display:flex;flex-wrap:wrap;gap:6px}
.is-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 10px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:#fff;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
.is-chip small{font-size:11px;color:var(--text-dimmer);font-weight:500}
.is-chip:hover{border-color:var(--border-hover)}
.is-chip.on{border-color:#E3945B;background:rgba(200,114,47,.14)}
@media (max-width:760px){.is-wrap{grid-template-columns: minmax(0, 1fr)}.is-preview{position:static}.is-stage{min-height:180px}.is-seg button{font-size:12.5px}}
/* converter result: sizes + preview */
/* New background editor */
/* Subtitle generator: burn captions into the video */
.tt-lab{display:flex;align-items:center;gap:8px}
.tt-open{margin-left:auto;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:#E3945B;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.tt-open:hover{border-color:var(--border-hover)}
/* SEO audit report */
.upload-section:has(.au-cards){max-width:1080px}
/* SEO audit: tidier speed card */
/* Bulk Product SEO: score, review */
.ps-item header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
/* Product SEO: same height for every text box and dropdown (Safari draws selects shorter otherwise) */
/* Every dropdown draws like a text box in every browser (Safari otherwise ignores padding/height on native selects,
   so a dropdown next to a text box ends up shorter or taller). Own chevron, same box model as inputs. */
select:not([multiple]):not([size]):not(.qb-chat-lang) { -webkit-appearance: none !important; appearance: none !important; padding-right: 36px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23aaa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 13px center !important; background-size: 12px 8px !important; }
select:not([multiple]):not([size]) option { background-color: #1a1716; color: #fff; }
select.sd-input { line-height: 20px; }
input.sd-input { line-height: 20px; }
.st-field{justify-content:flex-end} /* fields side by side: boxes line up even when one label wraps to two lines */
/* ---- Site search: results list, voice, search window ---- */
.qs-wrap { position: relative; }
.qs-mic, .qs-lang { position: absolute; top: 50%; transform: translateY(-50%); border: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; }
.qs-mic { right: 10px; width: 40px; height: 40px; border-radius: 50%; background: rgba(200,114,47,0.14); color: #E3945B; }
.qs-mic svg { width: 20px; height: 20px; }
.qs-mic:hover { background: rgba(200,114,47,0.26); color: #fff; }
.qs-mic.on { background: #C8722F; color: #fff; animation: qsPulse 1.2s ease-out infinite; }
@keyframes qsPulse { 0% { box-shadow: 0 0 0 0 rgba(200,114,47,0.55); } 100% { box-shadow: 0 0 0 14px rgba(200,114,47,0); } }
.qs-wrap .qs-lang { right: 58px; height: 32px; min-width: 52px; padding: 0 22px 0 10px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23aaa' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center; color: var(--text-dim); font-size: 12.5px; font-weight: 700; box-sizing: border-box; }
.qs-wrap .qs-lang span { pointer-events: none; white-space: nowrap; }
.qs-wrap .qs-lang select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0 !important; border: 0; font-size: 16px; }
.qs-lang:hover { color: #fff; background: rgba(255,255,255,0.12); }
.qs-wrap input[type=search]::-webkit-search-cancel-button { margin-right: 4px; }
.qs-listening input { border-color: #C8722F !important; }
.qs-drop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; max-height: min(460px, 62vh); overflow-y: auto; padding: 6px; border-radius: 14px; background: #1a1715; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 18px 50px rgba(0,0,0,0.55); text-align: left; }
.qs-drop.hidden, .qs-list:empty { display: none; }
.qs-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; }
.qs-item:hover, .qs-item.on { background: rgba(200,114,47,0.13); }
.qs-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,0.05); color: #E3945B; }
.qs-ico svg { width: 18px; height: 18px; }
.qs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qs-txt b { color: #fff; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-txt small { color: var(--text-dim); font-size: 12.5px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qs-b { flex-shrink: 0; font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(63,178,127,0.14); color: #6fd3a3; }
.qs-b-ai { background: rgba(200,114,47,0.18); color: #E3945B; }
.qs-b-guide { background: rgba(255,255,255,0.08); color: var(--text-dim); }
.qs-h { padding: 10px 12px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dimmer); display: flex; align-items: center; gap: 6px; }
.qs-h svg { width: 15px; height: 15px; color: #E3945B; }
.qs-h-ai { color: #E3945B; }
.qs-recent { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.qs-recent:hover { background: rgba(255,255,255,0.06); }
.qs-recent svg { width: 16px; height: 16px; color: var(--text-dimmer); flex-shrink: 0; }
.qs-ai, .qs-note { margin: 0; padding: 14px; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qs-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(200,114,47,0.3); border-top-color: #E3945B; animation: qsSpin .8s linear infinite; flex-shrink: 0; }
@keyframes qsSpin { to { transform: rotate(360deg); } }
.qs-more { padding: 8px 12px 6px; font-size: 12.5px; color: var(--text-dimmer); text-align: center; }
/* header button */
.qs-open { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text-dim); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.qs-open svg { width: 17px; height: 17px; }
.qs-open:hover { color: #fff; border-color: var(--border-hover, rgba(255,255,255,0.25)); }
@media (max-width: 1180px) { .qs-open span { display: none; } .qs-open { width: 38px; padding: 0; justify-content: center; } }
/* search window */
.qs-lock { overflow: hidden; }
.qs-modal { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.qs-modal.hidden { display: none; }
.qs-panel { width: 100%; max-width: 640px; max-height: 78vh; display: flex; flex-direction: column; border-radius: 16px; background: #1a1715; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 30px 80px rgba(0,0,0,0.6); overflow: hidden; }
.qs-field { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.qs-field > svg { width: 20px; height: 20px; color: var(--text-dimmer); flex-shrink: 0; }
.qs-field input { flex: 1; min-width: 0; height: 60px; border: 0; background: none; color: #fff; font: inherit; font-size: 17px; outline: none; padding-right: 120px; }
.qs-list { overflow-y: auto; padding: 6px; flex: 1; }
.qs-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dimmer); }
.qs-foot kbd { display: inline-block; padding: 1px 6px; margin: 0 2px; border-radius: 5px; border: 1px solid var(--border); font: inherit; font-size: 11px; }
.qs-x { display: none; flex-shrink: 0; height: 40px; padding: 0 2px 0 6px; align-items: center; border: 0; background: none; color: #E3945B; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; order: 9; }
.qs-close { border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
@media (max-width: 640px) {
  .qs-modal { padding: 0; align-items: stretch; }
  .qs-panel { max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .qs-foot span { display: none; } .qs-foot { justify-content: flex-end; }
  .qs-drop { max-height: 58vh; }
  .qs-foot { display: none; }
  .qs-x { display: inline-flex !important; }
  .qs-field input { padding-right: 92px; }
  .qs-field .qs-mic { right: 76px; } .qs-field .qs-lang { right: 122px; }
  .qs-field input { padding-right: 176px; }
}
@media (max-width: 640px) { .qs-field input::-webkit-search-cancel-button { display: none; } }
/* Crop image: select-an-area mode */
/* SEO Autopilot extras */
/* Store Agent */
.sa-prod header { display: flex; align-items: center; gap: 12px; }
.sa-prod header img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #222; flex-shrink: 0; }
.sa-prod header b { flex: 1; min-width: 0; color: #fff; font-size: 15px; overflow-wrap: anywhere; }

/* Store Agent explainer */

/* Score / count tiles (replaces the old circles: cleaner, never cramped) */

/* Resize Image: roomier, grouped layout */
/* Print File Checker: wider workspace once a file is loaded */

/* "Change file" control at the top of every tool card */
.qb-cardbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.qb-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text); }
.qb-fname:empty::before { content: "Your file"; color: var(--text-dimmer); }
.qb-cardbar[hidden], .qb-change[hidden] { display: none; }
.qb-moved { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; }
.qb-change { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-hover); background: rgba(255,255,255,0.04); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.qb-change:hover { border-color: rgba(200,114,47,0.6); color: #E3945B; }
.file-card-top > .qb-change { margin-left: auto; }

.qb-btns { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.qb-btns > button { height: 36px !important; padding: 0 14px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex; align-items: center; gap: 6px; }
/* New PDF tools (rotate, watermark, page numbers, PDF to JPG/Word/Excel): wide workspace, grouped settings */

/* Robots.txt generator: settings left, live file right */
/* SEO tools: the card widens once a report is showing */
.upload-section:has(> .sd-card #report:not(.hidden):not(:empty)) { max-width: 1120px; }
/* Typing tools: a roomier writing area */
.ty-page { max-width: 960px; }
.ty-page #ty-input { min-height: 260px; font-size: 18px; line-height: 1.7; }
/* EMI calculator: inputs + result left, yearly schedule right */
/* Phone: small text-style buttons get a finger-sized tap area */
@media (max-width: 600px) { .fp-swap-label { font-size: 11px; } }
/* Photo pickers at the top of a tool: a proper drop target, not a small button */
/* Marketplace Seller Agent */

/* Store Agent: draft products */
/* Seller Agent — live Amazon connection */
/* Seller Agent — create on Amazon */
/* AI image generator — one-tap controls */
/* Free-credits banner under the header (signed-out / unverified visitors) */
.qb-gift-bar { background: linear-gradient(90deg, rgba(200,114,47,.16), rgba(200,114,47,.06)); border-bottom: 1px solid rgba(200,114,47,.35); }
.qb-gift-in { max-width: 1400px; margin: 0 auto; padding: 10px 56px 10px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; position: relative; font-size: 14px; }
.qb-gift-msg b { color: #fff; } .qb-gift-msg span { color: rgba(255,255,255,.78); }
.qb-gift-acts { display: flex; gap: 10px; }
.qb-gift-primary { background: #A9581C; color: #fff; font-weight: 700; padding: 6px 14px; border-radius: 8px; text-decoration: none; font-size: 13.5px; }
.qb-gift-secondary { color: #fff; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); text-decoration: none; font-size: 13.5px; }
.qb-gift-x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: rgba(255,255,255,.7); font-size: 22px; cursor: pointer; line-height: 1; }
@media (max-width: 640px) { .qb-gift-in { padding: 10px 44px 10px 16px; justify-content: flex-start; font-size: 13px; } .qb-gift-msg span { display: block; } }
/* SEO audit — speed tips and AI speed plan */
/* SEO audit — full-width speed tips, code changes, site-check fixes */
/* SEO audit / autopilot — collapsible Errors / Warnings / Tips groups */
.qb-credit-line::first-letter{text-transform:uppercase}
.ap-cbar .credit-bar.qb-compact{margin:0 0 2px!important}
/* Speed (layout shift): <head> marks which bars JS will add (html.qb-ann / html.qb-gift / html.qb-in), so their space is
   kept free from the first paint instead of the page jumping down when they appear. JS removes the mark as it adds them. */
html.qb-ann body::before{content:"";display:block;height:35px}
html.qb-gift body:not(:has(#signinPrompt)) #site-header{min-height:116px}
@media (max-width:1147px){html.qb-gift body:not(:has(#signinPrompt)) #site-header{min-height:143px}}
@media (max-width:947px){html.qb-gift body:not(:has(#signinPrompt)) #site-header{min-height:160px}}
@media (max-width:643px){html.qb-gift body:not(:has(#signinPrompt)) #site-header{min-height:174px}}
@media (max-width:640px){html.qb-ann body::before{height:33px}}
@media (max-width:371px){html.qb-gift body:not(:has(#signinPrompt)) #site-header{min-height:190px}}
html.qb-pend [data-anon].hidden{display:block!important;pointer-events:none;opacity:.6}
.ft-list:empty{min-height:100vh}
/* ---- Instagram Reel Agent ---- */

@media (max-width:520px){.ss-row{grid-template-columns:minmax(0,1fr) 76px 28px;gap:5px}.ss-row .sd-input{font-size:13.5px;padding:0 8px}}

/* ---- Phones: give tools the full width (Nov 2026). Outer section + card + inner padding used to stack to ~57px a
   side, squeezing forms to ~300px. Now ~30px. Also: bigger, brand-coloured checkboxes/radios, and segmented
   toggles that share the row instead of wrapping each option onto three lines. ---- */
main input[type="checkbox"], main input[type="radio"] { accent-color: #C8722F; }
main input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin-top: 1px; }
@media (max-width: 600px) {
  .upload-section { padding-left: 14px; padding-right: 14px; }
  .file-card { padding: 20px 16px; border-radius: 14px; }
  main .container { padding-left: 14px; padding-right: 14px; }
  main .upload-section > [class*="-wrap"] { padding-left: 0; padding-right: 0; }
  .seg-toggle { display: flex; max-width: 100%; box-sizing: border-box; }
  .seg-toggle label { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 9px 6px; line-height: 1.3; }
}

/* white text on brand orange needs the deeper shade to be readable (contrast 5.1:1) */
.btn-convert { background-color: #A9581C; border-color: #A9581C; }