/* WhizPDF design system v2
   Layout: restrained Western SaaS. Neutrals carry the page; color lives ONLY
   in icon tiles, badges and the hero illustration. Blue #2563eb is the single
   action color (buttons / links). Every tool card carries its own hue via --c. */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --line-2:#cbd5e1;
  --accent:#2563eb; --accent-ink:#1d4ed8; --bg:#f8fafc; --card:#ffffff;
  --radius:12px;
}
html { scroll-behavior:smooth; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-ink); text-decoration:underline; }
h1 { font-size:clamp(30px,4.6vw,46px); line-height:1.12; letter-spacing:-0.025em; font-weight:800; }
h2 { font-size:clamp(21px,2.6vw,27px); letter-spacing:-0.015em; margin:0 0 6px; font-weight:750; }
h3 { font-size:16px; }
p { color:var(--ink); }
.section-sub { color:var(--muted); margin-bottom:26px; }

/* Header */
.site-header { background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; overflow:visible; }
.site-header.mobile-menu-open { backdrop-filter:none; -webkit-backdrop-filter:none; }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:62px; position:relative; }
.logo { display:inline-flex; align-items:center; gap:9px; font-weight:750; font-size:18px; color:var(--ink); letter-spacing:-0.01em; }
.logo:hover { text-decoration:none; }
.nav { display:flex; align-items:center; gap:26px; }
.nav a { color:var(--ink); font-size:14.5px; font-weight:550; }
.nav a:hover { color:var(--accent); text-decoration:none; }
.nav-direct { white-space:nowrap; }
#navAuth { display:flex; align-items:center; justify-content:flex-end; width:72px; min-width:72px; flex:0 0 72px; }
#navAuth:not(.nav-auth-ready) > .nav-auth-fallback { visibility:hidden; }
.nav-auth-pending { display:block; width:36px; height:36px; flex:none; }
#navAuth > .nav-auth-pending { display:none; }
#navAuth:not(.nav-auth-ready) > .nav-auth-pending { display:block; }
#navAuth noscript { display:none; }
.nav-toggle { display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink); }

/* ---- header mega menu ---- */
/* Anchor the dropdown to the header bar, not the button: the nav sits on the
   RIGHT side, so button-relative left offsets push the panel off-screen.
   padding-bottom/negative margin extend the hover area across the panel gap. */
.nav-mega { position:static; padding-bottom:16px; margin-bottom:-16px; }
.nav-mega-btn { display:flex; align-items:center; gap:6px; background:none; border:0;
  padding:8px 0; font:inherit; color:var(--ink); font-size:14.5px; font-weight:550;
  cursor:pointer; }
.nav-mega-btn:hover { color:var(--accent); }
.nav-mega-btn .car { transition:transform .15s ease; }
.nav-mega:hover .car, .nav-mega:focus-within .car, .nav-mega.mega-open .car { transform:rotate(180deg); }
.nav-mega-panel { display:none; position:absolute; top:100%; left:50%; right:auto;
  transform:translateX(-50%); width:100vw; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:22px 28px 24px; z-index:60;
  grid-template-columns:repeat(7, minmax(0, 1fr)); gap:18px 28px; align-items:start;
  box-shadow:0 18px 50px rgba(15,23,42,.16); }
.nav-mega:hover .nav-mega-panel, .nav-mega:focus-within .nav-mega-panel,
.nav-mega.mega-open .nav-mega-panel { display:grid; }
.mega-cat-head { margin:0 0 8px; font-size:10px; font-weight:700;
  letter-spacing:.045em; text-transform:uppercase; color:var(--c,#2563eb); }
.mega-cat { grid-column:span 1; }
.mega-list { display:grid; grid-template-columns:minmax(0,1fr); gap:1px; }
.nav .mega-item { display:flex; align-items:center; gap:8px; padding:4px 6px; margin:0 -6px;
  border-radius:8px; color:var(--ink); font-size:12px; font-weight:400; text-decoration:none; }
.mega-item:hover { background:var(--soft,#f4f6f9); text-decoration:none; color:var(--accent); }
.mega-item .tico { flex:none; }
.mega-item span { white-space:normal; overflow:visible; text-overflow:clip; min-width:0; line-height:1.3; }

/* ---- focused conversion menu ---- */
.nav-convert { position:static; padding-bottom:16px; margin-bottom:-16px; }
.nav-convert-btn { display:flex; align-items:center; gap:6px; background:none; border:0;
  padding:8px 0; font:inherit; color:var(--ink); font-size:14.5px; font-weight:550; cursor:pointer; }
.nav-convert-btn:hover { color:var(--accent); }
.nav-convert-btn .car { transition:transform .15s ease; }
.nav-convert:hover .car, .nav-convert:focus-within .car, .nav-convert.nav-convert-open .car { transform:rotate(180deg); }
.nav-convert-panel { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:min(520px, calc(100vw - 48px)); grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding:20px 24px;
  max-height:calc(100vh - 90px); overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-radius:14px; z-index:110; box-shadow:0 18px 50px rgba(15,23,42,.16); }
.nav-convert:hover .nav-convert-panel, .nav-convert:focus-within .nav-convert-panel,
.nav-convert.nav-convert-open .nav-convert-panel { display:grid; }
.convert-group + .convert-group { border-left:1px solid var(--line); padding-left:24px; }
.convert-heading { margin:0 0 8px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.045em; text-transform:uppercase; }
.convert-heading-from { color:#2563eb; }
.convert-heading-to { color:#dc2626; }
.nav .convert-link { display:flex; align-items:center; min-height:30px; padding:4px 6px; margin:0 -6px; border-radius:8px;
  color:var(--ink)!important; font-size:12px; font-weight:400; text-decoration:none!important; }
.convert-link .tico { flex:none; margin-right:8px; }
.convert-link:hover, .convert-link:focus-visible { background:#f4f6f9; color:var(--accent)!important; outline:none; }

/* ---- utility grid menu ---- */
.nav-site-menu { position:static; padding-bottom:16px; margin-bottom:-16px; }
.nav-grid-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  padding:0; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ink); cursor:pointer; }
.nav-grid-btn:hover, .nav-grid-btn:focus-visible, .nav-site-menu.site-menu-open .nav-grid-btn {
  background:#f4f6f9; border-color:var(--line); color:var(--accent); outline:none; }
.nav-site-panel { display:none; position:absolute; top:calc(100% + 4px); right:0; width:min(860px, calc(100vw - 48px));
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:24px 26px; background:#fff;
  border:1px solid var(--line); border-radius:14px; z-index:110; box-shadow:0 18px 50px rgba(15,23,42,.16); }
.nav-site-menu:hover .nav-site-panel, .nav-site-menu:focus-within .nav-site-panel,
.nav-site-menu.site-menu-open .nav-site-panel { display:grid; }
.site-menu-group + .site-menu-group { border-left:1px solid var(--line); padding-left:26px; }
.site-menu-heading { margin:0 0 10px; color:var(--muted); font-size:11.5px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.site-menu-heading::before { content:""; display:inline-block; width:7px; height:7px; margin:0 7px 1px 0; border-radius:2px; background:currentColor; }
.site-menu-heading-whizpdf { color:#2563eb; }
.site-menu-heading-help { color:#0d9488; }
.site-menu-heading-language { color:#7c3aed; }
.site-menu-link { display:flex; align-items:center; min-height:36px; padding:6px 8px; margin:0 -8px; border-radius:8px;
  color:var(--ink)!important; font-size:14px; font-weight:550; text-decoration:none!important; }
.site-menu-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin-right:2px;
  border-radius:7px; background:#f4f6f9; color:#64748b; flex:none; }
.site-menu-link[href$="/pricing/"] .site-menu-icon { color:#2563eb; background:#eff6ff; }
.site-menu-link[href$="/blog/"] .site-menu-icon { color:#0891b2; background:#ecfeff; }
.site-menu-link[href$="/about/"] .site-menu-icon { color:#7c3aed; background:#f5f3ff; }
.site-menu-link[href$="/contact/"] .site-menu-icon { color:#ea580c; background:#fff7ed; }
.site-menu-link[href$="/faq/"] .site-menu-icon { color:#4f46e5; background:#eef2ff; }
.site-menu-link[href$="/security/"] .site-menu-icon { color:#059669; background:#ecfdf5; }
.site-menu-link[href$="/privacy/"] .site-menu-icon { color:#0d9488; background:#f0fdfa; }
.site-menu-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.site-menu-link:hover, .site-menu-link:focus-visible { background:#f4f6f9; color:var(--accent)!important; outline:none; }
.site-menu-link:hover .site-menu-icon, .site-menu-link:focus-visible .site-menu-icon { background:#eaf1ff; color:var(--accent); }
.nav-language { position:static; padding-bottom:16px; margin-bottom:-16px; }
.site-menu-group-language .nav-language { position:relative; padding:0; margin:0; }
.nav-language-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:14px; cursor:pointer; }
.nav-language-btn:hover, .nav-language-btn:focus-visible, .nav-language.nav-language-open .nav-language-btn { color:var(--accent); outline:none; }
.nav-language-btn > span:first-child { display:inline-grid; place-items:center; width:20px; height:20px; border:1px solid var(--line-2); border-radius:50%; font-size:11px; font-weight:700; }
.nav-language-panel { display:none; position:absolute; top:calc(100% + 4px); right:0; min-width:140px; padding:7px; background:#fff; border:1px solid var(--line); border-radius:10px; z-index:115; box-shadow:0 18px 50px rgba(15,23,42,.16); }
.nav-language:hover .nav-language-panel, .nav-language:focus-within .nav-language-panel, .nav-language.nav-language-open .nav-language-panel { display:grid; }
.nav-language-panel a { display:block; padding:8px 10px; border-radius:7px; color:var(--ink); font-size:13px; text-decoration:none; }
.nav-language-panel a:hover, .nav-language-panel a:focus-visible, .nav-language-panel a.is-active { background:#eff6ff; color:var(--accent); outline:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Buttons */
.btn { display:inline-block; padding:9px 18px; border-radius:9px; font-size:14.5px; font-weight:650; border:1px solid transparent; cursor:pointer; letter-spacing:0; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover { background:var(--accent-ink); color:#fff; }
.btn-ghost { border-color:var(--line-2); color:var(--ink); background:#fff; }
.btn-ghost:hover { border-color:#94a3b8; }
.btn-lg { padding:12px 26px; font-size:15.5px; border-radius:10px; }

/* Hero */
.hero { background:linear-gradient(180deg,#eef4fe 0%,#f8fafc 78%,var(--bg) 100%); overflow:hidden; }
.wrap.hero-inner { display:grid; grid-template-columns:1.06fr .94fr; gap:40px; align-items:center; }
.hero-badge { display:inline-block; font-size:12.5px; font-weight:650; color:var(--accent-ink); background:#fff; border:1px solid #d7e3fb; border-radius:99px; padding:5px 15px; margin-bottom:20px; box-shadow:0 1px 2px rgba(37,99,235,.06); }
.hero h1 { max-width:520px; margin:0 0 16px; }
.hero-sub { color:var(--muted); max-width:480px; margin:0 0 28px; font-size:17px; }
.hero-actions { margin-bottom:20px; }
.hero-chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#475569; background:#fff; border:1px solid var(--line); border-radius:99px; padding:5px 12px; }
.hero-art { display:flex; justify-content:center; }
.hero-art svg { width:min(420px,100%); height:auto; }

/* Trust band */
.wrap.trust-band { display:flex; gap:12px; align-items:flex-start; background:#f0f7f1; border:1px solid #d8e9db; border-radius:var(--radius); padding:14px 18px; margin:28px auto 36px; font-size:14.5px; }
.trust-band svg { flex:none; margin-top:2px; }
.trust-band div { color:#3d5a45; }

/* Tool grids */
section { padding:38px 0; }
.cat-block { margin-bottom:30px; }
.cat-block[id] { scroll-margin-top:78px; }
.cat-head { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.cat-dot { flex:none; width:9px; height:9px; border-radius:3px; background:var(--c,#2563eb); align-self:center; }
.cat-head h2, .cat-head h3 { font-size:16px; font-weight:750; letter-spacing:-0.01em; color:var(--ink); text-transform:none; margin:0; }
.cat-head p { font-size:13.5px; color:var(--muted); margin:0; }
.tools-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px; margin-top:12px; }
.home-secondary-link { display:flex; justify-content:center; margin:8px 0 2px; }
.tool-card {
  display:flex; gap:13px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; color:var(--ink);
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
.tool-card:hover {
  text-decoration:none; color:var(--ink);
  border-color:color-mix(in srgb, var(--c,#2563eb) 45%, white);
  box-shadow:0 6px 18px color-mix(in srgb, var(--c,#2563eb) 13%, transparent);
  transform:translateY(-2px);
}
.tico { flex:none; display:inline-flex; align-items:center; justify-content:center; }
.tc-body { min-width:0; }
.tool-card b { display:block; font-size:14.5px; margin:1px 0 3px; letter-spacing:-0.01em; }
.tool-card span.tc-body > span { display:block; font-size:13px; color:var(--muted); line-height:1.5; }

/* Why grid */
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.why-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; }
.why-card svg { margin-bottom:12px; }
.why-card h3 { margin-bottom:6px; font-size:15px; font-weight:700; }
.why-card p { color:var(--muted); font-size:14px; }

/* Breadcrumb + tool page */
.breadcrumb { padding-top:22px; font-size:13px; color:var(--muted); display:flex; align-items:center; }
.crumb-dot { width:8px; height:8px; border-radius:3px; background:var(--c,#2563eb); margin-right:9px; flex:none; }
.breadcrumb span { margin:0 6px; color:#c3c9d2; }
.breadcrumb > span:last-child { margin:0; color:var(--muted); }
.tool-page { padding:10px 24px 48px; }
.tool-head { display:flex; gap:16px; align-items:center; margin:12px 0 22px; }
.tool-head-txt h1 { font-size:clamp(26px,3.4vw,36px); }
.tool-sub { color:var(--muted); font-size:16px; margin-top:5px; max-width:640px; }

/* Dropzone — the money element */
.dropzone {
  border:1.5px dashed var(--line-2); border-radius:16px; background:#fff;
  padding:46px 24px 38px; text-align:center; cursor:pointer;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.dropzone:hover, .dropzone.dragover {
  border-color:var(--c,var(--accent));
  background:#fbfdff;
  box-shadow:0 4px 22px color-mix(in srgb, var(--c,var(--accent)) 10%, transparent);
}
.dropzone.dragover { background:#f4f8ff; }
.dz-ico {
  width:60px; height:60px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--c,#2563eb) 11%, white);
  color:var(--c,var(--accent)); margin-bottom:14px;
}
.dz-main { font-weight:650; font-size:16.5px; margin-bottom:16px; }
.dz-btn { pointer-events:none; }
.dz-note { font-size:13px; color:var(--muted); margin-top:14px; }
.dz-privacy { display:flex; align-items:center; justify-content:center; gap:6px; font-size:12.5px; color:#64748b; margin-top:10px; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.5; }
.dz-privacy svg { flex:none; }
.dz-quota { font-size:13px; color:var(--muted); margin:12px 2px 0; }

/* ---------- merge PDF selection queue ---------- */
.merge-queue { max-width:720px; margin:16px auto 0; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(15,23,42,.05); }
.merge-queue-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.merge-queue-head h2 { margin:0; font-size:17px; color:var(--ink); }
.merge-queue-summary { margin:4px 0 0; color:var(--muted); font-size:13px; }
.merge-add { width:auto; white-space:nowrap; margin:0; }
.merge-file-list { display:flex; flex-direction:column; gap:8px; list-style:none; margin:16px 0 0; padding:0; }
.merge-file-item { display:flex; align-items:center; gap:9px; min-height:48px; padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:#fbfcfe; transition:border-color .12s, background .12s, opacity .12s; }
.merge-file-item:hover { border-color:var(--line-2); background:#fff; }
.merge-file-item.is-dragging { opacity:.45; }
.merge-file-item.is-drag-target { border-color:var(--accent); background:#eff6ff; }
.merge-drag-handle { flex:none; width:19px; color:#94a3b8; font-size:21px; line-height:1; cursor:grab; user-select:none; text-align:center; }
.merge-file-item:active .merge-drag-handle { cursor:grabbing; }
.merge-file-number { flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#eaf1ff; color:#2563eb; font-size:12px; font-weight:700; }
.merge-file-info { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.merge-file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; color:var(--ink); }
.merge-file-info small { color:var(--muted); font-size:11.5px; }
.merge-file-actions { display:flex; align-items:center; gap:4px; flex:none; }
.merge-file-action { width:27px; height:27px; padding:0; border:1px solid var(--line); border-radius:6px; background:#fff; color:#475569; cursor:pointer; font-size:15px; line-height:1; }
.merge-file-action:hover:not(:disabled) { border-color:#93c5fd; color:#1d4ed8; background:#eff6ff; }
.merge-file-action.merge-file-remove:hover:not(:disabled) { border-color:#fca5a5; color:#b91c1c; background:#fff1f2; }
.merge-file-action:disabled { opacity:.35; cursor:not-allowed; }
.merge-queue-foot { display:flex; justify-content:flex-end; align-items:center; gap:9px; margin-top:16px; }
.merge-queue-foot button { width:auto; margin:0; }
.merge-queue-status { margin:10px 0 0; color:var(--muted); font-size:12.5px; line-height:1.45; }
.merge-queue-status.is-error { color:#b42318; font-weight:650; }
@media(max-width:600px) { .merge-queue { padding:15px; } .merge-queue-head { align-items:stretch; flex-direction:column; gap:10px; } .merge-add { align-self:flex-start; } .merge-file-item { gap:6px; padding:7px; } .merge-file-actions { gap:2px; } .merge-file-action { width:25px; height:25px; } }

/* Sections in tool page */
.tool-section { margin-top:38px; }
.steps { margin-left:0; list-style:none; counter-reset:step; }
.steps li { counter-increment:step; margin:10px 0; padding-left:40px; position:relative; }
.steps li::before {
  content:counter(step); position:absolute; left:0; top:1px;
  width:26px; height:26px; border-radius:50%;
  background:color-mix(in srgb, var(--c,#2563eb) 10%, white);
  color:var(--c,var(--accent)); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.features { list-style:none; }
.features li { margin:9px 0; padding-left:28px; position:relative; }
.features li::before { content:""; position:absolute; left:2px; top:7px; width:14px; height:14px; border-radius:50%; background:color-mix(in srgb, var(--c,#2563eb) 12%, white); border:4px solid var(--c,#2563eb); box-sizing:border-box; }

/* FAQ */
.faq details { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:13px 18px; margin-bottom:9px; }
.faq details[open] { border-color:var(--line-2); }
.faq summary { cursor:pointer; font-weight:650; font-size:14.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::after { content:"+"; color:var(--muted); font-size:18px; flex:none; }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin-top:8px; color:var(--muted); font-size:14px; }

/* Related */
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px; }

/* Simple pages */
.simple-page { padding:44px 24px 60px; max-width:780px; }
.simple-page h1 { margin-bottom:18px; }
.simple-page h2 { font-size:17px; margin:24px 0 8px; }
.simple-page p, .simple-page li { color:#374151; font-size:14.5px; margin:7px 0; }
.simple-page ul, .simple-page ol { margin-left:22px; }
.draft-note { font-size:13px; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px 14px; margin-bottom:16px; }

/* Human-friendly missing-page state. Keep the HTTP status at 404, but make
   the next action obvious instead of exposing a technical error label. */
.not-found-page {
  max-width:1000px;
  min-height:430px;
  margin:0 auto;
  padding:72px 24px 84px;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  align-items:center;
  gap:72px;
}
.not-found-art {
  position:relative;
  display:grid;
  place-items:center;
  width:236px;
  height:236px;
  border:1px solid #d7e6f5;
  border-radius:28px;
  background:#f5faff;
  box-shadow:0 16px 36px rgba(37,99,235,.08);
}
.not-found-paper {
  position:relative;
  width:116px;
  height:142px;
  padding:36px 19px 20px;
  border:2px solid #8bb9e5;
  border-radius:10px;
  background:#fff;
  box-shadow:12px 12px 0 #e2effc;
  transform:rotate(-5deg);
}
.not-found-paper::before {
  content:"";
  position:absolute;
  top:-2px;
  right:-2px;
  width:35px;
  height:35px;
  border-left:2px solid #8bb9e5;
  border-bottom:2px solid #8bb9e5;
  border-radius:0 8px 0 8px;
  background:#eef7ff;
}
.not-found-paper span {
  display:block;
  height:7px;
  margin:0 0 12px;
  border-radius:99px;
  background:#d9e9f8;
}
.not-found-paper span:nth-child(2) { width:78%; }
.not-found-paper span:nth-child(3) { width:58%; }
.not-found-magnifier {
  position:absolute;
  right:39px;
  bottom:42px;
  width:57px;
  height:57px;
  border:8px solid #2563eb;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 12px rgba(37,99,235,.16);
  transform:rotate(-13deg);
}
.not-found-magnifier::after {
  content:"";
  position:absolute;
  right:-25px;
  bottom:-17px;
  width:29px;
  height:9px;
  border-radius:99px;
  background:#2563eb;
  transform:rotate(45deg);
}
.not-found-magnifier i {
  position:absolute;
  top:8px;
  left:11px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#dbeafe;
}
.not-found-code {
  position:absolute;
  left:27px;
  bottom:26px;
  padding:5px 9px;
  border:1px solid #bfdbfe;
  border-radius:7px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:750;
  letter-spacing:.08em;
}
.not-found-copy { max-width:560px; }
.not-found-kicker {
  margin:0 0 12px;
  color:#2563eb;
  font-size:12px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.not-found-copy h1 {
  max-width:520px;
  margin:0;
  color:var(--ink);
  font-size:clamp(30px,4vw,48px);
  line-height:1.08;
  letter-spacing:0;
}
.not-found-message {
  max-width:500px;
  margin:18px 0 0;
  color:#526075;
  font-size:16px;
  line-height:1.7;
}
.not-found-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.not-found-actions .btn { min-height:42px; display:inline-flex; align-items:center; justify-content:center; }
.not-found-help { margin:22px 0 0; color:#697586; font-size:13px; line-height:1.6; }
.not-found-help a { color:#2563eb; font-weight:650; }
@media (max-width:700px) {
  .not-found-page { min-height:0; padding:52px 20px 68px; grid-template-columns:1fr; gap:38px; text-align:center; }
  .not-found-art { width:208px; height:208px; margin:0 auto; transform:scale(.9); }
  .not-found-copy { max-width:none; }
  .not-found-copy h1, .not-found-message { margin-left:auto; margin-right:auto; }
  .not-found-actions { justify-content:center; }
}

/* Footer */
.site-footer { background:#0f172a; color:#a9b4c6; margin-top:48px; padding:48px 0 26px; font-size:13.5px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1.6fr .8fr; gap:34px; }
.footer-brand .logo { color:#fff; }
.footer-tag { color:#e5e7eb; margin:10px 0 6px; }
.footer-privacy { font-size:12.5px; color:#e2e8f0; }
.site-footer h4 { color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; margin:0 0 10px; }
.site-footer a { display:block; color:#a9b4c6; margin:6px 0; }
.site-footer a:hover { color:#fff; text-decoration:none; }
.copyright { border-top:1px solid #1e293b; margin-top:30px; padding-top:18px; font-size:12.5px; }

/* Responsive */
@media (max-width:1140px) and (min-width:761px) {
  .nav { gap:18px; }
  .nav-mega-panel { grid-template-columns:repeat(4, minmax(0,1fr));
    width:100vw; max-height:calc(100vh - 90px); overflow-y:auto; }
}
@media (max-width:900px) {
  .wrap.hero-inner { grid-template-columns:1fr; gap:8px; padding-bottom:40px; }
  .hero-art { display:none; }
}
@media (max-width:760px) {
  html, body { overflow-x:hidden; }
  html.mobile-nav-locked { overflow:hidden; }
  /* Keep the mobile site header visible while the document scrolls. Some
     legacy tool pages create their own scrolling context, so sticky can stop
     sticking there; fixed gives every page the same top navigation behavior. */
  body { padding-top:62px; }
  .site-header { position:fixed; top:0; left:0; right:0; width:100%; z-index:1000; }
  .wrap { max-width:100%; }
  .nav { display:none; position:absolute; top:62px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; padding:16px 24px; gap:14px; align-items:flex-start; max-height:calc(100vh - 62px); overflow-y:auto; box-sizing:border-box; width:100%; }
  .nav { max-height:calc(100dvh - 62px); }
  .nav.open { display:flex; }
  .nav-toggle { display:block; }
  .nav-direct { width:100%; }
  .nav-convert { width:100%; padding:0; margin:0; }
  .nav-convert-btn { width:100%; justify-content:space-between; padding:8px 0; }
  .nav-convert:hover .nav-convert-panel, .nav-convert:focus-within .nav-convert-panel { display:none; }
  .nav-convert.nav-convert-open .nav-convert-panel { display:grid; }
  .nav-convert .car { transform:none; }
  .nav-convert.nav-convert-open .car { transform:rotate(180deg); }
  .nav-convert-panel { position:static; transform:none; width:100%; border:0; border-radius:0; padding:4px 0 4px 10px;
    box-shadow:none; grid-template-columns:1fr; gap:14px; max-height:none; overflow:visible; }
  .convert-group + .convert-group { border-left:0; border-top:1px solid var(--line); padding:14px 0 0; }
  .nav-mega { width:100%; min-width:0; padding:0; margin:0; }
  .nav-mega-btn { width:100%; justify-content:space-between; padding:8px 0; }
  /* Desktop centering and hover/focus opening must not carry into touch navigation. */
  .nav-mega:hover .nav-mega-panel, .nav-mega:focus-within .nav-mega-panel { display:none; }
  .nav-mega-panel { position:static; display:none; left:auto; right:auto; transform:none; width:100%; max-width:100%; border:0; border-radius:0;
    padding:4px 0 4px 10px; box-shadow:none; grid-template-columns:1fr; gap:14px;
    max-height:none; overflow:visible; box-sizing:border-box; }
  .nav-mega.mega-open .nav-mega-panel { display:grid; }
  .nav-mega .car { transform:none; }
  .nav-mega.mega-open .car { transform:rotate(180deg); }
  #navAuth { width:100%; min-width:0; flex:0 0 auto; justify-content:flex-start; }
  .nav-account { width:100%; padding:0; margin:0; flex-wrap:wrap; }
  .nav-account:hover .nav-account-panel { display:none; }
  .nav-account.nav-account-open .nav-account-panel { display:block; }
  .nav-account-panel { position:static; width:100%; margin-top:4px; border:0; border-radius:0; padding:4px 0 4px 10px; box-shadow:none; }
  .nav-site-menu { width:100%; padding:0; margin:0; }
  .nav-grid-btn { width:auto; height:auto; justify-content:flex-start; gap:9px; padding:8px 0; border:0; border-radius:0; font:inherit; color:var(--ink); }
  .nav-grid-btn:hover, .nav-grid-btn:focus-visible, .nav-site-menu.site-menu-open .nav-grid-btn { background:transparent; border:0; color:var(--accent); }
  .nav-grid-btn .sr-only { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; }
  .nav-site-menu:hover .nav-site-panel { display:none; }
  .nav-site-panel { position:static; display:none; width:100%; border:0; border-radius:0; padding:4px 0 4px 10px;
    box-shadow:none; grid-template-columns:1fr; gap:14px; }
  .nav-site-menu.site-menu-open .nav-site-panel { display:grid; }
  .site-menu-group + .site-menu-group { border-left:0; border-top:1px solid var(--line); padding:14px 0 0; }
  .nav-language { width:100%; padding:0; margin:0; }
  .nav-language-btn { width:100%; justify-content:flex-start; padding:8px 0; }
  .nav-language:hover .nav-language-panel { display:none; }
  .nav-language.nav-language-open .nav-language-panel { display:grid; }
  .nav-language-panel { position:static; width:100%; border:0; border-radius:0; padding:4px 0 4px 10px; box-shadow:none; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .tool-head { flex-direction:row; }
  /* Bootstrap also defines .nav with flex-wrap:wrap. Keep long mobile menus
     in a single vertical column instead of creating a second horizontal one. */
  .site-header .nav { flex-wrap:nowrap; overflow-x:hidden; }
  .site-header .nav.open { position:fixed; top:62px; bottom:0; left:0; right:0; width:auto; max-height:none;
    overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y;
    padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:101; }
}

/* ---- Blog ---- */
.blog-index { max-width:1120px; padding-top:56px; padding-bottom:72px; }
.blog-index-head { max-width:760px; margin-bottom:30px; }
.blog-eyebrow { margin:0 0 8px; color:var(--accent-ink); font-size:12px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.blog-index h1 { margin-bottom:12px; }
.blog-index .section-sub { max-width:680px; margin-bottom:0; font-size:16px; line-height:1.65; }
.blog-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:30px; }
.blog-card { min-width:0; border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.03); transition:box-shadow .15s,transform .15s,border-color .15s; }
.blog-card:hover { border-color:#bfd2f5; box-shadow:0 12px 28px rgba(15,23,42,.09); transform:translateY(-3px); }
.blog-card-link { display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
.blog-card-link:hover { color:inherit; text-decoration:none; }
.bc-cover { display:block; aspect-ratio:16/9; background:linear-gradient(125deg,var(--cover-a,#ffb3c1),var(--cover-b,#d9c2f0) 52%,var(--cover-c,#7aa7ef)); }
.bc-body { display:flex; flex:1; flex-direction:column; gap:11px; padding:18px 19px 19px; }
.blog-card .bc-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px 9px; min-height:20px; }
.blog-card .bc-date, .blog-card .bc-read { font-size:12px; color:var(--muted); white-space:nowrap; }
.blog-card .bc-read::before { content:"·"; margin-right:9px; color:#94a3b8; }
.bc-category, .post-category { font-size:11px; color:#1d4ed8; background:#eff6ff; border-radius:999px; padding:3px 8px; text-decoration:none; }
.blog-category-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.blog-category-chip { display:inline-flex; align-items:center; padding:7px 11px; border:1px solid #dbeafe; border-radius:999px; color:#1d4ed8; background:#f8fbff; font-size:13px; text-decoration:none; transition:background .15s,border-color .15s; }
.blog-category-chip:hover, .blog-category-chip:focus-visible { background:#eff6ff; border-color:#bfdbfe; text-decoration:none; }
.blog-category-chip--all { border-color:#bfdbfe; background:#eff6ff; font-weight:650; }
.breadcrumbs { margin:0 0 16px; font-size:13px; color:var(--muted); }
.breadcrumbs a { color:#2563eb; }
.blog-card h2 { min-height:2.7em; margin:0; font-size:19px; line-height:1.35; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-card .bc-desc { min-height:4.65em; font-size:13.5px; color:#475569; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bc-cta { display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:4px; color:var(--accent-ink); font-size:13.5px; font-weight:700; }
.bc-cta span { transition:transform .15s; }
.blog-card:hover .bc-cta span { transform:translateX(3px); }
@media (max-width:980px) {
  .blog-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}
@media (max-width:640px) {
  .blog-index { padding:40px 16px 56px; }
  .blog-index-head { margin-bottom:24px; }
  .blog-index .section-sub { font-size:15px; }
  .blog-list { grid-template-columns:1fr; gap:16px; margin-top:24px; }
}
.blog-post { max-width:1180px; padding:28px 24px 64px; }
.post-breadcrumbs { margin:0 0 22px; }
.post-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:48px; align-items:start; }
.post-main { min-width:0; }
.post-main > h1 { max-width:900px; margin:0 0 18px; }
.post-sidebar { position:sticky; top:86px; min-width:0; max-height:calc(100vh - 106px); overflow:auto; scrollbar-width:thin; }
.post-sidebar > div { margin-bottom:18px; }
.post-sidebar > div:empty { display:none; }
.post-toc, .article-toc { padding:15px 16px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.post-toc nav, .article-toc nav { margin:0; }
.post-toc h2, .post-toc h3, .article-toc h2, .article-toc h3,
.post-toc .toc-title, .article-toc .toc-title { font-size:12px; line-height:1.35; letter-spacing:.055em; text-transform:uppercase; color:#000; font-weight:700; margin:0 0 9px; }
.post-toc ul, .article-toc ul { list-style:none; margin:0; padding:0; }
.post-toc li, .article-toc li { margin:0; }
.post-toc a, .article-toc a { display:block; padding:5px 7px; border-radius:6px; color:#000; font-size:13px; line-height:1.4; text-decoration:none; }
.post-toc a:hover, .post-toc a:focus-visible, .article-toc a:hover, .article-toc a:focus-visible { background:#eff6ff; color:var(--accent); outline:none; }
.post-toc .toc-level-3, .article-toc .toc-level-3 { padding-left:13px; font-size:12.5px; }
.post-quick-answer, .article-quick-answer { display:none; margin:0 0 24px; padding:17px 19px; border:1px solid #cfe0fb; border-left:4px solid var(--accent); border-radius:10px; background:#f5f9ff; }
.post-quick-answer:has(*), .article-quick-answer:has(*) { display:block; }
.post-quick-answer h2, .post-quick-answer h3, .article-quick-answer h2, .article-quick-answer h3,
.quick-answer-title { margin:0 0 6px; color:var(--ink); font-size:15px; line-height:1.35; }
.post-quick-answer p, .article-quick-answer p { margin:4px 0 0; color:#334155; font-size:14.5px; line-height:1.6; }
.post-meta { font-size:13px; color:var(--muted); margin:0 0 8px; }
.post-body { font-size:17px; line-height:1.75; color:#000; max-width:760px; }
.post-body p, .post-body li { color:#000; }
.article-content { max-width:820px; }
.post-body h2 { font-size:22px; margin:34px 0 12px; color:var(--ink); }
.post-body h3 { font-size:18px; margin:26px 0 9px; color:var(--ink); }
.post-body h2[id], .post-body h3[id] { scroll-margin-top:84px; }
.post-body p { margin:14px 0; }
.post-body ul, .post-body ol { margin:14px 0; padding-left:24px; }
.post-body li { margin:7px 0; }
.post-body a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.post-body table { width:100%; border-collapse:collapse; margin:20px 0; font-size:14.5px; overflow-wrap:anywhere; }
.post-body th, .post-body td { padding:10px 12px; border:1px solid var(--line); text-align:left; vertical-align:top; }
.post-body th { background:#eef4fb; font-weight:700; color:var(--ink); }
.post-body tr:nth-child(even) td { background:#fafcfe; }
.post-body figure { margin:20px 0; }
.post-body figure img, .post-body img { max-width:100%; height:auto; }
.post-body figcaption { color:var(--muted); font-size:13px; text-align:center; margin-top:8px; }
.post-body .article-module { display:block; padding:15px 17px; border:1px solid #cbd8e8; border-left:4px solid var(--accent); border-radius:9px; background:#f8fbff; }
.post-body .article-module figcaption { margin:0 0 8px; text-align:left; color:var(--ink); font-size:15px; font-weight:700; }
.post-body .article-module[data-block="callout"] { background:#f5f9ff; }
.post-body .article-module[data-block="callout"][data-tone="warning"] { border-color:#f5d9a6; border-left-color:#d97706; background:#fffaf0; }
.post-body .article-module[data-block="callout"][data-tone="success"] { border-color:#b8e2c8; border-left-color:#15803d; background:#f1fbf4; }
.post-body blockquote, .article-callout, .content-callout, [data-block="callout"] { margin:20px 0; padding:15px 18px; border:1px solid #cfe0fb; border-left:4px solid var(--accent); border-radius:9px; background:#f5f9ff; color:#334155; }
.post-body blockquote p { margin:0; color:inherit; }
.article-callout[data-tone="warning"], .content-callout[data-tone="warning"], [data-block="callout"][data-tone="warning"] { border-color:#f5d9a6; border-left-color:#d97706; background:#fffaf0; }
.article-callout[data-tone="success"], .content-callout[data-tone="success"], [data-block="callout"][data-tone="success"] { border-color:#b8e2c8; border-left-color:#15803d; background:#f1fbf4; }
.article-callout[data-tone="tip"], .content-callout[data-tone="tip"], [data-block="callout"][data-tone="tip"] { border-color:#c8c5f5; border-left-color:#635bdb; background:#f7f6ff; }
.tool-handoff, .article-tool-handoff, [data-block="tool-handoff"] { display:flex; align-items:center; gap:14px; margin:24px 0; padding:17px 18px; border:1px solid #bfdbfe; border-radius:11px; background:#f8fbff; }
.tool-handoff__icon, .article-tool-handoff__icon { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:9px; background:#e5efff; color:var(--accent); }
.tool-handoff__body, .article-tool-handoff__body { min-width:0; flex:1; }
.tool-handoff__title, .article-tool-handoff__title { display:block; color:var(--ink); font-size:15px; font-weight:700; line-height:1.35; }
.tool-handoff__description, .article-tool-handoff__description { display:block; margin-top:3px; color:#64748b; font-size:13px; line-height:1.45; }
.tool-handoff .btn, .article-tool-handoff .btn, [data-block="tool-handoff"] .btn { flex:none; white-space:nowrap; }
/* Article tool handoff upload card. The article module wrapper is also used
   by legacy callouts, so reset its old flex treatment before styling the
   interactive uploader itself. */
.post-body .article-module.article-tool-handoff,
.post-body [data-block="tool-handoff"].article-tool-handoff {
  display:block;
  margin:26px 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.article-tool-upload {
  position:relative;
  display:block;
  width:100%;
  margin:0;
  padding:28px 24px 22px;
  border:1px solid #a5d8e5;
  border-radius:14px;
  background:#f1fbfc;
  text-align:center;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.article-tool-upload::before {
  content:"";
  position:absolute;
  inset:9px;
  border:1px dashed #8bcbd6;
  border-radius:9px;
  pointer-events:none;
}
.article-tool-upload > * { position:relative; z-index:1; }
.article-tool-upload:hover { border-color:#36aebc; background:#ecfafb; }
.article-tool-upload.is-dragover,
.article-tool-upload:focus-within {
  border-color:#0f9eae;
  background:#e7f8fa;
  box-shadow:0 0 0 3px rgba(15,158,174,.14);
  transform:translateY(-1px);
}
.article-tool-upload.is-busy { cursor:wait; }
.article-tool-upload.is-error { border-color:#f3b4b0; background:#fffafa; }
.article-tool-upload__head {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0 auto 16px;
  max-width:560px;
  text-align:center;
}
.article-tool-upload__icon {
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  flex:none;
  border:0;
  border-radius:15px;
  background:#c8f0f3;
  color:#168b99;
}
.article-tool-upload__icon svg { display:block; width:48px; height:48px; }
.article-tool-upload__title {
  display:block;
  color:var(--ink);
  font-size:15px;
  line-height:1.35;
  font-weight:700;
}
.article-tool-upload__description {
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.45;
}
.article-tool-upload__button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:170px;
  min-height:42px;
  padding:10px 14px;
  border:1px solid #2563eb;
  border-radius:8px;
  background:#2563eb;
  color:#fff;
  font:inherit;
  font-size:13.5px;
  font-weight:700;
  line-height:1.25;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.article-tool-upload__button-icon { display:grid; place-items:center; width:18px; height:18px; }
.article-tool-upload__button-icon svg { display:block; width:18px; height:18px; }
.article-tool-upload__button-arrow { display:inline-flex; align-items:center; justify-content:center; width:14px; height:18px; margin-left:2px; font-size:0; line-height:1; opacity:.9; }
.article-tool-upload__button-arrow::before { content:""; width:6px; height:6px; border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.article-tool-upload__button:hover { border-color:#1d4ed8; background:#1d4ed8; }
.article-tool-upload__button:focus-visible {
  outline:2px solid #1d4ed8;
  outline-offset:3px;
}
.article-tool-upload.is-busy .article-tool-upload__button { opacity:.65; cursor:wait; }
.article-tool-upload__drop {
  display:block;
  margin:10px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.article-tool-upload__status {
  min-height:19px;
  margin:8px 0 0;
  color:#2563eb;
  font-size:13px;
  line-height:1.45;
}
.article-tool-upload.is-error .article-tool-upload__status { color:#b42318; }
.article-tool-upload__fallback {
  display:inline-block;
  margin-top:5px;
  color:#2563eb;
  font-size:13px;
  line-height:1.45;
  text-decoration:underline;
  text-underline-offset:2px;
}
.article-tool-upload__fallback:hover { color:#1d4ed8; }
.quick-start, .article-quick-start, [data-block="quick-start"] { margin:25px 0; padding:17px 19px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.quick-start h2, .quick-start h3, .article-quick-start h2, .article-quick-start h3, [data-block="quick-start"] h2, [data-block="quick-start"] h3 { margin:0 0 8px; font-size:17px; color:var(--ink); }
.quick-start ol, .article-quick-start ol, [data-block="quick-start"] ol { margin:0; padding-left:23px; }
.quick-start li, .article-quick-start li, [data-block="quick-start"] li { margin:7px 0; padding-left:3px; }
.post-body .article-module details, .post-body [data-block="faq"] details { margin:8px 0; padding:9px 11px; border:1px solid #dbe4f0; border-radius:7px; background:#fff; }
.post-body .article-module summary, .post-body [data-block="faq"] summary { cursor:pointer; font-weight:650; color:var(--ink); }
.post-faq, .article-faq, .post-related, .article-related { display:none; margin-top:34px; }
.post-faq:has(*), .article-faq:has(*), .post-related:has(*) , .article-related:has(*) { display:block; }
.post-faq > h2, .article-faq > h2, .post-related > h2, .article-related > h2 { margin:0 0 13px; font-size:21px; }
.post-faq details, .article-faq details { background:var(--card); border:1px solid var(--line); border-radius:9px; padding:13px 16px; margin-bottom:8px; }
.post-faq summary, .article-faq summary { cursor:pointer; font-weight:650; font-size:14.5px; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.post-faq summary::-webkit-details-marker, .article-faq summary::-webkit-details-marker { display:none; }
.post-faq summary::after, .article-faq summary::after { content:"+"; color:var(--muted); font-size:18px; line-height:1; }
.post-faq details[open] summary::after, .article-faq details[open] summary::after { content:"-"; }
.post-faq details p, .article-faq details p { margin:8px 0 0; color:#64748b; font-size:14px; }
.related-grid, .article-related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(205px,1fr)); gap:10px; }
.related-card, .article-related-card { display:flex; flex-direction:column; gap:4px; min-width:0; padding:13px 14px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
.related-card:hover, .article-related-card:hover { border-color:#b8cff4; background:#f8fbff; color:var(--ink); text-decoration:none; }
.related-card-title, .article-related-card-title { font-size:14px; font-weight:650; line-height:1.4; }
.related-card-description, .article-related-card-description { color:#64748b; font-size:12.5px; line-height:1.45; }
.post-sidebar-tools, .post-sidebar-articles { padding:14px 15px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.post-sidebar-tools h2, .post-sidebar-tools h3, .post-sidebar-articles h2, .post-sidebar-articles h3 { margin:0 0 8px; font-size:14px; }
.post-sidebar-tools a, .post-sidebar-articles a { display:block; padding:5px 0; color:#000; font-size:13px; line-height:1.4; }
.post-sidebar-tools a:hover, .post-sidebar-articles a:hover { color:var(--accent); }
.post-cta { margin-top:40px; padding:22px 24px; border:1px solid var(--line); border-radius:14px; background:var(--card); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.post-cta p { margin:0; font-weight:600; color:var(--ink); }

/* Structured article modules
   These modules share one editorial card language: a quiet surface, a small
   colored icon tile, clear hierarchy, and generous whitespace. The selectors
   intentionally target the inner content as well as the module wrapper so
   old articles and newly authored modules render consistently. */
.post-body .article-module {
  position:relative;
  overflow:hidden;
  padding:0;
  border:1px solid #dbe5f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.045);
}
.post-body .article-module > .article-faq-content,
.post-body .article-module > .article-quick-start-content,
.post-body .article-module > .article-callout-content,
.post-body .article-module > .article-related-content,
.post-body .article-module > .article-cta-content {
  padding:22px 23px 23px;
}

/* Older saved modules put the header and list directly inside the Quill
   figure. Give that shape the same breathing room as the newer wrapper-based
   markup so the icon never touches the outer border. */
.post-body .article-module.article-related-articles:not(:has(> .article-related-content)),
.post-body .article-module.article-related-tools:not(:has(> .article-related-content)) {
  padding:22px 23px 23px;
}
.post-body .article-module.article-related-articles:not(:has(> .article-related-content)) > .article-module__header,
.post-body .article-module.article-related-tools:not(:has(> .article-related-content)) > .article-module__header {
  margin-bottom:16px;
}
.article-module__header {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
}
.article-module__icon {
  display:grid;
  place-items:center;
  flex:0 0 40px;
  width:40px;
  height:40px;
  border:1px solid #bfdbfe;
  border-radius:12px;
  background:#eff6ff;
  color:#2563eb;
}
.article-module__icon svg { display:block; width:21px; height:21px; }
.article-module__icon--faq { color:#7c3aed; background:#f5f3ff; border-color:#ddd6fe; }
.article-module__icon--steps { color:#2563eb; background:#eff6ff; border-color:#bfdbfe; }
.article-module__icon--note { color:#2563eb; background:#eff6ff; border-color:#bfdbfe; }
.article-module__icon--success { color:#15803d; background:#f0fdf4; border-color:#bbf7d0; }
.article-module__icon--warning { color:#b45309; background:#fffbeb; border-color:#fde68a; }
.article-module__icon--tools { color:#0f766e; background:#f0fdfa; border-color:#99f6e4; }
.article-module__icon--articles { color:#c2410c; background:#fff7ed; border-color:#fed7aa; }
.article-module__icon--cta { color:#1d4ed8; background:#dbeafe; border-color:#bfdbfe; }
.article-module__icon--link { width:30px; height:30px; flex-basis:30px; border-radius:9px; color:#2563eb; background:#eff6ff; }
.article-module__icon--link svg { width:16px; height:16px; }
.article-module__heading { min-width:0; display:flex; flex-direction:column; gap:2px; }
.article-module__title { color:var(--ink); font-size:16px; line-height:1.3; font-weight:750; }
.article-module__subtitle { color:var(--muted); font-size:12.5px; line-height:1.4; }

/* FAQ: answers are intentionally open and scan-friendly. */
.article-faq-list { display:grid; gap:10px; }
.article-faq-item { margin:0; padding:14px 15px 13px; border:1px solid #e2e8f0; border-radius:11px; background:#fbfdff; }
.article-faq-item:hover { border-color:#cbdcf2; background:#fff; }
.article-faq-question { display:flex; align-items:flex-start; gap:9px; min-width:0; color:var(--ink); font-size:14px; line-height:1.45; }
.article-faq-question strong { flex:1 1 0%; min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.article-faq-question-icon { display:inline-grid; place-items:center; flex:0 0 22px; width:22px; min-width:22px; height:22px; min-height:22px; box-sizing:border-box; align-self:flex-start; margin-top:0; border-radius:50%; background:#ede9fe; color:#6d28d9; font-size:13px; font-weight:800; line-height:1; }
.article-faq-item p { margin:8px 0 0 31px; color:#475569; font-size:13.5px; line-height:1.65; overflow-wrap:anywhere; word-break:break-word; }
.post-body .article-module .article-faq-item p { margin-bottom:0; }

/* Quick start: numbered badges create the visual rhythm used by product-led
   guides while keeping long instructions readable on narrow screens. */
.post-body .article-steps { display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:article-step; }
.post-body .article-steps li { display:flex; align-items:flex-start; gap:11px; margin:0; padding:9px 0; list-style:none; }
.post-body .article-steps li::before { content:none !important; display:none !important; }
.article-step-number { display:grid; place-items:center; flex:0 0 32px; width:32px; min-width:32px; height:32px; min-height:32px; box-sizing:border-box; border-radius:50%; background:#2563eb; color:#fff; font-size:13px; font-weight:800; line-height:1; box-shadow:0 4px 9px rgba(37,99,235,.2); }
.article-step-text { flex:1 1 0%; min-width:0; padding-top:5px; color:#334155; font-size:14px; line-height:1.55; overflow-wrap:anywhere; word-break:break-word; }
.article-steps li + li { border-top:1px dashed #e2e8f0; }

/* Callouts use tone-specific iconography rather than only a colored border. */
.post-body .article-module:has(> .article-callout-content) { background:#f8fbff; }
.post-body .article-module:has(.article-module__icon--warning) { border-color:#f5d9a6; background:#fffdf7; }
.post-body .article-module:has(.article-module__icon--success) { border-color:#b8e2c8; background:#f7fdf8; }
.article-callout-content > p { margin:0; color:#475569; font-size:14px; line-height:1.65; }

/* Related content is a compact list of navigable cards, not a plain bullet
   list. It works for both tools and editorial guides. */
.post-body .article-related-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.post-body .article-related-list li { margin:0; padding:0; list-style:none; }
.post-body .article-related-list li::before { content:none !important; display:none !important; }
.article-related-list a { display:flex; align-items:center; gap:11px; min-width:0; min-height:54px; padding:12px 14px; border:1px solid #dbe5f0; border-radius:11px; background:linear-gradient(180deg,#fff 0%,#fbfdff 100%); color:#000; font-size:13.5px; line-height:1.4; text-decoration:none; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
.article-related-list a:hover { border-color:#bfdbfe; background:#fff; box-shadow:0 5px 14px rgba(37,99,235,.09); color:#1d4ed8; text-decoration:none; transform:translateY(-1px); }
.article-related-list a > span:nth-child(2) { min-width:0; flex:1 1 auto; overflow-wrap:anywhere; word-break:break-word; }
.article-related-item-icon { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; border:1px solid #bfdbfe; border-radius:8px; background:#eff6ff; color:#2563eb; font-size:14px; line-height:1; }
.article-related-item-arrow { margin-left:auto; color:#94a3b8; font-size:16px; line-height:1; }
.article-related-list a:hover .article-related-item-arrow { color:#2563eb; }

/* CTA and internal links retain clear actions without looking like ads. */
.post-body .article-module:has(> .article-cta-content) { border-color:#bfdbfe; background:linear-gradient(135deg,#f8fbff 0%,#eff6ff 100%); }
.post-body .article-cta-content { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:24px; align-items:center; }
.post-body .article-cta-content .article-module__header { grid-column:1; grid-row:1; }
.article-cta-content > p { margin:0 0 17px; color:#475569; font-size:14px; line-height:1.6; }
.article-cta-button { grid-column:2; grid-row:1 / span 2; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:40px; padding:9px 16px; border:1px solid #2563eb; border-radius:9px; background:#2563eb; color:#fff !important; font-size:13.5px; font-weight:700; line-height:1.2; text-decoration:none !important; white-space:nowrap; box-shadow:0 5px 12px rgba(37,99,235,.18); }
.article-cta-button:hover { border-color:#1d4ed8; background:#1d4ed8; color:#fff !important; text-decoration:none !important; }
.article-cta-button span { font-size:17px; line-height:1; }
.post-body .article-inline-link { margin:22px 0; padding:0; border:0; background:transparent; }
.article-inline-link a { display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid #dbe5f0; border-radius:11px; background:#fff; color:#1d4ed8; font-size:14px; font-weight:650; line-height:1.35; text-decoration:none; }
.article-inline-link a:hover { border-color:#bfdbfe; background:#f8fbff; text-decoration:none; }
.article-inline-link__arrow { margin-left:auto; color:#64748b; font-size:17px; }
.article-inline-link a:hover .article-inline-link__arrow { color:#2563eb; }

/* Legacy details remain usable for articles created before the open FAQ
   format, but new FAQ modules do not use them. */
.post-body .article-module details { margin:8px 0; padding:9px 11px; border:1px solid #dbe4f0; border-radius:7px; background:#fff; }
.post-body .article-module summary { cursor:pointer; font-weight:650; color:var(--ink); }

@media (max-width:680px) {
  .post-body .article-module > .article-faq-content,
  .post-body .article-module > .article-quick-start-content,
  .post-body .article-module > .article-callout-content,
  .post-body .article-module > .article-related-content,
  .post-body .article-module > .article-cta-content { padding:18px 16px 19px; }
  .post-body .article-related-list { grid-template-columns:1fr; }
  .post-body .article-cta-content { display:block; }
  .post-body .article-cta-button { margin-top:2px; }
  .article-module__header { margin-bottom:14px; }
  .article-module__title { font-size:15px; }
  .article-faq-item p { margin-left:31px; }
}

/* Keep legacy posts at the same readable width when no structured sidebar is
   generated. Modern browsers collapse the unused grid track automatically. */
@supports selector(.post-sidebar:has(*)) {
  .post-layout:not(:has(.post-sidebar > div:not(:empty))) { grid-template-columns:minmax(0,1fr); }
  .post-layout:not(:has(.post-sidebar > div:not(:empty))) .post-sidebar { display:none; }
}

@media (max-width:900px) {
  .post-layout { grid-template-columns:minmax(0,1fr); gap:30px; }
  .post-sidebar { position:static; order:2; max-height:none; overflow:visible; }
  .post-sidebar:empty { display:none; }
  .post-sidebar > div { margin-bottom:14px; }
}
@media (max-width:600px) {
  .blog-post { padding:22px 16px 46px; }
  .post-main > h1 { font-size:clamp(27px,8vw,36px); }
  .post-body { font-size:16px; line-height:1.7; }
  .post-body h2 { font-size:20px; margin-top:29px; }
  .tool-handoff, .article-tool-handoff, [data-block="tool-handoff"] { align-items:flex-start; flex-wrap:wrap; }
  .tool-handoff .btn, .article-tool-handoff .btn, [data-block="tool-handoff"] .btn { margin-left:54px; }
  .article-tool-upload { padding:18px 14px 16px; }
  .article-tool-upload__head { justify-content:center; margin-bottom:14px; }
  .article-tool-upload__button { width:100%; max-width:280px; }
  .post-cta { padding:18px; }
}

/* ---- Account / Contact / FAQ ---- */
.account-wrap { display:flex; flex-direction:column; align-items:center; padding:56px 20px 72px; }
.account-card { width:100%; max-width:420px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:36px 34px; box-shadow:0 1px 3px rgba(15,23,42,.05); }
.account-card h1 { font-size:23px; margin:0 0 6px; }
.acc-sub { color:var(--muted); font-size:14.5px; margin:0 0 24px; }
.btn-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border:1px solid var(--line-2); border-radius:10px; padding:11px 14px; background:#fff; color:var(--ink); font-weight:600; font-size:14.5px; }
.btn-google:hover { background:#f8fafc; color:var(--ink); text-decoration:none; }
.acc-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; }
.acc-divider::before, .acc-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.acc-form label { display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin:14px 0 6px; }
.acc-form input { width:100%; box-sizing:border-box; border:1px solid var(--line-2); border-radius:10px; padding:11px 13px; font-size:15px; background:#fff; }
.acc-form input:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
.acc-row { display:flex; align-items:baseline; justify-content:space-between; }
.acc-forgot { font-size:13px; }
.acc-hint { font-size:12.5px; color:var(--muted); margin:6px 0 0; }
.acc-submit { width:100%; margin-top:22px; }
.acc-submit.is-busy { opacity:.7; cursor:wait; }
.acc-alt { font-size:14px; color:var(--muted); margin:20px 0 0; text-align:center; }
.acc-legal { font-size:12.5px; color:var(--muted); margin:16px 0 0; line-height:1.5; }
.acc-legal a { text-decoration:underline; }
.acc-note { max-width:420px; text-align:center; font-size:13px; color:var(--muted); margin-top:18px; }
.contact-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:36px; margin-top:8px; }
.contact-form label { display:block; font-size:13.5px; font-weight:600; margin:16px 0 6px; }
.contact-form input, .contact-form select, .contact-form textarea { width:100%; box-sizing:border-box; border:1px solid var(--line-2); border-radius:10px; padding:11px 13px; font-size:15px; font-family:inherit; background:#fff; }
.contact-form textarea { resize:vertical; }
.contact-form .btn { margin-top:20px; }
.contact-form .btn:disabled { opacity:.6; cursor:wait; }
.contact-status { margin:12px 0 0; font-size:13px; line-height:1.5; }
.contact-status.is-success { color:#167344; }
.contact-status.is-error { color:#b42318; }
.contact-side h2 { font-size:17px; margin:26px 0 10px; }
.contact-side p { color:#475569; font-size:14.5px; line-height:1.65; }
.contact-mail { font-weight:600; }
@media (max-width:760px) { .contact-grid { grid-template-columns:1fr; } }
.faq-list { max-width:760px; }
@media (max-width:600px) { .account-card { padding:28px 22px; } }
.tool-intro { max-width:760px; font-size:15.5px; line-height:1.7; color:#475569; margin:26px 0 6px; }
.tool-intro { max-width:760px; font-size:15.5px; line-height:1.7; color:#475569; margin:26px 0 6px; }

/* ---------------- conversion panel ---------------- */
.conv-panel {
  margin:14px auto 0; max-width:640px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.conv-file { display:flex; align-items:center; gap:10px; }
.conv-file-ico {
  flex:none; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--c, #2563eb) 12%, #fff);
  color:var(--c, #2563eb);
}
.conv-file-name {
  flex:1; min-width:0; font-weight:600; font-size:14.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.conv-close {
  flex:none; width:28px; height:28px; border:1px solid var(--line);
  border-radius:8px; background:#fff; color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.conv-close:hover { color:var(--ink); border-color:var(--line-2); }
.conv-panel.batch-single-mode > .conv-file { display:none; }
.conv-panel.batch-single-mode .conv-result { margin-top:0; }
.conv-panel.batch-single-mode .batch-cards { margin-top:0; }
.conv-progress { margin-top:14px; }
.conv-bar {
  height:6px; border-radius:99px; background:#eef2f7; overflow:hidden;
}
.conv-bar-fill {
  height:100%; width:0%; border-radius:99px;
  background:var(--c, var(--accent));
  transition:width .35s ease;
}
.conv-status { font-size:13px; color:var(--muted); margin-top:8px; }
.conv-result { margin-top:14px; }
.conv-done-msg { font-weight:650; font-size:15px; color:#15803d; }
.conv-done-msg.is-progress { color:var(--muted); }
.conv-done-msg.is-partial { color:#b45309; }
.conv-actions { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.conv-error {
  margin-top:12px; font-size:13.5px; color:#b91c1c;
  background:#fef2f2; border:1px solid #fecaca;
  border-radius:9px; padding:9px 12px; line-height:1.5;
}
.conv-error .quota-signup-link {
  color:#1d4ed8; font-weight:600; text-decoration:underline;
}
.conv-error .quota-upgrade-link {
  color:#b45309; font-weight:700; text-decoration:underline;
}
.limit-upgrade-link {
  color:#b45309; font-weight:700; text-decoration:underline;
}
.risk-challenge-box { margin-top:10px; min-height:65px; }
.risk-challenge-status { display:block; margin-top:7px; color:var(--muted); }
.batch-cards { display:flex; flex-direction:column; gap:10px; margin-top:13px; }
.batch-card {
  border:1px solid var(--line); border-radius:12px; padding:12px 13px;
  background:#fff; transition:border-color .18s, background .18s, box-shadow .18s;
}
.batch-card[data-state="converting"] { border-color:#bfdbfe; background:#f8fbff; }
.batch-card[data-state="success"] { border-color:#bbf7d0; background:#f5fff8; }
.batch-card[data-state="failed"] { border-color:#fecaca; background:#fffafa; }
.batch-card-head { display:flex; align-items:center; gap:10px; min-width:0; }
.batch-card-icon {
  flex:none; width:34px; height:34px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 11%, #fff);
}
.batch-card-info { flex:1; min-width:0; display:block; }
.batch-card-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; color:var(--ink); }
.batch-card-meta { display:block; margin-top:2px; color:var(--muted); font-size:12px; white-space:nowrap; }
.batch-card-status { flex:none; color:var(--muted); font-size:12px; font-weight:650; white-space:nowrap; }
.batch-card[data-state="converting"] .batch-card-status { color:#2563eb; }
.batch-card[data-state="success"] .batch-card-status { color:#15803d; }
.batch-card[data-state="failed"] .batch-card-status { color:#b91c1c; }
.batch-card-progress { height:5px; margin-top:10px; border-radius:99px; overflow:hidden; background:#eaf0f6; }
.batch-card-progress-fill { width:0; height:100%; border-radius:99px; background:var(--accent); transition:width .25s ease; }
.batch-card[data-state="success"] .batch-card-progress-fill { background:#16a34a; }
.batch-card[data-state="failed"] .batch-card-progress-fill { background:#dc2626; }
.batch-card-detail { margin:7px 0 0; color:var(--muted); font-size:12.5px; line-height:1.45; overflow-wrap:anywhere; }
.batch-card[data-state="failed"] .batch-card-detail { color:#b91c1c; }
.batch-card-actions { display:flex; gap:8px; margin-top:9px; }
.batch-card-download { padding:7px 13px; font-size:12.5px; }
@media (max-width:560px) {
  .batch-card-status { font-size:11.5px; }
}

/* ---------------- tool option panel ---------------- */
.opt-panel {
  margin:18px auto 0; max-width:640px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px;
}
.opt-title { font-size:15px; font-weight:700; color:var(--ink); margin:0 0 12px; }
.opt-group { display:grid; gap:8px; }
.opt-card {
  display:flex; align-items:flex-start; gap:10px;
  border:1.5px solid var(--line); border-radius:10px;
  padding:10px 12px; cursor:pointer; transition:border-color .15s, background .15s;
}
.opt-card:hover { border-color:var(--line-2); background:#fafbff; }
.opt-card.opt-checked { border-color:var(--accent); background:#eff6ff; }
.opt-card input { margin-top:3px; accent-color:var(--accent); }
.opt-card-txt b { display:block; font-size:14px; color:var(--ink); }
.opt-desc { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.45; }
.opt-field { margin-top:12px; }
.opt-field label { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:5px; }
.opt-field input, .opt-field select {
  width:100%; max-width:380px; padding:9px 12px; font-size:14px;
  border:1.5px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
}
.opt-field input:focus, .opt-field select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.opt-field input.opt-invalid { border-color:#dc2626; }
.opt-field select { max-width:200px; }
.opt-msg { margin:10px 0 0; font-size:13px; color:#b91c1c; }
.opt-hint { margin:6px 0 0; font-size:12px; color:#6b7280; line-height:1.45; }
.opt-msg.ok { color:#15803d; }
.opt-start { margin-top:14px; width:100%; }
.opt-start:disabled { opacity:.5; cursor:not-allowed; }
.opt-urlbtn { margin-top:10px; width:100%; }
.html-source-tabs {
  display:flex; gap:4px; margin:-2px 0 14px; padding:4px;
  background:#f3f4f6; border-radius:10px;
}
.html-source-tab {
  flex:1; border:0; border-radius:8px; background:transparent;
  color:var(--muted); font-size:13px; font-weight:650; padding:9px 10px;
  cursor:pointer; transition:background .15s, color .15s, box-shadow .15s;
}
.html-source-tab:hover { color:var(--ink); }
.html-source-tab.is-active {
  background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(15,23,42,.12);
}
.html-source-panel[hidden] { display:none; }
.html-source-hint { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.html-local-start { margin-top:12px; width:100%; }
.html-local-start:disabled, .opt-urlbtn:disabled { opacity:.55; cursor:not-allowed; }
.html-common-options { margin-top:4px; }

/* footer */
.ed-foot { position:relative; z-index:4; padding:14px 22px 18px; background:#fff;
  border-top:1px solid var(--line,#e5e7eb); }
.ed-foot-row { display:flex; gap:10px; justify-content:flex-end; max-width:1080px;
  margin:0 auto; }
.ed-msg { margin:0 0 10px; font-size:13px; color:#b91c1c; text-align:right; }

/* ---- option panel: compact desktop form (rows instead of phone-like stack) ---- */
.opt-row { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin-top:12px; }
.opt-row:first-child { margin-top:0; }
.opt-row .opt-field { margin-top:0; }
.opt-row .opt-cond { margin-top:0; }
.opt-row-single { grid-template-columns:1fr; }
@media (max-width:640px) { .opt-row { grid-template-columns:1fr; gap:12px; } }
.opt-disabled { opacity:.45; pointer-events:none; }
/* type radio cards side by side (text | image) — only opt-wide radio groups */
.opt-group.opt-group-row { grid-template-columns:1fr 1fr; gap:10px; }
.opt-group.opt-group-row .opt-flabel { grid-column:1 / -1; }
@media (max-width:480px) { .opt-group.opt-group-row { grid-template-columns:1fr; } }
/* slimmer hero dropzone on pages that have an option panel below */
.dropzone.dz-slim { padding:26px 16px 20px; }
.dropzone.dz-slim .dz-ico { width:38px; height:38px; margin-bottom:6px; }
.dropzone.dz-slim .dz-ico svg { width:17px; height:17px; }
.dropzone.dz-slim .dz-main { font-size:14px; }
.dropzone.dz-slim .dz-note { display:none; }
.dropzone.is-loading,.dropzone.is-unavailable{position:relative;pointer-events:none;cursor:wait}
.dropzone.is-loading>*,.dropzone.is-unavailable>*{visibility:hidden}
.dropzone.is-loading::after,.dropzone.is-unavailable::after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font-size:14px;font-weight:650;color:#64748b}
.dropzone.is-loading::after{content:"Loading uploader..."}
.dropzone.is-unavailable{cursor:not-allowed;background:#f8fafc}
.dropzone.is-unavailable::after{content:"Uploader unavailable. Please reload the page.";color:#b91c1c}

/* ==== wdangz 中文适配（Phase 0, 2026-10-21）====
   不搬运 NotoSans 字体文件，用系统中文字体栈；中文标题取消负字距 */
:root { --font-cn: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
body, button, input, select, textarea { font-family: var(--font-cn); }
h1, h2, h3 { letter-spacing: 0; }
[hidden] { display: none !important; }