:root {
  --bg: #0b1220;
  --surface: rgba(20, 28, 44, 0.8);
  --border: rgba(100, 116, 139, 0.24);
  --text: #e5e7eb;
  --muted: #94a3b8;
  /* Default theme: purple-forward palette */
  --primary: #8b5cf6; /* violet-500 */
  --primary-contrast: #0b1220;
  --accent: #c084fc;   /* purple-400 */
  --accent-2: #7c3aed; /* violet-600 */
  --ring: rgba(139, 92, 246, 0.35);
  /* High-contrast brand color for icons/logos across themes */
  --brand-visible: #7c3aed; /* violet-600 */
}

/* Smooth scroll behavior for in-page navigation */
html { scroll-behavior: smooth; }

/* Light theme neutrals */
:root[data-theme="light"] {
  --bg: #f8fafc; /* slate-50 */
  --surface: rgba(255, 255, 255, 0.85);
  --border: rgba(15, 23, 42, 0.12); /* slate-900 at low alpha */
  --text: #0f172a; /* slate-900 */
  --muted: #64748b; /* slate-500 */
  /* Light theme also uses purple for visual consistency */
  --primary: #7c3aed; /* violet-600 */
  --primary-contrast: #ffffff;
}

/* Strengthen text utility contrast in light theme */
:root[data-theme="light"] .text-slate-100,
:root[data-theme="light"] .text-white { color: #0f172a !important; }
:root[data-theme="light"] .text-slate-200 { color: #334155 !important; } /* slate-700 */
:root[data-theme="light"] .text-slate-300 { color: #475569 !important; } /* slate-600 */
:root[data-theme="light"] .text-slate-400 { color: #64748b !important; } /* slate-500 */
/* Ensure hover contrast: override Tailwind hover:text-white in light theme */
:root[data-theme="light"] .hover\:text-white:hover { color: #0f172a !important; }

/* Strengthen note/info block contrast in light theme */
:root[data-theme="light"] .text-blue-200 { color: #1d4ed8 !important; } /* blue-700 */
:root[data-theme="light"] .text-amber-200 { color: #b45309 !important; } /* amber-700 */
:root[data-theme="light"] .bg-blue-900\/20 { background-color: rgba(59, 130, 246, 0.12) !important; } /* blue-500 @12% */
:root[data-theme="light"] .border-blue-700\/30 { border-color: rgba(29, 78, 216, 0.30) !important; } /* blue-700 @30% */
:root[data-theme="light"] .bg-amber-900\/20 { background-color: rgba(245, 158, 11, 0.12) !important; } /* amber-500 @12% */
:root[data-theme="light"] .border-amber-700\/30 { border-color: rgba(217, 119, 6, 0.30) !important; } /* amber-700 @30% */

/* Soften dark panel backgrounds for light theme */
:root[data-theme="light"] .bg-slate-800\/40 { background-color: rgba(241, 245, 249, 0.75) !important; } /* slate-100 @75% */
:root[data-theme="light"] .border-slate-700 { border-color: #cbd5e1 !important; } /* slate-300 */
:root[data-theme="light"] .bg-slate-800 { background-color: #f1f5f9 !important; } /* slate-100 */

/* Typography helpers */
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-black { font-weight: 900 !important; }
.font-semibold { font-weight: 600 !important; }

/* Header nav hover: use theme accent and bold for clarity */
header nav a:not(.btn):hover {
  color: var(--accent) !important;
  font-weight: 600;
}

/* Social links (header/footer) */
.social-links { display: inline-flex; align-items: center; gap: .4rem; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: .35rem;
  min-width: 36px; min-height: 36px;
  color: var(--muted);
  background: color-mix(in oklab, var(--bg) 88%, var(--surface) 12%);
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.social-link:hover { 
  color: var(--accent); 
  border-color: color-mix(in oklab, var(--border) 50%, var(--accent) 50%);
  background: color-mix(in oklab, var(--bg) 82%, var(--surface) 18%);
  transform: translateY(-1px);
}
.social-link i { width: 16px; height: 16px; }

/* Strengthen status badge brand colors in light theme */
:root[data-theme="light"] .text-emerald-300 { color: #065f46 !important; } /* emerald-700 */
:root[data-theme="light"] .text-emerald-400 { color: #047857 !important; } /* emerald-600 */
:root[data-theme="light"] .text-amber-300 { color: #b45309 !important; } /* amber-700 */
:root[data-theme="light"] .text-amber-400 { color: #a16207 !important; } /* amber-600 */
:root[data-theme="light"] .text-blue-300 { color: #1d4ed8 !important; } /* blue-700 */
:root[data-theme="light"] .text-blue-400 { color: #2563eb !important; } /* blue-600 */
:root[data-theme="light"] .text-cyan-300 { color: #0e7490 !important; } /* cyan-700 */
:root[data-theme="light"] .text-cyan-400 { color: #0891b2 !important; } /* cyan-600 */

/* Dynamic gradient background */
.app-bg { background-color: var(--bg); color: var(--text); }
/* Multi-corner ambient gradient with subtle motion */
.app-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    /* top-left */
    radial-gradient(1100px 700px at 6% 6%, color-mix(in oklab, var(--accent-2) 30%, transparent), transparent 58%),
    /* top-right */
    radial-gradient(1100px 700px at 94% 10%, color-mix(in oklab, var(--primary) 26%, transparent), transparent 60%),
    /* bottom-left */
    radial-gradient(1200px 800px at 8% 92%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 62%),
    /* bottom-right */
    radial-gradient(1200px 800px at 92% 90%, color-mix(in oklab, var(--accent-2) 22%, transparent), transparent 64%),
    /* soft vertical sheen */
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  background-size: 110% 110%;
  animation: appAmbient 22s ease-in-out infinite alternate;
  will-change: background-position, opacity;
}

.app-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* gentle glow layer that shifts slightly */
  background:
    radial-gradient(900px 500px at 15% 15%, color-mix(in oklab, var(--accent-2) 16%, transparent), transparent 65%),
    radial-gradient(900px 500px at 85% 85%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 65%);
  opacity: .12;
  animation: appGlow 18s ease-in-out infinite alternate;
  will-change: transform, background-position, opacity;
}

@keyframes appAmbient {
  0%   { background-position: 0% 50%, 100% 50%, 0% 100%, 100% 0%, 50% 50%; }
  50%  { background-position: 20% 55%, 80% 45%, 10% 90%, 90% 10%, 50% 50%; }
  100% { background-position: 40% 50%, 60% 50%, 20% 80%, 80% 20%, 50% 50%; }
}

@keyframes appGlow {
  0%   { opacity: .10; transform: translate3d(0,0,0); background-position: 0% 0%, 100% 100%; }
  50%  { opacity: .14; transform: translate3d(0,0,0); background-position: 20% 20%, 80% 80%; }
  100% { opacity: .12; transform: translate3d(0,0,0); background-position: 40% 40%, 60% 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .app-bg::before, .app-bg::after { animation: none; }
}

/* Global font family for consistent typography */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }

/* Modern cards */
.glass-card {
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: saturate(140%) blur(8px);
  border-radius: 1.25rem;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.35), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.card-header {
  border-bottom: 1px solid var(--border);
}

/* Buttons */
.btn { 
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .75rem; padding: .6rem 1rem; font-weight: 600; transition: all .2s ease;
  font-size: .9rem; /* match input font-size for equal heights */
  line-height: 1; /* normalize vertical metrics against inputs */
  min-height: 44px; min-width: 44px;
}
.btn-sm { padding: .4rem .6rem; }
.btn-primary { background: var(--primary); color: var(--primary-contrast); box-shadow: 0 8px 30px color-mix(in oklab, var(--primary) 25%, transparent); }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-secondary { border: 1px solid var(--border); color: var(--text); background: color-mix(in oklab, var(--bg) 80%, var(--surface) 20%); }
.btn-secondary:hover { border-color: color-mix(in oklab, var(--border) 60%, var(--primary) 40%); }
.btn-tertiary { background: transparent; color: var(--text); border: 1px dashed var(--border); }
.btn-tertiary:hover { background: color-mix(in oklab, var(--bg) 90%, var(--surface) 10%); border-color: color-mix(in oklab, var(--border) 60%, var(--accent) 40%); }
.btn:disabled,
.icon-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(82%);
}
.btn:active { transform: translateY(0); filter: brightness(0.98); }
.btn-secondary:active { border-color: color-mix(in oklab, var(--border) 50%, var(--primary) 50%); }
.btn-danger { background: #ef4444; color: #ffffff; box-shadow: 0 8px 30px color-mix(in oklab, #ef4444 25%, transparent); }
.btn-danger:hover { filter: brightness(1.05); transform: translateY(-1px); }
/* Dedicated deeper emerald accent for Try/Postman */
.btn-emerald { background: var(--primary); color: var(--primary-contrast); box-shadow: 0 8px 30px color-mix(in oklab, var(--primary) 25%, transparent); }
.btn-emerald:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Pills/Chips */
.pill { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--accent) 8%, transparent); color: var(--text); border-radius: 999px; padding: .25rem .6rem; font-size: .75rem; }
/* High-contrast chips for plan/status and similar labels */
.chip { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; height: 1.25rem; line-height: 1.25rem; white-space: nowrap; padding: 0 .5rem; font-size: .75rem; font-weight: 600; border: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 84%, var(--surface) 16%); color: var(--text); }
.chip-muted { background: color-mix(in oklab, var(--bg) 88%, var(--surface) 12%); color: var(--text); border-color: var(--border); }
.chip-success { border-color: color-mix(in oklab, #10b981 55%, var(--border)); background: color-mix(in oklab, #10b981 32%, var(--bg)); color: #000000; }
.chip-warning { border-color: color-mix(in oklab, #f59e0b 55%, var(--border)); background: color-mix(in oklab, #f59e0b 32%, var(--bg)); color: #0b1220; }
.chip-danger { border-color: color-mix(in oklab, #ef4444 55%, var(--border)); background: color-mix(in oklab, #ef4444 30%, var(--bg)); color: #ffffff; }

/* Modern nav */
.nav-modern .nav-link { border-radius: .75rem; }
.nav-modern .nav-link[data-active="true"] { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); color: var(--text); }
.nav-modern .nav-link[data-active="false"] { color: var(--muted); }

/* Feature cards grid: equal heights and consistent alignment */
.feature-grid { align-items: stretch; grid-auto-rows: 1fr; }

/* Prevent multi-column flow for sensitive bullet lists */
.no-columns { column-count: 1; column-gap: normal; }
.prevent-breaks { break-inside: avoid; }
.security-list li { max-width: 60ch; flex-wrap: wrap; }
.nav-modern .nav-link[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

/* Sidebar nav groups */
.nav-group { border: 0; }
.nav-group-summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; border-radius: .75rem; padding: .5rem .75rem; color: var(--text); border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 85%, var(--surface) 15%);
}
.nav-group-summary:hover { border-color: color-mix(in oklab, var(--border) 60%, var(--accent) 40%); }
.nav-group-body { padding-left: .25rem; padding-right: .25rem; padding-top: .25rem; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .2s ease, opacity .15s ease; }
.nav-group[open] .nav-group-summary i[data-lucide="chevron-down"] { transform: rotate(180deg); transition: transform .15s ease; }
.nav-group .nav-group-summary i[data-lucide="chevron-down"] { transition: transform .15s ease; }
/* When open, JS sets max-height to content height; opacity uses CSS */
.nav-group[open] .nav-group-body { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-group-body { transition: none; }
}

/* Icon button */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 85%, var(--surface) 15%); color: var(--text); border-radius: .6rem; padding: .4rem .6rem; line-height: 1; min-height: 44px; min-width: 44px; }
.icon-btn:hover { border-color: color-mix(in oklab, var(--border) 60%, var(--accent) 40%); }
/* Compact size for small buttons in tight rows */
.btn.btn-sm, .icon-btn.btn-sm { min-height: 36px; }

/* Touch target size for nav links */
.nav-modern .nav-link { border-radius: .75rem; min-height: 44px; }

/* Visible keyboard focus styles */
.btn:focus-visible,
.icon-btn:focus-visible,
.nav-modern .nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring);
}

/* Discrete width utility classes to avoid inline style width */
.barw-0 { width: 0%; }
.barw-5 { width: 5%; }
.barw-10 { width: 10%; }
.barw-15 { width: 15%; }
.barw-20 { width: 20%; }
.barw-25 { width: 25%; }
.barw-30 { width: 30%; }
.barw-35 { width: 35%; }
.barw-40 { width: 40%; }
.barw-45 { width: 45%; }
.barw-50 { width: 50%; }
.barw-55 { width: 55%; }
.barw-60 { width: 60%; }
.barw-65 { width: 65%; }
.barw-70 { width: 70%; }
.barw-75 { width: 75%; }
.barw-80 { width: 80%; }
.barw-85 { width: 85%; }
.barw-90 { width: 90%; }
.barw-95 { width: 95%; }
.barw-100 { width: 100%; }

/* Quick actions menu: ensure readable hover contrast */
.quick-actions-menu button { color: var(--text); }
.quick-actions-menu button:hover {
  background: color-mix(in oklab, var(--accent) 18%, var(--surface) 82%);
  color: var(--text);
}
.icon-btn.quick-actions-toggle:hover {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface) 88%);
  color: var(--text);
}
.quick-actions-toggle:hover i { color: var(--accent); }

/* Two-row action bar layout */
.action-bar { 
  display: flex; 
  align-items: center; 
  gap: .5rem;
}

/* Ensure the quick actions (ellipsis) sits inside the grid cell */
.action-bar .quick-actions-wrapper { position: relative; }

/* Users section: symmetric columns and bottom-aligned actions */
.section-users-col { display: flex; flex-direction: column; }
.section-users-col .form-card { flex: 1; display: flex; flex-direction: column; }
.section-users-col .form-card .form-actions { margin-top: auto; }

/* Ensure Users grid columns have equal height so actions align at the bottom */
.users-grid { align-items: stretch; grid-auto-rows: 1fr; }
.users-grid .section-users-col { height: 100%; }

/* Gate: force-hide containers regardless of breakpoint */
.gate-hidden { display: none !important; }

/* Inputs and selects */
.input, .select {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 85%, var(--surface) 15%);
  color: var(--text);
  border-radius: .75rem;
  padding: .6rem .75rem;
  font-size: .9rem;
  line-height: 1; /* normalize vertical metrics against buttons */
  transition: box-shadow .15s ease, border-color .15s ease;
  min-height: 44px; /* equalize with buttons for symmetry */
}

/* Input with icon wrapper */
.input-with-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.input-with-icon .input {
  padding-right: 3rem; /* Make space for the icon */
}

.input-with-icon .input-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  z-index: 1;
}
.input::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); }
.input:focus, .select:focus {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring);
}
.input[disabled], .select[disabled] {
  opacity: .6; cursor: not-allowed; filter: saturate(80%);
}
.help-text { font-size: .75rem; color: var(--muted); }
.error-text { font-size: .75rem; color: #f43f5e; }

/* Console design system utilities */
.FormRow { display: flex; flex-direction: column; gap: .5rem; }
.ActionsRow { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.Label { font-size: .9rem; font-weight: 600; color: color-mix(in oklab, var(--text) 78%, var(--muted) 22%); }
.Field { width: 100%; }
.HelpText { font-size: .8rem; color: var(--muted); }

/* Headings accent underline */
.accent-underline { position: relative; }
.accent-underline::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 72px; height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 999px; }

/* Text utilities for theme colors */
.text-accent { color: var(--accent); }
.text-primary { color: var(--primary); }
.text-accent-2 { color: var(--accent-2); }
/* Theme-safe brand color utility for hero icon/logos */
.hero-brand-color { color: var(--brand-visible); }
/* Theme-safe hero background: subtle, readable in both modes */
.hero-bg {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bg) 72%, var(--surface) 28%),
    color-mix(in oklab, var(--bg) 68%, var(--surface) 32%)
  );
}

/* Modernized hero typography and layout helpers */
.hero-title {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.hero-subtitle {
  margin-top: .4rem;
  font-size: .98rem;
  color: color-mix(in oklab, var(--text) 75%, var(--muted) 25%);
}
.hero-actions { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }

/* Partner/logo styling for a cleaner, modern feel */
.logo-cloud { display: flex; align-items: center; gap: .75rem; }
.logo-muted { opacity: .75; filter: grayscale(1) contrast(1.05) brightness(1.06); transition: opacity .2s ease, filter .2s ease, transform .2s ease; }
.logo-muted:hover { opacity: 1; filter: none; transform: translateY(-1px); }

/* Subtle divider under hero to reduce heavy borders */
.hero-divider { height: 1px; background: var(--border); opacity: .5; }

/* Soft gradient shimmer motion (GPU friendly) */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(1200px 600px at 10% 20%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 55%),
              radial-gradient(1000px 500px at 90% 80%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 60%);
  opacity: .12;
  background-size: 120% 120%;
  animation: heroShimmer 14s ease-in-out infinite alternate;
  will-change: transform, background-position;
}

@keyframes heroShimmer {
  0%   { background-position: 0% 50%, 100% 50%; transform: translate3d(0,0,0); }
  50%  { background-position: 50% 55%, 50% 45%; }
  100% { background-position: 100% 50%, 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg::after { animation: none; opacity: .08; }
}

/* Utility height for compact logos when tailwind utilities are unavailable */
.h-7 { height: 1.75rem; }

/* Method badge styles are now handled by JavaScript getMethodColor function */

/* Fixed white text utility for chips on dark surfaces */
.text-white-fixed { color: #ffffff !important; }
:root[data-theme="light"] .text-white-fixed { color: #ffffff !important; }

/* Theme-aware overrides for common slate utilities used in markup */
.text-slate-100 { color: var(--text) !important; }
.text-slate-200 { color: color-mix(in oklab, var(--text) 85%, var(--muted) 15%) !important; }
.text-slate-300 { color: color-mix(in oklab, var(--text) 75%, var(--muted) 25%) !important; }
.text-slate-400 { color: color-mix(in oklab, var(--text) 70%, var(--muted) 30%) !important; }
.text-slate-500 { color: var(--muted) !important; }
.text-white { color: var(--text) !important; }
.border-slate-700, .border-slate-800, .border-slate-800\/80 { border-color: var(--border) !important; }
.bg-slate-800 { background: color-mix(in oklab, var(--bg) 80%, var(--surface) 20%) !important; }
.bg-slate-900 { background: color-mix(in oklab, var(--bg) 88%, var(--surface) 12%) !important; }
.bg-slate-900\/30 { background: color-mix(in oklab, var(--bg) 92%, var(--surface) 8%) !important; }
.bg-slate-900\/40 { background: color-mix(in oklab, var(--bg) 90%, var(--surface) 10%) !important; }
.bg-slate-900\/50 { background: color-mix(in oklab, var(--bg) 88%, var(--surface) 12%) !important; }
.bg-slate-900\/60 { background: color-mix(in oklab, var(--bg) 86%, var(--surface) 14%) !important; }
.bg-slate-900\/70 { background: color-mix(in oklab, var(--bg) 84%, var(--surface) 16%) !important; }
.bg-slate-950\/90 { background: color-mix(in oklab, var(--bg) 80%, var(--surface) 20%) !important; }

/* Code blocks and chips on theme */
code.bg-slate-900 { background: transparent !important; color: var(--text); }
.prose pre, pre.bg-slate-900\/60 { background: transparent !important; color: var(--text); }
/* Unified code block styling */
.code-block { 
  background: transparent;
  color: var(--text);
  border-top: 1px solid var(--border);
}

/* Markdown viewer content styles moved from inline */
.content a { color: var(--primary); text-decoration: underline; }
.content pre { background: transparent; border: 1px solid var(--border); padding: .75rem; border-radius: .75rem; overflow-x: auto; }
.content code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.content h1, .content h2, .content h3 { color: var(--text); margin-top: 1rem; }
.error { color: #fca5a5; }

/* Inline docs pane: theme-aware background and readable typography in both modes */
#inlineDocsPane { background: color-mix(in oklab, var(--bg) 90%, var(--surface) 10%) !important; border-color: var(--border) !important; }
#inlineDocsPane .text-slate-400 { color: color-mix(in oklab, var(--text) 70%, var(--muted) 30%) !important; }
#inlineDocsPane .text-slate-300 { color: color-mix(in oklab, var(--text) 78%, var(--muted) 22%) !important; }
#inlineDocsPane .text-slate-200 { color: color-mix(in oklab, var(--text) 86%, var(--muted) 14%) !important; }

/* Full-width mode for inline docs pane */
#inlineDocsPane.is-full { left: 0; right: 0; max-width: none; }

/* Ensure prose content in docs pane respects theme variables */
.prose { color: var(--text); }
.prose a { color: var(--primary); text-decoration: underline; }
.prose h1, .prose h2, .prose h3 { color: var(--text); }
/* Beautify markdown inside prose */
.prose p { line-height: 1.7; }
.prose code { background: color-mix(in oklab, var(--bg) 80%, var(--surface) 20%); border: 1px solid var(--border); padding: .15rem .35rem; border-radius: .35rem; }
.prose pre { background: color-mix(in oklab, var(--bg) 84%, var(--surface) 16%); border: 1px solid var(--border); padding: .85rem; border-radius: .75rem; overflow-x: auto; }
.prose pre code { background: transparent; border: 0; padding: 0; }
.prose blockquote { border-left: 3px solid var(--border); padding-left: .85rem; color: color-mix(in oklab, var(--text) 78%, var(--muted) 22%); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin: .25rem 0; }
.prose table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); }
.prose th, .prose td { border: 1px solid var(--border); padding: .5rem .6rem; }
.prose th { background: color-mix(in oklab, var(--bg) 88%, var(--surface) 12%); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--accent) 10%, var(--surface) 90%); color: var(--text); border-radius: .5rem; padding: .12rem .42rem; font-size: .65rem; }
.badge-admin { background: color-mix(in oklab, var(--accent-2) 16%, var(--surface) 84%); border-color: color-mix(in oklab, var(--accent-2) 28%, var(--border)); }

/* Simple tooltips */
.has-tooltip { position: relative; }
.has-tooltip[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; left: 100%; top: 50%; transform: translateY(-50%) translateX(8px); white-space: nowrap; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: .7rem; padding: .28rem .5rem; border-radius: .5rem; box-shadow: 0 12px 30px rgba(2,6,23,.55); }

/* Disabled states for buttons and icon buttons */
.btn[aria-disabled="true"],
.icon-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(80%);
}

.btn[aria-disabled="true"]:focus,
.icon-btn[aria-disabled="true"]:focus {
  outline: 2px dashed var(--border);
  outline-offset: 2px;
}

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

/* Sidebar collapsed/compact modes */
body.sidebar-collapsed aside { display: none !important; }
body.sidebar-compact aside { width: 5rem !important; overflow-y: auto; overflow-x: hidden; }
body.sidebar-compact aside > div { display: none; } /* hide section headings like Favorites/Navigation */
body.sidebar-compact aside nav { padding-left: .5rem; padding-right: .5rem; }
body.sidebar-compact aside .nav-link { justify-content: center; padding: .5rem; gap: 0; width: 100%; }
body.sidebar-compact aside .nav-link i { margin: 0; }
body.sidebar-compact aside .nav-link span { display: none; } /* hide text labels */
body.sidebar-compact aside .nav-link .badge { display: none; } /* hide admin badges in compact */
body.sidebar-compact aside #pinnedNav, 
body.sidebar-compact aside .nav-modern { row-gap: .25rem; }
/* Compact mode: shrink group headers */
body.sidebar-compact aside .nav-group-summary { justify-content: center; padding: .5rem; }
body.sidebar-compact aside .nav-group-summary span { display: none; }
body.sidebar-compact aside .nav-group-body { padding: 0; }
/* Ensure nav blocks render and are scrollable in compact mode */
body.sidebar-compact aside nav { display: flex; flex-direction: column; align-items: center; }
body.sidebar-compact aside nav .nav-link { display: inline-flex !important; }
body.sidebar-compact aside #pinnedNav, body.sidebar-compact aside .nav-modern { max-height: calc(100vh - 4rem); overflow-y: auto; overflow-x: hidden; }
/* === UI QA refinements: consistency, hierarchy, readability === */
/* Stronger active state for sidebar/nav links */
.nav-modern .nav-link[data-active="true"] { font-weight: 600; }
.nav-modern .nav-link[data-active="true"] i { color: var(--accent); }

/* Form rhythm: increase field stack spacing and help text separation */
.FormRow { gap: .75rem; }
.HelpText { margin-top: .25rem; }

/* Chips: add info variant and spacing when adjacent */
.chip-info { border-color: color-mix(in oklab, #3b82f6 55%, var(--border)); background: color-mix(in oklab, #3b82f6 28%, var(--bg)); color: #0f172a; }
.chip + .chip { margin-left: .35rem; }

/* Tables: alternating row backgrounds for clarity */
.table.table-striped tbody tr:nth-child(even) { background: color-mix(in oklab, var(--bg) 90%, var(--surface) 10%); }

/* Users list: subtle stripes to aid scanning */
#usersList .user-row:nth-child(even) { background: color-mix(in oklab, var(--bg) 92%, var(--surface) 8%); }

/* Toast notifications */
.toast-container { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: flex; flex-direction: column; gap: .5rem; }
.toast { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 85%, var(--surface) 15%); color: var(--text); border-radius: .6rem; padding: .5rem .75rem; box-shadow: 0 12px 30px rgba(2,6,23,.55); }
.toast-success { border-color: color-mix(in oklab, var(--border) 40%, #22c55e 60%); }
.toast-error { border-color: color-mix(in oklab, var(--border) 40%, #ef4444 60%); }
.bg-slate-950 { background: color-mix(in oklab, var(--bg) 97%, var(--surface) 3%) !important; }
.bg-slate-950\/60 { background: color-mix(in oklab, var(--bg) 93%, var(--surface) 7%) !important; }
.bg-slate-950\/70 { background: color-mix(in oklab, var(--bg) 91%, var(--surface) 9%) !important; }
.bg-slate-950\/80 { background: color-mix(in oklab, var(--bg) 89%, var(--surface) 11%) !important; }

/* Connectivity banners */
.banner {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 88%, var(--surface) 12%);
  color: var(--text);
  border-radius: 1rem;
  padding: .75rem 1rem;
  font-size: .8rem;
  backdrop-filter: saturate(130%) blur(6px);
}
.banner-success {
  border-color: color-mix(in oklab, var(--border) 40%, #22c55e 60%);
  background: color-mix(in oklab, var(--surface) 90%, #22c55e 10%);
}
.banner-error {
  border-color: color-mix(in oklab, var(--border) 40%, #ef4444 60%);
  background: color-mix(in oklab, var(--surface) 90%, #ef4444 10%);
}

/* Copilot floating action button (FAB) with heartbeat animation */
.copilot-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 70%, #0000), color-mix(in oklab, var(--accent) 50%, #0000));
  color: var(--primary-contrast);
  box-shadow: 0 12px 30px color-mix(in oklab, var(--primary) 28%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  cursor: grab;
}
.copilot-fab:hover { filter: brightness(1.06); transform: translateY(-1px) scale(1.03); }
.copilot-fab i { width: 22px; height: 22px; }
.copilot-fab.dragging { cursor: grabbing; }
.copilot-fab .ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 22%, transparent);
  animation: copilotHeartbeat 1.8s ease-in-out infinite;
}
.copilot-fab.pulse-fade .ring { opacity: .28; }

.copilot-fab.minimized {
  width: 40px;
  height: 40px;
  box-shadow: 0 8px 22px color-mix(in oklab, var(--primary) 20%, transparent);
}
.copilot-fab.minimized i { width: 18px; height: 18px; }

@keyframes copilotHeartbeat {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 24%, transparent); transform: scale(1); }
  30%  { box-shadow: 0 0 0 10px color-mix(in oklab, var(--primary) 18%, transparent); transform: scale(1.06); }
  60%  { box-shadow: 0 0 0 18px color-mix(in oklab, var(--primary) 12%, transparent); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 0%, transparent); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .copilot-fab .ring { animation: none; }
}

/* Prevent content sections from sliding under sticky filter bar */
.api-section {
  scroll-margin-top: 96px;
}

/* Standardized table component */
.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.table thead {
  background: color-mix(in oklab, var(--bg) 84%, var(--surface) 16%);
}
.table thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: color-mix(in oklab, var(--text) 70%, var(--muted) 30%);
  border-bottom: 1px solid var(--border);
}
.table tbody tr {
  border-bottom: 1px solid var(--border);
}
.table tbody tr:last-child {
  border-bottom: 0;
}
.table th,
.table td {
  padding: .6rem .9rem;
  vertical-align: middle;
}
.table tbody tr:hover {
  background: color-mix(in oklab, var(--bg) 86%, var(--surface) 14%);
}

/* Table density variants */
.table.table-compact th,
.table.table-compact td { padding: .45rem .7rem; font-size: .85rem; }
.table.table-dense th,
.table.table-dense td { padding: .35rem .55rem; font-size: .78rem; }