/*
 * assets/css/ss-v4-skin.css — the site-wide "v4" skin (2026-09-28).
 *
 * The homepage was rebuilt in the "Instant Answer" design (includes/home/v4/,
 * assets/css/home-v4.css). This file carries that look to every other page —
 * public pages, the blog, free tools and the signed-in app — WITHOUT touching
 * their markup, because a retheme must never change what a page does.
 *
 * HOW IT STAYS SAFE
 *  1. It mostly RE-TOKENS. ss-theme.css (public pages, nav, footer), style.css
 *     (the app shell) and Bootstrap 5.3 all draw their colours, radii and
 *     shadows from CSS variables; this file changes the variables, so every
 *     component follows without a rule of its own.
 *  2. Property rules are wrapped in :where(body.ss-v4) — ZERO added
 *     specificity. They beat the base sheets only because this file loads
 *     last in <head>; any page's own <style> (which sits later, in <body>)
 *     still wins a tie. So a page that deliberately paints its own accent —
 *     /local-seo-audit keeps its blue — is left alone.
 *  3. It is switchable: loaded only when ssThemeV4() is on
 *     (includes/design_flag.php); ?theme=classic previews the old look.
 *  4. Japanese and Korean keep ss-theme's OS font stacks: the Latin webfont is
 *     only applied under html:not(:lang(ja)):not(:lang(ko)).
 *
 * The signed-out homepage (.hp4) has its own complete sheet and is not styled
 * here beyond the shared tokens.
 */

@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(../fonts/instrument-sans-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-italic-latin.woff2) format("woff2")}

/* ───────────── 1. Global tokens: app shell (style.css) + Bootstrap ───────────── */
body.ss-v4{
  /* v4 palette */
  --v4-paper:#faf9f6; --v4-paper2:#f2f0ea; --v4-ink:#0f0f12; --v4-ink2:#2b2b33; --v4-muted:#6b6b76; --v4-line:#e6e3dc; --v4-line-soft:#eeebe4;
  --v4-indigo:#2563eb; --v4-indigo-press:#1d4ed8; --v4-indigo-50:#eff6ff; --v4-violet:#0369a1; --v4-coral:#2563eb;
  --v4-card:0 0 0 1px rgba(15,15,18,.06),0 1px 2px rgba(15,15,18,.04);
  --v4-lift:0 0 0 1px rgba(15,15,18,.06),0 30px 60px -30px rgba(15,15,18,.28);

  /* style.css (signed-in app shell) */
  --ss-primary:#2563eb; --ss-primary-light:#eff6ff; --ss-hover:#f4f3ff;
  --ss-text:#2b2b33; --ss-text-muted:#6b6b76; --ss-border:#e6e3dc; --ss-radius:12px;
  --primary:#2563eb; --primary-hover:#1d4ed8; --secondary:#1e40af;
  --background:#faf9f6; --card:#ffffff; --text-dark:#0f0f12; --text-muted:#6b6b76; --border-color:#e6e3dc;
  --radius-lg:18px; --radius-md:12px;
  --shadow-sm:0 0 0 1px rgba(15,15,18,.05),0 1px 2px rgba(15,15,18,.04);
  --shadow-md:0 0 0 1px rgba(15,15,18,.05),0 12px 30px -14px rgba(15,15,18,.18);
  --shadow-lg:0 0 0 1px rgba(15,15,18,.06),0 30px 60px -30px rgba(15,15,18,.28);

  /* Bootstrap 5.3 */
  --bs-primary:#2563eb; --bs-primary-rgb:37,99,235;
  --bs-primary-text-emphasis:#1e40af; --bs-primary-bg-subtle:#eff6ff; --bs-primary-border-subtle:#c7d2fe;
  --bs-link-color:#2563eb; --bs-link-color-rgb:37,99,235; --bs-link-hover-color:#1d4ed8; --bs-link-hover-color-rgb:67,56,202;
  --bs-body-bg:#faf9f6; --bs-body-bg-rgb:250,249,246; --bs-body-color:#0f0f12; --bs-body-color-rgb:15,15,18;
  --bs-secondary-color:rgba(43,43,51,.72); --bs-tertiary-bg:#f2f0ea; --bs-tertiary-bg-rgb:242,240,234;
  --bs-border-color:#e6e3dc; --bs-border-color-translucent:rgba(15,15,18,.09);
  --bs-border-radius:10px; --bs-border-radius-sm:8px; --bs-border-radius-lg:16px; --bs-border-radius-xl:20px; --bs-border-radius-pill:999px;
  --bs-focus-ring-color:rgba(37,99,235,.22);
  --bs-box-shadow:0 12px 30px -14px rgba(15,15,18,.18); --bs-box-shadow-sm:0 1px 2px rgba(15,15,18,.06); --bs-box-shadow-lg:0 30px 60px -30px rgba(15,15,18,.28);
}
html:not(:lang(ja)):not(:lang(ko)) body.ss-v4{
  --bs-body-font-family:"Instrument Sans",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* The one font rule that needs real specificity: style.css sets the family on
   the `body` ELEMENT, which beats any :where() rule. */
html:not(:lang(ja)):not(:lang(ko)) body.ss-v4{
  font-family:"Instrument Sans",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
:where(body.ss-v4){background-color:#faf9f6;color:#0f0f12}
:where(body.ss-v4) :where(h1,h2,h3,h4,.h1,.h2,.h3,.h4){letter-spacing:-.025em}
:where(body.ss-v4) :where(h1,h2,h3,h4,h5,h6) em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
:where(body.ss-v4) ::selection{background:rgba(37,99,235,.18)}
:where(body.ss-v4) :where(.table,table,.badge,.stat-value,.kpi-value){font-variant-numeric:tabular-nums}

/* ───────────── 2. Public theme tokens (ss-theme.css: .ss-page / .ss-nav / .ss-foot) ───────────── */
body.ss-v4 :is(.ss-page,.ss-nav,.ss-foot){
  --primary:#2563eb; --primary-press:#1d4ed8; --primary-soft:#eff6ff;
  --ink:#0f0f12; --muted:#6b6b76;
  --surface:#ffffff; --subtle:#f2f0ea; --line:#e6e3dc;
  --radius:18px;
  --shadow:0 0 0 1px rgba(15,15,18,.06),0 24px 50px -28px rgba(15,15,18,.3);
  --shadow-sm:0 0 0 1px rgba(15,15,18,.05),0 1px 2px rgba(15,15,18,.04);
}
html:not(:lang(ja)):not(:lang(ko)) body.ss-v4 :is(.ss-page,.ss-nav,.ss-foot){
  --sans:"Instrument Sans",Inter,system-ui,-apple-system,sans-serif;
  --display:"Instrument Sans",Inter,system-ui,-apple-system,sans-serif;
}
/* page canvas: warm paper behind white cards */
:where(body.ss-v4) .ss-page{background:#faf9f6}
:where(body.ss-v4) :where(main){background:transparent}
/* headings: v4 weight and tracking. DELIBERATELY SPECIFIC (unlike the rest of
   this file): most landing pages restate `font-weight:800` in their own <style>,
   and typographic weight is the single biggest tell of which design a page is
   in. Only weight and tracking are forced — never colour, size or layout. */
body.ss-v4 main :is(h1,h2,h3,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6){font-weight:600;letter-spacing:-.03em}
body.ss-v4 main :is(h4,h5){font-weight:600}
/* the main call to action is ink, pill-shaped, as on the homepage */
:where(body.ss-v4) .ss-page .btn{border-radius:999px}
:where(body.ss-v4) .ss-page .btn-primary{background:#0f0f12;border-color:#0f0f12;color:#fff}
:where(body.ss-v4) .ss-page .btn-primary:hover{background:#2b2b33;border-color:#2b2b33;color:#fff;box-shadow:0 12px 30px -10px rgba(15,15,18,.45)}
:where(body.ss-v4) .ss-page .btn-ghost{background:#fff;border-color:#e6e3dc}
:where(body.ss-v4) .ss-page .btn-ghost:hover{border-color:#0f0f12;background:#fff}
:where(body.ss-v4) .ss-page .eyebrow{color:#6b6b76;letter-spacing:.12em}
:where(body.ss-v4) .ss-page .eyebrow::before{content:"";display:inline-block;width:18px;height:2px;border-radius:2px;margin-right:10px;vertical-align:middle;background:linear-gradient(90deg,#1d4ed8,#3b82f6)}

/* public header */
:where(body.ss-v4) .ss-nav{background:rgba(250,249,246,.82);border-bottom-color:rgba(15,15,18,.06)}
/* the shared header is ours, so its CTA is forced to the homepage's ink pill
   (its own rules live in header.php's inline <style>, which loads later) */
body.ss-v4 .ss-nav .btn-primary{background:#0f0f12;border-color:#0f0f12;color:#fff;border-radius:999px}
body.ss-v4 .ss-nav .btn-primary:hover{background:#2b2b33;border-color:#2b2b33;color:#fff}
:where(body.ss-v4) .ss-nav .mega{border-radius:20px;box-shadow:0 0 0 1px rgba(15,15,18,.06),0 40px 80px -30px rgba(15,15,18,.35)}

/* ───────────── 3. Bootstrap components — through their own variables ───────────── */
body.ss-v4 .btn{--bs-btn-border-radius:10px;--bs-btn-font-weight:600;--bs-btn-focus-box-shadow:0 0 0 .22rem rgba(37,99,235,.22)}
body.ss-v4 .btn-lg{--bs-btn-border-radius:12px}
body.ss-v4 .btn-sm{--bs-btn-border-radius:8px}
body.ss-v4 .btn-primary{--bs-btn-bg:#2563eb;--bs-btn-border-color:#2563eb;--bs-btn-hover-bg:#1d4ed8;--bs-btn-hover-border-color:#1d4ed8;--bs-btn-active-bg:#1e40af;--bs-btn-active-border-color:#1e40af;--bs-btn-disabled-bg:#2563eb;--bs-btn-disabled-border-color:#2563eb;--bs-btn-focus-shadow-rgb:37,99,235}
body.ss-v4 .btn-outline-primary{--bs-btn-color:#2563eb;--bs-btn-border-color:#c7d2fe;--bs-btn-hover-bg:#2563eb;--bs-btn-hover-border-color:#2563eb;--bs-btn-active-bg:#1d4ed8;--bs-btn-active-border-color:#1d4ed8;--bs-btn-disabled-color:#2563eb;--bs-btn-focus-shadow-rgb:37,99,235}
body.ss-v4 .btn-dark{--bs-btn-bg:#0f0f12;--bs-btn-border-color:#0f0f12;--bs-btn-hover-bg:#2b2b33;--bs-btn-hover-border-color:#2b2b33}
body.ss-v4 .btn-light{--bs-btn-bg:#fff;--bs-btn-border-color:#e6e3dc;--bs-btn-hover-bg:#f2f0ea;--bs-btn-hover-border-color:#d9d5cc}
body.ss-v4 .btn-outline-secondary{--bs-btn-color:#2b2b33;--bs-btn-border-color:#e6e3dc;--bs-btn-hover-bg:#f2f0ea;--bs-btn-hover-color:#0f0f12;--bs-btn-hover-border-color:#d9d5cc;--bs-btn-active-bg:#ebe8e0;--bs-btn-active-color:#0f0f12;--bs-btn-active-border-color:#d9d5cc}
body.ss-v4 .card{--bs-card-border-color:rgba(15,15,18,.07);--bs-card-border-radius:16px;--bs-card-inner-border-radius:15px;--bs-card-cap-bg:#fff;--bs-card-bg:#fff}
body.ss-v4 .dropdown-menu{--bs-dropdown-border-color:rgba(15,15,18,.08);--bs-dropdown-border-radius:14px;--bs-dropdown-box-shadow:0 0 0 1px rgba(15,15,18,.05),0 30px 60px -24px rgba(15,15,18,.3);--bs-dropdown-link-hover-bg:#f2f0ea;--bs-dropdown-link-active-bg:#2563eb}
body.ss-v4 .modal{--bs-modal-border-radius:20px;--bs-modal-inner-border-radius:19px;--bs-modal-border-color:rgba(15,15,18,.06);--bs-modal-box-shadow:0 40px 80px -30px rgba(15,15,18,.45)}
body.ss-v4 .nav-pills{--bs-nav-pills-link-active-bg:#2563eb;--bs-nav-pills-border-radius:999px}
body.ss-v4 .nav-tabs{--bs-nav-tabs-border-color:#e6e3dc;--bs-nav-tabs-link-active-color:#0f0f12;--bs-nav-tabs-link-active-border-color:#e6e3dc #e6e3dc #fff;--bs-nav-tabs-border-radius:10px}
body.ss-v4 .nav{--bs-nav-link-color:#2b2b33;--bs-nav-link-hover-color:#2563eb}
body.ss-v4 .pagination{--bs-pagination-active-bg:#2563eb;--bs-pagination-active-border-color:#2563eb;--bs-pagination-color:#2b2b33;--bs-pagination-hover-color:#2563eb;--bs-pagination-border-color:#e6e3dc;--bs-pagination-border-radius:10px;--bs-pagination-focus-box-shadow:0 0 0 .22rem rgba(37,99,235,.22)}
body.ss-v4 .progress,body.ss-v4 .progress-stacked{--bs-progress-bar-bg:#2563eb;--bs-progress-bg:#ece9e2;--bs-progress-border-radius:999px}
body.ss-v4 .table{--bs-table-border-color:#ece9e2;--bs-table-striped-bg:rgba(242,240,234,.55);--bs-table-hover-bg:rgba(37,99,235,.04);--bs-table-active-bg:rgba(37,99,235,.06)}
body.ss-v4 .list-group{--bs-list-group-border-color:#ece9e2;--bs-list-group-border-radius:14px;--bs-list-group-active-bg:#2563eb;--bs-list-group-active-border-color:#2563eb;--bs-list-group-action-hover-bg:#f7f6f2}
body.ss-v4 .accordion{--bs-accordion-border-color:#e6e3dc;--bs-accordion-border-radius:14px;--bs-accordion-inner-border-radius:13px;--bs-accordion-active-bg:#f4f3ff;--bs-accordion-active-color:#0f0f12;--bs-accordion-btn-focus-box-shadow:0 0 0 .22rem rgba(37,99,235,.22)}
body.ss-v4 .alert{--bs-alert-border-radius:14px}
body.ss-v4 .toast{--bs-toast-border-radius:14px}
body.ss-v4 .popover{--bs-popover-border-radius:14px}
body.ss-v4 .tooltip{--bs-tooltip-bg:#0f0f12;--bs-tooltip-border-radius:8px}
body.ss-v4 .offcanvas{--bs-offcanvas-border-color:#e6e3dc}
body.ss-v4 .badge{--bs-badge-border-radius:999px;--bs-badge-font-weight:600}

/* forms — property rules, zero specificity */
:where(body.ss-v4) :is(.form-control,.form-select){border-color:#e2dfd7}
:where(body.ss-v4) :is(.form-control,.form-select):focus{border-color:#2563eb;box-shadow:0 0 0 .22rem rgba(37,99,235,.14)}
:where(body.ss-v4) .form-check-input:checked{background-color:#2563eb;border-color:#2563eb}
:where(body.ss-v4) .form-check-input:focus{border-color:#93c5fd;box-shadow:0 0 0 .22rem rgba(37,99,235,.2)}
:where(body.ss-v4) .form-range::-webkit-slider-thumb{background:#2563eb}
:where(body.ss-v4) .form-range::-moz-range-thumb{background:#2563eb}
:where(body.ss-v4) .input-group-text{background:#f7f6f2;border-color:#e2dfd7}

/* cards and tables — softer, v4 surfaces */
:where(body.ss-v4) .card{box-shadow:0 1px 2px rgba(15,15,18,.04)}
:where(body.ss-v4) .card.shadow-sm{box-shadow:0 0 0 1px rgba(15,15,18,.05),0 1px 2px rgba(15,15,18,.05)!important}
:where(body.ss-v4) .table>thead>tr>th{color:#6b6b76;font-weight:600;border-bottom-color:#e6e3dc}
:where(body.ss-v4) .text-muted{color:rgba(43,43,51,.66)!important}
:where(body.ss-v4) .bg-light{background-color:#f7f6f2!important}

/* ───────────── 4. Signed-in app shell (style.css / header.php) ───────────── */
:where(body.ss-v4) .app-sidebar{background:#fbfaf7;border-right-color:#ece9e2}
:where(body.ss-v4) .app-sidebar .sidebar-section-heading{color:#8c8a93;letter-spacing:.1em}
:where(body.ss-v4) .app-sidebar .nav-link:hover{transform:none;box-shadow:none}
:where(body.ss-v4) .app-sidebar .nav-link.active{background:#fff;box-shadow:0 0 0 1px rgba(15,15,18,.06),0 1px 2px rgba(15,15,18,.05);color:#0f0f12}
:where(body.ss-v4) .app-sidebar .nav-link.active i{color:#2563eb}
:where(body.ss-v4) .app-sidebar .nav-link.active::before{background:linear-gradient(#1d4ed8,#3b82f6)}
:where(body.ss-v4) .app-toolbar{background:rgba(250,249,246,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:#ece9e2}
:where(body.ss-v4) .credit-badge{background:#fff;border:1px solid #e6e3dc;color:#2b2b33}

/* ───────────── 5. Blog & long-form reading ───────────── */
:where(body.ss-v4) :where(.blog-content,.post-content,.article-content,.entry-content) :where(h2,h3){letter-spacing:-.025em}
:where(body.ss-v4) :where(.blog-content,.post-content,.article-content,.entry-content) a{color:#2563eb;text-underline-offset:3px}
:where(body.ss-v4) :where(.blog-content,.post-content,.article-content,.entry-content) blockquote{border-left:3px solid #2563eb;padding-left:18px;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.25em;color:#2b2b33}

@media (prefers-reduced-motion:reduce){
  :where(body.ss-v4) .ss-page .btn-primary:hover{box-shadow:none}
}

/* ───────────── Sticky signup bar (templates/footer.php #stickyCTA) ─────────────
   Its look is inline styles, so these need !important. Presentation only: the
   markup, the 40%-scroll reveal (inline transform) and the dismiss button
   (inline display:none) all still work — display is deliberately NOT forced.
   v4: a floating frosted pill with an ink button instead of a blue→violet slab. */
body.ss-v4 #stickyCTA{
  left:50% !important; right:auto !important; bottom:16px !important;
  width:min(760px,calc(100% - 32px)); margin-left:calc(min(760px,calc(100% - 32px)) / -2);
  padding:8px 8px 8px 10px !important; border-radius:999px;
  background:rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border:1px solid #e6e3dc;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 50px -18px rgba(15,15,18,.35),0 8px 18px -12px rgba(37,99,235,.35) !important;
  transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s ease !important;
  font-family:"Instrument Sans",system-ui,sans-serif;
}
/* hidden while the inline transform is still translateY(100%) (the script swaps it; browsers re-serialise its translateY(0) as 0px): also fade, so the floating
   bar never peeks above the fold edge */
body.ss-v4 #stickyCTA[style*="translateY(100%)"]{opacity:0;pointer-events:none;transform:translateY(calc(100% + 32px)) !important}
body.ss-v4 #stickyCTA > span{color:#0f0f12 !important;font-weight:600 !important;font-size:15px !important;display:flex;align-items:center;gap:12px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ss-v4 #stickyCTA > span > i{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin:0 !important;
  opacity:1 !important;color:#fff;font-size:14px;
  background:linear-gradient(135deg,#1d4ed8,#2563eb 55%,#3b82f6);
  box-shadow:0 6px 14px -6px rgba(147,51,234,.7);
}
body.ss-v4 #stickyCTA .btn-light{
  background:#0f0f12 !important;border-color:#0f0f12 !important;color:#fff !important;
  padding:10px 20px !important;font-size:14px !important;font-weight:600 !important;
  transition:background .2s,box-shadow .2s,transform .2s;
}
body.ss-v4 #stickyCTA .btn-light:hover{background:#2b2b33 !important;box-shadow:0 12px 26px -10px rgba(15,15,18,.55);transform:translateY(-1px)}
body.ss-v4 #stickyCTA .btn-light i{transition:transform .2s}
body.ss-v4 #stickyCTA .btn-light:hover i{transform:translateX(3px)}
body.ss-v4 #stickyCTA .btn-link{color:#6b6b76 !important;opacity:1 !important;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px !important}
body.ss-v4 #stickyCTA .btn-link:hover{background:#f2f0ea;color:#0f0f12 !important}
@media (max-width:575.98px){
  /* the label repeats the button text — on a phone keep just the button */
  body.ss-v4 #stickyCTA > span{display:none}
  body.ss-v4 #stickyCTA{padding:6px !important}
  body.ss-v4 #stickyCTA > div{flex:1}
  body.ss-v4 #stickyCTA .btn-light{flex:1}
  /* the v4 homepage has its own floating mobile CTA (.hp4 .mcta) */
  body.ss-v4:has(.hp4 .mcta) #stickyCTA{display:none !important}
}
@media (prefers-reduced-motion:reduce){ body.ss-v4 #stickyCTA,body.ss-v4 #stickyCTA .btn-light{transition:none !important} }

/* ───────────── Old-palette tokens (2026-09-29) ─────────────
   Page styles that hard-coded the old blues/purples were rewritten (scratch
   v4tokenize.php) to  var(--v4-*, <original colour>)  — so with the skin OFF the
   variables do not exist and every page keeps its original colour, and with it
   ON these values apply. One place to retune the whole site.
   ALSO ON THE ROOT: a custom property declared on :root (website.php --wr-*,
   style.css :root) resolves its var() THERE, where a body-only token would not
   exist and the old fallback would win. */
body.ss-v4,:root:has(> body.ss-v4){
  --v4-fg:#2563eb;              /* old accent used as text / icon colour */
  --v4-bg:#2563eb;              /* old accent used as a solid fill */
  --v4-line:#2563eb;            /* old accent used in borders / shadows */
  --v4-rgb:37,99,235;           /* old accent inside rgba() — glows, tints */
  --v4-violet:#0369a1;          /* old PURPLE where it must stay distinct from blue (category chips) */
  --v4-violet-rgb:3,105,161;
  --v4-ink:#0f0f12;             /* old dark navy */
  --v4-tint:#eff6ff;            /* old light-blue panels */
  --v4-tint-bd:#dbeafe;         /* old light-blue borders */
  --v4-grad:linear-gradient(120deg,#1e3a8a 0%,#1d4ed8 45%,#2563eb 75%,#3b82f6 100%);   /* old blue→purple bands */
  --v4-soft:radial-gradient(55% 60% at 85% 0%,rgba(37,99,235,.10),transparent 70%),radial-gradient(45% 50% at 5% 10%,rgba(59,130,246,.08),transparent 70%),linear-gradient(180deg,#fbfaf7,#f4f1ea);   /* old light-blue heroes */
}
body.ss-v4,:root:has(> body.ss-v4){ --v4-fg-light:#93c5fd; --v4-hairline:#e6e3dc; --v4-ink-accent:#1d4ed8; }   /* light accent text on dark panels (api-docs) */

/* ───────────── Stored page / article HTML (pages.content, blog posts) ─────────────
   That HTML lives in the DATABASE with the old colours inline, so it cannot be
   rewritten by a file deploy. Matched by the inline value instead; !important
   is the only way past an inline style. Text first, then fills (a fill rule
   also matches "background-color:", so it must come after and win). */
body.ss-v4 :is(.page-content-wrapper,.blog-content,.post-content,.article-content,.entry-content)
  :is([style*="color:#2563eb"],[style*="color: #2563eb"],[style*="color:#1d4ed8"],[style*="color: #1d4ed8"],
      [style*="color:#7c3aed"],[style*="color: #7c3aed"],[style*="color:#6d28d9"],[style*="color: #6d28d9"],
      [style*="color:#3b82f6"],[style*="color: #3b82f6"]){color:#2563eb !important}
body.ss-v4 :is(.page-content-wrapper,.blog-content,.post-content,.article-content,.entry-content)
  :is([style*="background:#2563eb"],[style*="background: #2563eb"],[style*="background-color:#2563eb"],[style*="background-color: #2563eb"],
      [style*="background:#1d4ed8"],[style*="background: #1d4ed8"],[style*="background:#7c3aed"],[style*="background: #7c3aed"]){background:#2563eb !important}
body.ss-v4 :is(.page-content-wrapper,.blog-content,.post-content,.article-content,.entry-content)
  :is([style*="background:#eff6ff"],[style*="background: #eff6ff"],[style*="background-color:#eff6ff"],[style*="background-color: #eff6ff"],
      [style*="background:#dbeafe"],[style*="background: #dbeafe"]){background:#eff6ff !important;border-color:#dbeafe !important}
body.ss-v4 :is(.page-content-wrapper,.blog-content,.post-content,.article-content,.entry-content)
  :is([style*="linear-gradient(135deg,#1e3a8a"],[style*="linear-gradient(135deg, #1e3a8a"],[style*="linear-gradient(135deg,#1d4ed8"],
      [style*="linear-gradient(135deg, #1d4ed8"],[style*="linear-gradient(135deg,#2563eb"],[style*="linear-gradient(135deg, #2563eb"]){background:linear-gradient(120deg,#1d4ed8 0%,#2563eb 55%,#3b82f6 100%) !important}
body.ss-v4 :is(.page-content-wrapper,.blog-content,.post-content,.article-content,.entry-content)
  :is([style*="solid #2563eb"],[style*="solid #1d4ed8"],[style*="solid #7c3aed"],[style*="solid #bfdbfe"],[style*="solid #dbeafe"]){border-color:#dbeafe !important}
body.ss-v4 :is(.page-content-wrapper,.blog-content,.post-content,.article-content,.entry-content)
  :is([style*="border-left:4px solid #2563eb"],[style*="border-left: 4px solid #2563eb"],[style*="border-left:3px solid #2563eb"],[style*="border-left: 3px solid #2563eb"]){border-left-color:#2563eb !important}
/* Two tool headlines carry their gradient INSIDE the translated string
   (lang/*: people_also_ask_checker.h1, top_competitors_checker.h1), so it is
   matched here rather than edited in nine language files. background-image
   only — the inline background-clip:text must survive. */
body.ss-v4 h1 span:is([style*="linear-gradient(135deg,#7c3aed"],[style*="linear-gradient(135deg,#2563eb"]){
  background-image:linear-gradient(120deg,#1d4ed8 0%,#2563eb 60%,#3b82f6 100%) !important}

/* ───────────── API reference (api-docs.php) — light under v4 ─────────────
   The page was a self-contained dark doc theme built on its own variables, so
   re-pointing those is the whole conversion. Code blocks stay dark on purpose:
   their syntax colours were chosen for a dark ground. Owner, 2026-09-29. */
body.ss-v4 .apiref-root{
  --bg:#faf9f6; --bg2:#ffffff; --bg3:#f2f0ea; --border:#e6e3dc;
  --text:#0f0f12; --muted:#55555f; --primary:#2563eb; --code-bg:#16161b;
  --success:#16a34a; --warning:#b45309;
  font-family:"Instrument Sans",system-ui,sans-serif;
}
html:is(:lang(ja),:lang(ko)) body.ss-v4 .apiref-root{font-family:system-ui,sans-serif}
body.ss-v4 .apiref-root .sidebar{background:#fff}
body.ss-v4 .apiref-root .nav-link:hover,body.ss-v4 .apiref-root .nav-link.active{background:#eff6ff;color:#0f0f12}
body.ss-v4 .apiref-root h1,body.ss-v4 .apiref-root h2{font-weight:600;letter-spacing:-.02em}
body.ss-v4 .apiref-root pre{background:#16161b;border-color:#16161b;color:#e6e6ea}
body.ss-v4 .apiref-root code{background:#f2f0ea;color:#1d4ed8}
body.ss-v4 .apiref-root pre code{background:transparent;color:inherit}
body.ss-v4 .apiref-root td:first-child{color:#1d4ed8}
body.ss-v4 .apiref-root th{background:#f2f0ea;color:#55555f}
body.ss-v4 .apiref-root .alert-info{background:#eff6ff;border-color:#dbeafe;color:#1e40af}
body.ss-v4 .apiref-root .alert-warning{background:#fff8e6;border-color:#f3e1ad;color:#7a5200}
body.ss-v4 .apiref-root .chip-pro{background:#eff6ff;border-color:#dbeafe;color:#1d4ed8}
body.ss-v4 .apiref-root .chip-agency{background:#fdf2f8;border-color:#fbcfe8;color:#be185d}
body.ss-v4 .apiref-root .get{background:#dcfce7;color:#15803d}
body.ss-v4 .apiref-root .post{background:#fef3c7;color:#b45309}

/* ───────────── Local SEO audit (/local-seo-audit) ─────────────
   Its old "blue, never purple" rule was retired by the owner on 2026-09-29.
   The page is built on its own --ls-* variables, declared on :root, so they
   are re-pointed from the root here (higher specificity than :root). Green
   stays the tool's positive/action colour. Dark mode keeps its own neutrals. */
:root:has(> body.ss-v4){
  --ls-accent:#2563eb; --ls-accent-2:#1d4ed8; --ls-blue:#2563eb;
}
:root:not([data-bs-theme="dark"]):has(> body.ss-v4){
  --ls-bg:#faf9f6; --ls-surface:#ffffff; --ls-surface-2:#fbfaf7;
  --ls-border:rgba(15,15,18,.08); --ls-border-2:rgba(15,15,18,.04);
  --ls-ink:#0f0f12; --ls-ink-2:#4b4b55; --ls-ink-3:#8a8a93;
}

/* ───────────── Inline purple catch-all (owner 2026-09-29: "purple/pink gradient looks bad — blue like the logo") ─────────────
   Purple, pink and indigo that reach the page as LITERAL inline styles at run time (PHP
   variables, JS-built result rows, DB-driven add-on colours) cannot be rewritten in the
   source, so they are matched here. Generated by scratch inline_catchall.php. Never inside
   the homepage (.hp4). Order matters: text, then fills, then gradients. */
body.ss-v4 :not(.hp4 *):is([style*="color:#7c3aed"],[style*="color: #7c3aed"],[style*="color:#6d28d9"],[style*="color: #6d28d9"],[style*="color:#4f46e5"],[style*="color: #4f46e5"],[style*="color:#9333ea"],[style*="color: #9333ea"],[style*="color:#ec4899"],[style*="color: #ec4899"],[style*="color:#db2777"],[style*="color: #db2777"],[style*="color:#a855f7"],[style*="color: #a855f7"],[style*="color:#8b5cf6"],[style*="color: #8b5cf6"],[style*="color:#6366f1"],[style*="color: #6366f1"],[style*="color:#4338ca"],[style*="color: #4338ca"],[style*="color:#312e81"],[style*="color: #312e81"],[style*="color:#a78bfa"],[style*="color: #a78bfa"]):not([style*="background-color:#7c3aed"]):not([style*="background-color: #7c3aed"]):not([style*="background-color:#6d28d9"]):not([style*="background-color: #6d28d9"]):not([style*="background-color:#4f46e5"]):not([style*="background-color: #4f46e5"]):not([style*="background-color:#9333ea"]):not([style*="background-color: #9333ea"]):not([style*="background-color:#ec4899"]):not([style*="background-color: #ec4899"]):not([style*="background-color:#db2777"]):not([style*="background-color: #db2777"]):not([style*="background-color:#a855f7"]):not([style*="background-color: #a855f7"]):not([style*="background-color:#8b5cf6"]):not([style*="background-color: #8b5cf6"]):not([style*="background-color:#6366f1"]):not([style*="background-color: #6366f1"]):not([style*="background-color:#4338ca"]):not([style*="background-color: #4338ca"]):not([style*="background-color:#312e81"]):not([style*="background-color: #312e81"]):not([style*="background-color:#a78bfa"]):not([style*="background-color: #a78bfa"]){color:#2563eb !important}
body.ss-v4 :not(.hp4 *):is([style*="background:#7c3aed"],[style*="background: #7c3aed"],[style*="background-color:#7c3aed"],[style*="background-color: #7c3aed"],[style*="background:#6d28d9"],[style*="background: #6d28d9"],[style*="background-color:#6d28d9"],[style*="background-color: #6d28d9"],[style*="background:#4f46e5"],[style*="background: #4f46e5"],[style*="background-color:#4f46e5"],[style*="background-color: #4f46e5"],[style*="background:#9333ea"],[style*="background: #9333ea"],[style*="background-color:#9333ea"],[style*="background-color: #9333ea"],[style*="background:#ec4899"],[style*="background: #ec4899"],[style*="background-color:#ec4899"],[style*="background-color: #ec4899"],[style*="background:#db2777"],[style*="background: #db2777"],[style*="background-color:#db2777"],[style*="background-color: #db2777"],[style*="background:#a855f7"],[style*="background: #a855f7"],[style*="background-color:#a855f7"],[style*="background-color: #a855f7"],[style*="background:#8b5cf6"],[style*="background: #8b5cf6"],[style*="background-color:#8b5cf6"],[style*="background-color: #8b5cf6"],[style*="background:#6366f1"],[style*="background: #6366f1"],[style*="background-color:#6366f1"],[style*="background-color: #6366f1"],[style*="background:#4338ca"],[style*="background: #4338ca"],[style*="background-color:#4338ca"],[style*="background-color: #4338ca"],[style*="background:#312e81"],[style*="background: #312e81"],[style*="background-color:#312e81"],[style*="background-color: #312e81"],[style*="background:#a78bfa"],[style*="background: #a78bfa"],[style*="background-color:#a78bfa"],[style*="background-color: #a78bfa"]){background-color:#2563eb !important}
body.ss-v4 :not(.hp4 *):is([style*="solid #7c3aed"],[style*="solid #6d28d9"],[style*="solid #4f46e5"],[style*="solid #9333ea"],[style*="solid #ec4899"],[style*="solid #db2777"],[style*="solid #a855f7"],[style*="solid #8b5cf6"],[style*="solid #6366f1"],[style*="solid #4338ca"],[style*="solid #312e81"],[style*="solid #a78bfa"]){border-color:#2563eb !important}
body.ss-v4 :not(.hp4 *):is([style*="background:rgba(124, 58, 237"],[style*="background: rgba(124, 58, 237"],[style*="background-color:rgba(124, 58, 237"],[style*="background-color: rgba(124, 58, 237"],[style*="background:rgba(124,58,237"],[style*="background: rgba(124,58,237"],[style*="background-color:rgba(124,58,237"],[style*="background-color: rgba(124,58,237"],[style*="background:rgba(109, 40, 217"],[style*="background: rgba(109, 40, 217"],[style*="background-color:rgba(109, 40, 217"],[style*="background-color: rgba(109, 40, 217"],[style*="background:rgba(109,40,217"],[style*="background: rgba(109,40,217"],[style*="background-color:rgba(109,40,217"],[style*="background-color: rgba(109,40,217"],[style*="background:rgba(79, 70, 229"],[style*="background: rgba(79, 70, 229"],[style*="background-color:rgba(79, 70, 229"],[style*="background-color: rgba(79, 70, 229"],[style*="background:rgba(79,70,229"],[style*="background: rgba(79,70,229"],[style*="background-color:rgba(79,70,229"],[style*="background-color: rgba(79,70,229"],[style*="background:rgba(147, 51, 234"],[style*="background: rgba(147, 51, 234"],[style*="background-color:rgba(147, 51, 234"],[style*="background-color: rgba(147, 51, 234"],[style*="background:rgba(147,51,234"],[style*="background: rgba(147,51,234"],[style*="background-color:rgba(147,51,234"],[style*="background-color: rgba(147,51,234"],[style*="background:rgba(236, 72, 153"],[style*="background: rgba(236, 72, 153"],[style*="background-color:rgba(236, 72, 153"],[style*="background-color: rgba(236, 72, 153"],[style*="background:rgba(236,72,153"],[style*="background: rgba(236,72,153"],[style*="background-color:rgba(236,72,153"],[style*="background-color: rgba(236,72,153"],[style*="background:rgba(139, 92, 246"],[style*="background: rgba(139, 92, 246"],[style*="background-color:rgba(139, 92, 246"],[style*="background-color: rgba(139, 92, 246"],[style*="background:rgba(139,92,246"],[style*="background: rgba(139,92,246"],[style*="background-color:rgba(139,92,246"],[style*="background-color: rgba(139,92,246"],[style*="background:rgba(99, 102, 241"],[style*="background: rgba(99, 102, 241"],[style*="background-color:rgba(99, 102, 241"],[style*="background-color: rgba(99, 102, 241"],[style*="background:rgba(99,102,241"],[style*="background: rgba(99,102,241"],[style*="background-color:rgba(99,102,241"],[style*="background-color: rgba(99,102,241"]){background-color:rgba(37,99,235,.08) !important}
body.ss-v4 :not(.hp4 *):is([style*="gradient(135deg,#7c3aed"],[style*="gradient(135deg, #7c3aed"],[style*="gradient(90deg,#7c3aed"],[style*="gradient(90deg, #7c3aed"],[style*="gradient(120deg,#7c3aed"],[style*="gradient(135deg,#6d28d9"],[style*="gradient(135deg, #6d28d9"],[style*="gradient(90deg,#6d28d9"],[style*="gradient(90deg, #6d28d9"],[style*="gradient(120deg,#6d28d9"],[style*="gradient(135deg,#4f46e5"],[style*="gradient(135deg, #4f46e5"],[style*="gradient(90deg,#4f46e5"],[style*="gradient(90deg, #4f46e5"],[style*="gradient(120deg,#4f46e5"],[style*="gradient(135deg,#9333ea"],[style*="gradient(135deg, #9333ea"],[style*="gradient(90deg,#9333ea"],[style*="gradient(90deg, #9333ea"],[style*="gradient(120deg,#9333ea"],[style*="gradient(135deg,#ec4899"],[style*="gradient(135deg, #ec4899"],[style*="gradient(90deg,#ec4899"],[style*="gradient(90deg, #ec4899"],[style*="gradient(120deg,#ec4899"],[style*="gradient(135deg,#db2777"],[style*="gradient(135deg, #db2777"],[style*="gradient(90deg,#db2777"],[style*="gradient(90deg, #db2777"],[style*="gradient(120deg,#db2777"],[style*="gradient(135deg,#a855f7"],[style*="gradient(135deg, #a855f7"],[style*="gradient(90deg,#a855f7"],[style*="gradient(90deg, #a855f7"],[style*="gradient(120deg,#a855f7"],[style*="gradient(135deg,#8b5cf6"],[style*="gradient(135deg, #8b5cf6"],[style*="gradient(90deg,#8b5cf6"],[style*="gradient(90deg, #8b5cf6"],[style*="gradient(120deg,#8b5cf6"],[style*="gradient(135deg,#6366f1"],[style*="gradient(135deg, #6366f1"],[style*="gradient(90deg,#6366f1"],[style*="gradient(90deg, #6366f1"],[style*="gradient(120deg,#6366f1"],[style*="gradient(135deg,#4338ca"],[style*="gradient(135deg, #4338ca"],[style*="gradient(90deg,#4338ca"],[style*="gradient(90deg, #4338ca"],[style*="gradient(120deg,#4338ca"],[style*="gradient(135deg,#312e81"],[style*="gradient(135deg, #312e81"],[style*="gradient(90deg,#312e81"],[style*="gradient(90deg, #312e81"],[style*="gradient(120deg,#312e81"],[style*="gradient(135deg,#a78bfa"],[style*="gradient(135deg, #a78bfa"],[style*="gradient(90deg,#a78bfa"],[style*="gradient(90deg, #a78bfa"],[style*="gradient(120deg,#a78bfa"]){background-image:linear-gradient(120deg,#1e3a8a 0%,#1d4ed8 45%,#2563eb 75%,#3b82f6 100%) !important}
/* ai-seo-tools cards take their accent from an inline --acc set in PHP; the
   purple one follows the blues (the other accents are the cards' identity). */
body.ss-v4 [style*="--acc:#7c3aed"]{--acc:#1d4ed8 !important;--accsoft:#eff6ff !important}
body.ss-v4 [style*="--acc:#4f46e5"]{--acc:#2563eb !important;--accsoft:#eff6ff !important}