/**
 * Tool page layout contract — match tools/dev/json-formatter.html
 * Load after kc-chrome.css / kc-tool-chrome.css, before or with kc-unified.css.
 */
body:has(.kc-header) {
  padding: 0 !important;
  margin: 0 !important;
}

/* Pico / framework pages bump html to ~18px — lock site type scale to 16px */
html:has(.kc-header),
html:has(body .kc-header) {
  font-size: 16px !important;
  --pico-font-size: 16px !important;
  --pico-line-height: 1.6 !important;
  --pico-font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Manrope", sans-serif !important;
  --pico-font-family-monospace: "JetBrains Mono", "Fira Code", ui-monospace, monospace !important;
}

body:has(.kc-header) {
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Manrope", sans-serif !important;
}

/* Pico default form controls run large — match other tool pages */
body:has(.kc-header) button:not(.kc-nav a):not(.kc-brand),
body:has(.kc-header) .btn,
body:has(.kc-header) input:not([type="checkbox"]):not([type="radio"]),
body:has(.kc-header) select,
body:has(.kc-header) textarea {
  font-size: 0.875rem !important;
  font-family: inherit !important;
}

body:has(.kc-header) label,
body:has(.kc-header) .config-item label,
body:has(.kc-header) .control-label {
  font-size: 0.85rem !important;
}

/* Old templates reserved space for fixed .nav-bar — remove the gap */
body:has(.kc-header) main,
body:has(.kc-header) main.main-content,
body:has(.kc-header) .main-content,
body:has(.kc-header) .page-wrap,
body:has(.kc-header) .container,
body:has(.kc-header) .main-wrap,
body:has(.kc-header) .page,
body:has(.kc-header) .wrap,
body:has(.kc-header) .wrapper,
body:has(.kc-header) .app,
body:has(.kc-header) .app-shell,
body:has(.kc-header) .content-wrap {
  padding-top: 0 !important;
}

/* Common local vars that still offset for deleted nav */
body:has(.kc-header) {
  --nav-height: 0px !important;
  --header-height: 0px !important;
  --safe-area-top: 0px !important;
}

/* Kill page-local fixed top navs (legacy templates) */
body:has(.kc-header) nav:not(.kc-nav):not(.breadcrumb):not([data-site-policy-links]):not([role="tablist"]) {
  position: static !important;
}

/* Hide legacy top navs — but keep ones that still host page title / breadcrumb */
body:has(.kc-header) > nav:not([data-site-policy-links]):not(.breadcrumb):not(.kc-nav):not(:has(.breadcrumb)):not(:has(h1)),
body:has(.kc-header) nav.nav-bar:not(:has(.breadcrumb)):not(:has(h1)),
body:has(.kc-header) nav.navbar:not(:has(.breadcrumb)):not(:has(h1)),
body:has(.kc-header) nav:has(.back-home):not(:has(.breadcrumb)),
body:has(.kc-header) nav:has(.nav-content):not(:has(.breadcrumb)):not(:has(h1)),
body:has(.kc-header) nav:has(.nav-inner):not(:has(.breadcrumb)):not(:has(h1)) {
  display: none !important;
}

/* Legacy nav-bar used as title+crumb host → behave like shell column */
body:has(.kc-header) nav.nav-bar:has(.breadcrumb),
body:has(.kc-header) nav.nav-bar:has(h1) {
  display: block !important;
  position: static !important;
  width: min(1120px, calc(100% - 2rem)) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.kc-header) nav.nav-bar:has(.breadcrumb) > .nav-content,
body:has(.kc-header) nav.nav-bar:has(h1) > .nav-content {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Page-local lattice overlays — site skin already provides grid; unwrap box via contents */
body:has(.kc-header) > .bg-grid,
body:has(.kc-header) .bg-grid[aria-hidden="true"],
body:has(.kc-header) .bg-grid {
  display: contents !important;
  background: none !important;
  position: static !important;
  inset: auto !important;
  pointer-events: auto !important;
  z-index: auto !important;
}

/* Leftover template headers: rewrite removes them; hide any that remain (keep if they host the page h1) */
body:has(.kc-header) > header.site-header:not(.kc-header):not(:has(h1)) {
  display: none !important;
}

/* Invoice column: only the body-level shell — not inner .page-body / nested .page-shell */
body:has(.kc-header) > .page-shell,
body:has(.kc-header) > .page-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 95% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px 0 40px !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

body:has(.kc-header) > .page-shell > header,
body:has(.kc-header) > .page-body > header,
body:has(.kc-header) > .page-shell > .breadcrumb,
body:has(.kc-header) > .page-body > .breadcrumb,
body:has(.kc-header) > .page-shell > main,
body:has(.kc-header) > .page-body > main {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body:has(.kc-header) > .page-shell > main.container,
body:has(.kc-header) > .page-body > main.container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Nested tool-body: one outer frame matching breadcrumb width */
body:has(.kc-header) .container > .page-shell,
body:has(.kc-header) .container > .filter-bar,
body:has(.kc-header) .container > .resource-grid,
body:has(.kc-header) .container > .calc-wrapper,
body:has(.kc-header) .container > .tool-body,
body:has(.kc-header) .breadcrumb + .tool-body,
body:has(.kc-header) .breadcrumb ~ .tool-body {
  padding: 1rem 1.25rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  box-sizing: border-box !important;
}

body:has(.kc-header) .tool-body > .shortcut-grid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Inner calc surfaces fill the body frame (match crumb width) */
body:has(.kc-header) .tool-wrapper > .calc-card,
body:has(.kc-header) .tool-wrapper > .card,
body:has(.kc-header) .tool-wrapper > section {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* ---- Shell / container (json-formatter .container = 1400) ---- */
body:has(.kc-header) .container,
body:has(.kc-header) .page-wrap,
body:has(.kc-header) .main-wrap,
body:has(.kc-header) .wrap,
body:has(.kc-header) .wrapper,
body:has(.kc-header) .page,
body:has(.kc-header) main.main-content,
body:has(.kc-header) .main-content,
body:has(.kc-header) .app,
body:has(.kc-header) .app-shell,
body:has(.kc-header) .content-wrap,
body:has(.kc-header) .tool-wrap,
body:has(.kc-header) .tool-container {
  /* Same centered column as homepage .kc-shell / .kc-header-inner — side gutters, not full-bleed */
  width: min(1120px, calc(100% - 2rem)) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Inner tool surfaces fill the shell — no second narrower column */
body:has(.kc-header) .container > .main-card,
body:has(.kc-header) .container > .card,
body:has(.kc-header) .container > main,
body:has(.kc-header) .container > .panel,
body:has(.kc-header) .page-wrap > .card,
body:has(.kc-header) .main-content > .card,
body:has(.kc-header) .main-card,
body:has(.kc-header) .base-list,
body:has(.kc-header) .tool-section {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Flex column so we can normalize title → breadcrumb → body order */
body:has(.kc-header) .container,
body:has(.kc-header) .page-wrap,
body:has(.kc-header) .main-wrap,
body:has(.kc-header) main.main-content {
  display: flex !important;
  flex-direction: column !important;
}

body:has(.kc-header) .container > *,
body:has(.kc-header) .page-wrap > *,
body:has(.kc-header) .main-wrap > *,
body:has(.kc-header) main.main-content > * {
  order: 10;
}

/* Title block first */
body:has(.kc-header) .container > header,
body:has(.kc-header) .container > .header,
body:has(.kc-header) .container > .page-header,
body:has(.kc-header) .container > .title-section,
body:has(.kc-header) .container > .hero:not(.kc-rise),
body:has(.kc-header) .page-wrap > header,
body:has(.kc-header) .page-wrap > .header,
body:has(.kc-header) .page-wrap > .page-header,
body:has(.kc-header) .page-wrap > .title-section,
body:has(.kc-header) .main-wrap > header,
body:has(.kc-header) .main-wrap > .header,
body:has(.kc-header) main.main-content > header,
body:has(.kc-header) main.main-content > .header {
  order: 1 !important;
}

/* Breadcrumb second */
body:has(.kc-header) .container > .breadcrumb,
body:has(.kc-header) .container > nav.breadcrumb,
body:has(.kc-header) .page-wrap > .breadcrumb,
body:has(.kc-header) .page-wrap > nav.breadcrumb,
body:has(.kc-header) .main-wrap > .breadcrumb,
body:has(.kc-header) .main-wrap > nav.breadcrumb,
body:has(.kc-header) main.main-content > .breadcrumb,
body:has(.kc-header) main.main-content > nav.breadcrumb {
  order: 2 !important;
}

/* ---- Page title: centered gradient h1 like json-formatter ---- */
/* Title block: NO border / NO card chrome — plain text only */
body:has(.kc-header) .container > header,
body:has(.kc-header) .container > .header,
body:has(.kc-header) .container > .page-header,
body:has(.kc-header) .container > .title-section,
body:has(.kc-header) .container > .hero:not(.kc-rise),
body:has(.kc-header) .page-wrap > .page-header,
body:has(.kc-header) .page-wrap > header,
body:has(.kc-header) .page-wrap > .header,
body:has(.kc-header) .page-wrap > .title-section,
body:has(.kc-header) .main-wrap > header,
body:has(.kc-header) .main-wrap > .header,
body:has(.kc-header) .title-section,
body:has(.kc-header) main.main-content > header,
body:has(.kc-header) main.main-content > .header,
body:has(.kc-header) .header.header {
  text-align: center !important;
  margin: 1.75rem 0 1rem !important;
  display: block !important;
  border: 0 !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body:has(.kc-header) .container > header h1,
body:has(.kc-header) .container > .header h1,
body:has(.kc-header) .page-wrap > header h1,
body:has(.kc-header) .title-section h1,
body:has(.kc-header) main.main-content > header h1,
body:has(.kc-header) header:not(.kc-header):has(> h1),
body:has(.kc-header) header:not(.kc-header):has(> h1) * {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

body:has(.kc-header) .header-left,
body:has(.kc-header) .header-right,
body:has(.kc-header) .title-group,
body:has(.kc-header) .nav-actions {
  display: contents !important;
}

/* Hide in-page back / home chrome (site header replaces it).
   Do NOT hide .header-left itself — many EN pages nest <main> inside it;
   .header-left already uses display:contents above so children stay visible. */
body:has(.kc-header) .back-home,
body:has(.kc-header) .back-btn,
body:has(.kc-header) a.back-btn,
body:has(.kc-header) .nav-back,
body:has(.kc-header) .back-link,
body:has(.kc-header) a.back,
body:has(.kc-header) a.home-link,
body:has(.kc-header) .top-nav,
body:has(.kc-header) .header-left > a[href="/"],
body:has(.kc-header) .header-left > a[href="/index.html"],
body:has(.kc-header) .page-header .nav-back,
body:has(.kc-header) .header a[aria-label*="返回"],
body:has(.kc-header) .header a[title*="返回"],
body:has(.kc-header) .header a[title*="Back to home"],
body:has(.kc-header) a[title*="Back to home"] {
  display: none !important;
}

body:has(.kc-header) h1,
body:has(.kc-header) .page-header h1,
body:has(.kc-header) .title-group h1,
body:has(.kc-header) .title-section h1,
body:has(.kc-header) header h1 {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Syne", "Manrope", sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  margin: 0 0 0.5rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  color: transparent !important;
  background: linear-gradient(135deg, #b8ff78, #d4ff9a) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  width: 100% !important;
  overflow-wrap: break-word !important;
}

body:has(.kc-header) .subtitle,
body:has(.kc-header) .page-header p,
body:has(.kc-header) .title-group p,
body:has(.kc-header) .title-section p,
body:has(.kc-header) header > p,
body:has(.kc-header) .page-header .lead,
body:has(.kc-header) .header-desc {
  color: #8b93a7 !important;
  font-size: 1.05rem !important;
  text-align: center !important;
  max-width: 42rem !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  -webkit-text-fill-color: #8b93a7 !important;
}

/* ---- Breadcrumb card: independent frame, same width as body ---- */
body:has(.kc-header) nav.breadcrumb,
body:has(.kc-header) .breadcrumb {
  order: 2 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  z-index: auto !important;
  margin: 0.75rem 0 1.25rem !important;
  padding: 0.75rem 1rem !important;
  background: rgb(18 22 34 / 82%) !important;
  border-radius: 10px !important;
  border: 1px solid rgb(184 255 120 / 16%) !important;
  box-shadow: none !important;
  /* Override per-page .breadcrumb { justify-content: center } */
  display: block !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

body:has(.kc-header) .breadcrumb ol,
body:has(.kc-header) .breadcrumb ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
  font-size: 0.875rem !important;
  justify-content: flex-start !important;
}

body:has(.kc-header) .breadcrumb li {
  display: flex !important;
  align-items: center !important;
  color: #8b93a7 !important;
}

body:has(.kc-header) .breadcrumb li:not(:last-child)::after {
  content: "›" !important;
  margin-left: 0.5rem !important;
  color: #5c6478 !important;
}

body:has(.kc-header) .breadcrumb a {
  color: #c5cad6 !important;
  text-decoration: none !important;
}

body:has(.kc-header) .breadcrumb a:hover {
  color: #b8ff78 !important;
}

body:has(.kc-header) .breadcrumb li:last-child,
body:has(.kc-header) .breadcrumb li:last-child span,
body:has(.kc-header) .breadcrumb .bc-current {
  color: #eef2f7 !important;
  font-weight: 500 !important;
}

/* ---- Body block: independent frame, same width as breadcrumb ---- */
/* Catch-all: first real block after crumb (skip ads / chrome helpers) */
body:has(.kc-header) .breadcrumb + main,
body:has(.kc-header) .breadcrumb + article,
body:has(.kc-header) .breadcrumb + form,
body:has(.kc-header) .breadcrumb + section,
body:has(.kc-header) .breadcrumb + div:not(.adsense-placeholder):not(.nav-actions):not(.bg-grid):not(.meta-row):not(.hero-actions):not(.ad-top):not(.badge):not(.warning-box):not(.article-meta):not(.background-blobs):not(.section-title):not(.print-header):not(.blob):not(.site-header),
body:has(.kc-header) nav.breadcrumb + main,
body:has(.kc-header) nav.breadcrumb + article,
body:has(.kc-header) nav.breadcrumb + form,
body:has(.kc-header) nav.breadcrumb + section,
body:has(.kc-header) nav.breadcrumb + div:not(.adsense-placeholder):not(.nav-actions):not(.bg-grid):not(.meta-row):not(.hero-actions):not(.ad-top):not(.badge):not(.warning-box):not(.article-meta):not(.background-blobs):not(.section-title):not(.print-header):not(.blob):not(.site-header),
body:has(.kc-header) .breadcrumb ~ .tool-header,
body:has(.kc-header) .breadcrumb ~ .form-grid,
body:has(.kc-header) .breadcrumb ~ .gradient-canvas-box,
body:has(.kc-header) .breadcrumb ~ .page-shell,
body:has(.kc-header) .breadcrumb ~ .filter-bar,
body:has(.kc-header) .breadcrumb ~ .resource-grid,
body:has(.kc-header) .breadcrumb ~ .calc-wrapper,
body:has(.kc-header) .breadcrumb ~ .bg-grid > .tool-wrapper,
body:has(.kc-header) .breadcrumb ~ .bg-grid > .main-grid,
body:has(.kc-header) .breadcrumb ~ .bg-grid > .tool-grid,
body:has(.kc-header) .breadcrumb ~ .bg-grid > article,
body:has(.kc-header) .breadcrumb ~ .bg-grid > .card,
body:has(.kc-header) .breadcrumb ~ .bg-grid > .calc-card,
body:has(.kc-header) .breadcrumb ~ .bg-grid > section.calc-card,
body:has(.kc-header) .breadcrumb ~ .bg-grid > .calc-wrapper,
body:has(.kc-header) .breadcrumb ~ .tool-body,
body:has(.kc-header) .breadcrumb ~ .calculator-card,
body:has(.kc-header) .breadcrumb ~ .calc-card,
body:has(.kc-header) .breadcrumb ~ .print-header + .tool-header,
/* Also frame body when helpers sit between crumb and tool surface */
body:has(.kc-header) .breadcrumb ~ main,
body:has(.kc-header) .breadcrumb ~ article,
body:has(.kc-header) .breadcrumb ~ form,
body:has(.kc-header) .breadcrumb ~ .main-grid,
body:has(.kc-header) .breadcrumb ~ .tool-wrapper,
body:has(.kc-header) .breadcrumb ~ .tool-grid,
body:has(.kc-header) .breadcrumb ~ .tool-layout,
body:has(.kc-header) .breadcrumb ~ .tool-workspace,
body:has(.kc-header) .breadcrumb ~ .tool-card,
body:has(.kc-header) .breadcrumb ~ .main-layout,
body:has(.kc-header) .breadcrumb ~ .main-card,
body:has(.kc-header) .breadcrumb ~ .main-content,
body:has(.kc-header) .breadcrumb ~ .page-body,
body:has(.kc-header) .breadcrumb ~ .content-layout,
body:has(.kc-header) .breadcrumb ~ .workspace,
body:has(.kc-header) .breadcrumb ~ .glass-panel,
body:has(.kc-header) .breadcrumb ~ .generator-grid,
body:has(.kc-header) .breadcrumb ~ .calculator-card,
body:has(.kc-header) .breadcrumb ~ .calculator-grid,
body:has(.kc-header) .breadcrumb ~ .calc-card,
body:has(.kc-header) .breadcrumb ~ .editor-grid,
body:has(.kc-header) .breadcrumb ~ .editor-card,
body:has(.kc-header) .breadcrumb ~ .panel,
body:has(.kc-header) .container > .main-grid,
body:has(.kc-header) .container > .tool-wrapper,
body:has(.kc-header) .container > .tool-grid,
body:has(.kc-header) .container > .tool-section,
body:has(.kc-header) .container > .tool-layout,
body:has(.kc-header) .container > .tool-workspace,
body:has(.kc-header) .container > .tool-card,
body:has(.kc-header) .container > .workspace,
body:has(.kc-header) .container > .content,
body:has(.kc-header) .container > .content-layout,
body:has(.kc-header) .container > .main-layout,
body:has(.kc-header) .container > .main-card,
body:has(.kc-header) .container > .main,
body:has(.kc-header) .container > .page-body,
body:has(.kc-header) .container > .calc-grid,
body:has(.kc-header) .container > .calc-card,
body:has(.kc-header) .container > .form-grid,
body:has(.kc-header) .container > .input-grid,
body:has(.kc-header) .container > .layout,
body:has(.kc-header) .container > .glass-panel,
body:has(.kc-header) .container > .upload-box,
body:has(.kc-header) .container > .simulator-grid,
body:has(.kc-header) .container > .generator-grid,
body:has(.kc-header) .container > .editor-grid,
body:has(.kc-header) .container > .editor-card,
body:has(.kc-header) .container > .tabs,
body:has(.kc-header) .container > .panel,
body:has(.kc-header) .container > .gradient-canvas-box,
body:has(.kc-header) .container > .bg-grid > .tool-wrapper,
body:has(.kc-header) .container > .bg-grid > .main-grid,
body:has(.kc-header) .container > .bg-grid > .card,
body:has(.kc-header) .container > .bg-grid > .calc-card,
body:has(.kc-header) .container > .bg-grid > section.calc-card,
body:has(.kc-header) .container > .tool-body,
body:has(.kc-header) .container > .calculator-card,
body:has(.kc-header) .container > .calc-card,
body:has(.kc-header) .container > article,
body:has(.kc-header) .container > main,
body:has(.kc-header) .container > form,
body:has(.kc-header) .container > .card,
body:has(.kc-header) .container > section.card,
body:has(.kc-header) .page-wrap > .main-grid,
body:has(.kc-header) .page-wrap > .tool-wrapper,
body:has(.kc-header) .page-wrap > .tool-grid,
body:has(.kc-header) .page-wrap > article,
body:has(.kc-header) .page-wrap > main,
body:has(.kc-header) .page-wrap > .card,
body:has(.kc-header) .page-wrap > .main-card,
body:has(.kc-header) .page-wrap > .workspace,
body:has(.kc-header) .main-wrap > .main-grid,
body:has(.kc-header) .main-wrap > article,
body:has(.kc-header) .main-wrap > main,
body:has(.kc-header) main.main-content > .main-grid,
body:has(.kc-header) main.main-content > article,
body:has(.kc-header) main.main-content > .card,
body:has(.kc-header) main.main-content > .tool-wrapper {
  order: 3 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  border: 1px solid rgb(184 255 120 / 16%) !important;
  border-radius: 10px !important;
  background: rgb(18 22 34 / 82%) !important;
  box-shadow: none !important;
}

/* Nested main.container must fill parent shell (not become a second narrower column) */
body:has(.kc-header) .container > main.container,
body:has(.kc-header) .breadcrumb + main.container,
body:has(.kc-header) .breadcrumb ~ main.container {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* If title still lives inside main, do not paint a card around the title */
body:has(.kc-header) main:has(> header h1),
body:has(.kc-header) main:has(> .tool-header),
body:has(.kc-header) .container > main:has(> header h1),
body:has(.kc-header) .container > main:has(> .tool-header) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 0 !important;
}

/* ---- Cards / tool surface ---- */
body:has(.kc-header) .card,
body:has(.kc-header) .panel,
body:has(.kc-header) .tool-section,
body:has(.kc-header) .tool-card,
body:has(.kc-header) .editor-container,
body:has(.kc-header) .workspace {
  background: rgb(18 22 34 / 82%) !important;
  border: 1px solid rgb(184 255 120 / 16%) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

body:has(.kc-header) .options-bar,
body:has(.kc-header) .toolbar,
body:has(.kc-header) .tool-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.75rem 1rem !important;
}

/* Common button utilities — padding restored after page-local * { padding:0 } */
body:has(.kc-header) button:not(.kc-theme-stub):not(.theme-btn):not(.theme-toggle):not([hidden]),
body:has(.kc-header) .btn,
body:has(.kc-header) .button,
body:has(.kc-header) .action-btn,
body:has(.kc-header) .tool-btn,
body:has(.kc-header) .btn-copy,
body:has(.kc-header) .copy-btn,
body:has(.kc-header) input[type="button"],
body:has(.kc-header) input[type="submit"] {
  padding: 0.45rem 0.9rem !important;
  cursor: pointer !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

/* Secondary / outline utilities only — do not restyle plain .action-btn (often primary CTA) */
body:has(.kc-header) button:not([class]):not([hidden]),
body:has(.kc-header) .action-btn.secondary,
body:has(.kc-header) button.secondary,
body:has(.kc-header) .btn.secondary,
body:has(.kc-header) .btn-secondary,
body:has(.kc-header) .btn-outline,
body:has(.kc-header) .tool-btn,
body:has(.kc-header) .btn-copy,
body:has(.kc-header) .copy-btn,
body:has(.kc-header) .btn-ghost {
  background: transparent !important;
  color: #eef2f7 !important;
  border: 1px solid rgb(184 255 120 / 28%) !important;
  font-weight: 600 !important;
}

body:has(.kc-header) .btn-primary,
body:has(.kc-header) .action-btn.primary,
body:has(.kc-header) button.primary,
body:has(.kc-header) .primary-btn {
  padding: 0.55rem 1.15rem !important;
}

/* Active tabs / filters — signal green like json-formatter primary */
body:has(.kc-header) .tab-btn.active,
body:has(.kc-header) .tabs .active,
body:has(.kc-header) button.tab.active,
body:has(.kc-header) [role="tab"][aria-selected="true"] {
  background: #b8ff78 !important;
  color: #0a0b0f !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

/* Footer — invoice-calculator spec: hex grid, thin top line, copyright, blue policy links */
body:has(.kc-header) footer,
body:has(.kc-header) .site-footer {
  display: block !important;
  text-align: center !important;
  margin: 3rem 0 0 !important;
  padding: 2.5rem 0 2rem !important;
  color: #8b93a7 !important;
  border: 0 !important;
  border-top: 1px solid rgb(255 255 255 / 6%) !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
}

body:has(.kc-header) footer .footer-content,
body:has(.kc-header) footer .footer-section,
body:has(.kc-header) footer > span,
body:has(.kc-header) footer > a {
  display: none !important;
}

body:has(.kc-header) footer .container {
  background: transparent !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.kc-header) footer .footer-bottom,
body:has(.kc-header) footer .copyright {
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  color: #8b93a7 !important;
  font-size: 0.9rem !important;
  text-align: center !important;
}

body:has(.kc-header) nav[data-site-policy-links] {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px 20px !important;
  margin: 16px auto 0 !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 0 !important;
}

body:has(.kc-header) nav[data-site-policy-links] a {
  color: #6b7cff !important;
  text-decoration: underline !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

body:has(.kc-header) nav[data-site-policy-links] a:hover {
  color: #9aa8ff !important;
}

/*
 * KC107: last-wins contract. Column is .page-shell (not inner .page-body).
 * Must beat earlier .container { max-width:1120px } and leftover frame rules.
 */
body:has(.kc-header) .page-shell {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 95% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px 0 40px !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

body:has(.kc-header) .page-shell .page-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.kc-header) .page-shell > header,
body:has(.kc-header) .page-shell > header.header,
body:has(.kc-header) .page-shell > header.hero,
body:has(.kc-header) .page-shell > header.tool-header,
body:has(.kc-header) .page-shell > header.page-header {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

body:has(.kc-header) .page-shell > .breadcrumb,
body:has(.kc-header) .page-shell > nav.breadcrumb {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid rgb(184 255 120 / 16%) !important;
}

body:has(.kc-header) .page-shell > main,
body:has(.kc-header) .page-shell > main.container {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid rgb(184 255 120 / 16%) !important;
  border-radius: 10px !important;
  background: rgb(18 22 34 / 82%) !important;
}

/* SEO / guide blocks: card + CJK-safe font (Latin webfonts must not paint 汉字) */
body:has(.kc-header) .page-shell .article-section,
body:has(.kc-header) .page-shell .article-content,
body:has(.kc-header) .page-shell .article-card,
body:has(.kc-header) .page-shell .article-container,
body:has(.kc-header) .page-shell .seo-content,
body:has(.kc-header) .page-shell .seo-article,
body:has(.kc-header) .page-shell .seo-section,
body:has(.kc-header) .page-shell .seo-card,
body:has(.kc-header) .page-shell .tool-guide,
body:has(.kc-header) .page-shell .pro-article,
body:has(.kc-header) .page-shell main > article {
  max-width: none !important;
  box-sizing: border-box !important;
  margin-top: 24px !important;
  padding: 24px !important;
  border-radius: 16px !important;
  border: 1px solid rgb(184 255 120 / 16%) !important;
  background: #12121a !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}
body:has(.kc-header) .page-shell article h2,
body:has(.kc-header) .page-shell article h3,
body:has(.kc-header) .page-shell article h4,
body:has(.kc-header) .page-shell .article-section h2,
body:has(.kc-header) .page-shell .article-section h3,
body:has(.kc-header) .page-shell .article-content h2,
body:has(.kc-header) .page-shell .article-content h3,
body:has(.kc-header) .page-shell .seo-content h2,
body:has(.kc-header) .page-shell .seo-content h3,
body:has(.kc-header) .page-shell .seo-article h2,
body:has(.kc-header) .page-shell .seo-article h3,
body:has(.kc-header) .page-shell .article-card h2,
body:has(.kc-header) .page-shell .article-card h3 {
  letter-spacing: 0 !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}
body:has(.kc-header) .page-shell article ul,
body:has(.kc-header) .page-shell article ol,
body:has(.kc-header) .page-shell .article-section ul,
body:has(.kc-header) .page-shell .article-section ol,
body:has(.kc-header) .page-shell .article-content ul,
body:has(.kc-header) .page-shell .article-content ol,
body:has(.kc-header) .page-shell .seo-content ul,
body:has(.kc-header) .page-shell .seo-content ol {
  padding-left: 1.35em !important;
  margin: 0.75rem 0 1.25rem !important;
}
body:has(.kc-header) .page-shell article li,
body:has(.kc-header) .page-shell .article-section li,
body:has(.kc-header) .page-shell .article-content li,
body:has(.kc-header) .page-shell .seo-content li {
  margin: 0.4rem 0 !important;
}

body:has(.kc-header) .page-shell > *:not(script):not(style) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

body:has(.kc-header) .tool-restore-panel {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.1rem 1.2rem;
}
body:has(.kc-header) .restore-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: #c5cad6;
}