/* ============================================================
   JSON Tools Hub — Design System
   Concept: "The Open Bracket" — { } / [ ] as a structural motif
   Dark-first OKLCH tokens, light override, manual toggle
   ============================================================ */

:root {
  color-scheme: dark;
  --color-bg: oklch(16% 0.02 258);
  --color-surface: oklch(21% 0.022 258);
  --color-surface-2: oklch(26% 0.024 258);
  --color-surface-3: oklch(31% 0.026 258);
  --color-ink: oklch(96% 0.006 258);
  --color-ink-muted: oklch(76% 0.012 258);
  --color-ink-faint: oklch(58% 0.014 258);

  --color-accent: oklch(68% 0.11 183);
  --color-accent-hover: oklch(74% 0.11 183);
  --color-accent-strong: oklch(58% 0.13 181);
  --color-accent-soft: oklch(68% 0.11 183 / 14%);
  --color-on-accent: oklch(15% 0.02 200);

  --color-key: oklch(78% 0.16 75);
  --color-key-hover: oklch(82% 0.16 75);
  --color-on-key: oklch(18% 0.03 75);

  --color-value: oklch(64% 0.18 286);

  --color-success: oklch(72% 0.17 148);
  --color-success-soft: oklch(72% 0.17 148 / 14%);
  --color-error: oklch(66% 0.19 25);
  --color-error-soft: oklch(66% 0.19 25 / 14%);

  --color-border: oklch(42% 0.02 258 / 55%);
  --color-border-strong: oklch(54% 0.02 258 / 75%);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;

  --z-dropdown: 10; --z-sticky: 20; --z-modal-backdrop: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-md: 0 8px 24px -8px oklch(10% 0.02 258 / 45%);
  --shadow-lg: 0 20px 48px -12px oklch(8% 0.02 258 / 55%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: oklch(97.5% 0.004 258);
  --color-surface: oklch(99.5% 0.002 258);
  --color-surface-2: oklch(95% 0.008 258);
  --color-surface-3: oklch(91% 0.012 258);
  --color-ink: oklch(22% 0.03 258);
  --color-ink-muted: oklch(40% 0.02 258);
  --color-ink-faint: oklch(52% 0.016 258);
  --color-accent: oklch(52% 0.11 183);
  --color-accent-hover: oklch(46% 0.12 183);
  --color-accent-strong: oklch(40% 0.12 181);
  --color-on-accent: oklch(99% 0.01 183);
  --color-key: oklch(58% 0.16 70);
  --color-on-key: oklch(99% 0.02 70);
  --color-value: oklch(50% 0.19 286);
  --color-success: oklch(45% 0.15 148);
  --color-error: oklch(48% 0.2 25);
  --color-border: oklch(80% 0.012 258 / 80%);
  --color-border-strong: oklch(68% 0.016 258 / 90%);
  --shadow-md: 0 8px 24px -8px oklch(60% 0.02 258 / 12%);
  --shadow-lg: 0 20px 48px -12px oklch(60% 0.02 258 / 16%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-bg: oklch(97.5% 0.004 258);
    --color-surface: oklch(99.5% 0.002 258);
    --color-surface-2: oklch(95% 0.008 258);
    --color-surface-3: oklch(91% 0.012 258);
    --color-ink: oklch(22% 0.03 258);
    --color-ink-muted: oklch(40% 0.02 258);
    --color-ink-faint: oklch(52% 0.016 258);
    --color-accent: oklch(52% 0.11 183);
    --color-accent-hover: oklch(46% 0.12 183);
    --color-accent-strong: oklch(40% 0.12 181);
    --color-on-accent: oklch(99% 0.01 183);
    --color-key: oklch(58% 0.16 70);
    --color-on-key: oklch(99% 0.02 70);
    --color-value: oklch(50% 0.19 286);
    --color-success: oklch(45% 0.15 148);
    --color-error: oklch(48% 0.2 25);
    --color-border: oklch(80% 0.012 258 / 80%);
    --color-border-strong: oklch(68% 0.016 258 / 90%);
  }
}

@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, svg, video { max-width: 100%; height: auto; display: block; }
  input, button, textarea, select { font: inherit; color: inherit; max-width: 100%; }
  button { cursor: pointer; }
  a { color: inherit; }
  ul[class], ol[class] { list-style: none; padding: 0; }
}

@layer base {
  html { color-scheme: light dark; }
  body {
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-wrap: break-word;
    transition: background-color .25s var(--ease-out-expo), color .25s var(--ease-out-expo);
  }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; text-wrap: balance; }
  h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); letter-spacing: -0.02em; }
  h2 { font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem); letter-spacing: -0.015em; }
  h3 { font-size: clamp(1.125rem, 1.5vw + 1rem, 1.5rem); }
  p { max-width: 72ch; text-wrap: pretty; }
  p + p { margin-top: var(--space-4); }
  section h2 { margin-bottom: var(--space-6); }
  section h3 { margin-bottom: var(--space-3); }
  code, pre, .mono { font-family: var(--font-mono); }
  a { text-decoration-color: var(--color-accent-soft); text-underline-offset: 3px; }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
  }
  @media (forced-colors: active) {
    :focus-visible { outline: 3px solid ButtonText; }
  }

  .skip-link {
    position: fixed; top: -100%; left: var(--space-4); z-index: var(--z-toast);
    background: var(--color-accent); color: var(--color-on-accent);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    transition: top .2s var(--ease-out-expo);
  }
  .skip-link:focus { top: var(--space-4); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer layout {
  .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-4); }
  main { display: block; width: 100%; overflow-x: hidden; }
  section { padding-block: var(--space-16); }
  section:first-child { padding-top: var(--space-8); }
}

@layer components {
  /* Header / nav */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: color-mix(in oklch, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
  }
  .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-3); }
  .logo { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; }
  .logo .brace { color: var(--color-accent); }
  .nav-links { display: flex; gap: var(--space-6); align-items: center; }
  .nav-links a { font-size: .95rem; font-weight: 500; color: var(--color-ink-muted); padding: var(--space-2) 0; }
  .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-ink); }
  .nav-dropdown { position: relative; }
  .nav-dropdown-panel {
    position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: var(--z-dropdown);
    background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); padding: var(--space-2); min-width: 220px;
    display: none; flex-direction: column;
  }
  /* Language dropdown needs extra width for bilingual labels */
  .nav-dropdown:last-of-type .nav-dropdown-panel { min-width: 260px; }
  .nav-dropdown:hover .nav-dropdown-panel,
  .nav-dropdown:focus-within .nav-dropdown-panel { display: flex; }
  .nav-dropdown-panel a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
  .nav-dropdown-panel a:hover { background: var(--color-surface-3); }
  .header-actions { display: flex; align-items: center; gap: var(--space-3); }
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    background: var(--color-surface-2); border: 1px solid var(--color-border);
  }
  .icon-btn:hover { background: var(--color-surface-3); }
  .nav-toggle { display: none; }

  @media (max-width: 860px) {
    .site-header .container { justify-content: flex-start; gap: var(--space-2); }
    .logo { margin-right: auto; }
    .header-actions { order: 1; margin-right: 0; }
    .nav-toggle { display: inline-flex; order: 2; }
    .nav-links { position: fixed; inset: 64px var(--space-4) auto var(--space-4);
      background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
      flex-direction: column; align-items: stretch; padding: var(--space-4); box-shadow: var(--shadow-lg);
      display: none; }
    .nav-links.is-open { display: flex; }
  }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
    font-weight: 600; font-size: .95rem; border: 1px solid transparent;
    min-height: 44px; transition: background-color .15s var(--ease-out-expo), transform .15s var(--ease-out-expo);
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
  .btn-primary:hover { background: var(--color-accent-hover); }
  .btn-key { background: var(--color-key); color: var(--color-on-key); }
  .btn-key:hover { background: var(--color-key-hover); }
  .btn-outline { background: transparent; border-color: var(--color-border-strong); color: var(--color-ink); }
  .btn-outline:hover { background: var(--color-surface-2); }
  .btn-ghost { background: transparent; color: var(--color-ink-muted); }
  .btn-ghost:hover { color: var(--color-ink); background: var(--color-surface-2); }

  /* Hero tool */
  .hero-tool { padding-top: var(--space-8); }
  .hero-tool .eyebrow-badge {
    display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono);
    font-size: .8rem; color: var(--color-accent); background: var(--color-accent-soft);
    padding: var(--space-1) var(--space-3); border-radius: 999px; margin-bottom: var(--space-4);
  }
  .hero-tool h1 { margin-bottom: var(--space-3); }
  .hero-tool .lede { color: var(--color-ink-muted); font-size: 1.1rem; margin-bottom: var(--space-6); }
  .tool-toolbar {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-2); margin-bottom: var(--space-4);
  }
  .tool-toolbar label {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: .85rem; color: var(--color-ink-muted); cursor: pointer;
    height: 44px; padding: 0 var(--space-1);
  }
  .tool-toolbar label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-accent); cursor: pointer; }
  .tool-toolbar select {
    background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3); height: 44px; font-size: .85rem; color: var(--color-ink-muted);
    cursor: pointer;
  }
  .split-pane {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  }
  @media (max-width: 720px) { .split-pane { grid-template-columns: 1fr; } }
  .pane {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    display: flex; flex-direction: column; min-height: 420px; overflow: hidden;
  }
  .pane-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
    font-family: var(--font-mono); font-size: .8rem; color: var(--color-ink-faint);
    overflow: hidden;
  }
  .pane-header span:first-child { flex-shrink: 0; color: var(--color-ink-muted); }
  .pane-header span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .pane textarea, .pane .pane-output {
    flex: 1; width: 100%; background: transparent; border: 0; resize: none;
    padding: var(--space-4); font-family: var(--font-mono); font-size: .875rem; color: var(--color-ink);
    overflow: auto; white-space: pre; tab-size: 2;
  }
  .pane textarea:focus { outline: none; }
  .pane-output .json-key { color: var(--color-value); }
  .pane-output .json-string { color: var(--color-accent); }
  .pane-output .json-number, .pane-output .json-boolean, .pane-output .json-null { color: var(--color-key); }
  .status-banner {
    display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border); font-size: .85rem;
  }
  .status-banner[data-state="valid"] { color: var(--color-success); }
  .status-banner[data-state="error"] { color: var(--color-error); }
  .status-banner[data-state="idle"] { color: var(--color-ink-faint); }

  /* How-to steps (genuine sequence — numbering justified) */
  .how-to ol { display: grid; gap: var(--space-6); counter-reset: step; margin-top: var(--space-8); list-style: none; padding: 0; }
  .how-to li { position: relative; padding-left: calc(40px + var(--space-4)); min-height: 40px; counter-increment: step; }
  .how-to li::before {
    content: counter(step); font-family: var(--font-mono); font-weight: 700;
    width: 40px; height: 40px; position: absolute; left: 0; top: -8px; display: grid; place-items: center;
    background: var(--color-surface-2); border: 1px solid var(--color-border-strong); border-radius: 50%;
    color: var(--color-accent);
  }

  /* Why-us points */
  .why-us .points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
  .why-us .point h3 { margin-bottom: var(--space-2); color: var(--color-accent); }

  /* FAQ */
  .faq-item { border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
  .faq-item h3 { font-family: var(--font-body); font-size: 1.05rem; margin-bottom: var(--space-2); }
  .faq-item p { color: var(--color-ink-muted); }

  /* Related tools — bento, asymmetric (never uniform grid) */
  .related-tools .bento {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(120px, auto);
    gap: var(--space-4); margin-top: var(--space-8);
  }
  .related-card {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: var(--space-6); display: flex; flex-direction: column; justify-content: space-between;
    transition: border-color .15s var(--ease-out-expo), transform .15s var(--ease-out-expo);
  }
  .related-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
  .related-card--featured { grid-column: span 2; grid-row: span 2; }
  .related-card--compact { grid-column: span 1; grid-row: span 1; }
  .related-card h3 { margin-bottom: var(--space-2); }
  .related-card p { color: var(--color-ink-muted); font-size: .9rem; }
  @media (max-width: 768px) {
    .related-tools .bento { grid-template-columns: 1fr 1fr; }
    .related-card--featured { grid-column: span 2; }
  }
  @media (max-width: 500px) {
    .related-tools .bento { grid-template-columns: 1fr; }
    .related-card--featured { grid-column: span 1; }
  }

  /* Cross-link callout */
  .cross-link-callout {
    background: var(--color-surface-2); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin-block: var(--space-6);
  }

  /* Footer */
  .site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-16); background: var(--color-surface); }
  .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-8); }
  .footer-grid h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-faint); margin-bottom: var(--space-3); }
  .footer-grid ul { display: flex; flex-direction: column; gap: var(--space-2); }
  .footer-grid a { color: var(--color-ink-muted); font-size: .9rem; }
  .footer-grid a:hover { color: var(--color-ink); }
  .footer-bottom {
    margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--color-border);
    display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center;
    font-size: .85rem; color: var(--color-ink-faint);
  }

  /* Bracket reveal overlay — signature moment, decorative only, never gates content */
  .bracket-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center;
    background: var(--color-bg); pointer-events: none;
    animation: bracket-fade .15s linear .75s forwards;
  }
  .bracket-overlay .brace { font-family: var(--font-mono); font-weight: 700; font-size: clamp(6rem, 20vw, 16rem); color: var(--color-accent); }
  .bracket-overlay .brace-left { animation: brace-open-left .7s var(--ease-out-expo) forwards; }
  .bracket-overlay .brace-right { animation: brace-open-right .7s var(--ease-out-expo) forwards; }
  @keyframes brace-open-left { from { transform: translateX(0); } to { transform: translateX(-40vw); opacity: 0; } }
  @keyframes brace-open-right { from { transform: translateX(0); } to { transform: translateX(40vw); opacity: 0; } }
  @keyframes bracket-fade { to { visibility: hidden; } }
  @media (prefers-reduced-motion: reduce) { .bracket-overlay { display: none; } }

  /* ── Disabled button state ──────────────────────────────────────────── */
  .btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

  /* ── JSON-to-PDF preview pane ────────────────────────────────────────── */
  #preview { flex: 1; overflow: auto; padding: var(--space-4); }
  #preview pre { white-space: pre-wrap; word-break: break-all; font-family: var(--font-mono); font-size: .875rem; line-height: 1.6; }
  #preview .jk { color: var(--color-value); font-weight: 600; }
  #preview .js { color: var(--color-accent); }
  #preview .jn { color: var(--color-ink-faint); font-style: italic; }
  #preview .jb { color: var(--color-key); }
  #preview .jnum { color: var(--color-key); }

  /* ── JSON-to-Table rendered output ──────────────────────────────────── */
  .json-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
  .json-table th, .json-table td { border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
  .json-table th { background: var(--color-surface-2); font-weight: 600; color: var(--color-ink); font-family: var(--font-mono); font-size: .8rem; }
  .json-table td { color: var(--color-ink-muted); }
  .json-table tr:hover td { background: var(--color-surface-2); }
  .body-copy { color: var(--color-ink-muted); }
  .body-copy h2 { color: var(--color-ink); }
  .body-copy ul, .body-copy ol { padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
  .body-copy li { line-height: 1.7; }
  .body-copy code { background: var(--color-surface-2); padding: .1em .35em; border-radius: 4px; font-size: .9em; color: var(--color-accent); }

  /* Article headings: top spacing when following any content (p, pre, ul, etc.) */
  .body-copy article > * + h2 { margin-top: var(--space-12); }
  .body-copy article > * + h3 { margin-top: var(--space-8); }
  /* Article code blocks: proper vertical breathing room */
  .body-copy article pre {
    background: var(--color-surface-2); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto;
    font-size: .875rem; line-height: 1.6; margin-block: var(--space-6);
  }
  /* Article inline emphasis */
  .body-copy article strong { color: var(--color-ink); font-weight: 600; }
  .body-copy article a { color: var(--color-accent); }

  /* ── FAQ details/summary (second-template pages) ────────────────────── */
  details.faq-item > summary {
    font-family: var(--font-body); font-size: 1.05rem; font-weight: 600;
    cursor: pointer; list-style: none; display: flex;
    justify-content: space-between; align-items: center; gap: var(--space-4);
  }
  details.faq-item > summary::-webkit-details-marker { display: none; }
  details.faq-item > summary::after { content: '+'; color: var(--color-accent); font-family: var(--font-mono); font-size: 1.1rem; flex-shrink: 0; }
  details.faq-item[open] > summary::after { content: '\2212'; }
  details.faq-item > p { color: var(--color-ink-muted); margin-top: var(--space-2); }

  /* ── Drag-over feedback ─────────────────────────────────────────────── */
  .is-dragover { border-color: var(--color-accent) !important; box-shadow: 0 0 0 2px var(--color-accent-soft); }

  /* ── Validator: full width when schema pane hidden ──────────────────── */
  .split-pane:has(> [hidden]) { grid-template-columns: 1fr; }

  /* ── Tool-layout (second-template pages) ────────────────────────────── */
  .tool-layout {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
    margin-top: var(--space-4);
  }
  @media (max-width: 720px) { .tool-layout { grid-template-columns: 1fr; } }

  .pane-label {
    display: block; font-size: .8rem; font-weight: 600; color: var(--color-ink-faint);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-2);
  }
  /* When pane-label is a direct child of a pane (no pane-header), add inner padding to clear border-radius */
  .pane > .pane-label { padding: var(--space-3) var(--space-4) 0; }
  /* Override the transparent .pane textarea rule for explicitly-styled textareas */
  .pane .pane-textarea {
    background: var(--color-surface-2) !important; border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm); white-space: pre-wrap;
    margin: 0 var(--space-4) var(--space-4);
  }
  /* Only textareas grow to fill the pane — selects and inputs keep their own height */
  .pane textarea.pane-textarea {
    flex: 1; resize: none; min-height: 180px;
    width: calc(100% - var(--space-8));
  }
  /* Selects/inputs with pane-textarea class: compact, auto-width */
  .pane select.pane-textarea, .pane input.pane-textarea {
    flex: none; width: auto; min-height: unset;
  }
  .pane-textarea {
    width: 100%; background: var(--color-surface-2); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: var(--space-3); font-family: var(--font-mono);
    font-size: .875rem; color: var(--color-ink); resize: vertical; min-height: 160px;
  }
  .pane-textarea:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; border-color: var(--color-accent) !important; }

  /* ── Error banner ───────────────────────────────────────────────────── */
  .error-banner {
    background: var(--color-error-soft); color: var(--color-error);
    border: 1px solid oklch(66% 0.19 25 / 40%); border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3); font-size: .875rem; margin-top: var(--space-2);
  }
  .pane > .error-banner { margin: var(--space-2) var(--space-4) 0; }
  .pane > .tool-actions { padding: 0 var(--space-4) var(--space-4); }

  /* ── Tool-actions row ───────────────────────────────────────────────── */
  .tool-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

  /* ── btn-secondary (alias for btn-outline) ──────────────────────────── */
  .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
    font-weight: 600; font-size: .95rem; border: 1px solid var(--color-border-strong);
    background: transparent; color: var(--color-ink); min-height: 44px;
    transition: background-color .15s var(--ease-out-expo), transform .15s var(--ease-out-expo);
  }
  .btn-secondary:hover { background: var(--color-surface-2); }
  .btn-secondary:active { transform: translateY(1px); }
  .btn-secondary:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

  /* ── Bento grid / card (second-template related tools) ──────────────── */
  .bento-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4); margin-top: var(--space-8);
  }
  .bento-card {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2);
    text-decoration: none;
    transition: border-color .15s var(--ease-out-expo), transform .15s var(--ease-out-expo);
  }
  .bento-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
  .bento-card strong { color: var(--color-ink); font-size: 1rem; }
  .bento-card span { color: var(--color-ink-muted); font-size: .9rem; }

  /* ── Second-template footer ─────────────────────────────────────────── */
  .footer-logo { margin-bottom: var(--space-4); }
  .footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-4); }
  .footer-nav a { color: var(--color-ink-muted); font-size: .9rem; }
  .footer-nav a:hover { color: var(--color-ink); }
  .footer-note { font-size: .85rem; color: var(--color-ink-faint); }

  /* ── Diff highlight overlay in compare panes ────────────────────────── */
  .pane-editor-wrap { position: relative; flex: 1; display: flex; overflow: hidden; }
  .pane-editor-wrap > textarea { flex: 1; background: transparent !important; position: relative; z-index: 1; }
  .diff-highlight-layer {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none; overflow: scroll; scrollbar-width: none;
    font-family: var(--font-mono); font-size: .875rem; line-height: 1.6;
    padding: var(--space-4); white-space: pre; box-sizing: border-box;
    color: transparent; /* text invisible — only the line backgrounds show */
  }
  .diff-highlight-layer::-webkit-scrollbar { display: none; }
  .diff-hl-line { display: block; height: 1.6em; /* must equal textarea line-height */ }
  .diff-hl-line.hl-removed { background: var(--color-error-soft); border-left: 3px solid var(--color-error); }
  .diff-hl-line.hl-added   { background: var(--color-success-soft); border-left: 3px solid var(--color-success); }

  /* ── JSON Compare diff table ─────────────────────────────────────────── */
  .diff-table-wrap { overflow-x: auto; margin-top: var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
  .diff-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .85rem; }
  .diff-table thead tr { background: var(--color-surface-2); }
  .diff-th-path { width: 30%; padding: var(--space-3) var(--space-4); color: var(--color-ink-faint); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-family: var(--font-body); }
  .diff-th-val { width: 35%; padding: var(--space-3) var(--space-4); }
  .diff-table tbody tr { border-top: 1px solid var(--color-border); }
  .diff-table tbody tr:hover { background: var(--color-surface-2); }
  .diff-path { padding: var(--space-3) var(--space-4); vertical-align: middle; white-space: nowrap; }
  .diff-path code { color: var(--color-ink-muted); }
  .diff-cell { padding: var(--space-3) var(--space-4); vertical-align: top; word-break: break-all; }
  .diff-cell-removed { background: var(--color-error-soft); color: var(--color-error); }
  .diff-cell-added   { background: var(--color-success-soft); color: var(--color-success); }
  .diff-cell-changed { background: oklch(68% 0.11 183 / 8%); }
  .diff-cell-empty   { color: var(--color-ink-faint); font-style: italic; }
  .diff-type-badge { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15em .5em; border-radius: 999px; font-family: var(--font-body); }
  .diff-added   { background: var(--color-success-soft); color: var(--color-success); }
  .diff-removed { background: var(--color-error-soft); color: var(--color-error); }
  .diff-changed { background: var(--color-accent-soft); color: var(--color-accent); }
  .diff-missing { color: var(--color-ink-faint); font-style: italic; }
  /* Inline character-level diff highlights within a cell */
  mark.diff-mark-del { background: var(--color-error);   color: oklch(98% 0.005 258); border-radius: 3px; padding: 0 2px; font-style: normal; }
  mark.diff-mark-add { background: var(--color-success); color: oklch(12% 0.02  148); border-radius: 3px; padding: 0 2px; font-style: normal; }
  .faq-section .faq-item { border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
  .faq-section h2 { margin-bottom: var(--space-6); }

  /* ── Localized page pane toolbar ─────────────────────────────────────── */
  .pane-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); flex-wrap: wrap;
  }
  .toolbar-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .toolbar-label { font-size: .8rem; color: var(--color-ink-faint); white-space: nowrap; }
  .toolbar-select {
    background: var(--color-surface-2); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2);
    font-size: .8rem; color: var(--color-ink-muted); height: 32px; cursor: pointer;
  }
  .checkbox-label {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: .8rem; color: var(--color-ink-muted); cursor: pointer;
  }
  .checkbox-label input[type="checkbox"] { accent-color: var(--color-accent); cursor: pointer; }
  .drop-zone {
    border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4); text-align: center;
    font-size: .8rem; color: var(--color-ink-faint);
    margin: 0 var(--space-4) var(--space-3);
    transition: border-color .15s var(--ease-out-expo), color .15s var(--ease-out-expo);
  }
  .drop-zone.is-dragover { border-color: var(--color-accent); color: var(--color-accent); }
  .btn-sm { padding: var(--space-1) var(--space-3); font-size: .8rem; min-height: 32px; }
}

@layer utilities {
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .text-muted { color: var(--color-ink-muted); }
}