/* ============================================================
   BIAN Semantic API Engine — Premium Design System
   Font: Inter (body, nav) + JetBrains Mono (code)
   ============================================================ */

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

:root {
  /* Brand palette */
  --navy-950: #031611;
  --navy-900: #0c2720;
  --navy-800: #113e33;
  --navy-700: #195244;

  --blue-700: #1a4a3e;
  --blue-600: #236051;
  --blue-500: #2d7c68;
  --blue-400: #5da291;
  --blue-100: #dbece8;
  --blue-50:  #eef6f4;

  --mint-600: #24623f;
  --mint-500: #2d7a52;
  --mint-400: #4f9370;
  --mint-100: #d3e6da;
  --mint-50:  #eaf3ee;

  --amber-500: #d3841d;
  --amber-100: #f7e8be;

  /* BIAN Layer palette (v2 redesign) */
  --gold-600: #b86317;
  --gold-500: #d3841d;
  --gold-400: #e6a52a;
  --gold-100: #f7e8be;

  /* Glassmorphism surfaces */
  --surface-glass: rgba(255,255,255,0.06);
  --surface-glass-border: rgba(255,255,255,0.12);

  --purple-500: #2d7c68;
  --purple-100: #dbece8;

  --red-500: #e14848;
  --red-100: #fbdbdb;

  /* Neutrals */
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;

  /* Semantic tokens */
  --bg: var(--slate-50);
  --bg-card: #ffffff;
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-500);
  --text-tertiary: var(--slate-400);
  --accent: var(--blue-500);
  --accent-dark: var(--blue-600);
  --accent-light: var(--blue-400);
  --mint-light: var(--mint-400); /* fixes: never defined, used by healer.ejs's .hero-eyebrow/.hero h1 span */
  --success: var(--mint-500);
  --warning: var(--amber-500);
  --error: var(--red-500);

  /* Geometry */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-blue: 0 4px 20px rgba(45,124,104,.28);
  --shadow-mint: 0 4px 20px rgba(45,122,82,.22);

  /* ── Missing/alias tokens (fixes undefined var() references) ── */
  --text:         var(--text-primary);       /* legacy alias */
  --bg-alt:       var(--slate-100);          /* secondary surface color */
  --accent-muted: rgba(45,124,104,.1);       /* tinted accent background */
  --amber-400:    #e6a52a;
  --mint-300:     #7ab08f;
  --bg-primary:   var(--bg);                 /* legacy alias — used by bian-assessment, cab-workflow, change-impact, bian-certification */
  --bg-secondary: var(--bg-card);            /* legacy alias */
  --border-color: var(--border);             /* legacy alias */
  --text-sec:     var(--text-secondary);     /* legacy alias — used by analyzer, bundles, dependency-map, competitive, healer, sandbox */

  /* ── Nav / header tokens ──────────────────────────────────────────────
     Light-mode defaults, numerically matching --bg/--text-primary/--border
     for this theme (per explicit user request: header color must always
     be a function of the body's color) — overridden in [data-theme="dark"]
     below with the dark-mode equivalents. Not var()-aliased to --bg/--text-
     secondary directly: pages that also load bian-system.css get a
     competing :root that redefines those same names (--t3 etc.) and
     silently wins the cascade, which dropped nav contrast below WCAG AA
     before — literal values kept numerically in sync instead. */
  --nav-font:          'Inter', sans-serif;
  --nav-bg:            rgba(248,250,252,.9);
  --nav-panel-bg:      rgba(255,255,255,.98);
  --nav-border:        rgba(15,23,42,.1);
  --nav-sep:           rgba(15,23,42,.14);
  --nav-text:          rgba(15,23,42,.64);
  --nav-text-hover:    #0f172a;
  --nav-muted:         rgba(15,23,42,.48);
  --nav-faint:         rgba(15,23,42,.35);
  --nav-surface:       rgba(15,23,42,.04);
  --nav-surface-hover: rgba(15,23,42,.065);
  --nav-accent:        #236051;
  --nav-danger:        #c83030;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  z-index: 9999;
  display: none;
}

.progress-bar {
  height: 100%;
  background: var(--blue-500);
  width: 0%;
  animation: progress 2s ease-in-out;
}

@keyframes progress {
  0%   { width: 0%; }
  50%  { width: 70%; }
  100% { width: 100%; }
}

/* ============================================================
   STICKY NAVIGATION
   ============================================================ */
/* ============================================================
   NAVIGATION — full redesign, mobile-first
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--nav-border);
  /* Nav stays light even over a dark hero band right below it — a
     visible shadow keeps it feeling like a distinct layer instead of
     an edge that just stops. */
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.18);
  transition: background .18s, border-color .18s;
  font-family: var(--nav-font);
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0;
  height: 60px;
  min-width: 0;
  overflow: hidden;
}

/* ── Brand ── */
.nav-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 1.75rem;
}

.nav-logo {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(45,124,104,.35));
  transition: transform .18s ease;
}
.nav-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nav-brand:hover .nav-logo { transform: scale(1.06); }
/* .bp-frame (bian-system.css) adds crop-mark corners to the mark itself —
   offset outward so they read as a frame around the logo, not a border on it. */
.nav-logo.bp-frame::before, .nav-logo.bp-frame::after { width: 8px; height: 8px; }
.nav-logo.bp-frame::before { top: -3px; left: -3px; }
.nav-logo.bp-frame::after  { bottom: -3px; right: -3px; }

.nav-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--nav-text-hover);
  letter-spacing: -.15px;
  white-space: nowrap;
}
.nav-name-dim { color: var(--nav-muted); font-weight: 500; }

.nav-badge {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .58rem;
  font-weight: 700;
  background: rgba(45,124,104,.18);
  color: var(--nav-accent);
  border: 1px solid rgba(45,124,104,.32);
  padding: .18rem .48rem;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}
.nav-badge::before { content: '[ '; opacity: .55; }
.nav-badge::after  { content: ' ]'; opacity: .55; }

/* ── Center links ── */
.nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0;
  list-style: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;  /* prevent overflow pushing right-section off screen */
}

.nav-links li a {
  position: relative;
  color: var(--nav-text);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .45rem .8rem;
  border-radius: 6px;
  transition: color .15s, background .15s;
  display: block;
  white-space: nowrap;
}
.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%; right: 50%;
  height: 2px;
  background: var(--nav-accent);
  border-radius: 2px;
  transition: left .2s, right .2s;
}
.nav-links li a:hover,
.nav-links li a.nav-active {
  color: var(--nav-text-hover);
  background: var(--nav-surface-hover);
}
.nav-links li a.nav-active::after { left: .8rem; right: .8rem; }

.nav-link-sep {
  width: 1px;
  height: 18px;
  background: var(--nav-sep);
  margin: 0 .4rem;
  flex-shrink: 0;
}

/* ── Nav dropdowns (desktop, ≥1100px — grouped items from data/nav-registry.js) ── */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: var(--nav-text);
  background: none;
  border: none;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .45rem .8rem;
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.nav-active { color: var(--nav-text-hover); background: var(--nav-surface-hover); }
.nav-dropdown-caret { font-size: .62rem; transition: transform .15s; }
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  /* position:fixed (not absolute) + JS-computed top/left on open — .nav-links
     has overflow:hidden (intentional, keeps long nav rows from pushing the
     right-section off screen) which clips absolutely-positioned dropdowns;
     fixed positioning escapes that clipping since it's relative to the
     viewport instead of the overflow:hidden ancestor. */
  display: none;
  position: fixed;
  min-width: 220px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: var(--nav-panel-bg);
  border: 1px solid var(--nav-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,.14);
  padding: .4rem;
  z-index: 210;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .7rem;
  border-radius: 7px;
  color: var(--nav-text);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  transition: color .15s, background .15s;
}
.nav-dropdown-item i { width: 16px; text-align: center; color: var(--nav-faint); font-size: .8rem; }
.nav-dropdown-item:hover,
.nav-dropdown-item.nav-active { color: var(--nav-text-hover); background: var(--nav-surface); }
.nav-dropdown-item:hover i,
.nav-dropdown-item.nav-active i { color: var(--nav-accent); }

/* Nav items a tenant's plan doesn't cover — shown (not hidden) so the tool
   reads as "upgrade to unlock" rather than "doesn't exist". Applies to both
   .nav-dropdown-item (desktop) and .nav-mobile-link (mobile). */
.nav-item-locked { opacity: .55; }
.nav-item-locked:hover { opacity: .85; }
.nav-lock-icon { margin-left: auto; font-size: .68rem !important; color: var(--nav-faint) !important; width: auto !important; }

/* ── Right section ── */
.nav-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  flex-shrink: 0;
  /* Prevent overflow when nav is very crowded */
  min-width: 0;
}

/* Search trigger */
.nav-search-trigger {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: var(--nav-surface);
  border: 1px solid var(--nav-border);
  border-radius: 7px;
  padding: .38rem .75rem;
  color: var(--nav-muted);
  cursor: pointer;
  font-size: .8rem;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.nav-search-trigger:hover {
  background: var(--nav-surface-hover);
  border-color: var(--nav-sep);
  color: var(--nav-text-hover);
}
.nav-search-icon { font-size: .78rem; }
.nav-search-hint { font-size: .78rem; }
.nav-search-kbd {
  background: var(--nav-surface-hover);
  border: 1px solid var(--nav-sep);
  border-radius: 4px;
  padding: .08rem .32rem;
  font-size: .65rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--nav-muted);
}

/* CTA */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--blue-600);
  color: #fff !important;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  padding: .42rem 1rem;
  border-radius: 7px;
  border: 1px solid var(--blue-500);
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--blue-500);
  transform: translateY(-1px);
}

/* User section */
.nav-user {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding-left: .65rem;
  border-left: 1px solid var(--nav-sep);
}
.nav-guest {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.nav-role-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .63rem;
  font-weight: 800;
  padding: .2rem .52rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.nav-role-viewer  { background: rgba(100,116,139,.14); color: #475569; border: 1px solid rgba(100,116,139,.28); }
.nav-role-editor  { background: rgba(36,98,63,.14);   color: #1c4d33; border: 1px solid rgba(36,98,63,.3); }
.nav-role-admin   { background: rgba(35,96,81,.14);  color: #1a4a3e; border: 1px solid rgba(35,96,81,.3); }
[data-theme="dark"] .nav-role-viewer { background: rgba(100,116,139,.18); color: #94a3b8; border-color: rgba(100,116,139,.22); }
[data-theme="dark"] .nav-role-editor { background: rgba(45,122,82,.15);  color: #4f9370; border-color: rgba(45,122,82,.22); }
[data-theme="dark"] .nav-role-admin  { background: rgba(45,124,104,.18);  color: #8ec0b4; border-color: rgba(45,124,104,.28); }

.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: default;
}
.nav-logout {
  color: var(--nav-faint);
  font-size: .82rem;
  text-decoration: none;
  padding: .2rem .25rem;
  border-radius: 4px;
  -webkit-transition: color .15s;
  transition: color .15s;
}
.nav-logout:hover { color: var(--nav-danger); }

.nav-login-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: .35rem;
  background: rgba(45,124,104,.12);
  border: 1px solid rgba(45,124,104,.4);
  color: var(--nav-accent);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: 6px;
  -webkit-transition: background .15s, color .15s;
  transition: background .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-login-btn:hover {
  background: rgba(45,124,104,.22);
  color: var(--nav-text-hover);
}

/* ── Hamburger — shown/hidden by JS; CSS provides appearance only ──
   44x44 is the minimum recommended touch target (Apple HIG / WCAG 2.5.5);
   the previous 34x34 box was small enough that an imprecise tap could land
   just outside it and silently miss, reading as "the menu didn't open". */
.nav-hamburger {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: var(--nav-surface);
  border: 1px solid var(--nav-border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.nav-hamburger:hover { background: var(--nav-surface-hover); }
.ham-bar {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--nav-text);
  border-radius: 2px;
  transition: transform .22s, opacity .22s, width .22s;
}
.nav-hamburger.open .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open .ham-bar:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile panel ── */
/* nav-mobile-panel: shown/hidden entirely by JS (style.display) — CSS only provides visual styles */
.nav-mobile-panel {
  flex-direction: column;
  background: var(--nav-panel-bg);
  border-top: 1px solid var(--nav-border);
}

.nav-mobile-links {
  list-style: none;
  padding: .5rem 0;
}
.nav-mobile-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.5rem;
  color: var(--nav-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: color .15s, background .15s;
}
.nav-mobile-link i {
  width: 16px;
  text-align: center;
  color: var(--nav-faint);
  font-size: .82rem;
}
.nav-mobile-link:hover { color: var(--nav-text-hover); background: var(--nav-surface); }
.nav-mobile-link:hover i { color: var(--nav-accent); }

.nav-mobile-sep {
  height: 1px;
  background: var(--nav-sep);
  margin: .35rem 1.5rem;
}

/* ── Mobile nav groups (native <details> accordion, zero extra JS) ── */
.nav-mobile-group { border: none; }
.nav-mobile-group-summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.5rem;
  color: var(--nav-text);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.nav-mobile-group-summary::-webkit-details-marker { display: none; }
.nav-mobile-group-summary i:first-child { width: 16px; text-align: center; color: var(--nav-faint); font-size: .82rem; }
.nav-mobile-group-summary:hover { color: var(--nav-text-hover); background: var(--nav-surface); }
.nav-mobile-group-caret { margin-left: auto; font-size: .68rem; color: var(--nav-faint); transition: transform .15s; }
.nav-mobile-group[open] .nav-mobile-group-caret { transform: rotate(180deg); }
.nav-mobile-group-items { list-style: none; background: var(--nav-surface); }
.nav-mobile-group-items .nav-mobile-link { padding-left: 3rem; font-size: .85rem; }

.nav-mobile-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.5rem;
  border-top: 1px solid var(--nav-sep);
  gap: 1rem;
}
.nav-mobile-email {
  font-size: .78rem;
  color: var(--nav-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-mobile-logout {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--nav-danger);
  text-decoration: none;
  white-space: nowrap;
}

.nav-mobile-guest {
  display: flex;
  gap: .6rem;
  padding: .85rem 1.5rem;
  border-top: 1px solid var(--nav-sep);
}
.nav-mobile-login-btn,
.nav-mobile-cta {
  flex: 1;
  text-align: center;
  padding: .55rem .8rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav-mobile-login-btn {
  background: rgba(45,124,104,.12);
  border: 1px solid rgba(45,124,104,.4);
  color: var(--nav-accent);
}
.nav-mobile-cta {
  background: linear-gradient(135deg,#2d7c68,#236051);
  color: #fff;
}

.nav-active { color: var(--nav-text-hover) !important; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  /* background/padding intentionally NOT set here — HERO v2 below
     (~line 3980) is the active definition; this rule used to duplicate
     background+padding with slightly different values, shadowed by v2's
     !important, which was dead/confusing code. */
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .hero {
  /* Same hue family as the dark gradient (navy/indigo), pastel-tinted —
     same technique already proven in landing.ejs's .ld-hero. */
  background: linear-gradient(160deg, #eef6f4 0%, #dbece8 45%, #eef4ff 100%) !important;
}
[data-theme="light"] .hero-title       { color: #0f172a; }
[data-theme="light"] .hero-subtitle    { color: #475569; }
[data-theme="light"] .hero-stat-value  { color: #0f172a; }
[data-theme="light"] .hero-stat-label  { color: #64748b; }
[data-theme="light"] .stat-divider     { background: rgba(15,23,42,.12); }
[data-theme="light"] .hero-chip {
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.12);
  color: #475569;
}
[data-theme="light"] .btn-hero-secondary {
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.14);
  color: #334155;
}
[data-theme="light"] .btn-hero-secondary:hover {
  background: rgba(15,23,42,.08);
  border-color: rgba(15,23,42,.24);
  color: #0f172a;
}

/* Hero v2 (grid layout with architecture diagram, ~line 4012) reuses the
   same .hero background — but its own text classes were added later and
   hardcoded white/light with !important, assuming the hero is always dark.
   Since [data-theme="light"] .hero above wins the background (higher
   specificity beats the plain .hero !important at line ~4013), the v2
   text needs its own light overrides or it goes invisible on the now-light
   background — same technique as the v1 hero rules just above. */
[data-theme="light"] .hero-title-v2    { color: #0f172a !important; }
[data-theme="light"] .hero-subtitle-v2 { color: #475569 !important; }
[data-theme="light"] .trust-value      { color: #0f172a !important; }
[data-theme="light"] .trust-label      { color: #64748b !important; }
[data-theme="light"] .trust-sep        { background: rgba(15,23,42,.12); }
[data-theme="light"] .bian-arch-label  { color: rgba(15,23,42,.35); }

.hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -15%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(45,124,104,.1) 0%, transparent 65%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -40%; left: -5%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(45,122,82,.08) 0%, transparent 65%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(45,124,104,.12);
  border: 1px solid rgba(45,124,104,.25);
  color: var(--blue-400);
  padding: 0.4rem 1rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: 0.3px;
}

.eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--blue-400);
  border-radius: 50%;
  animation: pulse-dot 2.2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.7); }
}

.hero-title {
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 900;
  color: white;
  line-height: 1.12;
  letter-spacing: -1.5px;
  margin-bottom: 1.25rem;
  max-width: 800px;
}

.hero-title .highlight {
  background: var(--blue-400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255,255,255,.58);
  max-width: 600px;
  margin-bottom: 2.5rem;
  line-height: 1.8;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  gap: 0.875rem;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
}

.btn-hero-primary {
  background: var(--blue-600);
  color: white;
  padding: 0.85rem 2rem;
  border-radius: var(--radius-sm);
  border: none;
  font-weight: 700;
  font-size: 0.9375rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(35,96,81,.4);
  letter-spacing: -0.1px;
}

.btn-hero-primary:hover {
  background: var(--blue-500);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(35,96,81,.5);
}

.btn-hero-secondary {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.8);
  padding: 0.85rem 2rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 500;
  font-size: 0.9375rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all .2s;
}

.btn-hero-secondary:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
  color: white;
}

/* Stats bar */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.hero-stat { display: flex; flex-direction: column; gap: 0.2rem; }

.hero-stat-value {
  font-size: 1.65rem;
  font-weight: 900;
  color: white;
  line-height: 1;
  letter-spacing: -0.75px;
}

.hero-stat-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,.68);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-divider {
  width: 1px; height: 38px;
  background: rgba(255,255,255,.1);
}

/* Sector chips */
.hero-sectors {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.hero-chip {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
  padding: 0.28rem 0.75rem;
  border-radius: 100px;
  font-size: 0.73rem;
  font-weight: 500;
  transition: all .18s;
  cursor: default;
}

.hero-chip:hover {
  background: rgba(45,124,104,.14);
  border-color: rgba(45,124,104,.28);
  color: var(--blue-400);
}

/* ============================================================
   MAIN CONTAINER
   ============================================================ */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}

/* Scoped exception: the search-engine card (#generator) only — on very wide
   monitors the shared 1400px .container leaves a lot of dead space on each
   side of this specific card. Widened just here, not for .section-card
   generally, so every other section keeps the platform's standard width. */
@media (min-width: 1700px) {
  #generator.section-card { max-width: 1600px; margin-left: -100px; margin-right: -100px; }
}
@media (min-width: 2000px) {
  #generator.section-card { max-width: 1900px; margin-left: -250px; margin-right: -250px; }
}

/* ============================================================
   SECTION CARDS
   ============================================================ */
.section-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.75rem;
  overflow: hidden;
}

.section-card-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--slate-50);
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.section-title-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.icon-blue   { background: var(--blue-50);   color: var(--blue-600); }
.icon-mint   { background: var(--mint-50);   color: var(--mint-600); }
.icon-purple { background: var(--purple-100); color: var(--purple-500); }
.icon-amber  { background: var(--amber-100); color: #793617; }

.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.section-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
  font-weight: 400;
}

.section-card-body { padding: 2rem; }

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group-full { grid-column: 1 / -1; }

.form-label {
  font-size: 0.835rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 400;
}

.form-control,
.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.7rem 0.95rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  background: var(--bg-card);
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,124,104,.1);
}

textarea.form-control,
.form-group textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.65;
}

.form-group label {
  font-size: 0.835rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.label-hint {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  padding: 0.7rem 1.6rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all .18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
  letter-spacing: -0.1px;
}

.btn-primary {
  background: var(--blue-600);
  color: white;
  box-shadow: 0 2px 8px rgba(35,96,81,.3);
}

.btn-primary:hover {
  background: var(--blue-500);
  transform: translateY(-1px);
  box-shadow: var(--shadow-blue);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

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

.btn-ghost:hover {
  background: var(--slate-100);
  color: var(--text-primary);
}

.btn-icon { font-size: 1rem; }

.button-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  margin-top: 0.5rem;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  border: 1px solid;
  font-size: 0.875rem;
}

.alert-icon { font-size: 1.2rem; flex-shrink: 0; }
.alert-message { font-weight: 600; }
.alert-detail { margin-top: 0.2rem; opacity: .85; }

.alert-error   { background: #fef2f2; border-color: #f9c5c5; color: #872222; }
.alert-success { background: var(--mint-50);  border-color: #bbf7d0; color: #14532d; }
.alert-info    { background: var(--blue-50);  border-color: var(--blue-100); color: var(--blue-700); }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ============================================================
   RESULTS SECTION
   ============================================================ */
.results-section { }

.result-banner {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.result-banner-info h2 {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.result-banner-info p {
  color: rgba(255,255,255,.55);
  font-size: 0.82rem;
}

.result-meta-pills {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

.result-meta-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.06);
  font-family: 'JetBrains Mono', monospace;
}

/* Confidence ring */
.confidence-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.confidence-ring {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: conic-gradient(
    var(--mint-500) calc(var(--pct, 0) * 1%),
    rgba(255,255,255,.08) 0%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.confidence-ring::before {
  content: '';
  position: absolute;
  inset: 9px;
  background: var(--navy-900);
  border-radius: 50%;
}

.confidence-ring-value {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--mint-400);
  font-family: 'JetBrains Mono', monospace;
}

.confidence-ring-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,.68);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Result cards grid */
.result-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  background: var(--border);
  gap: 1px;
}

.result-card {
  background: var(--bg-card);
  padding: 1.1rem 1.4rem;
  transition: background .15s;
}

.result-card:hover { background: var(--slate-50); }

.result-card-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--text-tertiary);
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.result-card-value {
  font-size: 0.975rem;
  font-weight: 700;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
  line-height: 1.3;
}

/* HTTP method badge */
.http-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.http-POST   { background: var(--mint-100);   color: var(--mint-600); }
.http-GET    { background: var(--blue-100);   color: var(--blue-700); }
.http-PUT    { background: var(--amber-100);  color: #793617; }
.http-DELETE { background: var(--red-100);    color: #872222; }

/* Alternative domains */
.alt-domains {
  padding: 1rem 1.5rem;
  background: var(--slate-50);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.alt-domains-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.alt-domain-chip {
  font-size: 0.75rem;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.2rem 0.6rem;
  border-radius: 5px;
}

.alt-domain-chip span {
  color: var(--text-tertiary);
  font-size: 0.7rem;
}

/* ============================================================
   CODE PANELS (MacOS-style)
   ============================================================ */
.code-panel {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 1.1rem;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.code-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.1rem;
  background: var(--slate-50);
  border-bottom: 1px solid var(--border);
  gap: 0.75rem;
}

.code-panel-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.code-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
}

.dot-red    { background: #ff5f57; }
.dot-yellow { background: #ffbd2e; }
.dot-green  { background: #28c840; }

.code-panel-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.copy-btn {
  padding: 0.3rem 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all .15s;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
}

.copy-btn:hover {
  background: var(--slate-100);
  border-color: var(--slate-300);
  color: var(--text-primary);
}

.copy-btn.copied {
  background: var(--mint-50);
  border-color: var(--mint-500);
  color: var(--mint-600);
}

.code-body {
  background: #0d1117;
  color: #c9d1d9;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', monospace;
  font-size: 0.795rem;
  line-height: 1.75;
  max-height: 340px;
  overflow-y: auto;
  white-space: pre;
}

.code-body::-webkit-scrollbar { width: 5px; height: 5px; }
.code-body::-webkit-scrollbar-track { background: #161b22; }
.code-body::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }

/* ============================================================
   OPENAPI EDITOR
   ============================================================ */
.openapi-editor-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.openapi-editor, .openapi-preview {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.openapi-editor-title, .openapi-preview-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.openapi-textarea {
  width: 100%;
  height: 500px;
  background: #0d1117;
  color: #c9d1d9;
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.7;
  resize: vertical;
  outline: none;
}

.openapi-textarea:focus {
  box-shadow: 0 0 0 2px var(--accent);
  border-color: var(--accent);
}

.swagger-ui-container {
  height: 500px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

/* ============================================================
   SECTOR TABS
   ============================================================ */
.sector-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.sector-tab {
  padding: 0.38rem 0.85rem;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: var(--bg-card);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all .18s;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}

.sector-tab:hover { border-color: var(--accent); color: var(--accent); }

.sector-tab.active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: white;
}

/* ============================================================
   USE CASE CAROUSEL
   ============================================================ */

/* Sector tabs — scrollable row, no wrap */
.sector-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .25rem;
}
.sector-tabs::-webkit-scrollbar { display: none; }

/* Carousel wrapper: holds prev/next buttons + scroll track */
.uc-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.uc-carousel-btn {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .18s;
  font-size: .9rem;
}
.uc-carousel-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(45,124,104,.15);
}
.uc-carousel-btn:disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* The scrollable track */
.uc-carousel {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding-bottom: .6rem;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.uc-carousel::-webkit-scrollbar { height: 4px; }
.uc-carousel::-webkit-scrollbar-track { background: transparent; }
.uc-carousel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Count + clear row */
.uc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.uc-count {
  font-size: .78rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.uc-clear-btn {
  font-size: .75rem;
  padding: .28rem .7rem;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .18s;
  font-family: 'Inter', sans-serif;
}
.uc-clear-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Legacy grid kept for compat — carousel overrides it */
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 1rem;
}

.uc-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  overflow: hidden;
  /* carousel: fixed width so cards don't shrink */
  flex: 0 0 272px;
  min-width: 272px;
}

.uc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.uc-card:hover {
  border-color: var(--blue-400);
  box-shadow: 0 4px 18px rgba(45,124,104,.12);
  transform: translateY(-2px);
}

.uc-card:hover::before { transform: scaleX(1); }

.uc-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.uc-id {
  font-size: 0.67rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-tertiary);
  background: var(--slate-100);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.uc-complexity {
  font-size: 0.69rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 100px;
}

.uc-complexity-basic        { background: var(--mint-100); color: #163f2a; }
.uc-complexity-intermediate { background: var(--amber-100); color: #793617; }
.uc-complexity-advanced     { background: var(--red-100);   color: #872222; }

.uc-title {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.35;
}

.uc-description {
  font-size: 0.77rem;
  color: var(--text-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.uc-footer {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.uc-domain, .uc-op {
  font-size: 0.69rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  background: var(--slate-100);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.uc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.uc-tag {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--blue-700);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  padding: 0.1rem 0.42rem;
  border-radius: 100px;
}

.uc-action-hint {
  font-size: 0.7rem;
  color: var(--accent);
  text-align: right;
  opacity: 0;
  transition: opacity .18s;
  font-weight: 600;
}

.uc-card:hover .uc-action-hint { opacity: 1; }

/* ============================================================
   4 ENTREGABLES BAR
   ============================================================ */
.entregables-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 1.5rem 1.5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.entregable-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.1rem;
  border-right: 1px solid var(--border);
  background: var(--slate-50);
  transition: background .18s;
  position: relative;
}
.entregable-item:last-child { border-right: none; }

.entregable-done { background: var(--bg-card); }
.entregable-done .entregable-num  { color: var(--mint-600); }
.entregable-done .entregable-icon { color: var(--mint-500); }
.entregable-done .entregable-check { color: var(--mint-500); font-size: .85rem; margin-left: auto; flex-shrink: 0; }

.entregable-num {
  font-size: .62rem;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-tertiary);
  line-height: 1;
}

.entregable-icon { font-size: 1.1rem; color: var(--blue-400); flex-shrink: 0; }

.entregable-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.entregable-desc {
  font-size: .68rem;
  color: var(--text-secondary);
  margin-top: .1rem;
}

/* ============================================================
   API LIFECYCLE TRACK
   ============================================================ */
.lifecycle-section {
  margin: 0 1.5rem 1.5rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, var(--navy-900) 0%, #215c4d 100%);
  border-radius: var(--radius);
  color: white;
}

.lifecycle-label {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1rem;
}

.lifecycle-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  position: relative;
}
.lifecycle-track::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 2px;
  background: rgba(255,255,255,.15);
}

.lifecycle-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-align: center;
  position: relative;
  z-index: 1;
}

.lifecycle-step-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.25);
  flex-shrink: 0;
  transition: all .2s;
}
.lifecycle-step-active .lifecycle-step-dot {
  background: var(--mint-500);
  border-color: var(--mint-400);
  box-shadow: 0 0 0 4px rgba(45,122,82,.25);
}
.lifecycle-dot-next {
  background: rgba(255,255,255,.35);
  border-color: rgba(255,255,255,.5);
}
.lifecycle-dot-pending {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
}

.lifecycle-step-body { padding: 0 .2rem; }

.lifecycle-step-num {
  font-size: .6rem;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255,255,255,.5);
  font-weight: 700;
}
.lifecycle-step-active .lifecycle-step-num { color: var(--mint-300); }

.lifecycle-step-name {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  line-height: 1.2;
}
.lifecycle-step-active .lifecycle-step-name { color: white; }

.lifecycle-step-detail {
  font-size: .6rem;
  color: rgba(255,255,255,.68);
  line-height: 1.2;
}
.lifecycle-step-active .lifecycle-step-detail { color: var(--mint-300); }

/* ============================================================
   MAPPING MATRIX
   ============================================================ */
.mapping-section {
  margin: 0 1.5rem 1.5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.mapping-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  gap: 1rem;
  flex-wrap: wrap;
}

.mapping-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.mapping-badge {
  font-size: .65rem;
  font-weight: 700;
  background: var(--blue-100);
  color: var(--blue-700);
  padding: .15rem .5rem;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
}

.mapping-subtitle {
  font-size: .75rem;
  color: var(--text-secondary);
  margin-top: .2rem;
}

.mapping-table-wrapper {
  overflow-x: auto;
  border-top: 1px solid var(--border);
  max-height: 380px;
  overflow-y: auto;
}

.mapping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .75rem;
}

.mapping-table th {
  background: var(--slate-50);
  padding: .55rem .85rem;
  text-align: left;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.mapping-table td {
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: top;
}

.mapping-table tr:last-child td { border-bottom: none; }
.mapping-row-request { background: rgba(45,124,104,.02); }
.mapping-row-response { background: rgba(45,122,82,.02); }
.mapping-table tr:hover td { background: var(--slate-50); }

.mapping-td-mono { font-family: 'JetBrains Mono', monospace; font-size: .68rem; }
.mapping-bian  { color: var(--blue-700); }
.mapping-path  { color: var(--text-tertiary); font-size: .64rem; }
.mapping-desc  { max-width: 220px; color: var(--text-secondary); font-size: .7rem; }

.mapping-type {
  font-size: .65rem;
  font-weight: 600;
  padding: .1rem .4rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.mapping-type-string  { background: var(--mint-100); color: #163f2a; }
.mapping-type-object  { background: var(--blue-100); color: var(--blue-700); }
.mapping-type-integer { background: var(--amber-100); color: #793617; }
.mapping-type-boolean { background: var(--red-100); color: #872222; }

.mapping-ctx {
  font-size: .65rem;
  font-weight: 600;
  padding: .1rem .4rem;
  border-radius: 100px;
}
.mapping-ctx-request  { background: var(--blue-50); color: var(--blue-700); }
.mapping-ctx-response { background: var(--mint-100); color: #163f2a; }

/* ============================================================
   RESULTS VALUE GRID (Taller BIAN metrics)
   ============================================================ */
.results-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 1rem;
}

.result-value-card {
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  text-align: center;
}
.result-value-card:last-child { border-right: none; }

.rvc-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  margin-bottom: .3rem;
}

.rvc-label {
  font-size: .68rem;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.3;
}

/* ============================================================
   DOMAIN EXPLORER (compat wrappers)
   ============================================================ */
.form-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  margin-bottom: 1.75rem;
}

.form-section h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-section-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.mt-3 { margin-top: 1.75rem; }

/* ============================================================
   TOOLTIPS
   ============================================================ */
.tooltip {
  position: relative;
  cursor: help;
  color: var(--text-tertiary);
}

.tooltiptext {
  visibility: hidden;
  opacity: 0;
  background: var(--slate-800);
  color: white;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  position: absolute;
  z-index: 200;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.55;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  min-width: 210px;
  transition: opacity .15s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy-900);
  color: rgba(255,255,255,.68);
  padding: 2.25rem 2rem;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.footer-logo {
  width: 30px; height: 30px;
  background: var(--blue-600);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: white;
}

.footer-brand-text { display: flex; flex-direction: column; gap: 0.1rem; }
.footer-name { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,.75); }
.footer-tagline { font-size: 0.72rem; color: rgba(255,255,255,.35); }

.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.footer-links a {
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: 0.78rem;
  transition: color .15s;
}

.footer-links a:hover { color: rgba(255,255,255,.75); }

.footer-bian {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.footer-bian-badge {
  background: rgba(45,124,104,.14);
  border: 1px solid rgba(45,124,104,.25);
  color: var(--blue-400);
  padding: 0.22rem 0.6rem;
  border-radius: 5px;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.3px;
}

/* ============================================================
   LEGACY COMPAT for existing JS
   ============================================================ */
/* card class used by domain-explorer cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  transition: all .2s;
}

.card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(45,124,104,.12);
  transform: translateY(-2px);
}

.card-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
  letter-spacing: 0.5px;
}

.card-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  word-break: break-word;
}

/* code-section used by result panels */
.code-section {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.code-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.code-block {
  background: #0d1117;
  color: #c9d1d9;
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.7;
  max-height: 340px;
  overflow-y: auto;
  white-space: pre;
  border-left: 3px solid var(--accent);
}

/* results-section used by celebration JS */
.results-section { }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  background: var(--slate-50);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

.animate-fade-up { animation: fadeInUp .38s ease forwards; }

.result-card:nth-child(1) { animation: fadeInUp .3s ease .04s both; }
.result-card:nth-child(2) { animation: fadeInUp .3s ease .08s both; }
.result-card:nth-child(3) { animation: fadeInUp .3s ease .12s both; }
.result-card:nth-child(4) { animation: fadeInUp .3s ease .16s both; }
.result-card:nth-child(5) { animation: fadeInUp .3s ease .20s both; }
.result-card:nth-child(6) { animation: fadeInUp .3s ease .24s both; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet/mobile: JS shows the hamburger + full mobile panel at the same
   <=1200px breakpoint (see partials/nav.ejs's sync()) — hide the desktop
   row entirely at that point instead of partially trimming it by nth-child
   position. The old partial-trim (nth-child(n+10) at 1300px, nth-child(n+5)
   at 1100px) predates the grouped/dropdown nav and left both a truncated
   desktop row AND the hamburger visible at once in the 768-1300px range.
   1200px (not 1100px) because the dropdown triggers ("Estrategia ▾",
   "Arquitecturas ▾", "Plataforma ▾") need more width than the old flat
   links did — at 1100-1150px the row was clipping "Admin" into the
   theme toggle button. */
@media (max-width: 1200px) {
  .nav-links        { display: none; }
  .nav-search-hint  { display: none; }
  .nav-search-kbd   { display: none; }
  .nav-brand        { margin-right: 1rem; }
  /* Both the logged-in (.nav-user) and anonymous (.nav-guest) top-bar
     blocks duplicate what the mobile panel already shows (avatar+logout /
     login+CTA buttons) — hide them once the hamburger takes over so the
     cramped top bar doesn't show two "Iniciar sesión" buttons at once. */
  .nav-user         { display: none; }
  .nav-guest        { display: none; }
}

@media (max-width: 1024px) {
  .openapi-editor-container { grid-template-columns: 1fr; }
  .openapi-textarea, .swagger-ui-container { height: 380px; }
}

@media (max-width: 768px) {
  /* Nav responsive — hamburger shown via CSS !important to override inline style="display:none" */
  .nav-hamburger    { display: flex !important; }
  .nav-links        { display: none; }
  .nav-search-hint  { display: none; }
  .nav-search-kbd   { display: none; }
  .nav-cta          { display: none; }
  .nav-role-badge   { display: none; }
  .nav-name-dim     { display: none; }

  .hero { padding: 3rem 1.25rem 2.75rem; }
  .hero-title { font-size: 1.9rem; letter-spacing: -0.75px; }
  .hero-stats { gap: 1.5rem; }
  .stat-divider { display: none; }

  .container { padding: 1.5rem 1rem; }

  .form-grid { grid-template-columns: 1fr; }
  .button-group { flex-direction: column; }
  .button-group .btn { width: 100%; }

  .result-cards { grid-template-columns: 1fr 1fr; }
  .result-banner { flex-direction: column; align-items: flex-start; }
  .entregables-bar { grid-template-columns: 1fr 1fr; }
  .lifecycle-track { grid-template-columns: repeat(3, 1fr); gap: .5rem 0; }
  .lifecycle-section::before { display: none; }
  .results-value-grid { grid-template-columns: 1fr 1fr; }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-links { gap: 1rem; }
}

@media (max-width: 480px) {
  .result-cards { grid-template-columns: 1fr; }
  .uc-card { flex: 0 0 240px; min-width: 240px; }
  .hero-actions { flex-direction: column; }
  .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; }
  .entregables-bar { grid-template-columns: 1fr 1fr; }
  .lifecycle-track { grid-template-columns: repeat(2, 1fr); }
  .results-value-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Share Bar
   ============================================================ */
.share-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  flex-wrap: wrap;
}

.share-bar i { color: var(--blue-400); font-size: .8rem; }

.share-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  color: var(--blue-300, #8ec0b4);
  flex: 1;
  min-width: 160px;
  word-break: break-all;
}

.share-copy-btn, .share-mock-btn {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.15);
  padding: .3rem .7rem;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.share-copy-btn:hover, .share-mock-btn:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.share-mock-btn { color: var(--mint-400, #4f9370); border-color: rgba(79,147,112,.3); }

/* ============================================================
   Compliance Validator
   ============================================================ */
.compliance-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  .compliance-layout { grid-template-columns: 1fr; }
}

.compliance-textarea {
  width: 100%;
  height: 260px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  line-height: 1.6;
  background: var(--slate-900);
  color: var(--slate-200);
  border: 1px solid var(--slate-700);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  resize: vertical;
  outline: none;
  transition: border-color .2s;
}
.compliance-textarea:focus { border-color: var(--blue-500); }

.compliance-result-area {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.cr-score-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cr-score-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
  border: 3px solid;
}
.cr-badge-mint  { background: var(--mint-50);   border-color: var(--mint-500);   color: var(--mint-600); }
.cr-badge-blue  { background: var(--blue-50);   border-color: var(--blue-500);   color: var(--blue-700); }
.cr-badge-amber { background: var(--amber-100); border-color: var(--amber-500);  color: #793617; }
.cr-badge-red   { background: var(--red-100);   border-color: var(--red-500);    color: #872222; }

.cr-score-num  { font-size: 1.5rem; line-height: 1; }
.cr-score-grade { font-size: .7rem; font-weight: 700; }

.cr-bars { display: flex; flex-direction: column; gap: .4rem; }

.cr-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 40px;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
}

.cr-bar-track { height: 5px; background: var(--slate-200); border-radius: 99px; overflow: hidden; }
.cr-bar-fill  { height: 100%; background: var(--blue-500); }
.cr-score-num-sm { color: var(--text-secondary); text-align: right; }

.cr-issues-list { margin-top: .75rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.cr-issues-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--amber-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .4rem;
}
.cr-issue-item {
  font-size: .73rem;
  color: var(--text-secondary);
  margin-bottom: .2rem;
  display: flex;
  gap: .4rem;
}
.cr-issue-item i { color: var(--amber-500); flex-shrink: 0; margin-top: .1rem; }

.cr-suggestions { margin-top: .5rem; }
.cr-sug-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--mint-600);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .3rem;
}
.cr-sug-item {
  font-size: .73rem;
  color: var(--mint-600);
  margin-bottom: .2rem;
  display: flex;
  gap: .4rem;
}

/* ============================================================
   BIAN Quality Score Card
   ============================================================ */
.quality-score-card {
  display: flex;
  gap: 1.5rem;
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin: 0 1.5rem 1.5rem;
  flex-wrap: wrap;
}

.qs-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.qs-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid;
}

.qs-circle-mint  { border-color: var(--mint-500);   background: var(--mint-50);  }
.qs-circle-blue  { border-color: var(--blue-500);   background: var(--blue-50);  }
.qs-circle-amber { border-color: var(--amber-500);  background: var(--amber-100);}
.qs-circle-red   { border-color: var(--red-500);    background: var(--red-100);  }

.qs-number {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
}

.qs-grade {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: .04em;
}

.qs-meta { display: flex; flex-direction: column; gap: .2rem; }

.qs-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.qs-sublabel      { font-size: 1rem; font-weight: 700; }
.qs-sublabel-mint  { color: var(--mint-500); }
.qs-sublabel-blue  { color: var(--blue-600); }
.qs-sublabel-amber { color: var(--amber-500); }
.qs-sublabel-red   { color: var(--red-500); }

.qs-desc { font-size: .78rem; color: var(--text-secondary); max-width: 180px; }

.qs-right { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: .75rem; }

.qs-bars { display: flex; flex-direction: column; gap: .5rem; }

.qs-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 44px;
  align-items: center;
  gap: .5rem;
}

.qs-bar-label { font-size: .75rem; color: var(--text-secondary); font-weight: 500; }

.qs-bar-track {
  height: 6px;
  background: var(--slate-200);
  border-radius: 99px;
  overflow: hidden;
}

.qs-bar-fill {
  height: 100%;
  background: var(--blue-500);
  border-radius: 99px;
  transition: width .6s ease;
}

.qs-bar-score { font-size: .72rem; font-weight: 600; color: var(--text-secondary); text-align: right; }

.qs-issues { border-top: 1px solid var(--border); padding-top: .75rem; }

.qs-issues-title {
  font-size: .72rem;
  font-weight: 600;
  color: var(--amber-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .4rem;
}

.qs-issue-item {
  font-size: .75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin-bottom: .2rem;
}

.qs-issue-item i { color: var(--amber-500); margin-top: .1rem; flex-shrink: 0; }

/* ── Roadmap de Mejora — shown under any tool's score (generate/healer/compliance) ── */
.qs-roadmap {
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin: 0 1.5rem 1.5rem;
}
[data-theme="dark"] .qs-roadmap { background: var(--bg-card); }

.qs-roadmap-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem;
  margin-bottom: 1rem;
}
.qs-roadmap-title {
  font-size: .95rem; font-weight: 800; color: var(--text-primary);
  display: flex; align-items: center; gap: .5rem;
}
.qs-roadmap-title i { color: var(--accent); }
.qs-roadmap-counts { display: flex; gap: .4rem; flex-wrap: wrap; }

.qs-crit-pill {
  font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 99px;
  white-space: nowrap;
}
.qs-crit-critico { background: var(--red-100);   color: #a52626; }
.qs-crit-alto    { background: var(--amber-100); color: #974616; }
.qs-crit-medio   { background: var(--blue-100);  color: var(--blue-700); }
.qs-crit-bajo    { background: var(--slate-200); color: var(--text-secondary); }
[data-theme="dark"] .qs-crit-critico { background: rgba(225,72,72,.15);  color: #f4a2a2; }
[data-theme="dark"] .qs-crit-alto    { background: rgba(211,132,29,.15); color: #ebbc4f; }
[data-theme="dark"] .qs-crit-medio   { background: rgba(45,124,104,.15); color: #8ec0b4; }
[data-theme="dark"] .qs-crit-bajo    { background: rgba(148,163,184,.15);color: var(--text-tertiary); }

.qs-roadmap-phase {
  border-left: 3px solid var(--border);
  padding: .1rem 0 .1rem 1rem;
  margin-bottom: 1rem;
}
.qs-roadmap-phase:last-child { margin-bottom: 0; }
.qs-roadmap-phase.qs-crit-critico { border-left-color: var(--red-500); }
.qs-roadmap-phase.qs-crit-alto    { border-left-color: var(--amber-500); }
.qs-roadmap-phase.qs-crit-medio   { border-left-color: var(--blue-500); }
.qs-roadmap-phase.qs-crit-bajo    { border-left-color: var(--slate-400); }

.qs-roadmap-phase-header { margin-bottom: .5rem; }
.qs-roadmap-phase-title { font-size: .82rem; font-weight: 700; color: var(--text-primary); display: block; }
.qs-roadmap-phase-desc  { font-size: .74rem; color: var(--text-tertiary); }

.qs-roadmap-items { display: flex; flex-direction: column; gap: .5rem; }
.qs-roadmap-item { display: flex; align-items: flex-start; gap: .5rem; }
.qs-roadmap-item > i { color: var(--text-tertiary); font-size: .5rem; margin-top: .4rem; flex-shrink: 0; }
.qs-roadmap-item-body { flex: 1; min-width: 0; }
.qs-roadmap-item-msg { font-size: .8rem; color: var(--text-primary); line-height: 1.4; }
.qs-roadmap-item-fix {
  font-size: .74rem; color: var(--text-secondary); margin-top: .2rem;
  display: flex; align-items: flex-start; gap: .35rem; line-height: 1.4;
}
.qs-roadmap-item-fix i { color: var(--mint-500); margin-top: .15rem; flex-shrink: 0; }

/* ============================================================
   API Journey Timeline
   ============================================================ */
.journey-section {
  margin: 0 1.5rem 1.5rem;
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.journey-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}

.journey-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.journey-title i { color: var(--blue-500); }

.journey-confidence {
  font-size: .65rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.journey-confidence-high   { background: var(--mint-100);   color: var(--mint-600); }
.journey-confidence-medium { background: var(--amber-100);  color: #793617; }
.journey-confidence-low    { background: var(--slate-100);  color: var(--text-secondary); }

.journey-desc  { font-size: .8rem; color: var(--text-secondary); margin-top: .25rem; }
.journey-value { font-size: .78rem; color: var(--mint-600); margin-top: .3rem; font-weight: 500; }

.journey-track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding: 1.25rem;
  gap: 0;
  scroll-behavior: smooth;
}

.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  min-width: 130px;
  max-width: 160px;
  position: relative;
}

.journey-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  z-index: 1;
  position: relative;
}
.journey-step-color-blue  { background: var(--blue-100);  color: var(--blue-700); border: 2px solid var(--blue-400); }
.journey-step-color-mint  { background: var(--mint-100);  color: var(--mint-600); border: 2px solid var(--mint-400); }
.journey-step-color-amber { background: var(--amber-100); color: #793617;          border: 2px solid var(--amber-500); }
.journey-step-color-red   { background: var(--red-100);   color: #872222;          border: 2px solid var(--red-500); }

.journey-step-primary .journey-step-num {
  background: var(--navy-900);
  color: #fff;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(45,124,104,.25);
  transform: scale(1.15);
}

.journey-step-connector {
  position: absolute;
  top: 18px;
  left: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 2px;
  background: var(--slate-300);
}

.journey-connector-visible { display: block; }

.journey-step-body {
  margin-top: .6rem;
  text-align: center;
  padding: 0 .3rem;
}

.journey-step-domain {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.journey-step-op {
  font-size: .66rem;
  font-weight: 600;
  color: var(--blue-500);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: .15rem;
}

.journey-step-desc {
  font-size: .65rem;
  color: var(--text-secondary);
  margin-top: .3rem;
  line-height: 1.4;
}

.journey-step-tag {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  background: var(--navy-900);
  color: #fff;
  padding: .1rem .4rem;
  border-radius: 99px;
  margin-top: .3rem;
}

/* ============================================================
   SDK Snippets — Tabbed Code Viewer
   ============================================================ */
.sdk-section {
  margin: 0 1.5rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-950);
}

.sdk-header {
  padding: 1rem 1.25rem;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sdk-title {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.sdk-title i { color: var(--blue-400); }
.sdk-subtitle { font-size: .75rem; color: rgba(255,255,255,.68); margin-top: .2rem; }

.sdk-tabs-bar {
  display: flex;
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow-x: auto;
  scrollbar-width: none;
}
.sdk-tabs-bar::-webkit-scrollbar { display: none; }

.sdk-tab {
  padding: .6rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.68);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  font-family: 'JetBrains Mono', monospace;
}
.sdk-tab:hover { color: rgba(255,255,255,.75); }
.sdk-tab-active { color: var(--blue-400); border-bottom-color: var(--blue-400); }

.sdk-panels { position: relative; }

.sdk-panel { display: none; }
.sdk-panel-active { display: block; }

.sdk-panel-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.sdk-lang-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: .15rem .5rem;
  background: rgba(45,124,104,.2);
  color: var(--blue-400);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sdk-panel-toolbar .copy-btn {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  border: none;
  padding: .3rem .65rem;
  font-size: .72rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.sdk-panel-toolbar .copy-btn:hover { background: rgba(255,255,255,.14); }

.sdk-download-btn {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.1);
  padding: .3rem .65rem;
  font-size: .72rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
  margin-left: auto;
  font-family: inherit;
}
.sdk-download-btn:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }

.sdk-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  line-height: 1.65;
  color: #e2e8f0;
  padding: 1.25rem;
  overflow-x: auto;
  white-space: pre;
  background: var(--navy-950);
  margin: 0;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sdk-code::-webkit-scrollbar { width: 5px; height: 5px; }
.sdk-code::-webkit-scrollbar-track { background: transparent; }
.sdk-code::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 99px; }

/* ============================================================
   6-column entregables bar
   ============================================================ */
.entregables-bar-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1100px) {
  .entregables-bar-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .entregables-bar-6 { grid-template-columns: repeat(2, 1fr); }
  .quality-score-card { flex-direction: column; }
  .qs-bar-row { grid-template-columns: 90px 1fr 40px; }
  .journey-track { flex-direction: column; gap: 1rem; }
  .journey-step { flex-direction: row; min-width: unset; max-width: unset; width: 100%; text-align: left; align-items: flex-start; }
  .journey-step-body { text-align: left; }
  .journey-step-connector { display: none; }
}
@media (max-width: 480px) {
  .entregables-bar-6 { grid-template-columns: repeat(2, 1fr); }
  .sdk-tabs-bar { flex-wrap: nowrap; }
}

/* ============================================================
   Version pill selector
   ============================================================ */
/* ── Version selector — card style ─────────────────────────── */
.version-selector {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .4rem;
  padding: .85rem 1rem;
  background: var(--slate-50);
  border: 1.5px solid var(--border);
  border-radius: .85rem;
}

.version-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .7rem 1.35rem;
  border-radius: .6rem;
  border: 2px solid var(--border);
  cursor: pointer;
  background: var(--bg-card);
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  min-width: 76px;
  text-align: center;
}

.version-card input[type="radio"] {
  display: none;
}

.version-card:hover {
  border-color: var(--blue-400);
  background: var(--blue-50);
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(45,124,104,.12);
}

.vc-version {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.02em;
  line-height: 1;
}

.vc-badge {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .13rem .45rem;
  border-radius: .3rem;
  white-space: nowrap;
}

.vc-badge-official { background: #d3e6da; color: #163f2a; }
.vc-badge-latest   { background: #dbece8; color: #143b31; }
.vc-badge-legacy   { background: var(--slate-100); color: var(--slate-500); }

.version-card-active {
  border-color: var(--blue-500);
  background: linear-gradient(145deg, #0e2c24 0%, #236051 60%, #2d7c68 100%);
  box-shadow: 0 4px 16px rgba(45,124,104,.38);
  transform: translateY(-2px);
}

.version-card-active .vc-version {
  color: white;
}

.version-card-active .vc-badge {
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.92);
}

.version-selector-info {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  font-size: .78rem;
  color: var(--text-tertiary);
  padding: .4rem .75rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: .5rem;
}

.version-selector-info i {
  color: var(--blue-400);
  font-size: .75rem;
}

/* ── Optional filters section ────────────────────────────────── */
.optional-filters-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-tertiary);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.result-group { margin-bottom: 1.5rem; }

.result-group-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-tertiary);
  margin: 0 0 .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.optional-filters-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .85rem;
}
@media (max-width: 820px) {
  .optional-filters-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .optional-filters-row { grid-template-columns: 1fr; }
  .version-selector-info { display: none; }
  .version-card { min-width: 64px; padding: .6rem 1rem; }
}

.opt-filter { display: flex; flex-direction: column; }

/* ── Gateway Export Bar ───────────────────────────────────────────────────── */
.gateway-export-bar {
  background: linear-gradient(135deg, rgba(45,124,104,.06) 0%, rgba(45,122,82,.05) 100%);
  border: 1.5px solid rgba(45,124,104,.18);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.gateway-export-header {
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: 1rem;
}
.gateway-export-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: #fff;
}
.gateway-export-title { font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.gateway-export-subtitle { font-size: .75rem; color: var(--text-secondary); margin-top: .1rem; }
.gateway-export-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
}
@media (max-width: 820px) { .gateway-export-btns { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .gateway-export-btns { grid-template-columns: 1fr; } }

.gw-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: .85rem 1rem;
  cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
  text-align: left;
}
.gw-btn:hover { border-color: var(--accent); background: rgba(45,124,104,.07); transform: translateY(-1px); }
.gw-btn:active { transform: translateY(0); }
.gw-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.gw-btn-logo {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; margin-bottom: .35rem; flex-shrink: 0;
}
.gw-btn-name { font-size: .82rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.gw-btn-ext  { font-size: .67rem; font-family: var(--font-mono, monospace); color: var(--text-tertiary); margin-top: .05rem; }
.gw-btn-state { font-size: .7rem; font-weight: 600; margin-top: .3rem; display: none; }
.gw-btn.gw-loading .gw-btn-state { display: block; color: var(--accent); }
.gw-btn.gw-done    .gw-btn-state { display: block; color: var(--mint-500); }
.gw-btn.gw-error   .gw-btn-state { display: block; color: #ed7272; }

/* Legacy pill aliases (kept for any other references) */
.version-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill-badge { font-size: .65rem; padding: .1rem .38rem; border-radius: .25rem;
  background: var(--slate-100); color: var(--text-secondary); font-weight: 600; }
.pill-badge-official { background: #d3e6da; color: #163f2a; }

/* ── RBAC — Nav user & role badges ────────────────────────────── */
/* nav-user, nav-role, nav-search duplicate rules removed — consolidated above */

/* ── Global Search Overlay (E6-03) ────────────────────────────── */
.global-search-overlay {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;  /* inset fallback for older browsers */
  inset: 0;
  background: rgba(2,6,23,.75);
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 10vh;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  /* Prevent any inherited transform from breaking fixed positioning */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.global-search-overlay.active { opacity: 1; pointer-events: all; }
.global-search-modal {
  width: 100%; max-width: 640px; background: var(--bg-card);
  border-radius: var(--radius-xl); box-shadow: 0 24px 80px rgba(0,0,0,.4);
  border: 1px solid var(--border); overflow: hidden;
  transform: translateY(-12px); transition: transform .2s;
}
.global-search-overlay.active .global-search-modal { transform: translateY(0); }
.global-search-header {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.global-search-icon { color: var(--text-tertiary); font-size: 1rem; flex-shrink: 0; }
.global-search-input {
  flex: 1; border: none; outline: none; font-size: 1rem;
  background: transparent; color: var(--text-primary);
}
.global-search-input::placeholder { color: var(--text-tertiary); }
.global-search-esc {
  background: var(--slate-100); border: 1px solid var(--border);
  border-radius: 4px; padding: .15rem .45rem; font-size: .72rem;
  color: var(--text-tertiary); cursor: pointer; flex-shrink: 0;
}
.global-search-body { max-height: 420px; overflow-y: auto; }
.global-search-hint-row {
  display: flex; gap: .55rem; flex-wrap: wrap;
  padding: 1.1rem 1.25rem 1rem; align-items: center;
}
.global-search-hint-row::before {
  content: 'Sugerencias';
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary);
  flex-basis: 100%; margin-bottom: .35rem;
}
.global-search-hint-item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .77rem; font-weight: 500;
  padding: .3rem .75rem; border-radius: 99px;
  border: 1px solid transparent; cursor: default;
  white-space: nowrap; transition: opacity .12s;
}
.global-search-hint-item--domain {
  color: var(--blue-700); background: var(--blue-50); border-color: var(--blue-100);
}
.global-search-hint-item--uc {
  color: var(--mint-600); background: var(--mint-50); border-color: var(--mint-100);
}
.global-search-hint-item--action {
  color: var(--slate-700); background: var(--slate-100); border-color: var(--slate-200);
}
[data-theme="dark"] .global-search-hint-item--domain {
  color: var(--blue-400); background: rgba(45,124,104,.14); border-color: rgba(45,124,104,.28);
}
[data-theme="dark"] .global-search-hint-item--uc {
  color: var(--mint-400); background: rgba(45,122,82,.14); border-color: rgba(45,122,82,.28);
}
[data-theme="dark"] .global-search-hint-item--action {
  color: var(--slate-300); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16);
}
.global-search-section-title {
  padding: .6rem 1.25rem .3rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.global-search-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem 1.25rem; cursor: pointer; transition: background .12s;
  border-radius: 0;
}
.global-search-item:hover, .global-search-item.focused {
  background: var(--blue-50);
}
.global-search-item-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; flex-shrink: 0;
}
.global-search-item-icon-domain { background: var(--blue-100); color: var(--blue-600); }
.global-search-item-icon-uc     { background: var(--mint-100); color: var(--mint-600); }
.global-search-item-body { flex: 1; min-width: 0; }
.global-search-item-name {
  font-size: .9rem; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.global-search-item-desc {
  font-size: .78rem; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.global-search-item-action {
  font-size: .72rem; color: var(--text-tertiary); flex-shrink: 0;
}
.global-search-empty {
  text-align: center; padding: 2.5rem; color: var(--text-tertiary); font-size: .9rem;
}

/* ── E5-01 Confidence Panel ───────────────────────────────────── */
.confidence-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.confidence-panel-ambiguous { border-color: var(--amber-400); }
.confidence-panel-header {
  display: flex; align-items: center; gap: .75rem;
  font-size: .9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem;
}
.confidence-panel-badge {
  margin-left: auto; padding: .25rem .75rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600;
}
.confidence-panel-body {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.confidence-panel-meter {
  display: flex; align-items: center; gap: .85rem; min-width: 200px; flex: 1;
}
.confidence-meter-track {
  flex: 1; height: 10px; background: var(--slate-200);
  border-radius: 5px; overflow: hidden;
}
.confidence-meter-fill {
  height: 100%; border-radius: 5px; transition: width .8s ease;
}
.confidence-meter-value {
  font-size: 1.5rem; font-weight: 800; color: var(--text-primary); flex-shrink: 0;
}
.confidence-panel-facts {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
}
.confidence-fact {
  display: flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--text-secondary);
}
.confidence-fact i { font-size: .75rem; color: var(--text-tertiary); }
.confidence-fact strong { color: var(--text-primary); font-weight: 600; }

/* ── E5-02 Interactive Alternatives ──────────────────────────── */
.alt-domains-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.alt-domains-panel-title {
  display: flex; align-items: center; gap: .65rem;
  font-size: .9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem;
}
.alt-domains-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .85rem;
}
.alt-domain-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .85rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: border-color .2s; cursor: default;
}
.alt-domain-card:hover { border-color: var(--accent); }
.alt-domain-card-name { font-size: .88rem; font-weight: 700; color: var(--text-primary); }
.alt-domain-bar-fill {
  height: 4px; border-radius: 2px; background: var(--blue-400); transition: width .5s;
}
.alt-domain-card-meta { font-size: .75rem; color: var(--text-tertiary); }
.alt-domain-regen-btn {
  padding: .4rem .7rem; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--blue-600); font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: .35rem;
  margin-top: auto;
}
.alt-domain-regen-btn:hover { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }

/* ── Domain Hierarchy View (E3-01) ────────────────────────────── */
.domain-hierarchy-layer {
  margin-bottom: 1.75rem;
}
.domain-hierarchy-layer-header {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1rem; border-radius: var(--radius-sm);
  margin-bottom: .85rem; cursor: pointer;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  font-weight: 700; font-size: .95rem; color: #fff;
}
.dh-layer-exchange     { background: linear-gradient(135deg, #0e2c24, #236051); }
.dh-layer-business     { background: linear-gradient(135deg, #0e2c24, #1a4a3e); }
.dh-layer-system       { background: linear-gradient(135deg, #10301f, #163f2a); }
.dh-layer-infrastructure { background: linear-gradient(135deg, #622c16, #793617); }
.domain-hierarchy-layer-count {
  margin-left: auto; background: rgba(255,255,255,.2);
  border-radius: 999px; padding: .1rem .6rem; font-size: .75rem;
}
.domain-hierarchy-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem;
  padding-left: .5rem;
}
.domain-hierarchy-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .9rem 1rem;
  transition: border-color .2s, box-shadow .2s; cursor: pointer;
}
.domain-hierarchy-card:hover { border-color: var(--accent); box-shadow: var(--shadow-blue); }
.domain-hierarchy-card-name {
  font-size: .88rem; font-weight: 700; color: var(--text-primary); margin-bottom: .4rem;
}
.domain-hierarchy-card-cr {
  font-size: .75rem; color: var(--text-secondary); margin-bottom: .5rem;
  display: flex; align-items: center; gap: .35rem;
}
.domain-hierarchy-card-bqs {
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.domain-hierarchy-card-bq {
  background: var(--slate-100); color: var(--text-secondary);
  border-radius: 4px; padding: .1rem .45rem; font-size: .7rem;
}
.domain-hierarchy-card-actions {
  display: flex; gap: .4rem; margin-top: .65rem; padding-top: .65rem;
  border-top: 1px solid var(--border);
}
.domain-hierarchy-action-btn {
  flex: 1; padding: .35rem; border-radius: 5px; border: none;
  font-size: .75rem; font-weight: 600; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: .3rem;
}
.dh-btn-use  { background: var(--blue-100); color: var(--blue-700); }
.dh-btn-use:hover  { background: var(--blue-600); color: #fff; }
.dh-btn-view { background: var(--slate-100); color: var(--text-secondary); }
.dh-btn-view:hover { background: var(--slate-200); }
.dh-btn-diagram { background: var(--purple-100); color: var(--purple-500); }
.dh-btn-diagram:hover { background: var(--purple-500); color: #fff; }

/* ── Mermaid modal ────────────────────────────────────────────── */
.mermaid-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 9000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.mermaid-modal-overlay.active { opacity: 1; pointer-events: all; }
.mermaid-modal {
  background: var(--navy-950); border-radius: var(--radius-lg);
  max-width: 820px; width: 95vw; max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 32px 80px rgba(0,0,0,.5);
}
.mermaid-modal-header {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.mermaid-modal-title { font-size: 1rem; font-weight: 700; color: #fff; flex: 1; }
.mermaid-modal-tabs {
  display: flex; gap: .4rem;
}
.mermaid-tab-btn {
  padding: .35rem .75rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.12);
  background: transparent; color: rgba(255,255,255,.5); font-size: .78rem;
  cursor: pointer; transition: all .15s;
}
.mermaid-tab-btn.active { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.mermaid-modal-close {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.5);
  cursor: pointer; font-size: .85rem; display: flex; align-items: center; justify-content: center;
}
.mermaid-modal-close:hover { background: rgba(255,255,255,.2); }
.mermaid-modal-body {
  flex: 1; overflow-y: auto; padding: 1.25rem;
}
.mermaid-code-block {
  background: var(--navy-900); border-radius: var(--radius-sm);
  padding: 1rem; font-family: 'JetBrains Mono', monospace; font-size: .78rem;
  color: var(--blue-400); white-space: pre; overflow-x: auto;
  border: 1px solid rgba(45,124,104,.2);
}
.mermaid-modal-footer {
  display: flex; gap: .5rem; padding: .85rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mermaid-footer-btn {
  padding: .5rem 1rem; border-radius: 6px; border: none;
  font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: .35rem;
}
.mermaid-btn-copy { background: var(--blue-600); color: #fff; }
.mermaid-btn-copy:hover { background: var(--blue-700); }
.mermaid-btn-close-footer { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }

/* ── RBAC — Viewer restriction notice ─────────────────────────── */
.rbac-viewer-notice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: .6rem;
  padding: .75rem 1rem;
  color: #793617;
  font-size: .82rem;
  line-height: 1.5;
  margin-bottom: .75rem;
  width: 100%;
}
.rbac-viewer-notice i { color: #d3841d; margin-top: .1rem; flex-shrink: 0; }

/* ── E3-09: Hierarchy Breadcrumb ─────────────────────────────── */
.de-breadcrumb {
  display: none; align-items: center; gap: .4rem;
  padding: .45rem .75rem; margin-bottom: .75rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: .78rem;
}
.de-bc-item   { color: var(--text-tertiary); }
.de-bc-sep    { color: rgba(255,255,255,.2); }
.de-bc-layer  { color: var(--blue-400); font-weight: 600; }
.de-bc-domain { color: var(--text-primary); font-weight: 700; }

/* ── E2-08: Home recent activity ─────────────────────────────── */
.home-recent-apis {
  margin: 1.5rem 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
.home-recent-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-tertiary);
  margin-bottom: .75rem; display: flex; align-items: center;
  justify-content: space-between;
}
.home-recent-list { display: flex; flex-direction: column; gap: .4rem; }
.home-recent-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .7rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s;
}
.home-recent-item:hover { border-color: var(--blue-500); }
.home-recent-item-name { font-size: .84rem; font-weight: 600; color: var(--text-primary); }
.home-recent-item-meta { font-size: .72rem; color: var(--text-tertiary); margin-top: .1rem; }
.home-recent-empty     { font-size: .82rem; color: var(--text-tertiary); text-align: center; padding: .75rem 0; }

/* ── E5-05: Contextual tooltips ─────────────────────────────────── */
.tip {
  display: inline-flex; align-items: center; position: relative; cursor: help;
}
.tip::before {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%);
  background: var(--navy-800); color: #f1f5f9;
  font-size: .73rem; font-weight: 400; line-height: 1.5;
  padding: .5rem .8rem; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  width: max-content; max-width: 260px;
  text-align: left; white-space: normal;
  opacity: 0; pointer-events: none;
  transition: opacity .15s; z-index: 800;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.tip::after {
  content: '';
  position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--border);
  opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 800;
}
.tip:hover::before,
.tip:hover::after { opacity: 1; }

/* ============================================================
   E6-09: ACCESSIBILITY — Skip link + focus rings
   ============================================================ */
.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  text-decoration: none;
  z-index: 99999;
}
.skip-link:focus-visible {
  position: fixed;
  top: .75rem; left: 50%;
  transform: translateX(-50%);
  width: auto; height: auto;
  padding: .55rem 1.5rem;
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  background: var(--blue-600);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(35,96,81,.5);
  animation: skipLinkReveal .15s ease;
}
@keyframes skipLinkReveal {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Visible focus ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}
/* Remove default :focus for mouse, keep for keyboard */
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   E6-07: PAGE BREADCRUMBS
   ============================================================ */
.page-breadcrumbs {
  max-width: 1400px;
  margin: 0 auto;
  padding: .6rem 1.5rem;
}
.page-breadcrumbs ol {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.page-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--text-tertiary);
}
.page-breadcrumbs li + li::before {
  content: '/';
  color: var(--text-tertiary);
  opacity: .5;
}
.page-breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .15s;
}
.page-breadcrumbs a:hover { color: var(--accent); }
.page-breadcrumbs li[aria-current="page"] {
  color: var(--text-primary);
  font-weight: 600;
}
.page-breadcrumbs i { font-size: .7rem; }

/* ============================================================
   E6-08: DARK / LIGHT THEME TOGGLE
   ============================================================ */

/* Theme toggle button in nav */
.nav-theme-toggle {
  background: none;
  border: 1px solid var(--nav-border);
  border-radius: 8px;
  color: var(--nav-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.nav-theme-toggle:hover {
  background: var(--nav-surface-hover);
  color: var(--nav-text-hover);
  border-color: var(--nav-sep);
}

/* Dark theme overrides — applied when html[data-theme="dark"] */
[data-theme="dark"] {
  --bg: #0c2720;
  --bg-card: #113e33;
  --bg-alt: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.1);
  --border-strong: rgba(255,255,255,.18);
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text: #f1f5f9;
  --accent-muted: rgba(45,124,104,.15);
  /* Nav — matches --bg/--bg-card above (navy-900/800), same rule as the
     light defaults: header color is always a function of the body. */
  --nav-bg:            rgba(12,39,32,.9);
  --nav-panel-bg:      rgba(17,62,51,.98);
  --nav-border:        rgba(255,255,255,.1);
  --nav-sep:           rgba(255,255,255,.14);
  --nav-text:          rgba(255,255,255,.64);
  --nav-text-hover:    #f8fafc;
  --nav-muted:         rgba(255,255,255,.48);
  --nav-faint:         rgba(255,255,255,.35);
  --nav-surface:       rgba(255,255,255,.06);
  --nav-surface-hover: rgba(255,255,255,.1);
  --nav-accent:        #2d7c68;
  --nav-danger:        #ed7272;
  /* Redefine surface tokens so any element using slate-50/100 as background
     automatically becomes a dark surface in dark mode */
  --slate-50:  rgba(255,255,255,.04);
  --slate-100: rgba(255,255,255,.07);
  --slate-200: rgba(255,255,255,.1);
  /* Redefine light palette tints — prevent white patches in dark mode */
  --blue-50:    rgba(35,96,81,.12);
  --blue-100:   rgba(35,96,81,.18);
  --mint-50:    rgba(45,122,82,.08);
  --mint-100:   rgba(45,122,82,.12);
  --amber-100:  rgba(211,132,29,.12);
  --red-100:    rgba(225,72,72,.12);
  --purple-100: rgba(45,124,104,.12);
  --gold-100:   rgba(211,132,29,.1);
}

/* Dark mode: invert card/surface backgrounds that use hardcoded colors */
[data-theme="dark"] .hero        { background: var(--navy-950) !important; }
[data-theme="dark"] .card        { background: var(--bg-card); border-color: var(--border); }
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
  background: rgba(255,255,255,.04);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder { color: var(--text-tertiary); }

[data-theme="dark"] .ws-edit-modal,
[data-theme="dark"] .ws-share-modal { background: #113e33; border-color: var(--border); }

[data-theme="dark"] .workspace-hero,
[data-theme="dark"] .registry-hero,
[data-theme="dark"] .dashboard-hero { background: var(--navy-950); }

[data-theme="dark"] .workspace-card,
[data-theme="dark"] .registry-card { background: var(--bg-card); border-color: var(--border); }

[data-theme="dark"] .global-search-modal { background: #113e33; border-color: var(--border); }
[data-theme="dark"] .global-search-input { background: rgba(255,255,255,.05); color: var(--text-primary); }
[data-theme="dark"] .global-search-result-item:hover { background: rgba(255,255,255,.06); }

/* Dark mode: result section overrides */
[data-theme="dark"] .result-card:hover        { background: rgba(255,255,255,.06); }
[data-theme="dark"] .result-cards             { background: var(--border); }
/* entregable-item/done: handled by --slate-50 re-definition above */
[data-theme="dark"] .mapping-table td         { background: transparent; }
[data-theme="dark"] .mapping-table tr:hover td{ background: rgba(255,255,255,.03); }
/* qs-bar-track: --slate-200 is not redefined, override directly */
[data-theme="dark"] .qs-bar-track             { background: rgba(255,255,255,.1); }
/* Swagger UI: invert colors so it's readable on dark bg */
[data-theme="dark"] .swagger-ui-container .swagger-ui { filter: invert(88%) hue-rotate(180deg); }

/* Dark mode: palette-tinted badge text — hardcoded dark colors become light */
[data-theme="dark"] .http-PUT    { color: #ebbc4f; }
[data-theme="dark"] .http-DELETE { color: #f4a2a2; }
[data-theme="dark"] .uc-complexity-basic        { color: #7ab08f; }
[data-theme="dark"] .uc-complexity-intermediate { color: #ebbc4f; }
[data-theme="dark"] .uc-complexity-advanced     { color: #f4a2a2; }
[data-theme="dark"] .mapping-type-string  { color: #7ab08f; }
[data-theme="dark"] .mapping-type-integer { color: #ebbc4f; }
[data-theme="dark"] .mapping-type-boolean { color: #f4a2a2; }
[data-theme="dark"] .mapping-ctx-response { color: #7ab08f; }
[data-theme="dark"] .alert-info   { color: #8ec0b4; }
[data-theme="dark"] .icon-blue    { color: #8ec0b4; }
/* Domain modal dark surface */
[data-theme="dark"] .domain-modal-content { border: 1px solid rgba(255,255,255,.1); }

/* ============================================================
   E6-04: ONBOARDING TOUR
   ============================================================ */
.tour-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: rgba(0,0,0,.55);
}
.tour-highlight-box {
  position: fixed;
  z-index: 9001;
  border-radius: 8px;
  box-shadow: 0 0 0 4000px rgba(0,0,0,.55);
  pointer-events: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  border: 2px solid var(--blue-500);
}
.tour-card {
  position: fixed;
  z-index: 9002;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  width: 340px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.06);
  animation: tourFadeIn .25s cubic-bezier(.4,0,.2,1);
}
@keyframes tourFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tour-step-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .67rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blue-600);
  background: var(--accent-muted); border-radius: 99px;
  padding: .2rem .65rem; margin-bottom: .75rem;
}
.tour-card-title {
  font-size: 1.05rem; font-weight: 800; color: var(--text-primary);
  margin-bottom: .45rem; line-height: 1.3;
}
.tour-card-body {
  font-size: .83rem; color: var(--text-secondary); line-height: 1.65;
  margin-bottom: 1.1rem;
}
.tour-card-actions {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.tour-btn-next {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--blue-600); color: #fff;
  border: none; border-radius: 8px; padding: .48rem 1.1rem;
  font-size: .84rem; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .1s;
}
.tour-btn-next:hover { background: var(--blue-700); transform: translateY(-1px); }
.tour-btn-skip {
  background: none; border: none; color: var(--text-secondary);
  font-size: .8rem; cursor: pointer; padding: .3rem .5rem;
  border-radius: 4px; transition: color .12s;
}
.tour-btn-skip:hover { color: var(--text-primary); }
.tour-progress-dots {
  display: flex; gap: .3rem; align-items: center;
}
.tour-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); transition: all .2s;
}
.tour-dot.active { background: var(--blue-500); width: 16px; border-radius: 3px; }

/* ============================================================
   E6-05: ENHANCED EMPTY STATES
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 2rem;
  max-width: 420px;
  margin: 0 auto;
}
.empty-state-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, rgba(45,124,104,.15), rgba(45,122,82,.1));
  border: 1px solid rgba(45,124,104,.2);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--blue-400);
  margin-bottom: 1.25rem;
}
.empty-state-title {
  font-size: 1.05rem; font-weight: 700; color: var(--text-primary);
  margin-bottom: .5rem;
}
.empty-state-desc {
  font-size: .86rem; color: var(--text-secondary); line-height: 1.65;
  margin-bottom: 1.5rem;
}
.empty-state-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--blue-600); color: #fff;
  border: none; border-radius: var(--radius-sm);
  padding: .65rem 1.4rem; font-size: .88rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: background .15s, transform .15s;
}
.empty-state-cta:hover { background: var(--blue-700); transform: translateY(-1px); }
.empty-state-cta-sec {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .6rem 1.2rem; font-size: .85rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: border-color .15s, color .15s;
  margin-left: .5rem;
}
.empty-state-cta-sec:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   E6-10: TABLET RESPONSIVE (768px – 1100px)
   ============================================================ */

/* 900px: 3-col grids → 2-col */
@media (max-width: 900px) {
  .workspace-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .registry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .dashboard-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .result-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-inner { padding: 4rem 1.5rem 3rem; }
}

/* 768px: 2-col → 1-col */
@media (max-width: 768px) {
  .workspace-grid,
  .registry-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .result-cards-grid {
    grid-template-columns: 1fr;
  }
  .hero-inner {
    padding: 3rem 1rem 2.5rem;
  }
  .hero-title { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .generator-form { padding: 1.25rem; }
  .form-row { flex-direction: column; gap: .75rem; }
  .page-breadcrumbs { padding: .6rem 1rem; }
}

/* Touch-friendly targets for tablets */
@media (max-width: 1100px) and (pointer: coarse) {
  .workspace-card-btn,
  .registry-layer-pill,
  .workspace-tab,
  .drawer-tab {
    min-height: 40px;
    padding-left: .8rem;
    padding-right: .8rem;
  }
  .nav-cta { padding: .55rem 1rem; }
}

/* ============================================================
   E6-06: DOCS PAGE
   ============================================================ */
.docs-page { background: var(--bg); }
.docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - 60px);
  align-items: start;
}
.docs-sidebar {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 2rem 1.25rem;
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
}
.docs-sidebar-section { margin-bottom: 1.5rem; }
.docs-sidebar-label {
  font-size: .65rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-tertiary);
  padding: 0 .5rem; margin-bottom: .4rem; display: block;
}
.docs-sidebar-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem; border-radius: 6px;
  font-size: .85rem; color: var(--text-secondary);
  text-decoration: none; transition: background .15s, color .15s;
  margin-bottom: .1rem;
}
.docs-sidebar-link:hover, .docs-sidebar-link.active {
  background: rgba(45,124,104,.1);
  color: var(--blue-400);
}
.docs-sidebar-link i { width: 14px; text-align: center; font-size: .8rem; }

.docs-content {
  padding: 2.5rem 3rem 4rem;
  max-width: 860px;
}
.docs-hero {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.docs-hero-eyebrow {
  font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-400);
  margin-bottom: .75rem;
}
.docs-hero-title {
  font-size: 2rem; font-weight: 800; color: var(--text-primary);
  letter-spacing: -.03em; line-height: 1.2; margin-bottom: .75rem;
}
.docs-hero-desc { font-size: .98rem; color: var(--text-secondary); line-height: 1.7; }

.docs-section { margin-bottom: 3rem; scroll-margin-top: 80px; }
.docs-section-title {
  font-size: 1.3rem; font-weight: 700; color: var(--text-primary);
  margin-bottom: .75rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .5rem;
}
.docs-section-title i { color: var(--blue-400); font-size: 1rem; }
.docs-subsection { margin-top: 1.5rem; }
.docs-subsection-title {
  font-size: 1rem; font-weight: 700; color: var(--text-primary);
  margin-bottom: .5rem;
}
.docs-p {
  font-size: .9rem; color: var(--text-secondary); line-height: 1.75;
  margin-bottom: .75rem;
}
.docs-callout {
  display: flex; gap: .75rem;
  background: rgba(45,124,104,.08);
  border: 1px solid rgba(45,124,104,.2);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  margin: 1rem 0;
}
.docs-callout i { color: var(--blue-400); margin-top: .15rem; flex-shrink: 0; }
.docs-callout p { font-size: .86rem; color: var(--text-secondary); line-height: 1.6; }
.docs-callout-warn {
  background: rgba(211,132,29,.08);
  border-color: rgba(211,132,29,.2);
}
.docs-callout-warn i { color: var(--amber-500); }

.docs-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .85rem; }
.docs-table th {
  text-align: left; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-tertiary); padding: .6rem .75rem;
  border-bottom: 1px solid var(--border); background: var(--bg);
}
.docs-table td {
  padding: .6rem .75rem; border-bottom: 1px solid var(--border);
  color: var(--text-secondary); vertical-align: top;
}
.docs-table td:first-child { color: var(--text-primary); font-weight: 600; }
.docs-table tr:last-child td { border-bottom: none; }

.docs-code {
  display: block; background: var(--navy-950);
  border: 1px solid rgba(45,124,104,.18); border-radius: var(--radius-sm);
  padding: 1rem 1.25rem; font-family: 'JetBrains Mono', monospace;
  font-size: .8rem; color: var(--blue-400); overflow-x: auto;
  margin: 1rem 0; line-height: 1.6;
}
.docs-inline-code {
  font-family: 'JetBrains Mono', monospace; font-size: .82em;
  background: rgba(45,124,104,.1); color: var(--blue-400);
  padding: .1em .35em; border-radius: 4px;
}
.docs-pill-list {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0;
}
.docs-pill {
  font-size: .75rem; font-weight: 600;
  padding: .25rem .7rem; border-radius: 99px;
  background: rgba(45,124,104,.1); color: var(--blue-400);
  border: 1px solid rgba(45,124,104,.2);
}
.docs-pill-mint {
  background: rgba(45,122,82,.1); color: var(--mint-500);
  border-color: rgba(45,122,82,.2);
}

.docs-cap-group { margin-bottom: 1.75rem; }
.docs-cap-group-title {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: .75rem;
}
.docs-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .85rem; }
.docs-cap-card {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 1rem 1.1rem; text-decoration: none; display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.docs-cap-card:hover { border-color: var(--cap-color, var(--accent)); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.docs-cap-icon {
  width: 32px; height: 32px; border-radius: 8px; margin-bottom: .5rem;
  background: color-mix(in srgb, var(--cap-color, var(--accent)) 15%, transparent);
  color: var(--cap-color, var(--accent));
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.docs-cap-name { font-size: .87rem; font-weight: 700; color: var(--text-primary); margin-bottom: .3rem; }
.docs-cap-desc { font-size: .78rem; color: var(--text-secondary); line-height: 1.5; }

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.25rem;
  }
  .docs-sidebar-section { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
  .docs-content { padding: 1.5rem 1.25rem 3rem; }
}

/* ============================================================
   HERO v2 — Two-column enterprise redesign
   ============================================================ */
.hero {
  background: linear-gradient(145deg, #031611 0%, #113e33 55%, #195244 100%) !important;
  /* Reset original hero padding — v2-grid handles its own padding */
  padding: 0 !important;
}

/* Ensure hero content is always above decorative pseudo-elements */
.hero::before,
.hero::after { z-index: 0; }

.hero-v2-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 5rem 2rem 4rem;
  /* CSS Grid with flexbox fallback */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3rem;
  position: relative;
  z-index: 2;
}
/* Modern browsers: use grid */
@supports (display: grid) {
  .hero-v2-grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
  }
}

.hero-v2-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  /* Flexbox fallback: take up most of the space */
  -webkit-box-flex: 1;
  -ms-flex: 1 1 55%;
  flex: 1 1 55%;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.hero-eyebrow-v2 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: .55rem;
  background: rgba(45,124,104,.15);
  border: 1px solid rgba(45,124,104,.4);
  color: #5da291 !important;   /* --blue-400 hardcoded for reliability */
  padding: .42rem 1.1rem;
  border-radius: 100px;
  font-size: .76rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
  letter-spacing: .3px;
  white-space: nowrap;
}
.hero-eyebrow-v2 .eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--blue-400); border-radius: 50%;
  animation: pulse-dot 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

.hero-title-v2 {
  font-size: clamp(2.1rem, 3.6vw, 3.5rem);
  font-weight: 800;
  color: #ffffff !important;   /* always white on dark hero */
  line-height: 1.1;
  letter-spacing: -2px;
  margin-bottom: 1.2rem;
}
.hero-title-v2 .highlight {
  background: var(--blue-400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle-v2 {
  font-size: .97rem;
  color: rgba(255,255,255,.7) !important;  /* increased contrast */
  max-width: 540px;
  margin-bottom: 2rem;
  line-height: 1.75;
}

.hero-actions-v2 {
  display: flex;
  gap: .85rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

/* Trust bar (stat row) */
.hero-trust-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.25rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.trust-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: .15rem;
}
.trust-value {
  font-size: 1.3rem;
  font-weight: 900;
  color: #ffffff !important;
  line-height: 1;
  letter-spacing: -1px;
}
.trust-label {
  font-size: .7rem;
  color: rgba(255,255,255,.55) !important;
  font-weight: 500;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.trust-icon {
  font-size: 1.1rem;
  color: #2d7a52 !important;   /* --mint-500 hardcoded */
  line-height: 1;
}
.trust-sep {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,.18);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* ── Hero right: BIAN architecture diagram ── */
.hero-v2-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* Flexbox fallback sizing */
  -webkit-box-flex: 0;
  -ms-flex: 0 0 42%;
  flex: 0 0 42%;
  max-width: 42%;
}
/* Grid mode (virtually every real browser — see the @supports block above
   that switches .hero-v2-grid to `display:grid; grid-template-columns:55fr
   45fr`) must win over the flex-fallback max-width right above: as a grid
   item, that 42% resolves against the 45fr TRACK's own width rather than
   the grid's total width, compounding to ~42% of ~45% (~19% of the whole
   hero, ~250px) — squeezing this column to roughly half its intended
   width. Invisible with the old inline-SVG diagram (it just scales its
   viewBox to whatever width it's handed) but broke the fixed-font-size
   HTML diagram that replaced it, which doesn't reflow gracefully that
   narrow. This rule must stay AFTER the base .hero-v2-right rule above —
   same specificity, so source order decides the winner. */
@supports (display: grid) {
  .hero-v2-right { max-width: none; }
}

.bian-arch-wrapper {
  position: relative;
  width: 100%;
  max-width: 440px;
}

/* ============================================================
   BIAN 4-LAYER ARCHITECTURE DIAGRAM — flagship hero component
   Shared by landing.ejs and index.ejs via
   views/partials/bian-arch-diagram.ejs. Built on the Blueprint
   Layer primitives (.bp-corner, mono spec tags) from
   bian-system.css. Always sits on the dark hero gradient in both
   hosts, so colors below are the dark Blueprint Layer palette
   hardcoded (not theme var()s, which would flip to light-mode
   values and vanish against that background — same constraint
   the SVG this replaced had to work around).
   ============================================================ */
.bian-arch-diagram {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
  overflow: hidden;
}
/* Glass-shine sweep — a soft diagonal highlight glides across the card on
   loop. Clipped by the card's own overflow:hidden above, so it never spills
   onto the floating badges/corner marks outside it. */
.bian-arch-diagram::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 45%;
  height: 200%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.09) 55%, transparent 100%);
  transform: rotate(8deg);
  animation: badShineSweep 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badShineSweep {
  0%, 35%  { left: -60%; }
  65%, 100% { left: 130%; }
}

.bad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: 1.15rem;
}
.bad-header-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bad-header-label i { color: #5da291; flex-shrink: 0; }
.bad-header-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 99px;
  background: rgba(45,124,104,.22);
  border: 1px solid rgba(45,124,104,.45);
  color: #8ec0b4;
  white-space: nowrap;
  flex-shrink: 0;
}

.bad-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.bad-flow-line {
  position: absolute;
  left: 20px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, #e6a52a, #5da291, #4f9370, #94a3b8);
  opacity: .3;
  overflow: visible;
}
/* Traveling signal pulse — a small glowing dot runs top-to-bottom on loop,
   reading as "a request flowing through the 4 layers" rather than a static
   line. Purely decorative (aria-hidden via the parent's own role="img"
   context on the wrapping SVG-era markup is gone, but this element carries
   no text so screen readers skip it regardless). */
.bad-flow-line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(255,255,255,.85);
  animation: badFlowTravel 3.2s cubic-bezier(.4,0,.6,1) infinite;
}

@keyframes badFlowTravel {
  0%   { top: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.bad-layer {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .8rem .95rem;
  border-radius: 11px;
  border: 1px solid transparent;
  opacity: 0;
  transform: translateX(18px);
  animation: badLayerReveal .55s cubic-bezier(.22,1,.36,1) forwards;
  transition: transform .18s ease, border-color .18s ease;
}
.bad-layer:hover { transform: translateX(3px); }
.bad-layer:nth-child(1) { animation-delay: .05s; }
.bad-layer:nth-child(2) { animation-delay: .16s; margin-left: 8px;  margin-right: 8px; }
.bad-layer:nth-child(3) { animation-delay: .27s; margin-left: 16px; margin-right: 16px; }
.bad-layer:nth-child(4) { animation-delay: .38s; margin-left: 24px; margin-right: 24px; }

@keyframes badLayerReveal {
  to { opacity: 1; transform: translateX(0); }
}

.bad-layer--ex  { background: rgba(211,132,29,.1);  border-color: rgba(211,132,29,.3); }
.bad-layer--biz { background: rgba(45,124,104,.1);  border-color: rgba(45,124,104,.3); }
.bad-layer--sys { background: rgba(45,122,82,.1);   border-color: rgba(45,122,82,.3); }
.bad-layer--inf { background: rgba(148,163,184,.09); border-color: rgba(148,163,184,.25); }
.bad-layer--ex:hover  { border-color: rgba(211,132,29,.55); }
.bad-layer--biz:hover { border-color: rgba(45,124,104,.55); }
.bad-layer--sys:hover { border-color: rgba(45,122,82,.55); }
.bad-layer--inf:hover { border-color: rgba(148,163,184,.45); }

.bad-flow-dot {
  position: absolute;
  left: -21px;
  top: 1.15rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  animation: badDotPulse 2.6s ease-in-out infinite;
}
.bad-layer--ex  .bad-flow-dot { background: #e6a52a; --dot-glow: rgba(230,165,42,.7);  animation-delay: 0s; }
.bad-layer--biz .bad-flow-dot { background: #5da291; --dot-glow: rgba(93,162,145,.7);  animation-delay: .25s; }
.bad-layer--sys .bad-flow-dot { background: #4f9370; --dot-glow: rgba(79,147,112,.7);  animation-delay: .5s; }
.bad-layer--inf .bad-flow-dot { background: #94a3b8; --dot-glow: rgba(148,163,184,.6); animation-delay: .75s; }

@keyframes badDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,.07); }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,.12), 0 0 9px 2px var(--dot-glow); }
}

.bad-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  font-size: .95rem;
  color: #fff;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow .3s ease, transform .3s ease;
}
.bad-layer--ex  .bad-badge { background: linear-gradient(135deg,#d3841d,#b86317); }
.bad-layer--biz .bad-badge { background: linear-gradient(135deg,#2d7c68,#236051); }
.bad-layer--sys .bad-badge { background: linear-gradient(135deg,#2d7a52,#24623f); }
.bad-layer--inf .bad-badge { background: linear-gradient(135deg,#64748b,#475569); }
.bad-layer--ex:hover  .bad-badge { transform: scale(1.1) rotate(-4deg); box-shadow: 0 0 16px 2px rgba(211,132,29,.55); }
.bad-layer--biz:hover .bad-badge { transform: scale(1.1) rotate(-4deg); box-shadow: 0 0 16px 2px rgba(45,124,104,.55); }
.bad-layer--sys:hover .bad-badge { transform: scale(1.1) rotate(-4deg); box-shadow: 0 0 16px 2px rgba(45,122,82,.55); }
.bad-layer--inf:hover .bad-badge { transform: scale(1.1) rotate(-4deg); box-shadow: 0 0 16px 2px rgba(148,163,184,.5); }

.bad-body { flex: 1; min-width: 0; }
.bad-name {
  font-size: .9rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.1px;
  margin-bottom: .18rem;
}
.bad-desc {
  font-size: .715rem;
  color: rgba(255,255,255,.6);
  line-height: 1.4;
  margin-bottom: .5rem;
}
.bad-domains { display: flex; flex-wrap: wrap; gap: .35rem; }
.bad-domains span {
  font-family: 'JetBrains Mono', monospace;
  font-size: .625rem;
  font-weight: 600;
  padding: .16rem .5rem;
  border-radius: 99px;
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.78);
}
.bad-domain-more {
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.4) !important;
}

@media (max-width: 900px) {
  .bad-desc { display: none; }
}

/* [data-theme="light"] variant — this diagram sits on index.ejs's hero,
   which (unlike landing.ejs's .ld-hero) actually turns light in light theme
   (see the [data-theme="light"] .hero rule and its comment above, ~line
   704) — the dark-hardcoded colors above would go near-invisible there.
   A fairly opaque light panel with dark text also reads fine for the rarer
   case of a returning visitor who toggled light mode landing back on
   landing.ejs's always-dark .ld-hero backdrop — same "light card floating
   on dark backdrop" look landing.ejs's card already used before this
   diagram was unified into one shared component. */
[data-theme="light"] .bian-arch-diagram {
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.1);
  box-shadow: 0 24px 60px -24px rgba(15,23,42,.25);
}
[data-theme="light"] .bad-header-label { color: rgba(15,23,42,.5); }
[data-theme="light"] .bad-header-label i { color: #236051; }
[data-theme="light"] .bad-header-tag {
  background: rgba(45,124,104,.12);
  border-color: rgba(45,124,104,.3);
  color: #236051;
}
[data-theme="light"] .bad-name { color: #0f172a; }
[data-theme="light"] .bad-desc { color: rgba(15,23,42,.6); }
[data-theme="light"] .bad-domains span {
  background: rgba(15,23,42,.055);
  color: rgba(15,23,42,.68);
}
[data-theme="light"] .bad-domain-more {
  background: rgba(15,23,42,.03) !important;
  color: rgba(15,23,42,.35) !important;
}
[data-theme="light"] .bad-flow-dot { box-shadow: 0 0 0 3px rgba(15,23,42,.05); }

/* ============================================================
   ALTERNATIVE HERO DIAGRAM — "Semantic Pipeline"
   views/partials/bian-pipeline-diagram.ejs. Shares .bian-arch-diagram/
   .bad-header as its outer shell (same card chrome, corners, shine sweep,
   light-theme handling) but replaces the 4-layer reference body with a
   3-step capability pipeline: input case → engine classification → the
   platform's real 6 deliverables. Dark-hardcoded for the same reason as
   the rest of this component (see the big comment above it).
   ============================================================ */
.bpl-step {
  display: flex;
  gap: .85rem;
  opacity: 0;
  transform: translateY(10px);
  animation: bplStepIn .5s cubic-bezier(.22,1,.36,1) forwards;
}
.bpl-step:nth-child(1) { animation-delay: .05s; }
.bpl-step:nth-child(3) { animation-delay: .3s; }
.bpl-step:nth-child(5) { animation-delay: .55s; }
@keyframes bplStepIn { to { opacity: 1; transform: translateY(0); } }

.bpl-step-num {
  flex-shrink: 0;
  width: 30px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  font-weight: 800;
  color: rgba(255,255,255,.25);
  letter-spacing: .03em;
  padding-top: .1rem;
}
.bpl-step-body { flex: 1; min-width: 0; }
.bpl-step-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
  margin-bottom: .5rem;
}
.bpl-step-meta {
  font-size: .66rem;
  color: rgba(255,255,255,.42);
  margin-top: .5rem;
  font-family: 'JetBrains Mono', monospace;
}

/* Step 1 — code-editor style input snippet, always dark regardless of
   theme (same convention as real code blocks across the platform). */
.bpl-code-snippet {
  background: #0a1512;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: .6rem .8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem;
  color: #c8d3e8;
  line-height: 1.5;
}
.bpl-code-prompt { color: #5da291; font-weight: 700; margin-right: .4rem; }
.bpl-cursor {
  display: inline-block;
  width: 6px;
  height: 12px;
  margin-left: 2px;
  background: #5da291;
  vertical-align: middle;
  animation: bplCursorBlink 1s step-end infinite;
}
@keyframes bplCursorBlink { 50% { opacity: 0; } }

/* Connector between steps — vertical rule with a traveling glow, same
   "signal flowing through the pipeline" idea as the reference diagram's
   flow line, just oriented per-step instead of running the full height. */
.bpl-connector {
  position: relative;
  width: 30px;
  height: 22px;
  display: flex;
  justify-content: center;
}
.bpl-connector::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(93,162,145,.5), rgba(93,162,145,.1));
}
.bpl-connector-pulse {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #5da291;
  box-shadow: 0 0 8px 3px rgba(93,162,145,.75);
  animation: bplConnectorTravel 2s ease-in-out infinite;
}
@keyframes bplConnectorTravel {
  0%   { top: 0%;   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Step 2 — layer pills cycle through an "evaluating" highlight (X→B→S→I)
   before settling, then the resolved domain name fades in — dramatizes
   the actual classification the semantic engine performs. */
.bpl-layer-pills {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.bpl-layer-pill {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  animation: bplPillCycle 3.6s ease-in-out infinite;
}
.bpl-pill--ex  { animation-delay: 0s; }
.bpl-pill--biz { animation-delay: .35s; }
.bpl-pill--sys { animation-delay: .7s; }
.bpl-pill--inf { animation-delay: 1.05s; }
@keyframes bplPillCycle {
  0%, 8%, 100% { color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); transform: scale(1); }
  4%           { color: #fff; background: rgba(93,162,145,.35); border-color: rgba(93,162,145,.7); transform: scale(1.12); }
}
/* Light-theme keyframe twin — the animation above sets color/background/
   border-color directly in its own keyframes, which overrides any static
   [data-theme="light"] rule for those same properties (animations always
   win over non-animated declarations while running). Swapping just
   animation-name below is the fix, same pattern as the dark-hardcoded SVG
   text colors elsewhere in this component. */
@keyframes bplPillCycleLight {
  0%, 8%, 100% { color: rgba(15,23,42,.5); background: rgba(15,23,42,.06); border-color: rgba(15,23,42,.14); transform: scale(1); }
  4%           { color: #fff; background: rgba(45,124,104,.75); border-color: rgba(45,124,104,.9); transform: scale(1.12); }
}
[data-theme="light"] .bpl-layer-pill { animation-name: bplPillCycleLight; }
.bpl-layer-result {
  font-size: .78rem;
  font-weight: 800;
  color: #8ec0b4;
  margin-left: .3rem;
  opacity: 0;
  animation: bplResultIn .5s ease forwards;
  animation-delay: 1.6s;
}
.bpl-layer-result i { font-size: .68rem; margin-right: .3rem; }
@keyframes bplResultIn { to { opacity: 1; } }

/* Step 3 — deliverable chips, staggered pop-in */
.bpl-deliverables {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.bpl-deliverables span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .3rem .6rem;
  border-radius: 99px;
  background: rgba(45,124,104,.14);
  border: 1px solid rgba(45,124,104,.35);
  color: #8ec0b4;
  opacity: 0;
  transform: scale(.85);
  animation: bplChipIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
.bpl-deliverables span i { font-size: .66rem; color: #5da291; }
.bpl-deliverables span:nth-child(1) { animation-delay: .7s; }
.bpl-deliverables span:nth-child(2) { animation-delay: .78s; }
.bpl-deliverables span:nth-child(3) { animation-delay: .86s; }
.bpl-deliverables span:nth-child(4) { animation-delay: .94s; }
.bpl-deliverables span:nth-child(5) { animation-delay: 1.02s; }
.bpl-deliverables span:nth-child(6) { animation-delay: 1.1s; }
@keyframes bplChipIn { to { opacity: 1; transform: scale(1); } }

/* Footer — "the rest of the platform". Visually distinct from the pipeline
   above (outlined chips, not solid) so it reads as "also available" rather
   than "part of this run's output". */
.bpl-divider {
  border-top: 1px dashed rgba(255,255,255,.14);
  margin: 1.1rem 0 .9rem;
}
.bpl-platform {
  opacity: 0;
  animation: bplChipIn .5s ease forwards;
  animation-delay: 1.3s;
}
.bpl-platform-label {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: rgba(255,255,255,.42);
  margin-bottom: .55rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.bpl-platform-label i { color: #5da291; }
.bpl-platform-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.bpl-platform-chips span {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: .655rem;
  font-weight: 600;
  padding: .26rem .55rem;
  border-radius: 99px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.62);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.bpl-platform-chips span:hover {
  border-color: rgba(93,162,145,.6);
  color: #8ec0b4;
  background: rgba(93,162,145,.1);
}
.bpl-platform-chips span i { font-size: .62rem; }

.bpl-stats-row {
  display: flex;
  gap: 1.1rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-wrap: wrap;
}
.bpl-stat { display: flex; flex-direction: column; gap: .1rem; }
.bpl-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.bpl-stat-lbl {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: rgba(255,255,255,.4);
}

[data-theme="light"] .bpl-step-label { color: rgba(15,23,42,.75); }
[data-theme="light"] .bpl-step-num   { color: rgba(15,23,42,.22); }
[data-theme="light"] .bpl-step-meta  { color: rgba(15,23,42,.4); }
[data-theme="light"] .bpl-layer-result { color: #236051; }
[data-theme="light"] .bpl-deliverables span { background: rgba(45,124,104,.08); border-color: rgba(45,124,104,.25); color: #236051; }
[data-theme="light"] .bpl-divider { border-top-color: rgba(15,23,42,.12); }
[data-theme="light"] .bpl-platform-label { color: rgba(15,23,42,.5); }
[data-theme="light"] .bpl-platform-label i { color: #236051; }
[data-theme="light"] .bpl-platform-chips span { border-color: rgba(15,23,42,.14); color: rgba(15,23,42,.55); }
[data-theme="light"] .bpl-platform-chips span:hover { border-color: rgba(45,124,104,.5); color: #236051; background: rgba(45,124,104,.08); }
[data-theme="light"] .bpl-stats-row { border-top-color: rgba(15,23,42,.1); }
[data-theme="light"] .bpl-stat-val { color: #0f172a; }
[data-theme="light"] .bpl-stat-lbl { color: rgba(15,23,42,.4); }

/* Floating domain badges overlaid on diagram */
.bian-float-badge {
  position: absolute;
  font-size: .68rem;
  font-weight: 700;
  padding: .28rem .75rem;
  border-radius: 100px;
  white-space: nowrap;
  pointer-events: none;
  animation: floatBadge 4s ease-in-out infinite alternate;
}
.bian-float-badge--blue {
  background: rgba(35,96,81,.25);
  border: 1px solid rgba(45,124,104,.5);
  color: var(--blue-400);
}
.bian-float-badge--mint {
  background: rgba(45,122,82,.2);
  border: 1px solid rgba(45,122,82,.5);
  color: var(--mint-400);
  animation-delay: 1.2s;
}
.bian-float-badge--amber {
  background: rgba(211,132,29,.2);
  border: 1px solid rgba(211,132,29,.5);
  color: var(--gold-400);
  animation-delay: 2.5s;
}

@keyframes floatBadge {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

@media (max-width: 1000px) {
  .hero-v2-grid {
    grid-template-columns: 1fr;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 3.5rem 1.5rem 3rem;
  }
  .hero-v2-left  { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; max-width: 100%; }
  .hero-v2-right { display: none; }
}

/* ============================================================
   BIAN LANDSCAPE MAP — Domain heatmap section
   ============================================================ */
.bian-landscape-section {
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
}
.bian-landscape-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(35,96,81,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(45,122,82,.05) 0%, transparent 50%);
  pointer-events: none;
}

.bian-landscape-inner {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.bian-landscape-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.bian-landscape-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(45,124,104,.1);
  border: 1px solid rgba(45,124,104,.25);
  color: var(--blue-400);
  padding: .35rem .9rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.bian-landscape-title {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: .5rem;
}
.bian-landscape-subtitle {
  font-size: .88rem;
  color: rgba(255,255,255,.68);
}

/* 7-column capability matrix */
.bian-landscape-matrix {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
  overflow-x: auto;
  min-width: 800px;
}
.bian-landscape-scroll {
  overflow-x: auto;
  padding-bottom: .5rem;
}
.bian-landscape-scroll::-webkit-scrollbar { height: 4px; }
.bian-landscape-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 2px; }
.bian-landscape-scroll::-webkit-scrollbar-thumb { background: rgba(45,124,104,.4); border-radius: 2px; }

.bian-cap-column {}
.bian-cap-header {
  font-size: .63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.68);
  padding: .5rem .4rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: .4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bian-domain-tile {
  padding: .3rem .45rem;
  border-radius: 4px;
  font-size: .6rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  margin-bottom: .25rem;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}
.bian-domain-tile:hover {
  color: #fff;
  transform: scale(1.02);
  border-color: rgba(255,255,255,.15);
}
.bian-domain-tile--exchange { background: rgba(211,132,29,.18); }
.bian-domain-tile--exchange:hover { background: rgba(211,132,29,.3); }
.bian-domain-tile--business { background: rgba(35,96,81,.18); }
.bian-domain-tile--business:hover { background: rgba(35,96,81,.3); }
.bian-domain-tile--system  { background: rgba(45,122,82,.15); }
.bian-domain-tile--system:hover  { background: rgba(45,122,82,.28); }
.bian-domain-tile--infrastructure { background: rgba(71,85,105,.25); }
.bian-domain-tile--infrastructure:hover { background: rgba(71,85,105,.4); }

.bian-landscape-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}
.bian-landscape-legend {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  color: rgba(255,255,255,.5);
}
.legend-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.legend-dot--exchange     { background: rgba(211,132,29,.7); }
.legend-dot--business     { background: rgba(45,124,104,.7); }
.legend-dot--system       { background: rgba(45,122,82,.7); }
.legend-dot--infra        { background: rgba(71,85,105,.7); }
.bian-landscape-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--blue-400);
  text-decoration: none;
  transition: color .15s;
}
.bian-landscape-cta:hover { color: var(--blue-300, #8ec0b4); }

/* ============================================================
   API FLOW DIAGRAM — inline SVG section
   ============================================================ */
.api-flow-section {
  padding: 3.5rem 2rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.api-flow-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.api-flow-header {
  text-align: center;
  margin-bottom: 2rem;
}
.api-flow-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.5px;
  margin-bottom: .4rem;
}
.api-flow-subtitle {
  font-size: .85rem;
  color: var(--text-secondary);
}
.api-flow-svg-wrap {
  overflow-x: auto;
}
.api-flow-svg {
  width: 100%;
  min-width: 700px;
  height: auto;
}
[data-theme="dark"] .api-flow-section {
  background: var(--navy-900);
  border-top-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .api-flow-title { color: #fff; }
[data-theme="dark"] .api-flow-subtitle { color: rgba(255,255,255,.68); }

/* ============================================================
   TRUST SIGNALS SECTION
   ============================================================ */
.trust-section {
  padding: 4rem 2rem;
  background: var(--slate-50);
  border-top: 1px solid var(--border);
}
[data-theme="dark"] .trust-section {
  background: var(--navy-800);
  border-top-color: rgba(255,255,255,.06);
}
.trust-section-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.trust-section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-tertiary);
  margin-bottom: 2rem;
}
.trust-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.trust-pillar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.trust-pillar:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
[data-theme="dark"] .trust-pillar {
  background: var(--navy-700);
  border-color: rgba(255,255,255,.08);
}
.trust-pillar-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 0 auto 1rem;
}
.trust-pillar-icon--blue   { background: rgba(35,96,81,.12); color: var(--blue-500); }
.trust-pillar-icon--mint   { background: rgba(45,122,82,.12); color: var(--mint-500); }
.trust-pillar-icon--amber  { background: rgba(211,132,29,.12); color: var(--gold-500); }
.trust-pillar-value {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -1.5px;
  margin-bottom: .3rem;
}
[data-theme="dark"] .trust-pillar-value { color: #fff; }
.trust-pillar-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .35rem;
}
[data-theme="dark"] .trust-pillar-name { color: rgba(255,255,255,.85); }
.trust-pillar-desc {
  font-size: .76rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .trust-pillars { grid-template-columns: 1fr; }
  .bian-landscape-matrix { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   GENERATOR COMMAND CENTER — enhanced header style
   ============================================================ */
.gen-command-header {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -1.5rem -1.5rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gen-command-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(45,124,104,.15);
  border: 1px solid rgba(45,124,104,.3);
  color: var(--blue-400);
  padding: .3rem .8rem;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .5px;
}
.gen-command-badge i { font-size: .7rem; }
.gen-command-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.3px;
}
.gen-command-subtitle {
  font-size: .8rem;
  color: rgba(255,255,255,.68);
  margin-top: .15rem;
}
.gen-social-proof {
  font-size: .72rem;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.gen-social-proof i { color: var(--mint-500); font-size: .7rem; }

/* ── Case-description textarea — tinted to match the platform palette,
   not the near-black terminal look this used to have. */
.form-control-dark {
  background: var(--blue-50);
  border-color: var(--blue-100);
  color: var(--text-primary);
  caret-color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: .88rem;
}
.form-control-dark::placeholder { color: var(--text-tertiary); }
.form-control-dark:focus {
  background: var(--bg-card);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,124,104,.1);
}

/* ── Layer selector icon buttons ── */
.bian-layer-btns {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.bian-layer-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .5rem .85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all .15s;
  text-decoration: none;
}
.bian-layer-btn-code {
  font-size: 1rem;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
}
.bian-layer-btn-name {
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-tertiary);
}
.bian-layer-btn--x { border-color: rgba(211,132,29,.3); }
.bian-layer-btn--x .bian-layer-btn-code { color: #d3841d; }
.bian-layer-btn--x:hover, .bian-layer-btn--x.active {
  background: rgba(211,132,29,.1); border-color: rgba(211,132,29,.6);
}
.bian-layer-btn--b { border-color: rgba(45,124,104,.3); }
.bian-layer-btn--b .bian-layer-btn-code { color: var(--blue-500); }
.bian-layer-btn--b:hover, .bian-layer-btn--b.active {
  background: rgba(35,96,81,.1); border-color: rgba(45,124,104,.6);
}
.bian-layer-btn--s { border-color: rgba(45,122,82,.3); }
.bian-layer-btn--s .bian-layer-btn-code { color: var(--mint-500); }
.bian-layer-btn--s:hover, .bian-layer-btn--s.active {
  background: rgba(45,122,82,.1); border-color: rgba(45,122,82,.6);
}
.bian-layer-btn--i { border-color: rgba(148,163,184,.3); }
.bian-layer-btn--i .bian-layer-btn-code { color: var(--slate-400); }
.bian-layer-btn--i:hover, .bian-layer-btn--i.active {
  background: rgba(148,163,184,.1); border-color: rgba(148,163,184,.5);
}
[data-theme="dark"] .bian-layer-btn { background: var(--navy-800); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .bian-layer-btn-name { color: rgba(255,255,255,.35); }

/* ============================================================
   RESPONSIVE FIXES — new sections (v2 redesign)
   ============================================================ */

/* Generator command header: stack vertically on mobile */
@media (max-width: 640px) {
  .gen-command-header {
    flex-direction: column;
    align-items: flex-start;
    margin: -1rem -1rem 1rem;
    padding: 1rem 1.1rem;
  }
}

/* Landscape section: fewer columns on small screens */
@media (max-width: 640px) {
  .bian-landscape-section { padding: 2.5rem 1rem; }
  .bian-landscape-matrix  { grid-template-columns: repeat(2, 1fr); gap: .3rem; }
  .bian-landscape-header  { grid-template-columns: repeat(2, 1fr); }
}

/* API flow section */
@media (max-width: 640px) {
  .api-flow-section { padding: 2.5rem 1rem; }
  .api-flow-svg     { min-width: 560px; } /* keep readable; outer div scrolls */
}

/* Trust section */
@media (max-width: 480px) {
  .trust-section  { padding: 2.5rem 1rem; }
}

/* Hero v2 — trust bar wrapping on small phones */
@media (max-width: 480px) {
  .hero-trust-bar { gap: .75rem; }
  .trust-value    { font-size: 1.05rem; }
  .hero-v2-grid   { padding: 2.5rem 1rem 2rem; }
  .hero-title-v2  { letter-spacing: -1px; }
}

/* Hero v2 — eyebrow badge was white-space:nowrap (fine on desktop), which
   overflowed past the viewport edge on phones since the label text is long
   ("Plataforma Integral de Arquitectura Bancaria · BIAN v14 Official ·
   OpenAPI 3.0"). Let it wrap below this width instead of clipping/overflowing. */
@media (max-width: 600px) {
  .hero-eyebrow-v2 { white-space: normal; text-align: left; line-height: 1.5; }
}

/* ── Banner sections on page-specific views ── */
@media (max-width: 640px) {
  .cap-banner,
  .iso-banner,
  .diag-banner { padding: 1.25rem 1rem; }

  .cap-banner-inner,
  .iso-banner-inner,
  .diag-banner-inner { flex-direction: column; gap: 1rem; }

  .bian-layer-strip { gap: .35rem; }
  .bian-layer-chip  { font-size: .65rem; padding: .28rem .55rem; }

  .iso-bridge-panel { width: 100%; max-width: 360px; }
  .diag-anatomy-panel { width: 100%; max-width: 380px; }
}

/* ── Global registry / dashboard responsive fixes ── */
@media (max-width: 600px) {
  .registry-hero-inner,
  .dashboard-hero-inner { flex-direction: column; gap: .75rem; }
}

/* ============================================================
   CROSS-BROWSER COMPATIBILITY ADDITIONS
   ============================================================ */

/* Smooth scrolling only when user hasn't requested reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Ensure input/select/textarea inherit font on all browsers */
input, select, textarea, button {
  font-family: inherit;
}

/* Safari fix: position sticky on nav */
@supports (position: -webkit-sticky) {
  .site-nav { position: -webkit-sticky; position: sticky; }
}

/* iOS Safari: prevent tap highlight on interactive elements */
a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}