/* Shared interface refresh. Loaded after each tool's layout styles. */
:root {
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-accent: #2457d6;
  --ui-accent-hover: #1942aa;
  --ui-accent-soft: #eaf0ff;
  --ui-canvas: #f5f7fc;
  --ui-surface: #ffffff;
  --ui-soft: #eef2f8;
  --ui-text: #17243c;
  --ui-body: #35435a;
  --ui-muted: #56657b;
  --ui-line: #d9e1ed;
  --ui-shadow: 0 8px 28px rgb(30 53 91 / 6%);
  --lm-coral: var(--ui-accent);
  --lm-coral-active: var(--ui-accent-hover);
  --lm-ink: var(--ui-text);
  --lm-body: var(--ui-body);
  --lm-muted: var(--ui-muted);
  --lm-line: var(--ui-line);
  --lm-canvas: var(--ui-canvas);
  --lm-card: var(--ui-surface);
  --lm-soft: var(--ui-soft);
  --lm-display: var(--ui-font);
  --lm-dark: #101b2d;
  --lm-dark-soft: #162238;
  --lm-dark-raised: #1e2d45;
}
html[data-theme="dark"] {
  --ui-accent: #94b6ff;
  --ui-accent-hover: #bad0ff;
  --ui-accent-soft: #203355;
  --ui-canvas: #101827;
  --ui-surface: #182337;
  --ui-soft: #202e44;
  --ui-text: #edf3ff;
  --ui-body: #d2def0;
  --ui-muted: #b0bfd5;
  --ui-line: #37465d;
  --ui-shadow: 0 8px 28px rgb(0 0 0 / 16%);
  --lm-ink: var(--ui-text);
  --lm-body: var(--ui-body);
  --lm-muted: var(--ui-muted);
  --lm-line: var(--ui-line);
  --lm-canvas: var(--ui-canvas);
  --lm-soft: var(--ui-soft);
  --lm-card: var(--ui-surface);
  --lm-dark: #0b1321;
  --lm-dark-soft: #101b2d;
  --lm-dark-raised: #1e2d45;
}
body {
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.tools-home, html[data-theme="dark"] body.tools-home {
  --home-coral: var(--ui-accent);
  --home-coral-active: var(--ui-accent-hover);
  --home-ink: var(--ui-text);
  --home-body: var(--ui-body);
  --home-muted: var(--ui-muted);
  --home-line: var(--ui-line);
  --home-canvas: var(--ui-canvas);
  --home-soft: var(--ui-soft);
  --home-card: var(--ui-surface);
  --home-dark: #101b2d;
  --home-dark-raised: #1e2d45;
}
body.pay-page {
  --pay-bg: var(--ui-canvas);
  --pay-card: var(--ui-surface);
  --pay-text: var(--ui-text);
  --pay-muted: var(--ui-muted);
  --pay-line: var(--ui-line);
  --pay-accent: var(--ui-accent);
  --pay-soft: var(--ui-soft);
  --pay-code: #101b2d;
  --pay-code-text: #edf3ff;
  font-size: 15px;
  line-height: 1.65;
}
.tools-home .hero-copy h1,
.tools-home .tools-directory h2,
.tools-home .workflow-band h2,
.tools-home .home-cta h2,
.tools-home .seo-content :is(h2, h3),
.tools-home .tool-card h3,
.tools-home .workflow-steps strong,
.pay-page :is(h1, h2, h3) {
  font-family: var(--ui-font);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.2;
}
.tools-home .hero-copy h1 { font-size: clamp(38px, 4.8vw, 66px); line-height: 1.08; }
.tools-home .tools-directory h2,
.tools-home .seo-content h2 { font-size: clamp(30px, 3.6vw, 46px); }
.tools-home .tool-card h3 { font-size: 23px; }
.pay-page h1 { font-size: clamp(30px, 3.5vw, 46px); }
.pay-page h2 { font-size: clamp(23px, 2.3vw, 30px); }
.tools-home .tools-hero { min-height: 620px; gap: 52px; padding-block: 76px; }
.tools-home .tool-card,
.tools-home .tool-card:nth-child(n) {
  border: 1px solid var(--ui-line);
  background: var(--ui-surface);
  border-radius: 18px;
  box-shadow: var(--ui-shadow);
}
.tools-home .tool-card:hover,
.tools-home .tool-card:focus-visible {
  border: 1px solid var(--ui-accent);
  box-shadow: 0 14px 36px rgb(36 87 214 / 12%);
}
.tools-home .tool-mark { background: var(--ui-accent-soft); color: var(--ui-accent); border-color: transparent; border-radius: 12px; }
.tools-home .tool-card-copy p { font-size: 15px; }
.tools-home .tool-card li, .tools-home .tool-category { font-size: 11px; }
.tools-home .tool-open, .tools-home .hero-trust { font-size: 13px; }
.tools-home .workflow-steps p { font-size: 14px; line-height: 1.65; }
.tools-home .workflow-copy > p:not(.eyebrow), .tools-home .workflow-steps p { color: #bdcce2; }
.tools-home .tools-header,
html[data-theme="dark"] .tools-home .tools-header,
.pay-page .topbar {
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-line);
  box-shadow: 0 3px 20px rgb(20 40 80 / 4%);
}
body .global-tool-nav, body .global-auth-actions,
html[data-theme="dark"] .tools-home :is(.global-tool-nav, .global-auth-actions) {
  --header-ink: var(--ui-text);
  --header-muted: var(--ui-muted);
  --header-surface: var(--ui-surface);
  --header-line: var(--ui-line);
  --header-accent: var(--ui-accent);
}
.pay-page .project-bar { padding: 16px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); }
.pay-page .panel { padding: clamp(18px, 3vw, 36px); box-shadow: var(--ui-shadow); }
.pay-page .pay-tabs { gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--ui-line); }
.pay-page .pay-tabs button { padding: 11px 14px; font-size: 14px; border-radius: 8px; border-bottom: none; }
.pay-page .pay-tabs button.active { background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 700; }
.pay-page .settings-grid { gap: 24px; }
.pay-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select) { min-height: 46px; border-radius: 9px; background: var(--ui-surface); }
.pay-page :is(fieldset, .guide) { border-radius: 12px; }
.pay-page .muted { line-height: 1.65; }
.pay-page :is(button, .button) { border-radius: 9px; }
.pay-page .primary, .tools-home .hero-actions .button-primary { background: #2457d6; border-color: #2457d6; color: #fff; }
.pay-page .primary:hover, .tools-home .hero-actions .button-primary:hover { background: #1942aa; border-color: #1942aa; }
body :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 3px;
}
body :is(button, input, select, textarea) { accent-color: var(--ui-accent); }
body :is(button, .button, .tool-card, .global-tool-link, input, select, textarea) {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .tools-home .hero-copy, .pay-page .pay-heading { animation: ui-arrive .5s ease-out both; }
  .tools-home .hero-product { animation: ui-arrive .6s .08s ease-out both; }
  .pay-page .panel:not([hidden]) { animation: ui-arrive .22s ease-out; }
  .tools-home .tool-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .tools-home .tool-card:hover { transform: translateY(-4px); }
  .tools-home .tool-card .tool-arrow { transition: transform .2s ease; }
  .tools-home .tool-card:hover .tool-arrow { transform: translate(3px, -3px); }
  @keyframes ui-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 720px) {
  .tools-home .tools-hero { padding-block: 44px; gap: 32px; }
  .pay-page .project-bar { flex-wrap: wrap; }
  .pay-page .project-bar select { flex: 1; min-width: 160px; }
  .pay-page .pay-tabs button { min-height: 44px; }
}

/* Keep navigation surfaces and filled actions legible in both themes. */
body .global-tool-nav[data-tool-mega-menu] {
  --header-ink: var(--ui-text);
  --header-muted: var(--ui-muted);
  --header-surface: var(--ui-soft);
  --header-line: var(--ui-line);
  --header-accent: var(--ui-accent);
}
.json-page .actions .primary,
.webhook-page .primary,
.webhook-page .primary-link,
.documentation-theme .button-primary,
.mocker-theme .primary,
.mocker-theme .save-button,
.portal-page .create-tunnel-card button,
.portal-page .tunnel-landing-primary,
.auth-page .auth-form button,
.tools-home .tool-badge {
  color: #fff;
  background: #2457d6;
  border-color: #2457d6;
}
.tools-home .window-sidebar strong { color: #fff; background: #2457d6; }
.tools-home .window-content > footer { color: #b0bfd5; background: #162238; }

/* Compact developer controls still need readable labels and data. */
.json-page .actions button,
.json-page .selected-path button { font-size: 12px; min-height: 36px; }
.json-page .panel-header h2 { font-size: 17px; white-space: nowrap; }
.json-page .tree-view { font-size: 13px; }
.json-page .tree-meta, .json-page .tree-punctuation { color: var(--ui-muted); }
.json-page .path-finder label,
.json-page .status-card small,
.json-page .editor-footer { font-size: 12px; }
.json-page .path-finder input { font-size: 14px; }
.json-page .selected-path :is(span, code) { font-size: 11px; }

/* Webhook Inbox: a theme-aware workspace with readable inspection controls. */
html[data-theme] .webhook-page .app-shell { height: auto; min-height: calc(100dvh - 68px); overflow: visible; padding-bottom: 28px; }
.webhook-page .product-strip { padding-block: 24px 18px; }
.webhook-page .product-strip h1 { font-size: clamp(25px, 2.4vw, 36px); font-weight: 700; line-height: 1.2; }
.webhook-page .eyebrow { font-size: 10px; line-height: 1.5; }
.webhook-page .live-state strong { font-size: 13px; }
.webhook-page .live-state small { font-size: 11px; }
html[data-theme] .webhook-page :is(.app-flow-guide, .capture-bar) { background: var(--ui-surface); border-color: var(--ui-line); }
.webhook-page .app-flow-guide > summary { padding: 14px 18px; }
.webhook-page .app-flow-guide > summary strong { font-size: 13px; }
.webhook-page .app-flow-guide > summary :is(small, b) { font-size: 11px; }
.webhook-page .app-flow-track { padding: 16px; }
.webhook-page .app-flow-node strong, .webhook-page .app-flow-destinations > strong { font-size: 12px; }
.webhook-page .app-flow-node small { font-size: 11px; }
.webhook-page .capture-bar { padding: 16px; gap: 10px; flex-wrap: wrap; }
.webhook-page .capture-bar > label { font-size: 11px; }
.webhook-page .capture-bar :is(select, button) { min-height: 42px; font-size: 12px; }
.webhook-page .capture-url { min-height: 46px; }
.webhook-page .capture-url span { font-size: 9px; }
.webhook-page .capture-url code { font-size: 12px; color: var(--ui-accent); }
html[data-theme] .webhook-page .workbench {
  min-height: 620px;
  grid-template-columns: minmax(220px, .75fr) minmax(360px, 1.8fr) minmax(280px, .9fr);
  color: var(--ui-text);
  border-color: var(--ui-line);
  box-shadow: var(--ui-shadow);
}
html[data-theme] .webhook-page .workbench .panel { background: var(--ui-surface); }
html[data-theme] .webhook-page .workbench :is(.panel, .panel-heading, .event-filter, .request-heading, .request-meta, .inspector-tabs, .replay-form) { border-color: var(--ui-line); }
.webhook-page .panel-heading { min-height: 76px; padding: 18px; }
.webhook-page .panel-heading h2 { font: 650 18px/1.4 var(--ui-font); }
.webhook-page .event-filter { padding: 14px; }
html[data-theme] .webhook-page .workbench :is(input, select) {
  min-height: 44px;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  font-size: 13px;
}
html[data-theme] .webhook-page .workbench input::placeholder { color: var(--ui-muted); opacity: 1; }
html[data-theme] .webhook-page .workbench button {
  min-height: 38px;
  font-size: 12px;
  color: var(--ui-text);
  background: var(--ui-soft);
  border-color: var(--ui-line);
  border-radius: 8px;
}
html[data-theme] .webhook-page .workbench .primary { color: #fff; background: #2457d6; border-color: #2457d6; }
html[data-theme] .webhook-page button:disabled { opacity: .5; cursor: not-allowed; }
html[data-theme] .webhook-page .workbench .danger, .webhook-page .capture-bar .danger { color: #b4233a; }
html[data-theme="dark"] .webhook-page .workbench .danger, html[data-theme="dark"] .webhook-page .capture-bar .danger { color: #ff9caf; }
.webhook-page .event-list { padding: 12px; }
.webhook-page .event-item { padding: 14px; }
html[data-theme] .webhook-page .workbench .event-item.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.webhook-page .event-item :is(strong, small, time) { font-size: 12px; }
.webhook-page .list-empty { font-size: 13px; color: var(--ui-muted); line-height: 1.7; padding: 32px 18px; }
.webhook-page .empty-state { max-width: 440px; padding: 36px; }
.webhook-page .empty-state h2 { color: var(--ui-text); font-size: 26px; line-height: 1.3; }
.webhook-page .empty-state p { color: var(--ui-muted); font-size: 14px; line-height: 1.7; }
.webhook-page .pulse-mark { color: var(--ui-accent); background: var(--ui-accent-soft); border-color: var(--ui-line); box-shadow: none; }
.webhook-page .request-heading { flex-wrap: wrap; padding: 18px; }
.webhook-page .request-actions { flex-wrap: wrap; }
.webhook-page .request-meta { padding: 16px 18px; }
.webhook-page .request-meta dt { color: var(--ui-muted); font-size: 10px; }
.webhook-page .request-meta dd { font-size: 12px; }
.webhook-page .inspector-tabs { padding: 8px 14px; gap: 6px; flex-wrap: wrap; }
html[data-theme] .webhook-page .workbench .inspector-tabs button.active { color: var(--ui-accent); background: var(--ui-accent-soft); border-color: transparent; }
html[data-theme] .webhook-page .workbench .tab-content { background: var(--ui-soft); }
html[data-theme] .webhook-page .workbench .code-view { color: var(--ui-text); font-size: 13px; line-height: 1.7; }
.webhook-page .replay-form { padding: 18px; }
.webhook-page .replay-form > label { font-size: 11px; color: var(--ui-body); }
.webhook-page .replay-form > p { font-size: 12px; color: var(--ui-muted); line-height: 1.65; }
html[data-theme] .webhook-page .forwarding-toggle { background: var(--ui-soft); color: var(--ui-text); border-color: var(--ui-line); padding: 14px; }
.webhook-page .forwarding-toggle strong { font-size: 13px; }
.webhook-page .forwarding-toggle small { font-size: 11px; color: var(--ui-muted); }
.webhook-page .forwarding-status { font-size: 11px; }
.webhook-page .retention-note { margin: auto 18px 18px; padding: 14px; background: var(--ui-soft); border-color: var(--ui-line); }
.webhook-page .retention-note strong { color: var(--ui-body); font-size: 12px; }
.webhook-page .retention-note span { color: var(--ui-muted); font-size: 11px; line-height: 1.6; }
/* Explicit layout declarations must never reveal inactive inspector panels. */
.webhook-page [hidden] { display: none !important; }
html[data-theme="light"] .webhook-page .workbench .token-key { color: #8540a3; }
html[data-theme="light"] .webhook-page .workbench .token-string { color: #17623e; }
html[data-theme="light"] .webhook-page .workbench .token-number { color: #945019; }
html[data-theme="light"] .webhook-page .workbench .token-boolean { color: #2457d6; }
html[data-theme="light"] .webhook-page .workbench .key-value strong { color: #8540a3; }
html[data-theme="light"] .webhook-page .workbench .key-value span { color: var(--ui-body); }
@media (max-width: 1180px) {
  html[data-theme] .webhook-page .workbench { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .webhook-page .product-strip { flex-wrap: wrap; gap: 12px; }
  .webhook-page .events-panel { min-height: 240px; max-height: 360px; }
  .webhook-page .inspector-panel { min-height: 440px; }
  .webhook-page .capture-bar { padding: 12px; }
}