/* Generated by scripts/build-css-bundles.js — do not edit.
   Sources (in order):
   styles.css
   assets/ddt-tokens.css
   assets/ddt-platform.css
   assets/ddt-tools.css
   assets/ddt-examples.css
   assets/cookie-consent.css
   assets/layout.css
   assets/ddt-tool-shell.css
   assets/ddt-tool-bridge.css
*/

/* ===== styles.css ===== */
/* =========================================================
   Daily Developer Tools — Modern UI Styles (Full Replacement)
   Compatible with existing HTML class names
   ========================================================= */

/* ---------- Breadcrumb ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 12px; gap: 4px; font-size: 0.85em; }
.breadcrumb li + li::before { content: "/"; margin-right: 4px; opacity: 0.5; }
.breadcrumb a { color: var(--color-link, #0969da); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-text-muted, #57606a); }

/* ---------- Empty-state output hints ---------- */
.monospace-output:empty::before {
  content: attr(data-empty-hint);
  color: var(--color-text-muted, #57606a);
  font-style: italic;
  font-size: 0.9em;
  font-family: inherit;
}

/* ---------- Reset / Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Pin native-control rendering (select popups, scrollbars, pickers) to the
   site's explicit theme rather than the OS preference. Without this, a user on
   a light-mode OS viewing the site in dark mode gets a white native dropdown
   popup with light option text — invisible. */
html[data-theme='light'] { color-scheme: light; }
html[data-theme='dark']  { color-scheme: dark; }

body {
  margin: 0;
  padding: 24px;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Arial,
    sans-serif;
  line-height: 1.45;
  color: var(--text-main);
  background: var(--bg);
}

body.command-palette-open {
  overflow: hidden;
}

a {
  color: inherit;
}

::selection {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: inherit;
}

input,
textarea,
select,
button {
  font: inherit;
}

::placeholder {
  color: color-mix(in srgb, var(--text-muted) 88%, transparent);
}

:where(button, input, textarea, select, summary, .icon-button, .tool-chip, .tool-filter-tab):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- Design Tokens ---------- */

:root {
  /* Surfaces */
  --bg: #f3f7fb;
  --bg-elevated: #ffffff;
  --bg-panel: #fcfdff;
  --bg-subtle: #f4f8fc;
  --surface-tint: rgba(14, 116, 144, 0.05);

  /* Surface aliases — these reference the theme-aware --bg-* tokens above so
     they resolve correctly in dark mode. Several tool pages use
     var(--surface[, #fff]) / var(--surface-alt) / var(--surface-hover); without
     these definitions those fell back to a hard-coded light colour and rendered
     as white panels with invisible text in dark mode. */
  --surface: var(--bg-elevated);
  --surface-alt: var(--bg-subtle);
  --surface-hover: var(--bg-subtle);

  /* Text */
  --text-main: #102033;
  --text-muted: #607287;

  /* Borders */
  --border-soft: rgba(16, 32, 51, 0.1);
  --border-muted: rgba(16, 32, 51, 0.18);
  --border-strong: rgba(29, 78, 216, 0.24);

  /* Brand */
  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --primary-soft: rgba(29, 78, 216, 0.1);
  --primary-glow: rgba(29, 78, 216, 0.22);

  --accent: #0f766e;
  --accent-hover: #115e59;
  --accent-soft: rgba(15, 118, 110, 0.1);
  --accent-soft-hover: rgba(15, 118, 110, 0.16);

  /* Semantics */
  --success: #15803d;
  --success-soft: rgba(22, 163, 74, 0.12);
  --success-border: rgba(22, 163, 74, 0.24);
  --warning: #b45309;
  --warning-soft: rgba(245, 158, 11, 0.14);
  --warning-border: rgba(245, 158, 11, 0.28);
  --danger: #b91c1c;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --danger-border: rgba(239, 68, 68, 0.24);
  --info: #0369a1;
  --info-soft: rgba(14, 165, 233, 0.12);
  --info-border: rgba(14, 165, 233, 0.24);

  /* Fields */
  --field-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.96));
  --field-border: rgba(14, 38, 74, 0.16);
  --field-border-hover: rgba(29, 78, 216, 0.28);
  --field-focus-border: rgba(29, 78, 216, 0.48);
  --field-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --output-bg: linear-gradient(180deg, rgba(237, 246, 255, 0.94), rgba(248, 251, 255, 0.98));
  --output-border: rgba(3, 105, 161, 0.18);

  /* Focus ring */
  --ring: rgba(29, 78, 216, 0.24);

  /* Shadows */
  --shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 10px 22px rgba(15, 23, 42, 0.06);
  --shadow-float: 0 22px 60px rgba(15, 23, 42, 0.16);

  /* Radii */
  --radius-xl: 16px;
  --radius-lg: 12px;
  --radius-md: 10px;
  --radius-sm: 8px;

  /* Spacing */
  --gap-1: 6px;
  --gap-2: 10px;
  --gap-3: 14px;
  --gap-4: 18px;
}

/* Dark theme overrides */
html[data-theme='dark'] {
  --bg: #07111b;
  --bg-elevated: #0c1828;
  --bg-panel: #0b1523;
  --bg-subtle: #0f1c2d;
  --surface-tint: rgba(94, 234, 212, 0.05);

  --text-main: #e5e7eb;
  --text-muted: #97a8bb;

  --border-soft: rgba(203, 213, 225, 0.12);
  --border-muted: rgba(203, 213, 225, 0.2);
  --border-strong: rgba(96, 165, 250, 0.28);

  --primary: #60a5fa;
  --primary-hover: #93c5fd;
  --primary-soft: rgba(96, 165, 250, 0.14);
  --primary-glow: rgba(96, 165, 250, 0.24);

  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-soft: rgba(45, 212, 191, 0.14);
  --accent-soft-hover: rgba(45, 212, 191, 0.2);

  --success: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.12);
  --success-border: rgba(74, 222, 128, 0.22);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --warning-border: rgba(251, 191, 36, 0.24);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --danger-border: rgba(248, 113, 113, 0.24);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.14);
  --info-border: rgba(56, 189, 248, 0.24);

  --field-bg: linear-gradient(180deg, rgba(15, 28, 45, 0.96), rgba(12, 24, 40, 0.96));
  --field-border: rgba(148, 163, 184, 0.18);
  --field-border-hover: rgba(96, 165, 250, 0.3);
  --field-focus-border: rgba(96, 165, 250, 0.52);
  --field-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  --output-bg: linear-gradient(180deg, rgba(10, 28, 45, 0.94), rgba(11, 24, 37, 0.98));
  --output-border: rgba(56, 189, 248, 0.2);

  --ring: rgba(96, 165, 250, 0.28);

  --shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 24px 70px rgba(0, 0, 0, 0.5);
}

/* Background refinement */
body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(29, 78, 216, 0.12), transparent 60%),
    radial-gradient(900px 500px at 92% 0%, rgba(15, 118, 110, 0.1), transparent 55%),
    radial-gradient(700px 380px at 55% 100%, rgba(245, 158, 11, 0.06), transparent 62%),
    var(--bg);
}

html[data-theme='dark'] body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(96, 165, 250, 0.16), transparent 60%),
    radial-gradient(900px 500px at 92% 0%, rgba(45, 212, 191, 0.1), transparent 55%),
    radial-gradient(700px 380px at 55% 100%, rgba(251, 191, 36, 0.05), transparent 62%),
    var(--bg);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Layout Shell ---------- */

.sd-page {
  max-width: 1220px;
  margin: 0 auto;
}

.sd-main {
  margin-top: 6px;
}

.page-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  background: var(--bg-panel);
  border-radius: var(--radius-xl);
  padding: 22px 24px 24px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 1440px) {
  .sd-page {
    max-width: 1420px;
  }
  .page-wrapper {
    max-width: 1320px;
  }
}

.page-content {
  min-width: 0;
}

@media (max-width: 640px) {
  body {
    padding: 12px;
  }
  .page-wrapper {
    padding: 16px 14px 18px;
    border-radius: 14px;
  }
}

/* ---------- Header ---------- */

.sd-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  position: sticky;
  top: 8px;
  z-index: 86;
  padding: 10px 12px 14px;
  margin: 0 -6px 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 80%, transparent);
  background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04);
}

.sd-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sd-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.sd-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sd-logo-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.15));
}

.sd-logo-text {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.sd-logo-text-highlight {
  color: var(--primary);
}

.sd-logo-link:hover .sd-logo-text-highlight {
  text-decoration: underline;
}

.sd-header-tagline {
  font-size: 12px;
  color: var(--text-muted);
}

.sd-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sd-header-right a.icon-button[aria-current='page'] {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  color: var(--primary);
  font-weight: 700;
}

.sd-header-right:has(.sd-header-search) {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.sd-header-search {
  display: flex;
  justify-content: center;
}

.sd-header-search .tool-search-input {
  width: min(420px, 100%);
  min-width: 220px;
  border-color: var(--field-border-hover);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), rgba(255, 255, 255, 0) 62%), var(--field-bg);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent),
    var(--shadow-card);
}

.sd-header-search .tool-search-input:focus {
  border-color: var(--field-focus-border);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent),
    var(--shadow-card);
}

.sd-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.sd-header-actions > .icon-button {
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.sd-header-actions > a.icon-button[href="/"],
.sd-header-actions > a.icon-button[href="/index.html"] {
  border-color: color-mix(in srgb, #245ee8 28%, var(--border-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, #245ee8 10%, transparent), transparent 70%),
    var(--bg-elevated);
  color: color-mix(in srgb, #245ee8 82%, var(--text-main));
}

.sd-header-actions > .ddt-workflows-link {
  border-color: color-mix(in srgb, #7657d8 30%, var(--border-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, #7657d8 11%, transparent), transparent 70%),
    var(--bg-elevated);
  color: color-mix(in srgb, #7657d8 78%, var(--text-main));
}

.ddt-contact-link {
  margin-left: 4px;
  padding-left: 12px;
  border-left-color: color-mix(in srgb, #0d9488 35%, var(--border-soft)) !important;
  border-color: color-mix(in srgb, #0d9488 30%, var(--border-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, #0d9488 11%, transparent), transparent 70%),
    var(--bg-elevated);
  color: color-mix(in srgb, #047857 78%, var(--text-main));
  position: relative;
}

.ddt-contact-link::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--color-border-subtle, rgba(0, 0, 0, 0.08));
}

.ddt-bookmark-button {
  gap: 6px;
  border-color: color-mix(in srgb, #c76a14 34%, var(--border-soft));
  background:
    linear-gradient(135deg, color-mix(in srgb, #c76a14 14%, transparent), transparent 68%),
    var(--bg-elevated);
  color: color-mix(in srgb, #b45309 78%, var(--text-main));
}

.ddt-bookmark-button:hover,
.ddt-bookmark-button:focus-visible {
  border-color: color-mix(in srgb, #c76a14 62%, transparent);
  color: #b45309;
}

.ddt-bookmark-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.ddt-bookmark-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ddt-bookmark-label {
  white-space: nowrap;
}

/* Compact top-nav buttons (Workflows / Challenges / Contact / Bookmark)
   injected by assets/layout.js. Description text is in the title= tooltip,
   so the button itself stays small. */
.ddt-top-nav-link {
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.1;
  text-decoration: none;
}
.ddt-top-nav-icon {
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ddt-top-nav-label {
  white-space: nowrap;
}
@media (max-width: 520px) {
  .ddt-top-nav-link {
    padding: 4px 8px;
  }
  .ddt-top-nav-label {
    display: none;
  }
  .ddt-top-nav-icon {
    font-size: 15px;
  }
}

.ddt-feedback-card {
  max-width: 820px;
}

.ddt-feedback-form {
  display: grid;
  gap: 14px;
}

.ddt-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ddt-feedback-form input[type='text'],
.ddt-feedback-form input[type='email'],
.ddt-feedback-form input[type='url'] {
  width: 100%;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text-main);
  padding: 10px 12px;
  font: inherit;
  box-shadow: var(--field-shadow);
}

.ddt-feedback-form input[type='text']:focus,
.ddt-feedback-form input[type='email']:focus,
.ddt-feedback-form input[type='url']:focus {
  outline: none;
  border-color: var(--field-focus-border);
}

.ddt-feedback-warning {
  border: 1px solid var(--warning-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--warning-soft) 70%, transparent);
  padding: 10px 12px;
}

.ddt-feedback-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ddt-honey-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 980px) {
  .sd-header-right:has(.sd-header-search) {
    grid-template-columns: 1fr;
  }
  .sd-header-search {
    justify-content: stretch;
  }
  .sd-header-search .tool-search-input {
    width: 100%;
    max-width: none;
  }

  .ddt-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .sd-header .ddt-bookmark-button {
    width: 36px;
    min-width: 36px;
    padding-left: 0;
    padding-right: 0;
  }

  .sd-header .ddt-bookmark-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Theme toggle */
.theme-toggle {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  transition:
    transform 0.06s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--border-muted);
  background: var(--bg-subtle);
}

.theme-toggle:active {
  transform: translateY(1px);
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.theme-toggle-icon {
  display: inline-block;
}

/* ---------- Modal (Confirm) ---------- */
.ddt-modal-open {
  overflow: hidden;
}

.ddt-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--ddt-overlay, rgba(15, 23, 42, 0.55));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 96;
  padding: 16px;
}

.ddt-modal-card {
  width: min(440px, 92vw);
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.ddt-modal-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text-main);
}

.ddt-modal-body {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.ddt-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Onboarding Tips ---------- */
.ddt-tip {
  position: fixed;
  max-width: 280px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-card);
  z-index: 95;
}

.ddt-tip::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  transform: rotate(45deg);
}

.ddt-tip.is-bottom::after {
  top: -6px;
  left: 24px;
  border-bottom: none;
  border-right: none;
}

.ddt-tip.is-top::after {
  bottom: -6px;
  left: 24px;
  border-top: none;
  border-left: none;
}

.ddt-tip-title {
  font-weight: 800;
  font-size: 13px;
  margin: 0 0 4px;
  color: var(--text-main);
}

.ddt-tip-body {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.ddt-tip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ddt-tip-actions .ddt-tip-link {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
}

.ddt-tip-actions .ddt-tip-link:hover {
  color: var(--primary);
}

.ddt-tip-target {
  box-shadow: 0 0 0 3px var(--primary-soft), 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent);
  border-radius: 10px;
}

.icon-button.is-loading,
button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.icon-button.is-loading::after,
button.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--primary);
  animation: ddt-btn-spin 0.7s linear infinite;
}
@keyframes ddt-btn-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Typography ---------- */

h1 {
  font-size: 22px;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}

h2 {
  font-size: 15px;
  margin: 0;
}

.small h2,
h2.small,
.list-header.small h2,
.card-header.small h2 {
  font-size: 15px;
  font-weight: 600;
}

.subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* ---------- Tool card subtitle ---------- */
.tool-card-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  margin: 2px 0 4px;
  letter-spacing: 0.01em;
}

/* ---------- Tool filters ---------- */
.tool-filter-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.tool-filter-tab {
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.06s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.tool-filter-tab:hover {
  background: var(--bg-subtle);
  border-color: var(--border-muted);
}

.tool-filter-tab.is-active {
  background: var(--primary);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 62%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent);
}

/* ---------- Large input progress ---------- */
.ddt-progress-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 94;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  color: var(--text-main);
  font-size: 12px;
}

.ddt-progress-toast.is-visible {
  display: flex;
}

.ddt-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-soft);
  border-top-color: var(--primary);
  animation: ddt-spin 0.9s linear infinite;
}

.ddt-progress-bar {
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: var(--primary-soft);
  overflow: hidden;
}

.ddt-progress-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 40%;
  background: var(--primary);
  animation: ddt-progress 1.2s ease-in-out infinite;
}

@keyframes ddt-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ddt-progress {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(60%);
  }
  100% {
    transform: translateX(220%);
  }
}

/* ---------- Textarea stats ---------- */
.ddt-textarea-stats {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ddt-textarea-stats .ddt-stat-sep {
  opacity: 0.6;
}

.ddt-textarea-stats .ddt-stat-json {
  font-weight: 700;
  color: var(--primary);
}

.ddt-textarea-stats .ddt-stat-json.is-invalid {
  color: var(--danger);
}

.small {
  font-size: 12px;
  color: var(--text-muted);
}

.note {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-tool-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 8px;
}

/* Tool header row with right-aligned actions */
.ddt-tool-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
}

.ddt-tool-header > h1 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.ddt-tool-header .ddt-tool-actions {
  margin: 0;
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .ddt-tool-header {
    align-items: flex-start;
  }
}

.section-separator {
  margin-top: 18px;
  border-top: 1px dashed var(--border-soft);
  padding-top: 12px;
}

/* Stop globally forcing scrolling on all ULs (UX fix)
   Use scroll where appropriate via tool-specific selectors below. */
ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* Keyboard hint */
.kbd {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--bg-subtle);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* ---------- Tool Search (Index) ---------- */

.tool-search-row {
  margin-bottom: 12px;
}

.tool-search-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  font-size: 13px;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    transform 0.06s ease;
  box-shadow: var(--field-shadow);
}

.tool-search-input:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

.results-title {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* ---------- Cards / Grids ---------- */

.results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.card {
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 100%, transparent), transparent 42%), var(--bg-elevated);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}

/* Nested .card on narrow viewports: drop horizontal padding so input/output areas
   don't lose 28 px to a doubled card inset on phones. Visual chrome (border/shadow) kept. */
@media (max-width: 700px) {
  .card .card {
    padding-left: 0;
    padding-right: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.card h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Tool cards (index link cards) */
.tool-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transform: translateY(0);
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.tool-card:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, transparent);
  box-shadow: var(--shadow-float);
  transform: translateY(-1px);
}

.tool-card:active {
  transform: translateY(0px);
}

/* Chips */
.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-chip {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border-soft));
  padding: 7px 12px;
  font-size: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 38%, transparent), transparent), var(--bg-elevated);
  cursor: pointer;
  transition:
    transform 0.06s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.tool-chip:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 78%, var(--bg-elevated));
}

.tool-chip:active {
  transform: translateY(1px);
}

/* Use-case links card relocated to bottom of page-content by JS */
.card.use-case-links.ddt-use-case-bottom {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-top: 32px !important;
  background: var(--bg-subtle, rgba(0,0,0,0.02)) !important;
  box-shadow: none !important;
  border-color: var(--border-soft) !important;
}

@media (min-width: 960px) {
  body[data-tool-id] .card.use-case-links:not(.ddt-use-case-bottom) {
    float: right;
    width: 360px;
    max-width: 40vw;
    margin-left: 16px;
    margin-top: 0 !important;
  }

  body[data-tool-id] .tool-help {
    columns: 2;
    column-gap: 26px;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  body[data-tool-id] .tool-help li {
    break-inside: avoid;
  }

}

.ddt-platform-slots {
  clear: both;
}

body[data-tool-id] .card.use-case-links[hidden] {
  display: none !important;
}

body[data-tool-id] .tool-help,
body[data-tool-id] .tool-help li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body[data-tool-id] .tool-help {
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1 !important;
  display: none !important;
}

body[data-tool-id] .ddt-tool-assist-row {
  display: none !important;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
}

body[data-tool-id] .ddt-tool-assist-row .tool-help {
  margin: 0;
  flex: 1 1 260px;
  min-width: 220px;
}

/* ── Quick-help icon (replaces old <details class="help-card">) ── */
.ddt-card-header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body[data-tool-id] .ddt-tool-utility-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  margin: 8px 0 14px;
}

body[data-tool-id] .ddt-tool-actions .ddt-tool-utility-row {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body[data-tool-id] .ddt-tool-primary-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}

body[data-tool-id] .ddt-tool-primary-note {
  margin-right: auto;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body[data-tool-id] .ddt-tool-primary-btn {
  min-width: 148px;
}

@media (max-width: 700px) {
  body[data-tool-id] .ddt-tool-primary-row {
    align-items: stretch;
  }

  body[data-tool-id] .ddt-tool-primary-note {
    margin-right: 0;
    width: 100%;
  }

  body[data-tool-id] .ddt-tool-primary-btn {
    width: 100%;
  }
}

.ddt-help-icon-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-self: center;
}

.ddt-help-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-soft, #cbd5e1);
  background: color-mix(in srgb, var(--bg-subtle, #f8fafc) 82%, transparent);
  color: var(--text-muted, #64748b);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ddt-help-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ddt-help-icon--workflow {
  border-color: color-mix(in srgb, #7657d8 34%, var(--border-soft, #cbd5e1));
  background:
    linear-gradient(135deg, color-mix(in srgb, #7657d8 12%, transparent), transparent 72%),
    var(--bg-elevated, #fff);
  color: color-mix(in srgb, #7657d8 82%, var(--text-main, #0f172a));
}

.ddt-help-icon--workflow svg {
  width: 20px !important;
  min-width: 20px;
  height: 20px !important;
}

.ddt-help-icon:hover,
.ddt-help-icon:focus-visible,
.ddt-help-icon-wrap.is-open .ddt-help-icon {
  border-color: var(--primary, #0ea5e9);
  color: var(--primary, #0ea5e9);
  background: color-mix(in srgb, var(--primary-soft, rgba(14, 165, 233, 0.12)) 92%, transparent);
  outline: none;
}

.ddt-help-popup {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 200;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-soft, #e2e8f0);
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 10px 14px;
  min-width: 260px;
  max-width: min(380px, calc(100vw - 32px));
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted, #475569);
  white-space: normal;
}

.ddt-help-popup-title {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
}

.ddt-help-popup ul {
  margin: 0;
  padding-left: 16px;
}

.ddt-popup-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ddt-popup-link-list li + li {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border-soft, #e2e8f0) 72%, transparent);
}

.ddt-popup-link,
.ddt-popup-link--workflow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--text-main, #0f172a);
  text-decoration: none;
  cursor: pointer;
}

.ddt-popup-link:hover,
.ddt-popup-link--workflow:hover {
  color: var(--primary, #0ea5e9);
}

.ddt-popup-link-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted, #64748b);
}

.ddt-help-popup-empty {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.ddt-help-popup-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border-soft, #e2e8f0) 72%, transparent);
}

.ddt-popup-link--footer,
.ddt-popup-link--workflow-library {
  font-size: 12px;
  font-weight: 600;
}

.ddt-help-popup li + li {
  margin-top: 4px;
}

.ddt-help-popup strong {
  color: var(--text-main, #0f172a);
}

/* Show only when toggled open or keyboard-focused */
.ddt-help-icon-wrap:focus-within .ddt-help-popup,
.ddt-help-icon-wrap.is-open .ddt-help-popup {
  display: block;
}

html[data-theme='dark'] .ddt-help-popup {
  background: var(--bg-elevated, #1e293b);
  border-color: var(--border-soft, #334155);
  color: var(--text-muted, #94a3b8);
}

html[data-theme='dark'] .ddt-help-popup strong {
  color: var(--text-main, #f1f5f9);
}

html[data-theme='dark'] .ddt-help-popup-title {
  color: var(--text-main, #f1f5f9);
}

html[data-theme='dark'] .ddt-popup-link,
html[data-theme='dark'] .ddt-popup-link--workflow {
  color: var(--text-main, #f1f5f9);
}

html[data-theme='dark'] .ddt-popup-link-meta,
html[data-theme='dark'] .ddt-help-popup-empty {
  color: var(--text-muted, #94a3b8);
}

/* Pinned tools (home + recents) */
.ddt-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ddt-section-header .results-title {
  margin: 0;
}

.ddt-section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ddt-section-summary {
  margin: 8px 0 0;
}

.ddt-pinned-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.ddt-pinned-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

.ddt-pinned-link {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ddt-pinned-item:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, transparent);
}

.ddt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 100%, transparent), transparent), var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.2;
  cursor: default;
}

.ddt-chip--local {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 100%, transparent), transparent), var(--bg-elevated);
  border-color: color-mix(in srgb, var(--primary) 24%, transparent);
  color: var(--primary);
  font-weight: 600;
}

.ddt-trust-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ddt-tool-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 12px;
}

.ddt-tool-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.ddt-chip-link {
  text-decoration: none;
  color: inherit;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ddt-pin-btn,
.ddt-pin-mini,
.ddt-unpin-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.ddt-pin-btn {
  padding: 6px 10px;
}

.ddt-pin-mini,
.ddt-unpin-btn {
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition:
    transform 0.06s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

.ddt-pin-mini:hover,
.ddt-unpin-btn:hover {
  background: color-mix(in srgb, var(--primary-soft) 34%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border-muted));
}

.ddt-pin-btn.is-active,
.ddt-pin-mini.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 100%, transparent), transparent), var(--bg-elevated);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  color: var(--primary);
}

.ddt-pin-icon {
  font-size: inherit;
  line-height: 1;
}

.ddt-pin-label {
  font-size: inherit;
  line-height: 1;
}

/* Icon buttons */
.icon-button {
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    transform 0.06s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
  min-width: 34px;
}

.icon-button.ddt-pin-btn {
  padding: 6px 10px;
  min-width: auto;
}

/* Favorites button on tool pages */
.ddt-fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: 6px 10px;
  min-width: auto;
}

.ddt-fav-btn.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 100%, transparent), transparent), var(--bg-elevated);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  color: var(--primary);
}

.ddt-fav-icon {
  font-size: inherit;
  line-height: 1;
}

.ddt-fav-label {
  font-size: inherit;
  line-height: 1;
}

/* Unfavorite button in favorites grid */
.ddt-unfav-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

.ddt-unfav-btn:hover {
  background: color-mix(in srgb, var(--primary-soft) 34%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border-muted));
}

.icon-button:hover {
  background: color-mix(in srgb, var(--primary-soft) 30%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border-muted));
}

.icon-button:active {
  transform: translateY(1px);
}

.icon-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.tool-star {
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 2px 6px;
}

.tool-star--active {
  color: #f59e0b;
}

/* ---------- Workspace Panels ---------- */

.ddt-workspace {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

.ddt-workspace--split {
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
}

.ddt-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ddt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ddt-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ddt-editor {
  width: 100%;
  flex: 1;
  min-height: 220px;
  height: clamp(240px, 42vh, 520px);
  resize: vertical;
}

@media (max-width: 980px) {
  .ddt-workspace--split {
    grid-template-columns: 1fr;
  }
}

/* ---------- Shared Layout (Lists / Comparator Columns) ---------- */

.container {
  display: flex;
  gap: 20px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.column {
  flex: 1 1 280px;
  min-width: 260px;
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.list-header-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.list-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .list-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .list-header-right {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Optional list name inputs */
.list-name-input {
  width: 100%;
  margin: 2px 0 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  font-size: 12px;
  background: var(--field-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: var(--field-shadow);
}

.list-name-input:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Tip row */
.tip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.tip {
  margin: 4px 0 6px;
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tip-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--primary-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--primary);
  flex-shrink: 0;
}

/* Suggestion banner */
.ddt-suggest {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-soft);
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-suggest[hidden] {
  display: none !important;
}

.ddt-suggest-text {
  font-weight: 600;
  color: var(--text-main);
}

.ddt-suggest-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* ---------- Form Controls ---------- */

textarea {
  width: 100%;
  height: 200px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--field-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 13px;
  resize: vertical;
  outline: none;
  background: var(--field-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: var(--field-shadow);
}

textarea:focus {
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

.text-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--field-border);
  font-size: 13px;
  background: var(--field-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: var(--field-shadow);
}

.text-input:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

.output-textarea {
  width: 100%;
  min-height: 90px;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--output-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  resize: vertical;
  background: var(--output-bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary) 8%, white);
}

.output-textarea:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

.monospace-output {
  border-radius: var(--radius-md);
  border: 1px solid var(--output-border);
  padding: 10px 12px;
  min-height: 90px;
  max-height: 260px;
  overflow: auto;
  background: var(--output-bg);
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary) 8%, white);
}

/* Selects */
select {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: var(--field-shadow);
}

select:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Field group */
.field-group {
  margin-top: 10px;
}

/* Detection row */
.detection-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ---------- Buttons ---------- */

button {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  transition:
    transform 0.06s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

button:active {
  transform: translateY(1px);
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

button.primary {
  background: var(--primary);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 62%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 24%, transparent);
}

button.primary:hover {
  background: var(--primary-hover);
}

button.secondary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 88%, transparent), transparent), var(--bg-elevated);
  color: var(--text-main);
  border-color: var(--border-soft);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

button.secondary:hover {
  background: color-mix(in srgb, var(--primary-soft) 24%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border-muted));
}

button.small-btn {
  padding: 7px 12px;
  font-size: 12px;
}

/* Prominent action */
.compare-btn {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 800;
}

/* Clear actions (gentle danger, consistent) */
.ddt-clear-btn,
.clear-all-btn {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

html[data-theme='dark'] .ddt-clear-btn,
html[data-theme='dark'] .clear-all-btn {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.22);
}

.ddt-clear-btn:hover,
.clear-all-btn:hover {
  background: color-mix(in srgb, var(--danger-soft) 100%, var(--bg-elevated));
}

.icon-button.ddt-clear-btn {
  background: var(--danger-soft);
  border-color: var(--danger-border);
}

.icon-button.ddt-clear-btn:hover {
  background: color-mix(in srgb, var(--danger-soft) 100%, var(--bg-subtle));
}

.card-header .ddt-clear-btn,
.field-group .ddt-clear-btn,
.detection-row .ddt-clear-btn,
.compare-bar .ddt-clear-btn,
.ddt-actionbar .ddt-clear-btn {
  margin-left: auto;
}

/* ---------- Sort / Compare Bars ---------- */

.sort-mode-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sort-toggle-btn {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  border: 1px solid var(--border-soft);
  cursor: pointer;
  background: var(--bg-elevated);
  color: var(--text-muted);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.sort-toggle-btn:hover {
  border-color: var(--border-muted);
  background: var(--bg-subtle);
}

.sort-toggle-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 62%, transparent);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 20%, transparent);
}

.compare-bar {
  margin-top: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 100%, transparent), transparent 52%), var(--bg-elevated);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}

.compare-left {
  flex: 1 1 0;
}

.compare-center {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0 auto;
}

.compare-right {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
}

.compare-center label {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Results section wrapper */
.results-section {
  margin-top: 18px;
}

/* Make comparator output lists scroll without affecting all ULs */
.results-section ul,
#onlyList1,
#common,
#onlyList2 {
  max-height: 260px;
  overflow: auto;
}

/* Duplicates actions */
.dup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.dup-output {
  font-size: 13px;
}

/* ---------- Badges (JSON/CSV/YAML + OK/Error) ---------- */

.type-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.type-badge--json {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success-border);
}

.type-badge--csv {
  background: var(--info-soft);
  color: var(--info);
  border-color: var(--info-border);
}

.type-badge--yaml {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: var(--warning-border);
}

.type-badge--unknown {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
  border-color: var(--border-soft);
}

.type-badge--ok {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success-border);
}

.type-badge--error {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger-border);
}

/* Column export row */
.column-export {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.column-export select {
  min-width: 160px;
}

/* ---------- Regex Tester ---------- */

.flags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pill-btn {
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.pill-btn:hover {
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border-muted));
}

.regex-match {
  background: color-mix(in srgb, var(--warning-soft) 100%, transparent);
  border-radius: 3px;
  padding: 0 2px;
}

.matches-list {
  list-style: disc;
  padding-left: 18px;
}

/* ---------- Command Palette (Ctrl+K) ---------- */

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.command-palette[hidden] {
  display: none;
}

.command-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}

.command-palette-panel {
  position: relative;
  margin: 80px auto 0;
  max-width: 560px;
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-float);
  padding: 10px 12px 12px;
}

.command-palette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.command-palette-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--field-border);
  font-size: 13px;
  margin-bottom: 8px;
  background: var(--field-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: var(--field-shadow);
}

.command-palette-input:focus {
  outline: none;
  border-color: var(--field-focus-border);
  box-shadow: 0 0 0 3px var(--ring);
}

.command-palette-list {
  max-height: 290px;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.command-palette-item {
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.command-palette-item-main {
  font-size: 13px;
  font-weight: 800;
}

.command-palette-item-meta {
  color: var(--text-muted);
}

.command-palette-item--active {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 24%, transparent);
  color: var(--text-main);
}

.command-palette-empty {
  padding: 8px 10px;
}

.command-palette-hint {
  margin-top: 8px;
  color: var(--text-muted);
}

/* ---------- Text Diff: Lined Editors + Table ---------- */

.lined-textarea {
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  overflow: hidden;
  min-height: 160px;
}

.line-numbers {
  width: 44px;
  padding: 10px 6px;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-right: 1px solid var(--border-soft);
  overflow: hidden;
}

.line-number {
  line-height: 1.55;
  padding-right: 4px;
}

.lined-textarea-input {
  flex: 1;
  border: none;
  resize: vertical;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  background: var(--bg-elevated);
  outline: none;
}

.lined-textarea textarea {
  border: none !important;
  box-shadow: none !important;
}

.compare-options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.compare-options-left label {
  margin-right: 10px;
  cursor: pointer;
}

.compare-options-right {
  display: flex;
  gap: 8px;
}

/* Legend */
.diff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.legend-item::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
}

.legend-equal::before {
  background: var(--bg-elevated);
}
.legend-added::before {
  background: var(--success-soft);
}
.legend-removed::before {
  background: var(--danger-soft);
}
.legend-changed::before {
  background: var(--info-soft);
}

/* Clickable legend filtering */
.legend-item {
  cursor: pointer;
  user-select: none;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.legend-item:hover {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border-muted));
  background: color-mix(in srgb, var(--surface-tint) 100%, transparent);
}

html[data-theme='dark'] .legend-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.legend-item.is-off {
  opacity: 0.45;
}

/* Diff table */
.diff-table-container {
  margin-top: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  overflow: auto;
  max-height: 460px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

.diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.diff-table th {
  position: sticky;
  top: 0;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 10px;
  text-align: left;
  font-weight: 800;
}

.diff-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.diff-line-equal {
  background: transparent;
}
.diff-line-added {
  background: var(--success-soft);
}
.diff-line-removed {
  background: var(--danger-soft);
}
.diff-line-changed {
  background: var(--info-soft);
}

/* Cells & text (compact: number + text on one line) */

.diff-cell {
  width: 50%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.diff-line-number {
  color: #6b7280;
  font-size: 11px;
  margin-bottom: 0; /* key: remove stacking gap */
  min-width: 34px; /* fixed number column */
  text-align: right;
  flex: 0 0 auto;
  line-height: 1.4;
  padding-top: 1px; /* baseline alignment */
}

.diff-line-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap; /* keep wrapping */
  line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
}

/* Word highlights */
.diff-word-added {
  background: color-mix(in srgb, var(--success-soft) 100%, transparent);
}
.diff-word-removed {
  background: color-mix(in srgb, var(--danger-soft) 100%, transparent);
  text-decoration: line-through;
}

/* ---------- Footer ---------- */

.sd-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 12px 14px;
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 88%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.03);
}

.sd-footer a,
.sd-footer .link-button {
  color: var(--text-main);
}

.sd-footer a:hover,
.sd-footer .link-button:hover {
  color: var(--primary);
}

/* ---------- Scrollbar (subtle) ---------- */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.38);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================================
   Button styling compatibility override (ADD AT END)
   ========================================================= */

/* Default buttons: treat as "secondary" so nothing looks plain */
button {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 88%, transparent), transparent), var(--bg-elevated);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

/* Default hover for buttons */
button:hover {
  background: color-mix(in srgb, var(--primary-soft) 24%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border-muted));
}

/* Ensure "primary" looks like a real primary CTA everywhere */
button.primary,
.primary-btn,
.btn-primary {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--primary) 62%, transparent) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 24%, transparent);
}

button.primary:hover,
.primary-btn:hover,
.btn-primary:hover {
  background: var(--primary-hover) !important;
}

/* Ensure "secondary" remains consistent */
button.secondary,
.secondary-btn,
.btn-secondary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 88%, transparent), transparent), var(--bg-elevated) !important;
  color: var(--text-main) !important;
  border-color: var(--border-soft) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

button.secondary:hover,
.secondary-btn:hover,
.btn-secondary:hover {
  background: color-mix(in srgb, var(--primary-soft) 24%, var(--bg-subtle)) !important;
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border-muted)) !important;
}

/* Disabled buttons */
button:disabled,
button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   JSON ⇄ CSV Converter — tool-specific enhancements
   Append at end of styles.css
   ========================================================= */

body[data-tool-id='json-to-csv'] #universalInput,
body[data-tool-id='json-to-csv'] #universalOutput {
  min-height: 340px;
}

body[data-tool-id='json-to-csv'] #columnListOutput {
  min-height: 160px;
}

/* Inline status bar */
body[data-tool-id='json-to-csv'] .ddt-status {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

body[data-tool-id='json-to-csv'] .ddt-status--info {
  background: var(--info-soft);
  border-color: var(--info-border);
}

body[data-tool-id='json-to-csv'] .ddt-status--ok {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success);
}

body[data-tool-id='json-to-csv'] .ddt-status--error {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger);
}

/* Options (details) */
body[data-tool-id='json-to-csv'] .tool-options {
  margin-top: 10px;
}

body[data-tool-id='json-to-csv'] .tool-options summary {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

body[data-tool-id='json-to-csv'] .tool-options[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

body[data-tool-id='json-to-csv'] .tool-options .tool-options-body {
  border: 1px solid var(--border-soft);
  border-top: none;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  background: var(--bg-elevated);
  padding: 12px;
  box-shadow: var(--shadow-card);
}

body[data-tool-id='json-to-csv'] .tool-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

body[data-tool-id='json-yaml'] .json-yaml-options-row,
body[data-tool-id='json-yaml'] .json-yaml-advanced,
body[data-tool-id='json-yaml'] .json-yaml-panel,
body[data-tool-id='json-yaml'] .json-yaml-roundtrip {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
}

body[data-tool-id='json-yaml'] .json-yaml-options-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

body[data-tool-id='json-yaml'] .json-yaml-inline-option,
body[data-tool-id='json-yaml'] .json-yaml-options-grid label {
  display: grid;
  gap: 5px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

body[data-tool-id='json-yaml'] .json-yaml-inline-option {
  grid-template-columns: auto minmax(220px, 320px);
  align-items: center;
}

body[data-tool-id='json-yaml'] .json-yaml-advanced {
  padding: 0;
}

body[data-tool-id='json-yaml'] .json-yaml-advanced summary,
body[data-tool-id='json-yaml'] .json-yaml-panel summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 700;
}

body[data-tool-id='json-yaml'] .json-yaml-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

body[data-tool-id='json-yaml'] .json-yaml-checkbox {
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--text);
}

body[data-tool-id='json-yaml'] .json-yaml-panels {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

body[data-tool-id='json-yaml'] .json-yaml-panel-body,
body[data-tool-id='json-yaml'] .json-yaml-roundtrip {
  padding: 0 12px 12px;
  color: var(--text);
}

body[data-tool-id='json-yaml'] .json-yaml-roundtrip {
  padding: 10px 12px;
}

body[data-tool-id='json-yaml'] .json-yaml-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

body[data-tool-id='json-yaml'] .json-yaml-report-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.86rem;
}

body[data-tool-id='json-yaml'] .json-yaml-warning-list,
body[data-tool-id='json-yaml'] .json-yaml-preview-list {
  margin: 8px 0 0;
  padding-left: 18px;
}

body[data-tool-id='json-yaml'] .json-yaml-warning-list li {
  margin: 4px 0;
}

body[data-tool-id='json-yaml'] .json-yaml-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
}

@media (max-width: 720px) {
  body[data-tool-id='json-yaml'] .json-yaml-inline-option {
    grid-template-columns: 1fr;
    width: 100%;
  }

body[data-tool-id='json-yaml'] .json-yaml-inline-option select {
    width: 100%;
  }
}

body[data-tool-id='yaml-validator'] .yv-workbench-options,
body[data-tool-id='yaml-validator'] .yv-panel {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
}

body[data-tool-id='yaml-validator'] .yv-workbench-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  padding: 10px 12px;
  align-items: end;
}

body[data-tool-id='yaml-validator'] .yv-workbench-options label,
body[data-tool-id='yaml-validator'] .yv-options-grid label,
body[data-tool-id='yaml-validator'] .yv-panel-body > label {
  display: grid;
  gap: 5px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

body[data-tool-id='yaml-validator'] .yv-panel summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 700;
}

body[data-tool-id='yaml-validator'] .yv-panel-body {
  padding: 0 12px 12px;
}

body[data-tool-id='yaml-validator'] .yv-workbench-panels {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

body[data-tool-id='yaml-validator'] .yv-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

body[data-tool-id='yaml-validator'] .yv-checkbox {
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--text);
}

body[data-tool-id='yaml-validator'] .yv-small-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.45;
}

body[data-tool-id='yaml-validator'] .yv-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

body[data-tool-id='yaml-validator'] .yv-summary-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-size: 0.86rem;
}

body[data-tool-id='yaml-validator'] .yv-result-group {
  margin-top: 10px;
}

body[data-tool-id='yaml-validator'] .yv-result-group h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

body[data-tool-id='yaml-validator'] .yv-result-list,
body[data-tool-id='yaml-validator'] .yv-structure-list {
  margin: 0;
  padding-left: 18px;
}

body[data-tool-id='yaml-validator'] .yv-result-list li,
body[data-tool-id='yaml-validator'] .yv-structure-list li {
  margin: 5px 0;
}

body[data-tool-id='yaml-validator'] .yv-result-meta {
  color: var(--text-muted);
  font-size: 0.82rem;
}

body[data-tool-id='yaml-validator'] .yv-doc-table-wrap {
  overflow-x: auto;
}

body[data-tool-id='yaml-validator'] .yv-doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

body[data-tool-id='yaml-validator'] .yv-doc-table th,
body[data-tool-id='yaml-validator'] .yv-doc-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

body[data-tool-id='yaml-validator'] .yv-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-tool-id='yaml-validator'] .yv-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
}

@media (max-width: 720px) {
  body[data-tool-id='yaml-validator'] .yv-workbench-options {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Global UX Consistency Pack (Toolbars + Handoff Links)
   Add at end of styles.css
   ========================================================= */

/* Reusable sticky surface for tool action bars */
.ddt-sticky {
  position: sticky;
  top: 10px;
  z-index: 5;
}

/* Slightly better spacing + wrapping for compare bars */
.compare-right {
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Mobile: keep toolbars usable (no cramped center) */
@media (max-width: 900px) {
  .compare-left,
  .compare-center,
  .compare-right {
    flex: 1 1 100%;
  }

  .compare-center {
    justify-content: flex-start;
    margin: 0;
  }

  .compare-right {
    justify-content: flex-start;
  }
}

/* Disabled buttons: clearer, consistent */
button:disabled,
.icon-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* Send-to / handoff row (links instead of dropdowns) */
.ddt-handoff-row {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ddt-handoff-link {
  border: 1px solid transparent;
  background: transparent;
  color: var(--primary);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ddt-handoff-link:hover {
  background: var(--primary-soft);
}

.ddt-handoff-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.ddt-handoff-link.is-active {
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
}

/* Utility: visually hide but keep for JS */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* Schema Inspector visual mode */
body[data-tool-id='schema-inspector'] .visual-output,
body[data-tool-id='sql-formatter'] .visual-output {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--card-bg);
  min-height: 120px;
}

body[data-tool-id='schema-inspector'] .tree-wrap {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
}

body[data-tool-id='schema-inspector'] .tree-node,
body[data-tool-id='schema-inspector'] .tree-leaf {
  margin: 6px 0;
}

body[data-tool-id='schema-inspector'] .tree-summary {
  list-style: none;
}

body[data-tool-id='schema-inspector'] .tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-tool-id='schema-inspector'] .tree-key {
  font-weight: 600;
}

body[data-tool-id='schema-inspector'] .tree-type {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

body[data-tool-id='schema-inspector'] .tree-example {
  font-size: 11px;
  color: var(--text-muted);
}

body[data-tool-id='schema-inspector'] .tree-children {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 1px dashed rgba(127, 127, 127, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   MODERNIZATION LAYER — Phases 2-9
   All additions below. Existing rules above are untouched.
   Dark mode selector matches existing JS: html[data-theme='dark']
   ═══════════════════════════════════════════════════════════ */

/* ── Phase 2: Design Token Extensions ──────────────────────── */

:root {
  /* --- Neutrals (new names, parallel to --bg/--text-main) --- */
  --color-bg-page:        #F8F9FB;
  --color-bg-surface:     #FFFFFF;
  --color-bg-raised:      #FFFFFF;
  --color-bg-subtle:      #F1F3F7;
  --color-bg-overlay:     rgba(0,0,0,0.04);

  /* --- Text --- */
  --color-text-primary:   #0F1117;
  --color-text-secondary: #4A5568;
  --color-text-muted:     #8A94A6;
  --color-text-inverse:   #FFFFFF;

  /* --- Borders --- */
  --color-border-subtle:  #E4E8EF;
  --color-border-medium:  #C9D0DC;
  --color-border-strong:  #9AA3B2;

  /* --- Accent (blue — maps to --primary in existing system) --- */
  --color-accent:         #2563EB;
  --color-accent-hover:   #1D4ED8;
  --color-accent-light:   #EFF6FF;
  --color-accent-subtle:  #DBEAFE;
  --color-accent-text:    #1E40AF;

  /* --- Semantic --- */
  --color-success:        #16A34A;
  --color-success-bg:     #F0FDF4;
  --color-success-border: #BBF7D0;
  --color-warning:        #D97706;
  --color-warning-bg:     #FFFBEB;
  --color-warning-border: #FDE68A;
  --color-error:          #DC2626;
  --color-error-bg:       #FEF2F2;
  --color-error-border:   #FECACA;
  --color-info:           #0284C7;
  --color-info-bg:        #F0F9FF;
  --color-info-border:    #BAE6FD;

  /* --- Typography --- */
  --font-sans:    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  --font-size-xs:   0.75rem;     /* 12px */
  --font-size-sm:   0.8125rem;   /* 13px */
  --font-size-base: 0.9375rem;   /* 15px */
  --font-size-md:   1rem;        /* 16px */
  --font-size-lg:   1.125rem;    /* 18px */
  --font-size-xl:   1.25rem;     /* 20px */
  --font-size-2xl:  1.5rem;      /* 24px */
  --font-size-3xl:  1.875rem;    /* 30px */
  --line-height-tight:   1.35;
  --line-height-base:    1.6;
  --line-height-relaxed: 1.75;

  /* --- Spacing scale --- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* --- Radii (new: full; existing sm/md/lg/xl preserved) --- */
  --radius-full: 9999px;

  /* --- Named shadows (parallel to existing --shadow-soft/card/float) --- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.04);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* --- Layout --- */
  --content-max-width: 1200px;
  --nav-height: 60px;
  --sidebar-width: 240px;
}

html[data-theme='dark'] {
  --color-bg-page:        #0D1117;
  --color-bg-surface:     #161B22;
  --color-bg-raised:      #1C2333;
  --color-bg-subtle:      #21262D;
  --color-bg-overlay:     rgba(255,255,255,0.04);

  --color-text-primary:   #E6EDF3;
  --color-text-secondary: #8B949E;
  --color-text-muted:     #6E7681;
  --color-text-inverse:   #0D1117;

  --color-border-subtle:  #30363D;
  --color-border-medium:  #484F58;
  --color-border-strong:  #6E7681;

  --color-accent:         #3B82F6;
  --color-accent-hover:   #60A5FA;
  --color-accent-light:   #0C1C3E;
  --color-accent-subtle:  #172554;
  --color-accent-text:    #93C5FD;

  --color-success:        #3FB950;
  --color-success-bg:     #0D2818;
  --color-success-border: #1E4830;
  --color-warning:        #D29922;
  --color-warning-bg:     #2D1F00;
  --color-warning-border: #5A3E00;
  --color-error:          #F85149;
  --color-error-bg:       #2D0909;
  --color-error-border:   #67120F;
  --color-info:           #38BDF8;
  --color-info-bg:        #0C1E30;
  --color-info-border:    #164B6E;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.5);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.6);
}

/* ── Phase 3: Nav modernization ─────────────────────────────── */

.sd-header {
  align-items: center;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  top: 8px;
  padding: var(--space-3) var(--space-5);
  gap: var(--space-3);
  backdrop-filter: none;
  box-shadow: var(--shadow-xs);
  margin: 0 -6px 8px;
}

.sd-header-left {
  gap: var(--space-2);
}

.sd-logo-link {
  gap: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.sd-logo-mark {
  height: 28px;
  width: auto;
  filter: none;
}

.sd-logo-text {
  font-weight: 700;
  font-size: var(--font-size-md);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.sd-logo-text-highlight {
  color: var(--color-accent);
}

.sd-header-tagline {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Nav links area */
.sd-header-right {
  gap: var(--space-2);
}

.sd-header-right .icon-button {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  box-shadow: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sd-header-right .icon-button:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  border-color: transparent;
}

.sd-header-right .icon-button[aria-current='page'] {
  background: var(--color-accent-light);
  color: var(--color-accent-text);
  border-color: transparent;
  font-weight: 600;
}

/* Pipeline toggle button — inherits .sd-header-right .icon-button styling so
   it sits on the same visual plane as the other top-right nav links. */

/* Theme toggle */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: transparent;
  color: var(--color-text-secondary);
  padding: 0;
  box-shadow: none;
}

.theme-toggle:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  border-color: var(--color-border-medium);
}

/* ── Phase 4 & 5: Homepage ───────────────────────────────────── */

/* Tool card grid */
.results {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.tool-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.tool-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tool-card:active {
  transform: translateY(0);
}

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.card h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* Category filter tabs */
.tool-filter-tabs {
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-3);
}

.tool-filter-tab {
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: none;
  transition: all var(--transition-fast);
}

.tool-filter-tab:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  border-color: transparent;
  box-shadow: none;
}

.tool-filter-tab.is-active {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
  box-shadow: none;
}

/* Magic Box section */
.magic-box-card {
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.magic-box-card::before {
  display: none;
}

.magic-box-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* ── Phase 6: Pinned / recents grid ─────────────────────────── */

.ddt-pinned-item {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: border-color var(--transition-fast);
}

.ddt-pinned-item:hover {
  border-color: var(--color-accent);
}

/* ── Phase 7: Tool page panels ──────────────────────────────── */

.ddt-panel {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.ddt-panel-head {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-3);
}

/* Action bar modernization */
.ddt-action-bar,
.ddt-actionbar {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3);
}

.ddt-actionbar-left,
.ddt-actionbar-right,
.ddt-actionbar-group {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.ddt-actionbar-left {
  flex: 1 1 320px;
}

.ddt-actionbar-right {
  margin-left: auto;
}

.ddt-actionbar-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.ddt-actionbar-divider {
  color: var(--color-text-muted);
  font-weight: 700;
}

.ddt-actionbar-workflow {
  display: grid;
  gap: 2px;
}

.ddt-actionbar-workflow-hint {
  font-size: 11px;
  color: var(--color-text-muted);
}

.ddt-actionbar-trust {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.ddt-has-shared-actionbar .page-content .ddt-workflow-cta-btn {
  display: none !important;
}

.ddt-has-shared-actionbar .page-content .ddt-actionbar .ddt-workflow-cta-btn {
  display: inline-flex !important;
}

@media (max-width: 860px) {
  .ddt-actionbar-right {
    margin-left: 0;
  }

  .ddt-actionbar-workflow {
    width: 100%;
  }
}

.ddt-start-card {
  margin-top: 10px;
}

.ddt-start-steps {
  margin: 8px 0 0;
  padding-left: 18px;
}

.ddt-start-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ddt-start-note {
  margin-top: 10px;
  color: var(--color-text-muted);
}

.ddt-usecase-meta {
  margin-top: 8px;
}

.ddt-usecase-meta .tool-chip {
  opacity: 0.92;
}

/* Panel header component (new class) */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.panel-header-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.panel-header + textarea,
.panel-header + .panel-body textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ── Phase 8: Button system additions ───────────────────────── */
/* Adds .btn-* classes as new options; existing button/primary/secondary unchanged */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  background: var(--color-bg-surface) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border-subtle) !important;
  box-shadow: none !important;
}

.btn-secondary:hover {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-medium) !important;
}

.btn-secondary:active { transform: scale(0.98); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.btn-ghost:active { transform: scale(0.98); }

.btn-icon {
  padding: var(--space-2);
  width: 34px;
  height: 34px;
  justify-content: center;
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Phase 9: Status badge system ───────────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.status-badge.valid,
.status-badge.success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

.status-badge.error,
.status-badge.invalid {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
}

.status-badge.warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

.status-badge.info,
.status-badge.idle {
  background: var(--color-info-bg);
  color: var(--color-info);
  border: 1px solid var(--color-info-border);
}

/* Improve existing type badges to use new tokens */
.type-badge--ok {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
}

.type-badge--error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error-border);
}

.type-badge--json {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
}

/* ── Phase 10: Typography improvements ──────────────────────── */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 {
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: var(--line-height-tight);
}

h2 {
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
  line-height: var(--line-height-tight);
}

h3, h4 {
  color: var(--color-text-primary);
}

/* Section title label (all-caps, muted) */
.section-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Inline code */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--color-text-primary);
}

/* ── Phase 11: Footer modernization ─────────────────────────── */

.sd-footer {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  gap: var(--space-4);
  box-shadow: none;
}

.sd-footer a,
.sd-footer .link-button {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.sd-footer a:hover,
.sd-footer .link-button:hover {
  color: var(--color-text-secondary);
}

/* ── Phase 12: Info cards grid (new components) ─────────────── */

.info-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.info-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  display: block;
}

.info-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.info-card h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.info-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin: 0;
}

/* ── Phase 13: FAQ section (new component) ──────────────────── */

.faq-section {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
}

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-5) 0;
}

.faq-question {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.faq-answer {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ── Phase 14: Scroll, focus & interaction polish ───────────── */

::selection {
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Override general :focus-visible where box-shadow ring is used instead */
:where(button, input, textarea, select, summary, .icon-button, .tool-chip, .tool-filter-tab):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* Refined scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-medium);
  border-radius: var(--radius-full);
  border: none;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}

/* Copy feedback state */
.btn.copied,
button.copied {
  background: var(--color-success-bg) !important;
  color: var(--color-success) !important;
  border-color: var(--color-success-border) !important;
}

/* Skeleton shimmer */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-subtle) 25%,
    var(--color-bg-overlay) 50%,
    var(--color-bg-subtle) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ── Phase 15: Responsive overrides ─────────────────────────── */

@media (max-width: 768px) {
  .results {
    grid-template-columns: 1fr;
  }

  .tool-filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .tool-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .sd-header {
    padding: 0 var(--space-4);
    gap: var(--space-2);
  }

  .sd-header-tagline {
    display: none;
  }

  .magic-box-card {
    border-radius: var(--radius-lg);
  }

  .ddt-panel {
    border-radius: var(--radius-md);
  }
}

@media (max-width: 480px) {
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }

  .sd-footer {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
  }
}

body[data-tool-id='sql-formatter'] .sql-diagram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

body[data-tool-id='sql-formatter'] .sql-table-card {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
}

body[data-tool-id='sql-formatter'] .sql-table-title {
  font-weight: 700;
  margin-bottom: 6px;
}

body[data-tool-id='sql-formatter'] .sql-column {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 2px 0;
  font-size: 12px;
}

body[data-tool-id='sql-formatter'] .sql-col-type {
  color: var(--text-muted);
}

body[data-tool-id='sql-formatter'] .sql-col-badges {
  display: inline-flex;
  gap: 4px;
}

body[data-tool-id='sql-formatter'] .sql-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
}

body[data-tool-id='sql-formatter'] .sql-badge--pk {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.2);
}

body[data-tool-id='sql-formatter'] .sql-badge--fk {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.2);
}

body[data-tool-id='sql-formatter'] .sql-relations {
  margin-top: 14px;
  font-size: 12px;
}

body[data-tool-id='sql-formatter'] .sql-relations-title {
  font-weight: 600;
  margin-bottom: 6px;
}

body[data-tool-id='sql-formatter'] .sql-relations-list {
  margin: 0;
  padding-left: 18px;
}

body[data-tool-id='sql-formatter'] .sql-relations-empty {
  color: var(--text-muted);
}

html[data-theme='dark'] body[data-tool-id='schema-inspector'] .tree-type {
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
}

/* ---------- Use-case pages ---------- */
.use-case-page .use-case-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.use-case-examples {
  display: grid;
  gap: 12px;
}

.use-case-example-body {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.use-case-example-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.use-case-example-mode {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}

.use-case-example-block {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: var(--bg-elevated);
}

.use-case-example-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.use-case-example-block pre {
  margin: 0;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.use-case-faq-item + .use-case-faq-item {
  margin-top: 10px;
}


/* -----------------------------
 * Header badge (Local-only)
 * ----------------------------- */
.sd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  margin-left: 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

/* -----------------------------
 * First-run toast
 * ----------------------------- */
.ddt-toast-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

body.ddt-cookie-visible .ddt-toast-container {
  bottom: calc(16px + var(--ddt-cookie-banner-height, 80px));
}

.ddt-toast {
  position: relative;
  width: min(380px, calc(100vw - 32px));
  padding: 12px 12px 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  pointer-events: auto;
}

.ddt-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ddt-toast.is-exiting {
  opacity: 0;
  transform: translateY(8px);
}

.ddt-toast--success {
  border-color: var(--success-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--success-soft) 100%, transparent), transparent 70%), var(--bg-elevated);
}

.ddt-toast--warn {
  border-color: var(--warning-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--warning-soft) 100%, transparent), transparent 70%), var(--bg-elevated);
}

.ddt-toast-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.ddt-toast-body {
  display: grid;
  gap: 6px;
  color: var(--text-main);
  margin-bottom: 10px;
}

.ddt-toast-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.ddt-toast .icon-button {
  padding: 8px 10px;
}

.ddt-toast--mini {
  width: auto;
  padding: 8px 10px;
}

.ddt-toast--mini .ddt-toast-body {
  margin-bottom: 0;
  font-size: 12px;
}

/* UX-001: Copy confirmation feedback */
.icon-button.is-copied {
  color: var(--success);
}
.icon-button.is-copied::after {
  content: " \2713";
}

/* UX-001: Screen-reader-only live region */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   DDT Action Button System
   Adds icons + semantic colour tints to all [data-action] buttons.
   Icons use CSS mask-image so they follow currentColor in both
   dark and light themes. No extra dependencies.
   ================================================================ */

/* ── Icon base ── */
.icon-button[data-action] {
  gap: 5px;
}
.icon-button[data-action]::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* ── Icon definitions ── */

/* copy — two overlapping rectangles */
.icon-button[data-action='copy']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");
}

/* download — arrow into tray */
.icon-button[data-action='download']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
}

/* send / open-in-tool — external link arrow */
.icon-button[data-action='send']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>");
}

/* paste — clipboard */
.icon-button[data-action='paste']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1'/></svg>");
}

/* load-file — folded-corner file */
.icon-button[data-action='load']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>");
}

/* sort — bidirectional arrows */
.icon-button[data-action='sort']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 16 4 4 4-4'/><path d='M7 20V4'/><path d='m21 8-4-4-4 4'/><path d='M17 4v16'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 16 4 4 4-4'/><path d='M7 20V4'/><path d='m21 8-4-4-4 4'/><path d='M17 4v16'/></svg>");
}

/* normalize — sliders / adjustments */
.icon-button[data-action='normalize']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='1' y1='14' x2='7' y2='14'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='17' y1='16' x2='23' y2='16'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='1' y1='14' x2='7' y2='14'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='17' y1='16' x2='23' y2='16'/></svg>");
}

/* dedupe / remove duplicates — funnel filter */
.icon-button[data-action='dedupe']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>");
}

/* find duplicates — magnifying glass */
.icon-button[data-action='duplicates']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}

/* view toggle — eye */
.icon-button[data-action='view']::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
}

/* ── Colour variants by action type ── */

/* download — blue tint: "saving" feels like a deliberate, primary action */
.icon-button[data-action='download'] {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.28);
  color: #1d4ed8;
}
.icon-button[data-action='download']:hover {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.45);
}
body[data-theme='dark'] .icon-button[data-action='download'] {
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.3);
}
body[data-theme='dark'] .icon-button[data-action='download']:hover {
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(37, 99, 235, 0.5);
}

/* send / open-in-tool — violet tint: cross-tool integration feels special */
.icon-button[data-action='send'] {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.28);
  color: #6d28d9;
}
.icon-button[data-action='send']:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.45);
}
body[data-theme='dark'] .icon-button[data-action='send'] {
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.3);
}
body[data-theme='dark'] .icon-button[data-action='send']:hover {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.5);
}

/* ============================================================
   DDT Share — Inline trigger button, hint text & tooltip
   ============================================================ */

/* The Share Results button — teal accent, rightmost in its row */
.ddt-share-trigger-btn {
  position: relative;
  background: rgba(13, 148, 136, 0.08) !important;
  border-color: #0d9488 !important;
  color: #0d9488 !important;
  font-weight: 600;
  white-space: nowrap;
}

.ddt-share-trigger-btn:hover {
  background: rgba(13, 148, 136, 0.16) !important;
  border-color: #0f766e !important;
  color: #0f766e !important;
}

body[data-theme='dark'] .ddt-share-trigger-btn,
html[data-theme='dark'] .ddt-share-trigger-btn {
  background: rgba(45, 212, 191, 0.1) !important;
  border-color: #2dd4bf !important;
  color: #2dd4bf !important;
}

body[data-theme='dark'] .ddt-share-trigger-btn:hover,
html[data-theme='dark'] .ddt-share-trigger-btn:hover {
  background: rgba(45, 212, 191, 0.18) !important;
  border-color: #5eead4 !important;
  color: #5eead4 !important;
}

/* CSS tooltip driven by data-ddt-tooltip attribute */
.ddt-share-trigger-btn[data-ddt-tooltip] {
  overflow: visible;
}

.ddt-share-trigger-btn[data-ddt-tooltip]::after {
  content: attr(data-ddt-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--bg-panel, #1e293b);
  color: var(--text-main, #f1f5f9);
  border: 1px solid var(--border-soft, #334155);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-line;
  text-align: left;
  font-weight: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateX(-50%) translateY(4px);
  z-index: 500;
}

.ddt-share-trigger-btn[data-ddt-tooltip]:hover::after,
.ddt-share-trigger-btn[data-ddt-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Arrow below tooltip bubble */
.ddt-share-trigger-btn[data-ddt-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-soft, #334155);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 501;
}

.ddt-share-trigger-btn[data-ddt-tooltip]:hover::before,
.ddt-share-trigger-btn[data-ddt-tooltip]:focus-visible::before {
  opacity: 1;
}

/* Hint text line below the action bar */
.ddt-share-hint {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
}

.ddt-share-hint-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.ddt-share-hint strong {
  color: var(--text-main, #0f172a);
}

body[data-theme='dark'] .ddt-share-hint strong,
html[data-theme='dark'] .ddt-share-hint strong {
  color: var(--text-main, #f1f5f9);
}

/* Fallback row when no standard action bar is found */
.ddt-share-fallback-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: var(--radius-lg, 10px);
  background: var(--bg-elevated, #f8fafc);
  border: 1px solid var(--border-soft, #e2e8f0);
}

.ddt-share-fallback-row .ddt-share-hint {
  margin: 0;
  flex: 1;
  min-width: 200px;
}

/* ============================================================
   DDT Share Modal
   ============================================================ */

.ddt-share-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.ddt-share-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.ddt-share-modal {
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-soft, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 560px;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
}

.ddt-share-modal-overlay.is-visible .ddt-share-modal {
  transform: translateY(0) scale(1);
}

.ddt-share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-soft, #e2e8f0);
}

.ddt-share-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main, #0f172a);
  margin: 0;
}

.ddt-share-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #64748b);
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}

.ddt-share-modal-close:hover {
  background: var(--bg-elevated, #f1f5f9);
  color: var(--text-main, #0f172a);
}

.ddt-share-modal-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ddt-share-warning-row {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg-elevated, #f8fafc);
  border: 1px solid var(--border-soft, #e2e8f0);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-main, #0f172a);
}

.ddt-share-warning-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* URL row */
.ddt-share-url-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ddt-share-url-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border-soft, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-elevated, #f8fafc);
  color: var(--text-muted, #64748b);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ddt-share-url-input:focus {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 1px;
  color: var(--text-main, #0f172a);
}

/* Meta line */
.ddt-share-meta {
  color: var(--text-muted, #64748b);
  font-size: 12px;
}

/* Loading state */
.ddt-share-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--text-muted, #64748b);
  font-size: 13px;
}

.ddt-share-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-soft, #e2e8f0);
  border-top-color: var(--primary, #2563eb);
  border-radius: 50%;
  animation: ddt-share-spin 0.65s linear infinite;
  flex-shrink: 0;
}

@keyframes ddt-share-spin {
  to { transform: rotate(360deg); }
}

/* Error state */
.ddt-share-error-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.ddt-share-error-icon {
  font-size: 28px;
  text-align: center;
}

.ddt-share-error-content p {
  margin: 0;
  font-size: 13px;
  color: var(--text-main, #0f172a);
  line-height: 1.55;
  text-align: center;
}

.ddt-share-error-tips {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}

/* Dark mode overrides */
body[data-theme='dark'] .ddt-share-modal,
html[data-theme='dark'] .ddt-share-modal {
  background: var(--bg-panel, #1e293b);
  border-color: var(--border-soft, #334155);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}

body[data-theme='dark'] .ddt-share-modal-title,
html[data-theme='dark'] .ddt-share-modal-title {
  color: var(--text-main, #f1f5f9);
}

body[data-theme='dark'] .ddt-share-warning-row,
html[data-theme='dark'] .ddt-share-warning-row {
  background: var(--bg-elevated, #0f172a);
  border-color: var(--border-soft, #334155);
  color: var(--text-main, #f1f5f9);
}

body[data-theme='dark'] .ddt-share-url-input,
html[data-theme='dark'] .ddt-share-url-input {
  background: var(--bg-elevated, #0f172a);
  border-color: var(--border-soft, #334155);
  color: var(--text-muted, #94a3b8);
}

body[data-theme='dark'] .ddt-share-url-input:focus,
html[data-theme='dark'] .ddt-share-url-input:focus {
  color: var(--text-main, #f1f5f9);
}

body[data-theme='dark'] .ddt-share-error-content p,
html[data-theme='dark'] .ddt-share-error-content p {
  color: var(--text-main, #f1f5f9);
}

body[data-theme='dark'] .ddt-share-modal-close:hover,
html[data-theme='dark'] .ddt-share-modal-close:hover {
  background: var(--bg-elevated, #0f172a);
  color: var(--text-main, #f1f5f9);
}

/* =========================================================
   Color & UX Improvements — Button visibility & action zones
   ========================================================= */

/* 1. Secondary buttons — blue-tinted background + clearly visible border so
      they unmistakably read as buttons, not just surface elements.
      Overrides both the original rules and the modernization layer !important. */
button.secondary,
button.secondary.small-btn,
.secondary-btn,
.btn-secondary {
  background: color-mix(in srgb, var(--primary-soft) 60%, var(--bg-elevated)) !important;
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border-soft)) !important;
  color: color-mix(in srgb, var(--primary) 30%, var(--text-main)) !important;
}

button.secondary:hover,
button.secondary.small-btn:hover,
.secondary-btn:hover,
.btn-secondary:hover {
  background: color-mix(in srgb, var(--primary-soft) 90%, var(--bg-elevated)) !important;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-muted)) !important;
  color: var(--primary) !important;
}

/* 2. Icon buttons (copy / download / etc.) — blue-tinted border + icon color at
      rest so they're visually distinct from plain text. Exclude danger/pin/fav
      buttons which already have correct semantic colors. */
.icon-button:not(.ddt-clear-btn):not(.ddt-pin-btn):not(.ddt-fav-btn):not(.ddt-unfav-btn) {
  background: color-mix(in srgb, var(--primary-soft) 40%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border-soft));
  color: color-mix(in srgb, var(--primary) 55%, var(--text-muted));
}

.icon-button:not(.ddt-clear-btn):not(.ddt-pin-btn):not(.ddt-fav-btn):not(.ddt-unfav-btn):hover {
  background: color-mix(in srgb, var(--primary-soft) 80%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border-muted));
  color: var(--primary);
}

/* 3. Action bar — 3px top accent strip makes the toolbar feel like a dedicated
      control surface. Keep the rest of the border from the modernization layer. */
.ddt-action-bar,
.ddt-actionbar {
  border-top: 3px solid color-mix(in srgb, var(--primary) 60%, transparent) !important;
}

/* 4. Primary button — bolder shadow on hover reinforces the "main action" role. */
button.primary:hover,
.primary-btn:hover,
.btn-primary:hover {
  box-shadow: 0 16px 32px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

/* 5. Primary button — slightly heavier font weight to visually separate it from
      the sea of secondary buttons at a glance. */
button.primary,
.primary-btn,
.btn-primary {
  font-weight: 700 !important;
}

/* 6. Compare / run CTA — extra shadow at rest pulls the eye to the most
      important action on diff/compare tool pages. */
.compare-btn.primary,
button.compare-btn.primary {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 30%, transparent),
              0 2px 6px  color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

/* 7. Sort toggle inactive state — match secondary button treatment so inactive
      sort options look interactive, not just disabled text labels. */
.sort-toggle-btn:not(.active) {
  background: color-mix(in srgb, var(--primary-soft) 40%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border-soft));
  color: color-mix(in srgb, var(--primary) 30%, var(--text-muted));
}

/* Dark theme — increase primary mix percentages to compensate for dark surfaces
   swallowing color more aggressively. */
html[data-theme='dark'] button.secondary,
html[data-theme='dark'] button.secondary.small-btn,
html[data-theme='dark'] .secondary-btn,
html[data-theme='dark'] .btn-secondary {
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--bg-elevated)) !important;
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border-soft)) !important;
  color: color-mix(in srgb, var(--primary) 40%, var(--text-main)) !important;
}

html[data-theme='dark'] button.secondary:hover,
html[data-theme='dark'] button.secondary.small-btn:hover,
html[data-theme='dark'] .secondary-btn:hover,
html[data-theme='dark'] .btn-secondary:hover {
  background: color-mix(in srgb, var(--primary-soft) 110%, var(--bg-elevated)) !important;
  border-color: color-mix(in srgb, var(--primary) 65%, var(--border-muted)) !important;
  color: var(--primary) !important;
}

html[data-theme='dark'] .icon-button:not(.ddt-clear-btn):not(.ddt-pin-btn):not(.ddt-fav-btn):not(.ddt-unfav-btn) {
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-soft));
  color: color-mix(in srgb, var(--primary) 65%, var(--text-muted));
}

html[data-theme='dark'] .icon-button:not(.ddt-clear-btn):not(.ddt-pin-btn):not(.ddt-fav-btn):not(.ddt-unfav-btn):hover {
  background: color-mix(in srgb, var(--primary-soft) 100%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border-muted));
  color: var(--primary);
}

.sd-header-right .sd-header-actions > a.icon-button[href="/"],
.sd-header-right .sd-header-actions > a.icon-button[href="/index.html"] {
  border-color: color-mix(in srgb, #245ee8 30%, var(--border-soft)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #245ee8 12%, transparent), transparent 70%),
    var(--bg-elevated) !important;
  color: color-mix(in srgb, #245ee8 84%, var(--text-main)) !important;
}

.sd-header-right .sd-header-actions > .ddt-workflows-link {
  border-color: color-mix(in srgb, #7657d8 34%, var(--border-soft)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #7657d8 13%, transparent), transparent 70%),
    var(--bg-elevated) !important;
  color: color-mix(in srgb, #7657d8 82%, var(--text-main)) !important;
}

.sd-header-right .sd-header-actions > .ddt-contact-link {
  border-color: color-mix(in srgb, #0d9488 34%, var(--border-soft)) !important;
  border-left-color: color-mix(in srgb, #0d9488 45%, var(--border-soft)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #0d9488 13%, transparent), transparent 70%),
    var(--bg-elevated) !important;
  color: color-mix(in srgb, #047857 84%, var(--text-main)) !important;
}

.sd-header-right .sd-header-actions > .ddt-bookmark-button {
  border-color: color-mix(in srgb, #c76a14 38%, var(--border-soft)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, #c76a14 16%, transparent), transparent 70%),
    var(--bg-elevated) !important;
  color: color-mix(in srgb, #b45309 84%, var(--text-main)) !important;
}

/* ==========================================================================
   Vertical density pass (global)
   Targeted spacing reductions to reclaim above-the-fold real estate without
   touching HTML or JS. Ordered by area.
   ========================================================================== */

/* --- Header: tighter padding while keeping the site tagline consistent --- */
.sd-header {
  padding: 7px 12px 9px;
  margin: 0 -6px 4px;
}
/* On tool pages the "Press Ctrl+K" hint is the first thing to wrap — hide
   below laptop widths where it just causes the nav to grow a second row. */
@media (max-width: 1100px) {
  body[data-tool-id] .sd-header-right .small {
    display: none;
  }
}

/* --- Section separator + results title: no more stacked 18px margins --- */
.section-separator {
  margin-top: 12px;
  padding-top: 8px;
}
.section-separator > .results-title:first-child,
.section-separator > .results-title {
  margin-top: 4px;
  margin-bottom: 6px;
}

/* --- Typography: trim h1 and subtitle bottom margins --- */
h1 {
  margin: 0 0 4px;
}
.subtitle {
  margin: 0 0 10px;
}

/* --- Cards: tighter vertical padding and header gap --- */
.card {
  padding: 10px 14px;
}
.card-header {
  margin-bottom: 4px;
}
.list-header {
  margin-bottom: 4px;
}

/* --- Lists: trim top margin on default bulleted lists --- */
ul {
  margin: 4px 0 0;
}

/* --- Empty platform slots: don't reserve whitespace when unused --- */
.ddt-platform-slots:empty,
.ddt-platform-slots > div[data-slot]:empty {
  display: none;
}

/* --- Tool help lists: tighter leading --- */
.tool-help {
  margin-top: 4px !important;
}

/* --- Use-case link chip card: compact top margin --- */
.card.use-case-links {
  padding: 8px 12px;
}
.card.use-case-links .note {
  margin-top: 4px;
}

/* ==========================================================================
   2026 UX Theme Refinement
   Direction: softer workbench surfaces, calmer contrast, transparent editors.
   ========================================================================== */

:root {
  --bg: #f4f7fb;
  --bg-elevated: rgba(255, 255, 255, 0.84);
  --bg-panel: rgba(250, 252, 255, 0.9);
  --bg-subtle: rgba(238, 243, 249, 0.72);
  --surface-tint: rgba(36, 94, 232, 0.045);

  --text-main: #152033;
  --text-muted: #607086;

  --border-soft: rgba(21, 33, 52, 0.11);
  --border-muted: rgba(21, 33, 52, 0.17);
  --border-strong: rgba(36, 94, 232, 0.2);

  --primary: #245ee8;
  --primary-hover: #1748b8;
  --primary-soft: rgba(36, 94, 232, 0.1);
  --primary-glow: rgba(36, 94, 232, 0.2);

  --accent: #0d9488;
  --accent-hover: #0f766e;
  --accent-soft: rgba(13, 148, 136, 0.1);
  --accent-soft-hover: rgba(13, 148, 136, 0.17);

  --success: #12805c;
  --success-soft: rgba(18, 128, 92, 0.12);
  --success-border: rgba(18, 128, 92, 0.24);
  --warning: #c76a14;
  --warning-soft: rgba(199, 106, 20, 0.12);
  --warning-border: rgba(199, 106, 20, 0.24);
  --danger: #c23b4b;
  --danger-soft: rgba(194, 59, 75, 0.12);
  --danger-border: rgba(194, 59, 75, 0.24);
  --info: #116fae;
  --info-soft: rgba(17, 111, 174, 0.12);
  --info-border: rgba(17, 111, 174, 0.24);

  --field-bg: transparent;
  --field-border: rgba(21, 33, 52, 0.16);
  --field-border-hover: rgba(36, 94, 232, 0.3);
  --field-focus-border: rgba(36, 94, 232, 0.48);
  --field-shadow: none;
  --output-bg: transparent;
  --output-border: rgba(21, 33, 52, 0.16);
  --ring: rgba(36, 94, 232, 0.2);

  --shadow-soft: 0 20px 56px rgba(21, 33, 52, 0.1);
  --shadow-card: 0 14px 38px rgba(21, 33, 52, 0.08);
  --shadow-float: 0 30px 88px rgba(21, 33, 52, 0.18);

  --color-bg-page: #f4f7fb;
  --color-bg-surface: rgba(255, 255, 255, 0.84);
  --color-bg-raised: rgba(255, 255, 255, 0.92);
  --color-bg-subtle: rgba(238, 243, 249, 0.74);
  --color-bg-overlay: rgba(21, 33, 52, 0.05);
  --color-text-primary: #152033;
  --color-text-secondary: #46586f;
  --color-text-muted: #6b7d92;
  --color-text-inverse: #fbfcfe;
  --color-border-subtle: rgba(21, 33, 52, 0.11);
  --color-border-medium: rgba(21, 33, 52, 0.18);
  --color-border-strong: rgba(21, 33, 52, 0.27);
  --color-accent: #245ee8;
  --color-accent-hover: #1748b8;
  --color-accent-light: rgba(36, 94, 232, 0.11);
  --color-accent-subtle: rgba(36, 94, 232, 0.17);
  --color-accent-text: #193f9f;
  --color-success: #12805c;
  --color-success-bg: rgba(18, 128, 92, 0.12);
  --color-success-border: rgba(18, 128, 92, 0.24);
  --color-warning: #c76a14;
  --color-warning-bg: rgba(199, 106, 20, 0.12);
  --color-warning-border: rgba(199, 106, 20, 0.24);
  --color-error: #c23b4b;
  --color-error-bg: rgba(194, 59, 75, 0.12);
  --color-error-border: rgba(194, 59, 75, 0.24);
  --color-info: #116fae;
  --color-info-bg: rgba(17, 111, 174, 0.12);
  --color-info-border: rgba(17, 111, 174, 0.24);

  --font-sans: "Aptos", "Segoe UI Variable Text", "Segoe UI", "Inter", system-ui, sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

html[data-theme='dark'] {
  --bg: #10131a;
  --bg-elevated: rgba(24, 29, 39, 0.86);
  --bg-panel: rgba(19, 24, 34, 0.94);
  --bg-subtle: rgba(33, 39, 52, 0.68);
  --surface-tint: rgba(138, 180, 255, 0.08);

  --text-main: #edf2f8;
  --text-muted: #a1afc0;

  --border-soft: rgba(190, 203, 221, 0.14);
  --border-muted: rgba(190, 203, 221, 0.22);
  --border-strong: rgba(138, 180, 255, 0.22);

  --primary: #8ab4ff;
  --primary-hover: #b6d0ff;
  --primary-soft: rgba(138, 180, 255, 0.14);
  --primary-glow: rgba(138, 180, 255, 0.25);

  --accent: #58d4c0;
  --accent-hover: #8be4d7;
  --accent-soft: rgba(88, 212, 192, 0.14);
  --accent-soft-hover: rgba(88, 212, 192, 0.21);

  --success: #51d6a2;
  --success-soft: rgba(81, 214, 162, 0.14);
  --success-border: rgba(81, 214, 162, 0.22);
  --warning: #f4b860;
  --warning-soft: rgba(244, 184, 96, 0.14);
  --warning-border: rgba(244, 184, 96, 0.23);
  --danger: #ff8b98;
  --danger-soft: rgba(255, 139, 152, 0.14);
  --danger-border: rgba(255, 139, 152, 0.24);
  --info: #7fd0ff;
  --info-soft: rgba(127, 208, 255, 0.14);
  --info-border: rgba(127, 208, 255, 0.24);

  --field-bg: transparent;
  --field-border: rgba(190, 203, 221, 0.18);
  --field-border-hover: rgba(138, 180, 255, 0.32);
  --field-focus-border: rgba(138, 180, 255, 0.52);
  --field-shadow: none;
  --output-bg: transparent;
  --output-border: rgba(190, 203, 221, 0.18);
  --ring: rgba(138, 180, 255, 0.23);

  --shadow-soft: 0 24px 64px rgba(0, 0, 0, 0.34);
  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.24);
  --shadow-float: 0 34px 90px rgba(0, 0, 0, 0.42);

  --color-bg-page: #10131a;
  --color-bg-surface: rgba(24, 29, 39, 0.86);
  --color-bg-raised: rgba(29, 35, 47, 0.92);
  --color-bg-subtle: rgba(33, 39, 52, 0.68);
  --color-bg-overlay: rgba(255, 255, 255, 0.04);
  --color-text-primary: #edf2f8;
  --color-text-secondary: #c0cad8;
  --color-text-muted: #9baabd;
  --color-text-inverse: #09101a;
  --color-border-subtle: rgba(190, 203, 221, 0.14);
  --color-border-medium: rgba(190, 203, 221, 0.22);
  --color-border-strong: rgba(190, 203, 221, 0.34);
  --color-accent: #8ab4ff;
  --color-accent-hover: #b6d0ff;
  --color-accent-light: rgba(138, 180, 255, 0.16);
  --color-accent-subtle: rgba(138, 180, 255, 0.21);
  --color-accent-text: #e4eeff;
  --color-success: #51d6a2;
  --color-success-bg: rgba(81, 214, 162, 0.14);
  --color-success-border: rgba(81, 214, 162, 0.22);
  --color-warning: #f4b860;
  --color-warning-bg: rgba(244, 184, 96, 0.14);
  --color-warning-border: rgba(244, 184, 96, 0.23);
  --color-error: #ff8b98;
  --color-error-bg: rgba(255, 139, 152, 0.14);
  --color-error-border: rgba(255, 139, 152, 0.24);
  --color-info: #7fd0ff;
  --color-info-bg: rgba(127, 208, 255, 0.14);
  --color-info-border: rgba(127, 208, 255, 0.24);
}

body {
  font-family: var(--font-sans);
  background:
    radial-gradient(1100px 520px at -5% -10%, rgba(36, 94, 232, 0.12), transparent 62%),
    radial-gradient(880px 420px at 102% 0%, rgba(13, 148, 136, 0.11), transparent 58%),
    radial-gradient(760px 420px at 50% 108%, rgba(199, 106, 20, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 24%),
    var(--bg);
}

html[data-theme='dark'] body {
  background:
    radial-gradient(1100px 520px at -5% -10%, rgba(138, 180, 255, 0.16), transparent 62%),
    radial-gradient(880px 420px at 102% 0%, rgba(88, 212, 192, 0.11), transparent 58%),
    radial-gradient(760px 420px at 50% 108%, rgba(244, 184, 96, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 24%),
    var(--bg);
}

body,
button,
input,
select {
  font-family: var(--font-sans);
}

textarea,
.text-input,
.output-textarea,
.lined-textarea-input,
.command-palette-input,
.ddt-share-url-input,
code,
pre,
kbd {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
}

textarea,
.text-input,
.output-textarea,
.tool-search-input,
.list-name-input,
.command-palette-input,
.lined-textarea-input,
.ddt-share-url-input,
select,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not([type='reset']):not([type='file']) {
  background: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  border-color: var(--field-border) !important;
  color: var(--text-main);
}

html[data-theme='dark'] textarea,
html[data-theme='dark'] .text-input,
html[data-theme='dark'] .output-textarea,
html[data-theme='dark'] .tool-search-input,
html[data-theme='dark'] .list-name-input,
html[data-theme='dark'] .command-palette-input,
html[data-theme='dark'] .lined-textarea-input,
html[data-theme='dark'] .ddt-share-url-input,
html[data-theme='dark'] select,
html[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not([type='reset']):not([type='file']) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Native <select> popup contrast.
   The control itself is forced transparent above, so without explicit option
   colors the browser renders the open option list on its default (white) popup
   while options inherit the light --text-main color — light-on-light, invisible
   in dark mode. Give options a solid, theme-matched background + contrasting
   text so the dropdown list is always readable. Solid hex (not the translucent
   --bg-elevated token) because native option backgrounds must be opaque. */
select option,
select optgroup {
  background-color: #ffffff;
  color: #102033;
}
html[data-theme='dark'] select option,
html[data-theme='dark'] select optgroup {
  background-color: #0c1828;
  color: #e8edf5;
}

textarea:hover,
.text-input:hover,
.output-textarea:hover,
.tool-search-input:hover,
.list-name-input:hover,
.command-palette-input:hover,
.lined-textarea-input:hover,
.ddt-share-url-input:hover,
select:hover,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not([type='reset']):not([type='file']):hover {
  border-color: var(--field-border-hover) !important;
}

textarea:focus,
.text-input:focus,
.output-textarea:focus,
.tool-search-input:focus,
.list-name-input:focus,
.command-palette-input:focus,
.lined-textarea-input:focus,
.ddt-share-url-input:focus,
select:focus,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not([type='reset']):not([type='file']):focus {
  border-color: var(--field-focus-border) !important;
  box-shadow: 0 0 0 3px var(--ring), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.monospace-output,
.lined-textarea,
.lined-textarea textarea {
  background: transparent !important;
}

.sd-header,
.card,
.tool-card,
.ddt-actionbar,
.ddt-history-item,
.ddt-preset-item,
.ddt-share-modal,
.ddt-share-warning-row,
.ddt-tool-example {
  background: color-mix(in srgb, var(--bg-panel) 86%, transparent);
  border-color: color-mix(in srgb, var(--border-soft) 92%, rgba(255, 255, 255, 0.22));
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
}

.sd-header {
  box-shadow: 0 14px 34px rgba(25, 37, 54, 0.08);
  backdrop-filter: blur(18px);
}

.card,
.tool-card {
  border-radius: 18px;
}

.tool-card:hover,
.card:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border-soft));
  box-shadow: 0 18px 44px rgba(25, 37, 54, 0.1);
}

.card-header,
.panel-header {
  background: color-mix(in srgb, var(--bg-subtle) 92%, transparent);
}

.tool-chip,
.tool-filter-tab,
.ddt-tool-category,
.ddt-tool-tag {
  background: color-mix(in srgb, var(--bg-subtle) 82%, transparent);
  border-color: color-mix(in srgb, var(--border-soft) 96%, transparent);
}

.tool-chip:hover,
.tool-filter-tab:hover {
  background: color-mix(in srgb, var(--primary-soft) 72%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border-soft));
}

button.primary,
.primary-btn,
.btn-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, white 12%), var(--primary-hover)) !important;
  border-color: color-mix(in srgb, var(--primary) 75%, black 6%) !important;
  box-shadow: 0 16px 28px color-mix(in srgb, var(--primary) 28%, transparent) !important;
}

button.primary:hover,
.primary-btn:hover,
.btn-primary:hover {
  box-shadow: 0 20px 32px color-mix(in srgb, var(--primary) 34%, transparent) !important;
}

/* Contrast fix: in dark mode --primary is a light periwinkle (#8ab4ff), so any
   element filled with --primary and labelled in white (the primary CTAs plus the
   active filter/sort/tab/chip states and the workflow-panel primary buttons)
   renders pale-on-pale and is barely legible. Use dark ink in dark mode. Light
   mode is untouched — there --primary is a strong blue (#245ee8) where white reads
   well. (Root cause is white text on a light fill; if new --primary-filled buttons
   are added, add them here or switch them to a theme-aware on-primary color.) */
html[data-theme='dark'] button.primary,
html[data-theme='dark'] .primary-btn,
html[data-theme='dark'] .btn-primary,
html[data-theme='dark'] .tool-filter-tab.is-active,
html[data-theme='dark'] .sort-toggle-btn.active,
html[data-theme='dark'] .mbwf-btn-primary,
html[data-theme='dark'] .ddt-wf-btn-primary,
html[data-theme='dark'] .wb-view-tab[aria-pressed='true'],
html[data-theme='dark'] .wb-btn-primary,
html[data-theme='dark'] .wg-btn-primary,
html[data-theme='dark'] .wg-category-chip[aria-pressed='true'],
html[data-theme='dark'] .wfio-btn-primary {
  color: #0b1020 !important;
}

h1,
h2,
h3,
.sd-logo-text,
.panel-header-title {
  letter-spacing: -0.02em;
}

.subtitle,
.note,
.tool-card-subtitle,
.ddt-actionbar-meta,
.ddt-help-popup,
.magic-suggestion-meta {
  color: var(--text-muted);
}

/* ==========================================================================
   UX audit follow-ups (P0/P1)
   - Remove "Primary action" eyebrow label
   - De-emphasize "Continue in Workflow" so it doesn't compete with tool CTA
   - Normalize nav pill styling (drop underlines on header links)
   - Cleaner theme-toggle pill
   - Mobile header: single row + drawer-friendly
   - Tools catalog toolbar stacks sooner so chips aren't clipped
   ========================================================================== */

/* P0-3: drop the uppercase "Primary action" eyebrow text next to the
   proxy primary button. Keeps the button visible; hides the debug-ish label. */
body[data-tool-id] .ddt-tool-primary-note {
  display: none !important;
}

/* P0-2: demote the workflow CTA to secondary styling. It kept a bright primary
   gradient that competed with the tool's actual primary button. Styled here
   instead of changing HTML classes across 17 tool files. */
.ddt-workflow-cta-btn,
button.ddt-workflow-cta-btn,
button.primary.ddt-workflow-cta-btn {
  background: var(--bg-elevated) !important;
  background-image: none !important;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border-soft)) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.ddt-workflow-cta-btn:hover,
button.primary.ddt-workflow-cta-btn:hover {
  background: var(--primary-soft) !important;
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border-soft)) !important;
  box-shadow: none !important;
}
.ddt-workflow-cta-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
html[data-theme='dark'] .ddt-workflow-cta-btn,
html[data-theme='dark'] button.primary.ddt-workflow-cta-btn {
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent) !important;
  color: color-mix(in srgb, var(--primary) 72%, white) !important;
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border-soft)) !important;
}

/* P1-1: normalize header nav chips. Some browsers were inheriting link
   underlines for the anchor-style .icon-button items. */
.sd-header-right a.icon-button,
.sd-header-right a.icon-button:hover,
.sd-header-right a.icon-button:focus,
.sd-header-right a.icon-button:visited {
  text-decoration: none;
}

/* P1-2: theme toggle — ensure it matches the other header pills and hides the
   emoji fallback when the icon swap runs. */
.theme-toggle {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
}
.theme-toggle .theme-toggle-icon {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle .theme-toggle-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* P0-1: mobile header. Below 900px, collapse long nav into the layout drawer.
   Logo + search + theme toggle stay. Drawer access is via the topnav
   hamburger (already present in .ddt-topnav on tool pages) and via the
   existing Workflows link. */
@media (max-width: 900px) {
  .sd-header {
    padding: 8px 10px 10px;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .sd-header-left {
    flex: 1 1 auto;
    min-width: 0;
  }
  .sd-header .sd-logo-text {
    font-size: 16px;
    white-space: nowrap;
  }
  .sd-header-tagline {
    display: none;
  }
  .sd-header-right {
    flex-wrap: nowrap;
    gap: 6px;
  }
  /* On the tool pages we already inject a search into header-right; keep
     that, plus only Workflows + theme toggle. Hide the text-heavy nav
     pills; users reach them via the topnav drawer and footer. */
  .sd-header-right > a.icon-button,
  .sd-header-right > button.icon-button:not(#ddtPipelineToggle):not(#themeToggle):not(#ddtFocusToggle):not(.ddt-bookmark-button):not(.ddt-topnav-hamburger),
  .sd-header-right .sd-header-actions > a.icon-button:not(.ddt-workflows-link):not(.ddt-challenges-link):not(.ddt-contact-link):not(.ddt-bookmark-button),
  .sd-header-right .sd-header-actions > button.icon-button:not(#ddtPipelineToggle):not(#themeToggle):not(#ddtFocusToggle):not(.ddt-bookmark-button):not(.ddt-topnav-hamburger) {
    display: none;
  }
  /* Show search input full-width under logo when present */
  .sd-header-right .sd-header-search {
    order: 99;
    flex-basis: 100%;
  }
  .sd-header-right .sd-header-search .tool-search-input {
    width: 100%;
  }
}

/* Also trim the search placeholder hint on narrower viewports — the Ctrl+K
   suffix caused clipping on phones. Pure-CSS can't rewrite placeholder text,
   so we compact by shrinking input size + letting the input's own ellipsis
   truncate, AND we prepare a class the JS can add to swap placeholder text. */
@media (max-width: 560px) {
  .sd-header-search .tool-search-input {
    font-size: 13px;
  }
}

/* P0-4: Tools catalog toolbar — stack chips earlier so none get clipped.
   The old breakpoint was ~880px; at 1024px the row was already cramped. */
@media (max-width: 1180px) {
  .ddt-catalog-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ddt-catalog-toolbar .ddt-filter-row {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }
}

/* Subtle visual cue that chips are scrollable when they overflow */
.ddt-filter-row {
  scrollbar-width: thin;
}
.ddt-filter-row::-webkit-scrollbar { height: 6px; }
.ddt-filter-row::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border-muted) 60%, transparent);
  border-radius: 999px;
}

/* P1-5: consistent "Runs locally" badge on every tool page. Injected into
   the subtitle row by JS; styled here. */
.ddt-privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--success-soft, #d1fae5) 72%, transparent);
  color: var(--success, #047857);
  border: 1px solid color-mix(in srgb, var(--success, #059669) 28%, transparent);
  vertical-align: middle;
  line-height: 1.4;
  white-space: nowrap;
}
.ddt-privacy-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success, #059669);
  display: inline-block;
}
html[data-theme='dark'] .ddt-privacy-badge {
  background: color-mix(in srgb, var(--success, #059669) 22%, transparent);
  color: color-mix(in srgb, var(--success, #34d399) 85%, white);
}
@media (max-width: 560px) {
  .ddt-privacy-badge {
    margin-left: 0;
    margin-top: 6px;
  }
}

/* Popular workflows sidebar (right of Magic Box on the homepage) ---------- */
.ddt-popular-workflows-col {
  position: sticky;
  top: 80px;
  padding: 0;
}
.ddt-popular-workflows-panel {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--primary, #1d4ed8) 14%, var(--border-soft, rgba(0, 0, 0, 0.12)));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary, #1d4ed8) 10%, transparent), transparent 120px),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2, var(--bg-elevated, #fff)) 92%, white), var(--bg-elevated, #fff));
  box-shadow: var(--shadow-card, 0 10px 24px rgba(15, 23, 42, 0.08));
}
.ddt-popular-workflows-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  margin-bottom: 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary, #1d4ed8);
  background: color-mix(in srgb, var(--primary, #1d4ed8) 12%, transparent);
}
.ddt-popular-workflows-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}
.ddt-popular-workflows-head {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.ddt-popular-workflows-copy {
  margin: 0 0 11px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--text-muted, #64748b);
}
.ddt-popular-workflows-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ddt-popular-workflow-link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--primary, #1d4ed8) 8%, transparent), transparent 60%),
    var(--bg-elevated, #fff);
  border: 1px solid color-mix(in srgb, var(--primary, #1d4ed8) 12%, var(--border-soft, rgba(0, 0, 0, 0.12)));
  padding: 12px 14px;
  color: var(--text-main, #0f172a);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  border-radius: 14px;
  line-height: 1.45;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease;
}
.ddt-popular-workflow-link::after {
  content: "\2192";
  font-size: 17px;
  line-height: 1;
  color: var(--primary, #1d4ed8);
  opacity: 0.72;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.ddt-popular-workflow-link:hover,
.ddt-popular-workflow-link:focus-visible {
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--primary, #1d4ed8) 14%, transparent), transparent 65%),
    var(--bg-elevated, #fff);
  border-color: color-mix(in srgb, var(--primary, #1d4ed8) 38%, transparent);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
  color: var(--text-main, #0f172a);
  transform: translateY(-2px);
  outline: none;
  text-decoration: none;
}
.ddt-popular-workflow-link:hover::after,
.ddt-popular-workflow-link:focus-visible::after {
  transform: translateX(3px);
  opacity: 1;
}
@media (max-width: 860px) {
  .ddt-popular-workflows-col {
    position: static;
  }
  .ddt-popular-workflows-panel {
    padding: 14px;
  }
  .ddt-popular-workflows-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
@media (max-width: 560px) {
  .ddt-popular-workflows-list {
    grid-template-columns: 1fr;
  }
}

/* Highlight pulse for a workflow card when triggered from the sidebar. */
.ddt-wf-showcase-card.is-highlighted {
  box-shadow: 0 0 0 3px var(--primary, #1d4ed8), var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
  transform: translateY(-2px);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Magic Box action buttons — Paste is the affirmative primary action,
   Clear is a destructive action rendered as a subtle/danger style so the two
   are distinguishable at a glance. */
.ddt-magic-clear-btn.secondary {
  color: var(--danger, #b91c1c);
  border-color: color-mix(in srgb, var(--danger, #b91c1c) 30%, transparent);
}
.ddt-magic-clear-btn.secondary:hover {
  background: color-mix(in srgb, var(--danger, #b91c1c) 10%, transparent);
  border-color: var(--danger, #b91c1c);
  color: var(--danger, #b91c1c);
}

/* Display-settings cluster (Focus + Theme) sits at the far right of the
   top-right header, visually separated from the navigation link buttons. */
.sd-header-right {
  gap: var(--space-3, 10px);
}
.sd-header-right:has(.sd-header-search) {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "search actions display";
}
.sd-header-right:has(.sd-header-search) .sd-header-search {
  grid-area: search;
  min-width: 0;
}
.sd-header-right:has(.sd-header-search) .sd-header-actions {
  grid-area: actions;
  justify-self: end;
  flex-wrap: nowrap;
  min-width: max-content;
}
.sd-header-right:has(.sd-header-search) .sd-header-display-settings,
.sd-header-right:has(.sd-header-search) > #themeToggle {
  grid-area: display;
  justify-self: end;
  margin-left: 0;
}
.sd-header-display-settings {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
}
@media (max-width: 1180px) {
  .sd-header-right:has(.sd-header-search) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "search search"
      "actions display";
  }
}
@media (max-width: 980px) {
  .sd-header-right:has(.sd-header-search) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "search search"
      "actions display";
  }
  .sd-header-right:has(.sd-header-search) .sd-header-actions {
    min-width: 0;
    flex-wrap: wrap;
  }
}
@media (max-width: 560px) {
  .sd-header-display-settings {
    margin-left: 2px;
    padding-left: 4px;
    border-left: 0;
  }
}
@media (max-width: 900px) {
  .sd-header-right:has(.sd-header-search) {
    display: flex;
    flex-wrap: wrap;
  }
  .sd-header-right:has(.sd-header-search) .sd-header-actions {
    order: 1;
    justify-self: auto;
    flex-wrap: nowrap;
  }
  .sd-header-right:has(.sd-header-search) .sd-header-display-settings,
  .sd-header-right:has(.sd-header-search) > #themeToggle {
    order: 2;
    justify-self: auto;
  }
  .sd-header-right:has(.sd-header-search) .sd-header-search {
    order: 99;
    flex-basis: 100%;
  }
}

/* Focus toggle — icon-only button, same footprint as the theme toggle so
   the two read as a matched pair of display settings. */
.ddt-focus-toggle.icon-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
  background: transparent;
  color: var(--color-text-secondary, var(--text-muted));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.ddt-focus-toggle.icon-button:hover {
  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.04));
  color: var(--color-text-primary, var(--text-main));
  border-color: var(--color-border-medium, rgba(0, 0, 0, 0.16));
}
.ddt-focus-toggle.icon-button.is-active {
  background: var(--primary-soft, rgba(29, 78, 216, 0.1));
  color: var(--primary, #1d4ed8);
  border-color: color-mix(in srgb, var(--primary, #1d4ed8) 40%, transparent);
}
.ddt-focus-toggle.icon-button svg {
  width: 18px;
  height: 18px;
}

/* Tool-page density and action consistency --------------------------------
   Keeps controls readable while reducing the repeated, oversized button
   footprint across the utility pages. */
body[data-tool-id] h1 {
  font-size: 20px;
}

body[data-tool-id] .subtitle {
  font-size: 12px;
  line-height: 1.45;
}

body[data-tool-id] .ddt-tool-intro,
body[data-tool-id] .ddt-start-card,
body[data-tool-id] .tip-row,
body[data-tool-id] .mini-help,
body[data-tool-id] .ddt-actionbar-trust,
body[data-tool-id] .ddt-actionbar-workflow-hint {
  display: none !important;
}

body[data-tool-id] .tool-page-header,
body[data-tool-id] .page-content > h1,
body[data-tool-id] .page-content > .subtitle {
  margin-bottom: 6px;
}

body[data-tool-id] .ddt-tool-utility-row {
  margin: 4px 0 8px;
}

body[data-tool-id] .ddt-tool-actions .ddt-tool-utility-row {
  margin: 0;
}

body[data-tool-id] .ddt-input-local-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0 0 6px;
}

body[data-tool-id] .ddt-input-upload-btn {
  white-space: nowrap;
}

body[data-tool-id] .card h3,
body[data-tool-id] .panel-header-title,
body[data-tool-id] .ddt-example-title {
  font-size: 12px;
}

body[data-tool-id] .small,
body[data-tool-id] .note,
body[data-tool-id] .ddt-help,
body[data-tool-id] .tool-help,
body[data-tool-id] .ddt-actionbar-meta,
body[data-tool-id] .ddt-actionbar-workflow-hint,
body[data-tool-id] .ddt-actionbar-trust,
body[data-tool-id] .ddt-editor-footer {
  font-size: 11px;
}

body[data-tool-id] button,
body[data-tool-id] .btn,
body[data-tool-id] .icon-button,
body[data-tool-id] .ddt-tab,
body[data-tool-id] .ddt-examples-tab {
  min-height: 30px;
  padding: 6px 10px;
  gap: 6px;
  font-size: 12px;
  line-height: 1.15;
}

body[data-tool-id] button.small-btn,
body[data-tool-id] .small-btn,
body[data-tool-id] .btn-sm,
body[data-tool-id] .card-header .icon-button,
body[data-tool-id] .panel-header-actions .icon-button,
body[data-tool-id] .ddt-example-actions button {
  min-height: 28px;
  padding: 5px 9px;
  font-size: 11px;
}

body[data-tool-id] .ddt-action-bar,
body[data-tool-id] .ddt-actionbar {
  gap: 6px;
  padding: 6px 8px;
}

body[data-tool-id] .ddt-actionbar-left,
body[data-tool-id] .ddt-actionbar-right,
body[data-tool-id] .ddt-actionbar-group,
body[data-tool-id] .ddt-example-actions,
body[data-tool-id] .ddt-examples-tabs {
  gap: 6px;
}

body[data-tool-id] input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']):not([type='reset']):not([type='file']),
body[data-tool-id] select,
body[data-tool-id] textarea,
body[data-tool-id] .text-input,
body[data-tool-id] .output-textarea,
body[data-tool-id] .monospace-output,
body[data-tool-id] .lined-textarea textarea {
  padding: 8px 10px;
  font-size: 12px;
}

body[data-tool-id] .ddt-examples-card:not([open]) {
  padding: 8px 10px;
  box-shadow: none;
}

body[data-tool-id] .ddt-examples-card:not([open]) .ddt-examples-summary {
  gap: 8px;
}

@media (pointer: coarse) {
  body[data-tool-id] button,
  body[data-tool-id] .btn,
  body[data-tool-id] .icon-button,
  body[data-tool-id] button.small-btn,
  body[data-tool-id] .small-btn,
  body[data-tool-id] .btn-sm {
    min-height: 34px;
    padding: 7px 11px;
  }
}

/* Home h1 — added 2026-05-01 */
.ddt-home-h1 {
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-main);
  margin: 4px 0 6px;
}

/* Standardized tool surfaces and content typography.
   Keep this late in the cascade so older page-local and shared layers converge. */
body[data-tool-id] textarea,
body[data-tool-id] .output-textarea,
body[data-tool-id] .lined-textarea-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-tool-id] .lined-textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-tool-id] .lined-textarea-input {
  flex: 1 1 auto;
  width: auto;
}

body[data-tool-id] .line-numbers {
  flex: 0 0 44px;
}

body[data-tool-id] .ddt-action-bar,
body[data-tool-id] .ddt-actionbar,
body[data-tool-id] .compare-bar {
  width: 100%;
  max-width: 100%;
  margin: 8px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--color-border-subtle, var(--border-soft));
  border-top: 3px solid color-mix(in srgb, var(--primary) 60%, transparent) !important;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface, var(--bg-elevated));
  box-shadow: var(--shadow-xs, var(--shadow-card));
}

body[data-tool-id] .ddt-action-bar > *,
body[data-tool-id] .ddt-actionbar > *,
body[data-tool-id] .compare-bar > * {
  min-width: 0;
}

body[data-tool-id] .ddt-actionbar-left,
body[data-tool-id] .ddt-actionbar-right,
body[data-tool-id] .ddt-actionbar-group,
body[data-tool-id] .compare-bar-left,
body[data-tool-id] .compare-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body[data-tool-id] .ddt-actionbar-right,
body[data-tool-id] .compare-bar-right {
  margin-left: auto;
  justify-content: flex-end;
}

.seo-content h3 {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  margin: 18px 0 6px;
  letter-spacing: 0;
}

body[data-tool-id] h3 {
  font-size: 15px;
  line-height: 1.35;
}

/* Skip-to-main link (injected by ddt-main.js) */
.ddt-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 8px 14px;
  background: var(--primary, #1d4ed8);
  color: #fff;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  font-weight: 600;
}
.ddt-skip-link:focus,
.ddt-skip-link:focus-visible {
  left: 0;
  outline: 2px solid var(--accent, #0f766e);
  outline-offset: 2px;
}

/* Reserve space at the bottom of <main> while the cookie banner is visible
   so it never covers tool action bars or input. The banner sets
   body.ddt-cookie-visible while showing. */
body.ddt-cookie-visible main,
body.ddt-cookie-visible .sd-main,
body.ddt-cookie-visible .ddt-404-shell {
  padding-bottom: 96px;
}
@media (max-width: 720px) {
  body.ddt-cookie-visible main,
  body.ddt-cookie-visible .sd-main,
  body.ddt-cookie-visible .ddt-404-shell {
    padding-bottom: 140px;
  }
}

/* Redaction-before-share gate panel */
.ddt-share-gate-title { margin: 0 0 4px; font-size: 14px; color: var(--text-main, #0f172a); }
.ddt-share-gate-subtitle { margin: 0 0 8px; font-size: 12px; color: var(--text-muted); }
.ddt-share-gate-list { list-style: none; padding: 0; margin: 0 0 12px; max-height: 220px; overflow: auto; border: 1px solid var(--border-soft); border-radius: 8px; }
.ddt-share-gate-list li { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); display: grid; grid-template-columns: 70px 130px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.ddt-share-gate-list li:last-child { border-bottom: none; }
.ddt-share-gate-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ddt-share-gate-preview { margin-top: 6px; font-size: 12px; }
.ddt-share-gate-preview-pre { max-height: 200px; overflow: auto; background: var(--bg-elevated); padding: 8px; border-radius: 6px; font-size: 11px; white-space: pre-wrap; word-break: break-word; }
.ddt-share-gate-not-secret { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 6px; }
.ddt-share-gate-not-secret:hover { color: var(--text); text-decoration: underline; }

/* ---- Encrypted share: send-modal trust lead (Surface 1) ---- */
.ddt-share-trust-lead {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border-soft, #e2e8f0);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #16a34a) 8%, transparent);
  margin-bottom: 12px;
}
.ddt-share-trust-lead .ddt-share-lock { font-size: 20px; line-height: 1.2; }
.ddt-share-trust-lead strong { display: block; color: var(--text-main, #0f172a); font-size: 14px; }
.ddt-share-trust-lead p { margin: 4px 0 0; color: var(--text-muted, #64748b); font-size: 13px; }
.ddt-share-facts { list-style: none; padding: 0; margin: 8px 0 12px; }
.ddt-share-facts li { color: var(--text-muted, #64748b); font-size: 12px; }
[data-theme="dark"] .ddt-share-trust-lead { border-color: var(--border-soft, #334155); }
[data-theme="dark"] .ddt-share-trust-lead strong { color: var(--text-main, #f1f5f9); }

/* Surface 2 (protective gate heading): color is set on the base .ddt-share-gate-title
   rule above (was danger-red, now neutral --text-main, which is light in dark mode). */

/* ---- Encrypted share: recipient receive panel (Surface 3) ---- */
.ddt-receive-panel {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent, #16a34a) 35%, transparent);
  background: color-mix(in srgb, var(--accent, #16a34a) 7%, transparent);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ddt-receive-head { display: flex; align-items: center; gap: 8px; }
.ddt-receive-glyph { font-size: 18px; }
.ddt-receive-head strong { font-size: 15px; color: var(--text-main, #0f172a); }
.ddt-receive-body { margin: 8px 0 0; color: var(--text-main, #0f172a); font-size: 14px; }
.ddt-receive-redacted { margin: 8px 0 0; color: #92400e; font-size: 13px; }
.ddt-receive-redacted code { background: rgba(245,158,11,.16); padding: 1px 4px; border-radius: 3px; }
.ddt-receive-brand { margin: 6px 0 0; color: var(--text-muted, #64748b); font-size: 12px; }
.ddt-receive-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ddt-receive-about { text-decoration: none; display: inline-flex; align-items: center; }
.ddt-receive-dismiss {
  position: absolute; right: 10px; top: 10px;
  background: none; border: none; cursor: pointer;
  font-size: 14px; line-height: 1; color: var(--text-muted, #64748b);
}
[data-theme="dark"] .ddt-receive-head strong,
[data-theme="dark"] .ddt-receive-body { color: var(--text-main, #f1f5f9); }
[data-theme="dark"] .ddt-receive-redacted { color: #fbbf24; }
@media (max-width: 600px) {
  .ddt-receive-actions { flex-direction: column; align-items: stretch; }
  .ddt-receive-actions .primary,
  .ddt-receive-actions .secondary { text-align: center; }
}


/* ===== assets/ddt-tokens.css ===== */
:root,
[data-theme="light"] {
  --bg: #f4f7fb;
  --panel: rgba(255, 255, 255, 0.84);
  --border: rgba(21, 33, 52, 0.13);
  --text: #152033;
  --muted: #607086;

  --primary: #245ee8;
  --primary-hover: #1748b8;

  --success: #12805c;
  --warning: #c76a14;
  --danger: #c23b4b;
  --info: #116fae;

  --focus-ring: 0 0 0 3px rgba(36, 94, 232, 0.2);
}

html[data-theme="dark"] {
  --bg: #10131a;
  --panel: rgba(24, 29, 39, 0.86);
  --border: rgba(190, 203, 221, 0.18);
  --text: #edf2f8;
  --muted: #a1afc0;

  --primary: #8ab4ff;
  --primary-hover: #b6d0ff;

  --success: #51d6a2;
  --warning: #f4b860;
  --danger: #ff8b98;
  --info: #7fd0ff;

  --focus-ring: 0 0 0 3px rgba(138, 180, 255, 0.22);
}


/* ===== assets/ddt-platform.css ===== */
:root {
  --ddt-font-scale: 1;
  --ddt-space-unit: 1;
}

body {
  font-size: calc(16px * var(--ddt-font-scale));
}

.tool-root :focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* CLS guard (qa/AUDIT.md T8): reserve the action bar's space before ddt-core
   renders into the slot. Reserved heights match the typical rendered bar per
   breakpoint — a few px of mismatch costs ~0.002 CLS instead of ~0.15.
   display:block overrides the styles.css empty-slot collapse for THIS slot
   only (ddt-core always fills it on pages that ship the slots wrap). */
body[data-tool-id] .ddt-platform-slots > div[data-slot='ddt-actionbar']:empty {
  display: block;
  min-height: 48px;
}
@media (max-width: 900px) {
  body[data-tool-id] .ddt-platform-slots > div[data-slot='ddt-actionbar']:empty {
    min-height: 82px;
  }
}
@media (max-width: 640px) {
  body[data-tool-id] .ddt-platform-slots > div[data-slot='ddt-actionbar']:empty {
    min-height: 90px;
  }
}

.ddt-actionbar {
  position: sticky;
  top: 10px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(10px * var(--ddt-space-unit));
  padding: calc(10px * var(--ddt-space-unit)) calc(12px * var(--ddt-space-unit));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

.ddt-actionbar-left,
.ddt-actionbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--ddt-space-unit));
  align-items: center;
}

.ddt-actionbar-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-select,
.ddt-view-select {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-main);
}

.ddt-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ddt-choice-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.ddt-choice-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ddt-choice-pill-text {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ddt-choice-pill:hover .ddt-choice-pill-text,
.ddt-choice-pill input:focus-visible + .ddt-choice-pill-text {
  border-color: var(--primary);
  color: var(--primary);
}

.ddt-choice-pill input:checked + .ddt-choice-pill-text {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--border-soft) 48%);
  background: color-mix(in srgb, var(--primary-soft) 82%, transparent);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}

.ddt-file-info {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-file-info.is-visible {
  display: flex;
}

.ddt-file-clear {
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font-size: 12px;
}

.ddt-dropzone-active {
  outline: 2px dashed var(--primary);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--primary-soft) 62%, transparent);
}

.ddt-error-banner {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger);
}

.ddt-error-message {
  font-weight: 600;
}

.ddt-error-meta {
  font-size: 12px;
  margin-top: 4px;
}

.ddt-error-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ddt-error-highlight {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 34%, transparent) inset;
}

.ddt-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: none;
  align-items: stretch;
  justify-content: flex-end;
  z-index: 30;
}

.ddt-drawer-overlay[aria-hidden='false'] {
  display: flex;
}

.ddt-drawer {
  width: min(420px, 92vw);
  background: var(--bg-panel);
  border-left: 1px solid var(--border-soft);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.ddt-drawer-header {
  padding: 14px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ddt-drawer-title {
  font-weight: 600;
}

.ddt-drawer-body {
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ddt-drawer-note {
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-drawer-note.is-warning {
  color: var(--danger);
}

.ddt-drawer-controls {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.ddt-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-main);
}

.ddt-history-list,
.ddt-presets-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ddt-history-item,
.ddt-preset-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ddt-history-meta,
.ddt-preset-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-history-actions,
.ddt-preset-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ddt-preset-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ddt-empty {
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-view-controls {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-left: 12px;
}

.ddt-view-label {
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.ddt-toast-wrap {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
}

.ddt-toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s ease;
  font-size: 12px;
}

.ddt-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ddt-toast--ok {
  border-color: var(--success-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--success-soft) 100%, transparent), transparent 70%), var(--bg-elevated);
}

.ddt-toast--error {
  border-color: var(--danger-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger-soft) 100%, transparent), transparent 70%), var(--bg-elevated);
}

/* Transparent control pass */
.ddt-select,
.ddt-view-select {
  background: transparent;
  border-color: var(--field-border, var(--border-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.ddt-choice-pill-text {
  background: transparent;
  border-color: var(--field-border, var(--border-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-theme='dark'] .ddt-select,
html[data-theme='dark'] .ddt-view-select {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme='dark'] .ddt-choice-pill-text {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* ===== assets/ddt-tools.css ===== */
.ddt-two-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px) {
  .ddt-two-panel {
    grid-template-columns: 1fr;
  }
}

.ddt-action-bar {
  position: sticky;
  top: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
}

/* Shared "Clear" / "Clear All" control. One consistent, easy-to-recognise
   look across every tool: a muted-danger outline so it reads as a reset, and
   margin-left:auto so it parks at the far right of an action toolbar, on the
   same line as the primary action. Place it as the last item in the bar. */
.ddt-clear-btn {
  margin-left: auto;
}
/* Theme-scoped so the muted-danger look wins over .secondary.small-btn in
   both light and dark, regardless of which base button class is used. */
html[data-theme='light'] .ddt-clear-btn {
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.08);
}
html[data-theme='light'] .ddt-clear-btn:hover,
html[data-theme='light'] .ddt-clear-btn:focus-visible {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}
html[data-theme='dark'] .ddt-clear-btn {
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.12);
}
html[data-theme='dark'] .ddt-clear-btn:hover,
html[data-theme='dark'] .ddt-clear-btn:focus-visible {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
}

/* Shared "Try a sample" affordance. A lightweight text link that flows inline at
   the end of the tool's subtitle line rather than taking a row of its own or
   competing as a first-class button in the action bar. Works as a <button> or an <a>. */
.ddt-try-sample {
  display: inline;
  margin-left: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary, #2563eb);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.ddt-try-sample:hover,
.ddt-try-sample:focus-visible {
  text-decoration: underline;
}
html[data-theme='dark'] .ddt-try-sample {
  color: var(--primary, #60a5fa);
}

.ddt-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.ddt-toast-wrap {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 8px;
  z-index: 999;
}

.ddt-toast-wrap .ddt-toast {
  padding: 8px 12px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ddt-toast-wrap .ddt-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ddt-toast-wrap .ddt-toast--error {
  background: #b91c1c;
}

.ddt-toast-wrap .ddt-toast--success {
  background: #166534;
}

.ddt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ddt-tab {
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
}

.ddt-tab.is-active {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}

.ddt-help {
  color: var(--text-muted);
  font-size: 12px;
}

.ddt-form-row {
  margin-bottom: 10px;
}

.ddt-form-row:last-child {
  margin-bottom: 0;
}

.ddt-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-input {
  width: 90px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  font-size: 12px;
  background: var(--bg-elevated);
  color: var(--text);
}

.inline-input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 0 0 3px var(--ring);
}

.ddt-action-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border-soft);
  align-self: center;
  flex-shrink: 0;
  margin: 0 2px;
}

.ddt-mode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ddt-mode-card .ddt-tabs {
  margin-top: 0;
  flex-shrink: 0;
}

.ddt-mode-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* --- Vertical density pass: tighter action bar + sticky offset --- */
.ddt-action-bar {
  padding: 6px 8px;
  top: 6px;
  gap: 6px;
}

.ddt-ux-status-panel,
.ddt-ux-stats-panel,
.ddt-ux-secrets-panel,
.ddt-ux-next-panel {
  margin: 8px 0;
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-main);
  font-size: 12px;
  line-height: 1.5;
}

.ddt-ux-status-panel {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ddt-ux-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border-soft);
}

.ddt-ux-status-info {
  background: color-mix(in srgb, var(--primary-soft, #dbeafe) 70%, var(--bg-elevated));
  color: color-mix(in srgb, var(--primary, #2563eb) 72%, var(--text-main));
}

.ddt-ux-status-warning {
  background: color-mix(in srgb, #fef3c7 72%, var(--bg-elevated));
  color: #92400e;
  border-color: color-mix(in srgb, #f59e0b 42%, var(--border-soft));
}

.ddt-ux-note {
  margin-top: 4px;
  color: var(--text-muted);
}

.ddt-ux-secrets-panel {
  border-color: color-mix(in srgb, #f59e0b 44%, var(--border-soft));
  background: color-mix(in srgb, #fef3c7 30%, var(--bg-elevated));
}

.ddt-ux-secrets-panel[hidden] {
  display: none;
}

.ddt-ux-secret-list {
  margin: 6px 0 0;
  padding-left: 18px;
}

.ddt-ux-next-actions,
.ddt-ux-editor-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-left: 8px;
}

.ddt-ux-sanitized-preview {
  width: 100%;
  min-height: 120px;
  margin-top: 8px;
}

.ddt-ux-editor-shell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ddt-ux-editor-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  border-radius: 8px;
}

.ddt-ux-editor-body > textarea {
  min-width: 0;
}

.ddt-ux-line-gutter {
  display: block;
  min-width: 38px;
  max-width: 54px;
  margin: 0;
  padding: 10px 7px;
  overflow: hidden;
  border: 1px solid var(--field-border, var(--border-soft));
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: color-mix(in srgb, var(--bg-elevated) 82%, var(--border-soft));
  color: var(--text-muted);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-align: right;
  user-select: none;
  white-space: pre;
}

.ddt-ux-editor-body > textarea {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.ddt-ux-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.ddt-ux-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ddt-ux-mini-btn {
  padding: 3px 7px;
  font-size: 11px;
}

@media (max-width: 720px) {
  .ddt-ux-status-panel {
    align-items: flex-start;
  }

  .ddt-ux-editor-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .ddt-ux-next-actions,
  .ddt-ux-editor-actions {
    margin-left: 0;
  }
}


/* ===== assets/ddt-examples.css ===== */
/* assets/ddt-examples.css */
.ddt-examples-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  padding: 12px;
  box-shadow: var(--shadow-card);
}

.ddt-examples-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ddt-examples-title {
  font-weight: 700;
}

.ddt-examples-header {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ddt-examples-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ddt-examples-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ddt-examples-tab {
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  padding: 6px 12px;
  font-size: 12px;
  background: var(--bg-elevated);
  cursor: pointer;
}

.ddt-examples-tab.active {
  background: var(--primary-soft);
  border-color: rgba(37, 99, 235, 0.35);
}

.ddt-examples-panel {
  display: none;
  margin-top: 12px;
}

.ddt-examples-panel.active {
  display: block;
}

.ddt-example-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--card-bg, var(--bg-elevated));
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}

.ddt-example-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ddt-example-title {
  font-weight: 700;
  font-size: 13px;
}

.ddt-example-mode {
  font-size: 11px;
  color: var(--text-muted);
}

.ddt-example-desc {
  margin-top: 4px;
}

.ddt-example-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ddt-example-body {
  margin-top: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ddt-example-block {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  background: var(--bg-elevated);
}

.ddt-example-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ddt-example-block pre {
  margin: 0;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}


/* ===== assets/cookie-consent.css ===== */
/* assets/cookie-consent.css */
#ddt-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--panel, #2a2a2a);
  border-top: 1px solid var(--border, #444);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
  /* Respect device safe areas (notch / home indicator) so actions stay tappable. */
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
}

.ddt-cookie-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ddt-cookie-copy {
  flex: 1;
  min-width: 200px;
}
/* Two compact paragraphs (not one) — a single block this size would become
   the page's late-painted LCP element (qa/AUDIT.md T8). */
.ddt-cookie-text {
  margin: 0 0 4px;
  font-size: 0.8rem;
  color: var(--text, #eee);
  line-height: 1.45;
}

.ddt-cookie-text a {
  color: var(--primary, #3b82f6);
  text-decoration: underline;
}

.ddt-cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Scope under the banner id so these win over per-page button normalisation
   such as `body[data-tool-id] button` (higher specificity) on tool pages. */
#ddt-cookie-banner .ddt-cookie-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ddt-cookie-btn-primary {
  background: var(--primary, #3b82f6);
  color: #fff;
  border-color: var(--primary, #3b82f6);
}

.ddt-cookie-btn-primary:hover {
  background: var(--primary-hover, #60a5fa);
  border-color: var(--primary-hover, #60a5fa);
}

.ddt-cookie-btn-secondary {
  background: transparent;
  color: var(--text, #eee);
  border-color: var(--border, #444);
}

.ddt-cookie-btn-secondary:hover {
  background: var(--border, #444);
}

/* While the banner is visible, reserve space so it doesn't overlap content.
   The homepage hero centers its content in 100svh, so add bottom padding there
   too — with justify-content:center this lifts the chips/stats clear of the banner. */
body.ddt-cookie-open {
  padding-bottom: 84px;
}
body.ddt-cookie-open .rd-hero {
  padding-bottom: 132px;
}

@media (max-width: 600px) {
  .ddt-cookie-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .ddt-cookie-actions {
    /* Full-width, comfortably-tappable actions with clear separation. */
    flex-direction: column;
    gap: 10px;
  }

  #ddt-cookie-banner .ddt-cookie-btn {
    /* WCAG 2.2 touch-target minimum on mobile. */
    min-height: 44px;
    width: 100%;
  }

  body.ddt-cookie-open {
    padding-bottom: 184px;
  }
  body.ddt-cookie-open .rd-hero {
    padding-bottom: 230px;
  }
}


/* ===== assets/layout.css ===== */
/* assets/layout.css */
:root {
  --topnav-height: 44px;
  --rail-width: 0px;
  --rail-expanded-width: 240px;
  --header-height: 60px;
  --ddt-overlay: rgba(15, 18, 24, 0.45);
}

body.ddt-layout {
  padding-left: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

.ddt-shell {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
}

#app-main {
  min-height: 100vh;
}


body.ddt-focus .sd-page,
body.ddt-focus .page-wrapper {
  max-width: 100%;
}

body.ddt-focus .page-wrapper {
  margin: 0;
}

body.ddt-focus:not(.ddt-is-mobile) .ddt-rail {
  display: flex;
}

.sd-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Final shared UI normalization. This file loads after the optional tool
   bundles, so these rules keep core controls aligned across page variants. */
body[data-tool-id] textarea,
body[data-tool-id] .output-textarea,
body[data-tool-id] .lined-textarea-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-tool-id] .lined-textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-tool-id] .lined-textarea-input {
  flex: 1 1 auto;
  width: auto;
}

body[data-tool-id] .line-numbers {
  flex: 0 0 44px;
}

body[data-tool-id] .ddt-action-bar,
body[data-tool-id] .ddt-actionbar,
body[data-tool-id] .compare-bar {
  width: 100%;
  max-width: 100%;
  margin: 8px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--color-border-subtle, var(--border-soft));
  border-top: 3px solid color-mix(in srgb, var(--primary) 60%, transparent) !important;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface, var(--bg-elevated));
  box-shadow: var(--shadow-xs, var(--shadow-card));
}

body[data-tool-id] .ddt-action-bar > *,
body[data-tool-id] .ddt-actionbar > *,
body[data-tool-id] .compare-bar > * {
  min-width: 0;
}

body[data-tool-id] .ddt-actionbar-left,
body[data-tool-id] .ddt-actionbar-right,
body[data-tool-id] .ddt-actionbar-group,
body[data-tool-id] .compare-bar-left,
body[data-tool-id] .compare-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body[data-tool-id] .ddt-actionbar-right,
body[data-tool-id] .compare-bar-right {
  margin-left: auto;
  justify-content: flex-end;
}

.seo-content h3 {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  margin: 18px 0 6px;
  letter-spacing: 0;
}

body[data-tool-id] h3 {
  font-size: 15px;
  line-height: 1.35;
}

.ddt-header-btn {
  font-size: 12px;
  padding: 6px 10px;
  min-width: 44px;
  border-radius: 10px;
}

.icon-button.ddt-iconified {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.ddt-rail {
  display: none !important;
}

.ddt-rail-item {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, padding 0.18s ease;
}

.ddt-rail-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.ddt-rail-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ddt-rail-label {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  transition: max-width 0.18s ease, opacity 0.12s ease, margin-left 0.18s ease;
}

.ddt-rail-item:hover {
  background: var(--bg-elevated);
  border-color: var(--border-soft);
}

.ddt-rail-item:hover .ddt-rail-icon,
.ddt-rail-item:focus-visible .ddt-rail-icon {
  background: var(--bg-panel);
  border-color: var(--border-soft);
  color: currentColor;
}

.ddt-rail-item.is-active {
  background: color-mix(in srgb, var(--accent-soft) 82%, var(--bg-panel));
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}

.ddt-rail-item.is-active .ddt-rail-icon {
  background: color-mix(in srgb, var(--accent-soft) 85%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
}

.ddt-rail-item.is-active .ddt-rail-label {
  font-weight: 600;
}

.ddt-rail-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, left 0.15s ease;
  z-index: 80;
}

.ddt-rail-item:hover::after,
.ddt-rail-item:focus-visible::after {
  opacity: 1;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .ddt-rail:hover,
  .ddt-rail:focus-within {
    width: var(--rail-expanded-width);
    align-items: stretch;
    padding-left: 8px;
    padding-right: 8px;
    box-shadow: 2px 0 14px rgba(15, 18, 24, 0.05);
  }

  .ddt-rail:hover .ddt-rail-item,
  .ddt-rail:focus-within .ddt-rail-item {
    width: 100%;
    justify-content: flex-start;
    padding-left: 12px;
    padding-right: 12px;
    gap: 0;
  }

  .ddt-rail:hover .ddt-rail-label,
  .ddt-rail:focus-within .ddt-rail-label {
    max-width: 176px;
    opacity: 1;
    margin-left: 10px;
  }

  .ddt-rail:hover .ddt-rail-item[data-tooltip]::after,
  .ddt-rail:focus-within .ddt-rail-item[data-tooltip]::after {
    opacity: 0;
  }
}

/* ── Top Navigation Bar ─────────────────────────────────── */

.ddt-topnav {
  width: 100%;
  height: var(--topnav-height);
  background: var(--bg-panel);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: stretch;
  overflow: visible;
}

.ddt-topnav-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0 12px;
}

.ddt-topnav-cats {
  display: flex;
  align-items: stretch;
}

.ddt-topnav-cat {
  position: relative;
  display: flex;
  align-items: stretch;
  --topnav-cat-accent: var(--accent);
  --topnav-cat-bg: color-mix(in srgb, var(--topnav-cat-accent) 10%, transparent);
  --topnav-cat-border: color-mix(in srgb, var(--topnav-cat-accent) 48%, transparent);
}

.ddt-topnav-cat[data-category='JSON & YAML'] {
  --topnav-cat-accent: #245ee8;
}

.ddt-topnav-cat[data-category='SQL'] {
  --topnav-cat-accent: #0f7fa6;
}

.ddt-topnav-cat[data-category='API & Web'] {
  --topnav-cat-accent: #0d9488;
}

.ddt-topnav-cat[data-category='Security & Auth'] {
  --topnav-cat-accent: #c23b4b;
}

.ddt-topnav-cat[data-category='Encode / Decode'] {
  --topnav-cat-accent: #c76a14;
}

.ddt-topnav-cat[data-category='DevOps & Config'] {
  --topnav-cat-accent: #7657d8;
}

.ddt-topnav-cat[data-category='Compare & Diff'] {
  --topnav-cat-accent: #b14cc7;
}

.ddt-topnav-cat[data-category='Utilities'] {
  --topnav-cat-accent: #9f6b1b;
}

.ddt-topnav-cat-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  background: color-mix(in srgb, var(--topnav-cat-accent) 5%, transparent);
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  color: color-mix(in srgb, var(--topnav-cat-accent) 44%, var(--text-main));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  height: 100%;
  font-family: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ddt-topnav-cat-btn:hover {
  background: var(--topnav-cat-bg);
  border-color: color-mix(in srgb, var(--topnav-cat-accent) 18%, transparent);
  border-bottom-color: var(--topnav-cat-border);
  color: var(--topnav-cat-accent);
}

.ddt-topnav-cat.is-active .ddt-topnav-cat-btn {
  background: color-mix(in srgb, var(--topnav-cat-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--topnav-cat-accent) 18%, transparent);
  border-bottom-color: var(--topnav-cat-accent);
  color: var(--topnav-cat-accent);
  font-weight: 700;
}

.ddt-topnav-cat-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--topnav-cat-accent) 60%, var(--text-muted));
}

.ddt-topnav-cat.is-active .ddt-topnav-cat-icon,
.ddt-topnav-cat-btn:hover .ddt-topnav-cat-icon {
  color: var(--topnav-cat-accent);
}

.ddt-topnav-cat-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ddt-topnav-cat-label {
  font-size: 13px;
}

body.ddt-has-shared-actionbar .page-content .ddt-workflow-cta-btn {
  display: none !important;
}

body.ddt-has-shared-actionbar .page-content .ddt-actionbar .ddt-workflow-cta-btn {
  display: inline-flex !important;
}

.ddt-topnav-chevron {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
  opacity: 0.5;
}

.ddt-topnav-cat.is-open .ddt-topnav-chevron,
.ddt-topnav-cat:hover .ddt-topnav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.ddt-topnav-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 220px;
  max-height: min(72vh, 500px);
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 18, 24, 0.13);
  padding: 6px;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

@media (hover: hover) {
  .ddt-topnav-cat:hover .ddt-topnav-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.ddt-topnav-cat.is-open .ddt-topnav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ddt-topnav-tool-link {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.4;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.ddt-topnav-tool-link:hover {
  background: var(--bg-elevated);
  color: var(--accent);
}

.ddt-topnav-tool-link.is-active {
  background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.ddt-topnav-search {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ddt-topnav-search:hover,
.ddt-topnav-search:focus-within {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.ddt-topnav-search svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.ddt-topnav-search input {
  width: min(18vw, 190px);
  min-width: 150px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  line-height: 1.4;
}

.ddt-topnav-search input::placeholder {
  color: var(--text-muted);
}

.ddt-topnav-search-shortcut {
  padding: 1px 5px;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}

/* Compact labels at medium widths */
@media (max-width: 1200px) {
  .ddt-topnav-cat-label {
    display: none;
  }
  .ddt-topnav-cat-btn {
    padding: 0 9px;
    gap: 0;
  }
  .ddt-topnav-chevron {
    display: none;
  }
}

/* ── End Top Navigation Bar ──────────────────────────────── */

.ddt-cmdk {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 80;
}

body.ddt-cmdk-open .ddt-cmdk {
  display: block;
}

body.ddt-cmdk-open {
  overflow: hidden;
}

.ddt-cmdk-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ddt-overlay);
}

.ddt-cmdk-panel {
  position: relative;
  max-width: 640px;
  margin: 8vh auto 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 12px;
}

.ddt-cmdk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
}

.ddt-cmdk-title {
  font-weight: 700;
}

.ddt-cmdk-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
}

.ddt-cmdk-list {
  list-style: none;
  margin: 10px 0 6px;
  padding: 0;
  max-height: 320px;
  overflow: auto;
}

.ddt-cmdk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.ddt-cmdk-item.is-active,
.ddt-cmdk-item:hover {
  background: var(--bg-elevated);
}

.ddt-cmdk-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ddt-cmdk-item-title {
  font-weight: 600;
}

.ddt-cmdk-item-meta {
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.ddt-cmdk-section {
  padding: 6px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.ddt-cmdk-shortcut {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.ddt-cmdk-hint {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 6px;
}

.ddt-cmdk-star {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 12px;
}

.ddt-cmdk-star[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

.ddt-cmdk-empty {
  padding: 10px;
  color: var(--text-muted);
}

.command-palette {
  display: none !important;
}

@media (max-width: 900px) {
  body.ddt-layout {
    padding-left: 0;
  }
  .ddt-topnav {
    height: auto;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  .ddt-topnav-inner {
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
    padding: 0 8px;
  }
  .ddt-topnav-cats {
    display: flex;
    width: max-content;
    min-width: 100%;
  }
  .ddt-topnav-search-shortcut {
    display: none;
  }
  .ddt-topnav-search input {
    width: 140px;
    min-width: 120px;
  }
  .ddt-topnav-cat-label {
    display: inline;
  }
  .ddt-topnav-chevron {
    display: block;
  }
  .ddt-topnav-cat-btn {
    min-height: 44px;
    padding: 0 10px;
    gap: 5px;
  }
}

@media (max-width: 640px) {
  body.ddt-layout {
    padding-left: 0;
  }
  .ddt-topnav-inner {
    padding: 0 6px;
  }
}

/* Refined chrome and transparent search fields */
.ddt-cmdk-panel {
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  border-color: color-mix(in srgb, var(--border-soft) 94%, rgba(255, 255, 255, 0.16));
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(18px);
}

.ddt-cmdk-input,
.ddt-topnav-search {
  background: transparent;
  border-color: var(--field-border, var(--border-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-theme='dark'] .ddt-cmdk-input,
html[data-theme='dark'] .ddt-topnav-search {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* ===== assets/ddt-tool-shell.css ===== */
/* assets/ddt-tool-shell.css
 * Shared "tool-body" design layer for the Figma "Modern Tool Website" redesign.
 * Reusable component classes (prefix `rdt-`) for the tool UI that sits between
 * the injected breadcrumb and the SEO/footer. Themed via the existing --rd-*
 * tokens (assets/ddt-redesign-tokens.css) so it adapts to light & dark.
 *
 * Everything is scoped under `.rdt-tool` so it cannot bleed into legacy pages
 * or shared components (toasts, command palette, platform slots).
 *
 * First adopted by json-formatter.html; intended as the template for all tool
 * pages. Spec: site redesign (Figma "Modern Tool Website Design").
 */

/* ===== Local surface/syntax tints (token-derived so they invert in light) ===== */
.rdt-tool {
  --rdt-pane-bg: var(--rd-bg-surface);
  --rdt-head-bg: var(--rd-bg-elevated);
  /* Accent is per-page (category). Default = Data / cyan. Override with an
     .rdt-accent-* modifier class on the same element. */
  --rdt-accent: #00d4ff;
  --rdt-accent-2: #0099cc;
  --rdt-on-accent: #061018;
  --rdt-accent-soft: color-mix(in srgb, var(--rdt-accent) 10%, transparent);
  --rdt-accent-line: color-mix(in srgb, var(--rdt-accent) 18%, transparent);
  --rdt-switch-off: color-mix(in srgb, var(--rd-text-dim) 45%, transparent);
  --rdt-ok: #10b981;
  --rdt-warn: #f59e0b;
  --rdt-err: #ef4444;
  /* JSON syntax palette (shared by output + tree) */
  --rdt-syn-key: #7c9cbf;
  --rdt-syn-str: #10b981;
  --rdt-syn-num: #a78bfa;
  --rdt-syn-bool: #f59e0b;
  --rdt-syn-null: #ef4444;
}
/* Per-category accent palettes (gradient stops + on-accent text colour) */
.rdt-tool.rdt-accent-data      { --rdt-accent: #00d4ff; --rdt-accent-2: #0099cc; --rdt-on-accent: #061018; }
.rdt-tool.rdt-accent-api       { --rdt-accent: #7c3aed; --rdt-accent-2: #6d28d9; --rdt-on-accent: #ffffff; }
.rdt-tool.rdt-accent-encode    { --rdt-accent: #10b981; --rdt-accent-2: #047857; --rdt-on-accent: #ffffff; }
.rdt-tool.rdt-accent-devops    { --rdt-accent: #f59e0b; --rdt-accent-2: #b45309; --rdt-on-accent: #1a1205; }
.rdt-tool.rdt-accent-utilities { --rdt-accent: #a78bfa; --rdt-accent-2: #7c3aed; --rdt-on-accent: #ffffff; }
.rdt-tool.rdt-accent-checklists{ --rdt-accent: #f43f5e; --rdt-accent-2: #be123c; --rdt-on-accent: #ffffff; }
html[data-theme='light'] .rdt-tool {
  --rdt-syn-key: #4a6fa5;
  --rdt-syn-str: #047857;
  --rdt-syn-num: #6d28d9;
  --rdt-syn-bool: #b45309;
  --rdt-syn-null: #b91c1c;
}

/* ===== Page wrapper ===== */
.rdt-tool {
  max-width: var(--rd-max-width);
  margin: 0 auto;
  padding: 24px 24px 8px;
  font-family: var(--rd-font-sans);
  color: var(--rd-text-primary);
}
.rdt-tool *,
.rdt-tool *::before,
.rdt-tool *::after {
  box-sizing: border-box;
}

/* ===== Sticky action toolbar (second bar, below the injected breadcrumb) ===== */
.rdt-toolbar {
  position: sticky;
  top: var(--rd-nav-height, 56px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--rd-bg-app) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--rd-border-soft);
  border-radius: var(--rd-radius-md);
}
.rdt-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rdt-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--rd-text-muted);
}
.rdt-divider {
  width: 1px;
  align-self: stretch;
  min-height: 22px;
  margin: 0 2px;
  background: var(--rdt-accent-line);
}
.rdt-spacer { flex: 1 1 auto; }

/* ===== Buttons ===== */
.rdt-btn,
.rdt-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--rd-trans-fast), border-color var(--rd-trans-fast),
    color var(--rd-trans-fast), opacity var(--rd-trans-fast);
  white-space: nowrap;
}
.rdt-btn-primary {
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--rdt-accent), var(--rdt-accent-2));
  color: var(--rdt-on-accent);
}
.rdt-btn-primary:hover { opacity: 0.9; }
.rdt-btn {
  border: 1px solid var(--rd-border-strong);
  background: transparent;
  color: var(--rd-text-muted);
}
.rdt-btn:hover {
  color: var(--rd-text-primary);
  border-color: var(--rdt-accent);
}
.rdt-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--rd-border-soft);
  border-radius: var(--rd-radius-sm);
  background: transparent;
  color: var(--rd-text-muted);
  font-family: var(--rd-font-sans);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color var(--rd-trans-fast), border-color var(--rd-trans-fast);
}
.rdt-btn-ghost:hover {
  color: var(--rd-text-primary);
  border-color: var(--rdt-accent);
}
.rdt-tool .rdt-btn:focus-visible,
.rdt-tool .rdt-btn-primary:focus-visible,
.rdt-tool .rdt-btn-ghost:focus-visible {
  outline: 2px solid var(--rdt-accent);
  outline-offset: 2px;
}

/* ===== Select (indent) ===== */
.rdt-select {
  padding: 6px 8px;
  border-radius: var(--rd-radius-sm);
  border: 1px solid var(--rd-border-strong);
  background: var(--rd-bg-elevated);
  color: var(--rd-text-primary);
  font-family: var(--rd-font-mono);
  font-size: 0.75rem;
  cursor: pointer;
}

/* ===== Toggle switch (wraps an existing checkbox, no JS) ===== */
.rdt-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.rdt-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.rdt-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: var(--rdt-switch-off);
  transition: background var(--rd-trans-fast);
}
.rdt-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: left var(--rd-trans-fast);
}
.rdt-switch input:checked + .rdt-switch-track { background: var(--rdt-accent); }
.rdt-switch input:checked + .rdt-switch-track .rdt-switch-knob { left: calc(100% - 14px); }
.rdt-switch input:focus-visible + .rdt-switch-track {
  outline: 2px solid var(--rdt-accent);
  outline-offset: 2px;
}
.rdt-switch-label {
  font-family: var(--rd-font-mono);
  font-size: 0.7rem;
  color: var(--rd-text-muted);
}

/* ===== Title header ===== */
.rdt-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.rdt-title-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.rdt-title-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--rd-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rdt-accent-soft);
  color: var(--rdt-accent);
  border: 1px solid var(--rdt-accent-line);
}
.rdt-title h1 {
  margin: 0;
  font-family: var(--rd-font-sans);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: var(--rd-heading-tight);
  color: var(--rd-text-primary);
  line-height: 1.2;
}
.rdt-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.rdt-pill {
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--rd-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  background: var(--rdt-accent-soft);
  color: var(--rdt-accent);
  white-space: nowrap;
}
.rdt-subtitle {
  margin: 2px 0 0;
  font-size: 0.84rem;
  color: var(--rd-text-muted);
  line-height: 1.5;
}
.rdt-tool .tool-help.rdt-help-list {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: 0.78rem;
  color: var(--rd-text-muted);
  line-height: 1.55;
}
.rdt-trust {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--rd-radius-sm);
  border: 1px solid color-mix(in srgb, var(--rdt-ok) 22%, transparent);
  background: color-mix(in srgb, var(--rdt-ok) 6%, transparent);
  font-family: var(--rd-font-mono);
  font-size: 0.62rem;
  color: var(--rdt-ok);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .rdt-trust { display: none; }
  /* Sprint 6: shared action-bar controls meet the 44px mobile touch target and
     wrap predictably (task action first, continuation actions after). */
  .ddt-actionbar .small-btn,
  .ddt-actionbar .icon-button,
  .ddt-actionbar button,
  .ddt-actionbar select,
  .ddt-actionbar-group .small-btn,
  .ddt-actionbar-group .icon-button,
  .ddt-workflow-cta-btn,
  .ddt-actionbar-share-btn {
    min-height: 44px;
  }
  .ddt-actionbar-group {
    gap: 10px;
    flex-wrap: wrap;
  }
}

/* ===== Editor panes ===== */
.rdt-panes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 980px) {
  .rdt-panes { grid-template-columns: 1fr 1fr; }
}
.rdt-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--rd-radius-lg);
  border: 1px solid var(--rd-border-soft);
  background: var(--rdt-pane-bg);
  overflow: hidden;
}
.rdt-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rd-border-soft);
  background: var(--rdt-head-bg);
}
.rdt-pane-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rdt-pane-head-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rdt-pane-label {
  font-family: var(--rd-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--rd-text-dim);
}
.rdt-pane-body { display: flex; flex-direction: column; min-height: 0; }

/* Editor text areas (input + readonly output) */
.rdt-tool textarea#jsonFormatterInput,
.rdt-tool textarea#jsonFormatterOutput {
  width: 100%;
  height: auto;
  min-height: 460px;
  resize: vertical;
  border: 0;
  outline: none;
  padding: 14px 16px;
  background: transparent;
  color: var(--rd-text-primary);
  font-family: var(--rd-font-mono);
  font-size: 0.8rem;
  line-height: 1.75;
}
.rdt-tool textarea#jsonFormatterInput::placeholder,
.rdt-tool textarea#jsonFormatterOutput::placeholder {
  color: var(--rd-text-dim);
}
@media (max-width: 900px) {
  .rdt-tool textarea#jsonFormatterInput,
  .rdt-tool textarea#jsonFormatterOutput { min-height: 320px; }
}
.rdt-pane-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 12px;
  border-top: 1px solid var(--rd-border-soft);
  background: var(--rdt-head-bg);
  font-size: 0.72rem;
  color: var(--rd-text-muted);
}

/* Status badges */
.rdt-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--rd-font-mono);
  font-size: 0.65rem;
  border: 1px solid var(--rd-border-soft);
  color: var(--rd-text-muted);
}
.rdt-status.is-ok { color: var(--rdt-ok); border-color: color-mix(in srgb, var(--rdt-ok) 30%, transparent); }
.rdt-status.is-err { color: var(--rdt-err); border-color: color-mix(in srgb, var(--rdt-err) 30%, transparent); }

/* ===== Segmented tabs (results view switch) ===== */
.rdt-tabs {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: var(--rd-radius-sm);
  border: 1px solid var(--rd-border-soft);
  background: var(--rdt-head-bg);
}
.rdt-tab {
  border: 0;
  background: transparent;
  color: var(--rd-text-muted);
  font-family: var(--rd-font-mono);
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: calc(var(--rd-radius-sm) - 2px);
  cursor: pointer;
  transition: background var(--rd-trans-fast), color var(--rd-trans-fast);
}
.rdt-tab[aria-selected='true'] {
  background: var(--rdt-accent-soft);
  color: var(--rdt-accent);
}

/* ===== Result cards / stats / banners ===== */
.rdt-results { margin-top: 18px; }
.rdt-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.rdt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .rdt-grid { grid-template-columns: 1fr; }
}
.rdt-card {
  border: 1px solid var(--rd-border-soft);
  border-radius: var(--rd-radius-md);
  background: var(--rdt-pane-bg);
  padding: 14px;
}
.rdt-card h3 {
  margin: 0 0 8px;
  font-family: var(--rd-font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--rd-text-primary);
}
.rdt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.rdt-card-head h3 { margin: 0; }
.rdt-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rdt-card.is-warn {
  border-color: color-mix(in srgb, var(--rdt-warn) 45%, transparent);
  background: color-mix(in srgb, var(--rdt-warn) 8%, transparent);
}

.rdt-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  padding: 12px 16px;
  border-radius: var(--rd-radius-md);
  border: 1px solid var(--rd-border-soft);
  background: var(--rd-bg-elevated);
}
.rdt-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.rdt-field-label {
  font-family: var(--rd-font-mono);
  font-size: 0.7rem;
  color: var(--rd-text-muted);
}

/* Full-width primary (e.g. UUID "Generate") */
.rdt-btn-block {
  width: 100%;
  justify-content: center;
  padding: 11px 14px;
  font-size: 0.875rem;
}

/* Config grid (label-over-control cells) */
.rdt-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.rdt-field-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rdt-field-col > span.rdt-field-label,
.rdt-field-col > label.rdt-field-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rdt-field-hint { font-size: 0.68rem; color: var(--rd-text-dim); }
.rdt-tool .rdt-config-grid select,
.rdt-tool select.rdt-select {
  width: 100%;
}

/* Empty state */
.rdt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  min-height: 200px;
  color: var(--rd-text-dim);
  font-family: var(--rd-font-mono);
  font-size: 0.8rem;
}

/* Search / depth control rows reused from results */
.rdt-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rdt-tool input[type='number'],
.rdt-tool input[type='search'],
.rdt-tool input[type='text'] {
  padding: 6px 10px;
  border-radius: var(--rd-radius-sm);
  border: 1px solid var(--rd-border-strong);
  background: var(--rd-bg-elevated);
  color: var(--rd-text-primary);
  font-family: var(--rd-font-mono);
  font-size: 0.78rem;
}
.rdt-tool input[type='number']:focus,
.rdt-tool input[type='search']:focus,
.rdt-tool input[type='text']:focus { outline: none; border-color: var(--rdt-accent); }

/* Generic themed textarea (output/validate/export/snippet areas) */
.rdt-tool textarea.rdt-textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border: 1px solid var(--rd-border-soft);
  border-radius: var(--rd-radius-md);
  background: var(--rd-bg-app);
  color: var(--rd-text-primary);
  font-family: var(--rd-font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  padding: 12px 14px;
  outline: none;
}
.rdt-tool textarea.rdt-textarea:focus { border-color: var(--rdt-accent); }
.rdt-tool textarea.rdt-textarea::placeholder { color: var(--rd-text-dim); }

/* Compact data table (e.g. version guide) */
.rdt-tool .rdt-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.rdt-tool .rdt-table th,
.rdt-tool .rdt-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rd-border-soft);
  vertical-align: top;
}
.rdt-tool .rdt-table th { color: var(--rd-text-primary); font-weight: 700; }
.rdt-tool .rdt-table td { color: var(--rd-text-muted); }
.rdt-table-scroll { overflow-x: auto; }

/* Keyboard chips */
.rdt-tool .kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--rd-border-soft);
  background: var(--rd-bg-elevated);
  font-family: var(--rd-font-mono);
  font-size: 0.65rem;
  color: var(--rd-text-muted);
}

/* Inline action status */
.rdt-tool #actionStatus[data-kind='error'] { color: var(--rdt-err); }
.rdt-tool #actionStatus[data-kind='ok'] { color: var(--rdt-ok); }
.rdt-tool #actionStatus[data-kind='info'] { color: var(--rd-text-muted); }

/* SEO content readability on the dark surface */
.rdt-seo {
  max-width: 72ch;
  margin: 40px auto;
  padding: 0 16px;
  line-height: 1.7;
  color: var(--rd-text-muted);
}
.rdt-seo h2, .rdt-seo h3 { color: var(--rd-text-primary); }
.rdt-seo a { color: var(--rdt-accent); }

/* ===== Platform-injected chrome (action bar, favourites, examples, next steps)
   The shared platform JS injects these into every tool page, inside `.rdt-tool`.
   Restyle them to the redesign. This lives in the shell (not the bridge) so the
   fully-rebuilt pages get it too. The broad legacy-class button rules below only
   ever match injected chrome on rebuilt pages (their bodies use rdt-* classes)
   and harmlessly mirror the bridge on bridge-converted pages. ===== */

/* Output action bar */
.rdt-tool .ddt-actionbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 0 16px;
  border: 1px solid var(--rd-border-soft);
  border-radius: var(--rd-radius-md);
  background: var(--rd-bg-elevated);
}
.rdt-tool .ddt-actionbar-left,
.rdt-tool .ddt-actionbar-right,
.rdt-tool .ddt-actionbar-group,
.rdt-tool .ddt-actionbar-workflow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rdt-tool .ddt-actionbar-right { margin-left: auto; }
.rdt-tool .ddt-actionbar-divider {
  width: 1px;
  align-self: stretch;
  min-height: 20px;
  color: transparent;
  background: var(--rdt-accent-line);
}
.rdt-tool .ddt-actionbar-trust,
.rdt-tool .ddt-actionbar-workflow-hint,
.rdt-tool .ddt-actionbar-meta {
  flex-basis: 100%;
  color: var(--rd-text-dim);
  font-family: var(--rd-font-mono);
  font-size: 0.66rem;
}

/* Tool header (favourites / share / help) injected into the title row */
.rdt-tool .ddt-tool-header,
.rdt-tool .ddt-tool-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rdt-tool .ddt-help-icon {
  background: var(--rd-bg-elevated);
  color: var(--rd-text-muted);
  border: 1px solid var(--rd-border-soft);
}

/* Injected chrome buttons (legacy classes) -> shell button look */
.rdt-tool .secondary,
.rdt-tool .small-btn,
.rdt-tool .icon-button,
.rdt-tool [data-ddt-sample-key] {
  background: transparent;
  color: var(--rd-text-muted);
  border: 1px solid var(--rd-border-strong);
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-sans);
}
.rdt-tool .secondary:hover,
.rdt-tool .small-btn:hover,
.rdt-tool .icon-button:hover {
  color: var(--rd-text-primary);
  border-color: var(--rdt-accent);
}
.rdt-tool .primary {
  background: linear-gradient(135deg, var(--rdt-accent), var(--rdt-accent-2));
  color: var(--rdt-on-accent);
  border: 1px solid transparent;
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-sans);
  font-weight: 600;
}
.rdt-tool .primary:hover { opacity: 0.9; }
/* Sprint 5: the Continue-in-Workflow CTA and Share are continuation actions and
   must never compete with the tool's own primary task action. They render with
   the secondary/outline treatment regardless of any legacy class. */
.rdt-tool .ddt-workflow-cta-btn,
.rdt-tool .ddt-actionbar-share-btn {
  background: transparent;
  color: var(--rd-text-muted);
  border: 1px solid var(--rd-border-strong);
  font-weight: 500;
}
.rdt-tool .ddt-workflow-cta-btn:hover,
.rdt-tool .ddt-actionbar-share-btn:hover {
  color: var(--rd-text-primary);
  border-color: var(--rdt-accent);
}
/* Sprint 5: state-aware continuation controls are quieted until output exists. */
.ddt-action-quiet {
  opacity: 0.55;
  filter: saturate(0.85);
}

/* Sprint 7: shared progressive-disclosure block for secondary/advanced controls.
   Native <details> — keyboard accessible, no JS, children stay in the DOM so
   tool logic keeps working while collapsed. */
.ddt-disclosure {
  margin: 12px 0;
  border: 1px solid var(--rd-border-soft, #d6ddeb);
  border-radius: var(--rd-radius-sm, 8px);
  background: var(--rd-bg-subtle, transparent);
}
.ddt-disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--rd-text-primary, inherit);
  user-select: none;
}
.ddt-disclosure > summary::-webkit-details-marker { display: none; }
.ddt-disclosure > summary::before {
  content: "▸";
  font-size: 11px;
  color: var(--rd-text-muted, #64748b);
  transition: transform 0.15s ease;
}
.ddt-disclosure[open] > summary::before { transform: rotate(90deg); }
.ddt-disclosure > summary:focus-visible {
  outline: 2px solid var(--rdt-accent, #0ea5e9);
  outline-offset: 2px;
}
.ddt-disclosure > *:not(summary) {
  padding: 0 14px;
}
.ddt-disclosure > *:last-child { padding-bottom: 12px; }
.rdt-tool .primary:focus-visible,
.rdt-tool .secondary:focus-visible,
.rdt-tool .small-btn:focus-visible,
.rdt-tool .icon-button:focus-visible {
  outline: 2px solid var(--rdt-accent);
  outline-offset: 2px;
}

/* Selects / choice groups in chrome */
.rdt-tool .ddt-select,
.rdt-tool .ddt-choice-group select {
  background: var(--rd-bg-app);
  color: var(--rd-text-primary);
  border: 1px solid var(--rd-border-strong);
  border-radius: var(--rd-radius-sm);
  padding: 6px 8px;
  font-family: var(--rd-font-mono);
}

/* Examples + next-steps sections */
.rdt-tool .ddt-examples,
.rdt-tool .section-separator.ddt-examples,
.rdt-tool .ddt-next-actions,
.rdt-tool .next-actions {
  border-color: var(--rd-border-soft);
}
/* NOTE: the workflow CTA (.ddt-workflow-cta-btn) is intentionally kept as a
   secondary/outline button by styles.css (so it doesn't compete with the
   tool's own primary button) — left as-is. */


/* ===== assets/ddt-tool-bridge.css ===== */
/* assets/ddt-tool-bridge.css
 * Legacy-primitive bridge for the redesign rollout.
 *
 * Restyles the pre-redesign building blocks (.card, .list-header, .text-input,
 * .primary/.secondary buttons, tables, badges, …) to the Figma "Modern Tool
 * Website" look whenever they live inside a `.rdt-tool` container. This lets a
 * tool page adopt the new design system by ONLY adding `rdt-tool rdt-accent-*`
 * to its <section class="page-content"> + loading ddt-tool-shell.css and this
 * file — no markup rebuild, so every feature/id/JS hook is preserved.
 *
 * Pages that were fully rebuilt to the mock (json-formatter, uuid-generator)
 * use `rdt-*` classes and do NOT load this bridge, so there is no conflict.
 *
 * Depends on the --rd-* tokens (ddt-redesign-tokens.css) and the --rdt-* accent
 * vars defined by ddt-tool-shell.css on `.rdt-tool`.
 */

/* ---- Headings / intro ---- */
.rdt-tool h1 {
  font-family: var(--rd-font-sans);
  color: var(--rd-text-primary);
  letter-spacing: var(--rd-heading-tight);
  font-weight: 700;
}
.rdt-tool h2,
.rdt-tool h3,
.rdt-tool .card-header h2,
.rdt-tool .card-header h3 {
  font-family: var(--rd-font-sans);
  color: var(--rd-text-primary);
}
.rdt-tool .subtitle { color: var(--rd-text-muted); }
.rdt-tool .tool-help { color: var(--rd-text-muted); }
.rdt-tool .results-title,
.rdt-tool .section-title {
  font-family: var(--rd-font-mono);
  color: var(--rd-text-muted);
  letter-spacing: 0.08em;
}
.rdt-tool .small { color: var(--rd-text-muted); }
.rdt-tool a { color: var(--rdt-accent); }
.rdt-tool code {
  font-family: var(--rd-font-mono);
  background: var(--rd-bg-elevated);
  border: 1px solid var(--rd-border-soft);
  border-radius: 5px;
  padding: 0 4px;
}

/* ---- Cards / panels ---- */
.rdt-tool .card,
.rdt-tool .panel,
.rdt-tool .tip-row,
.rdt-tool .compare-bar {
  border: 1px solid var(--rd-border-soft);
  border-radius: var(--rd-radius-lg);
  background: var(--rd-bg-surface);
}
.rdt-tool .card { padding: 16px; }
.rdt-tool .card-header {
  border-bottom: 1px solid var(--rd-border-soft);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.rdt-tool .list-header {
  border-bottom: 1px solid var(--rd-border-soft);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.rdt-tool .section-separator { border-color: var(--rd-border-soft); }
.rdt-tool .tip,
.rdt-tool .note,
.rdt-tool .detection-row { color: var(--rd-text-muted); }

/* ---- Inputs / textareas / selects ---- */
.rdt-tool .text-input,
.rdt-tool .output-textarea,
.rdt-tool .small-input,
.rdt-tool textarea,
.rdt-tool input[type='text'],
.rdt-tool input[type='search'],
.rdt-tool input[type='number'],
.rdt-tool input[type='url'],
.rdt-tool input[type='email'],
.rdt-tool select {
  background: var(--rd-bg-app);
  color: var(--rd-text-primary);
  border: 1px solid var(--rd-border-soft);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-mono);
}
.rdt-tool textarea,
.rdt-tool .text-input,
.rdt-tool .output-textarea {
  padding: 12px 14px;
  line-height: 1.7;
}
.rdt-tool select { padding: 7px 10px; }
.rdt-tool .text-input:focus,
.rdt-tool .output-textarea:focus,
.rdt-tool .small-input:focus,
.rdt-tool textarea:focus,
.rdt-tool input:focus,
.rdt-tool select:focus {
  outline: none;
  border-color: var(--rdt-accent);
}
.rdt-tool textarea::placeholder,
.rdt-tool input::placeholder { color: var(--rd-text-dim); }

/* ---- Buttons ---- */
.rdt-tool .primary,
.rdt-tool button.primary,
.rdt-tool .primary.small-btn {
  background: linear-gradient(135deg, var(--rdt-accent), var(--rdt-accent-2));
  color: var(--rdt-on-accent);
  border: 1px solid transparent;
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-sans);
  font-weight: 600;
}
.rdt-tool .primary:hover { opacity: 0.9; }
.rdt-tool .secondary,
.rdt-tool .small-btn,
.rdt-tool .icon-button {
  background: transparent;
  color: var(--rd-text-muted);
  border: 1px solid var(--rd-border-strong);
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-sans);
}
.rdt-tool .secondary:hover,
.rdt-tool .small-btn:hover,
.rdt-tool .icon-button:hover {
  color: var(--rd-text-primary);
  border-color: var(--rdt-accent);
}
.rdt-tool .primary:focus-visible,
.rdt-tool .secondary:focus-visible,
.rdt-tool .small-btn:focus-visible,
.rdt-tool .icon-button:focus-visible {
  outline: 2px solid var(--rdt-accent);
  outline-offset: 2px;
}
.rdt-tool .link-button { color: var(--rdt-accent); }

/* ---- Badges / chips ---- */
.rdt-tool .type-badge,
.rdt-tool .badge,
.rdt-tool .chip {
  border: 1px solid var(--rd-border-soft);
  border-radius: 999px;
  background: var(--rd-bg-elevated);
  color: var(--rd-text-muted);
  font-family: var(--rd-font-mono);
}

/* ---- Tables ---- */
.rdt-tool .data-table { width: 100%; border-collapse: collapse; }
.rdt-tool .data-table th,
.rdt-tool .data-table td {
  border-bottom: 1px solid var(--rd-border-soft);
  padding: 8px 10px;
  text-align: left;
}
.rdt-tool .data-table th { color: var(--rd-text-primary); font-weight: 700; }
.rdt-tool .data-table td { color: var(--rd-text-muted); }
.rdt-tool .table-scroll { overflow-x: auto; }

/* ---- Tabs (legacy) ---- */
.rdt-tool .tab,
.rdt-tool .tab-btn {
  background: transparent;
  color: var(--rd-text-muted);
  border: 1px solid transparent;
}
.rdt-tool .tab.is-active,
.rdt-tool .tab-btn.is-active,
.rdt-tool .tab[aria-selected='true'],
.rdt-tool .tab-btn[aria-selected='true'] {
  color: var(--rdt-accent);
  border-color: var(--rdt-accent-line);
  background: var(--rdt-accent-soft);
}

/* ---- Suggestion / inline-note blocks ---- */
.rdt-tool .ddt-suggest {
  border: 1px solid var(--rdt-accent-line);
  background: var(--rdt-accent-soft);
  border-radius: var(--rd-radius-md);
}
.rdt-tool .inline-note { color: var(--rd-text-muted); }