: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; }
.logo .accent { color: var(--red); }
.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-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; } }
.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; }

.hero-picker-wrap { display: flex; justify-content: center; }
@media (min-width: 1024px) { .hero-picker-wrap { justify-content: flex-end; } }
.hero #dropzoneWrap, .hero #fileCardWrap { margin-top: 48px; }
.hero .dropzone { max-width: 720px; margin: 0 auto; }

/* ---------- 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 ---------- */
.catalog { padding: 80px 0; }
.catalog h2 { font-size: 28px; font-weight: 800; margin: 0 0 8px; }
.catalog > .container > p { color: var(--text-dimmer); font-size: 14px; margin: 0 0 40px; }

/* ---------- 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 { 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; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 2px dashed rgba(255,255,255,0.15); background: rgba(255,255,255,0.02); border-radius: 20px;
  padding: 64px 32px; transition: border-color 0.15s, background 0.15s;
}
.dropzone.dragging { border-color: var(--red); background: rgba(200,114,47,0.05); }
.dropzone svg.cloud { width: 56px; height: 56px; color: var(--red); margin-bottom: 16px; }
.dropzone h3 { margin: 0; font-size: 20px; font-weight: 800; }
.dropzone p { margin: 4px 0 0; color: var(--text-dimmer); font-size: 14px; }
.dropzone .privacy-note { font-size: 12px; color: var(--text-dimmest); margin-top: 4px; }
.select-file-btn {
  margin-top: 24px; display: flex; align-items: center; gap: 8px;
  background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 13px 24px; font-size: 14px; font-weight: 700;
}
.select-file-btn:hover { background: var(--red-hover); }
.select-file-btn svg { width: 16px; height: 16px; }

.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-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.file-badge {
  width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 10px; font-weight: 800; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7);
}
.file-badge.accent { background: var(--red); color: #fff; }
.file-info .name { font-size: 14px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.file-info .size { font-size: 12px; color: var(--text-dimmer); margin: 2px 0 0; }
.file-card-top svg.arrow { width: 16px; height: 16px; color: var(--text-dimmest); flex-shrink: 0; }

.action-area { margin-top: 24px; }
.btn-full { width: 100%; border: none; border-radius: 8px; padding: 13px; font-size: 14px; font-weight: 700; }
.btn-convert { background: var(--red); color: #fff; }
.btn-convert:hover { background: var(--red-hover); }
.btn-download { background: var(--green); color: #fff; }
.btn-download:hover { background: var(--green-hover); }
.converting-row { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 0; font-size: 14px; color: var(--text-dim); }
.spin { animation: spin 1s linear infinite; width: 16px; height: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
.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); }

.info-section { max-width: 808px; margin: 0 auto; padding: 0 24px 96px; } /* 760px of content, lined up with the guide below */
.info-card { border: 1px solid var(--border); background: rgba(255,255,255,0.02); border-radius: 16px; padding: 24px; display: flex; gap: 16px; align-items: flex-start; }
.info-icon {
  min-width: 44px; width: auto; height: 44px; padding: 0 9px; box-sizing: border-box; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(200,114,47,0.15); color: #E3945B; font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
}
.info-card h2 { margin: 0; font-size: 16px; font-weight: 700; }
.info-card h2 span { font-weight: 400; color: var(--text-dimmer); }
.info-card p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-dimmer); }

/* ---------- Options panel ---------- */
.options-toggle {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 600;
}
.options-toggle:hover { border-color: var(--border-hover); color: #fff; }
.options-toggle svg { width: 14px; height: 14px; transition: transform 0.15s; }
.options-toggle.open svg { transform: rotate(180deg); }
.options-panel {
  margin-top: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.02);
  border-radius: 12px; padding: 20px;
}
.options-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; align-items: end; }
.options-row:last-child { margin-bottom: 0; }
.options-row label {
  min-width: 0; display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-dim); justify-content: flex-end;
}
.opt-hint { font-weight: 400; color: var(--text-dimmer); font-size: 12px; }
.options-row input[type="number"], .options-row input[type="month"], .options-row select {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 10px; color: #fff; font-size: 14px; height: 38px; box-sizing: border-box; width: 100%;
}
.options-row input[type="range"] {
  width: 100%; accent-color: var(--red); height: 38px; padding: 0; margin: 0; display: block;
}
@media (max-width: 480px) {
  .options-row { grid-template-columns: minmax(0, 1fr); }
}

/* 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 ---------- */
.multi-file-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.multi-file-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.02);
  border-radius: 10px; padding: 12px 14px; cursor: default;
}
.multi-file-item.dragging { opacity: 0.4; }
.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; }
.multi-file-item .file-badge { width: 36px; height: 36px; font-size: 9px; }
.multi-file-item .name { flex: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multi-file-item .size { font-size: 12px; color: var(--text-dimmer); }
.multi-file-item .remove-btn {
  background: none; border: none; color: var(--text-dimmer); width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0;
}
.multi-file-item .remove-btn:hover { background: rgba(200,114,47,0.15); color: #E3945B; }
.per-img-inputs { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.per-img-w, .per-img-h { width: 82px; padding: 6px 8px; font-size: 13px; box-sizing: border-box; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; color: #fff; }
@media (max-width: 600px) {
  .multi-file-item { flex-wrap: wrap !important; row-gap: 10px !important; }
  .per-img-inputs { flex: 1 1 100% !important; width: 100% !important; order: 5 !important; }
  .per-img-w, .per-img-h { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; }
}
.add-more-btn {
  border: 1px dashed var(--border-hover); background: transparent; color: var(--text-dim);
  border-radius: 10px; padding: 12px; font-size: 13px; font-weight: 600; width: 100%;
}
.add-more-btn:hover { border-color: var(--red); color: #fff; }

/* ---------- Page thumbnail grid (Rearrange PDF) ---------- */
.page-thumb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px;
  margin-bottom: 20px;
}
.page-thumb {
  border: 1px solid var(--border); background: rgba(255,255,255,0.02); border-radius: 10px;
  padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: opacity 0.15s;
}
.page-thumb.deleted { opacity: 0.3; }
.page-thumb.dragging { opacity: 0.4; }
.page-thumb canvas { width: 100%; height: auto; border-radius: 4px; background: #fff; display: block; }
.page-thumb .page-num { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.page-thumb-controls { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.page-thumb-controls button {
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: rgba(255,255,255,0.8);
  border-radius: 5px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.page-thumb-controls button:hover { border-color: var(--border-hover); }
.page-thumb-controls button svg { width: 13px; height: 13px; }
.page-thumb-controls button.danger:hover { background: rgba(200,114,47,0.15); border-color: rgba(200,114,47,0.4); color: #E3945B; }

.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-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. */

/* 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. */

/* ---------- 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 ---------- */
.ic-panel { max-width: 760px; margin: 0 auto; }
#icDropWrap { max-width: 760px; margin: 0 auto; }
.ic-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ic-ghost-btn { background: transparent; border: 1px solid var(--border-hover); color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.ic-ghost-btn:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
.ic-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; margin-bottom: 16px; }
.ic-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.02); font-size: 13px; }
.ic-row.done { border-color: rgba(34,197,94,0.25); }
.ic-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.9); }
.ic-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ic-sizes { color: var(--text-dimmer); white-space: nowrap; }
.ic-sizes strong { color: #fff; }
.ic-status { color: var(--text-dimmer); }
.ic-status.error { color: #fca5a5; }
.ic-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: rgba(34,197,94,0.14); color: #86efac; white-space: nowrap; }
.ic-badge.muted { background: rgba(255,255,255,0.06); color: var(--text-dimmer); }
.ic-miss { font-size: 11px; color: #fbbf24; }
.ic-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
.ic-icon-btn svg { width: 15px; height: 15px; }
.ic-icon-btn:hover { color: #fff; border-color: var(--border-hover); }
.ic-icon-btn.ic-dl { color: #86efac; border-color: rgba(34,197,94,0.35); }
.ic-notice { padding: 12px 14px; border-radius: 8px; background: rgba(200,114,47,0.07); border: 1px solid rgba(200,114,47,0.3); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.85); margin-bottom: 16px; }
.ic-notice a { color: #E3945B; font-weight: 700; }
.ic-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; padding: 18px 0 20px; border-top: 1px solid var(--border); margin-bottom: 4px; }
.ic-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ic-label { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.8); }
.ic-field .seg-toggle { align-self: flex-start; flex-wrap: wrap; }
.ic-field .seg-toggle label { padding: 8px 12px; }
.ic-slider-row { display: flex; align-items: center; gap: 10px; }
.ic-slider-row input[type="range"] { flex: 1; accent-color: #C8722F; }
.ic-dim { font-size: 12px; color: var(--text-dimmer); }
.ic-quality-label { font-size: 12.5px; color: #E3945B; font-weight: 700; }
.ic-target-row { display: flex; align-items: center; gap: 10px; }
.ic-target-row input, .ic-resize-fields input, .ic-field select {
  padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: #fff; font-size: 14px; font-family: inherit;
}
.ic-target-row input { width: 110px; }
.ic-field select option { background: #1a1716; }
.ic-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ic-chips button { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ic-chips button:hover { border-color: rgba(200,114,47,0.5); color: #E3945B; }
.ic-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.ic-resize-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ic-resize-fields input { width: 110px; }
.ic-summary { margin-top: 14px; padding: 14px; border-radius: 8px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.25); font-size: 14px; color: #bbf7d0; line-height: 1.6; }
.ic-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
.ic-sub.error { color: #fca5a5; }
.ic-related { max-width: 760px; margin: 18px auto 0; text-align: center; font-size: 13px; color: var(--text-dimmer); line-height: 1.9; }
.ic-related a { color: var(--text-dim); text-decoration: none; }
.ic-related a:hover { color: #E3945B; }
.ic-related a[aria-current="page"] { color: #E3945B; font-weight: 700; }
#icGo:disabled { opacity: 0.55; cursor: not-allowed; }
.ic-compare-overlay { align-items: center; }
.ic-compare { position: relative; width: 100%; max-width: 820px; box-sizing: border-box; padding: 20px; background: #1c1916; border: 1px solid var(--border-hover); border-radius: 16px; color: #fff; }
.ic-compare-title { font-weight: 700; font-size: 14px; margin: 0 28px 12px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-compare-stage { position: relative; border-radius: 10px; overflow: hidden; background: repeating-conic-gradient(#2a2724 0% 25%, #221f1c 0% 50%) 50% / 20px 20px; user-select: none; }
.ic-compare-img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.ic-compare-before { position: absolute; inset: 0; }
.ic-compare-handle { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.5); transform: translateX(-50%); pointer-events: none; }
.ic-compare-tag { position: absolute; bottom: 10px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,0.6); padding: 3px 8px; border-radius: 5px; }
.ic-compare-tag.left { left: 10px; }
.ic-compare-tag.right { right: 10px; }
.ic-compare-stage input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ic-compare-hint { font-size: 12px; color: var(--text-dimmer); margin: 10px 0 0; text-align: center; }
@media (max-width: 640px) {
  .ic-settings { grid-template-columns: minmax(0, 1fr); }
  .ic-row { flex-wrap: wrap; }
  .ic-right { width: 100%; justify-content: flex-end; }
  .ic-compare { padding: 16px 12px; }
}

/* 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; }
}
.ic-target-row select { padding: 10px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: #fff; font-size: 14px; font-family: inherit; }
.ic-target-row select option { background: #1a1716; }

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

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

/* ---------- Creative AI tools: animate, photo editor, alt text ---------- */
.ct-label { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.8); }
/* labels sitting directly on their field (found by the layout check) */
.ct-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-dim); margin: 0 0 18px; cursor: pointer; line-height: 1.5; }
.ct-check input { margin-top: 3px; flex-shrink: 0; }
.ct-tip { font-size: 12.5px; color: var(--text-dimmer); margin: 10px 0 0; line-height: 1.6; }
.ct-note { font-size: 12.5px; color: var(--text-dimmer); margin: 12px 0 0; text-align: center; line-height: 1.6; }
.ct-small-btn { font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 7px; cursor: pointer; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-dim); font-family: inherit; }
.ct-small-btn:hover { border-color: var(--border-hover); color: #fff; }
.ct-small-btn:disabled { opacity: 0.6; cursor: wait; }
.ct-textarea { width: 100%; box-sizing: border-box; min-height: 92px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: #fff; font-size: 14.5px; font-family: inherit; line-height: 1.5; resize: vertical; }
.ct-textarea:focus { outline: none; border-color: rgba(200,114,47,0.6); }

/* 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-note { padding: 14px 16px; border-radius: 10px; background: rgba(200,114,47,0.07); border: 1px solid rgba(200,114,47,0.3); margin: 18px 0; }
.guide .guide-note p { margin: 0; font-size: 14.5px; }
.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 ---------- */
.gen-opt { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-dimmer); text-align: right; }
.gen-link { background: none; border: 0; padding: 0; color: #E3945B; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.gen-link:hover { text-decoration: underline; }
.gen-summary { font-size: 13px; color: var(--text-dim); text-align: center; min-height: 18px; }

/* ---------- AI Video Upscaler ---------- */
.gen-drop { border: 1.5px dashed var(--border-hover, rgba(255,255,255,0.18)); border-radius: 12px; padding: 18px; text-align: center; transition: border-color .15s, background .15s; }
.gen-drop.over { border-color: #C8722F; background: rgba(200,114,47,0.08); }
.gen-drop video { width: 100%; max-height: 300px; border-radius: 8px; background: #000; display: block; }

/* ---------- 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-src { margin-bottom: 12px; }
.sd-url-row { display: flex; gap: 10px; }
.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; }
.sd-code { min-height: 180px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.sd-summary { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; margin: 16px 0 12px; border: 1px solid var(--border); }
.sd-summary strong { font-size: 17px; color: #fff; }
.sd-summary span { font-size: 13px; color: var(--text-dim); word-break: break-all; }
.sd-summary.sd-good { border-color: rgba(52,199,89,0.5); background: rgba(52,199,89,0.08); }
.sd-summary.sd-warn { border-color: rgba(230,180,60,0.5); background: rgba(230,180,60,0.08); }
.sd-summary.sd-bad { border-color: rgba(230,80,60,0.55); background: rgba(230,80,60,0.08); }
.sd-item { border: 1px solid var(--border); border-radius: 10px; margin: 8px 0; background: rgba(255,255,255,0.02); }
.sd-item summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; color: #fff; }
.sd-item .sd-count { margin-left: auto; font-size: 12.5px; color: var(--text-dim); }
.sd-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: #34c759; }
.sd-warn .sd-dot { background: #e6b43c; } .sd-bad .sd-dot { background: #e6503c; }
.sd-item ul { margin: 0; padding: 0 14px 12px 14px; list-style: none; }
.sd-item li { font-size: 13.5px; line-height: 1.55; padding: 6px 0; border-top: 1px solid var(--border); color: var(--text); }
.sd-item li b { display: inline-block; min-width: 44px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.sd-e b { color: #ff7a66; } .sd-w b { color: #e6b43c; } .sd-g b { color: #34c759; }
.sd-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; margin-top: 14px; }
.sd-field { display: flex; flex-direction: column; gap: 6px; }
.sd-wide { grid-column: 1 / -1; }
.sd-req { font-size: 10.5px; color: #E3945B; font-weight: 700; margin-left: 4px; }
.sd-actions { margin-top: 12px; }
@media (max-width: 600px) { .sd-url-row { flex-direction: column; } .sd-go { padding: 14px; } }

/* ---------- Website SEO Audit / Internal Link Planner ---------- */
.au-mode { margin-top: 12px; flex-wrap: wrap; }
.au-progress { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-dim); }
.au-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; }
.au-bar span { display: block; height: 100%; width: 2%; background: #C8722F; transition: width .4s; }
.au-head { display: flex; gap: 18px; align-items: center; margin: 20px 0 8px; }
.au-head h2 { margin: 0 0 4px; font-size: 20px; color: #fff; word-break: break-all; }
.au-head p { margin: 0; color: var(--text-dim); font-size: 13.5px; }
.au-score { flex: 0 0 auto; width: 86px; height: 86px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #34c759; }
.au-score strong { font-size: 28px; color: #fff; line-height: 1; } .au-score span { font-size: 11px; color: var(--text-dim); }
.au-score.au-warn { border-color: #e6b43c; } .au-score.au-bad { border-color: #e6503c; }
.au-e { color: #ff7a66; } .au-w { color: #e6b43c; }
.au-tip .sd-dot { background: #6aa7ff; }
.au-body { padding: 0 14px 12px; font-size: 13.5px; color: var(--text); line-height: 1.55; }
.au-body p { margin: 0 0 8px; } .au-fix b { color: #34c759; }
.au-urls { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.au-urls li { padding: 5px 0; border-top: 1px solid var(--border); word-break: break-all; }
.au-urls li span { color: var(--text-dim); font-size: 12.5px; }
.au-urls a { color: #E3945B; text-decoration: none; }
a.au-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---------- Print File Checker ---------- */
.pc-drop { padding: 34px 18px; }
.pc-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pc-empty strong { color: #fff; font-size: 16px; } .pc-empty span { font-size: 13px; color: var(--text-dim); }
.pc-empty .sd-go { padding: 12px 22px; }
.pc-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pc-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; background: repeating-conic-gradient(#1c1c1c 0 25%, #222 0 50%) 0 0 / 16px 16px; border-radius: 12px; padding: 14px; }
.pc-preview canvas { max-width: 100%; box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
.pc-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--text-dim); }
.pc-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.pc-l-bleed { background: rgba(220,40,40,0.55); } .pc-l-trim { border: 2px solid #00c8ff; } .pc-l-safe { border: 2px dashed #34c759; }
.pc-side { display: flex; flex-direction: column; gap: 12px; }
.pc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pc-checks ul { list-style: none; margin: 18px 0 0; padding: 0; }
.pc-checks li { padding: 10px 12px 10px 34px; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.55; position: relative; color: var(--text); }
.pc-checks li::before { content: ""; position: absolute; left: 12px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: #34c759; }
.pc-checks li.pc-warn::before { background: #e6b43c; } .pc-checks li.pc-bad::before { background: #e6503c; }
.pc-checks b { color: #fff; margin-right: 4px; }
.pc-fix { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.pc-fix h3 { margin: 0; color: #fff; font-size: 17px; }
.pc-modes { flex-wrap: wrap; align-self: flex-start; }
.pc-color { width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: transparent; padding: 2px; }
@media (max-width: 760px) { .pc-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Photo Library Cleaner ---------- */
.pl-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pl-alt { width: auto; padding: 12px 18px; }
.pl-cap { font-size: 12px !important; max-width: 460px; }
.pl-settings { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.pl-h { color: #fff; font-size: 17px; margin: 24px 0 4px; }
.pl-group { border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin: 10px 0; background: rgba(255,255,255,0.02); }
.pl-ghead { font-size: 12.5px; color: var(--text-dim); margin-bottom: 8px; font-weight: 700; }
.pl-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.pl-wrap { flex-wrap: wrap; overflow: visible; }
.pl-ph { position: relative; flex: 0 0 132px; display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 10px; border: 2px solid #34c759; cursor: pointer; background: #151515; }
.pl-ph.pl-rm { border-color: #e6503c; opacity: .75; }
.pl-ph img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; }
.pl-ph input { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; }
.pl-tag { position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: #34c759; color: #000; }
.pl-rm .pl-tag { background: #e6503c; color: #fff; }
.pl-name { font-size: 11.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-meta { font-size: 10.5px; color: var(--text-dimmer); }
.pl-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- 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; } }
.au-more { margin: 14px 0; padding: 16px; border-radius: 12px; border: 1px solid rgba(200,114,47,0.55); background: rgba(200,114,47,0.08); display: flex; flex-direction: column; gap: 12px; }
.au-more strong { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; } .au-more span { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.au-more-row { display: flex; gap: 10px; flex-wrap: wrap; } .au-more-row select { flex: 1 1 260px; } .au-more-row .sd-go { padding: 12px 18px; }

/* ---------- Robots.txt Generator ---------- */
.rb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 14px; }
.rb-more { margin-top: 14px; color: var(--text-dim); font-size: 13.5px; } .rb-more summary { cursor: pointer; color: #E3945B; font-weight: 600; }
@media (max-width: 640px) { .rb-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sitemap Generator & hosted sitemaps ---------- */ .sm-add .sd-go { padding: 0 18px; } .sm-step .sd-go { padding: 10px 18px; }
@media (max-width: 600px) { .sm-add .sd-go { padding: 12px; } }
/* 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-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.qr-types input { position: absolute; opacity: 0; pointer-events: none; }
.qr-types label { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; background: rgba(255,255,255,0.03); }
.qr-types label:hover { border-color: rgba(200,114,47,0.55); color: #fff; }
.qr-types input:checked + label { background: rgba(200,114,47,0.16); border-color: #C8722F; color: #fff; }
.qr-types input:focus-visible + label { outline: 2px solid #E3945B; outline-offset: 2px; }
.qr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.qr-form .sd-field { margin-bottom: 12px; }
.qr-ta { min-height: 84px; }
.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-design { margin-top: 6px; }
.qr-design-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.qr-color { width: 100%; height: 42px; padding: 3px; border-radius: 9px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); cursor: pointer; }
.qr-logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.qr-logo-btn { display: inline-flex; width: auto; padding: 9px 14px; font-size: 13px; cursor: pointer; }
.qr-side { position: sticky; top: 90px; }
.qr-preview { position: relative; background: #fff; border-radius: 14px; padding: 10px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.qr-preview canvas { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; }
.qr-preview canvas.qr-dim { opacity: 0.08; }
.qr-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; margin: 0; color: #555; font-size: 14px; font-weight: 600; }
.qr-check-line { font-size: 13px; margin: 10px 0 4px; min-height: 18px; color: var(--text-dimmer); }
.qr-check-line.good { color: #86efac; }
.qr-check-line.bad { color: #fbbf24; }
.qr-size { margin-top: 8px; }
.qr-actions { flex-direction: column; margin-top: 12px; }
.qr-actions .btn-full { width: 100%; }
.qr-note { margin-top: 14px; }
.qr-scan-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qr-file-btn { display: flex; align-items: center; justify-content: center; cursor: pointer; text-align: center; }
.qr-paste-tip { text-align: center; }
.qr-card.drag { border-color: #C8722F; background: rgba(200,114,47,0.06); }
.qr-cam { position: relative; margin-top: 16px; border-radius: 14px; overflow: hidden; background: #000; }
.qr-cam video { width: 100%; max-height: 62vh; display: block; object-fit: cover; }
.qr-aim { position: absolute; left: 50%; top: 45%; width: min(56%, 300px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.35); border: 3px solid rgba(255,255,255,0.9); pointer-events: none; }
.qr-cam-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(transparent, rgba(0,0,0,0.75)); color: #fff; font-size: 13.5px; }
.qr-cam-bar span { flex: 1; }
.qr-cam-bar .gen-link { color: #fff; }
.qr-result { margin-top: 18px; border: 1px solid rgba(200,114,47,0.4); border-radius: 14px; padding: 18px; background: rgba(200,114,47,0.05); }
.qr-result-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qr-type { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: #E3945B; }
.qr-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.qr-row:first-of-type { border-top: 0; }
.qr-row span { width: 110px; flex-shrink: 0; font-size: 13px; color: var(--text-dimmer); }
.qr-row b { flex: 1; min-width: 0; font-size: 14.5px; color: #fff; overflow-wrap: anywhere; font-weight: 600; }
.qr-raw { font-size: 12.5px; color: var(--text-dimmer); overflow-wrap: anywhere; margin: 6px 0 0; }
.qr-warn { font-size: 13px; color: #fcd34d; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25); border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; line-height: 1.5; }
.qr-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.qr-btns .btn-full { flex: 1 1 160px; text-align: center; text-decoration: none; }
.qr-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 12px; margin: 8px 0 0; color: #fff; max-height: 260px; overflow: auto; }
@media (max-width: 820px) { .qr-layout { grid-template-columns: minmax(0, 1fr); } .qr-side { position: static; max-width: 420px; width: 100%; margin: 0 auto; } .qr-design-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .qr-scan-btns { grid-template-columns: minmax(0, 1fr); } .qr-row { flex-wrap: wrap; gap: 2px 12px; } .qr-row span { width: auto; flex-basis: 100%; } }
/* QR generator — 3-step layout */
.qrg { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; padding: 30px; }
.qrg > .error-box { grid-column: 1 / -1; }
.qrg-step { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.qrg-step h2 { font-size: 16px; margin: 0; letter-spacing: 0.1px; }
.qrg-step:not(:first-child) { margin-top: 28px; }
.qrg-num { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: #fff; background: #C8722F; }
.qrg-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.qrg-types input { position: absolute; opacity: 0; pointer-events: none; }
.qrg-types label { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 6px 11px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.025); color: var(--text-dim); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center; transition: border-color .15s, background .15s, color .15s; }
.qrg-types label svg { width: 22px; height: 22px; flex-shrink: 0; }
.qrg-types label:hover { border-color: rgba(200,114,47,0.5); color: #fff; }
.qrg-types input:checked + label { border-color: #C8722F; background: rgba(200,114,47,0.13); color: #fff; }
.qrg-types input:checked + label svg { color: #E3945B; }
.qrg-types input:focus-visible + label { outline: 2px solid #E3945B; outline-offset: 2px; }
.qrg .qr-form .sd-field { margin-bottom: 12px; }
.qrg-hint { font-size: 12.5px; color: var(--text-dimmer); margin: 2px 0 0; line-height: 1.5; }
.qrg-more summary, .qrg-custom summary { cursor: pointer; list-style: none; }
.qrg-more summary::-webkit-details-marker, .qrg-custom summary::-webkit-details-marker { display: none; }
.qrg-more summary { font-size: 13px; font-weight: 600; color: #E3945B; margin-bottom: 10px; }
.qrg-custom { margin-top: 26px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.02); }
.qrg-custom summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.qrg-custom summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-dimmer); border-bottom: 2px solid var(--text-dimmer); transform: rotate(45deg); transition: transform .2s; }
.qrg-custom[open] summary::after { transform: rotate(-135deg); }
.qrg-sum b { display: block; font-size: 15px; color: #fff; }
.qrg-sum small { display: block; font-size: 12.5px; color: var(--text-dimmer); margin-top: 1px; }
.qrg-opts { padding: 4px 16px 16px; display: grid; gap: 14px; }
.qrg-opt { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; }
.qrg-opt-l { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.qrg-swatches, .qrg-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qrg-sw { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); cursor: pointer; padding: 0; outline-offset: 2px; }
.qrg-sw.on { border-color: #fff; }
.qrg-sw-custom { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444); overflow: hidden; }
.qrg-sw-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.qrg-bg { width: 40px; height: 28px; padding: 2px; border-radius: 7px; border: 1px solid var(--border); background: transparent; cursor: pointer; }
.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-custom-in { margin-top: 8px; }
.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-btn-sm { padding: 8px 12px; font-size: 13px; }
.qrg-file { font-size: 12.5px; color: var(--text-dimmer); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrg-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 10px; }
.qrg .qr-preview { box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.qrg .qr-empty { color: #8a8580; font-weight: 600; }
.qrg .qr-empty.qr-empty-err { color: #b45309; }
.qrg .qr-check-line { margin: 0; text-align: center; }
.qrg-size { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.qrg-main-btn { width: 100%; padding: 14px; font-size: 15px; }
.qrg-card-btn { width: 100%; border-color: rgba(200,114,47,0.55); color: #E3945B; }
.qrg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.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; }
@media (max-width: 900px) { .qrg { grid-template-columns: minmax(0, 1fr); padding: 22px; } .qrg-side { position: static; max-width: 440px; width: 100%; margin: 0 auto; } }
@media (max-width: 560px) { .qrg { padding: 16px; gap: 24px; } .qrg-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qrg-opt { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.upload-section.qrg-section { max-width: 1088px; }
@media (min-width: 901px) { .qrg { grid-template-columns: minmax(0, 1fr) 340px; } }
.qrg-opt .qrg-seg { justify-self: start; }
/* Domain age */
.da-dl .sd-go { padding: 9px 14px; font-size: 13px; }
/* Signature resizer */
.sg-card { max-width: 1040px; margin: 0 auto; }
.sg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; margin-top: 18px; }
.sg-pick { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 18px; border: 1.5px dashed rgba(200,114,47,0.5); border-radius: 14px; background: rgba(200,114,47,0.04); color: #fff; cursor: pointer; font-family: inherit; text-align: center; }
.sg-pick:hover { background: rgba(200,114,47,0.09); }
.sg-pick svg { width: 30px; height: 30px; color: #E3945B; }
.sg-pick b { font-size: 15px; }
.sg-pick span { font-size: 12.5px; color: var(--text-dimmer); }
.sg-pick.sg-done { border-style: solid; border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.05); padding: 16px; }
.sg-pick.sg-done span { color: #86efac; }
.sg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.sg-opts { display: grid; gap: 14px; }
.sg-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); font-weight: 600; margin: 4px 0; }
.sg-row > span:first-child { width: 92px; flex-shrink: 0; }
.sg-row input[type=range] { flex: 1; min-width: 140px; accent-color: #C8722F; }
.sg-size { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
.sg-dims { display: flex; align-items: flex-end; gap: 10px; }
.sg-dims .sd-field { flex: 1; min-width: 0; margin-bottom: 10px; }
.sg-x { padding-bottom: 22px; color: var(--text-dimmer); }
.sg-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 10px; }
.sg-preview { position: relative; min-height: 200px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.sg-preview-tall { min-height: 320px; }
.sg-preview canvas { max-width: 100%; height: auto; image-rendering: auto; }
.sg-checker { background: repeating-conic-gradient(#e9e9e9 0% 25%, #fff 0% 50%) 50% / 18px 18px; }
.sg-result { font-size: 13px; color: var(--text-dim); text-align: center; margin: 0; min-height: 18px; }
.sg-result .good { color: #86efac; } .sg-result .bad { color: #fca5a5; }
.sg-card.drag { border-color: #C8722F; }
@media (max-width: 860px) { .sg-layout { grid-template-columns: minmax(0, 1fr); } .sg-side { position: static; } }
@media (max-width: 520px) { .sg-two { grid-template-columns: minmax(0, 1fr); } .sg-row > span:first-child { width: 100%; } }
/* Sign PDF */
#pad { width: 100%; aspect-ratio: 3 / 1; background: #fff; border-radius: 12px; touch-action: none; cursor: crosshair; display: block; }
.sp-foot .sd-go { padding: 12px 20px; font-size: 14.5px; }
/* GST invoice */
.iv-body .sd-field { margin-bottom: 12px; }
.iv-row select.sd-input { padding-right: 24px; background-position: right 6px center; text-overflow: clip; }
.iv-row .sd-field { margin: 0; min-width: 0; }
.iv-row .sd-input { padding: 9px 8px; font-size: 13.5px; }
@media (max-width: 520px) { .iv-row .sd-field:has([data-k=hsn]), .iv-row .sd-field:has([data-k=rate]), .iv-row .sd-field:has([data-k=disc]), .iv-row .sd-field:has([data-k=gst]) { grid-column: span 2; } }
/* Compress PDF to size */
.ps-custom .sd-input{flex:1}
.ps-result .sd-go{text-align:center;text-decoration:none}
.ps-card .qr-check{align-self:start;padding-bottom:0}
.ps-card .sd-go{padding:13px 22px;font-size:15px}
/* Fancy text */
/* 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}
.st-dl .sd-go{padding:12px 20px}
.st-card>.sd-go{padding:13px 22px;font-size:15px}
/* Bank statement to Excel */
.bk-card{display:flex;flex-direction:column;gap:14px}
.bk-pw-row .sd-input{flex:1;min-width:0}
.bk-pw .sd-go,.bk-ai .sd-go,.bk-card>.sd-go{padding:12px 20px}
.bk-table{max-height:460px;overflow:auto;border:1px solid var(--border);border-radius:12px}
.bk-table table{width:100%;border-collapse:collapse;font-size:13px}
.bk-table th{position:sticky;top:0;background:var(--bg-raised);text-align:left;font-weight:600;color:var(--text);padding:9px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.bk-table td{padding:8px 10px;border-top:1px solid var(--border);color:var(--text-dim);vertical-align:top}
.bk-table td:first-child,.bk-table td.d{white-space:nowrap}
.bk-table .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bk-table tr.bad td{background:rgba(251,191,36,.12)}
/* 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 .sd-go{padding:11px 20px;font-size:14.5px}
.tt-opts .qr-check{align-self:center;padding:0}
/* SEO Autopilot */
.ap-card .sd-go{padding:12px 20px;font-size:14.5px;text-decoration:none;text-align:center}
.ap-add .sd-url-row{display:flex;gap:8px}.ap-add .sd-url-row .sd-input{flex:1;min-width:0}
.ap-full .sd-input{max-width:260px}
.ap-settings .qr-check{padding:0}
.ap-actions .sd-go{height:46px;padding:0 20px;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:10px}.tt-imp .sd-input{flex:1;min-width:0}
/* Slug + compare v2 */
.tt-slugrow .sd-go{height:44px;min-width:120px;padding:0 18px;border-radius:10px}
.tt-set .sd-input{height:44px}
@media (max-width:700px){.tt-slugrow .sd-go{width:100%}}
/* YouTube subscriber goal tracker */
.yt-pair .sd-input{height:48px;min-width:0}.yt-pair select.sd-input{padding-right:34px;text-overflow:ellipsis}
/* 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) */
.acr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acr-grid .full{grid-column:1/-1}
@media (max-width:600px){.acr-grid{grid-template-columns: minmax(0, 1fr)}}
.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-label{font-size:13.5px;font-weight:600;color:var(--text);margin:16px 0 8px}
.acr-label small{font-weight:400;color:var(--text-dimmer)}
.acr-photo-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:1.5px dashed rgba(200,114,47,.55);border-radius:12px;background:rgba(200,114,47,.06);color:#E3945B;font:600 14px/1.2 inherit;font-family:inherit;cursor:pointer}
.acr-photo-btn svg{width:18px;height:18px}
.acr-go-row{margin-top:18px}
.acr-out{margin-top:20px}
.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-go-row .sd-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:10px;font-size:16px;border-radius:12px}
.acr-actions .qrg-btn2{min-height:44px}
/* AI create — loading panel + result buttons */
.acr-go-row .sd-go.acr-busy{opacity:.75;cursor:progress}
.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%}}
.acr-out + .qrg-privacy,.acr-out ~ .qrg-privacy{margin-top:22px}
.file-card .acr-go-row ~ .qrg-privacy{margin-top:18px}
/* YouTube goal tracker — dark theme to match the other tools */
/* exam pages: spec table + exam links */
.ex-spec-wrap{overflow-x:auto;margin:14px 0 8px;border:1px solid var(--border);border-radius:12px}
.ex-spec{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.ex-spec th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dimmer);font-weight:700;padding:10px 14px;background:rgba(255,255,255,.03)}
.ex-spec td{padding:11px 14px;border-top:1px solid var(--border);color:var(--text);vertical-align:top}
.ex-spec td:nth-child(2),.ex-spec td:nth-child(3){white-space:nowrap;color:#fff;font-weight:600}
.ex-spec td:last-child{color:var(--text-dimmer);font-size:13px}
.ex-spec-note{font-size:13px;color:var(--text-dimmer)}
.ex-exams{display:flex;flex-wrap:wrap;gap:8px}
.ex-exams a{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:#fff;text-decoration:none;font-weight:600;font-size:14px}
.ex-exams a:hover{border-color:rgba(200,114,47,.6);color:#E3945B}
/* ---- Exam photo & signature resizer layout */
.ex-pick{text-align:center;padding:28px 16px}
.ex-grid{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:28px;align-items:start}
@media (max-width:760px){.ex-grid{grid-template-columns: minmax(0, 1fr)}}
.ex-preview-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:sticky;top:90px}
.ex-canvas{width:100%;max-width:320px;height:auto;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:grab;touch-action:none}
.ex-zoom{display:flex;align-items:center;gap:10px;width:100%;max-width:320px;margin-top:8px;font-size:13px;color:var(--text-dim)}
.ex-zoom input{flex:1}
.ex-form{display:flex;flex-direction:column;gap:14px;min-width:0}
.ex-form .seg-toggle{align-self:flex-start}
.ex-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.ex-row label,#exPhotoOpts label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text-dim)}
.ex-form input[type=number],.ex-form select{width:100%;box-sizing:border-box;height:44px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:#fff;font:500 15px/1 inherit;font-family:inherit;-webkit-appearance:none;appearance:none}
.ex-form select{padding-right:36px;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}
.ex-form select option{background:#1a1716}
.ex-form input:focus,.ex-form select:focus{outline:none;border-color:rgba(200,114,47,.7)}
.ex-form .ct-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-dim);margin:0}
.ex-form p{margin:-6px 0 0!important;line-height:1.5}
.ex-form .btn-full{margin-top:6px!important;border-radius:12px;min-height:52px}
.ex-result{margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}
.ex-result-grid{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:24px;align-items:start}
@media (max-width:640px){.ex-result-grid{grid-template-columns: minmax(0, 1fr)}}
.ex-out{max-width:100%;border-radius:10px;border:1px solid var(--border);background:#fff}
.ex-check-list{list-style:none;padding:0;margin:10px 0 12px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.ex-ok{color:#4ade80}.ex-warn{color:#fbbf24}
.ex-row{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.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}
@media (max-width:600px){
  .sd-url-row>*,.ap-add .sd-url-row>*{flex:none!important;width:100%}
  .sd-url-row .sd-input,.sd-url-row input{min-height:50px!important;height:50px;font-size:16px}
  .sd-url-row .sd-go,.sd-url-row button{min-height:50px}
}
/* 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=tel],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}
.select-file-btn{background:#AD5C1B!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}
.acr-right{position:sticky;top:88px;min-height:420px;display:flex;flex-direction:column;padding:24px}
.acr-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:360px;border:1.5px dashed rgba(255,255,255,.14);border-radius:14px;padding:24px;color:var(--text-dimmer)}
.acr-empty.hidden{display:none}
.acr-empty-ic{width:52px;height:52px;color:rgba(255,255,255,.35);margin-bottom:6px}
.acr-empty-ic svg{width:100%;height:100%}
.acr-empty b{font-size:17px;color:#fff;font-weight:700}
.acr-empty span:last-child{font-size:14px;max-width:300px;line-height:1.5}
.acr-right .acr-out{margin-top:0}
.acr-left .qrg-privacy{margin-top:16px}
@media (max-width:900px){.acr-layout{grid-template-columns: minmax(0, 1fr)}.acr-right{position:static;min-height:0}.acr-empty{min-height:180px}}
/* ---- 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}
.nd-pick{width:100%;justify-content:center;min-height:56px;font-size:15px}
.nd-prev{display:flex;align-items:center;justify-content:center;min-height:420px;background:repeating-conic-gradient(#1c1c1c 0 25%,#151515 0 50%) 0 0/20px 20px;border-radius:12px;padding:16px}
.nd-prev canvas{max-width:100%;height:auto;box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:grab;touch-action:none;background:#fff}
.nd-kb{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.acr-right .ex-check-list{margin-top:14px}
/* ---- money calculators (inputs left, results right) */
.fc-note{margin-top:14px;line-height:1.55}
.fc-big{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:14px;background:linear-gradient(135deg,rgba(200,114,47,.16),rgba(200,114,47,.04));border:1px solid rgba(200,114,47,.3)}
.fc-big span{font-size:13px;font-weight:700;color:#E3945B;text-transform:uppercase;letter-spacing:.05em}
.fc-big b{font-size:34px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.15}
.fc-big small{font-size:13px;color:var(--text-dimmer)}
.fc-rows{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.fc-rows>div{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--border);font-size:14px;color:var(--text-dim)}
.fc-rows>div:first-child{border-top:0}
.fc-rows b{color:#fff;font-weight:700;white-space:nowrap}
.fc-rows .b{background:rgba(255,255,255,.035)}.fc-rows .b span{color:#fff;font-weight:700}
.fc-rows .warn b{color:#fcd34d}
.acr-label.full{grid-column:1/-1}
@media (max-width:420px){.fc-big b{font-size:28px}}
.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 */
/* 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}
.upload-section:has(.kd-wrap){max-width:none;padding:0}
/* Amazon seller tools */
.acr-left.amz-drag{outline:2px dashed rgba(200,114,47,.7);outline-offset:4px}
.amz-canvas-wrap{background:repeating-conic-gradient(#2a2622 0 25%,#221f1c 0 50%) 0 0/18px 18px;border-radius:12px;padding:12px;display:flex;justify-content:center}
.amz-canvas-wrap canvas{max-width:100%;height:auto;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.acr-layout>.sd-card,.acr-layout>.acr-left{margin:0;max-width:none;min-width:0}
/* Drag & zoom frame editor */
.fe-canvas{cursor:grab;touch-action:none;outline:none}
.fe-canvas:focus-visible{box-shadow:0 0 0 3px rgba(200,114,47,.6)!important}
.fe-hint{margin:10px 0 0;font-size:12.5px;color:var(--text-dimmer);text-align:center}
input[type=range]{accent-color:#c8722f}
.pc-zoom{display:flex;align-items:center;gap:10px;width:100%;max-width:420px}.pc-zoom input{flex:1}.pc-zoom .ct-label{margin:0}.pc-preview .fe-hint{margin:0}
.amz-canvas-wrap canvas{max-height:62vh;width:auto;max-width:100%}
/* Consistent spacing inside every tool card */
.acr-left > * + *, .acr-right > .acr-out > * + *{margin-top:20px}
.acr-left > .acr-note, .acr-left > .hidden + .acr-note{margin-top:10px}
.acr-left > .hidden + *{margin-top:20px}
.acr-left > .error-box.hidden, .acr-left > .hidden{margin-top:0}
.acr-grid{gap:18px 16px}
.st-field{gap:8px}
.acr-left .acr-actions{margin-top:20px}
.acr-left > .qrg-privacy{margin-top:22px}
.acr-label{margin:22px 0 10px}
.acr-grid > .acr-label{margin:6px 0 -6px}
.acr-right .fc-rows + .fc-rows, .acr-right .fc-big + .fc-rows, .acr-right .fc-big + div{margin-top:14px}
.fe-hint{margin-top:12px}
.acr-grid > .st-field{justify-content:flex-end}.acr-grid > .st-field > span{flex:1 0 auto}
/* Size chart maker */
/* Older calculators & forms: same rhythm as the newer tools */
.options-row label{display:block}
.options-row label > input,.options-row label > select,.options-row label > div{display:block;margin-top:8px}
.options-row input[type="number"],.options-row input[type="month"],.options-row select{height:46px;padding:0 14px;border-radius:10px;font-size:15px}
.options-row{gap:18px 16px;margin-bottom:18px}
.sd-field{gap:8px}
.iv-body .sd-field{margin-bottom:16px}
.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}}
.pack-btn.pack-starter{border-color:rgba(74,222,128,.55)!important;color:#86efac}
.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,.ct-tip ~ .error-box,.gen-drop ~ .error-box,.qr-cam ~ .error-box,.fc-note ~ .error-box{margin-top:14px}
.sg-size + .sg-row{margin-top:12px}
/* ---- 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-section{margin-top:28px;margin-bottom:8px}
.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}
.bk-head{margin-bottom:18px}.bk-head h2{margin:8px 0 6px;font-size:22px}.bk-head p{margin:0;font-size:14.5px;line-height:1.55;opacity:.8;max-width:760px}
.bk-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:rgba(227,148,91,.16);color:#E3945B}
.bk-head .bk-limit{margin-top:8px;font-size:12.5px;opacity:.7}
.bk-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:0 0 18px}
.bk-step{border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:16px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:10px}
.bk-step b{font-size:14px}.bk-step small{font-size:12.5px;opacity:.72;line-height:1.5}.bk-step .acr-btn{align-self:flex-start}
.bk-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(227,148,91,.18);color:#E3945B;font-size:12px;font-weight:800;margin-right:8px}
label.bk-drop,.bk-drop{display:block;box-sizing:border-box;width:100%;border:1.5px dashed rgba(255,255,255,.18);border-radius:14px;padding:26px 18px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;font-size:14px}
.bk-drop b{display:block;font-size:14.5px}.bk-drop:hover,.bk-drop.over{border-color:#E3945B;background:rgba(227,148,91,.05)}.bk-drop small{display:block;margin-top:4px;opacity:.65;font-size:12.5px}
.bk-files{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.bk-files li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.035);font-size:13.5px}
.bk-files li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bk-files li small{opacity:.6;font-size:12px}
.bk-files li button{background:none;border:0;color:inherit;opacity:.6;cursor:pointer;font-size:14px;padding:2px 6px}.bk-files li button:hover{opacity:1}
.bk-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:16px 0 0}
.bk-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}.bk-actions .bk-note{font-size:12.5px;opacity:.7}
.bk-table-wrap{margin-top:14px;max-height:300px;overflow:auto;border:1px solid rgba(255,255,255,.09);border-radius:12px}
.bk-table{width:100%;border-collapse:collapse;font-size:12.5px}.bk-table th,.bk-table td{padding:7px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
.bk-table th{position:sticky;top:0;background:#1d1a17;font-weight:700;opacity:.9}.bk-table tr.bad td{color:#fca5a5}.bk-table td.bk-msg{white-space:normal;min-width:180px}
.bk-progress{margin-top:18px}.bk-progress p{margin:8px 0 0;font-size:13.5px;opacity:.85}.bk-progress p b{margin-left:6px}
.bk-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.bk-bar i{display:block;height:100%;background:#E3945B;border-radius:99px;transition:width .25s}
.bk-done{margin-top:18px;padding:16px 18px;border-radius:14px;border:1px solid rgba(74,222,128,.3);background:rgba(74,222,128,.06)}.bk-done p{margin:0}.bk-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.bk-fails{margin-top:12px;font-size:13px}.bk-fails summary{cursor:pointer;color:#fca5a5}.bk-fails ul{margin:8px 0 0;padding-left:18px}
.bk-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.bk-thumbs button{position:relative;width:64px;height:64px;padding:0;border-radius:10px;overflow:hidden;border:2px solid transparent;background:rgba(255,255,255,.04);cursor:pointer}
.bk-thumbs button.on{border-color:#E3945B}.bk-thumbs img{width:100%;height:100%;object-fit:cover;display:block}.bk-thumbs button i{position:absolute;right:3px;top:3px;font-style:normal;font-size:10px;background:#16a34a;color:#fff;border-radius:99px;padding:0 4px}
.bk-jump{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;font-weight:600;color:#E3945B;text-decoration:none}.bk-jump:hover{text-decoration:underline}
@media (max-width:640px){.bk-card{padding:20px 16px}.bk-head h2{font-size:19px}}
.bk-card .bk-note{font-size:12.5px;line-height:1.55;opacity:.72;margin:12px 0 0}.bk-card .bk-actions .bk-note{margin:0}
.bk-text{display:block;width:100%;box-sizing:border-box;margin-top:14px;min-height:260px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.55;resize:vertical;white-space:pre-wrap}
.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}

.ct-small-btn.ai-read-hot{background:#C8722F;border-color:#C8722F;color:#fff}
.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 */
.acr-btn{flex-shrink:0}
/* Amazon checker: compact settings bar and summary */
/* Scan to PDF: captured page thumbnails */
.page-thumb .sc-img{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border-radius:6px;overflow:hidden}
.page-thumb .sc-img img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .2s;user-select:none;-webkit-user-drag:none}
.page-thumb{user-select:none;-webkit-user-select:none}
/* Scan to PDF: camera with live page outline, looks, corner editor */
.page-thumb .sc-img{position:relative}
.page-thumb.busy .sc-img img{opacity:.35}
.page-thumb .page-num em{font-style:normal;color:#E3945B;font-weight:600}
.page-thumb-controls button:disabled{opacity:.35;cursor:not-allowed}
/* Page board (Merge / Split PDF) */
.pb-card .page-num{display:flex;align-items:center;justify-content:center;gap:2px;flex-wrap:wrap}
.pb-card .page-num small{color:var(--text-dimmer);font-weight:600}
/* 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)}
#isPresetList{padding:12px 14px;display:flex;flex-direction:column;gap:12px;max-height:340px;overflow:auto}
.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 */
#resultInfo .cv-down{color:#8fd6a8;font-weight:700}#resultInfo .cv-up{color:var(--text-dimmer)}
#resultInfo .cv-thumb{display:block;margin-top:12px}
#resultInfo .cv-thumb img{display:block;max-width:100%;max-height:260px;border-radius:8px;border:1px solid var(--border);background:repeating-conic-gradient(#3a3631 0 25%,#2c2925 0 50%) 0 0/16px 16px}
#resultInfo .cv-thumb img{margin:0 auto}#resultInfo b{color:#fff}
/* New background editor */
/* Subtitle generator: burn captions into the video */
.bn-ctrl .sd-go{min-height:48px;margin:0;flex:0 0 auto;font-size:15px}
.au-row{display:grid!important;grid-template-columns:1fr 1fr 1.4fr;gap:12px}.au-len{margin:-6px 0 4px}@media (max-width:600px){.au-row{grid-template-columns:1fr 1fr}.au-row label:last-child{grid-column:1 / -1}}
.au-row input,.au-row select{min-width:0;width:100%;box-sizing:border-box}.au-row label{min-width:0}
/* SEO audit report */
.au-hist{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px;color:var(--text-dim)}
.au-hist b{color:#fff}.au-hist em{font-style:normal;font-weight:700}.au-hist em.up{color:#5fbf86}.au-hist em.down{color:#ff7a66}
.au-spark{width:120px;height:30px;flex:0 0 auto}
.au-first{margin:16px 0;padding:16px 18px;border-radius:14px;border:1px solid rgba(200,114,47,.45);background:rgba(200,114,47,.07)}
.au-first h3{margin:0 0 10px;font-size:16px;color:#fff}
.au-first ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.au-first li{font-size:14px;color:var(--text-dim)}.au-first li::marker{color:#E3945B;font-weight:800}
.au-first a{color:#fff;text-decoration:none;font-weight:600}.au-first a:hover{text-decoration:underline}
.au-first small{margin-left:8px;color:var(--text-dimmer)}
.au-pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-right:8px;vertical-align:1px}
.au-p-error{background:rgba(255,122,102,.16);color:#ff9a8a}.au-p-warn{background:rgba(230,180,60,.16);color:#f0c66b}.au-p-tip{background:rgba(106,167,255,.16);color:#8fbcff}
.au-cards{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;margin:16px 0 8px}
.au-card{padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02);min-width:0}
.au-card h3{margin:0 0 12px;font-size:15px;color:#fff;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}.au-card h3 small{font-size:12px;color:var(--text-dimmer);font-weight:500}
.au-muted{font-size:13px;color:var(--text-dimmer);margin:8px 0 0;line-height:1.5}
.au-sp-ctl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.au-sp-ctl select{height:40px;min-width:0}
.au-sp-seg{grid-column:1}.au-sp-seg button{height:38px}
.au-sp-go{grid-column:2;grid-row:2;padding:0 18px;margin:0;min-height:38px}
.au-sp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.au-sp-t{padding:10px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:2px;min-width:0}
.au-sp-t span{font-size:11.5px;color:var(--text-dim);line-height:1.3}.au-sp-t b{font-size:19px;color:#fff}.au-sp-t small{font-size:11px;color:var(--text-dimmer)}
.au-r-good{border-color:rgba(95,191,134,.5)}.au-r-good b,b.au-r-good{color:#5fbf86}
.au-r-ok{border-color:rgba(230,180,60,.5)}.au-r-ok b,b.au-r-ok{color:#e6b43c}
.au-r-bad{border-color:rgba(255,122,102,.5)}.au-r-bad b,b.au-r-bad{color:#ff7a66}
.au-sp-cwv{font-size:13px;color:var(--text-dim);margin:10px 0 0}
.au-sp-h{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#E3945B;margin:14px 0 6px}
.au-sp-ops{list-style:none;margin:0;padding:0;font-size:13px}.au-sp-ops li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--border);color:var(--text)}.au-sp-ops span{color:var(--text-dimmer);white-space:nowrap}
.au-indet{width:35%!important;animation:auindet 1.4s ease-in-out infinite}
@keyframes auindet{0%{margin-left:-35%}100%{margin-left:100%}}
.au-sc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.au-sc li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#fff}
.au-sc li i{flex:0 0 22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:800}
.au-sc-ok i{background:rgba(95,191,134,.18);color:#5fbf86}.au-sc-bad i{background:rgba(255,122,102,.18);color:#ff7a66}.au-sc-na i{background:rgba(255,255,255,.07);color:var(--text-dimmer)}
.au-sc li small{display:block;font-size:12px;color:var(--text-dimmer)}
.au-group{display:flex;align-items:center;gap:8px;margin:22px 0 10px;font-size:15px;color:#fff}
.au-group span{font-size:12px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--text-dim)}
.au-g-error{color:#ff9a8a}.au-g-warn{color:#f0c66b}.au-g-tip{color:#8fbcff}
.au-ai{margin:10px 0;padding:12px;border-radius:10px;background:rgba(200,114,47,.07);border:1px solid rgba(200,114,47,.3);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.au-ai>span{font-size:12.5px;color:var(--text-dim)}
.au-ai-btn{height:36px;padding:0 14px;border-radius:9px;border:0;background:#c8722f;color:#fff;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer}
.au-ai-btn:disabled{opacity:.6;cursor:wait}
.au-ai-out{flex:1 1 100%;min-width:0;overflow-x:auto}
.au-ai-tab{width:100%;border-collapse:collapse;font-size:12.5px}
.au-ai-tab th{text-align:left;color:var(--text-dim);font-weight:700;padding:6px;border-bottom:1px solid var(--border)}
.au-ai-tab td{padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text)}
.au-ai-tab td b{color:#fff;font-weight:600}.au-ai-tab td small{display:block;color:var(--text-dimmer);font-size:11px;margin-top:2px}
.au-ai-tab .au-now{color:var(--text-dimmer)}.au-ai-tab a{color:#E3945B;word-break:break-all}
.au-copy{height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.au-acts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.au-rep{max-width:520px}.au-rep .st-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text-dim)}
.au-rb-logo{display:flex;align-items:center;gap:12px}.au-rb-logo img{max-height:48px;max-width:180px;background:#fff;padding:4px;border-radius:6px}
@media (max-width:860px){.au-cards{grid-template-columns: minmax(0, 1fr)}.au-acts{grid-template-columns: minmax(0, 1fr)}}
@media (max-width:520px){.au-sp-tiles{grid-template-columns:1fr 1fr}.au-sp-ctl{grid-template-columns: minmax(0, 1fr)}.au-sp-go{grid-column:1;grid-row:auto}.au-head{align-items:flex-start}.au-hist{flex-wrap:wrap}}
.upload-section:has(.au-cards){max-width:1080px}
.au-sp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1000px){.au-sp-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.au-sp-t b{font-size:18px;line-height:1.2;white-space:nowrap}
.au-head h2{word-break:normal;overflow-wrap:anywhere}
/* SEO audit: tidier speed card */
.au-cards{align-items:start}
.au-sp-ctl{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"url url" "seg go"}
.au-sp-ctl select{grid-area:url;width:100%}
.au-sp-seg{grid-area:seg}.au-sp-go{grid-area:go;grid-row:auto;grid-column:auto}
.au-sp-tiles{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px}
.au-sp-t{align-items:flex-start;padding:12px 12px 10px;gap:3px}
.au-sp-t span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
.au-sp-t b{font-size:22px;line-height:1.15}
.au-sp-t small{font-size:11px;line-height:1.3}
.au-hist{gap:12px}.au-spark{width:90px;height:24px}
@media (max-width:520px){.au-sp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}.au-sp-ctl{grid-template-areas:"url" "seg" "go";grid-template-columns: minmax(0, 1fr)}}
.au-custom { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border, rgba(127,127,127,.25)); border-radius: 12px; }
.au-custom label { font-weight: 600; }
.au-custom .sd-input { width: 140px; min-width: 0; flex: 0 0 auto; }
.au-custom-cost { color: var(--muted, #888); font-size: .95rem; }
.au-custom-cost b { color: var(--text, inherit); }
@media (max-width: 560px) { .au-custom .sd-input { width: 100%; } }
/* 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 */
.rb-grid > .sd-field{display:flex;flex-direction:column;justify-content:flex-end} .rb-grid > .sd-field > .ct-label{margin-top:0}
/* ---- 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 */
.cb-mode { margin: 14px 0 4px; width: 100%; display: flex; }
.cb-mode label { flex: 1; text-align: center; }
.cb-sel { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-chips button { min-width: 48px; height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cb-chips button:hover { border-color: rgba(200,114,47,0.6); }
.cb-chips button.on { background: rgba(200,114,47,0.18); border-color: #C8722F; color: #fff; }
.cb-chips.cb-locked button { opacity: 0.45; }
.cb-xywh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cb-xywh .sd-input { padding-left: 10px; padding-right: 6px; }
@media (max-width: 420px) { .cb-xywh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cb-fmt { margin-top: 14px; }
.cb-wrap { padding: 12px; }
.cb-canvas { max-width: 100%; height: auto !important; touch-action: none; outline: none; box-shadow: none !important; }
.cb-canvas:focus-visible { box-shadow: 0 0 0 3px rgba(200,114,47,.6) !important; }
/* SEO Autopilot extras */
.ap-card .au-first, .ap-card .au-cards { margin-top: 18px; }
/* 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; }
@media (max-width: 640px) { .sa-bar .sd-go { width: 100%; } }
@media (max-width: 640px) { .sa-go .sd-go { width: 100%; white-space: normal; } }

/* Store Agent explainer */

/* Score / count tiles (replaces the old circles: cleaner, never cramped) */
 .au-score { position: relative; overflow: hidden; width: auto; height: auto; min-width: 116px; padding: 14px 18px 18px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.03); display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 5px; box-sizing: border-box; --tone: #f87171; }
 .au-score.au-warn { --tone: #fbbf24; }  .au-score.au-good { --tone: #22c55e; } .au-score.au-bad { --tone: #f87171; } .au-score { --tone: #22c55e; }
 .au-score strong { font-size: 34px; font-weight: 800; line-height: 1; color: var(--tone); letter-spacing: -0.02em; }
 .au-score span { font-size: 13px; font-weight: 600; color: var(--text-dimmer); }
 .au-score::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--p, 100) * 1%); background: var(--tone); }
 .au-score::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.06); } .au-head { gap: 20px; }
.sg-size { display: grid; gap: 16px; } .sg-size .sg-dims .sd-field { margin-bottom: 0; }
.rb-grid + .sd-field { margin-top: 14px; }
[data-for] > .sd-field + .sd-field { margin-top: 14px; }
 .au-score.au-warn, .au-score.au-bad, .au-score.au-good { border-color: var(--border); }

/* Resize Image: roomier, grouped layout */
.rz-page { max-width: 1040px; }
.rz-page #dropzoneWrap, .rz-page #batchCardWrap, .rz-page > .guide-link { max-width: 672px; margin-left: auto; margin-right: auto; }
.rz-page .file-card { padding: 24px 26px; }
.rz-page .file-card-top { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.rz-change { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 38px; 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: 13.5px; font-weight: 600; cursor: pointer; }
.rz-change:hover { border-color: rgba(200,114,47,0.6); color: #E3945B; }
.rz-page .is-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; margin-top: 22px; }
.rz-page .is-stage { min-height: 320px; max-height: 480px; }
.rz-page .is-stage canvas { max-height: 456px; }
.rz-page .is-ctrl { gap: 14px; }
.rz-group { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,0.02); }
.rz-h { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dimmer); }
.rz-page .is-presets #isPresetList { max-height: 260px; overflow: auto; }
.rz-page .action-area { max-width: 520px; margin: 22px auto 0 !important; }
.rz-page #resultRow { text-align: center; }
@media (max-width: 760px) { .rz-page .is-wrap { grid-template-columns: minmax(0, 1fr); } .rz-page .is-preview { position: static; } .rz-page .file-card { padding: 18px; } .rz-page .is-stage { min-height: 200px; } .rz-change span { display: none; } }
.rz-page .is-row2 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .rz-page .is-row2 select { width: 100%; }
/* Print File Checker: wider workspace once a file is loaded */
.pc-page { max-width: 1040px; } .pc-page:has(#work.hidden) { max-width: 720px; }
.pc-page .file-card { padding: 24px 26px; }
.pc-page .pc-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; }
.pc-page .pc-modes { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.pc-page .pc-modes label { text-align: center; }
.pc-page #verdict, .pc-page #verdict * { word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) { .pc-page .pc-grid, .pc-page .pc-modes { grid-template-columns: minmax(0, 1fr); } .pc-page .file-card { padding: 18px; } }

/* "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 */
.xt-field .sd-input { width: 100%; }

/* Robots.txt generator: settings left, live file right */
.rb-right .sd-code { min-height: 420px; }
.rb-right .sd-actions { margin-top: 0; }
@media (max-width: 900px) { .rb-right .sd-code { min-height: 220px; } }
/* SEO tools: the card widens once a report is showing */
.upload-section:has(> .sd-card #report:not(.hidden):not(:empty)) { max-width: 1120px; }
.rb-right .sd-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rb-right .sd-actions .btn-full { margin: 0; min-height: 44px; font-size: 14px; }
/* Typing tools: a roomier writing area */
/* 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; } }
.options-row input[type="month"] { color-scheme: dark; }
/* Photo pickers at the top of a tool: a proper drop target, not a small button */
.acr-left > .acr-photo-btn:first-child { width: 100%; min-height: 112px; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 16px; font-size: 15px; }
.acr-left > .acr-photo-btn:first-child svg { width: 26px; height: 26px; }
.acr-left > .acr-photo-btn:first-child:hover { background: rgba(200,114,47,.1); border-color: rgba(200,114,47,.8); }
/* Marketplace Seller Agent */
.mk-mapr .sd-input { height: 38px; padding: 0 10px; font-size: 13px; }
.mk-page .ap-btns .sd-go { min-height: 44px; padding: 0 22px; width: auto; display: inline-flex; align-items: center; }

/* 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: #C8722F; 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 */
.au-tips{margin-top:14px;display:grid;gap:8px}
.au-tip-i{border:1px solid var(--border);border-radius:10px;padding:0 12px}.au-tip-i>summary{cursor:pointer;padding:10px 0;display:flex;justify-content:space-between;gap:10px;font-size:14px;list-style:none}.au-tip-i>summary::-webkit-details-marker{display:none}
.au-tip-i>summary span{color:#4ade80;font-size:12.5px;font-weight:700;white-space:nowrap}.au-tip-i p{font-size:13px;line-height:1.55;margin:0 0 8px;color:var(--text-dim)}
.au-files{margin:0 0 8px;padding-left:18px;font-size:12.5px}.au-files li{margin:2px 0;word-break:break-all}
.au-plan{flex-direction:column;align-items:stretch;margin-top:14px}.au-plan>b{font-size:15px}.au-plan-row{display:flex;flex-wrap:wrap;gap:10px}.au-plan-row select{flex:1 1 220px;max-width:320px}
.au-plan-out{margin-top:6px;font-size:13.5px;line-height:1.6}.au-plan-out ol{padding-left:20px;display:grid;gap:10px}.au-plan-out li div{color:var(--text-dim);margin-top:3px}
.au-imp{font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;margin-left:4px}.au-imp-high{background:rgba(239,68,68,.15);color:#f87171}.au-imp-medium{background:rgba(234,179,8,.15);color:#facc15}.au-imp-low{background:rgba(148,163,184,.15);color:#cbd5e1}
/* SEO audit — full-width speed tips, code changes, site-check fixes */
.au-wide{margin:16px 0;padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.015)}.au-wide>h3{margin:0 0 12px;font-size:17px}.au-wide>h3 small{font-size:12.5px;font-weight:500;color:var(--text-dimmer);margin-left:6px}
.au-wide .au-tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:10px;margin:0;align-items:start}
.au-chg{margin:10px 0 4px;display:grid;gap:6px}.au-chg-h{font-size:12.5px;color:var(--text-dim)}
.au-code{position:relative;border:1px solid var(--border);border-radius:8px;background:rgba(0,0,0,.25);padding:8px 10px}.au-code>span{font-size:11.5px;font-weight:700;color:#f87171;text-transform:uppercase;letter-spacing:.04em}.au-code.au-new>span{color:#4ade80}
.au-code pre{margin:6px 0 0;white-space:pre-wrap;word-break:break-all;font-size:12px;line-height:1.5;max-height:260px;overflow:auto;color:var(--text)}
.au-cp{position:absolute;top:6px;right:8px;background:rgba(255,255,255,.08);border:1px solid var(--border);color:var(--text);border-radius:6px;font-size:11.5px;padding:3px 9px;cursor:pointer;font-family:inherit}
.au-fxs{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:12px;align-items:start}
.au-fx{border:1px solid var(--border);border-radius:12px;padding:14px;display:grid;gap:8px}.au-fx>b{font-size:14.5px}.au-fx p{margin:0;font-size:13px;line-height:1.55;color:var(--text-dim)}.au-fx .au-ai-btn{justify-self:start}
.au-lnk{display:inline-flex;align-items:center;text-decoration:none}
@media (max-width:640px){.au-wide .au-tips,.au-fxs{grid-template-columns: minmax(0, 1fr)}.au-wide{padding:14px}}
/* SEO audit / autopilot — collapsible Errors / Warnings / Tips groups */
.au-grp{margin:14px 0;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.015)}
.au-grp>summary{list-style:none;cursor:pointer;padding:14px 18px;margin:0 !important;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.au-grp>summary::-webkit-details-marker{display:none}
.au-grp>summary::before{content:"▸";color:var(--text-dimmer);font-size:14px}.au-grp[open]>summary::before{content:"▾"}
.au-grp>summary em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--text-dimmer);margin-left:auto}.au-grp[open]>summary em{visibility:hidden}
.au-grp-b{padding:0 14px 6px}
.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}
.hero-picker-wrap{min-height:121px}
/* ---- Instagram Reel Agent ---- */
.ra-audit .au-card,.ra-brand .au-card{display:flex;flex-direction:column;gap:10px}.ra-pick-t .au-muted{font-weight:400}
@media (max-width: 600px) { .rb-right .sd-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rb-right .sd-actions > * { white-space: normal; min-width: 0; } }

@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}.yt-pair select.sd-input{padding-left:10px;padding-right:28px}}