/* =============================================================================
   Discovery Redesign — tokens, fonts, components
   All styles scoped under `.app` so they can't leak into pages still on the
   old `layouts/application` shell. Used by `layouts/dashboard_v2.html.erb`.
   ============================================================================= */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter/Inter-400-1e94a563.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter/Inter-500-5949f5fc.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter/Inter-600-a957bd0d.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter/Inter-700-cbc762c0.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url("/assets/geist/Geist-500-0568aa9c.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url("/assets/geist/Geist-600-7e10f290.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url("/assets/geist/Geist-700-eed57b57.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens — light (default), dark override ---------- */
.app {
  /* Surfaces */
  --bg: #f6f7f9;
  --surface-1: #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #f0f2f5;

  /* Sidebar stays dark in both themes */
  --sidebar-bg: #111317;
  --sidebar-fg: #e7e9ec;
  --sidebar-muted: #8a8f98;
  --sidebar-hover: #1b1e24;
  --sidebar-active-bg: #23272f;
  --sidebar-active-fg: #ffffff;
  --sidebar-border: #1e2127;

  /* Foreground */
  --fg: #0d0f12;
  --fg-muted: #5a626e;
  --fg-subtle: #8a8f98;
  --border: #e6e8ec;
  --border-strong: #d3d7dd;
  --ring: rgba(88, 101, 242, 0.25);

  /* Accent — cobalt */
  --accent: #3b4cf6;
  --accent-fg: #ffffff;
  --accent-soft: #eef0ff;
  --accent-soft-fg: #1f2db8;

  /* Semantic */
  --success: #15803d;
  --success-soft: #dcfce7;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 17, 21, 0.06), 0 2px 4px rgba(15, 17, 21, 0.04);

  color: var(--fg);
  background: var(--bg);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.003em;
}

.app.dark {
  --bg: #0a0b0d;
  --surface-1: #141619;
  --surface-2: #1a1d21;
  --surface-3: #20242a;

  --sidebar-bg: #0d0f12;
  --sidebar-fg: #e7e9ec;
  --sidebar-muted: #7c8088;
  --sidebar-hover: #181b20;
  --sidebar-active-bg: #23272f;
  --sidebar-active-fg: #ffffff;
  --sidebar-border: #1a1d21;

  --fg: #e7e9ec;
  --fg-muted: #9aa0ab;
  --fg-subtle: #6b7280;
  --border: #23272f;
  --border-strong: #2d323c;
  --ring: rgba(130, 143, 255, 0.35);

  --accent: #8290ff;
  --accent-fg: #0a0b0d;
  --accent-soft: rgba(130, 143, 255, 0.14);
  --accent-soft-fg: #aab5ff;

  --success: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.12);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ---------- Layout shell ----------
   Fixed-position sidebar + main-wrap margin (not CSS grid) so the existing
   sidebar_controller can collapse the sidebar via -translate-x-full / ml-64
   class toggles. Scoped under .app #sidebar (class + ID) to outrank the
   legacy #sidebar rules in application.tailwind.css. */
.app-shell {
  min-height: 100vh;
}

/* Sidebar — fixed-position container that narrows to a 4rem rail instead of
   sliding off-screen. The existing sidebar_controller still toggles the
   `-translate-x-full` class on collapse; we just repurpose that class to mean
   "collapsed to rail" via a width change. */
.app #sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 16rem;
  /* 100dvh accounts for mobile browser chrome (URL bar) so the sidebar is
     never taller than the visible viewport — the footer/profile stays pinned
     to the bottom of what the user actually sees. The safe-area insets push
     the sidebar's content above the iOS home indicator / under the notch. */
  height: 100vh;
  height: 100dvh;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 40;
  overflow: hidden;
  transition: width 300ms ease-in-out;
}
.app #sidebar.-translate-x-full {
  width: 4rem;
  /* Tailwind's .-translate-x-full utility applies `translate: -100%`, which
     would push our 4rem rail fully off-screen. We reuse that class name for
     the controller-toggled collapse state, so explicitly neutralize the
     translate so the sidebar just narrows in place. */
  translate: none;
  --tw-translate-x: 0;
  transform: none;
}

/* Brand row — inside the sidebar at top. Always shows the logo; wordmark +
   env chip are hidden when the sidebar is collapsed to rail mode. Clicking
   anywhere on the row toggles the sidebar. */
.app #sidebar .brand-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  height: 56px;
  width: 100%;
  flex-shrink: 0;
  background: transparent;
  color: var(--sidebar-fg);
  border: none;
  border-bottom: 1px solid var(--sidebar-border);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 120ms, padding 300ms ease-in-out;
}
.app #sidebar .brand-strip:hover { background: var(--sidebar-hover); }
.app #sidebar .brand-strip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.app #sidebar.-translate-x-full .brand-strip {
  justify-content: center;
  padding: 0;
}
.app #sidebar.-translate-x-full .brand-strip .brand-name,
.app #sidebar.-translate-x-full .brand-strip .brand-env { display: none; }

/* Main content — margin-left tracks the sidebar width so content always
   starts immediately after the sidebar. Collapsed = 4rem, expanded = 16rem. */
.app .main-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: 4rem;
  transition: margin-left 300ms ease-in-out;
}
.app .main-wrap.ml-64 { margin-left: 16rem; }

/* Neutralize the legacy tablet collapse (application.tailwind.css:211-237)
   which would otherwise shrink us to 4rem icon-only and hide button spans.
   We want full-width sidebar with labels at every breakpoint. */
@media (min-width: 768px) and (max-width: 1023px) and (hover: hover) and (pointer: fine) {
  /* Defeat the legacy #sidebar icon-only-on-tablet rules. Our collapse is
     driven by the `-translate-x-full` class, not the viewport width. */
  .app #sidebar:not(.-translate-x-full) { width: 16rem; }
  .app #sidebar:hover { box-shadow: none; }
  .app #sidebar:not(.-translate-x-full) span { display: inline; }
  .app #sidebar:not(.-translate-x-full) .project-switcher-btn .label,
  .app #sidebar:not(.-translate-x-full) .project-switcher-btn .name { display: block; }
  .app #sidebar:not(.-translate-x-full) .project-switcher-menu .menu-item span,
  .app #sidebar:not(.-translate-x-full) .nav-item span,
  .app #sidebar:not(.-translate-x-full) .sidebar-footer span,
  .app #sidebar:not(.-translate-x-full) .brand-name,
  .app #sidebar:not(.-translate-x-full) .brand-env,
  .app #sidebar:not(.-translate-x-full) .nav-section-header { display: inline-flex; }
}

/* ---------- Sidebar ----------
   Visual/identity; positioning is handled by .app #sidebar above. */
.app .sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
}
/* Brand content styling — the brand-strip itself is positioned/laid out
   above; these rules style its children (logo, wordmark, env chip). */
.app #sidebar .brand-strip .brand-mark-img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: block;
  flex-shrink: 0;
}
.app #sidebar .brand-strip .brand-name {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.app #sidebar .brand-strip .brand-env {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--sidebar-muted);
  text-transform: uppercase;
}

/* ---------- Project switcher ---------- */
.app .project-switcher {
  margin: 12px 12px 4px;
  position: relative;
}
.app .project-switcher-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--sidebar-fg);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.app .project-switcher-btn:hover { background: rgba(255, 255, 255, 0.06); }
.app .project-switcher-btn .label {
  font-size: 10px;
  color: var(--sidebar-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
}
.app .project-switcher-btn .name {
  font-size: 13px;
  font-weight: 500;
  display: block;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .project-switcher-btn .chev {
  margin-left: auto;
  color: var(--sidebar-muted);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.app .project-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 12px;
  right: 12px;
  z-index: 60;
  background: var(--sidebar-active-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}
.app .project-switcher-menu .menu-header {
  padding: 8px 12px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  border-bottom: 1px solid var(--sidebar-border);
}
.app .project-switcher-menu form { margin: 0; }
.app .project-switcher-menu .menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--sidebar-fg);
  text-decoration: none;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.app .project-switcher-menu .menu-item:hover { background: var(--sidebar-hover); }
.app .project-switcher-menu .menu-item.active {
  color: var(--accent);
  font-weight: 600;
}
.app .project-switcher-menu .menu-item .check { width: 14px; height: 14px; }

.app .sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.app .sidebar-scroll::-webkit-scrollbar { width: 6px; }
.app .sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

.app .nav-section { margin-top: 10px; }
.app .nav-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 6px;
  font-size: 11px;
  color: var(--sidebar-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.app .nav-section-header .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sidebar-muted);
}

.app .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin: 1px 4px;
  border-radius: var(--r-md);
  color: var(--sidebar-fg);
  font-size: 13.5px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition: background 100ms, color 100ms;
  position: relative;
}
.app .nav-item:hover { background: var(--sidebar-hover); }
.app .nav-item .i {
  color: var(--sidebar-muted);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.app .nav-item:hover .i { color: var(--sidebar-fg); }
.app .nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-fg);
  font-weight: 500;
}
.app .nav-item.active .i { color: #ffffff; }
.app .nav-item .badge {
  margin-left: auto;
  font-size: 11px;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--sidebar-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.app .nav-item.active .badge { background: rgba(255, 255, 255, 0.14); }

.app .nav-group summary {
  list-style: none;
  cursor: pointer;
}
.app .nav-group summary::-webkit-details-marker { display: none; }
.app .nav-group summary .chev {
  margin-left: auto;
  transition: transform 150ms;
  color: var(--sidebar-muted);
  width: 14px;
  height: 14px;
}
.app .nav-group[open] summary .chev { transform: rotate(90deg); }
.app .nav-group-children {
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid var(--sidebar-border);
}

/* ---------- Rail nav (visible when sidebar is collapsed) ---------- */
.app .sidebar-rail-nav {
  display: none;
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}
.app #sidebar.-translate-x-full .sidebar-rail-nav { display: block; }
.app .sidebar-rail-nav .nav-item {
  justify-content: center;
  padding: 10px 0;
  margin: 2px 8px;
  gap: 0;
}
.app .sidebar-rail-nav .nav-item span { display: none; }
.app .sidebar-rail-nav .nav-item .badge { display: none; }
.app .sidebar-rail-nav .nav-item .i { width: 18px; height: 18px; }

/* Hide the full nav + project switcher when sidebar is collapsed */
.app #sidebar.-translate-x-full .sidebar-nav-full,
.app #sidebar.-translate-x-full .project-switcher { display: none; }

/* ---------- Footer (user-menu trigger) ---------- */
.app .sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--sidebar-border);
  position: relative;
}
.app .sidebar-footer .user-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--sidebar-fg);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 120ms;
}
.app .sidebar-footer .user-trigger:hover { background: var(--sidebar-hover); }
.app #sidebar.-translate-x-full .sidebar-footer .user-trigger {
  justify-content: center;
  padding: 14px 0;
}
.app #sidebar.-translate-x-full .sidebar-footer .user-info { display: none; }

.app .sidebar-footer .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #f43f5e);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}
.app .sidebar-footer .user-info {
  min-width: 0;
  flex: 1;
}
.app .sidebar-footer .u-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .sidebar-footer .u-mail {
  font-size: 11px;
  color: var(--sidebar-muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- User menu popup ---------- */
/* Lives at app-shell level (sibling of the sidebar). JS (user_menu_controller)
   sets position/top/left/width inline based on the trigger rect, so this rule
   just handles visual styling. */
.app .user-menu-dropdown {
  z-index: 70;
  background: var(--sidebar-active-bg);
  color: var(--sidebar-fg);
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 6px 0;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}
.app .user-menu-dropdown.hidden { display: none; }

.app .user-menu-dropdown .user-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sidebar-border);
}
.app .user-menu-dropdown .user-menu-header .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #f43f5e);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.app .user-menu-dropdown .user-menu-identity {
  min-width: 0;
  flex: 1;
}
.app .user-menu-dropdown .user-menu-identity .name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .user-menu-dropdown .user-menu-identity .email {
  font-size: 11px;
  color: var(--sidebar-muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app .user-menu-dropdown .user-menu-section {
  padding: 4px 0;
  border-bottom: 1px solid var(--sidebar-border);
}
.app .user-menu-dropdown .user-menu-section:last-child { border-bottom: none; }

.app .user-menu-dropdown .user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--sidebar-fg);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms;
}
.app .user-menu-dropdown .user-menu-item .i {
  width: 16px;
  height: 16px;
  color: var(--sidebar-muted);
}
.app .user-menu-dropdown .user-menu-item:hover {
  background: var(--sidebar-hover);
}
.app .user-menu-dropdown .user-menu-item.accent {
  color: var(--accent);
}
.app .user-menu-dropdown .user-menu-item.accent .i { color: var(--accent); }
.app .user-menu-dropdown .user-menu-item.danger {
  color: var(--danger);
}
.app .user-menu-dropdown .user-menu-item.danger .i { color: var(--danger); }
.app .user-menu-dropdown .user-menu-item.danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
.app .user-menu-dropdown form { margin: 0; }

.app .user-menu-dropdown .user-menu-streak {
  padding: 10px 14px;
}
.app .user-menu-dropdown .streak-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.app .user-menu-dropdown .streak-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--sidebar-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.app .user-menu-dropdown .streak-count {
  font-weight: 700;
  font-size: 14px;
  color: #f59e0b;
}
.app .user-menu-dropdown .streak-message {
  font-size: 11.5px;
  color: var(--sidebar-muted);
  line-height: 1.3;
}
.app .user-menu-dropdown .streak-start {
  font-size: 11px;
  color: var(--fg-subtle);
  margin-top: 2px;
}

/* ---------- Topbar ---------- */
.app .topbar {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  position: sticky;
  top: 0;
  z-index: 10;
}
.app .breadcrumbs {
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.app .breadcrumbs .sep { color: var(--fg-subtle); }
.app .breadcrumbs .current {
  color: var(--fg);
  font-weight: 500;
}

.app .topbar-spacer { flex: 1; }

.app .search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  height: 34px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 120ms;
  min-width: 220px;
}
.app .search-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.app .search-btn .kbd {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--fg-subtle);
  font-family: 'Geist', 'Inter', monospace;
}

.app .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--fg-muted);
  transition: all 120ms;
}
.app .icon-btn:hover {
  background: var(--surface-3);
  color: var(--fg);
}

.app .streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.app .streak-chip .flame {
  width: 14px;
  height: 14px;
  color: #f59e0b;
}
.app .streak-chip .count { font-weight: 600; }
.app .streak-chip .lbl {
  color: var(--fg-subtle);
  font-size: 12px;
}

.app .new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.app .new-btn:hover { filter: brightness(1.05); }
.app .new-btn .i { width: 14px; height: 14px; }

/* ---------- Page chrome ---------- */
/* Centered within .main-wrap so content stays visually balanced whether the
   sidebar is open (main-wrap = viewport − 16rem) or collapsed (full viewport). */
.app .page {
  padding: 28px 32px 64px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}
.app .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.app .page-title {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--fg);
  margin: 0;
}
/* Inline-align the icon with the title text when present. Tailwind
   preflight forces SVGs to display:block, which would push the icon
   onto its own line above the heading. Scoped via :has() so icon-less
   .page-title pages keep their existing block layout (notably the
   submissions show header which relies on word-break for long titles). */
.app .page-title:has(> svg),
.app .page-title:has(> i[data-lucide]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Tailwind preflight forces SVGs to display:block, which makes Lucide
   icons drop onto their own line whenever they sit inside a non-flex
   inline container — e.g. <span><i data-lucide></i> 15 lessons</span>
   inside a course-meta strip. Default lucide icons (the <i> placeholder
   AND the rendered <svg class="lucide …">) to inline-block + vertical
   middle so they sit on the surrounding text's baseline. Flex/grid
   wrappers control their own layout, so this is benign there. */
.app i[data-lucide],
.app svg.lucide {
  display: inline-block;
  vertical-align: middle;
}
.app .page-subtitle {
  font-size: 14px;
  color: var(--fg-muted);
  margin-top: 4px;
}
.app .page-subtitle strong { color: var(--fg); font-weight: 600; }

/* ---------- Buttons ---------- */
.app .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  transition: all 120ms;
}
.app .btn:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.app .btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
}
.app .btn-primary:hover {
  filter: brightness(1.06);
  border-color: transparent;
}
.app .btn .i { width: 14px; height: 14px; }

/* ---------- Cards ---------- */
.app .card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.app .card-pad { padding: 20px; }

.app .row { display: flex; align-items: center; gap: 8px; }

/* ---------- Dashboard grid ---------- */
.app .dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.app .span-4 { grid-column: span 4; }
.app .span-8 { grid-column: span 8; }
.app .span-12 { grid-column: span 12; }

/* ---------- KPI tiles ---------- */
.app .kpi {
  grid-column: span 3;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.app .kpi .lbl {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.app .kpi .lbl .i { width: 14px; height: 14px; }
.app .kpi .val {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.app .kpi .delta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}
.app .kpi .delta.up { color: var(--success); }
.app .kpi .delta.down { color: var(--danger); }
.app .kpi .delta.flat { color: var(--fg-subtle); }
.app .kpi .spark {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 64px;
  height: 28px;
  opacity: 0.85;
}

.app .section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.app .section-hdr h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
}
.app .section-hdr .hint {
  font-size: 12px;
  color: var(--fg-muted);
  text-decoration: none;
}

/* ---------- Continue list ---------- */
.app .continue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: var(--fg);
  transition: background 120ms;
  cursor: pointer;
}
.app .continue-item:first-child { border-top: none; }
.app .continue-item:hover { background: var(--surface-3); }
.app .continue-item .icon-box {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  display: grid;
  place-items: center;
}
.app .continue-item .icon-box .i { width: 16px; height: 16px; }
.app .continue-item .meta { flex: 1; min-width: 0; }
.app .continue-item .title {
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .continue-item .sub {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .continue-item .right {
  font-size: 11px;
  color: var(--fg-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.app .empty-continue {
  padding: 20px 16px;
  text-align: center;
  color: var(--fg-muted);
}
.app .empty-continue a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.app .empty-continue a:hover { text-decoration: underline; }

/* ---------- Activity heatmap ---------- */
.app .streak-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 3px;
}
.app .streak-grid .cell {
  aspect-ratio: 1/1;
  border-radius: 3px;
  background: var(--surface-3);
}
.app .streak-grid .cell.l1 { background: rgba(59, 76, 246, 0.18); }
.app .streak-grid .cell.l2 { background: rgba(59, 76, 246, 0.35); }
.app .streak-grid .cell.l3 { background: rgba(59, 76, 246, 0.6); }
.app .streak-grid .cell.l4 { background: var(--accent); }
.app.dark .streak-grid .cell.l1 { background: rgba(130, 143, 255, 0.2); }
.app.dark .streak-grid .cell.l2 { background: rgba(130, 143, 255, 0.4); }
.app.dark .streak-grid .cell.l3 { background: rgba(130, 143, 255, 0.65); }
.app.dark .streak-grid .cell.l4 { background: var(--accent); }

.app .streak-stat {
  display: flex;
  gap: 20px;
  margin-top: 14px;
}
.app .streak-stat .item .n {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.app .streak-stat .item .l {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.app .streak-stat .flame-icon {
  width: 16px;
  height: 16px;
  color: #f59e0b;
}

/* ---------- Recommended tiles ---------- */
.app .rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.app .rec-tile {
  display: block;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-1);
  text-decoration: none;
  color: var(--fg);
  transition: all 120ms;
  cursor: pointer;
}
.app .rec-tile:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.app .rec-tile .top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.app .rec-tile .tag {
  font-size: 11px;
  color: var(--fg-muted);
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-3);
  font-weight: 500;
}
.app .rec-tile h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.3;
}
.app .rec-tile p {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app .difficulty {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .difficulty.easy     { background: var(--success-soft); color: var(--success); }
.app .difficulty.beginner { background: var(--success-soft); color: var(--success); }
.app .difficulty.medium,
.app .difficulty.intermediate { background: var(--warning-soft); color: var(--warning); }
.app .difficulty.hard,
.app .difficulty.advanced { background: var(--danger-soft); color: var(--danger); }
.app .difficulty.expert   { background: var(--danger-soft); color: var(--danger); font-weight: 700; }

/* ---------- Onboarding banner ---------- */
.app .onboarding-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--accent-soft-fg);
}
.app .onboarding-banner .rocket {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--accent);
}
.app .onboarding-banner h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--fg);
}
.app .onboarding-banner p {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--fg-muted);
  line-height: 1.5;
}
.app .onboarding-banner .actions {
  display: flex;
  gap: 8px;
}

/* ---------- Challenge board ---------- */
.app .filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.app .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  transition: all 120ms;
  font-family: inherit;
}
.app .chip:hover { background: var(--surface-3); }
.app .chip.active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.app .chip .count {
  opacity: 0.6;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}

.app .tabs {
  display: inline-flex;
  background: var(--surface-3);
  padding: 3px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.app .tabs button {
  height: 28px;
  padding: 0 12px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  font-family: inherit;
}
.app .tabs button.active {
  background: var(--surface-1);
  color: var(--fg);
  box-shadow: var(--shadow-xs);
}

.app .category-section { margin-bottom: 32px; }
.app .category-section h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.app .challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.app .challenge-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface-1);
  text-decoration: none;
  color: var(--fg);
  transition: all 140ms;
  cursor: pointer;
  position: relative;
  min-height: 160px;
}
.app .challenge-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.app .challenge-card .top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.app .challenge-card .avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  font-size: 16px;
}
.app .challenge-card h3 {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.app .challenge-card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.app .challenge-card .foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.app .challenge-card .foot .stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app .challenge-card .foot .stat .i { width: 12px; height: 12px; }
.app .challenge-card .foot .right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--fg);
}

.app .empty-board {
  padding: 48px 24px;
  text-align: center;
}
.app .empty-board h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--fg);
}
.app .empty-board p {
  font-size: 13.5px;
  color: var(--fg-muted);
  margin: 0;
}

/* ---------- Conversations index ---------- */
.app .conv-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.app .conv-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  width: 320px;
  transition: all 120ms;
}
.app .conv-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.app .conv-search input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 13px;
  color: var(--fg);
  font-family: inherit;
}
.app .conv-search input::placeholder { color: var(--fg-subtle); }

.app .conv-select {
  height: 34px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.app .tabs .ct {
  margin-left: 4px;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.app .tabs button.active .ct {
  background: var(--surface-3);
  color: var(--fg);
}

.app .conv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}
.app .conv-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}
.app .conv-table thead th.sortable a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app .conv-table thead th.sortable a:hover { color: var(--fg); }
.app .conv-table thead th .sort-i {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  opacity: 0.5;
}
.app .conv-table thead th.sorted { color: var(--fg); }
.app .conv-table thead th.sorted .sort-i {
  opacity: 1;
  color: var(--accent);
}
.app .conv-table tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.app .conv-table tbody tr:last-child td { border-bottom: none; }
.app .conv-table tbody tr.conv-row { transition: background 80ms; cursor: pointer; }
.app .conv-table tbody tr.conv-row:hover td { background: var(--surface-2); }
.app .conv-table tbody tr.conv-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.app .conv-table tbody tr.not-navigable { cursor: default; }
.app .conv-table tbody tr.not-navigable:hover td { background: transparent; }

.app .cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.app .conv-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.app .conv-name .ico {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.app .conv-name .ico .i { width: 16px; height: 16px; }
.app .conv-name .meta { min-width: 0; flex: 1; }
.app .conv-name .title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.app .conv-name .title > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .conv-name .preview {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .conv-name .preview .sep { color: var(--fg-subtle); }
.app .conv-name .preview .model-name {
  color: var(--fg);
  font-weight: 500;
}
.app .conv-name .preview .cat-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--fg-muted);
}

.app .priv-toggle,
.app .priv-indicator {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  color: var(--fg-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  line-height: 0;
}
.app .priv-indicator { cursor: default; }
.app .priv-toggle:hover {
  background: var(--surface-3);
  color: var(--fg);
}
.app .priv-toggle.private,
.app .priv-indicator.private { color: var(--warning); }
/* Match the .preview metadata size. Target both the <i> placeholder and the
   <svg> Lucide replaces it with — Lucide SVGs default to 24×24 without this. */
.app .priv-toggle i,
.app .priv-indicator i,
.app .priv-toggle svg,
.app .priv-indicator svg {
  width: 12px;
  height: 12px;
}

.app .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.app .status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.app .status-pill.submitted {
  background: var(--success-soft);
  color: var(--success);
}
.app .status-pill.submitted .dot { background: var(--success); }
.app .status-pill.progress {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}
.app .status-pill.progress .dot { background: var(--accent); }

.app .conv-empty {
  padding: 56px 20px;
  text-align: center;
}
.app .conv-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--fg-muted);
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
}
.app .conv-empty h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}
.app .conv-empty p {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0 0 16px;
}

.app .conv-pager {
  display: flex;
  align-items: center;
  margin-top: 14px;
  font-size: 12.5px;
  gap: 8px;
}
.app .conv-pager .pagy {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.app .conv-pager .pagy a,
.app .conv-pager .pagy .current,
.app .conv-pager .pagy .gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
}
.app .conv-pager .pagy a:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.app .conv-pager .pagy .current {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
}
.app .conv-pager .pagy .gap {
  border: none;
  color: var(--fg-subtle);
}

@keyframes conv-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.app .priv-toggle .spin { animation: conv-spin 1s linear infinite; }

@media (max-width: 767px) {
  .app .conv-toolbar { gap: 8px; }
  .app .conv-search { width: 100%; }
  .app .conv-select { display: none; }
  .app .conv-name .preview { font-size: 12px; }
  .app .conv-table thead th { padding: 10px 10px; }
  .app .conv-table tbody td { padding: 12px 10px; }
}

/* ---------- Submissions index ---------- */
/* Reuses .conv-toolbar / .conv-search / .conv-select / .conv-table /
   .conv-pager / .kpi / .dash-grid / .tabs / .chip / .status-pill / .conv-name
   from the conversations + dashboard sections above. New rules below add the
   submission-specific status pill colors, the disputed toggle chip, the
   per-row user cell (Everyone tab), the auto-grader inline marker, the
   KPI sub-line, and mobile-only column hiding. */

.app .subs-view-tabs { margin-bottom: 14px; }

.app .subs-kpi-grid { margin-bottom: 16px; }

.app .subs-table-card { overflow: hidden; padding: 0; }

/* Status pill variants that the submissions table uses. The Conversations
   section already defines `.status-pill.submitted` / `.progress`; these add the
   four submission-grading states (accepted / pending / rejected / disputed). */
.app .status-pill.accepted {
  background: var(--success-soft);
  color: var(--success);
}
.app .status-pill.accepted .dot { background: var(--success); }
.app .status-pill.pending {
  background: var(--warning-soft);
  color: var(--warning);
}
.app .status-pill.pending .dot { background: var(--warning); }
.app .status-pill.rejected {
  background: var(--danger-soft);
  color: var(--danger);
}
.app .status-pill.rejected .dot { background: var(--danger); }
.app .status-pill.disputed {
  background: rgba(245, 158, 11, 0.15);
  color: #c2710c;
}
.app .status-pill.disputed .dot { background: #f59e0b; }

/* "Disputed only" toggle in the toolbar. The base `.chip` styles come from
   the challenge-board section. The active state borrows the disputed pill
   palette so a glance tells you the filter is engaged. */
.app .chip.toggle.active {
  background: rgba(245, 158, 11, 0.15);
  color: #c2710c;
  border-color: rgba(245, 158, 11, 0.4);
}

/* Multi-pill cell — wraps the regular status pill and the optional disputed
   pill side by side. Wrapping keeps the layout sane when both are present and
   the column is narrow. */
.app .status-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* User cell (Everyone tab) — small avatar + username, single-line. */
.app .user-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.app .user-cell .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.app .user-cell .name {
  font-size: 13.5px;
  color: var(--fg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Auto-grader inline marker shown in the row sub-line. The icon and text
   share the same muted color; the failed variant flips to danger. */
.app .conv-name .preview .auto-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.app .conv-name .preview .auto-flag.failed { color: var(--danger); }
.app .auto-grader-i { width: 12px; height: 12px; }

/* Numeric points cell — keep the row tight and tabular-aligned. */
.app .points-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Sub-line under a KPI value (e.g., "23 of 31 reviewed"). Sits between the
   big value and the sparkline. */
.app .kpi .kpi-sub {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-top: 4px;
}

@media (max-width: 767px) {
  .app .subs-table .col-points,
  .app .subs-table .col-submitted-at,
  .app .subs-table .col-user { display: none; }
  .app .subs-table th[style] { width: auto !important; }
  .app .user-cell .name { max-width: 90px; }

  /* The conversations toolbar hides .conv-select on mobile because that page
     only has two select filters. The submissions toolbar has five+ filters, so
     hiding them is unusable. Restore visibility, let them wrap, and stretch
     each so they stack in a tappable column. */
  .app .subs-toolbar.conv-toolbar { gap: 8px; }
  .app .subs-toolbar .conv-select { display: block; width: 100%; }
  .app .subs-toolbar .chip.toggle { width: 100%; justify-content: center; }
}

/* ---------- Submission show ---------- */
/* Reuses .page, .page-header, .page-title, .page-subtitle, .card, .card-pad,
   .section-hdr, .kpi, .dash-grid, .span-6, .btn, .btn-primary, .status-pill,
   .status-cell, and the .msg / .msg.user / .msg.asst / .multimodal /
   .multimodal-card / .branch chrome from the chat redesign. New rules below
   add the page-level layout, the title/back-link header, the feedback
   emphasis, the conversation accordion, the dispute-resolved card, and a
   couple of mobile breakpoints. */

.app .subs-show { display: flex; flex-direction: column; gap: 16px; }

.app .subs-show-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.app .subs-show-header .title-block { flex: 1; min-width: 0; }
.app .subs-show-header .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
  text-decoration: none;
  margin-bottom: 6px;
}
.app .subs-show-header .back-link:hover { color: var(--fg); }
.app .subs-show-header .back-link .i { width: 13px; height: 13px; }
.app .subs-show-header .page-title { word-break: break-word; }

/* Header action cluster — wraps under 600px width. Each btn is icon+label;
   keep them in a single line until they overflow. */
.app .subs-show-header .head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.app .subs-show-header .head-actions .btn .btn-label { white-space: nowrap; }
.app .subs-show-header .head-actions .status-cell { gap: 6px; }

/* Warning-flavored button used for the Dispute action. Matches existing
   .btn-primary structure but with the warning palette so it visually pairs
   with the disputed pill. */
.app .btn.btn-warning {
  background: var(--warning);
  color: white;
  border-color: transparent;
}
.app .btn.btn-warning:hover { filter: brightness(1.06); border-color: transparent; }

/* Smaller icon-led button for in-card actions (e.g. Edit metadata). */
.app .btn.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }

/* Stat strip — shares .kpi tile chrome from the dashboard. The auto-failed
   state colors the value red so the failed score (-2) is unmissable. */
.app .subs-show-stats { gap: 12px; }
.app .subs-show-stats .kpi .val.auto-failed { color: var(--danger); }

/* Reviewer-feedback card. Subtle accent left border + emphasized heading so
   when feedback exists it reads as the most important block. */
.app .subs-feedback-card {
  border-left: 3px solid var(--accent);
}
.app .subs-feedback-card .section-hdr h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.app .subs-feedback-card .section-hdr h3 .i { width: 15px; height: 15px; color: var(--accent); }
.app .subs-feedback-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
}
.app .subs-feedback-body p { margin: 0 0 10px; }
.app .subs-feedback-body p:last-child { margin-bottom: 0; }
.app .subs-feedback-body code {
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.app .subs-feedback-body pre {
  background: var(--surface-3);
  padding: 12px;
  border-radius: var(--r-md);
  overflow-x: auto;
  margin: 10px 0;
}
.app .subs-feedback-body a { color: var(--accent); }

.app .subs-explanation-card .explanation-body {
  white-space: pre-line;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
}

.app .subs-metadata-card .metadata-display {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
}
.app .subs-metadata-card .metadata-row dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.app .subs-metadata-card .metadata-row dd {
  font-size: 13.5px;
  color: var(--fg);
  margin: 0;
  word-break: break-word;
}
.app .subs-metadata-card .section-hdr { margin-bottom: 14px; }
.app .subs-metadata-card .section-hdr h3 { font-size: 14px; }

/* Conversation accordion — native <details>/<summary> with the marker
   suppressed (Safari needs the -webkit- prefix; list-style covers others). */
.app .subs-conv {
  padding: 0;
  overflow: hidden;
}
.app .subs-conv > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.app .subs-conv > summary::-webkit-details-marker { display: none; }
.app .subs-conv-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  transition: background 120ms;
}
.app .subs-conv-summary:hover { background: var(--surface-2); }
.app .subs-conv-summary .left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.app .subs-conv-summary .left .i {
  width: 16px;
  height: 16px;
  color: var(--accent-soft-fg);
}
.app .subs-conv-summary .title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
}
.app .subs-conv-summary .count {
  font-size: 12px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-3);
}
.app .subs-conv-summary .right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-subtle);
  font-size: 12px;
}
.app .subs-conv-summary .right .chev {
  width: 14px;
  height: 14px;
  transition: transform 180ms;
}
.app .subs-conv[open] > summary .chev { transform: rotate(180deg); }
.app .subs-conv > summary .right .hint::after { content: "Show"; }
.app .subs-conv[open] > summary .right .hint::after { content: "Hide"; }

.app .subs-conv-body {
  padding: 20px 22px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.app .subs-conv-body .conv-empty-line {
  margin: 0;
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
  padding: 16px 0;
}

/* Branch nav inside the conversation accordion — chat-redesign chrome
   (.branch / .branch-nav-btn) but with <a> tags so clicks navigate the
   conversation turbo-frame. The chat page already styles .msg .branch
   button; mirror the same treatment for <a> tags here so the visual is
   identical. */
.app .subs-conv-body .msg .branch a {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--fg-muted);
  text-decoration: none;
}
.app .subs-conv-body .msg .branch a:hover {
  background: var(--surface-3);
  color: var(--fg);
}
.app .subs-conv-body .msg .branch button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.app .subs-conv-body .msg .branch .branch-nav-info {
  /* Static span (not a button) for the position badge — give it the same
     padding/sizing as the chat page's count button. */
  width: auto;
  min-width: 28px;
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: default;
}

/* System-message banner shown for hidden system messages when the challenge
   says they're visible. */
.app .subs-system-banner.chat-system-banner {
  background: var(--surface-1);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--fg-muted);
}

/* Read-only message-actions row — only the Copy button. Tighter than the
   full chat composer's action toolbar. */
.app .subs-conv-body .msg .actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.app .subs-conv-body .msg .actions button {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
}
.app .subs-conv-body .msg .actions button:hover {
  background: var(--surface-3);
  color: var(--fg);
  border-color: var(--border);
}
.app .subs-conv-body .msg .actions button .i { width: 13px; height: 13px; }

/* Dispute-resolved card — orange-tinted, distinct from the regular cards. */
.app .dispute-resolved {
  border: 1px solid rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.06);
}
.app .dispute-resolved .dispute-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #c2710c;
}
.app .dispute-resolved .dispute-head .i { width: 16px; height: 16px; }
.app .dispute-resolved .dispute-head .muted {
  color: var(--fg-muted);
  font-weight: 400;
}
.app .dispute-resolved .dispute-reason {
  font-size: 13.5px;
  color: var(--fg);
  margin: 0 0 8px;
  white-space: pre-line;
}
.app .dispute-resolved .dispute-pending {
  font-size: 12.5px;
  margin: 0;
  color: var(--fg-muted);
}

/* Submit-error visibility helper for the metadata sheet — match the existing
   .submit-error pattern but allow toggling via .hidden. */
.app .submit-error.hidden { display: none; }

@media (max-width: 767px) {
  .app .subs-show-stats .kpi.span-6 { grid-column: span 12; }
  .app .subs-show-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .app .subs-show-header .head-actions { justify-content: flex-start; }
  .app .subs-show-header .head-actions .btn .btn-label { display: none; }
  .app .subs-metadata-card .metadata-display { grid-template-columns: 1fr; gap: 12px; }
  .app .subs-conv-body { padding: 16px 12px 18px; }
}

/* ---------- Chat interface (assessments#show) ---------- */

/* Behavior-only class hooks preserved from legacy markup: flex justify-end,
   flex justify-start, flex flex-col, max-w-lg, .markdown. These are queried by
   chat_controller.js (~7800 LOC) — neutralize their styling without removing
   the classes. */
.app #page-chat-wrap .msg.flex { display: grid; }
.app #page-chat-wrap .msg .body.max-w-lg { max-width: none; }
.app #page-chat-wrap .msg .body { background: transparent; padding: 0; border-radius: 0; }
.app #page-chat-wrap .msg .body[class*="bg-blue"],
.app #page-chat-wrap .msg .body[class*="bg-gray"] { background: transparent; }

/* Override the legacy `.markdown` colors from application.tailwind.css.
   Those were designed for the old dark-only theme (gray-300 body text, white
   on gray-700 bubble) and are unreadable on the redesign's light surface.
   Re-color via redesign tokens so light/dark modes both work. */
.app #page-chat-wrap .msg .markdown,
.app #page-chat-wrap .msg .markdown p,
.app #page-chat-wrap .msg .markdown li,
.app #page-chat-wrap .msg .markdown blockquote,
.app #page-chat-wrap .msg .markdown h1,
.app #page-chat-wrap .msg .markdown h2,
.app #page-chat-wrap .msg .markdown h3,
.app #page-chat-wrap .msg .markdown h4,
.app #page-chat-wrap .msg .markdown h5,
.app #page-chat-wrap .msg .markdown h6,
.app .subs-conv-body .msg .markdown,
.app .subs-conv-body .msg .markdown p,
.app .subs-conv-body .msg .markdown li,
.app .subs-conv-body .msg .markdown blockquote,
.app .subs-conv-body .msg .markdown h1,
.app .subs-conv-body .msg .markdown h2,
.app .subs-conv-body .msg .markdown h3,
.app .subs-conv-body .msg .markdown h4,
.app .subs-conv-body .msg .markdown h5,
.app .subs-conv-body .msg .markdown h6 {
  color: var(--fg);
}
.app #page-chat-wrap .msg .markdown code,
.app .subs-conv-body .msg .markdown code {
  background: var(--surface-3);
  color: var(--fg);
}
.app #page-chat-wrap .msg .markdown pre,
.app .subs-conv-body .msg .markdown pre {
  background: var(--surface-3);
  color: var(--fg);
}
.app #page-chat-wrap .msg .markdown a,
.app .subs-conv-body .msg .markdown a {
  color: var(--accent);
}

.app #page-chat-wrap {
  display: grid;
  grid-template-columns: 268px 1fr;
  height: calc(100vh - 56px);
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.app #page-chat-wrap.rail-collapsed {
  grid-template-columns: 0 1fr;
}
.app #page-chat-wrap.rail-collapsed .chat-rail {
  border-right: none;
  overflow: hidden;
}

/* History rail */
.app .chat-rail {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: transform 200ms ease-out;
}
.app .chat-rail .rail-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.app .chat-rail .rail-head .ttl {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}
.app .chat-rail .rail-head .rail-new-conv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background 120ms;
  flex-shrink: 0;
}
.app .chat-rail .rail-head .rail-new-conv:hover {
  background: var(--accent);
  color: var(--accent-fg);
}
.app .chat-rail .rail-head .rail-new-conv i,
.app .chat-rail .rail-head .rail-new-conv svg {
  width: 13px;
  height: 13px;
}
.app .chat-rail .rail-search {
  margin: 12px 14px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.app .chat-rail .rail-search input {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  flex: 1;
  min-width: 0;
}
.app .chat-rail .rail-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 14px;
}
.app .chat-rail .rail-section {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  text-transform: uppercase;
  padding: 12px 8px 6px;
}
.app .chat-rail .rail-conv {
  display: block;
  padding: 9px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 80ms;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
}
.app .chat-rail .rail-conv:hover { background: var(--surface-3); }
.app .chat-rail .rail-conv.active {
  background: var(--surface-1);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.app .chat-rail .rail-conv .ttl {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.app .chat-rail .rail-conv .meta {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.app .chat-rail .rail-conv .meta .sep { color: var(--fg-subtle); flex-shrink: 0; }
.app .chat-rail .rail-conv .meta .model {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.app .chat-rail .rail-conv .meta .time { flex-shrink: 0; }
.app .chat-rail .rail-conv .meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.app .chat-rail .rail-conv .meta .dot.submitted { background: var(--success); }

/* Main chat column */
.app .chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}

/* Chat header */
.app .chat-head {
  height: 56px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  background: var(--surface-1);
}
.app .chat-head .rail-toggle,
.app .chat-rail .rail-head .rail-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.app .chat-head .rail-toggle { width: 32px; height: 32px; }
.app .chat-head .rail-toggle:hover,
.app .chat-rail .rail-head .rail-toggle:hover { background: var(--surface-3); color: var(--fg); }

/* Swap which rail-toggle button is visible based on collapse state.
   Default (rail open): the close button lives inside the rail header (next to
   the + button); the chat-header's button is hidden.
   Collapsed (rail closed): the chat-header's open button is shown.

   Use `> .rail-toggle` (direct child) so we only target the history-toggle
   button — the more-menu trigger reuses the `rail-toggle` class for icon
   styling but is nested inside `.more-wrap` and must NOT be hidden. */
.app #page-chat-wrap .chat-head > .rail-toggle { display: none; }
.app #page-chat-wrap .chat-rail .rail-head .rail-toggle { display: grid; }
.app #page-chat-wrap.rail-collapsed .chat-head > .rail-toggle { display: grid; }
.app #page-chat-wrap.rail-collapsed .chat-rail .rail-head .rail-toggle { display: none; }
.app .chat-head .ch-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.app .chat-head .ch-title h2 {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
  color: var(--fg);
}
.app .chat-head .cat-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  background: var(--surface-3);
  color: var(--fg-muted);
  flex-shrink: 0;
}
.app .chat-head .why-link {
  font-size: 12.5px;
  color: var(--fg-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.app .chat-head .why-link:hover { background: var(--surface-3); color: var(--fg); }
.app .chat-head .spacer { flex: 1; }

/* Model pill + popover */
.app .model-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 120ms;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.app .model-pill:hover { background: var(--surface-3); border-color: var(--border-strong); }
.app .model-pill .mlogo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.app .model-pill .mstatus {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}
.app .model-popover-wrap { position: relative; }
.app .model-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 50;
}
.app .model-popover[hidden] { display: none; }
.app .model-popover a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--fg);
  font-size: 13px;
}
.app .model-popover a:hover { background: var(--surface-3); }
.app .model-popover a.active { background: var(--accent-soft); color: var(--accent-soft-fg); }
.app .model-popover .status-icon { width: 14px; height: 14px; flex-shrink: 0; }
.app .model-popover .status-icon.success { color: var(--success); }
.app .model-popover .status-icon.failure { color: var(--danger); }

/* More menu */
.app .more-wrap { position: relative; }
.app .more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 50;
  animation: chatMenuIn 120ms ease-out;
}
@keyframes chatMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.app .more-menu[hidden] { display: none; }
.app .more-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--fg);
  text-align: left;
  text-decoration: none;
  font-family: inherit;
}
.app .more-menu .menu-item:hover { background: var(--surface-3); }
.app .more-menu .menu-item .i { width: 14px; height: 14px; color: var(--fg-muted); flex-shrink: 0; }
.app .more-menu .menu-item:hover .i { color: var(--fg); }
.app .more-menu .menu-item span { flex: 1; }
.app .more-menu .menu-item.danger { color: var(--danger); }
.app .more-menu .menu-item.danger .i { color: var(--danger); }
.app .more-menu .menu-sep { height: 1px; background: var(--border); margin: 4px 4px; }

/* Chat stream */
.app .chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 32px 32px 24px;
  scroll-padding-bottom: 200px;
}
.app .chat-stream-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}

/* Brief / empty state */
.app .brief-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-xs);
}
.app .brief-card .head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.app .brief-card h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
  color: var(--fg);
}
.app .brief-card .lede {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin: 0 0 18px;
}
.app .brief-card .objective {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.app .brief-card .objective .lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.app .brief-card .objective p {
  margin: 0;
  font-size: 13.5px;
  color: var(--fg);
  line-height: 1.5;
}
.app .brief-card .meta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.app .brief-card .meta-cell .k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.app .brief-card .meta-cell .v {
  font-size: 13px;
  color: var(--fg);
  font-weight: 500;
}
.app .brief-card .tag-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--fg-muted);
  margin-right: 4px;
}

/* Messages */
.app .msg {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 4px 0;
}
.app .msg .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
}
.app .msg.user .avatar {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}
.app .msg.asst .avatar {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
}
.app .msg .body {
  min-width: 0;
}
.app .msg .role {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.app .msg .role .role-meta {
  font-weight: 400;
  color: var(--fg-subtle);
  font-size: 12px;
}
.app .msg .content {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg);
}
.app .msg .content .markdown { word-break: break-word; }
.app .msg .content p { margin: 0 0 10px; }
.app .msg .content p:last-child { margin-bottom: 0; }
.app .msg .content strong { font-weight: 600; }
.app .msg .content code {
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.app .msg .content pre {
  background: var(--surface-3);
  padding: 12px;
  border-radius: var(--r-md);
  overflow-x: auto;
  margin: 10px 0;
}
.app .msg .content pre code {
  background: transparent;
  padding: 0;
}
.app .msg .content blockquote {
  border-left: 3px solid var(--border-strong);
  padding: 4px 14px;
  margin: 12px 0;
  color: var(--fg-muted);
}
.app .msg .content ol,
.app .msg .content ul {
  padding-left: 22px;
  margin: 6px 0 12px;
}
.app .msg .content li { margin-bottom: 4px; }

/* Multimodal */
.app .msg .multimodal {
  margin: 10px 0;
}
.app .msg .multimodal img,
.app .msg .multimodal video {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.app .msg .multimodal-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.app .msg .multimodal-card .i { width: 24px; height: 24px; color: var(--fg-muted); flex-shrink: 0; }
.app .msg .multimodal-card a { color: var(--accent); text-decoration: none; font-size: 13px; }
.app .msg .multimodal-card .filetype { font-size: 11px; color: var(--fg-muted); }

/* Inline branch nav */
.app .msg .branch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.app .msg .branch button {
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--fg-muted);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: inherit;
}
.app .msg .branch button:hover { background: var(--surface-3); color: var(--fg); }
.app .msg .branch .count {
  width: auto;
  min-width: 28px;
  padding: 0 6px;
  white-space: nowrap;
}

/* Persistent action toolbar */
.app .msg .actions {
  display: flex;
  flex-direction: row;
  gap: 2px;
  margin-top: 6px;
  margin-left: -6px;
  opacity: 0.7;
  transition: opacity 120ms;
  align-items: center;
}
.app .msg:hover .actions,
.app .msg.last .actions {
  opacity: 1;
}
.app .msg .actions button,
.app .msg .actions a.action-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 120ms;
  font-family: inherit;
  font-size: 12px;
  text-decoration: none;
  padding: 0;
}
.app .msg .actions button .i,
.app .msg .actions a.action-btn .i {
  width: 14px;
  height: 14px;
}
.app .msg .actions button:hover,
.app .msg .actions a.action-btn:hover {
  background: var(--surface-3);
  color: var(--fg);
}
.app .msg .actions button.submit { color: var(--fg-subtle); }
.app .msg .actions button.submit:hover {
  background: var(--success);
  color: white;
}
.app .msg .actions button.danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
.app .msg .actions .divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
  align-self: center;
}

/* System / context-reset banner */
.app .chat-system-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 0;
}
.app .chat-system-banner::before,
.app .chat-system-banner::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Chat notice cards (Challenge inactive / Single-turn complete / Model unavailable) */
.app .chat-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-bottom: 10px;
}
.app .chat-notice .i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.app .chat-notice strong { color: var(--fg); }
.app .chat-notice.warning { border-color: var(--warning); }
.app .chat-notice.warning .i { color: var(--warning); }
.app .chat-notice.warning strong { color: var(--warning); }
.app .chat-notice.info { border-color: var(--accent); }
.app .chat-notice.info .i { color: var(--accent); }
.app .chat-notice.info strong { color: var(--accent-soft-fg); }

/* Composer */
.app .composer-wrap {
  flex-shrink: 0;
  padding: 10px 32px 24px;
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
}
.app .composer-inner {
  max-width: 760px;
  margin: 0 auto;
}
.app .composer {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 120ms, box-shadow 120ms;
  box-shadow: var(--shadow-sm);
}
.app .composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.app .composer-input {
  padding: 14px 16px 6px;
}
.app .composer-input textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.55;
  min-height: 48px;
  max-height: 240px;
}
.app .composer-input textarea::placeholder { color: var(--fg-subtle); }
.app .composer-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 10px 10px;
  flex-wrap: wrap;
}
.app .composer-bar .tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 120ms;
  font-family: inherit;
}
.app .composer-bar .tool-pill:hover { background: var(--surface-2); color: var(--fg); }
.app .composer-bar .tool-pill .i { width: 13px; height: 13px; }
.app .composer-bar .tool-pill.on {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  border-color: transparent;
}
.app .composer-bar .tool-pill.on .i { color: var(--accent-soft-fg); }
.app .composer-bar .tool-pill .check { width: 12px; height: 12px; display: none; }
.app .composer-bar .tool-pill.on .check { display: inline-block; }
.app .composer-bar .icon-pill {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 120ms;
}
.app .composer-bar .icon-pill:hover { background: var(--surface-2); color: var(--fg); }
.app .composer-bar .icon-pill .i { width: 13px; height: 13px; }
.app .composer-bar .send-btn {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: filter 120ms;
}
.app .composer-bar .send-btn:hover { filter: brightness(1.06); }
.app .composer-bar .send-btn:disabled,
.app .composer-bar .send-btn.disabled {
  background: var(--surface-3);
  color: var(--fg-subtle);
  cursor: not-allowed;
}
.app .composer-bar .send-btn .i { width: 16px; height: 16px; }
.app .composer-bar .new-conv-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--success);
  color: white;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.app .composer-bar .new-conv-btn:hover { filter: brightness(1.05); }

/* Side-sheets — generic pattern. .submit-sheet-* aliases preserved so
   Phase 1 tests + submission_controller continue to work. .side-sheet.wide
   = 540px (Community Prompts). Sheets that use the slide-in pattern
   (Community Prompts) initialize with .translate-x-full and toggle that
   class to slide; sheets that use the .hidden-toggle pattern (Submit, Edit,
   Convert) initialize with .hidden. */
.app .submit-sheet-overlay,
.app .side-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 60;
}
.app .submit-sheet-overlay.hidden,
.app .side-sheet-overlay.hidden { display: none; }
.app .submit-sheet,
.app .side-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 92vw;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  z-index: 61;
  display: flex;
  flex-direction: column;
  animation: sheetIn 200ms ease-out;
  transition: transform 200ms ease-out;
}
.app .side-sheet.wide { width: 540px; }
/* `.hidden` = fully removed from layout. Used by Submit/Edit/Convert which
   toggle visibility via .hidden. */
.app .submit-sheet.hidden,
.app .side-sheet.hidden { display: none; }
/* `.translate-x-full` = slides off-screen but stays in the DOM. Used by
   Community Prompts (existing openPromptsPanel/closePromptsPanel toggle
   this class to slide the panel in/out). */
.app .submit-sheet.translate-x-full,
.app .side-sheet.translate-x-full { transform: translateX(100%); }
@keyframes sheetIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.app .submit-sheet .sheet-head,
.app .side-sheet .sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.app .submit-sheet .sheet-head h3,
.app .side-sheet .sheet-head h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  color: var(--fg);
}
.app .submit-sheet .sheet-body,
.app .side-sheet .sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.app .submit-sheet .sheet-foot,
.app .side-sheet .sheet-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.app .submit-sheet .field,
.app .side-sheet .field { margin-bottom: 14px; }
.app .submit-sheet .field label,
.app .side-sheet .field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 6px;
}
.app .submit-sheet .field .hint,
.app .side-sheet .field .hint {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.app .submit-sheet .field input,
.app .submit-sheet .field select,
.app .submit-sheet .field textarea,
.app .side-sheet .field input,
.app .side-sheet .field select,
.app .side-sheet .field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--surface-1);
}
.app .submit-sheet .field input:focus,
.app .submit-sheet .field select:focus,
.app .submit-sheet .field textarea:focus,
.app .side-sheet .field input:focus,
.app .side-sheet .field select:focus,
.app .side-sheet .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
  outline: none;
}
.app .submit-sheet .field textarea,
.app .side-sheet .field textarea {
  min-height: 100px;
  resize: vertical;
}
.app .submit-sheet .submit-error,
.app .side-sheet .submit-error {
  font-size: 12.5px;
  color: var(--danger);
  margin-top: 8px;
}

/* Edit Message radio variants */
.app .edit-variants {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.app .edit-variants .variant-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 120ms;
}
.app .edit-variants .variant-option:hover { background: var(--surface-3); }
.app .edit-variants .variant-option:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.app .edit-variants .variant-option input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.app .edit-variants .variant-option .variant-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 2px;
}
.app .edit-variants .variant-option .variant-desc {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
}

/* Generic modal pattern */
.app .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
}
.app .modal-overlay.hidden { display: none; }
.app .modal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: modalIn 140ms ease-out;
  color: var(--fg);
}
.app .modal.wide { max-width: 720px; }
.app .modal.compact { max-width: 440px; }
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.app .modal .modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.app .modal .modal-head h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  color: var(--fg);
}
.app .modal .modal-head .close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--fg-muted);
}
.app .modal .modal-head .close-btn:hover { background: var(--surface-3); color: var(--fg); }
.app .modal .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  font-size: 13.5px;
  color: var(--fg);
  line-height: 1.55;
}
.app .modal .modal-body p { margin: 0 0 12px; }
.app .modal .modal-body p:last-child { margin-bottom: 0; }
.app .modal .modal-body .field { margin-bottom: 14px; }
.app .modal .modal-body .field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 6px;
}
.app .modal .modal-body .field .hint {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.app .modal .modal-body .field input,
.app .modal .modal-body .field select,
.app .modal .modal-body .field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--surface-1);
}
.app .modal .modal-body .field textarea {
  min-height: 96px;
  resize: vertical;
}
.app .modal .modal-body .field input:focus,
.app .modal .modal-body .field select:focus,
.app .modal .modal-body .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
  outline: none;
}
.app .modal .modal-body .modal-error {
  font-size: 12.5px;
  color: var(--danger);
  margin-top: 8px;
}
.app .modal .modal-body .code-block {
  background: var(--surface-3);
  color: var(--fg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 50vh;
  overflow-y: auto;
}
.app .modal .modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* Modal primary-button color variants. Default uses .btn-primary's accent
   from the existing .btn rules; danger and purple are explicit overrides. */
.app .modal .modal-foot .btn-danger {
  background: var(--danger);
  color: white;
  border-color: transparent;
}
.app .modal .modal-foot .btn-danger:hover {
  filter: brightness(1.06);
  background: var(--danger);
  border-color: transparent;
}
.app .modal .modal-foot .btn-purple {
  background: #8b5cf6; /* purple-500 */
  color: white;
  border-color: transparent;
}
.app .modal .modal-foot .btn-purple:hover {
  filter: brightness(1.08);
  background: #8b5cf6;
  border-color: transparent;
}

/* Parseltongue keeps its purple identity. */
.app .modal.parseltongue-modal .modal-head h3 i { color: #8b5cf6; }
.app .modal.parseltongue-modal .transforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.app .modal.parseltongue-modal .transform-button {
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
  overflow: hidden;
}
.app .modal.parseltongue-modal .transform-button > div { width: 100%; }
.app .modal.parseltongue-modal .transform-button:hover,
.app .modal.parseltongue-modal .transform-button.active {
  background: #8b5cf6;
  color: white;
  border-color: transparent;
}

/* Community Prompts cards (rendered into .promptsList by chat_controller.js) */
.app .cp-tabs {
  display: inline-flex;
  background: var(--surface-3);
  padding: 3px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin-bottom: 14px;
  width: 100%;
  gap: 2px;
}
.app .cp-tabs button {
  flex: 1;
  height: 30px;
  padding: 0 8px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: inherit;
}
.app .cp-tabs button.active {
  background: var(--surface-1);
  color: var(--fg);
  box-shadow: var(--shadow-xs);
}
.app .cp-tabs button .i { width: 13px; height: 13px; }
.app .cp-list { display: flex; flex-direction: column; gap: 10px; }
.app .cp-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  padding: 12px;
  transition: border-color 120ms;
}
.app .cp-card:hover { border-color: var(--border-strong); }
.app .cp-text {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app .cp-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--fg-muted);
  flex-wrap: wrap;
}
.app .cp-meta .cp-author { color: var(--fg); font-weight: 500; }
.app .cp-meta .stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.app .cp-meta .stat.success { color: var(--success); }
.app .cp-meta .stat .i { width: 11px; height: 11px; }
.app .cp-meta .cp-use {
  margin-left: auto;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.app .cp-meta .cp-use:hover {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
}

/* Community Prompts pagination — neutral pager with .active page indicator. */
.app .cp-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}
.app .cp-pagination button,
.app .cp-pagination .current {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.app .cp-pagination button:hover { background: var(--surface-3); }
.app .cp-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.app .cp-pagination .current {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
  cursor: default;
}

.app #page-chat-wrap.course-chat-wrap {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  height: 100%;
}

/* Mobile (<768px): rail becomes overlay drawer */
.app .chat-rail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 39;
  display: none;
}
.app .chat-rail-backdrop.is-open { display: block; }

@media (max-width: 767px) {
  .app #page-chat-wrap {
    grid-template-columns: 1fr;
    height: calc(100vh - 56px);
  }
  .app #page-chat-wrap .chat-rail {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    width: 280px;
    z-index: 40;
    transform: translateX(-100%);
  }
  .app #page-chat-wrap .chat-rail.is-mobile-open {
    transform: translateX(0);
  }
  .app #page-chat-wrap.rail-collapsed { grid-template-columns: 1fr; }

  /* Mobile uses an overlay drawer (not a column collapse), so the in-rail
     close button is reachable only when the rail is visibly open. The
     chat-head's open button must always be available so users can summon
     the drawer regardless of rail-collapsed state. Use `> .rail-toggle` so
     we don't accidentally re-show a hidden more-menu button. */
  .app #page-chat-wrap .chat-head > .rail-toggle { display: grid; }
  .app #page-chat-wrap .chat-rail .rail-head .rail-toggle { display: grid; }

  .app .chat-stream { padding: 16px 16px 16px; }
  .app .composer-wrap { padding: 8px 16px 16px; }
  .app .chat-head { padding: 0 12px; gap: 8px; }
  .app .chat-head .ch-title h2 { max-width: 160px; font-size: 13.5px; }
  .app .model-pill span:not(.mlogo):not(.mstatus) { display: none; }
  .app .submit-sheet { width: 100%; }
}

/* ============================================================================
   Mobile (< 768px) — overlay sidebar, simplified topbar
   ============================================================================
   On mobile the sidebar slides fully off-screen when collapsed (no rail) and
   appears as a 16rem overlay when open. The topbar trims down to the brand
   toggle + breadcrumb + Create button so it never overflows.
*/
.app .topbar-mobile-toggle { display: none; }

@media (max-width: 767px) {
  /* Sidebar collapse on mobile = fully off-screen (translate), not narrow rail.
     Override the desktop rail rules so the same `-translate-x-full` class
     produces a slide-off animation here. */
  .app #sidebar {
    width: 16rem;
    transition: transform 300ms ease-in-out;
  }
  .app #sidebar.-translate-x-full {
    width: 16rem;
    transform: translateX(-100%);
    translate: -100% 0;
    --tw-translate-x: -100%;
  }
  .app #sidebar:not(.-translate-x-full) {
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
  }

  /* No rail nav on mobile — sidebar is either fully visible or fully gone. */
  .app .sidebar-rail-nav { display: none !important; }
  /* Brand-strip stays full width when sidebar is open on mobile (no rail mode) */
  .app #sidebar .brand-strip .brand-name,
  .app #sidebar .brand-strip .brand-env { display: inline; }

  /* Main content always full width on mobile — sidebar is an overlay. */
  .app .main-wrap,
  .app .main-wrap.ml-64 { margin-left: 0 !important; }

  /* Topbar — trim to brand-toggle + breadcrumb + Create. */
  .app .topbar {
    height: 56px;
    gap: 8px;
    padding: 0 12px;
  }
  .app .topbar-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .app .topbar-mobile-toggle:hover { background: var(--surface-3); }
  .app .topbar-mobile-toggle:focus { outline: none; }
  .app .topbar-mobile-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .app .topbar-mobile-toggle img {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: block;
  }
  /* Theme-aware Scale icon: black on light bg, white on dark bg. */
  .app .topbar-mobile-toggle .theme-dark-only { display: none; }
  .app.dark .topbar-mobile-toggle .theme-light-only { display: none; }
  .app.dark .topbar-mobile-toggle .theme-dark-only { display: block; }

  /* Breadcrumbs: keep only the current page label, drop the project segment. */
  .app .breadcrumbs > span:not(.current),
  .app .breadcrumbs > i.sep { display: none; }
  .app .breadcrumbs .current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
  }

  /* Hide the wide search pill, streak chip, and theme toggle from the topbar.
     - Search lives in the sidebar as a nav item.
     - Streak is visible inside the user-menu popup (Daily Streak section).
     - Theme toggle is added to the user-menu popup. */
  .app .topbar .search-btn,
  .app .topbar .streak-chip,
  .app .topbar [data-action*="theme#toggle"] { display: none; }

  /* The Create button (quick-create-menu) in the topbar already collapses to
     icon-only on mobile via its existing Tailwind classes — leave it. */

  /* Page chrome — tighter padding on phones */
  .app .page {
    padding: 14px 14px 32px;
  }
  .app .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
  }
  .app .page-title { font-size: 20px; }
  .app .page-subtitle { font-size: 12.5px; line-height: 1.35; }
  /* Hide the bottom "New conversation" button on mobile — the topbar's
     Create menu (+ first-class CTA on the empty state) covers the same need */
  .app .page-header .row { display: none; }

  /* Onboarding banner — compact on phones */
  .app .onboarding-banner {
    padding: 14px;
    margin-bottom: 14px;
    gap: 12px;
  }
  .app .onboarding-banner .rocket { width: 22px; height: 22px; }
  .app .onboarding-banner h3 { font-size: 14.5px; margin-bottom: 4px; }
  .app .onboarding-banner p { font-size: 12.5px; line-height: 1.4; margin-bottom: 10px; }
  .app .onboarding-banner .btn { height: 30px; font-size: 12.5px; padding: 0 10px; }

  /* Cards: tighter padding on phones */
  .app .card-pad { padding: 14px; }
  .app .section-hdr { margin-bottom: 8px; }

  /* Dashboard grid — 2-up KPIs, stacked content rows */
  .app .dash-grid { gap: 10px; }
  .app .kpi { grid-column: span 6; padding: 12px 12px; }
  .app .kpi .lbl { font-size: 11.5px; }
  .app .kpi .val { font-size: 20px; margin-top: 4px; }
  .app .kpi .delta { margin-top: 4px; font-size: 10.5px; }
  .app .kpi .spark { width: 44px; height: 20px; right: 8px; top: 8px; }
  .app .span-4,
  .app .span-8 { grid-column: span 12; }

  /* Cap how many "Continue" rows render on phones to keep the page short.
     The "View all ›" link in the section header still goes to the full list. */
  .app .continue-item {
    padding: 9px 12px;
    gap: 10px;
  }
  .app .continue-item .icon-box { width: 28px; height: 28px; }
  .app .continue-item .icon-box .i { width: 14px; height: 14px; }
  .app .continue-item .title { font-size: 13px; }
  .app .continue-item .sub { font-size: 11.5px; }
  .app .continue-item:nth-of-type(n+4) { display: none; }

  /* Activity card — denser stat row */
  .app .streak-grid { gap: 2px; }
  .app .streak-stat { gap: 12px; margin-top: 10px; flex-wrap: wrap; }
  .app .streak-stat .item .n { font-size: 16px; }
  .app .streak-stat .item .l { font-size: 11px; }

  /* Recommended grid — 2-up on phones, cap at 4 to prevent infinite scroll.
     "Recommended for you" stays meaningful with 4 picks; users can browse
     the full /assessments index for more. */
  .app .rec-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .app .rec-tile { padding: 12px; }
  .app .rec-tile h4 { font-size: 13px; }
  .app .rec-tile p { font-size: 11.5px; -webkit-line-clamp: 2; }
  .app .rec-tile:nth-of-type(n+5) { display: none; }

  /* Topbar safe-area: sit cleanly under the notch */
  .app .topbar {
    padding-top: env(safe-area-inset-top, 0);
    height: calc(56px + env(safe-area-inset-top, 0));
  }
}

/* Tiny phones (<=380px): keep KPIs 2-up but drop rec-grid to 1-up so tiles
   don't get unreadably narrow. Continue list cap stays at 3, rec cap at 4. */
@media (max-width: 380px) {
  .app .rec-grid { grid-template-columns: 1fr; }
  .app .rec-tile:nth-of-type(n+4) { display: none; }
}

/* =============================================================================
   Usage page — KPIs + hero spend chart + heatmap + per-model proportion bars.
   All chart styling is theme-aware via `currentColor` and CSS vars; no JS.
   ============================================================================= */

/* Anchor-style tabs — mirror the existing `.tabs button` chrome so we can use
   <a href="?days=30"> tabs for SEO/share-friendly URL state without losing the
   visual. */
.app .tabs a {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  transition: all 120ms;
  font-family: inherit;
}
.app .tabs a:hover { color: var(--fg); }
.app .tabs a.active {
  background: var(--surface-1);
  color: var(--fg);
  box-shadow: var(--shadow-xs);
}

/* Polarity-aware deltas — `bad-up` = unwelcome rise (cost/latency), `bad-down`
   = welcome fall. The base `.up`/`.down` semantics for higher-is-better
   metrics (requests, tokens, throughput) are unchanged. */
.app .kpi .delta.bad-up,
.app .delta.bad-up { color: var(--danger); }
.app .kpi .delta.bad-down,
.app .delta.bad-down { color: var(--success); }

/* Filter row — date tabs left, model chip dropdown right. Wraps on mobile. */
.app .usage-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.app .usage-filter-row .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Model chip — looks like a `.chip` but supports a chevron + dropdown menu. */
.app .model-chip {
  position: relative;
}
.app .model-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  font-family: inherit;
}
.app .model-chip-btn:hover { background: var(--surface-3); }
.app .model-chip-btn.has-filter {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  border-color: transparent;
}
.app .model-chip-btn .i { width: 12px; height: 12px; }
.app .model-chip-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 30;
}
.app .model-chip-menu a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
}
.app .model-chip-menu a:hover { background: var(--surface-3); }
.app .model-chip-menu a.active {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}

/* KPI link wrapper — keeps tile styling but wraps it in an anchor. The
   anchor itself becomes the grid item (matching `.kpi`'s `span 3` rule), so
   the inner `.kpi` gets the full slot and stops shrink-wrapping to its
   content like an inline element would. Mobile collapses to span 6 (2-up). */
.app .kpi-link {
  display: block;
  grid-column: span 3;
  text-decoration: none;
  color: inherit;
}
.app .kpi-link .kpi {
  height: 100%;
  grid-column: auto; /* parent already claimed the columns */
}
.app .kpi-link:hover .kpi {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

/* Hero card — full-width spend-over-time area chart */
.app .usage-hero-chart {
  padding: 20px 24px 16px;
  color: var(--accent);
}
.app .usage-hero-chart .hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  color: var(--fg);
}
.app .usage-hero-chart .hdr h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.app .usage-hero-chart .hdr .totals {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Geist', 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
}
.app .usage-hero-chart .hdr .totals .v {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.app .usage-hero-chart .hdr .totals .delta {
  font-size: 12px;
  font-weight: 500;
}
.app .usage-area {
  display: block;
  width: 100%;
  height: 180px;
  color: var(--accent);
}
/* Per-band hover: the dot at each data point fades in only when the user
   hovers within that band, not when hovering anywhere on the chart. */
.app .usage-area .hover-dot {
  opacity: 0;
  transition: opacity 120ms;
}
.app .usage-area .hover-zone:hover .hover-dot {
  opacity: 1;
}
/* Subtle band highlight so the user can see which point they're inspecting. */
.app .usage-area .hover-zone rect[fill="transparent"] { transition: fill 120ms; }
.app .usage-area .hover-zone:hover rect[fill="transparent"] {
  fill: rgba(130, 143, 255, 0.06);
}

/* Histogram — same color rules, used on metric_detail */
.app .usage-histogram {
  display: block;
  width: 100%;
  height: 200px;
  color: var(--accent);
}
.app .usage-histogram .hover-zone rect[fill="transparent"] { transition: fill 120ms; }
.app .usage-histogram .hover-zone:hover rect[fill="transparent"] {
  fill: rgba(130, 143, 255, 0.06);
}

/* Chart-with-axes wrapper — CSS grid: y-axis column on the left, chart in
   the right column, x-axis label row spanning the chart column underneath.
   The grid keeps the x-axis horizontally aligned with the SVG without magic
   padding. Position-relative so the absolutely-positioned `.chart-tooltip`
   (managed by the chart_tooltip Stimulus controller) anchors to the bounds.
   `.chart-plot` uses `display: contents` so it disappears from layout — the
   y-axis and SVG inside become direct grid items of `.chart-with-axes`. */
.app .chart-with-axes {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 8px;
  row-gap: 6px;
}

.app .chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 100ms;
  z-index: 5;
}
.app .chart-tooltip.is-visible {
  opacity: 1;
}
.app .chart-plot {
  display: contents;
}
.app .chart-y-axis {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-subtle);
  padding: 4px 0;
  text-align: right;
}
.app .chart-with-axes .usage-area,
.app .chart-with-axes .usage-histogram {
  grid-column: 2;
  grid-row: 1;
}
/* X-axis labels are absolutely positioned at their band's center via inline
   `left: X%` — this lets each label render at its full natural width even
   when the series has hundreds of points (a flex-1-per-span approach would
   give each label only width/n pixels, truncating to a single character on
   year-long ranges). The helper picks tick density adaptively (month names
   on long ranges, day labels on short ones) so labels never collide. */
.app .chart-x-axis {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  height: 14px;
  font-size: 10.5px;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}
.app .chart-x-axis span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Proportion bar list — replaces the cost-by-model pie. */
.app .usage-proportion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app .usage-proportion-row { padding: 0; }
.app .usage-proportion-row .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.app .usage-proportion-row .head .label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .usage-proportion-row .head .value {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.app .usage-proportion-row .bar-track {
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.app .usage-proportion-row .bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  min-width: 2px;
  transition: width 200ms ease;
}
.app .usage-proportion-row .secondary {
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin-top: 3px;
}
.app .usage-proportion-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: var(--r-sm);
  transition: background 120ms;
}
.app .usage-proportion-link:hover { background: var(--surface-3); }
.app .usage-empty-line {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
}

/* Performance card — TTFT + Throughput stacked sparklines */
.app .perf-card {
  padding: 16px 18px;
}
.app .perf-card .perf-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.app .perf-card .perf-row:first-of-type { border-top: none; padding-top: 4px; }
.app .perf-card .perf-row .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.app .perf-card .perf-row .lbl {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app .perf-card .perf-row .lbl .i { width: 12px; height: 12px; flex-shrink: 0; }
.app .perf-card .perf-row .val {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.014em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.app .perf-card .perf-row .delta {
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Latency-at-a-glance card */
.app .latency-glance {
  padding: 16px 18px;
}
.app .latency-glance .glance-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.app .latency-glance .glance-row:first-of-type { border-top: none; padding-top: 4px; }
.app .latency-glance .glance-row .l {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 500;
}
.app .latency-glance .glance-row .v {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.app .latency-glance a.see-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.app .latency-glance a.see-more:hover { text-decoration: underline; }

/* Heatmap — desktop: 7 rows × (label + 24 hour cols).
   Cells are pure CSS-grid; intensity classes mirror `.streak-grid`.
   Class names are namespaced (`hm-desktop`/`hm-mobile`) to avoid colliding
   with the global `.desktop-only`/`.mobile-only` utilities in
   `application.tailwind.css` (which use `display: flex !important`). */
.app .usage-heatmap {
  display: grid;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.app .usage-heatmap.hm-desktop {
  grid-template-columns: 32px repeat(24, 1fr);
}
.app .usage-heatmap.hm-mobile {
  display: none;
  grid-template-columns: 32px repeat(7, 1fr);
}
.app .usage-heatmap .hm-corner { /* spacer */ }
.app .usage-heatmap .hm-day-label,
.app .usage-heatmap .hm-hour-label {
  font-size: 10px;
  color: var(--fg-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  min-height: 14px;
}
.app .usage-heatmap .hm-hour-label {
  justify-content: center;
  padding-right: 0;
}
.app .usage-heatmap .cell {
  aspect-ratio: 1/1;
  border-radius: 3px;
  background: var(--surface-3);
  min-height: 14px;
}
.app .usage-heatmap .cell.l1 { background: rgba(59, 76, 246, 0.18); }
.app .usage-heatmap .cell.l2 { background: rgba(59, 76, 246, 0.35); }
.app .usage-heatmap .cell.l3 { background: rgba(59, 76, 246, 0.6); }
.app .usage-heatmap .cell.l4 { background: var(--accent); }
.app.dark .usage-heatmap .cell.l1 { background: rgba(130, 143, 255, 0.2); }
.app.dark .usage-heatmap .cell.l2 { background: rgba(130, 143, 255, 0.4); }
.app.dark .usage-heatmap .cell.l3 { background: rgba(130, 143, 255, 0.65); }
.app.dark .usage-heatmap .cell.l4 { background: var(--accent); }

/* Usage table — extends the conv-table look with right-aligned numerics */
.app .usage-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.app .usage-table thead tr {
  border-bottom: 1px solid var(--border);
}
.app .usage-table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
}
.app .usage-table th.num,
.app .usage-table td.num {
  text-align: right;
}
.app .usage-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 120ms;
}
.app .usage-table tbody tr:last-child { border-bottom: none; }
.app .usage-table tbody tr.active {
  background: var(--accent-soft);
}
.app .usage-table tbody tr:hover {
  background: var(--surface-3);
}
.app .usage-table td {
  padding: 12px;
  font-size: 13px;
  color: var(--fg);
}
.app .usage-table td .secondary {
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin-top: 2px;
}
.app .usage-table td a {
  color: inherit;
  text-decoration: none;
}
.app .usage-table td a:hover { color: var(--accent); }

/* Native <details> daily-data collapsible (replaces the inert Alpine markup) */
.app details.usage-collapsible {
  padding: 16px 20px;
}
.app details.usage-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  padding: 4px 0;
}
.app details.usage-collapsible > summary::-webkit-details-marker { display: none; }
.app details.usage-collapsible > summary .chev {
  width: 14px;
  height: 14px;
  color: var(--fg-muted);
  transition: transform 200ms;
}
.app details.usage-collapsible[open] > summary .chev {
  transform: rotate(180deg);
}
.app details.usage-collapsible > .body {
  margin-top: 16px;
  max-height: 360px;
  overflow-y: auto;
}

/* Empty state */
.app .usage-empty {
  text-align: center;
  padding: 56px 24px;
}
.app .usage-empty .icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  display: grid;
  place-items: center;
  color: var(--fg-muted);
}
.app .usage-empty h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--fg);
}
.app .usage-empty p {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0 0 16px;
}

/* Quiet footer strip — request-type counts on the show page */
.app .usage-type-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 20px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.app .usage-type-strip .item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.app .usage-type-strip .item .n {
  color: var(--fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Stat tile row used on metric_detail (compact 9-up percentile breakdown) */
.app .stat-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
}
.app .stat-row .stat-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
  text-align: center;
}
.app .stat-row .stat-tile .l {
  font-size: 10.5px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.app .stat-row .stat-tile .v {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  margin-top: 4px;
}

/* Mobile responsive overrides for the usage page */
@media (max-width: 767px) {
  .app .usage-filter-row { gap: 8px; }
  .app .usage-filter-row .right { margin-left: 0; }
  .app .usage-hero-chart { padding: 14px; }
  .app .usage-hero-chart .hdr .totals .v { font-size: 18px; }
  .app .usage-area { height: 140px; }
  .app .usage-histogram { height: 160px; }

  /* Heatmap: swap to mobile (transposed) variant */
  .app .usage-heatmap.hm-desktop { display: none; }
  .app .usage-heatmap.hm-mobile { display: grid; }
  .app .usage-heatmap .cell { min-height: 12px; }

  /* KPI link wrappers: 2-up on mobile (matches .kpi span 6) */
  .app .kpi-link { grid-column: span 6; }

  /* Model dropdown: cap width so the dropdown_controller's viewport-fit
     transform has a chance to keep the menu inside the visible area even
     when the chip sits near the right edge of a narrow screen. */
  .app .model-chip-menu {
    min-width: 200px;
    max-width: calc(100vw - 28px);
  }

  /* 9-up stat row → 3 columns on phones */
  .app .stat-row { grid-template-columns: repeat(3, 1fr); }

  .app .usage-type-strip { padding: 10px 14px; gap: 12px; font-size: 12px; }
  .app details.usage-collapsible { padding: 14px; }
  .app details.usage-collapsible > .body { max-height: 280px; }
}


/* ============================================================
   WIKI — user-facing redesign (Phase 6)
   ============================================================
   All rules are .app-scoped. Admin wiki views still use the legacy
   `prose prose-invert` wrapper (wiki_helper renders that wrapper for
   `mode: :admin` callers) and inherit Tailwind utility styling — these
   rules do not affect them. */

/* ---------- Page wrap (mirrors #page-chat-wrap) ---------- */

.app #page-wiki-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 56px);
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.app #page-wiki-wrap.wiki-rail-collapsed { grid-template-columns: 0 1fr; }
.app #page-wiki-wrap.wiki-rail-collapsed .wiki-rail {
  border-right: none;
  overflow: hidden;
}

/* ---------- Wiki main column ---------- */

.app .wiki-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}
.app .wiki-main-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 64px;
}
.app .wiki-main-inner {
  max-width: 920px;
  margin: 0 auto;
}

/* ---------- Wiki page head (rail toggle + breadcrumbs/title + actions) ---------- */

.app .wiki-page-head {
  height: 52px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.app .wiki-page-head .wiki-page-head-mid {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.app .wiki-page-head .wiki-page-head-mid > nav,
.app .wiki-page-head .wiki-page-head-mid > .wiki-page-head-title {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
}
.app .wiki-page-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.app .wiki-page-head-title .wiki-page-head-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  text-decoration: none;
  transition: background 80ms;
}
.app .wiki-page-head-title .wiki-page-head-back:hover {
  background: var(--surface-3);
  color: var(--fg);
}
.app .wiki-page-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Breadcrumbs */
.app .wiki-breadcrumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  line-height: 1;
  /* Override the global `nav[aria-label="Breadcrumb"]` rule from
     application.tailwind.css that adds margin-bottom: 0.75rem and was
     pushing the breadcrumbs above the flex-centered baseline. */
  margin: 0;
}
.app .wiki-breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.app .wiki-breadcrumbs ol li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.app .wiki-breadcrumbs ol li.sep { color: var(--fg-subtle); }
.app .wiki-breadcrumbs ol li a {
  color: var(--fg-muted);
  text-decoration: none;
  border-radius: var(--r-sm);
  padding: 2px 4px;
  transition: background 80ms, color 80ms;
}
.app .wiki-breadcrumbs ol li a:hover {
  background: var(--surface-3);
  color: var(--fg);
}
.app .wiki-breadcrumbs ol li .current {
  color: var(--fg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action buttons (Copy link / Random) */
.app .wiki-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--fg);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 80ms, border-color 80ms;
}
.app .wiki-action-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.app .wiki-action-btn .label { display: inline; }

/* Copy-link confirmation pill */
.app .wiki-copy-link-wrap { position: relative; display: inline-flex; }
.app .wiki-copy-confirm {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--success-soft);
  color: var(--success);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
  white-space: nowrap;
}
.app .wiki-copy-confirm.is-visible { opacity: 1; }

/* Rail-toggle button — same position pattern as chat-head/.rail-toggle */
.app .wiki-page-head .wiki-rail-toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--fg-muted);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 80ms, color 80ms;
  flex-shrink: 0;
}
.app .wiki-page-head .wiki-rail-toggle:hover {
  background: var(--surface-3);
  color: var(--fg);
}
/* Swap which toggle is visible based on collapse state. When the rail
   is OPEN, the rail's own close button (.wiki-rail-toggle-btn in
   .wiki-rail-head) handles closing, so the page-head's toggle hides
   to avoid two redundant close buttons. When the rail is COLLAPSED,
   the page-head's toggle re-appears (showing the open icon) since the
   rail itself is no longer reachable. Mirrors chat-rail's pattern. */
.app .wiki-page-head > .wiki-rail-toggle { display: none; }
.app #page-wiki-wrap.wiki-rail-collapsed .wiki-page-head > .wiki-rail-toggle { display: grid; }
.app .wiki-rail-toggle .wiki-rail-toggle-open { display: inline-flex; }
.app .wiki-rail-toggle .wiki-rail-toggle-close { display: none; }

/* ---------- Rail (mirrors .chat-rail) ---------- */

.app .wiki-rail {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: transform 200ms ease-out;
}
.app .wiki-rail-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.app .wiki-rail-head .ttl {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}
.app .wiki-rail-head .wiki-rail-action {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  background: var(--surface-3);
  text-decoration: none;
  transition: background 80ms, color 80ms;
}
.app .wiki-rail-head .wiki-rail-action:hover {
  background: var(--accent);
  color: var(--accent-fg);
}
.app .wiki-rail-head .wiki-rail-toggle-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 80ms, color 80ms;
}
.app .wiki-rail-head .wiki-rail-toggle-btn:hover {
  background: var(--surface-3);
  color: var(--fg);
}

.app .wiki-rail-search {
  margin: 12px 14px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.app .wiki-rail-search input {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  flex: 1;
  min-width: 0;
}

.app .wiki-rail-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 14px;
}
.app .wiki-rail-section {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  text-transform: uppercase;
  padding: 12px 8px 6px;
}
.app .wiki-rail-empty-tree,
.app .wiki-rail-empty-filter {
  padding: 16px 12px;
  font-size: 12.5px;
  color: var(--fg-muted);
  text-align: center;
}

/* Hierarchical tree row */
.app .wiki-rail-tree-item {
  --depth: 0;
  position: relative;
}
.app .wiki-rail-tree-item.hidden-by-filter { display: none; }
.app .wiki-rail-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px calc(8px + var(--depth) * 14px);
  border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
}
.app .wiki-rail-row:hover { background: var(--surface-3); }
.app .wiki-rail-tree-item.active > .wiki-rail-row {
  background: var(--accent-soft);
}
.app .wiki-rail-tree-item.active > .wiki-rail-row .wiki-rail-title {
  color: var(--accent-soft-fg);
  font-weight: 600;
}
.app .wiki-rail-toggle {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms, background 80ms;
}
.app .wiki-rail-toggle:hover { background: var(--surface-3); color: var(--fg); }
.app .wiki-rail-tree-item.expanded > .wiki-rail-row > .wiki-rail-toggle {
  transform: rotate(90deg);
}
.app .wiki-rail-spacer {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.app .wiki-rail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--fg);
  font-size: 13px;
}
.app .wiki-rail-link .wiki-rail-leaf-icon { color: var(--fg-subtle); flex-shrink: 0; }
.app .wiki-rail-link .wiki-rail-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .wiki-rail-children { display: none; }
.app .wiki-rail-tree-item.expanded > .wiki-rail-children,
.app .wiki-rail-tree-item.filter-expanded > .wiki-rail-children { display: block; }
/* Rotate the chevron for filter-driven expansion so the visual state
   matches user-driven expansion. */
.app .wiki-rail-tree-item.filter-expanded > .wiki-rail-row > .wiki-rail-toggle {
  transform: rotate(90deg);
}

/* Pinned items in the rail get a slightly warmer accent */
.app .wiki-rail-tree-item.is-pinned > .wiki-rail-row .wiki-rail-leaf-icon {
  color: var(--accent);
}

/* Mobile rail backdrop */
.app .wiki-rail-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 40;
}
.app .wiki-rail-backdrop.is-open { display: block; }

/* ---------- Hero ---------- */

.app .wiki-hero {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 28px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}
.app .wiki-hero-text { margin-bottom: 18px; }
.app .wiki-hero-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
}
.app .wiki-hero-title i { color: var(--accent); }
.app .wiki-hero-sub {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0 0 8px;
}
.app .wiki-hero-sub strong { color: var(--fg); font-weight: 600; }
.app .wiki-stats-strip {
  font-size: 12.5px;
  color: var(--fg-subtle);
  margin: 4px 0 0;
}

/* ---------- Search bar (used in hero + search page) ---------- */

.app .wiki-search-bar { width: 100%; }
.app .wiki-search-bar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color 80ms, box-shadow 80ms;
}
.app .wiki-search-bar-inner:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.app .wiki-search-bar-inner input[type="search"] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--fg);
}
.app .wiki-search-bar-submit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border: none;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 80ms;
}
.app .wiki-search-bar-submit:hover { filter: brightness(1.05); }
.app .wiki-search-bar-hint {
  font-size: 12px;
  color: var(--fg-subtle);
  margin: 8px 2px 0;
}

/* ---------- AI answer card ---------- */

.app .wiki-ai-answer-card {
  margin-top: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
}
.app .wiki-ai-answer-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-soft-fg);
  margin-bottom: 8px;
}
.app .wiki-ai-answer-head i:first-child { color: var(--accent); }
.app .wiki-ai-spinner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: 0;
}
.app .wiki-ai-spinner i {
  animation: wiki-spin 1s linear infinite;
}
@keyframes wiki-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.app .wiki-ai-answer-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.app .wiki-ai-answer-sources {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.app .wiki-source-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--surface-3);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg);
  text-decoration: none;
  transition: background 80ms;
}
.app .wiki-source-chip:hover { background: var(--accent-soft); color: var(--accent-soft-fg); }
.app .wiki-ai-answer-error {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--warning-soft);
  border-radius: var(--r-sm);
  color: var(--warning);
  font-size: 13px;
}

/* ---------- Continue / Featured / Pinned / Recent / Browse ---------- */

.app .wiki-continue {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.app .wiki-continue-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--accent-soft-fg);
  flex-shrink: 0;
}
.app .wiki-continue-text { flex: 1; min-width: 0; }
.app .wiki-continue-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-soft-fg);
}
.app .wiki-continue-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .wiki-continue-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: filter 80ms;
}
.app .wiki-continue-link:hover { filter: brightness(1.05); }

.app .wiki-featured {
  margin-bottom: 16px;
}
.app .wiki-featured-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}
.app .wiki-featured-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 100ms, box-shadow 100ms;
}
.app .wiki-featured-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.app .wiki-featured-body { flex: 1; min-width: 0; }
.app .wiki-featured-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
}
.app .wiki-featured-excerpt {
  font-size: 13.5px;
  color: var(--fg-muted);
  margin: 0 0 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app .wiki-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-soft-fg);
}
.app .wiki-featured-flair {
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.55;
}

.app .wiki-section { margin-bottom: 24px; }
.app .wiki-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.app .wiki-section-head h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.app .wiki-section-head h2 i { color: var(--fg-muted); }
.app .wiki-section-meta {
  font-size: 11.5px;
  color: var(--fg-subtle);
}

/* Pinned tile grid (also re-used for subpages) */
.app .wiki-pinned-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.app .wiki-pinned-tile {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background 80ms, border-color 80ms, transform 80ms;
}
.app .wiki-pinned-tile:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.app .wiki-pinned-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.app .wiki-pinned-body { flex: 1; min-width: 0; }
.app .wiki-pinned-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 4px;
}
.app .wiki-pinned-excerpt {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0 0 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app .wiki-pinned-meta {
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin: 0;
}

/* Recent updated list */
.app .wiki-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-1);
}
.app .wiki-recent-row + .wiki-recent-row { border-top: 1px solid var(--border); }
.app .wiki-recent-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  transition: background 80ms;
}
.app .wiki-recent-link:hover { background: var(--surface-2); }
.app .wiki-recent-icon { color: var(--fg-subtle); }
.app .wiki-recent-title {
  font-size: 13.5px;
  color: var(--fg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .wiki-recent-time {
  font-size: 11.5px;
  color: var(--fg-subtle);
  white-space: nowrap;
}

/* Browse all grid */
.app .wiki-browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
.app .wiki-browse-tile {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  transition: background 80ms, border-color 80ms;
  min-width: 0;
}
.app .wiki-browse-tile:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.app .wiki-browse-tile i { color: var(--fg-subtle); flex-shrink: 0; }
.app .wiki-browse-tile span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Empty state */
.app .wiki-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.app .wiki-empty-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  border-radius: 50%;
}
.app .wiki-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 8px;
}
.app .wiki-empty-body {
  font-size: 14px;
  color: var(--fg-muted);
  max-width: 480px;
  margin: 0 auto 14px;
  line-height: 1.5;
}
.app .wiki-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  transition: background 80ms;
}
.app .wiki-empty-cta:hover { background: var(--surface-3); }

/* ---------- Search page ---------- */

.app .wiki-search-page { padding-top: 8px; }
.app .wiki-search-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 4px;
}
.app .wiki-search-sub {
  font-size: 13.5px;
  color: var(--fg-muted);
  margin: 0 0 16px;
}
.app .wiki-search-prompt {
  margin-top: 24px;
  text-align: center;
  padding: 36px 24px;
  background: var(--surface-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}
.app .wiki-search-prompt i { color: var(--fg-subtle); }
.app .wiki-search-prompt h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin: 8px 0 4px;
}
.app .wiki-search-prompt p {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.5;
}
.app .wiki-search-prompt p em {
  font-style: italic;
  color: var(--fg);
}
.app .wiki-search-prompt-hint {
  font-size: 12px;
  color: var(--fg-subtle);
  margin-top: 8px;
}

/* Search results (rendered inside the keyword frame) */
.app .wiki-search-results { margin-top: 14px; }
.app .wiki-search-results-summary {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0 0 12px;
}
.app .wiki-search-results-summary .q {
  color: var(--fg);
  font-weight: 600;
}
.app .wiki-search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app .wiki-search-result-link {
  display: block;
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background 80ms, border-color 80ms;
}
.app .wiki-search-result-link:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.app .wiki-search-result-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 4px;
}
.app .wiki-search-result-excerpt {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin: 0 0 6px;
}
.app .wiki-search-result-excerpt mark {
  background: var(--warning-soft);
  color: var(--warning);
  padding: 0 2px;
  border-radius: 2px;
}
.app .wiki-search-result-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin: 0;
}
.app .wiki-search-empty {
  margin-top: 14px;
  text-align: center;
  padding: 28px 18px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg-muted);
}
.app .wiki-search-empty i { color: var(--fg-subtle); }
.app .wiki-search-empty h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
  margin: 8px 0 4px;
}
.app .wiki-search-empty p {
  font-size: 13px;
  margin: 0;
}

/* ---------- Show page ---------- */

.app .wiki-show-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 32px 64px;
}
.app .wiki-show-article {
  min-width: 0;
}
.app .wiki-show-head { margin-bottom: 20px; }
.app .wiki-show-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.app .wiki-show-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--fg-subtle);
  flex-wrap: wrap;
  line-height: 1;
}
.app .wiki-show-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.app .wiki-show-meta .sep { color: var(--border-strong); }
.app .wiki-show-meta i {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.app .wiki-show-meta-rail {
  position: sticky;
  top: 76px;
  align-self: start;
  height: fit-content;
}

/* ---------- Wiki article typography (replaces Tailwind prose) ---------- */

.app .wiki-article {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg);
}
.app .wiki-article > * + * { margin-top: 14px; }
.app .wiki-article .wiki-h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 28px 0 10px;
  letter-spacing: -0.01em;
}
.app .wiki-article .wiki-h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 26px 0 8px;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.app .wiki-article .wiki-h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 22px 0 6px;
}
.app .wiki-article .wiki-h4 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; }
.app .wiki-article .wiki-h5 { font-size: 14px; font-weight: 600; margin: 16px 0 4px; }
.app .wiki-article .wiki-h6 { font-size: 13px; font-weight: 600; margin: 14px 0 4px; color: var(--fg-muted); }
.app .wiki-article .wiki-paragraph {
  margin: 0;
  line-height: 1.65;
}
.app .wiki-article .wiki-list {
  margin: 0;
  padding-left: 1.4em;
}
.app .wiki-article .wiki-list-unordered { list-style: disc; }
.app .wiki-article .wiki-list-ordered { list-style: decimal; }
.app .wiki-article .wiki-list-item { margin: 4px 0; line-height: 1.6; }
.app .wiki-article .wiki-list .wiki-list { margin-top: 4px; }

.app .wiki-article .wiki-blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  margin: 0;
  padding: 10px 16px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--fg);
  font-style: italic;
}
.app .wiki-article .wiki-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}
.app .wiki-article .wiki-image {
  max-width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.app .wiki-article .wiki-inline-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
}
.app .wiki-article .wiki-code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.app .wiki-article .wiki-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
.app .wiki-article .wiki-code-language {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.app .wiki-article .wiki-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: background 80ms, color 80ms;
}
.app .wiki-article .wiki-code-copy:hover { background: var(--surface-1); color: var(--fg); }
.app .wiki-article .wiki-code pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
}
.app .wiki-article .wiki-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.app .wiki-article .wiki-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.app .wiki-article .wiki-table thead {
  background: var(--surface-3);
}
.app .wiki-article .wiki-table th,
.app .wiki-article .wiki-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.app .wiki-article .wiki-table th { font-weight: 600; color: var(--fg); }
.app .wiki-article .wiki-table tr:last-child td { border-bottom: none; }

/* External-link styling */
.app .wiki-article .wiki-external-link {
  color: var(--accent-soft-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.app .wiki-article .wiki-external-link:hover { color: var(--accent); }

/* Internal wiki link — strict href prefix scope so external raw HTML
   carrying class="wiki-link" on a non-internal href doesn't inherit. */
.app .wiki-article a.wiki-link[href^="/wiki/pages/"] {
  color: var(--accent-soft-fg);
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
  text-underline-offset: 2px;
  font-weight: 500;
  position: relative;
  padding-left: 14px;
  background-image: linear-gradient(transparent, transparent);
  /* Override the parser-baked Tailwind text-blue-400 / hover:text-blue-300
     classes via specificity; the parser markup is a shared concern with
     admin views so we do not change it. */
}
.app .wiki-article a.wiki-link[href^="/wiki/pages/"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  background-color: var(--accent);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 10 20 15 15 20"/><path d="M4 4v7a4 4 0 0 0 4 4h12"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 10 20 15 15 20"/><path d="M4 4v7a4 4 0 0 0 4 4h12"/></svg>') no-repeat center / contain;
}
.app .wiki-article a.wiki-link[href^="/wiki/pages/"]:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.app .wiki-article a.wiki-link.wiki-link-broken[href^="/wiki/pages/"] {
  color: var(--fg-subtle);
  text-decoration: line-through dotted;
  text-decoration-color: var(--fg-subtle);
}
.app .wiki-article a.wiki-link.wiki-link-broken[href^="/wiki/pages/"]::before {
  background-color: var(--fg-subtle);
}
.app .wiki-article a.wiki-link.wiki-link-broken[href^="/wiki/pages/"]:hover {
  color: var(--warning);
}

/* Article empty state */
.app .wiki-article-empty {
  font-style: italic;
  color: var(--fg-muted);
  text-align: center;
  padding: 24px;
}

/* Subpages + backlinks */
.app .wiki-subpages {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.app .wiki-subpages-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 12px;
}

.app .wiki-backlinks {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.app .wiki-backlinks-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  margin: 0 0 8px;
}
.app .wiki-backlinks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.app .wiki-backlinks-chip {
  display: inline-flex;
  padding: 3px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg);
  text-decoration: none;
  transition: background 80ms, border-color 80ms;
}
.app .wiki-backlinks-chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-soft-fg);
}

/* ---------- Table of Contents ---------- */

.app .wiki-toc {
  background: transparent;
  font-size: 12.5px;
}
.app .wiki-toc-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  margin-bottom: 8px;
  padding-left: 8px;
}
.app .wiki-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--border);
}
.app .wiki-toc-item a {
  display: block;
  padding: 4px 8px 4px 12px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.4;
  transition: color 80ms, border-color 80ms;
}
.app .wiki-toc-item a:hover { color: var(--fg); }
.app .wiki-toc-item a.active {
  color: var(--accent-soft-fg);
  border-color: var(--accent);
  font-weight: 500;
}
.app .wiki-toc-item-l3 a { padding-left: 24px; font-size: 12px; }

/* ---------- Mobile (< 768px) ---------- */

@media (max-width: 767px) {
  .app #page-wiki-wrap {
    grid-template-columns: 1fr;
  }
  .app #page-wiki-wrap.wiki-rail-collapsed { grid-template-columns: 1fr; }
  .app .wiki-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 220ms ease-out;
  }
  .app .wiki-rail.is-mobile-open { transform: translateX(0); }

  /* Mobile: rail is an overlay drawer, so the page-head toggle is
     unconditionally visible regardless of the desktop-collapse class —
     users always have a way to open the drawer. */
  .app .wiki-page-head > .wiki-rail-toggle { display: grid; }

  .app .wiki-main-scroll { padding: 16px 16px 48px; }
  .app .wiki-show-grid {
    grid-template-columns: 1fr;
    padding: 8px 16px 48px;
    gap: 16px;
  }
  .app .wiki-show-meta-rail { display: none; }

  .app .wiki-hero { padding: 22px 18px 16px; border-radius: var(--r-md); }
  .app .wiki-hero-title { font-size: 22px; }
  .app .wiki-search-bar-inner { height: 40px; padding: 0 12px; }
  .app .wiki-search-bar-submit .label,
  .app .wiki-action-btn .label { display: none; }

  .app .wiki-pinned-grid { grid-template-columns: 1fr; }
  .app .wiki-browse-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  .app .wiki-show-title { font-size: 24px; }
}

/* ============================================================
   COURSE — user-facing redesign (Phase 6)
   ============================================================
   All rules are .app-scoped. Admin course views still use the legacy
   `prose prose-invert` wrapper (course_helper renders that for
   `mode: :admin` callers) and Tailwind utility palette — these rules
   do not affect them. */

/* ---------- Page wrap (mirrors #page-wiki-wrap / #page-chat-wrap) ---------- */

.app #page-course-wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 1fr;
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.app #page-course-wrap.course-rail-collapsed { grid-template-columns: 0 1fr; }
.app #page-course-wrap.course-rail-collapsed .course-rail {
  border-right: none;
  overflow: hidden;
}

/* ---------- Course main column ---------- */

.app .course-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}
.app .course-main-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 64px;
}
.app .course-main-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.app .course-lesson-inner {
  max-width: 920px;
  margin: 0 auto;
}

/* ---------- Course page head (rail toggle + breadcrumbs + actions) ---------- */

.app .course-page-head {
  height: 52px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.app .course-page-head-mid {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.app .course-page-head-mid > nav {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
}
.app .course-page-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Breadcrumbs */
.app .course-breadcrumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  line-height: 1;
  margin: 0 0 10px;
}
.app .course-breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.app .course-breadcrumbs ol li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.app .course-breadcrumbs ol li.sep { color: var(--fg-subtle); }
.app .course-breadcrumbs ol li a {
  color: var(--fg-muted);
  text-decoration: none;
  border-radius: var(--r-sm);
  padding: 2px 4px;
  transition: background 80ms, color 80ms;
}
.app .course-breadcrumbs ol li a:hover {
  background: var(--surface-3);
  color: var(--fg);
}
.app .course-breadcrumbs ol li .current {
  color: var(--fg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action buttons (Mark complete / Next) */
.app .course-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--fg);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 80ms, border-color 80ms;
}
.app .course-action-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.app .course-action-btn.is-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.app .course-action-btn.is-primary:hover { filter: brightness(1.06); }
.app .course-action-btn.is-success {
  background: var(--success-soft);
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.app .course-action-btn-icon { padding: 0; width: 28px; justify-content: center; }
.app .course-action-btn .label { display: inline; }

/* Rail-toggle swap rules (mirror chat-rail / wiki-rail patterns) */
.app .course-page-head .course-rail-toggle,
.app .course-embedded-chat-header-left .course-rail-toggle,
.app .course-embedded-instructions-head .course-rail-toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--fg-muted);
  border-radius: var(--r-md);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 80ms, color 80ms;
}
.app .course-page-head .course-rail-toggle:hover,
.app .course-embedded-chat-header-left .course-rail-toggle:hover,
.app .course-embedded-instructions-head .course-rail-toggle:hover {
  background: var(--surface-3);
  color: var(--fg);
}
.app .course-page-head > .course-rail-toggle { display: none; }
.app #page-course-wrap.course-rail-collapsed .course-page-head > .course-rail-toggle { display: grid; }
.app .course-rail-toggle .course-rail-toggle-open { display: inline-flex; }
.app .course-rail-toggle .course-rail-toggle-close { display: none; }

/* ---------- Course rail ---------- */

.app .course-rail {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: transform 200ms ease-out;
}
.app .course-rail-head {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.app .course-rail-course {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--fg);
}
.app .course-rail-cover {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-3);
}
.app .course-rail-cover-fallback {
  display: grid;
  place-items: center;
  color: var(--fg-muted);
}
.app .course-rail-course-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .course-rail-toggle-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 80ms, color 80ms;
}
.app .course-rail-toggle-btn:hover { background: var(--surface-3); color: var(--fg); }

.app .course-rail-progress-row {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.app .course-rail-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-bottom: 5px;
}
.app .course-rail-progress-pct { font-weight: 600; color: var(--fg); }

.app .course-rail-cta {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.app .course-rail-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  justify-content: center;
}
.app .course-rail-cta-btn:hover { filter: brightness(1.06); }

.app .course-rail-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 14px;
}

.app .course-rail-section { padding: 0; }
.app .course-rail-section-head {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 80ms;
}
.app .course-rail-section-head:hover { background: var(--surface-3); }
.app .course-rail-section-chevron {
  color: var(--fg-subtle);
  transition: transform 120ms;
  flex-shrink: 0;
}
.app .course-rail-section.expanded > .course-rail-section-head .course-rail-section-chevron {
  transform: rotate(90deg);
}
.app .course-rail-section-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .course-rail-section-num {
  color: var(--fg-subtle);
  font-weight: 400;
  margin-right: 4px;
}
.app .course-rail-section-count {
  font-size: 11px;
  color: var(--fg-subtle);
  font-weight: 400;
  flex-shrink: 0;
}
.app .course-rail-section-children { display: none; }
.app .course-rail-section.expanded > .course-rail-section-children { display: block; }

.app .course-rail-lesson {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 24px;
  font-size: 12.5px;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: background 80ms;
}
.app .course-rail-lesson:hover { background: var(--surface-3); }
.app .course-rail-lesson.is-active {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}
.app .course-rail-lesson.is-active .course-rail-lesson-title { font-weight: 600; }
.app .course-rail-lesson.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.app .course-rail-lesson-status.status-completed { color: var(--success); }
.app .course-rail-lesson-status.status-in_progress { color: var(--accent); }
.app .course-rail-lesson-status.status-not_started { color: var(--fg-subtle); }
.app .course-rail-lesson-num { color: var(--fg-subtle); flex-shrink: 0; min-width: 28px; }
.app .course-rail-lesson-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .course-rail-lesson-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--fg-subtle);
  flex-shrink: 0;
}
.app .course-rail-lesson-type.type-article { color: var(--fg-subtle); }
.app .course-rail-lesson-type.type-quiz { color: #b66bff; }
.app .course-rail-lesson-type.type-challenge { color: #ff8e3c; }
.app .course-rail-lesson-type.type-demo { color: #5fbef0; }

/* Mobile rail backdrop */
.app .course-rail-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 50;
}
.app .course-rail-backdrop.is-open { display: block; }

/* ---------- Hero (landing) ---------- */

.app .course-hero-row {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-xs);
}
.app .course-hero-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
}
.app .course-hero-title i { color: var(--accent); }
.app .course-hero-sub {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0 0 10px;
}
.app .course-hero-sub strong { color: var(--fg); font-weight: 600; }
.app .course-stats-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.app .course-stats-item strong { color: var(--fg); font-weight: 600; }
.app .course-stats-sep { color: var(--fg-subtle); }

/* ---------- Continue learning card ---------- */

.app .course-continue-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.app .course-continue-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--accent-soft-fg);
  flex-shrink: 0;
}
.app .course-continue-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app .course-continue-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-soft-fg);
}
.app .course-continue-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .course-continue-meta {
  font-size: 11.5px;
  color: var(--fg-muted);
}
.app .course-continue-meta .sep { color: var(--fg-subtle); margin: 0 4px; }
.app .course-continue-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: filter 80ms;
}
.app .course-continue-link:hover { filter: brightness(1.05); }

/* ---------- Featured course tile ---------- */

.app .course-featured { margin-bottom: 18px; }
.app .course-featured-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}
.app .course-featured-card {
  display: flex;
  gap: 18px;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--r-lg);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 100ms, box-shadow 100ms;
}
.app .course-featured-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.app .course-featured-cover {
  width: 180px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--r-md);
  flex-shrink: 0;
  background: var(--surface-3);
}
.app .course-featured-cover-fallback {
  display: grid;
  place-items: center;
  color: var(--accent);
}
.app .course-featured-body { flex: 1; min-width: 0; }
.app .course-featured-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
}
.app .course-featured-excerpt {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0 0 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app .course-featured-meta {
  font-size: 12px;
  color: var(--fg-subtle);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.app .course-featured-meta .sep { color: var(--fg-subtle); }
.app .course-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-soft-fg);
}

/* ---------- Section headers shared ---------- */

.app .course-section { margin-bottom: 24px; }
.app .course-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.app .course-section-head h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.app .course-section-head h2 i { color: var(--fg-muted); }
.app .course-section-meta {
  font-size: 12px;
  color: var(--fg-subtle);
  text-decoration: none;
}
.app .course-section-meta:hover { color: var(--fg); }
.app .course-section-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app .course-section-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--fg-muted);
  text-decoration: none;
}
.app .course-section-action:hover { color: var(--fg); }

/* ---------- Recently active list ---------- */

.app .course-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-1);
}
.app .course-recent-row + .course-recent-row { border-top: 1px solid var(--border); }
.app .course-recent-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  transition: background 80ms;
}
.app .course-recent-link:hover { background: var(--surface-2); }
.app .course-recent-cover {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--surface-3);
}
.app .course-recent-cover-fallback {
  display: grid;
  place-items: center;
  color: var(--fg-muted);
}
.app .course-recent-body { min-width: 0; }
.app .course-recent-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.app .course-recent-title {
  font-size: 13.5px;
  color: var(--fg);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .course-recent-pct {
  font-size: 11.5px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.app .course-recent-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--accent-soft-fg);
  font-weight: 600;
  flex-shrink: 0;
}

/* ---------- Progress bar ---------- */

.app .course-progress {
  width: 100%;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.app .course-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 200ms;
}

/* ---------- Certificates preview row ---------- */

.app .course-cert-preview-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.app .course-cert-preview-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 100ms, border-color 100ms;
}
.app .course-cert-preview-tile:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.app .course-cert-preview-strip {
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft-fg));
}
.app .course-cert-preview-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app .course-cert-preview-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.app .course-cert-preview-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
}
.app .course-cert-preview-date {
  font-size: 11.5px;
  color: var(--fg-subtle);
}

/* ---------- Browse grid (also used on landing) ---------- */

.app .course-browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.app .course-browse-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 100ms, border-color 100ms, box-shadow 100ms;
}
.app .course-browse-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.app .course-browse-card-cover {
  width: 100%;
  height: 100px;
  object-fit: cover;
  background: var(--surface-3);
}
.app .course-browse-card-cover-fallback {
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
}
.app .course-browse-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.app .course-browse-card-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.app .course-browse-card-excerpt {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app .course-browse-card-meta {
  font-size: 11.5px;
  color: var(--fg-subtle);
  display: flex;
  align-items: center;
  gap: 4px;
}
.app .course-browse-card-meta .sep { color: var(--fg-subtle); }
.app .course-browse-card-progress { margin-top: auto; }
.app .course-browse-card-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.app .course-browse-card-progress-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app .course-browse-card-progress-pct { color: var(--fg); font-weight: 600; }
.app .course-browse-card-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 12px;
  color: var(--accent-soft-fg);
  font-weight: 600;
}

/* Browse toolbar */
.app .course-browse-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.app .course-browse-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 240px;
  height: 32px;
  padding: 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.app .course-browse-search input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
}
.app .course-browse-scopes { gap: 4px; }
.app .course-browse-sort {
  height: 32px;
  padding: 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--fg);
}

/* ---------- Activity strip ---------- */

.app .course-activity-strip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.app .course-activity-strip i { color: #ff8e3c; }
.app .course-activity-strip strong { color: var(--fg); font-weight: 600; }

/* ---------- Course detail page (courses#show) ---------- */

.app .course-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  gap: 24px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}
.app .course-detail-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--surface-3);
}
.app .course-detail-cover-fallback {
  display: grid;
  place-items: center;
  color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
}
.app .course-detail-body { min-width: 0; }
.app .course-detail-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.app .course-detail-description {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
.app .course-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-subtle);
  margin-bottom: 16px;
}
.app .course-detail-meta .sep { color: var(--fg-subtle); }
.app .course-detail-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.app .course-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--success-soft);
  color: var(--success);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.app .course-detail-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-soft-fg);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.app .course-detail-cta-link:hover { color: var(--accent); }
.app .course-detail-progress {
  width: 100%;
  max-width: 320px;
}
.app .course-detail-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-bottom: 5px;
}
.app .course-detail-progress-pct { color: var(--fg); font-weight: 600; }

.app .course-detail-sections-head {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 12px;
}
.app .course-detail-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.app .course-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.app .course-detail-section-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.app .course-detail-section-num {
  color: var(--fg-subtle);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.app .course-detail-section-title {
  color: var(--fg);
  text-decoration: none;
}
.app .course-detail-section-title:hover { color: var(--accent); }
.app .course-detail-section-count {
  font-size: 12px;
  color: var(--fg-subtle);
}
.app .course-detail-lesson-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.app .course-detail-lesson {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.app .course-detail-lesson:last-child { border-bottom: none; }
.app .course-detail-lesson.is-locked { opacity: 0.55; }
.app .course-detail-lesson-status.status-completed { color: var(--success); }
.app .course-detail-lesson-status.status-in_progress { color: var(--accent); }
.app .course-detail-lesson-status.status-not_started { color: var(--fg-subtle); }
.app .course-detail-lesson-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--fg);
  min-width: 0;
}
.app .course-detail-lesson-link:hover { color: var(--accent); }
.app .course-detail-lesson-link.is-static {
  cursor: default;
  color: var(--fg-muted);
}
.app .course-detail-lesson-num { color: var(--fg-subtle); font-weight: 500; }
.app .course-detail-lesson-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .course-detail-lesson-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.app .course-detail-lesson-meta .type-article { color: var(--fg-subtle); }
.app .course-detail-lesson-meta .type-quiz { color: #b66bff; }
.app .course-detail-lesson-meta .type-challenge { color: #ff8e3c; }
.app .course-detail-lesson-meta .type-demo { color: #5fbef0; }
.app .course-detail-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--fg-muted);
  font-size: 13.5px;
}
.app .course-detail-unenroll {
  margin-top: 18px;
  text-align: center;
}

/* ---------- Section detail ---------- */

.app .course-section-detail-head {
  margin-bottom: 18px;
}
.app .course-section-detail-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  margin-bottom: 6px;
}
.app .course-section-detail-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 8px;
}
.app .course-section-detail-description {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.6;
}
.app .course-section-detail-lesson-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  overflow: hidden;
}
.app .course-section-detail-lesson {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.app .course-section-detail-lesson:last-child { border-bottom: none; }
.app .course-section-detail-lesson.is-locked { opacity: 0.55; }
.app .course-section-detail-lesson-status.status-completed { color: var(--success); }
.app .course-section-detail-lesson-status.status-in_progress { color: var(--accent); }
.app .course-section-detail-lesson-status.status-not_started { color: var(--fg-subtle); }
.app .course-section-detail-lesson-body { min-width: 0; }
.app .course-section-detail-lesson-body h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 4px;
}
.app .course-section-detail-lesson-link {
  text-decoration: none;
  color: inherit;
}
.app .course-section-detail-lesson-link:hover h3 { color: var(--accent); }
.app .course-section-detail-lesson-num { color: var(--fg-subtle); }
.app .course-section-detail-lesson-desc {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0 0 4px;
  line-height: 1.5;
}
.app .course-section-detail-lesson-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.app .course-section-detail-lesson-meta .sep { color: var(--fg-subtle); }
.app .course-section-detail-lesson-cta { flex-shrink: 0; }
.app .course-section-detail-lesson-locked {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--fg-subtle);
}

/* ---------- Lesson page chrome ---------- */

.app .course-lesson-head { margin-bottom: 18px; }
.app .course-lesson-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  margin-bottom: 6px;
}
.app .course-lesson-eyebrow .sep { color: var(--fg-subtle); }
.app .course-lesson-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.app .course-lesson-description {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.5;
}
.app .course-lesson-empty {
  text-align: center;
  padding: 40px 24px;
  background: var(--surface-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--fg-muted);
}
.app .course-lesson-empty i { color: var(--warning); margin-bottom: 8px; }
.app .course-lesson-empty h3 { color: var(--fg); margin: 0 0 4px; }

.app .course-lesson-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.app .course-lesson-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 13px;
}
.app .course-lesson-nav-link:hover { color: var(--fg); }
.app .course-lesson-nav-link.is-next { justify-self: end; }
.app .course-lesson-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
}
.app .course-lesson-nav-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--success);
  font-weight: 600;
}

/* ---------- Course article (typography replacement for `prose`) ---------- */

.app .course-article {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg);
}
.app .course-article > * + * { margin-top: 14px; }
.app .course-article .course-h1 {
  font-size: 26px;
  font-weight: 700;
  margin: 28px 0 10px;
  letter-spacing: -0.01em;
}
.app .course-article .course-h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 26px 0 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.app .course-article .course-h3 { font-size: 17px; font-weight: 600; margin: 22px 0 6px; }
.app .course-article .course-h4 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; }
.app .course-article .course-h5 { font-size: 14px; font-weight: 600; margin: 16px 0 4px; }
.app .course-article .course-h6 {
  font-size: 13px; font-weight: 600; margin: 14px 0 4px; color: var(--fg-muted);
}
.app .course-article .course-paragraph { margin: 0; line-height: 1.65; }
.app .course-article .course-list {
  margin: 0;
  padding-left: 1.4em;
}
.app .course-article .course-list-unordered { list-style: disc; }
.app .course-article .course-list-ordered { list-style: decimal; }
.app .course-article .course-list-item { margin: 4px 0; line-height: 1.6; }
.app .course-article .course-list .course-list { margin-top: 4px; }
.app .course-article .course-blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  margin: 0;
  padding: 10px 16px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-style: italic;
}
.app .course-article .course-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}
.app .course-article .course-article-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.app .course-article video {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 70vh;
  margin: 14px auto;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: transparent;
}
.app .course-article .course-inline-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
}
.app .course-article .course-code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.app .course-article .course-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
.app .course-article .course-code-language {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.app .course-article .course-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: background 80ms, color 80ms;
}
.app .course-article .course-code-copy:hover { background: var(--surface-1); color: var(--fg); }
.app .course-article .course-code pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
}
.app .course-article .course-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.app .course-article .course-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.app .course-article .course-table thead { background: var(--surface-3); }
.app .course-article .course-table th,
.app .course-article .course-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.app .course-article .course-table th { font-weight: 600; color: var(--fg); }
.app .course-article .course-table tr:last-child td { border-bottom: none; }
.app .course-article .course-external-link {
  color: var(--accent-soft-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.app .course-article .course-external-link:hover { color: var(--accent); }

/* ---------- Inline challenge mini-chat (course articles) ---------- */

.app .course-inline-challenge {
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, #b66bff 35%, var(--border));
  border-radius: var(--r-md);
  margin: 16px 0;
}
.app .course-inline-challenge-card { padding: 14px 16px; }
.app .course-inline-challenge-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.app .course-inline-challenge-icon { color: #b66bff; }
.app .course-inline-challenge-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
}
.app .course-inline-challenge-difficulty {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.app .course-inline-challenge-description {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0 0 10px;
}
.app .course-inline-challenge-prompt {
  margin: 8px 0 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--fg-muted);
}
.app .course-inline-challenge-prompt-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--fg);
  margin-right: 4px;
}
.app .course-inline-challenge-start {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #b66bff;
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 80ms;
}
.app .course-inline-challenge-start:hover { filter: brightness(1.06); }

.app .course-inline-chat-wrapper {
  background: var(--surface-1);
  border: 1px solid color-mix(in srgb, #b66bff 35%, var(--border));
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.app .course-inline-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.app .course-inline-chat-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
  flex: 1;
  min-width: 0;
}
.app .course-inline-chat-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app .course-inline-chat-prompt-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 3px 7px;
  border-radius: var(--r-sm);
  font-size: 11px;
  cursor: pointer;
}
.app .course-inline-chat-prompt-btn:hover { background: var(--surface-3); color: var(--fg); }
.app .course-inline-chat-model-select {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  font-size: 11px;
  color: var(--fg);
}
.app .course-inline-chat-icon-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.app .course-inline-chat-icon-btn:hover { background: var(--surface-3); color: var(--fg); }

.app .course-inline-chat-messages {
  height: 320px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-2);
}
.app .course-inline-chat-row {
  display: flex;
}
.app .course-inline-chat-row.is-user { justify-content: flex-end; }
.app .course-inline-chat-row.is-system-prompt { justify-content: flex-start; }
.app .course-inline-chat-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.45;
  word-wrap: break-word;
}
.app .course-inline-chat-bubble.is-user { background: #b66bff; color: #fff; }
.app .course-inline-chat-bubble.is-assistant { background: var(--surface-1); border: 1px solid var(--border); color: var(--fg); }
.app .course-inline-chat-bubble.is-system-prompt {
  background: var(--surface-1);
  border: 1px dashed var(--border);
  color: var(--fg-muted);
  font-size: 12px;
}
.app .course-inline-chat-bubble.is-error {
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.app .course-inline-chat-prompt-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--fg);
  margin-right: 4px;
}
.app .course-inline-chat-typing i { animation: course-spin 1s linear infinite; }
@keyframes course-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.app .course-inline-chat-input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
}
.app .course-inline-chat-input {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
}
.app .course-inline-chat-input:focus {
  outline: none;
  border-color: #b66bff;
  box-shadow: 0 0 0 3px color-mix(in srgb, #b66bff 18%, transparent);
}
.app .course-inline-chat-send {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: #b66bff;
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.app .course-inline-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.app .course-inline-chat-prompt-popover {
  position: absolute;
  top: 50px;
  left: 12px;
  right: 12px;
  z-index: 10;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.app .course-inline-chat-prompt-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--fg);
}
.app .course-inline-chat-prompt-popover-head button {
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
}
.app .course-inline-chat-prompt-popover-body {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fg-muted);
  max-height: 160px;
  overflow-y: auto;
  white-space: pre-wrap;
}
.app .course-inline-chat-code {
  background: var(--surface-3);
  padding: 6px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  overflow-x: auto;
  margin: 4px 0;
}
.app .course-inline-chat-inline-code {
  background: var(--surface-3);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.92em;
}

/* ---------- Quiz form & results ---------- */

.app .course-quiz-form { padding-bottom: 80px; }
.app .course-quiz-questions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.app .course-quiz-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
}
.app .course-quiz-card.is-correct { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); background: color-mix(in srgb, var(--success-soft) 30%, var(--surface-1)); }
.app .course-quiz-card.is-incorrect { border-color: color-mix(in srgb, #ef4444 35%, var(--border)); background: color-mix(in srgb, rgba(239,68,68,0.1) 30%, var(--surface-1)); }
.app .course-quiz-card.is-pending { border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); background: color-mix(in srgb, var(--warning-soft) 30%, var(--surface-1)); }

.app .course-quiz-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.app .course-quiz-card-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.app .course-quiz-card-question {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  color: var(--fg);
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.app .course-quiz-card-question > p { margin: 0; }
.app .course-quiz-card-question > p + p { margin-top: 6px; }
.app .course-quiz-card-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}
.app .course-quiz-card-state.is-correct { color: var(--success); }
.app .course-quiz-card-state.is-incorrect { color: #ef4444; }
.app .course-quiz-card-state.is-pending { color: var(--warning); }

.app .course-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app .course-quiz-option {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: background 80ms, border-color 80ms;
}
.app .course-quiz-option:hover { background: var(--surface-3); border-color: var(--border-strong); }
.app .course-quiz-option input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip: rect(0 0 0 0); overflow: hidden;
}
.app .course-quiz-option-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  margin-top: 3px;
  position: relative;
}
.app .course-quiz-option input[type="radio"]:checked + .course-quiz-option-marker {
  border-color: var(--accent);
}
.app .course-quiz-option input[type="radio"]:checked + .course-quiz-option-marker::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 50%;
}
.app .course-quiz-option-body {
  min-width: 0;
  font-size: 13.5px;
  color: var(--fg);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.app .course-quiz-option-body > p { margin: 0; }
.app .course-quiz-option-body > p + p { margin-top: 4px; }

.app .course-quiz-matching {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app .course-quiz-matching-row {
  display: grid;
  grid-template-columns: minmax(0, 35%) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.app .course-quiz-matching-term {
  min-width: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--fg);
  overflow-wrap: break-word;
  word-break: break-word;
}
.app .course-quiz-matching-arrow { color: var(--fg-subtle); }
.app .course-quiz-matching-dropdown {
  position: relative;
  min-width: 0;
}
.app .course-quiz-matching-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
}
.app .course-quiz-matching-btn > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .course-quiz-matching-btn > i { flex-shrink: 0; }
.app .course-quiz-matching-btn .is-empty { color: var(--fg-muted); }
.app .course-quiz-matching-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 4px;
}
.app .course-quiz-matching-menu.hidden { display: none; }
.app .course-quiz-matching-option {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
}
.app .course-quiz-matching-option:hover { background: var(--surface-3); }
.app .course-quiz-matching-option:first-child { color: var(--fg-muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; }

.app .course-quiz-textarea,
.app .course-quiz-input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--fg);
  resize: vertical;
}
.app .course-quiz-textarea:focus,
.app .course-quiz-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.app .course-quiz-counter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 11.5px;
}
.app .course-quiz-counter-label { color: var(--fg-subtle); }
.app .course-quiz-counter .is-ok { color: var(--success); }
.app .course-quiz-counter .is-short { color: #ef4444; }
.app .course-quiz-counter .is-muted { color: var(--fg-subtle); }

.app .course-quiz-submit-bar {
  position: sticky;
  bottom: 0;
  margin: 18px 0 0;
  padding: 14px 20px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 4;
}
.app .course-quiz-submit-hint {
  font-size: 12px;
  color: var(--fg-muted);
  margin: 0;
}
.app .course-quiz-submit { min-width: 160px; }
.app .course-quiz-submit.is-disabled { opacity: 0.5; cursor: not-allowed; }

.app .course-quiz-results-summary {
  text-align: center;
  padding: 22px 18px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 20px;
}
.app .course-quiz-results-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
  border-radius: 50%;
}
.app .course-quiz-results-icon.is-success { background: var(--success-soft); color: var(--success); }
.app .course-quiz-results-icon.is-fail { background: rgba(239,68,68,0.12); color: #ef4444; }
.app .course-quiz-results-icon.is-pending { background: var(--warning-soft); color: var(--warning); }
.app .course-quiz-results-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.app .course-quiz-results-title.is-success { color: var(--success); }
.app .course-quiz-results-title.is-fail { color: #ef4444; }
.app .course-quiz-results-title.is-pending { color: var(--warning); }
.app .course-quiz-results-score { font-size: 36px; font-weight: 700; color: var(--fg); margin: 4px 0; }
.app .course-quiz-results-meta { font-size: 12.5px; color: var(--fg-muted); }
.app .course-quiz-results-meta .sep { color: var(--fg-subtle); }
.app .course-quiz-results-questions { display: flex; flex-direction: column; gap: 14px; }
.app .course-quiz-results-questions h3 { font-size: 16px; font-weight: 600; color: var(--fg); margin: 0 0 8px; }
.app .course-quiz-result-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: var(--r-sm);
}
.app .course-quiz-result-option.is-correct { background: color-mix(in srgb, var(--success-soft) 60%, transparent); }
.app .course-quiz-result-option.is-incorrect { background: rgba(239,68,68,0.1); }
.app .course-quiz-result-option.is-correct-unchosen { background: color-mix(in srgb, var(--success-soft) 25%, transparent); }
.app .course-quiz-result-option.is-neutral { background: var(--surface-2); }
.app .course-quiz-result-option-marker {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.app .course-quiz-result-option.is-correct .course-quiz-result-option-marker { color: var(--success); }
.app .course-quiz-result-option.is-incorrect .course-quiz-result-option-marker { color: #ef4444; }
.app .course-quiz-result-option.is-correct-unchosen .course-quiz-result-option-marker { color: var(--success); }
.app .course-quiz-result-option-marker i { vertical-align: middle; }
.app .course-quiz-result-option-body {
  min-width: 0;
  font-size: 13.5px;
  color: var(--fg);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.app .course-quiz-result-option-body > p { margin: 0; display: inline; }
.app .course-quiz-result-option-body > p + p { margin-top: 4px; display: block; }
.app .course-quiz-result-option-tag {
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin-left: 4px;
}
.app .course-quiz-result-option-tag.is-success { color: var(--success); }
.app .course-quiz-result-explanation {
  grid-column: 2;
  min-width: 0;
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-top: 6px;
  padding: 8px 12px;
  border-left: 2px solid var(--border-strong);
  background: var(--surface-2);
  overflow-wrap: anywhere;
}
.app .course-quiz-result-explanation > p { margin: 0; }
.app .course-quiz-result-explanation > p + p { margin-top: 4px; }
.app .course-quiz-matching-results { display: flex; flex-direction: column; gap: 6px; }
.app .course-quiz-matching-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
}
.app .course-quiz-matching-result.is-correct { background: color-mix(in srgb, var(--success-soft) 50%, transparent); color: var(--success); }
.app .course-quiz-matching-result.is-incorrect { background: rgba(239,68,68,0.1); color: #ef4444; }
.app .course-quiz-matching-result .course-quiz-matching-term {
  color: var(--fg);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.app .course-quiz-matching-result .course-quiz-matching-answer {
  color: var(--fg);
  min-width: 0;
  overflow-wrap: anywhere;
}
.app .course-quiz-matching-correct {
  font-size: 11.5px;
  color: var(--success);
  min-width: 0;
  overflow-wrap: anywhere;
}
.app .course-quiz-result-text-answer-label { font-size: 12px; color: var(--fg-muted); margin: 0 0 4px; }
.app .course-quiz-result-text-answer-body {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.app .course-quiz-result-pending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--warning);
  margin-top: 6px;
}
.app .course-quiz-result-feedback {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.app .course-quiz-results-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.app .course-quiz-results-retry-hint,
.app .course-quiz-results-no-retry {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
  text-align: center;
}
.app .course-quiz-results-no-retry {
  color: #ef4444;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ---------- Empty state ---------- */

.app .course-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.app .course-empty-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  border-radius: 50%;
}
.app .course-empty-title { font-size: 18px; font-weight: 700; color: var(--fg); margin: 0 0 8px; }
.app .course-empty-body { font-size: 14px; color: var(--fg-muted); max-width: 480px; margin: 0 auto; line-height: 1.5; }
.app .course-empty-cta { margin-top: 14px; }

/* ---------- Certificate index + show ---------- */

.app .course-cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.app .course-cert-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 100ms, border-color 100ms, box-shadow 100ms;
}
.app .course-cert-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.app .course-cert-card-strip {
  height: 6px;
  background: linear-gradient(90deg, var(--accent), #b66bff);
}
.app .course-cert-card-thumb-wrap {
  aspect-ratio: 4 / 3;
  background: #0a0a0a;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.app .course-cert-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.app .course-cert-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app .course-cert-card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.app .course-cert-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}
.app .course-cert-card-meta { font-size: 12px; color: var(--fg-muted); margin: 0; }
.app .course-cert-card-id {
  font-size: 11px;
  color: var(--fg-subtle);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.app .course-cert-card-id-label { text-transform: uppercase; letter-spacing: 0.06em; }
.app .course-cert-card-id-value {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--fg);
}

.app .course-cert-show-page { padding-bottom: 100px; }
.app .course-cert-pending-input {
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: var(--r-md);
  padding: 18px;
  margin-bottom: 18px;
}
.app .course-cert-pending-input h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: var(--warning);
  margin: 0 0 4px;
}
.app .course-cert-pending-input p { font-size: 13.5px; color: var(--fg-muted); margin: 0 0 14px; }
.app .course-cert-pending-form { display: flex; flex-direction: column; gap: 12px; }
.app .course-cert-pending-field { display: flex; flex-direction: column; gap: 4px; }
.app .course-cert-pending-label { font-size: 12.5px; color: var(--fg); font-weight: 600; }
.app .course-cert-pending-label .required { color: #ef4444; }
.app .course-cert-pending-field input {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--fg);
}
.app .course-cert-pending-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.app .course-cert-preview-frame {
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.app .course-cert-preview-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.app .course-cert-pending-placeholder {
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 48px 24px;
  margin-bottom: 18px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.app .course-cert-pending-placeholder i {
  color: var(--fg-subtle);
}
.app .course-cert-error-banner {
  background: color-mix(in srgb, #ef4444 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, #ef4444 35%, var(--border));
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.app .course-cert-error-banner-icon {
  color: #ef4444;
  flex-shrink: 0;
}
.app .course-cert-error-banner-body {
  flex: 1;
  min-width: 0;
}
.app .course-cert-error-banner-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 2px;
}
.app .course-cert-error-banner-text {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0;
}
.app .course-cert-info-banner {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.app .course-cert-action-bar {
  position: sticky;
  bottom: 0;
  margin: 24px -32px -64px;
  padding: 14px 32px;
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 4;
}
.app .course-cert-action-bar .btn { flex-shrink: 0; }
.app .course-cert-action-back { margin-left: auto; }
.app .course-cert-copy-confirm {
  font-size: 11.5px;
  color: var(--success);
  font-weight: 600;
  opacity: 0;
  transition: opacity 120ms;
  pointer-events: none;
}
.app .course-cert-copy-confirm.is-visible { opacity: 1; }

/* LinkedIn-branded button variant */
.app .btn.btn-linkedin {
  background: #0A66C2;
  color: #fff;
  border-color: #0A66C2;
}
.app .btn.btn-linkedin:hover { background: #08529e; }

/* ---------- Credential card (used on cert show + public verify) ---------- */

.app .course-credential {
  position: relative;
  background: linear-gradient(135deg, #1a1d21, #0f1115);
  border: 1px solid color-mix(in srgb, #b66bff 25%, transparent);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  margin: 0 auto 18px;
  max-width: 640px;
  color: #e7e9ec;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.app .course-credential.is-disabled { opacity: 0.55; }
.app .course-credential-flair {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.app .course-credential-flair-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}
.app .course-credential-flair-orb-1 {
  width: 240px; height: 240px;
  background: rgba(132, 56, 234, 0.6);
  top: -100px; right: -80px;
}
.app .course-credential-flair-orb-2 {
  width: 200px; height: 200px;
  background: rgba(59, 76, 246, 0.5);
  bottom: -90px; left: -60px;
}
.app .course-credential-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 28px;
}
.app .course-credential-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #b66bff;
}
.app .course-credential-issuer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9aa0ab;
}
.app .course-credential-logo { height: 16px; }
.app .course-credential-issuer-name { color: #b66bff; font-weight: 500; }
.app .course-credential-body {
  text-align: center;
  position: relative;
  padding: 16px 0 28px;
}
.app .course-credential-statement {
  font-size: 15px;
  color: #b3b8c2;
  margin: 6px 0;
}
.app .course-credential-recipient {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 6px 0 8px;
  letter-spacing: -0.01em;
}
.app .course-credential-course {
  font-size: 22px;
  font-weight: 600;
  color: #b66bff;
  margin: 6px 0;
}
.app .course-credential-date { font-size: 14px; color: #9aa0ab; margin: 6px 0 0; }
.app .course-credential-foot {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.app .course-credential-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #6b7280;
}
.app .course-credential-id-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.app .course-credential-id-value {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #c8ccd5;
}

/* ---------- Public pages (course preview + cert verification) ---------- */

.app.dark .course-public-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app .course-public-header {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 24px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.app .course-public-logo { height: 18px; }
.app .course-public-header-sep { color: var(--fg-subtle); font-size: 18px; }
.app .course-public-header-brand { color: #b66bff; font-size: 18px; font-weight: 500; }
.app .course-public-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 24px 64px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.app .course-public-verify-badge {
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 22px;
}
.app .course-public-verify-badge-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}
.app .course-public-verify-badge h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--success);
  margin: 0 0 4px;
}
.app .course-public-verify-badge p {
  font-size: 13.5px;
  color: var(--fg-muted);
  margin: 0;
}

.app .course-public-details {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 24px;
}
.app .course-public-details dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.app .course-public-details dt {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  margin: 0 0 4px;
}
.app .course-public-details dd { margin: 0; font-size: 14.5px; color: var(--fg); font-weight: 500; }
.app .course-public-details dd.is-mono {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--fg);
}
.app .course-public-copy {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg-muted);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.app .course-public-copy:hover { background: var(--surface-3); color: var(--fg); }
.app .course-public-copy-confirm {
  font-size: 11.5px;
  color: var(--success);
  font-weight: 600;
  opacity: 0;
  transition: opacity 120ms;
}
.app .course-public-copy-confirm.is-visible { opacity: 1; }
.app .course-public-course-link, .app .course-public-cta {
  text-align: center;
  margin: 0;
}
.app .course-public-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-soft-fg);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

/* Public course preview */
.app .course-public-course { gap: 24px; }
.app .course-public-course-hero {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.app .course-public-course-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--surface-3);
  display: block;
}
.app .course-public-course-cover-fallback {
  display: grid;
  place-items: center;
  color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface-2));
}
.app .course-public-course-body { padding: 22px 24px; }
.app .course-public-course-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  margin-bottom: 6px;
}
.app .course-public-course-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
}
.app .course-public-course-description {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
.app .course-public-course-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-subtle);
  margin-bottom: 12px;
}
/* Tailwind preflight forces SVGs to display:block, which would push the
   icon onto its own line above the label text. Lay each meta entry out
   inline so icon and label sit on the same baseline. */
.app .course-public-course-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.app .course-public-course-meta .sep { color: var(--fg-subtle); }
.app .course-public-course-enrollment {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0 0 14px;
}
.app .course-public-course-cta { margin: 0; }

.app .course-public-course-content {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 24px;
}
.app .course-public-course-content h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 12px;
}
.app .course-public-course-section {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.app .course-public-course-section header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.app .course-public-course-section header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.app .course-public-course-section-num {
  color: var(--fg-subtle);
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.app .course-public-course-section-count { font-size: 11.5px; color: var(--fg-subtle); }
.app .course-public-course-section ul { list-style: none; margin: 0; padding: 0; }
.app .course-public-course-section li {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.app .course-public-course-section li:last-child { border-bottom: none; }
.app .course-public-lesson-status { color: var(--fg-subtle); }
.app .course-public-lesson-num { color: var(--fg-subtle); font-weight: 500; }
.app .course-public-lesson-title { color: var(--fg); }
.app .course-public-lesson-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.app .course-public-lesson-meta .type-article { color: var(--fg-subtle); }
.app .course-public-lesson-meta .type-quiz { color: #b66bff; }
.app .course-public-lesson-meta .type-challenge { color: #ff8e3c; }
.app .course-public-lesson-meta .type-demo { color: #5fbef0; }
.app .course-public-lesson-meta .sep { color: var(--fg-subtle); }
.app .course-public-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--fg-muted);
}

/* ---------- Embedded challenge layout ---------- */

.app .course-embedded-main {
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

/* Embedded-challenge layout: pin the wrap to the viewport via
   `position: fixed` so it neither contributes to body flow nor needs
   percentage-height chaining through deeply nested flex/grid
   ancestors. The topbar (56px) sits above; the wrap fills the rest
   of the viewport. Sidebar offsets (4rem rail / 16rem expanded) are
   handled via `left:` rules; mobile zeroes them since the sidebar
   is overlay-style there.
   Scoped via the `data-course-rail-default-collapsed="true"` attribute
   that only the embedded view sets, so other course pages keep normal
   document flow. */
.app #page-course-wrap[data-course-rail-default-collapsed="true"] {
  position: fixed;
  top: 56px;
  left: 4rem;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
}
.app .main-wrap.ml-64 #page-course-wrap[data-course-rail-default-collapsed="true"],
body.app:has(.main-wrap.ml-64) #page-course-wrap[data-course-rail-default-collapsed="true"] {
  left: 16rem;
}
@media (max-width: 767px) {
  .app #page-course-wrap[data-course-rail-default-collapsed="true"] {
    left: 0;
  }
}

/* Kebab menu items that only make sense on mobile (e.g. the Instructions
   toggle — on desktop the Instructions panel is always pinned). */
.app .more-menu .menu-item.is-mobile-only { display: none; }
@media (max-width: 767px) {
  .app .more-menu .menu-item.is-mobile-only { display: flex; }
}
.app .course-embedded-chat-shell {
  display: flex;
  height: 100%;
  flex-direction: row;
}
.app .course-embedded-instructions {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 360px;
  min-width: 360px;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.app .course-embedded-instructions-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.app .course-embedded-instructions-head h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  min-width: 0;
}
.app .course-embedded-instructions-head h3 i { color: #ff8e3c; }
.app .course-embedded-instructions-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app .course-embedded-instructions-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.app .course-embedded-instructions-section h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
}
.app .course-embedded-instructions-text {
  font-size: 12.5px;
  color: var(--fg-muted);
  white-space: pre-wrap;
  line-height: 1.5;
}
.app .course-embedded-instructions-callout {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.app .course-embedded-instructions-callout.is-info {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.app .course-embedded-instructions-callout.is-warning {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}
.app .course-embedded-instructions-callout h4 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 6px;
}
.app .course-embedded-instructions-callout.is-info h4 { color: var(--accent-soft-fg); }
.app .course-embedded-instructions-callout.is-warning h4 { color: var(--warning); }
.app .course-embedded-instructions-prompts {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.app .course-embedded-instructions-prompt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
  transition: background 80ms;
}
.app .course-embedded-instructions-prompt:hover {
  background: var(--surface-3);
}
.app .course-embedded-instructions-prompt i { color: var(--warning); }
.app .course-embedded-instructions-back {
  margin-top: auto;
  padding-top: 8px;
}
.app .course-embedded-instructions-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--fg-muted);
  text-decoration: none;
}
.app .course-embedded-instructions-back-link:hover { color: var(--fg); }

.app .course-embedded-instructions-overlay,
.app .course-embedded-instructions-mobile { display: none; }
.app .course-embedded-instructions-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
}
.app .course-embedded-instructions-overlay.is-open { display: block; }
.app .course-embedded-instructions-mobile {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 88vw;
  max-width: 380px;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  z-index: 41;
  transform: translateX(-100%);
  transition: transform 220ms ease-out;
  display: flex;
  flex-direction: column;
}
.app .course-embedded-instructions-mobile.is-open {
  display: flex;
  transform: translateX(0);
}
.app .course-embedded-instructions-mobile-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app .course-embedded-instructions-mobile-head h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.app .course-embedded-instructions-mobile-head button {
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
}
.app .course-embedded-instructions-mobile-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app .course-chat-app {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.app .course-chat-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.app .course-embedded-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 39;
  display: none;
}
.app .course-embedded-chat-overlay:not(.hidden) { display: block; }
.app .course-embedded-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  gap: 12px;
  height: 52px;
  flex-shrink: 0;
}
.app .course-embedded-chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.app .course-embedded-chat-header-mid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.app .course-embedded-chat-header-breadcrumb {
  min-width: 0;
}
.app .course-embedded-chat-header-breadcrumb ol {
  flex-wrap: nowrap;
  overflow: hidden;
}
.app .course-embedded-chat-header-breadcrumb ol li:last-child .current {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 28ch;
  vertical-align: bottom;
}
.app .course-embedded-chat-header-subline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--fg-muted);
  min-width: 0;
}
.app .course-embedded-chat-header-subline span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .course-embedded-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.app .course-embedded-chat-status.is-success { color: var(--success); }
.app .course-embedded-chat-status.is-fail { color: #ef4444; }

/* Rail-toggle: on desktop, the toggle lives in the Instructions panel head
   (spatially aligned with where the rail will appear). It only shows when
   the rail is collapsed — when the rail is open, its own internal close
   button handles dismissal, so the instructions-head copy hides to avoid
   two buttons doing the same job. The chat-header copy is mobile-only —
   the Instructions panel is hidden on mobile so the toggle needs a
   different home there. */
.app .course-embedded-chat-header-left > .course-rail-toggle { display: none; }
.app .course-embedded-instructions-head > .course-rail-toggle { display: none; }
.app #page-course-wrap.course-rail-collapsed .course-embedded-instructions-head > .course-rail-toggle {
  display: grid;
}

/* Disabled action-button modifier (used by the Next-lesson chip when there
   is no next lesson). */
.app .course-action-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.app .course-embedded-chat-sidebar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 360px;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  z-index: 41;
  transform: translateX(100%);
  transition: transform 220ms ease-out;
  display: flex;
  flex-direction: column;
}
.app .course-embedded-chat-sidebar:not(.translate-x-full) { transform: translateX(0); }
.app .course-embedded-chat-sidebar-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app .course-embedded-chat-sidebar-head h3 { font-size: 14px; font-weight: 600; color: var(--fg); margin: 0; }
.app .course-embedded-chat-sidebar-head button {
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
}
.app .course-embedded-chat-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app .course-embedded-chat-sidebar-loading {
  text-align: center;
  padding: 32px 16px;
  color: var(--fg-muted);
}
.app .course-embedded-chat-sidebar-loading i { animation: course-spin 1s linear infinite; }
.app .course-embedded-chat-sidebar-foot { padding: 12px; border-top: 1px solid var(--border); }

/* ---------- Mobile (< 768px) ---------- */

@media (max-width: 767px) {
  .app #page-course-wrap {
    grid-template-columns: 1fr;
  }
  .app #page-course-wrap.course-rail-collapsed { grid-template-columns: 1fr; }
  .app .course-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: 51;
    transform: translateX(-100%);
    transition: transform 220ms ease-out;
  }
  .app .course-rail.is-mobile-open { transform: translateX(0); }
  .app .course-page-head > .course-rail-toggle,
  .app .course-embedded-chat-header-left > .course-rail-toggle { display: grid; }

  .app .course-main-scroll { padding: 16px 16px 48px; }
  .app .course-detail-hero { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .app .course-detail-cover { height: 160px; }
  .app .course-featured-card { flex-direction: column; }
  .app .course-featured-cover { width: 100%; height: 140px; }
  .app .course-section-detail-lesson { grid-template-columns: auto 1fr; }
  .app .course-section-detail-lesson-cta { grid-column: 2; justify-self: start; margin-top: 8px; }
  .app .course-quiz-submit-bar { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-md); }
  .app .course-cert-action-bar { margin: 18px -16px -48px; padding: 12px 16px; }
  .app .course-action-btn .label { display: none; }
  .app .course-embedded-instructions { display: none; }
  .app .course-credential { padding: 24px; }
  .app .course-credential-recipient { font-size: 24px; }
  .app .course-credential-course { font-size: 18px; }
  .app .course-public-main { padding: 8px 16px 48px; }
}

/* ============================================================
   Auth pages — /login + /auth/:slug (event login)
   ============================================================
   Two silhouettes:
     - .auth-shell: centered card + branded header strip (/login)
     - .auth-shell-split: two-column brand panel + form (/auth/:slug)

   Both rely on JS controllers (password_validation,
   username_validation) that toggle Tailwind state classes
   directly on inputs. We deliberately do NOT set border-color
   on .auth-input, color on .auth-pw-req, or background-color on
   the JS-managed pieces — those properties are reserved for the
   JS-toggled classes.
*/

/* ---- Shared shell ---- */
.app.dark.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.app.dark.auth-shell-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
}

/* ---- Branded header strip (used on /login) ---- */
.app.dark .auth-brand-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}
.app.dark .auth-brand-strip-logo {
  height: 22px;
  width: auto;
  display: block;
}
.app.dark .auth-brand-strip-sep {
  color: var(--fg-subtle);
  font-size: 14px;
}
.app.dark .auth-brand-strip-name {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* ---- Brand panel (used on /auth/:slug) ---- */
.app.dark .auth-brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 64px;
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(130, 143, 255, 0.18), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(130, 143, 255, 0.10), transparent 60%),
    linear-gradient(135deg, #14171c 0%, #0a0b0d 100%);
  border-right: 1px solid var(--border);
  color: var(--fg);
  position: relative;
}
.app.dark .auth-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(130, 143, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 143, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.app.dark .auth-brand-panel-top,
.app.dark .auth-brand-panel-mid,
.app.dark .auth-brand-panel-foot {
  position: relative;
  z-index: 1;
}
.app.dark .auth-brand-panel-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app.dark .auth-brand-panel-logo {
  height: 26px;
  width: auto;
  display: block;
}
.app.dark .auth-brand-panel-name {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.app.dark .auth-brand-panel-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft-fg);
  margin-bottom: 12px;
}
.app.dark .auth-brand-panel-headline {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 40px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 0 0 16px;
  word-break: break-word;
}
.app.dark .auth-brand-panel-sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 420px;
  margin: 0;
}
.app.dark .auth-brand-panel-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-subtle);
}

/* ---- Card (form container, both pages) ---- */
.app.dark .auth-card-wrap {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 56px;
}
.app.dark .auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.app.dark .auth-card-header {
  margin-bottom: 24px;
}
.app.dark .auth-card-title {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--fg);
  margin: 0;
}
.app.dark .auth-card-subtitle {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 6px 0 0;
}

/* ---- Form primitives ---- */
.app.dark .auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.app.dark .auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app.dark .auth-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
}
/* CRITICAL — Codex review finding:
   .auth-input must NOT set border-color. The password_validation and
   username_validation Stimulus controllers toggle Tailwind classes
   border-gray-600 / border-green-500 / border-red-500 on the inputs
   to signal validation state. A redesign rule with higher specificity
   (.app.dark .auth-input is 0,2,0; .border-green-500 is 0,1,0) would
   silently freeze the border color and break state visualization.
   Same for color on .auth-pw-req — JS toggles text-green-400/text-gray-500. */
.app.dark .auth-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  background: var(--surface-2);
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--r-md);
  transition: box-shadow 120ms, background 120ms;
}
.app.dark .auth-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  background: var(--surface-1);
}
.app.dark .auth-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.app.dark .auth-input::placeholder { color: var(--fg-subtle); }

/* Submit button — full-width override of .btn .btn-primary.
   Specificity 0,4,0 deliberately outranks the bg-blue-500 (0,1,0)
   that username_validation_controller adds when re-enabling submit. */
.app.dark .auth-card .btn.btn-primary {
  width: 100%;
  height: 42px;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
  font-size: 14px;
  font-weight: 600;
}
.app.dark .auth-card .btn.btn-primary:hover {
  filter: brightness(1.06);
  border-color: transparent;
}
.app.dark .auth-card .btn.btn-primary:disabled,
.app.dark .auth-card .btn.btn-primary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

/* SSO / dev quick-login button — secondary visual treatment */
.app.dark .auth-sso-btn {
  width: 100%;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--surface-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, border-color 120ms;
}
.app.dark .auth-sso-btn:hover {
  background: var(--surface-1);
  border-color: var(--border-strong);
}

/* Divider — "or use password login" */
.app.dark .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--fg-subtle);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.app.dark .auth-divider::before,
.app.dark .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---- Flash banners ---- */
.app.dark .auth-flash {
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  margin-bottom: 16px;
}
.app.dark .auth-flash-success {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid rgba(74, 222, 128, 0.28);
}
.app.dark .auth-flash-error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.28);
}
.app.dark .auth-flash-message {
  font-weight: 500;
  margin: 0;
}
.app.dark .auth-recovery-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--danger);
  opacity: 0.92;
}
.app.dark .auth-recovery-list li {
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
  margin-top: 2px;
}
.app.dark .auth-recovery-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--danger);
  opacity: 0.6;
}

/* Disabled-project banner (event login) */
.app.dark .auth-disabled-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--danger-soft);
  border: 1px solid rgba(248, 113, 113, 0.28);
  color: var(--danger);
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.45;
}
.app.dark .auth-disabled-banner i[data-lucide],
.app.dark .auth-disabled-banner svg.lucide {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Dev mode chip (login page) */
.app.dark .auth-dev-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 16px;
  background: var(--warning-soft);
  border: 1px solid rgba(251, 191, 36, 0.32);
  color: var(--warning);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

/* Help link footer */
.app.dark .auth-help {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
}
.app.dark .auth-help a {
  color: var(--accent-soft-fg);
  text-decoration: none;
}
.app.dark .auth-help a:hover { text-decoration: underline; }

/* "Forgot your password?" inline link */
.app.dark .auth-secondary-link {
  margin-top: 16px;
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
}
.app.dark .auth-secondary-link a {
  color: var(--accent-soft-fg);
  font-weight: 500;
  text-decoration: none;
}
.app.dark .auth-secondary-link a:hover { text-decoration: underline; }

/* ---- Password requirements list (event login) ----
   IMPORTANT: do NOT set color here. password_validation_controller
   toggles text-green-400 / text-gray-500 Tailwind classes on each
   requirement <li> — those win because we're not declaring color. */
.app.dark .auth-pw-requirements {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.5;
}
.app.dark .auth-pw-requirements-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.app.dark .auth-pw-req {
  padding-left: 14px;
  position: relative;
}
.app.dark .auth-pw-req::before {
  content: "•";
  position: absolute;
  left: 4px;
  opacity: 0.7;
}

/* Password mismatch error sibling */
.app.dark .auth-pw-error {
  font-size: 13px;
  color: var(--danger);
  margin-top: 6px;
}

/* Terms-of-service checkbox row */
.app.dark .auth-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.5;
}
.app.dark .auth-terms input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.app.dark .auth-terms a {
  color: var(--accent-soft-fg);
  text-decoration: none;
}
.app.dark .auth-terms a:hover { text-decoration: underline; }

/* ---- Responsive: split → stacked under 768px ---- */
@media (max-width: 767px) {
  .app.dark.auth-shell-split {
    grid-template-columns: 1fr;
  }
  .app.dark .auth-brand-panel {
    padding: 32px 24px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .app.dark .auth-brand-panel-headline {
    font-size: 28px;
  }
  .app.dark .auth-brand-panel-sub {
    font-size: 14px;
  }
  .app.dark .auth-brand-panel-mid {
    margin-top: 16px;
  }
  .app.dark .auth-brand-panel-foot {
    margin-top: 24px;
  }
  .app.dark .auth-card-wrap {
    padding: 28px 16px 48px;
  }
  .app.dark .auth-card {
    padding: 24px;
  }
}

/* =========================================================================
   Profile pages — header card, stat strip, tabs, activity feed, login rows,
   role badges, API token block. Scoped under .app to inherit theme tokens.
   ========================================================================= */

.app .profile-header-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: 16px;
}

.app .profile-header-card .avatar-block {
  position: relative;
  flex-shrink: 0;
}

.app .profile-header-card .avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #f43f5e);
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
  display: grid;
  place-items: center;
  overflow: hidden;
  user-select: none;
}

.app .profile-header-card .avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app .profile-header-card .identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.app .profile-header-card .identity .name {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.25;
}

.app .profile-header-card .identity .email {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 2px;
  word-break: break-all;
}

.app .profile-header-card .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.app .profile-header-card .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--fg-muted);
  white-space: nowrap;
}

.app .profile-header-card .badge .i {
  width: 12px;
  height: 12px;
}

.app .profile-header-card .badge.streak { color: var(--warning); border-color: var(--warning-soft); background: var(--warning-soft); }
.app .profile-header-card .badge.streak .i { color: var(--warning); }

/* Stat strip: 4 tiles below header */
.app .profile-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.app .profile-stat-strip .stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}

.app .profile-stat-strip .stat .icon-box {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.app .profile-stat-strip .stat .icon-box .i { width: 16px; height: 16px; }

.app .profile-stat-strip .stat .meta { min-width: 0; }
.app .profile-stat-strip .stat .v {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.1;
}
.app .profile-stat-strip .stat .l {
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-top: 2px;
}

@media (max-width: 760px) {
  .app .profile-stat-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Tab content body */
.app .profile-tab-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Forms inside profile tabs */
.app .profile-form .field { margin-bottom: 14px; }
.app .profile-form .field:last-child { margin-bottom: 0; }
.app .profile-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) {
  .app .profile-form .field-row { grid-template-columns: 1fr; }
}
.app .profile-form .label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.app .profile-form input[type="text"],
.app .profile-form input[type="email"],
.app .profile-form input[type="password"],
.app .profile-form select {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: 13.5px;
}
.app .profile-form input[disabled] {
  background: var(--surface-2);
  color: var(--fg-muted);
  cursor: not-allowed;
}
.app .profile-form input:focus,
.app .profile-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.app .profile-form .hint {
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin-top: 5px;
}
.app .profile-form .hint.error { color: var(--danger); }
.app .profile-form .form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* Avatar upload control */
.app .avatar-upload {
  display: flex;
  align-items: center;
  gap: 14px;
}
.app .avatar-upload .preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #f43f5e);
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.app .avatar-upload .preview img { width: 100%; height: 100%; object-fit: cover; }
.app .avatar-upload .controls { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.app .avatar-upload .file-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--fg);
  cursor: pointer;
  width: fit-content;
}
.app .avatar-upload .file-trigger:hover { background: var(--surface-3); }
.app .avatar-upload input[type="file"] { display: none; }

/* Password requirements list (within Security tab) */
.app .pw-req-list {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--fg-subtle);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app .pw-req-list li.met { color: var(--success); }
.app .pw-req-list li.unmet { color: var(--fg-subtle); }

/* Login history rows */
.app .login-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.app .login-row:last-child { border-bottom: none; }
.app .login-row .icon-box {
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--fg-muted);
  display: grid;
  place-items: center;
}
.app .login-row .icon-box .i { width: 14px; height: 14px; }
.app .login-row .device { font-size: 13px; font-weight: 500; color: var(--fg); }
.app .login-row .meta { font-size: 11.5px; color: var(--fg-subtle); margin-top: 2px; }
.app .login-row .when {
  font-size: 12px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.app .login-row .reveal-btn {
  background: none;
  border: none;
  font-size: 11.5px;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
}
.app .login-row .reveal-btn:hover { text-decoration: underline; }
.app .login-row .ip-detail {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--fg-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.app .login-row .ip-detail.hidden { display: none; }

/* Activity feed (UserEvent timeline) */
.app .activity-feed {
  display: flex;
  flex-direction: column;
}
.app .activity-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}
.app .activity-row:last-child { border-bottom: none; }
.app .activity-row:hover { background: var(--surface-2); }
.app .activity-row .icon-box {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--fg-muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.app .activity-row .icon-box .i { width: 16px; height: 16px; }
.app .activity-row .icon-box.accent { background: var(--accent-soft); color: var(--accent); }
.app .activity-row .icon-box.success { background: var(--success-soft); color: var(--success); }
.app .activity-row .icon-box.warning { background: var(--warning-soft); color: var(--warning); }
.app .activity-row .body { min-width: 0; }
.app .activity-row .title { font-size: 13.5px; color: var(--fg); font-weight: 500; }
.app .activity-row .sub { font-size: 11.5px; color: var(--fg-subtle); margin-top: 2px; }
.app .activity-row .right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.app .activity-row .when {
  font-size: 11.5px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.app .activity-row .project-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--fg-muted);
  white-space: nowrap;
}

/* Role badges (Projects tab) */
.app .role-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  margin-left: 4px;
}
.app .role-badge.admin    { background: var(--accent-soft); color: var(--accent-soft-fg); }
.app .role-badge.write    { background: rgba(168, 85, 247, 0.14); color: rgb(126, 34, 206); }
.app.dark .role-badge.write { color: rgb(216, 180, 254); }
.app .role-badge.read     { background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border); }
.app .role-badge.review   { background: var(--success-soft); color: var(--success); }
.app .role-badge.banned   { background: var(--danger-soft); color: var(--danger); }
.app .role-badge.inactive { background: var(--surface-2); color: var(--fg-subtle); border: 1px solid var(--border); }

/* Project rows on Projects tab */
.app .project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.app .project-row:last-child { border-bottom: none; }
.app .project-row .name { font-size: 13.5px; color: var(--fg); font-weight: 500; }
.app .project-row .meta { font-size: 11.5px; color: var(--fg-subtle); margin-top: 2px; }
.app .project-row .right { display: flex; align-items: center; gap: 8px; }

/* API token block */
.app .api-token-block {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
}
.app .api-token-block code {
  flex: 1;
  display: block;
  padding: 8px 10px;
  background: transparent;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--fg);
  white-space: nowrap;
  overflow-x: auto;
}
.app .api-token-block .copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.app .api-token-block .copy-btn:hover { filter: brightness(1.05); }

.app .api-token-masked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--fg-muted);
  letter-spacing: 1px;
}
.app .api-token-masked .i { width: 14px; height: 14px; flex-shrink: 0; }

/* API curl examples (collapsible <details>) */
.app .api-curl-block { margin-top: 14px; }
.app .api-curl-block details {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.app .api-curl-block details[open] {
  box-shadow: var(--shadow-xs);
}
.app .api-curl-block summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.app .api-curl-block summary::-webkit-details-marker { display: none; }
.app .api-curl-block summary::after {
  content: "+";
  margin-left: auto;
  color: var(--fg-muted);
  font-weight: 400;
}
.app .api-curl-block details[open] summary::after { content: "−"; }
.app .api-curl-block pre {
  margin: 0;
  padding: 12px 14px;
  background: var(--surface-2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--fg);
  overflow-x: auto;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* Token-just-generated banner */
.app .token-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: var(--r-md);
  color: var(--warning);
  font-size: 12.5px;
  margin-bottom: 14px;
}
.app .token-callout .i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.app .token-callout strong { font-weight: 600; }

/* Generic empty state inside profile tabs */
.app .profile-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--fg-muted);
}
.app .profile-empty .icon-box {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--fg-muted);
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
}
.app .profile-empty .icon-box .i { width: 18px; height: 18px; }
.app .profile-empty h4 { font-size: 14px; color: var(--fg); margin-bottom: 4px; font-weight: 600; }
.app .profile-empty p { font-size: 12.5px; }

/* Rules page (markdown chrome reuse) */
.app .rules-card { padding: 24px 28px; }
.app .rules-card .markdown { line-height: 1.6; color: var(--fg); }
.app .rules-card .markdown h1,
.app .rules-card .markdown h2,
.app .rules-card .markdown h3 {
  color: var(--fg);
  margin-top: 1.4em;
  margin-bottom: 0.6em;
  font-weight: 600;
}
.app .rules-card .markdown h1 { font-size: 22px; }
.app .rules-card .markdown h2 { font-size: 18px; }
.app .rules-card .markdown h3 { font-size: 15px; }
.app .rules-card .markdown p { margin: 0.6em 0; font-size: 14px; }
.app .rules-card .markdown ul,
.app .rules-card .markdown ol { padding-left: 1.4em; margin: 0.6em 0; }
.app .rules-card .markdown li { margin: 0.25em 0; font-size: 14px; }
.app .rules-card .markdown code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 90%;
}
.app .rules-card .markdown pre {
  background: var(--surface-2);
  padding: 12px;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: 12.5px;
}
.app .rules-card .markdown a { color: var(--accent); text-decoration: underline; }

/* ============================================================
   Agent pages — home, studio, editor, messages log
   Reuses .page, .page-header, .page-title, .page-subtitle, .card,
   .card-pad, .dash-grid, .span-*, .kpi, .btn, .btn-primary, .tabs,
   .status-pill, .modal-overlay, .modal from the shared chrome.
   ============================================================ */

/* ---------- Avatar mark + status dot ---------- */
.app .agent-avatar {
  --avatar-h1: 220;
  --avatar-h2: 280;
  --avatar-l: 56%;
  --avatar-size: 40px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    hsl(var(--avatar-h1), 70%, var(--avatar-l)) 0%,
    hsl(var(--avatar-h2), 70%, calc(var(--avatar-l) - 8%)) 100%
  );
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: calc(var(--avatar-size) * 0.4);
  letter-spacing: -0.01em;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.app .agent-avatar.size-sm { --avatar-size: 28px; border-radius: 8px; }
.app .agent-avatar.size-md { --avatar-size: 40px; }
.app .agent-avatar.size-lg { --avatar-size: 56px; border-radius: 14px; }
.app .agent-avatar.size-xl { --avatar-size: 72px; border-radius: 16px; }

.app .agent-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.app .agent-status-dot.is-active { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.app .agent-status-dot.is-paused { background: var(--warning); }
.app .agent-status-dot.is-draft  { background: var(--fg-subtle); }
.app .agent-status-dot.is-error  { background: var(--danger);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }

/* Status pill body — sits next to the agent name in headers */
.app .agent-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-3);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  text-transform: capitalize;
  letter-spacing: 0.01em;
}
.app .agent-status-pill.is-active { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.app .agent-status-pill.is-paused { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.app .agent-status-pill.is-error  { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

/* ---------- Home (landing) ---------- */
.app .agent-home-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 28px 28px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface-2) 70%);
  border: 1px solid var(--border);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.app .agent-home-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.app .agent-home-hero-text { position: relative; z-index: 1; }
.app .agent-home-hero h2 { font-size: 22px; margin: 0 0 6px; color: var(--fg); }
.app .agent-home-hero p { color: var(--fg-muted); margin: 0; font-size: 14px; max-width: 60ch; }
.app .agent-home-hero-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: filter 120ms;
}
.app .agent-home-hero-cta:hover { filter: brightness(1.06); }

.app .agent-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.app .agent-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
  min-height: 168px;
}
.app .agent-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.app .agent-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.app .agent-card-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.app .agent-card-name span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .agent-card-prompt {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.app .agent-card-prompt.is-empty { font-style: italic; color: var(--fg-subtle); }
.app .agent-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--fg-subtle);
  border-top: 1px solid var(--border);
  padding-top: 10px;
  flex-wrap: wrap;
}
.app .agent-card-meta .meta-item { display: inline-flex; align-items: center; gap: 4px; }
.app .agent-card-meta .meta-item svg.lucide { width: 13px; height: 13px; }

.app .agent-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  text-align: center;
  background: var(--surface-2);
}
.app .agent-empty svg.lucide { width: 48px; height: 48px; color: var(--fg-subtle); margin-bottom: 14px; }
.app .agent-empty h3 { margin: 0 0 6px; font-size: 17px; color: var(--fg); font-weight: 600; }
.app .agent-empty p { margin: 0 0 18px; color: var(--fg-muted); font-size: 14px; max-width: 48ch; }

/* ---------- New-agent modal ---------- */
.app .agent-modal { max-width: 460px; }
.app .agent-modal .modal-body { padding: 20px 24px 24px; }
.app .agent-modal .form-row { margin-bottom: 14px; }
.app .agent-modal label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 6px;
}
.app .agent-modal input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--fg);
  font-size: 14px;
}
.app .agent-modal input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.app .agent-modal .form-error {
  color: var(--danger);
  font-size: 12.5px;
  margin-top: 6px;
}
.app .agent-modal .form-help {
  color: var(--fg-subtle);
  font-size: 12px;
  margin-top: 6px;
}
.app .agent-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* ---------- Studio show page ---------- */
.app .agent-studio { max-width: 1320px; }
.app .agent-studio-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}
.app .agent-studio-header .agent-avatar { --avatar-size: 56px; border-radius: 14px; }
.app .agent-studio-identity { min-width: 0; }
.app .agent-studio-identity h1 {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.018em;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.app .agent-studio-identity .meta {
  font-size: 13px;
  color: var(--fg-muted);
}
.app .agent-studio-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.app .agent-studio-actions form { margin: 0; }

.app .agent-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

/* ---------- Inert banner (owner left project) ---------- */
.app .agent-inert-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--warning);
  border-radius: var(--r-md);
  font-size: 13px;
  margin-bottom: 18px;
}
.app .agent-inert-banner svg.lucide { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.app .agent-inert-banner strong { color: var(--warning); }

/* ---------- Chat playground ---------- */
.app .agent-chat {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 220px);
  min-height: 480px;
  overflow: hidden;
}
.app .agent-chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.app .agent-chat-toolbar .label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app .agent-chat-toolbar .label svg.lucide { width: 14px; height: 14px; color: var(--accent); }
.app .agent-chat-toolbar .clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg-muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: all 120ms;
}
.app .agent-chat-toolbar .clear-btn:hover {
  background: var(--surface-3);
  color: var(--fg);
  border-color: var(--border-strong);
}
.app .agent-chat-toolbar .clear-btn svg.lucide { width: 13px; height: 13px; }

/* Stable flash slot at the top of the chat container — chat-id-agnostic
   so stale-session errors render reliably. The wrapper persists across
   turbo_stream.replace cycles; :empty collapses it from layout when no
   banner is set so the chat-scroll claims the full height. */
.app .agent-playground-flash {
  flex-shrink: 0;
  padding: 0 16px;
}
.app .agent-playground-flash:empty { display: none; }
.app .agent-playground-flash .agent-form-banner { margin: 8px 0; }

.app .agent-chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
.app .agent-chat-scroll::-webkit-scrollbar { width: 8px; }
.app .agent-chat-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

.app .agent-chat-empty {
  margin: auto;
  text-align: center;
  color: var(--fg-subtle);
  font-size: 14px;
  padding: 40px 20px;
}
/* Hide the empty-state placeholder when the playground has any message
   bubble — covers the case where Turbo Stream appends the first user
   bubble without removing the placeholder. */
.app .agent-chat-scroll:has(.agent-msg) .agent-chat-empty { display: none; }
.app .agent-chat-empty svg.lucide { width: 36px; height: 36px; margin-bottom: 12px; color: var(--fg-subtle); }
.app .agent-chat-empty p { margin: 0 0 4px; }
.app .agent-chat-empty .hint { font-size: 12.5px; }

/* Message bubble */
.app .agent-msg {
  display: flex;
  gap: 12px;
  max-width: 100%;
}
.app .agent-msg.is-user { justify-content: flex-end; }
.app .agent-msg.is-user .agent-msg-body {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
}
.app .agent-msg.is-user .agent-msg-meta { color: var(--fg-subtle); justify-content: flex-end; }
.app .agent-msg-avatar {
  flex-shrink: 0;
}
.app .agent-msg.is-user .agent-msg-avatar { display: none; }
.app .agent-msg.is-optimistic { opacity: 0.7; }
.app .agent-msg.is-optimistic .agent-msg-body {
  background: color-mix(in srgb, var(--accent) 75%, transparent);
}
.app .agent-msg.is-streaming .agent-msg-body {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.app .agent-msg.is-streaming .agent-msg-body::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.15em;
  border-right: 2px solid var(--accent);
  animation: agent-stream-cursor 1s steps(2, start) infinite;
}
.app .agent-msg.is-cancelled,
.app .agent-msg.is-errored {
  opacity: 0.78;
}
.app .agent-msg.is-cancelled .agent-msg-body,
.app .agent-msg.is-errored .agent-msg-body {
  color: var(--fg-muted);
  border-style: dashed;
}
.app .agent-msg-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 80%;
}
.app .agent-msg.is-user .agent-msg-content { align-items: flex-end; }
.app .agent-msg-meta {
  font-size: 11.5px;
  color: var(--fg-subtle);
  display: flex;
  align-items: center;
  gap: 6px;
}
.app .agent-msg-meta strong { color: var(--fg-muted); font-weight: 500; }
.app .agent-msg-body {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
}

/* Tool-call card inside an assistant message */
.app .agent-tool-trace {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  width: 100%;
}
.app .agent-tool-call,
.app .agent-tool-results {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12.5px;
  overflow: hidden;
}
.app .agent-tool-call.is-executing {
  position: relative;
}
.app .agent-tool-call.is-executing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
  transform: translateX(-100%);
  animation: agent-tool-shimmer 1.2s infinite;
  pointer-events: none;
}
.app .agent-tool-call summary,
.app .agent-tool-results summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  color: var(--fg);
  user-select: none;
}
.app .agent-tool-call summary::-webkit-details-marker,
.app .agent-tool-results summary::-webkit-details-marker { display: none; }
.app .agent-tool-call summary svg.lucide,
.app .agent-tool-results summary svg.lucide { width: 13px; height: 13px; color: var(--accent); }
.app .agent-tool-call summary .chev,
.app .agent-tool-results summary .chev {
  margin-left: auto;
  transition: transform 120ms;
  color: var(--fg-subtle);
}
.app .agent-tool-call[open] summary .chev,
.app .agent-tool-results[open] summary .chev { transform: rotate(90deg); }
.app .agent-tool-call summary .name { font-weight: 500; }
.app .agent-tool-call summary .arg-preview {
  color: var(--fg-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .agent-tool-call .body,
.app .agent-tool-results .body {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  background: var(--surface-1);
}
.app .agent-tool-call pre,
.app .agent-tool-results pre {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--fg-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}
.app .agent-tool-results .result-name {
  font-size: 11.5px;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 4px;
}
.app .agent-tool-results .result-name + pre { margin-bottom: 10px; }
.app .agent-tool-results .body > div:last-child .result-name + pre { margin-bottom: 0; }

.app .agent-stream-actions {
  display: flex;
  justify-content: flex-start;
}
.app .agent-stream-stop-form { margin: 0; }
.app .agent-stream-stop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 11.5px;
  cursor: pointer;
}
.app .agent-stream-stop:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}
.app .agent-stream-stop svg.lucide {
  width: 11px;
  height: 11px;
}
.app .agent-stream-status-pill {
  align-self: flex-start;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg-muted);
  background: var(--surface-2);
  font-size: 11.5px;
}

@keyframes agent-stream-cursor {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@keyframes agent-tool-shimmer {
  100% { transform: translateX(100%); }
}

.app .agent-chat-input {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-shrink: 0;
}
.app .agent-chat-input textarea {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 200px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.45;
}
.app .agent-chat-input textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.app .agent-chat-input .send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  height: 38px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: filter 120ms, background 120ms;
}
.app .agent-chat-input .send-btn:hover { filter: brightness(1.06); }
.app .agent-chat-input .send-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.app .agent-chat-input .send-btn svg.lucide { width: 14px; height: 14px; }

.app .agent-chat-typing {
  display: flex;
  gap: 12px;
  padding-left: 0;
  align-items: flex-end;
}
/* Make hiding explicit. `.app .agent-chat-typing.hidden` is more specific
   than the base rule above (and than Tailwind's plain `.hidden`), so the
   indicator stays hidden until Stimulus toggles the class. */
.app .agent-chat-typing.hidden { display: none; }
.app .agent-chat-typing .dots {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  display: inline-flex;
  gap: 4px;
}
.app .agent-chat-typing .dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-subtle);
  animation: agent-typing 1.2s infinite ease-in-out;
}
.app .agent-chat-typing .dots span:nth-child(2) { animation-delay: 0.15s; }
.app .agent-chat-typing .dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes agent-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- Studio rail (right column) ---------- */
.app .agent-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  /* 56px topbar + 16px gap so the rail clears the sticky topbar. */
  top: 72px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}
.app .agent-rail-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}
.app .agent-rail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.app .agent-rail-card-head h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app .agent-rail-card-head h3 svg.lucide { width: 13px; height: 13px; color: var(--fg-subtle); }
.app .agent-rail-card-head a {
  color: var(--fg-subtle);
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app .agent-rail-card-head a:hover { color: var(--accent); }
.app .agent-rail-card-head a svg.lucide { width: 12px; height: 12px; }

.app .agent-rail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 4px 0;
  gap: 8px;
}
.app .agent-rail-row .label { color: var(--fg-muted); }
.app .agent-rail-row .val { color: var(--fg); font-weight: 500; text-align: right; }
.app .agent-rail-row .val.is-muted { color: var(--fg-subtle); font-style: italic; font-weight: 400; }

.app .agent-rail-prompt {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.5;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
  max-height: 180px;
  overflow-y: auto;
  word-break: break-word;
}

.app .agent-rail-tool-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app .agent-rail-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg);
  padding: 4px 0;
}
.app .agent-rail-tool svg.lucide { width: 13px; height: 13px; color: var(--accent); }
.app .agent-rail-tool.is-blocked { opacity: 0.55; }
.app .agent-rail-tool.is-blocked svg.lucide { color: var(--fg-subtle); }
.app .agent-rail-tool.is-blocked .blocked-icon { color: var(--danger); margin-left: auto; }

/* ---------- Editor (single page) ---------- */
.app .agent-editor { max-width: 1240px; }
.app .agent-editor-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.app .agent-editor-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.app .agent-editor-toc {
  position: sticky;
  /* 56px topbar + 16px gap so the TOC clears the sticky topbar. */
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}
.app .agent-editor-toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fg-muted);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: background 120ms, color 120ms;
}
.app .agent-editor-toc a:hover {
  background: var(--surface-2);
  color: var(--fg);
}
.app .agent-editor-toc a.is-active {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}
.app .agent-editor-toc a svg.lucide { width: 14px; height: 14px; }

.app .agent-editor-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.app .agent-editor-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  /* Clear the 56px sticky topbar when jumping via #anchor links. */
  scroll-margin-top: 80px;
}
.app .agent-editor-section.is-danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.app .agent-editor-section header {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.app .agent-editor-section header h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app .agent-editor-section header h2 svg.lucide { width: 15px; height: 15px; color: var(--accent); }
.app .agent-editor-section header p {
  margin: 0;
  font-size: 13px;
  color: var(--fg-muted);
}
.app .agent-editor-section.is-danger header h2 svg.lucide { color: var(--danger); }

.app .agent-form-row { margin-bottom: 16px; }
.app .agent-form-row label,
.app .agent-form-row .form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 6px;
}
.app .agent-form-row input[type="text"],
.app .agent-form-row input[type="password"],
.app .agent-form-row input[type="number"],
.app .agent-form-row textarea,
.app .agent-form-row select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
}
.app .agent-form-row textarea.is-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
}
.app .agent-form-row input[type="number"] { max-width: 160px; }
.app .agent-form-row input:focus,
.app .agent-form-row textarea:focus,
.app .agent-form-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.app .agent-form-row .form-help {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--fg-subtle);
}
.app .agent-form-row .checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--fg);
}
.app .agent-form-row .compat-readout {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-muted);
}
.app .agent-form-row .compat-readout strong { color: var(--fg); font-weight: 500; }

.app .agent-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Telegram subsection inside trigger form */
.app .agent-telegram-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-top: 8px;
}
.app .agent-telegram-block.is-hidden { display: none; }
.app .agent-telegram-block .head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.app .agent-telegram-block .head svg.lucide { width: 18px; height: 18px; color: var(--accent); }
.app .agent-telegram-block .head h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg); }
.app .agent-telegram-block .head p { margin: 0; font-size: 12px; color: var(--fg-subtle); }
.app .agent-telegram-block .token-row {
  display: flex;
  gap: 8px;
}
.app .agent-telegram-block .token-row input { flex: 1; }
.app .agent-telegram-result {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
}
.app .agent-telegram-result.is-success {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.app .agent-telegram-result.is-error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.app .agent-telegram-result.is-pending {
  background: var(--surface-3);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}

/* Inline banners inside form sections (used for incompatible tools, etc.) */
.app .agent-form-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  margin-bottom: 14px;
}
.app .agent-form-banner svg.lucide { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.app .agent-form-banner.is-info {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.app .agent-form-banner.is-warning {
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}
.app .agent-form-banner.is-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

/* Tool cards (compatible / incompatible / disabled / stale) */
.app .agent-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.app .agent-tool-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.app .agent-tool-card:hover { border-color: var(--accent); background: var(--surface-2); }
.app .agent-tool-card input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); }
.app .agent-tool-card .body { min-width: 0; flex: 1; }
.app .agent-tool-card .top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.app .agent-tool-card .top svg.lucide { width: 13px; height: 13px; color: var(--accent); }
.app .agent-tool-card .top .name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.app .agent-tool-card .desc {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.45;
  margin: 0;
}
.app .agent-tool-card .badge {
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.app .agent-tool-card .badge.is-admin {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-soft-fg);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.app .agent-tool-card.is-disabled,
.app .agent-tool-card.is-incompatible {
  opacity: 0.65;
  cursor: not-allowed;
  border-style: dashed;
}
.app .agent-tool-card.is-disabled:hover,
.app .agent-tool-card.is-incompatible:hover {
  border-color: var(--border);
  background: var(--surface-1);
}
.app .agent-tool-card.is-disabled .top svg.lucide,
.app .agent-tool-card.is-incompatible .top svg.lucide { color: var(--fg-subtle); }
.app .agent-tool-card.is-disabled .top .name,
.app .agent-tool-card.is-incompatible .top .name { color: var(--fg-muted); }
.app .agent-tool-card.is-disabled .gate-reason,
.app .agent-tool-card.is-incompatible .gate-reason {
  font-size: 11.5px;
  color: var(--warning);
  margin-top: 4px;
}

.app .agent-tool-stored-bad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  margin-bottom: 8px;
}
.app .agent-tool-stored-bad .info { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.app .agent-tool-stored-bad .info svg.lucide { width: 14px; height: 14px; color: var(--danger); margin-top: 3px; flex-shrink: 0; }
.app .agent-tool-stored-bad .info .name { font-size: 13px; font-weight: 500; color: var(--danger); }
.app .agent-tool-stored-bad .info .reason { font-size: 12px; color: var(--danger); margin-top: 2px; }
.app .agent-tool-stored-bad .remove-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app .agent-tool-stored-bad .remove-btn:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.app .agent-tool-stored-bad.is-stale {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}
.app .agent-tool-stored-bad.is-stale .info svg.lucide,
.app .agent-tool-stored-bad.is-stale .info .name,
.app .agent-tool-stored-bad.is-stale .info .reason { color: var(--warning); }
.app .agent-tool-stored-bad.is-stale .remove-btn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.app .agent-tool-stored-bad.is-stale .remove-btn:hover { background: color-mix(in srgb, var(--warning) 12%, transparent); }

.app .agent-tool-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 16px 0 8px;
}
.app .agent-tool-group-label:first-child { margin-top: 0; }

/* Skills (inline editor section) */
.app .agent-skill-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.app .agent-skill-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.app .agent-skill-card .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.app .agent-skill-card .head .info { min-width: 0; flex: 1; }
.app .agent-skill-card .head .name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app .agent-skill-card .head .name svg.lucide { width: 13px; height: 13px; color: var(--accent); }
.app .agent-skill-card .head .desc {
  font-size: 12px;
  color: var(--fg-muted);
  margin: 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .agent-skill-card .actions { display: flex; gap: 4px; flex-shrink: 0; }
.app .agent-skill-card .actions button,
.app .agent-skill-card .actions a {
  background: transparent;
  border: none;
  color: var(--fg-subtle);
  padding: 4px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.app .agent-skill-card .actions button:hover,
.app .agent-skill-card .actions a:hover { background: var(--surface-3); color: var(--fg); }
.app .agent-skill-card .actions .danger { color: var(--danger); }
.app .agent-skill-card .actions .danger:hover { background: var(--danger-soft); }
.app .agent-skill-card .actions svg.lucide { width: 13px; height: 13px; }

.app .agent-skill-add {
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg-subtle);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.app .agent-skill-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.app .agent-skill-add svg.lucide { width: 14px; height: 14px; }

/* ---------- Messages traffic log ---------- */
.app .agent-msglog {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.app .agent-msglog-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.app .agent-msglog-row:last-child { border-bottom: none; }
.app .agent-msglog-row.is-assistant { background: var(--surface-2); }
.app .agent-msglog-row .role-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: #ffffff;
  flex-shrink: 0;
}
.app .agent-msglog-row .role-mark.is-user { background: var(--accent); }
.app .agent-msglog-row .role-mark.is-assistant { background: linear-gradient(135deg, hsl(280, 70%, 56%) 0%, hsl(220, 70%, 50%) 100%); }
.app .agent-msglog-row .body { min-width: 0; }
.app .agent-msglog-row .meta {
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.app .agent-msglog-row .meta strong { color: var(--fg-muted); font-weight: 500; }
.app .agent-msglog-row .text {
  font-size: 13.5px;
  color: var(--fg);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.app .agent-msglog-row .source-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-3);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  flex-shrink: 0;
  height: fit-content;
}
.app .agent-msglog-row .source-chip.is-playground { background: var(--accent-soft); color: var(--accent-soft-fg); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.app .agent-msglog-row .source-chip.is-telegram { background: color-mix(in srgb, hsl(200, 80%, 60%) 18%, transparent); color: hsl(200, 80%, 40%); border-color: color-mix(in srgb, hsl(200, 80%, 60%) 30%, transparent); }
.app .agent-msglog-row .source-chip.is-legacy { background: var(--surface-3); color: var(--fg-subtle); }

.app .agent-msglog-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.app .agent-msglog-toolbar .tabs button .ct {
  margin-left: 6px;
  background: var(--surface-3);
  color: var(--fg-muted);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
}
.app .agent-msglog-toolbar .tabs button.active .ct { background: var(--accent); color: var(--accent-fg); }

/* ---------- Action buttons (consistency on Agent pages) ---------- */
.app .btn-pause {
  background: var(--warning);
  color: #ffffff;
  border-color: transparent;
}
.app .btn-pause:hover { filter: brightness(1.05); border-color: transparent; }
.app .btn-activate {
  background: var(--success);
  color: #ffffff;
  border-color: transparent;
}
.app .btn-activate:hover { filter: brightness(1.05); border-color: transparent; }
.app .btn-danger {
  background: var(--danger);
  color: #ffffff;
  border-color: transparent;
}
.app .btn-danger:hover { filter: brightness(1.05); border-color: transparent; }

/* Welcome banner shown after agent creation */
.app .agent-welcome-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent-soft-fg);
  border-radius: var(--r-md);
  font-size: 13.5px;
  margin-bottom: 18px;
}
.app .agent-welcome-banner svg.lucide { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }

/* ---------- Mobile breakpoints ---------- */
@media (max-width: 980px) {
  .app .agent-studio-grid { grid-template-columns: 1fr; }
  .app .agent-rail { position: static; }
  .app .agent-editor-grid { grid-template-columns: 1fr; }
  .app .agent-editor-toc {
    position: sticky;
    top: 0;
    flex-direction: row;
    overflow-x: auto;
    padding: 6px 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 5;
    gap: 4px;
  }
  .app .agent-editor-toc a {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 12.5px;
  }
}
@media (max-width: 767px) {
  .app .agent-home-hero {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 22px 20px;
  }
  .app .agent-home-grid { grid-template-columns: 1fr; }
  .app .agent-studio-header {
    grid-template-columns: auto 1fr;
  }
  .app .agent-studio-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .app .agent-chat { height: calc(100vh - 240px); min-height: 360px; }
  .app .agent-chat-input { padding: 10px 12px; }
  .app .agent-msg-content { max-width: 92%; }
  .app .agent-tool-grid { grid-template-columns: 1fr; }
  .app .agent-editor-section { padding: 16px 18px; }
}

/* =============================================================
   REDESIGN SWEEP (dashboard_v2) — pre-allocated worker sections
   Phase 0 deliverable. Each worker appends namespace-scoped
   classes within their own section. Cross-worker shared
   utilities require coordinator approval. See docs/DESIGN_SYSTEM.md
   ============================================================= */

/* === Phase 0 / Pilot (leaderboard + cross-worker shared utilities) ===
   Owner: coordinator. Workers do NOT append here. Cross-worker shared
   utilities require coordinator approval per the design system doc. */

/* Cross-namespace utility: state-driven visibility. Prefer this over the
   raw HTML `hidden` boolean attribute for ERB-conditional cases — keeps
   the conditional INSIDE `class="..."` quotes (avoids OpenGrep's
   `unquoted-attribute` warning on `<%= "hidden" unless cond %>` between
   attributes). Use `class_names(..., 'is-hidden': condition)` in views and
   `el.classList.toggle("is-hidden", condition)` in JS. Presentation/state
   only — NOT authorization; see docs/DESIGN_SYSTEM.md for the caveat. */
.app .is-hidden { display: none !important; }


/* Theme-aware top-3 colors. Light defaults; dark overrides below. */
.app {
  --leaderboard-gold: #f59e0b;
  --leaderboard-silver: #94a3b8;
  --leaderboard-bronze: #b45309;
}
.app.dark {
  --leaderboard-gold: #fbbf24;
  --leaderboard-silver: #cbd5e1;
  --leaderboard-bronze: #d97706;
}

/* LIVE pill in page header */
.app .leaderboard-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  margin-left: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--success);
  vertical-align: middle;
}
.app .leaderboard-live-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--success);
  animation: leaderboard-pulse 1.5s ease-in-out infinite;
}
.app .leaderboard-live-pill .label {
  line-height: 1;
}
.app .leaderboard-live-pill.is-disconnected {
  color: var(--fg-muted);
}
.app .leaderboard-live-pill.is-disconnected .dot {
  background: var(--fg-subtle);
  animation: none;
}
@keyframes leaderboard-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.4; }
}

/* Admin tools disclosure (top-right of page-header).
   Opens horizontally inline (form to the LEFT of the summary) via flex
   row-reverse — avoids the vertical layout shift of a default <details>
   drop-down. Mobile fallback (under 640px) returns to the vertical stack
   since horizontal space is constrained. */
.app .leaderboard-admin-tools {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}
.app .leaderboard-admin-tools > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 0.875rem;
  cursor: pointer;
}
.app .leaderboard-admin-tools > summary::-webkit-details-marker { display: none; }
.app .leaderboard-admin-tools > summary:hover {
  background: var(--surface-3);
  color: var(--fg);
}
.app .leaderboard-admin-tools[open] > summary {
  background: var(--surface-3);
  color: var(--fg);
}
.app .leaderboard-admin-tools form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  flex-wrap: nowrap;
}
.app .leaderboard-admin-tools label {
  font-size: 0.875rem;
  color: var(--fg-muted);
}
.app .leaderboard-admin-tools input[type="number"] {
  width: 80px;
  padding: 4px 8px;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.875rem;
}
.app .leaderboard-admin-tools input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
}

/* KPI strip spacing */
.app .leaderboard-kpis {
  margin-bottom: 16px;
}

/* List + rows */
.app .leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app .leaderboard-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 150ms ease-out;
  /* IMPORTANT: do NOT set transition on transform here — the FLIP code
     manages transform transitions imperatively per moved row. */
}

.app .leaderboard-row.is-current-user {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: 13px; /* compensate for the 3px border so badges align */
}

@keyframes leaderboard-flash-up {
  0%   { background: var(--success-soft); }
  100% { background: var(--surface-1); }
}
@keyframes leaderboard-flash-down {
  0%   { background: var(--danger-soft); }
  100% { background: var(--surface-1); }
}
@keyframes leaderboard-flash-up-current {
  0%   { background: var(--success-soft); }
  100% { background: var(--accent-soft); }
}
@keyframes leaderboard-flash-down-current {
  0%   { background: var(--danger-soft); }
  100% { background: var(--accent-soft); }
}

.app .leaderboard-row.has-rank-flash-up {
  animation: leaderboard-flash-up 800ms ease-out;
}
.app .leaderboard-row.has-rank-flash-down {
  animation: leaderboard-flash-down 800ms ease-out;
}
.app .leaderboard-row.is-current-user.has-rank-flash-up {
  animation: leaderboard-flash-up-current 800ms ease-out;
}
.app .leaderboard-row.is-current-user.has-rank-flash-down {
  animation: leaderboard-flash-down-current 800ms ease-out;
}

/* Rank badge */
.app .leaderboard-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--fg-muted);
  font-weight: 700;
  font-size: 0.875rem;
}
.app .leaderboard-rank-badge.is-gold {
  background: var(--leaderboard-gold);
  color: #1a1a1a;
}
.app .leaderboard-rank-badge.is-silver {
  background: var(--leaderboard-silver);
  color: #1a1a1a;
}
.app .leaderboard-rank-badge.is-bronze {
  background: var(--leaderboard-bronze);
  color: #ffffff;
}

/* Identity column (avatar + username) */
.app .leaderboard-row-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0; /* allow text-overflow inside grid cell */
}
.app .leaderboard-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft-fg, var(--accent)));
  color: var(--accent-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  overflow: hidden; /* clip <img> to the circle */
}
.app .leaderboard-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.app .leaderboard-username {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.app .leaderboard-username-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--fg);
  font-weight: 500;
}

/* YOU pill */
.app .leaderboard-you-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1;
}

/* Points column */
.app .leaderboard-row-points {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.app .leaderboard-points-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
}
.app .leaderboard-points-label {
  font-size: 0.75rem;
  color: var(--fg-subtle);
}

/* Delta chip */
.app .leaderboard-delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--fg-muted);
}
.app .leaderboard-delta-chip.is-up {
  background: var(--success-soft);
  color: var(--success);
}
.app .leaderboard-delta-chip.is-down {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Gap row (Spotify-style fold-in) */
.app .leaderboard-gap-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  color: var(--fg-subtle);
  font-size: 0.875rem;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}

/* Empty state — namespace modifier on the global .empty-board pattern.
   The .leaderboard-empty class itself is reserved for future namespace-
   specific tweaks; today it inherits .empty-board's appearance. */
.app .leaderboard-empty {}

/* Footer note */
.app .leaderboard-footer-note {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--fg-muted);
  text-align: center;
}

/* Mobile compactness */
@media (max-width: 640px) {
  .app .leaderboard-row {
    padding: 10px 12px;
    column-gap: 10px;
  }
  .app .leaderboard-row.is-current-user {
    padding-left: 9px;
  }
  .app .leaderboard-rank-badge {
    width: 30px;
    height: 30px;
    font-size: 0.8125rem;
  }
  .app .leaderboard-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.8125rem;
  }
  .app .leaderboard-points-value {
    font-size: 1.25rem;
  }
  .app .leaderboard-points-label {
    display: none; /* save horizontal space; the value is self-evident */
  }
  /* On narrow screens, give up the inline-horizontal expansion (no room
     for the form next to the summary). Drop back to a vertical drop-down
     stack with the form fields each on their own row. */
  .app .leaderboard-admin-tools {
    display: block;
  }
  .app .leaderboard-admin-tools form {
    flex-direction: column;
    align-items: stretch;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
  }
}

/* === Worker 1 (admin core) — append below this line === */

/* Filter-row chip icons — size to match the chip text. The global .chip
   utility from Phase 0 doesn't size its `.i` child; this fills that gap
   for Worker 1 admin pages without modifying Phase-0-owned globals. */
.app .filter-row .chip .i { width: 14px; height: 14px; }

/* ---------- admin/dashboard/index ---------- */

/* Half-width column inside .dash-grid for two-up layouts (e.g., risk lists,
   distribution tables, charts). Defined namespace-scoped because .span-6 is
   not part of the Phase-0-owned global utilities. */
.app .admin-dashboard .span-6 { grid-column: span 6; }
@media (max-width: 900px) {
  .app .admin-dashboard .span-6 { grid-column: span 12; }
}

/* Prevent grid items with min-content larger than their column from blowing
   the page wider than its viewport. Without min-width:0, a long unbreakable
   string OR a chartkick canvas with a fixed width attribute can force the
   12-col grid to overflow horizontally. Scoped to .admin-dashboard so we
   don't change any global .dash-grid behavior. */
.app .admin-dashboard .dash-grid > * { min-width: 0; }
.app .admin-dashboard .dash-grid > * > .card { min-width: 0; }

.app .admin-dashboard .page-header {
  flex-wrap: wrap;
  gap: 12px;
}

.app .admin-dashboard-filter-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app .admin-dashboard-filter-label {
  color: var(--fg-muted);
  font-size: 13px;
}

.app .admin-dashboard-filter-select {
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}

.app .admin-dashboard-filter-select:focus {
  outline: none;
  border-color: var(--border-strong);
}

.app .admin-dashboard-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app .admin-dashboard-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
}

@media (max-width: 900px) {
  .app .admin-dashboard-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.app .admin-dashboard-mini-lbl {
  color: var(--fg-muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.app .admin-dashboard-mini-val {
  color: var(--fg);
  font-size: 18px;
  font-weight: 600;
}

.app .admin-dashboard-cta-card .card-pad.admin-dashboard-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.app .admin-dashboard-cta-copy {
  margin: 4px 0 0;
  color: var(--fg-muted);
  font-size: 13px;
  max-width: 60ch;
}

/* Compact table for top-N lists. Aligns numeric column right; uses subtle
   row separators that work on light + dark surfaces. */
.app .admin-dashboard-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.app .admin-dashboard-list th,
.app .admin-dashboard-list td {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--fg);
}

.app .admin-dashboard-list th {
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app .admin-dashboard-list tr:last-child th,
.app .admin-dashboard-list tr:last-child td {
  border-bottom: 0;
}

.app .admin-dashboard-list .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Long unbreakable strings (model names, vendor IDs, URLs, large numbers)
   in admin-dashboard-list cells must wrap, not push the table wider. */
.app .admin-dashboard-list td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Chart card: theme-aware surface like every other card. Chart label/grid
   colors (set in the helper) are mid-tone, best-effort readable on both
   light and dark surfaces. min-width:0 lets the chart shrink to its grid
   cell instead of forcing the cell wider. */
.app .admin-dashboard-chart-wrap {
  background: var(--surface-1);
  border: 1px solid var(--border);
  min-width: 0;
  overflow: hidden;
}

/* Chartkick renders a canvas inside the .card-pad. Chart.js sets explicit
   pixel width on the canvas at instantiation; without max-width:100% the
   canvas can be wider than its container and produce horizontal scroll on
   the whole page. Height stays as the inline 300px (responsive Chart.js
   re-renders width-only on container resize). */
.app .admin-dashboard-chart-wrap canvas {
  max-width: 100% !important;
}

.app .admin-dashboard-chart-title {
  margin: 0 0 12px;
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
}

.app .admin-dashboard-meta-footer {
  margin-top: 24px;
  text-align: center;
  color: var(--fg-subtle);
  font-size: 12px;
}

/* ---------- admin/dashboard/models (vendor model health) ---------- */

.app .admin-models-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.app .admin-models-table th,
.app .admin-models-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  vertical-align: middle;
}

.app .admin-models-table th {
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app .admin-models-table tr:last-child td { border-bottom: 0; }

.app .admin-models-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app .admin-models-row.is-inactive {
  opacity: 0.55;
}

.app .admin-models-project {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--fg-muted);
  font-size: 11.5px;
  font-family: var(--mono, ui-monospace, "SF Mono", monospace);
}

.app .admin-models-name {
  color: var(--fg);
  font-weight: 500;
  text-decoration: none;
}
.app .admin-models-name:hover {
  color: var(--accent);
  text-decoration: underline;
}

.app .admin-models-divider {
  color: var(--fg-subtle);
  margin: 0 2px;
}

.app .admin-models-active-check {
  width: 16px;
  height: 16px;
  color: var(--success);
}

.app .admin-models-inactive-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Status pill state modifiers for the admin vendor-model health table.
   Use the `is-` prefix convention from the design system (cf. agent-status-pill). */
.app .status-pill.is-healthy {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success-soft);
}
.app .status-pill.is-degraded {
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning-soft);
}
.app .status-pill.is-unhealthy {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-soft);
}
.app .status-pill.is-minor {
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning-soft);
  opacity: 0.85;
}
.app .status-pill.is-no-data {
  background: var(--surface-3);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}

.app .status-pill .i {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ---------- admin/projects (index, show, new, edit, _form) ---------- */

/* Half-width column inside .dash-grid for the show page. .span-6 is not in
   the global Phase-0 utility set (only .span-4 / .span-8 / .span-12), so we
   define it namespace-scoped for .admin-projects (mirrors the .admin-dashboard
   .span-6 declared earlier in this section). */
.app .admin-projects .span-6 { grid-column: span 6; }
@media (max-width: 900px) {
  .app .admin-projects .span-6 { grid-column: span 12; }
}

/* Show-page inter-grid spacing. Replaces inline `style="margin-top: 12px"`
   on adjacent .dash-grid rows in show.html.erb. */
.app .admin-projects-show > .dash-grid + .dash-grid { margin-top: 16px; }

/* Index */
.app .admin-projects-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.app .admin-projects-table th,
.app .admin-projects-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  vertical-align: middle;
}
/* Long unbreakable project names / shorthand strings wrap inside the cell
   rather than forcing column 1 to expand and squish the rest of the row. */
.app .admin-projects-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.app .admin-projects-table th {
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .admin-projects-table tr:last-child td { border-bottom: 0; }
.app .admin-projects-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg-muted);
}
.app .admin-projects-table .actions {
  white-space: nowrap;
  text-align: right;
}
/* Index <tr> rows. Renamed from .admin-projects-row to avoid colliding with
   the form's .admin-projects-row rule (display: flex; flex-direction: column)
   which would otherwise stack table cells vertically. The whole row is the
   "view" link; .admin-projects-filter#openRow handles navigation. */
.app .admin-projects-table-row {
  cursor: pointer;
  transition: background 120ms;
}
.app .admin-projects-table-row:hover { background: var(--surface-2); }
.app .admin-projects-table-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.app .admin-projects-table-row.is-inactive { opacity: 0.55; }

.app .admin-projects-name {
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}
.app .admin-projects-name:hover {
  color: var(--accent);
  text-decoration: underline;
}
.app .admin-projects-desc {
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 400;
}
.app .admin-projects-shorthand {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--fg-muted);
  font-size: 11.5px;
  font-family: ui-monospace, "SF Mono", monospace;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.app .admin-projects-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--fg-muted);
  margin-left: 4px;
}
.app .admin-projects-action:hover {
  background: var(--surface-3);
  color: var(--fg);
}

/* Show page header bits */
.app .admin-projects-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-muted);
  font-size: 12.5px;
  text-decoration: none;
  margin-bottom: 6px;
}
.app .admin-projects-back:hover { color: var(--fg); }
.app .admin-projects-back .i { width: 14px; height: 14px; }

.app .admin-projects-show-header-meta { display: block; }
.app .admin-projects-show-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.app .admin-projects-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--fg-muted);
  font-size: 11.5px;
}
.app .admin-projects-meta-tag .i { width: 12px; height: 12px; }

/* Show page settings cards */
.app .admin-projects-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.app .admin-projects-count-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 500;
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.app .admin-projects-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 13px;
}
.app .admin-projects-dl dt {
  color: var(--fg-muted);
  font-weight: 500;
}
.app .admin-projects-dl dd { margin: 0; color: var(--fg); }

.app .admin-projects-dl-inline {
  grid-template-columns: max-content 1fr max-content 1fr;
}

.app .admin-projects-mono-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12px;
}

.app .admin-projects-meta-line {
  margin-left: 6px;
  color: var(--fg-subtle);
  font-size: 12px;
}
.app .admin-projects-meta-line.is-danger { color: var(--danger); }

.app .admin-projects-prompt-details {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.app .admin-projects-prompt-details summary {
  cursor: pointer;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 500;
}
.app .admin-projects-prompt-details summary:hover { color: var(--fg); }
.app .admin-projects-prompt-pre {
  margin: 8px 0 0;
  padding: 12px;
  background: var(--surface-3);
  border-radius: 8px;
  color: var(--fg);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", monospace;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 320px;
}

.app .admin-projects-subsection-title {
  margin: 16px 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.app .admin-projects-content-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.55;
}
.app .admin-projects-content-block:last-child { margin-bottom: 0; }

/* User + model lists on show */
.app .admin-projects-user-list,
.app .admin-projects-model-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.app .admin-projects-user-list li,
.app .admin-projects-model-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 13px;
}
.app .admin-projects-user-meta { min-width: 0; flex: 1; }
.app .admin-projects-user-name {
  color: var(--fg);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .admin-projects-user-email {
  color: var(--fg-subtle);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .admin-projects-user-remove-form { display: inline; margin: 0; }
.app .admin-projects-user-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  border-radius: 4px;
  cursor: pointer;
}
.app .admin-projects-user-remove:hover {
  color: var(--danger);
  background: var(--danger-soft);
}
.app .admin-projects-user-remove .i { width: 14px; height: 14px; }

.app .admin-projects-model-name { color: var(--fg); font-weight: 500; }
.app .admin-projects-model-vendor {
  color: var(--fg-subtle);
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", monospace;
}
.app .admin-projects-list-empty,
.app .admin-projects-list-meta {
  color: var(--fg-subtle);
  font-size: 12.5px;
  text-align: center;
  margin: 8px 0;
}

/* Survey export CTA card */
.app .admin-projects-cta-card .card-pad.admin-projects-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.app .admin-projects-cta-copy {
  margin: 4px 0 0;
  color: var(--fg-muted);
  font-size: 13px;
  max-width: 60ch;
}

/* ============ FORM ============ */
/* The grid lives on the <form> element, not on the wrapper, because the
   wrapper's only direct child is the <form> itself. The TOC <nav> and
   .admin-projects-form-body are children of the <form>, so applying the grid
   to .admin-projects-form puts them in real grid columns. */
.app .admin-projects-form {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .app .admin-projects-form {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.app .admin-projects-toc {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.app .admin-projects-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--fg-muted);
  font-size: 13px;
  text-decoration: none;
}
.app .admin-projects-toc a:hover {
  background: var(--surface-3);
  color: var(--fg);
}
@media (max-width: 900px) {
  .app .admin-projects-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }
}

.app .admin-projects-form-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.app .admin-projects-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  scroll-margin-top: 80px;
}
.app .admin-projects-section-header { margin-bottom: 20px; }
.app .admin-projects-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
}
.app .admin-projects-section-title .i { width: 18px; height: 18px; color: var(--accent); }
.app .admin-projects-section-subtitle {
  margin: 4px 0 0;
  color: var(--fg-muted);
  font-size: 13px;
}

.app .admin-projects-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin-bottom: 16px;
}
.app .admin-projects-grid-2:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .app .admin-projects-grid-2 { grid-template-columns: 1fr; }
}

.app .admin-projects-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.app .admin-projects-row:last-child { margin-bottom: 0; }
.app .admin-projects-row-relative { position: relative; }

.app .admin-projects-label {
  display: block;
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
}
.app .admin-projects-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.app .admin-projects-input,
.app .admin-projects-textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 120ms, box-shadow 120ms;
}
.app .admin-projects-input:focus,
.app .admin-projects-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.app .admin-projects-input.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.app .admin-projects-input.is-valid {
  border-color: var(--success);
}
.app .admin-projects-input-mono {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 13px;
}
.app .admin-projects-textarea {
  line-height: 1.5;
  resize: vertical;
}

.app .admin-projects-help {
  margin: 0;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.4;
}
.app .admin-projects-help.admin-projects-help-warn {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--warning);
}
.app .admin-projects-help.admin-projects-help-warn .i { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.app .admin-projects-help.admin-projects-help-block {
  margin-bottom: 12px;
}
.app .admin-projects-help code {
  background: var(--surface-3);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

.app .admin-projects-utc-clock {
  font-size: 11.5px;
  color: var(--accent);
  font-family: ui-monospace, "SF Mono", monospace;
}

.app .admin-projects-md-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--fg-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .admin-projects-md-tag .i { width: 12px; height: 12px; }

/* Plain checkbox toggle row (single inline checkbox + label + help) */
.app .admin-projects-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.app .admin-projects-toggle-row-aligned { padding-top: 22px; }
.app .admin-projects-toggle-row .admin-projects-checkbox {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.app .admin-projects-toggle-label {
  display: block;
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}

/* Fancy toggle-card grid for the Features section */
.app .admin-projects-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .app .admin-projects-toggle-grid { grid-template-columns: 1fr; }
}

.app .admin-projects-toggle-card {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.app .admin-projects-toggle-card:hover { border-color: var(--border-strong); }

/* Hide the actual checkbox; the .toggle-track + .toggle-thumb spans render
   the iOS-style switch. Reading order: input → track → text, so we can use
   sibling selectors to drive the track's visual state. */
.app .admin-projects-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app .admin-projects-toggle-track {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  background: var(--surface-3);
  border-radius: 999px;
  margin-top: 2px;
  transition: background 200ms;
}
.app .admin-projects-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform 200ms;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.app .admin-projects-toggle-input:checked ~ .admin-projects-toggle-track {
  background: var(--accent);
}
.app .admin-projects-toggle-input:checked ~ .admin-projects-toggle-track .admin-projects-toggle-thumb {
  transform: translateX(14px);
}
.app .admin-projects-toggle-input:focus-visible ~ .admin-projects-toggle-track {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.app .admin-projects-toggle-text { display: block; }
.app .admin-projects-toggle-title {
  display: block;
  color: var(--fg);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 2px;
}
.app .admin-projects-toggle-desc {
  display: block;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Vendor → model suggest dropdown */
.app .admin-projects-suggest {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.app .admin-projects-suggest.hidden { display: none; }
.app .admin-projects-suggest-option {
  padding: 8px 12px;
  color: var(--fg);
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", monospace;
  cursor: pointer;
}
.app .admin-projects-suggest-option:hover,
.app .admin-projects-suggest-option.is-active {
  background: var(--surface-3);
}

/* Metadata fields */
.app .admin-projects-metadata-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.app .admin-projects-metadata-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.app .admin-projects-metadata-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--danger);
  font-size: 12.5px;
  cursor: pointer;
  border-radius: 6px;
}
.app .admin-projects-metadata-remove:hover { background: var(--danger-soft); }
.app .admin-projects-metadata-remove .i { width: 14px; height: 14px; }
.app .admin-projects-metadata-add-row { margin-top: 4px; }

/* Form actions */
.app .admin-projects-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

/* ---------- admin/users ---------- */

/* .span-6 namespace-scoped for admin-users (parallels .admin-projects .span-6) */
.app .admin-users .span-6 { grid-column: span 6; }
@media (max-width: 900px) {
  .app .admin-users .span-6 { grid-column: span 12; }
}

.app .admin-users-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.app .admin-users-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-muted);
  font-size: 12.5px;
  text-decoration: none;
  margin-bottom: 6px;
}
.app .admin-users-back:hover { color: var(--fg); }
.app .admin-users-back .i { width: 14px; height: 14px; }
.app .admin-users-show-header-meta { display: block; }

/* Toggleable panels (Add Existing user + Referral Codes) */
.app .admin-users-panel { margin-bottom: 16px; }
.app .admin-users-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.app .admin-users-panel-help {
  margin: 0 0 12px;
  color: var(--fg-muted);
  font-size: 13px;
}

/* Inputs (shared) */
.app .admin-users-input,
.app .admin-users-textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 120ms, box-shadow 120ms;
}
.app .admin-users-input:focus,
.app .admin-users-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.app .admin-users-textarea { line-height: 1.5; resize: vertical; }
.app .admin-users-input-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Search bar with icon */
.app .admin-users-search-bar {
  position: relative;
  margin-bottom: 16px;
}
.app .admin-users-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
  pointer-events: none;
}
.app .admin-users-search-input { padding-left: 36px; }

/* Privilege filter row */
.app .admin-users-privilege-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px 0;
}
.app .admin-users-privilege-label {
  color: var(--fg-muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .admin-users-privilege-chips { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; }

/* Per-role chip color variants for the privilege filter row */
.app .chip.admin-users-privilege-chip { transition: background 120ms, color 120ms, border-color 120ms; }
.app .chip.admin-users-privilege-chip.is-global-admin { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }
.app .chip.admin-users-privilege-chip.is-read         { background: rgba(96, 125, 250, 0.12); color: #4254c4; border-color: rgba(96, 125, 250, 0.22); }
.app .chip.admin-users-privilege-chip.is-write        { background: var(--success-soft); color: var(--success); border-color: var(--success-soft); }
.app .chip.admin-users-privilege-chip.is-promote      { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.app .chip.admin-users-privilege-chip.is-judge        { background: rgba(142, 99, 214, 0.14); color: #6e46c4; border-color: rgba(142, 99, 214, 0.24); }
.app .chip.admin-users-privilege-chip.is-contestant   { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-soft); }
.app .chip.admin-users-privilege-chip.is-none         { background: var(--surface-3); color: var(--fg-muted); border-color: var(--border); }

/* Active state overrides per-role color with a strong solid for readability */
.app .chip.admin-users-privilege-chip.active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* List card */
.app .admin-users-list-card { padding: 0; }
.app .admin-users-list-card .card-pad { padding: 0; overflow-x: auto; }

/* Table */
.app .admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.app .admin-users-table th,
.app .admin-users-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  vertical-align: middle;
}
.app .admin-users-table tr:last-child td { border-bottom: 0; }
.app .admin-users-table th {
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
}
.app .admin-users-table .admin-users-actions-col { white-space: nowrap; text-align: right; }
.app .admin-users-table td { overflow-wrap: anywhere; word-break: break-word; }

.app .admin-users-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.app .admin-users-sort-btn:hover { color: var(--fg); }
.app .admin-users-sort-i {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}
.app .admin-users-sort-i.is-active { opacity: 1; color: var(--accent); }

.app .admin-users-name-cell { display: inline-flex; align-items: center; gap: 10px; }
.app .admin-users-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b8def 0%, #8e63d6 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.app .admin-users-name { font-weight: 600; color: var(--fg); }
.app .admin-users-email { color: var(--fg-muted); font-size: 12.5px; }

.app .admin-users-status-stack { display: inline-flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.app .admin-users-priv-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Privilege pills (used in list and elsewhere) */
.app .privilege-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.app .privilege-pill .i { width: 11px; height: 11px; }
.app .privilege-pill.is-global-admin { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }
.app .privilege-pill.is-read         { background: rgba(96, 125, 250, 0.14); color: #4254c4; border-color: rgba(96, 125, 250, 0.22); }
.app .privilege-pill.is-write        { background: var(--success-soft); color: var(--success); border-color: var(--success-soft); }
.app .privilege-pill.is-promote      { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.app .privilege-pill.is-judge        { background: rgba(142, 99, 214, 0.14); color: #6e46c4; border-color: rgba(142, 99, 214, 0.24); }
.app .privilege-pill.is-contestant   { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-soft); }
.app .privilege-pill.is-none         { background: var(--surface-3); color: var(--fg-muted); border-color: var(--border); }

/* Action icon buttons in table rows */
.app .admin-users-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  margin-left: 4px;
  padding: 0;
}
.app .admin-users-action:hover { background: var(--surface-3); color: var(--fg); }
.app .admin-users-action.is-success:hover { color: var(--success); background: var(--success-soft); }
.app .admin-users-action.is-warning:hover { color: var(--warning); background: var(--warning-soft); }
.app .admin-users-action.is-danger:hover  { color: var(--danger);  background: var(--danger-soft); }
.app .admin-users-action .i { width: 14px; height: 14px; }
.app .admin-users-action-form { display: inline; margin: 0; }
.app .admin-users-action-note {
  color: var(--fg-subtle);
  font-size: 11.5px;
  font-style: italic;
}

/* Mobile cards */
.app .admin-users-cards { display: flex; flex-direction: column; gap: 8px; }
.app .admin-users-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.app .admin-users-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.app .admin-users-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
.app .admin-users-card-meta { min-width: 0; flex: 1; }
.app .admin-users-card-meta .admin-users-name { display: block; }
.app .admin-users-card-meta .admin-users-email { display: block; }
.app .admin-users-card-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
.app .admin-users-card-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Auto-complete suggestions panel */
.app .admin-users-search-wrap { position: relative; }
.app .admin-users-suggest {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.app .admin-users-suggest-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.app .admin-users-suggest-option:last-child { border-bottom: 0; }
.app .admin-users-suggest-option:hover { background: var(--surface-3); }
.app .admin-users-suggest-meta { min-width: 0; flex: 1; }
.app .admin-users-suggest-name { color: var(--fg); font-weight: 500; }
.app .admin-users-suggest-email { color: var(--fg-subtle); font-size: 11.5px; margin-left: 8px; }
.app .admin-users-suggest-add {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.app .admin-users-suggest-empty {
  padding: 12px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
}

/* Referral codes panel */
.app .admin-users-codes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app .admin-users-codes-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 13px;
}
.app .admin-users-code {
  font-family: ui-monospace, "SF Mono", monospace;
  color: var(--fg);
}
.app .admin-users-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}
.app .admin-users-code-copy:hover { text-decoration: underline; }
.app .admin-users-code-copy .i { width: 12px; height: 12px; }
.app .admin-users-list-empty {
  color: var(--fg-subtle);
  font-size: 12.5px;
  text-align: center;
  margin: 8px 0;
}

/* Custom confirm modal (kept for ban-with-reason) */
.app .admin-users-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.55);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.app .admin-users-modal {
  width: 100%;
  max-width: 460px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  padding: 20px;
}
.app .admin-users-modal-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}
.app .admin-users-modal-message {
  margin: 0 0 12px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.4;
}
.app .admin-users-modal-input { margin-bottom: 16px; }
.app .admin-users-modal-input-label {
  display: block;
  margin-bottom: 4px;
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 500;
}
.app .admin-users-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.app .admin-users-modal-form { display: inline; margin: 0; }

/* Form
   Layout mirrors admin/projects: the <form> itself is the grid container
   (200px TOC | 1fr body). The OUTER .admin-users-form-shell is also a grid
   with the same template so the post-form _ban_status section aligns with
   the form-body column (same horizontal offset as Identity / Status &
   roles / etc.). The form spans both shell columns and uses its OWN
   internal grid for the TOC | body split. */
.app .admin-users-form-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
}
.app .admin-users-form-shell > .admin-users-form { grid-column: 1 / -1; }
.app .admin-users-form-shell > #user-ban-status,
.app .admin-users-form-shell > .admin-users-form-actions { grid-column: 2; }
@media (max-width: 900px) {
  .app .admin-users-form-shell {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .app .admin-users-form-shell > #user-ban-status,
  .app .admin-users-form-shell > .admin-users-form-actions { grid-column: 1; }
}

.app .admin-users-form {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .app .admin-users-form {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.app .admin-users-toc {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.app .admin-users-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--fg-muted);
  font-size: 13px;
  text-decoration: none;
}
.app .admin-users-toc a:hover {
  background: var(--surface-3);
  color: var(--fg);
}
@media (max-width: 900px) {
  .app .admin-users-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }
}

.app .admin-users-form-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.app .admin-users-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  scroll-margin-top: 80px;
}
.app .admin-users-section-header { margin-bottom: 20px; }
.app .admin-users-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
}
.app .admin-users-section-title .i { width: 18px; height: 18px; color: var(--accent); }
.app .admin-users-section-subtitle {
  margin: 4px 0 0;
  color: var(--fg-muted);
  font-size: 13px;
}

.app .admin-users-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin-bottom: 16px;
}
.app .admin-users-grid-2:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .app .admin-users-grid-2 { grid-template-columns: 1fr; }
}

.app .admin-users-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.app .admin-users-form-row:last-child { margin-bottom: 0; }
.app .admin-users-label {
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
}
.app .admin-users-help {
  margin: 0;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.4;
}
.app .admin-users-help-block { margin-bottom: 12px; }

/* Avatar form row */
.app .admin-users-avatar-input-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
}
.app .admin-users-avatar-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
}

/* Checkbox rows */
.app .admin-users-checkbox-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-top: 6px; }
.app .admin-users-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 8px;
}
.app .admin-users-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.app .admin-users-checkbox.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Permission blocks */
.app .admin-users-perm-block { margin-bottom: 16px; }
.app .admin-users-perm-block:last-child { margin-bottom: 0; }
.app .admin-users-perm-block-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.app .admin-users-perm-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}
.app .admin-users-perm-checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app .admin-users-perm-note {
  color: var(--fg-muted);
  font-size: 11.5px;
}
.app .admin-users-perm-warning {
  background: var(--warning-soft);
  border: 1px solid var(--warning-soft);
  border-radius: 8px;
  padding: 12px;
  color: var(--warning);
  font-size: 13px;
}
.app .admin-users-perm-warning-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.app .admin-users-perm-warning-row .i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

/* iOS-style toggle cards (mirrors .admin-projects-toggle-* but namespace-scoped). */
.app .admin-users-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .app .admin-users-toggle-grid { grid-template-columns: 1fr; }
}

.app .admin-users-toggle-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app .admin-users-toggle-card {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.app .admin-users-toggle-card:hover { border-color: var(--border-strong); }

/* Visually hidden checkbox; track + thumb spans render the switch.
   pointer-events: none so direct clicks don't double-fire — clicks land on
   the wrapping <label> and forward to the input via label-click forwarding. */
.app .admin-users-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app .admin-users-toggle-track {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  background: var(--surface-3);
  border-radius: 999px;
  margin-top: 2px;
  transition: background 200ms;
}
.app .admin-users-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform 200ms;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.app .admin-users-toggle-input:checked ~ .admin-users-toggle-track {
  background: var(--accent);
}
.app .admin-users-toggle-input:checked ~ .admin-users-toggle-track .admin-users-toggle-thumb {
  transform: translateX(14px);
}
.app .admin-users-toggle-input:focus-visible ~ .admin-users-toggle-track {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Disabled-but-still-checked state for hierarchy-locked toggles
   (Promote ⊃ Write ⊃ Read). The visible checkbox is .is-hidden via opacity,
   so we drive the visual state through sibling selectors on the input. */
.app .admin-users-toggle-input.is-disabled ~ .admin-users-toggle-track {
  background: var(--surface-3);
  cursor: not-allowed;
}
.app .admin-users-toggle-input.is-disabled:checked ~ .admin-users-toggle-track {
  background: var(--accent-soft);
}
.app .admin-users-toggle-input.is-disabled ~ .admin-users-toggle-text {
  opacity: 0.6;
}

.app .admin-users-toggle-text { display: block; }
.app .admin-users-toggle-title {
  display: block;
  color: var(--fg);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 2px;
}
.app .admin-users-toggle-desc {
  display: block;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.4;
}
.app .admin-users-toggle-note {
  margin-left: 6px;
  font-size: 11.5px;
  color: var(--fg-muted);
  font-weight: 400;
}

.app .admin-users-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

/* Ban status section
   Renders as another .admin-users-section (same card chrome and offset as
   Identity / Status & roles / etc.). State-specific blocks inside the
   section render the banned info, the locked-for-global-admin info, or
   the ban-with-reason form. */

/* State block: visually contained inside the section card, with state-specific
   tint to match severity (banned = danger; locked = warning). The default
   ban-with-reason state has no tint — it's the section's own surface. */
.app .admin-users-ban-state {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 16px;
}
.app .admin-users-ban-state.is-banned {
  background: var(--danger-soft);
  border-color: var(--danger-soft);
}
.app .admin-users-ban-state.is-locked {
  background: var(--warning-soft);
  border-color: var(--warning-soft);
  color: var(--warning);
}
.app .admin-users-ban-state-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.app .admin-users-ban-state-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.app .admin-users-ban-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--danger);
  color: white;
  flex-shrink: 0;
}
.app .admin-users-ban-meta { flex: 1; min-width: 0; }
.app .admin-users-ban-state-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
}
.app .admin-users-ban-reason {
  margin: 0 0 4px;
  color: var(--fg);
  font-size: 13px;
}
.app .admin-users-ban-when {
  margin: 0 0 12px;
  color: var(--fg-muted);
  font-size: 11.5px;
}
.app .admin-users-ban-form { margin: 0; }
.app .admin-users-ban-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* ---------- admin/conversations ---------- */

/* .span-N namespace-scoped */
.app .admin-conv .span-4 { grid-column: span 4; }
@media (max-width: 900px) {
  .app .admin-conv .span-4 { grid-column: span 12; }
}

.app .admin-conv-back-row { margin-bottom: 6px; }
.app .admin-conv-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-muted);
  font-size: 12.5px;
  text-decoration: none;
}
.app .admin-conv-back:hover { color: var(--fg); }
.app .admin-conv-back .i { width: 14px; height: 14px; }

.app .admin-conv-header-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* Collapsible filters */
.app .admin-conv-filters {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
}
.app .admin-conv-filters-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  user-select: none;
}
.app .admin-conv-filters-summary::-webkit-details-marker { display: none; }
.app .admin-conv-filters-summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 4px;
  border: 4px solid transparent;
  border-left-color: var(--fg-muted);
  transition: transform 150ms;
}
.app .admin-conv-filters[open] > .admin-conv-filters-summary::before {
  transform: rotate(90deg);
}
.app .admin-conv-filters-summary .i { width: 14px; height: 14px; color: var(--fg-muted); }
.app .admin-conv-filters-active-pip {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 2px;
}
.app .admin-conv-filters-form {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
}
.app .admin-conv-filters-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
  padding-top: 16px;
}
@media (max-width: 768px) {
  .app .admin-conv-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .app .admin-conv-filters-grid { grid-template-columns: 1fr; }
}
.app .admin-conv-filters-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* List card */
.app .admin-conv-list-card { padding: 0; }
.app .admin-conv-list-card .card-pad { padding: 0; overflow-x: auto; }

.app .admin-conv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.app .admin-conv-table th,
.app .admin-conv-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  vertical-align: middle;
}
.app .admin-conv-table tr:last-child td { border-bottom: 0; }
.app .admin-conv-table th {
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
}
.app .admin-conv-table td { overflow-wrap: anywhere; word-break: break-word; }
.app .admin-conv-table .num {
  text-align: right;
  white-space: nowrap;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.app .admin-conv-table .status-col {
  white-space: nowrap;
  text-align: right;
}

.app .admin-conv-trow {
  cursor: pointer;
  transition: background 120ms;
}
.app .admin-conv-trow:hover { background: var(--surface-2); }
.app .admin-conv-trow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.app .admin-conv-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Mobile cards */
.app .admin-conv-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app .admin-conv-card {
  display: block;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.app .admin-conv-card:hover { border-color: var(--border-strong); }
.app .admin-conv-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app .admin-conv-card-meta { flex: 1; min-width: 0; }
.app .admin-conv-card-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--fg);
}
.app .admin-conv-card-meta-r {
  text-align: right;
  color: var(--fg-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.app .admin-conv-pagy {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* Show — metadata cards */
.app .admin-conv-meta-grid { margin-top: 16px; }
.app .admin-conv-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.app .admin-conv-card-title .i { width: 14px; height: 14px; color: var(--accent); }
.app .admin-conv-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 13px;
}
.app .admin-conv-dl dt { color: var(--fg-muted); font-weight: 500; }
.app .admin-conv-dl dd { margin: 0; color: var(--fg); }
.app .admin-conv-link { color: var(--accent); text-decoration: none; }
.app .admin-conv-link:hover { text-decoration: underline; }
.app .admin-conv-mono {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12.5px;
  color: var(--fg);
}
.app .admin-conv-muted { color: var(--fg-subtle); }

/* Conversation history card (collapsible via <details>) */
.app .admin-conv-history-card { margin-top: 16px; }

.app .admin-conv-history-details { display: block; }
.app .admin-conv-history-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.app .admin-conv-history-summary::-webkit-details-marker { display: none; }
.app .admin-conv-history-summary:hover .admin-conv-history-title { color: var(--accent); }
/* Divider only shows when the section is open. When closed the summary sits
   alone in the card with no hanging line. */
.app .admin-conv-history-details[open] > .admin-conv-history-summary {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.app .admin-conv-history-title {
  margin: 0;
  flex: 1;
  border: 0;
  padding: 0;
}
.app .admin-conv-history-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.app .admin-conv-history-chev {
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
  transition: transform 150ms;
}
.app .admin-conv-history-details[open] > .admin-conv-history-summary .admin-conv-history-chev {
  transform: rotate(180deg);
}

.app .admin-conv-stream {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.app .admin-conv-history-empty { margin: 0; }
.app .admin-conv-system-banner {
  text-align: center;
  font-size: 12px;
  color: var(--fg-muted);
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

/* ---------- admin/submissions ---------- */

/* Inherits .admin-conv-* and .admin-subs-* tweaks layered on top */
.app .admin-subs-points-auto {
  margin-left: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  font-weight: 500;
}

.app .admin-subs-score-pos { color: var(--success); font-weight: 600; }
.app .admin-subs-score-neg { color: var(--danger);  font-weight: 600; }
.app .admin-subs-points-calc {
  margin-top: 4px;
  font-size: 11px;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}

/* Section card on the show page (used for User explanation, Submission metadata,
   Conversation history). Same chrome as .card / .card-pad with extra margins
   for vertical rhythm. */
.app .admin-subs-section-card { margin-top: 16px; }
.app .admin-subs-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app .admin-subs-meta-edit {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.app .admin-subs-meta-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
}
@media (max-width: 600px) {
  .app .admin-subs-meta-dl { grid-template-columns: 1fr; }
}
.app .admin-subs-meta-pair { min-width: 0; }
.app .admin-subs-meta-pair dt {
  color: var(--fg-muted);
  font-size: 11.5px;
  font-weight: 500;
  margin-bottom: 2px;
}
.app .admin-subs-meta-pair dd {
  color: var(--fg);
  font-size: 13.5px;
  margin: 0;
  overflow-wrap: anywhere;
}

.app .admin-subs-user-explanation {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Dispute info card */
.app .admin-subs-dispute-card {
  margin-top: 16px;
  background: var(--warning-soft);
  border-color: var(--warning-soft);
}
.app .admin-subs-dispute-title { color: var(--warning); }
.app .admin-subs-dispute-subtitle {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warning);
}
.app .admin-subs-dispute-reason {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--fg);
  font-size: 13px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.app .admin-subs-dispute-note {
  margin: 12px 0 0;
  color: var(--warning);
  font-size: 12px;
}

/* Review-outcome card */
.app .admin-subs-review-card { margin-top: 16px; }
.app .admin-subs-review-help {
  margin: 0 0 16px;
  font-size: 13px;
}
.app .admin-subs-review-help-warn { color: var(--warning); }

.app .admin-subs-autograde-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
}
.app .admin-subs-autograde-form { display: inline; margin: 0; }
.app .admin-subs-autograde-help {
  flex: 1;
  min-width: 240px;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.4;
}

.app .admin-subs-review-form { display: flex; flex-direction: column; gap: 16px; }
.app .admin-subs-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px 20px;
  align-items: end;
}
@media (max-width: 600px) {
  .app .admin-subs-review-grid { grid-template-columns: 1fr; }
}
.app .admin-subs-review-actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
/* Match button height to .admin-users-input so the button's top and bottom
   align with the Status / Points fields when the grid bottom-aligns cells.
   The global .btn is 32px but the inputs render at ~38px because of font +
   padding + border. Override here to keep the row visually flush. */
.app .admin-subs-review-actions [type="submit"] {
  height: 38px;
  padding: 0 18px;
}

.app .admin-subs-resolve-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-soft);
  border-radius: 8px;
  cursor: pointer;
}
.app .admin-subs-resolve-row .admin-users-checkbox { margin-top: 2px; }
.app .admin-subs-resolve-label {
  display: block;
  color: var(--warning);
  font-weight: 600;
  font-size: 13px;
}
.app .admin-subs-resolve-help {
  display: block;
  color: var(--warning);
  opacity: 0.75;
  font-size: 11.5px;
  margin-top: 2px;
}

.app .admin-subs-feedback-req { color: var(--danger); }

/* Wiki page picker */
.app .admin-subs-wiki-picker { position: relative; }
.app .admin-subs-wiki-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 11.5px;
  cursor: pointer;
}
.app .admin-subs-wiki-trigger:hover { text-decoration: underline; }
.app .admin-subs-wiki-trigger .i { width: 12px; height: 12px; }
.app .admin-subs-wiki-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: 280px;
  z-index: 50;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.app .admin-subs-wiki-dropdown.hidden { display: none; }
.app .admin-subs-wiki-search {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  font-size: 12px;
}
.app .admin-subs-wiki-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}
.app .admin-subs-wiki-option {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
}
.app .admin-subs-wiki-option:hover { background: var(--surface-3); }
.app .admin-subs-wiki-option .i { width: 12px; height: 12px; color: var(--fg-muted); flex-shrink: 0; }
.app .admin-subs-wiki-option-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .admin-subs-wiki-option-slug {
  font-size: 10.5px;
  color: var(--fg-subtle);
  font-family: ui-monospace, "SF Mono", monospace;
}
.app .admin-subs-wiki-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--fg-muted);
  text-align: center;
}

/* ---------- admin/reports ---------- */

/* Truncated reason cell on the index table */
.app .admin-reports-reason-cell {
  color: var(--fg-muted);
  font-size: 12.5px;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app .admin-reports-card-reason {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- admin/monitoring ---------- */

/* .span-N namespace-scoped (.span-3 for the 4-card KPI grid; .span-4 reused for the 3 charts) */
.app .admin-monitoring .span-3 { grid-column: span 3; }
.app .admin-monitoring .span-4 { grid-column: span 4; }
@media (max-width: 1100px) {
  .app .admin-monitoring .span-3 { grid-column: span 6; }
}
@media (max-width: 700px) {
  .app .admin-monitoring .span-3 { grid-column: span 12; }
  .app .admin-monitoring .span-4 { grid-column: span 12; }
}

.app .admin-monitoring-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.app .admin-monitoring-last-updated {
  color: var(--fg-muted);
  font-size: 12.5px;
}
.app .admin-monitoring-autorefresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
}
.app .admin-monitoring-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
}

/* Error banner */
.app .admin-monitoring-error-banner {
  background: var(--danger-soft);
  border-color: var(--danger-soft);
  margin-bottom: 16px;
}
.app .admin-monitoring-error-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--danger);
}
.app .admin-monitoring-error-row .i { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.app .admin-monitoring-error-title { margin: 0; font-weight: 600; font-size: 14px; }
.app .admin-monitoring-error-detail { margin: 4px 0 0; font-size: 12.5px; opacity: 0.85; }

/* KPI grid — stretch all 4 cards to the same height regardless of content. */
.app .admin-monitoring-kpi-grid { margin-top: 16px; margin-bottom: 16px; }
.app .admin-monitoring-kpi-grid > * { display: flex; }
.app .admin-monitoring-kpi-grid .card {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.app .admin-monitoring-kpi-grid .card-pad {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.app .admin-monitoring-kpi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.app .admin-monitoring-kpi-label {
  margin: 0 0 6px;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .admin-monitoring-kpi-num {
  margin: 0;
  color: var(--fg);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.app .admin-monitoring-kpi-meta {
  margin: 8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-muted);
  font-size: 12.5px;
}
.app .admin-monitoring-kpi-meta.is-ok { color: var(--success); }
.app .admin-monitoring-kpi-meta.is-warn { color: var(--warning); }
.app .admin-monitoring-kpi-meta .i { width: 12px; height: 12px; }
.app .admin-monitoring-rate { color: var(--accent); font-weight: 600; }
.app .admin-monitoring-kpi-status { margin-top: 8px; }

/* Health gauge */
.app .admin-monitoring-gauge {
  position: relative;
  width: 80px;
  height: 80px;
}
.app .admin-monitoring-gauge-svg {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg);
}
.app .admin-monitoring-gauge-fg.text-green-400 { color: var(--success); }
.app .admin-monitoring-gauge-fg.text-yellow-400 { color: var(--warning); }
.app .admin-monitoring-gauge-fg.text-orange-400 { color: var(--warning); }
.app .admin-monitoring-gauge-fg.text-red-400 { color: var(--danger); }
.app .admin-monitoring-gauge-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
}

/* Source counts */
.app .admin-monitoring-source-counts {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.app .admin-monitoring-source-counts span span {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.app .admin-monitoring-count-h span { color: var(--success); }
.app .admin-monitoring-count-d span { color: var(--warning); }
.app .admin-monitoring-count-c span { color: var(--danger); }
.app .admin-monitoring-source-toggle {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--fg-muted);
}
.app .admin-monitoring-source-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app .admin-monitoring-source-toggle .i { width: 12px; height: 12px; }

/* Alerts panel */
.app .admin-monitoring-alerts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.app .admin-monitoring-alert {
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid transparent;
}
.app .admin-monitoring-alert.is-critical {
  background: var(--danger-soft);
  border-color: var(--danger-soft);
  color: var(--danger);
}
.app .admin-monitoring-alert.is-warning {
  background: var(--warning-soft);
  border-color: var(--warning-soft);
  color: var(--warning);
}
.app .admin-monitoring-alert-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}
.app .admin-monitoring-alert-header .i { width: 14px; height: 14px; }
.app .admin-monitoring-alert-list {
  list-style: disc;
  list-style-position: inside;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Section headers */
.app .admin-monitoring-section { margin-top: 24px; }
.app .admin-monitoring-section-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Source health grid */
.app .admin-monitoring-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.app .admin-monitoring-source-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 0;
  color: var(--fg-muted);
}
.app .admin-monitoring-source-empty .i { width: 32px; height: 32px; }

.app .admin-monitoring-source-card.is-disabled { opacity: 0.65; }
.app .admin-monitoring-source-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.app .admin-monitoring-source-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.app .admin-monitoring-source-name {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .admin-monitoring-source-off-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.app .admin-monitoring-source-off-tag .i { width: 10px; height: 10px; }
.app .admin-monitoring-source-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.app .admin-monitoring-source-score-num {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.app .admin-monitoring-source-score-num.is-healthy   { color: var(--success); }
.app .admin-monitoring-source-score-num.is-degraded  { color: var(--warning); }
.app .admin-monitoring-source-score-num.is-unhealthy { color: var(--danger); }
.app .admin-monitoring-source-score-bar {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.app .admin-monitoring-source-score-fill {
  height: 100%;
  border-radius: 999px;
}
.app .admin-monitoring-source-score-fill.is-healthy   { background: var(--success); }
.app .admin-monitoring-source-score-fill.is-degraded  { background: var(--warning); }
.app .admin-monitoring-source-score-fill.is-unhealthy { background: var(--danger); }

.app .admin-monitoring-source-stats {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 12.5px;
}
.app .admin-monitoring-source-stats dt { color: var(--fg-muted); }
.app .admin-monitoring-source-stats dd {
  margin: 0;
  color: var(--fg);
  text-align: right;
}

.app .admin-monitoring-source-error {
  margin: 12px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--danger);
  font-size: 11.5px;
}
.app .admin-monitoring-source-error .i { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; }

/* Metrics charts grid */
.app .admin-monitoring-charts-grid { gap: 16px; }
.app .admin-monitoring-chart-empty {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-subtle);
  font-size: 13px;
}

/* Recent activity tabs */
.app .admin-monitoring-tabs-card {
  margin-top: 16px;
  padding: 0;
  overflow: hidden;
}
.app .admin-monitoring-tabs-nav {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.app .admin-monitoring-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.app .admin-monitoring-tab:hover { color: var(--fg); }
.app .admin-monitoring-tab .i { width: 14px; height: 14px; }
/* These class names are toggled by the monitoring-dashboard Stimulus
   controller (`btn.classList.toggle("tab-active", ...)`); preserved verbatim. */
.app .admin-monitoring-tab.tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.app .admin-monitoring-tab.tab-inactive { color: var(--fg-muted); }

/* Activity tables */
.app .admin-monitoring-table-wrap { overflow-x: auto; }
.app .admin-monitoring-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.app .admin-monitoring-table th,
.app .admin-monitoring-table td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
.app .admin-monitoring-table tr:last-child td { border-bottom: 0; }
.app .admin-monitoring-table th {
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
}
.app .admin-monitoring-table .num {
  text-align: right;
  white-space: nowrap;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.app .admin-monitoring-table .status-col { white-space: nowrap; }
.app .admin-monitoring-table-empty {
  text-align: center !important;
  padding: 40px 16px !important;
  color: var(--fg-muted);
}
.app .admin-monitoring-table-empty .i { width: 28px; height: 28px; }
.app .admin-monitoring-table-empty p { margin: 8px 0 0; }

.app .admin-monitoring-content-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 500;
}

.app .admin-monitoring-confidence-high { color: var(--success); font-weight: 600; }
.app .admin-monitoring-confidence-mid  { color: var(--warning); font-weight: 600; }
.app .admin-monitoring-confidence-low  { color: var(--fg-muted); }

/* ────────────────────────────────────────────────────────────────────────────
   admin-usage namespace — admin/usage_dashboard/* (show, arena, workflow,
   metric_detail, user_usage). Mirrors .admin-monitoring's span-3 pattern so
   the 8-up KPI grid on /admin/usage and the 6-up grid on user_usage collapse
   gracefully on narrow viewports. Phase-0 owned globals (.kpi, .card,
   .dash-grid, .span-4/8/12, .tabs) are reused; only span-3 needs to be
   namespace-defined.
   ──────────────────────────────────────────────────────────────────────── */

.app .admin-usage .span-3 { grid-column: span 3; }
@media (max-width: 1100px) {
  .app .admin-usage .span-3 { grid-column: span 6; }
}
@media (max-width: 700px) {
  .app .admin-usage .span-3 { grid-column: span 12; }
}

/* Header actions: filter form (selects + submit) + export CTA, wraps on narrow */
.app .admin-usage-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.app .admin-usage-filter-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.app .admin-usage-filter-form .admin-users-input { min-width: 0; }
.app .admin-usage-export-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app .admin-usage-export-link .i { width: 14px; height: 14px; }

/* Back link (metric_detail, user_usage) */
.app .admin-usage-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-muted);
  font-size: 13px;
  text-decoration: none;
  margin-bottom: 6px;
}
.app .admin-usage-back:hover { color: var(--fg); }
.app .admin-usage-back .i { width: 14px; height: 14px; }
.app .admin-usage-scope {
  margin-left: 6px;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 400;
}

/* Sub-navigation: anchor-tabs already styled via .tabs a / .tabs a.active. */
.app .admin-usage-subnav { margin: 4px 0 16px; }
.app .admin-usage-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app .admin-usage-subnav a .i { width: 13px; height: 13px; }

/* Filter / info banners */
.app .admin-usage-info-banner,
.app .admin-usage-filter-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 13px;
  margin-bottom: 12px;
}
.app .admin-usage-info-banner .i,
.app .admin-usage-filter-banner .i { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
.app .admin-usage-info-banner p { margin: 0; }
.app .admin-usage-filter-banner strong { color: var(--fg); font-weight: 600; }
.app .admin-usage-filter-banner-sep { color: var(--fg-subtle); margin: 0 4px; }
.app .admin-usage-filter-banner-clear {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12.5px;
}
.app .admin-usage-filter-banner-clear .i { width: 12px; height: 12px; }

/* KPI grid: .span-3 above forces 4-up at desktop; equal heights regardless of
   subtitle/comparison block presence. Mirrors admin-monitoring-kpi-grid. */
.app .admin-usage-kpi-grid { margin-top: 16px; margin-bottom: 16px; }
.app .admin-usage-kpi-grid > * { display: flex; }
.app .admin-usage-kpi-grid > * > .kpi,
.app .admin-usage-kpi-grid > * > .admin-usage-kpi-link,
.app .admin-usage-kpi-grid > * > .admin-usage-kpi-link > .kpi { width: 100%; }

/* KPI tile additions (subtitle + vs-period meta) */
.app .admin-usage-kpi-sub {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--fg-subtle);
  line-height: 1.3;
}
.app .admin-usage-kpi-vs {
  margin-left: 6px;
  font-size: 10.5px;
  color: var(--fg-subtle);
  font-weight: 400;
}

/* Linked KPI: anchor wraps the tile, hover lifts the inner tile */
.app .admin-usage-kpi-link {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
}
.app .admin-usage-kpi-link .kpi {
  height: 100%;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.app .admin-usage-kpi-link:hover .kpi {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.app .admin-usage-kpi-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Section title (used inside cards: "Summary statistics", "Usage by model" …) */
.app .admin-usage-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
}
.app .admin-usage-section-title .i { width: 16px; height: 16px; color: var(--accent); }

/* Stats-card stack — vertical gap between Response/TTFT/TPS cards on show + user_usage */
.app .admin-usage-section-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.app .admin-usage-stats-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
}
.app .admin-usage-stats-card-header:hover .admin-usage-section-title { color: var(--accent); }
.app .admin-usage-stats-card-link-icon { width: 14px; height: 14px; color: var(--fg-subtle); }
.app .admin-usage-stats-meta {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--fg-subtle);
}

/* Stats grid: 6-cell default, 9-cell when .is-nine. Tones inherit from
   global .tone-good / .tone-info / .tone-warn / .tone-bad / .tone-accent. */
.app .admin-usage-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.app .admin-usage-stats-grid.is-nine {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .app .admin-usage-stats-grid,
  .app .admin-usage-stats-grid.is-nine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .app .admin-usage-stats-grid,
  .app .admin-usage-stats-grid.is-nine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.app .admin-usage-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  min-width: 0;
}
.app .admin-usage-stat-cell .lbl {
  font-size: 11px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .admin-usage-stat-cell .val {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}

/* Charts grid + chart helpers (legend visibility comes from chartkick library
   options on each chart, not CSS — keeps chart theme decisions colocated). */
.app .admin-usage-charts-grid { margin-bottom: 16px; }
.app .admin-usage-chart-meta {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--fg-subtle);
  text-align: center;
}
.app .admin-usage-chart-empty {
  margin: 24px 0;
  text-align: center;
  color: var(--fg-subtle);
  font-size: 13px;
}

/* Tables (by-model, top-users, by-match, by-run, daily-data) */
.app .admin-usage-table-card { margin-bottom: 16px; }
.app .admin-usage-table-wrap {
  overflow-x: auto;
  margin: 0 -4px;
}
.app .admin-usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.app .admin-usage-table th,
.app .admin-usage-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.app .admin-usage-table th {
  color: var(--fg-subtle);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--surface-2);
}
.app .admin-usage-table tbody tr:last-child td { border-bottom: 0; }
.app .admin-usage-table tbody tr:hover { background: var(--surface-2); }
.app .admin-usage-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.app .admin-usage-table .num.tone-good { color: var(--success); }
.app .admin-usage-table .num.tone-info { color: var(--accent); }
.app .admin-usage-table .num.tone-warn { color: var(--warning); }
.app .admin-usage-table .num.tone-bad  { color: var(--danger); }

/* Cell tokens used inside table cells / KPI sub-rows */
.app .admin-usage-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
}
.app .admin-usage-link:hover { text-decoration: underline; }
.app .admin-usage-name {
  display: block;
  color: var(--fg);
  font-weight: 500;
}
.app .admin-usage-name.is-active { color: var(--accent); }
.app .admin-usage-vendor {
  display: block;
  color: var(--fg-subtle);
  font-size: 11.5px;
  margin-top: 2px;
}
.app .admin-usage-mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
}
.app .admin-usage-divider { color: var(--fg-subtle); margin: 0 4px; }

/* Daily-data collapsible (native <details>) — admin-usage-metric-detail */
.app .admin-usage-daily-card { margin-top: 16px; }
.app .admin-usage-daily-details summary { list-style: none; cursor: pointer; }
.app .admin-usage-daily-details summary::-webkit-details-marker { display: none; }
.app .admin-usage-daily-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app .admin-usage-daily-summary .admin-usage-section-title { margin-bottom: 0; }
.app .admin-usage-daily-count {
  margin-left: auto;
  margin-right: 8px;
  font-size: 12px;
  color: var(--fg-subtle);
}
.app .admin-usage-daily-chev {
  width: 16px;
  height: 16px;
  color: var(--fg-subtle);
  transition: transform 150ms ease;
}
.app .admin-usage-daily-details[open] .admin-usage-daily-chev { transform: rotate(180deg); }
.app .admin-usage-daily-body { margin-top: 12px; }

/* User-usage banner (avatar + meta + edit-user CTA) */
.app .admin-usage-user-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  margin-bottom: 14px;
}
.app .admin-usage-user-avatar { flex-shrink: 0; }
.app .admin-usage-user-meta { flex: 1; min-width: 0; }
.app .admin-usage-user-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.app .admin-usage-user-email {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--fg-subtle);
}

/* Per-request-type breakdown grid (user_usage) */
.app .admin-usage-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.app .admin-usage-type-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.app .admin-usage-type-cell .val {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
}
.app .admin-usage-type-cell .lbl {
  font-size: 11px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Empty / "no data" rows used inline in cards without an empty-board pattern */
.app .admin-usage-empty {
  margin: 16px 0 0;
  text-align: center;
  color: var(--fg-subtle);
  font-size: 13px;
}

/* === Worker 2 (admin content) — append below this line === */

/* ----- Shared form primitives (W2-local) ----- */
.app .admin-assessments-input,
.app .admin-categories-input,
.app .admin-prompt-reports-input,
.app .admin-cert-templates-input,
.app .admin-vendor-models-input,
.app .admin-parser-configs-input,
.app .admin-benchmark-models-input,
.app .admin-benchmarks-input,
.app .admin-simulation-input {
  width: 100%;
  min-height: 38px;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.app .admin-assessments-input:focus,
.app .admin-categories-input:focus,
.app .admin-prompt-reports-input:focus,
.app .admin-cert-templates-input:focus,
.app .admin-vendor-models-input:focus,
.app .admin-parser-configs-input:focus,
.app .admin-benchmark-models-input:focus,
.app .admin-benchmarks-input:focus,
.app .admin-simulation-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.app .admin-assessments-input.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}
.app .admin-assessments-input.is-mono,
.app .admin-cert-templates-input.is-mono,
.app .admin-parser-configs-input.is-mono,
.app .admin-vendor-models-input.is-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
}

/* ----- Assessments index ----- */
.app .admin-assessments-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.app .admin-assessments-empty {
  text-align: center;
  padding: 40px 24px;
}
.app .admin-assessments-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--fg-subtle);
  margin: 0 auto 12px;
  display: block;
}
.app .admin-assessments-empty h3 { margin: 0 0 6px; }
.app .admin-assessments-empty p { color: var(--fg-muted); margin: 0 auto 16px; max-width: 440px; }

/* Card grid — same auto-fill pattern as user-facing .challenge-grid */
.app .admin-assessments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.app .admin-assessments-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface-1);
  transition: all 140ms;
  min-height: 160px;
}
.app .admin-assessments-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.app .admin-assessments-card.is-inactive { opacity: 0.55; }

/* Whole-card link — sits beneath visual content. Visual elements get
   pointer-events:none so clicks pass through to the link layer; the
   3-dot menu re-enables pointer-events at a higher z-index. */
.app .admin-assessments-card-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
.app .admin-assessments-card > *:not(.admin-assessments-card-link) {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
/* Re-enable pointer-events on the menu (which lives inside the footer,
   a direct child that's pointer-events:none from the catch-all above).
   Specificity (0,0,4,0) beats the catch-all's (0,0,3,0) so it wins. */
.app .admin-assessments-card .admin-assessments-card-foot .admin-assessments-card-menu,
.app .admin-assessments-card .admin-assessments-card-foot .admin-assessments-card-menu * {
  pointer-events: auto;
}

.app .admin-assessments-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app .admin-assessments-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  font-size: 16px;       /* sizes the FA glyph; no width/height on <i> */
}

.app .admin-assessments-name {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.app .admin-assessments-difficulty {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
}
.app .admin-assessments-difficulty.beginner    { background: color-mix(in srgb, var(--success) 14%, var(--surface-2)); color: var(--success); }
.app .admin-assessments-difficulty.intermediate{ background: color-mix(in srgb, var(--warning) 14%, var(--surface-2)); color: var(--warning); }
.app .admin-assessments-difficulty.advanced    { background: color-mix(in srgb, var(--danger)  14%, var(--surface-2)); color: var(--danger); }

.app .admin-assessments-card-cat {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-muted);
  font-size: 13px;
}
.app .admin-assessments-card-cat svg.lucide { width: 13px; height: 13px; }

.app .admin-assessments-card-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

.app .admin-assessments-card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.app .admin-assessments-card-foot time { color: var(--fg-subtle); }

/* Active/inactive pill in the footer */
.app .admin-assessments-pill .dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.app .admin-assessments-pill.is-active { color: var(--success); }
.app .admin-assessments-pill.is-active .dot { background: var(--success); }
.app .admin-assessments-pill.is-paused { color: var(--fg-muted); }
.app .admin-assessments-pill.is-paused .dot { background: var(--fg-muted); }

/* 3-dot menu — sits inline at the right end of the footer.
   `position: relative` contains the absolute menu-list;
   `margin-left: auto` pushes it to the right end of the flex row. */
.app .admin-assessments-card-menu {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}
.app .admin-assessments-card-menu-trigger {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--fg-muted);
  cursor: pointer;
}
.app .admin-assessments-card-menu-trigger:hover {
  background: var(--surface-3);
  color: var(--fg);
  border-color: var(--border);
}
.app .admin-assessments-card-menu-trigger svg.lucide { width: 14px; height: 14px; }

/* Opens UPWARD so the menu doesn't get clipped under the next card row. */
.app .admin-assessments-card-menu-list {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  min-width: 160px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 2;
}
/* Required so Tailwind's `.hidden` (toggled by dropdown_controller) wins
   over the `.app` prefixed `display: flex` rule above. */
.app .admin-assessments-card-menu-list.hidden { display: none; }

.app .admin-assessments-card-menu-form { display: block; margin: 0; }
.app .admin-assessments-card-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.app .admin-assessments-card-menu-item:hover { background: var(--surface-3); }
.app .admin-assessments-card-menu-item.is-danger:hover {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-3));
  color: var(--danger);
}
.app .admin-assessments-card-menu-item svg.lucide {
  width: 14px;
  height: 14px;
  color: var(--fg-muted);
}

/* ----- Assessments editor (sectioned form) ----- */
.app .admin-assessments-editor { max-width: 1240px; }

.app .admin-assessments-error-summary {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-1));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.app .admin-assessments-error-summary-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  margin-bottom: 6px;
}
.app .admin-assessments-error-summary-head svg.lucide { width: 16px; height: 16px; }
.app .admin-assessments-error-summary ul { margin: 0; padding-left: 22px; }
.app .admin-assessments-error-summary a { color: var(--danger); text-decoration: underline; }

/* Form is the TOC | body grid (no shell wrapper). Explicit grid-column on
   every direct child so error-summary appearing/disappearing can't shuffle
   TOC / sections / actions into wrong cells via auto-placement. */
.app .admin-assessments-form {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.app .admin-assessments-form > .admin-assessments-toc { grid-column: 1; }
.app .admin-assessments-form > .admin-assessments-sections { grid-column: 2; }
.app .admin-assessments-form > .admin-assessments-error-summary { grid-column: 2; }
.app .admin-assessments-form > .admin-assessments-actions { grid-column: 2; }

.app .admin-assessments-toc {
  position: sticky;
  top: 84px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.app .admin-assessments-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 13px;
  transition: background 100ms ease, color 100ms ease;
}
.app .admin-assessments-toc a:hover {
  background: var(--surface-3);
  color: var(--fg);
}

.app .admin-assessments-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
.app .admin-assessments-sections > .admin-assessments-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin: 0;
  scroll-margin-top: 80px;
}
.app .admin-assessments-sections > .admin-assessments-section header {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.app .admin-assessments-sections > .admin-assessments-section header h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
}
.app .admin-assessments-sections > .admin-assessments-section header h2 svg.lucide { width: 18px; height: 18px; color: var(--accent); }
.app .admin-assessments-sections > .admin-assessments-section header p { margin: 0; color: var(--fg-muted); font-size: 13px; }

.app .admin-assessments-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
.app .admin-assessments-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
}

.app .admin-assessments-field,
.app .admin-simulation-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Direct-child of section only — preserves spacing for stacked
   single-column fields (Content / Prompts) without affecting fields
   inside a grid wrapper (Routing's 3-up row). */
.app .admin-assessments-sections > .admin-assessments-section > .admin-assessments-field + .admin-assessments-field { margin-top: 14px; }
.app .admin-assessments-label,
.app .admin-simulation-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.app .admin-assessments-help,
.app .admin-simulation-help {
  margin: 0;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.45;
}
.app .admin-assessments-help.is-error,
.app .admin-simulation-help.is-error { color: var(--danger); }
.app .admin-assessments-help code,
.app .admin-simulation-help code {
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}
.app .admin-assessments-help a,
.app .admin-simulation-help a { color: var(--accent); }
.app .admin-assessments-help svg.lucide,
.app .admin-simulation-help svg.lucide { width: 13px; height: 13px; vertical-align: -2px; }

.app .admin-assessments-subheading,
.app .admin-simulation-subheading {
  margin: 18px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Vendor models picker */
.app .admin-assessments-vendors {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.app .admin-assessments-vendors-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--fg-muted);
}
.app .admin-assessments-vendors-empty svg.lucide { color: var(--warning); }
.app .admin-assessments-vendors-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--surface-2);
  margin: 0;
}
.app .admin-assessments-vendors-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.app .admin-assessments-vendors-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}
.app .admin-assessments-vendors-count {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-3);
  border-radius: 999px;
  color: var(--fg-muted);
}
.app .admin-assessments-vendors-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.app .admin-assessments-vendor-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.app .admin-assessments-vendor-chip:hover {
  background: var(--surface-3);
}
.app .admin-assessments-vendor-chip input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}
.app .admin-assessments-vendor-chip.is-selected {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-1));
  border-color: var(--accent);
  color: var(--fg);
}

/* Toggle list */
.app .admin-assessments-toggles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app .admin-assessments-toggle {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 100ms ease;
}
.app .admin-assessments-toggle:hover { background: var(--surface-3); }
.app .admin-assessments-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
}
.app .admin-assessments-toggle.is-disabled {
  cursor: not-allowed;
  opacity: 0.85;
}
.app .admin-assessments-toggle.is-disabled .admin-assessments-toggle-help {
  color: var(--warning);
}
.app .admin-assessments-toggle-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app .admin-assessments-toggle-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg);
}
.app .admin-assessments-toggle-help {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.45;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}
.app .admin-assessments-toggle-help svg.lucide { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }

/* Form action bar — placement on form grid handled by .admin-assessments-form > rule */
.app .admin-assessments-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ----- Reusable lucide icon picker (W2-local; namespaced for assessments + future W2 forms) ----- */
.app .admin-icon-picker { position: relative; }
.app .admin-icon-picker-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 10px;
  align-items: stretch;
}
.app .admin-icon-picker-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--fg);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}
.app .admin-icon-picker-current:hover { background: var(--surface-3); }
.app .admin-icon-picker-current[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.app .admin-icon-picker-preview {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-3));
  color: var(--accent);
  flex-shrink: 0;
  font-size: 16px;       /* sizes the FA glyph; no width/height on <i> */
}
/* Lucide SVGs need explicit sizing (they don't honor font-size); FA <i>
   sizes via font-size from the parent and ignores width/height. */
.app .admin-icon-picker-preview svg.lucide { width: 16px; height: 16px; }
.app .admin-icon-picker-current-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-muted);
}
.app .admin-icon-picker-chev {
  width: 14px;
  height: 14px;
  color: var(--fg-muted);
}
.app .admin-icon-picker-input { font-size: 13px; }

.app .admin-icon-picker-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  padding: 10px;
  z-index: 50;
}
.app .admin-icon-picker-popover-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.app .admin-icon-picker-popover-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--fg-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 80ms ease, border-color 80ms ease, color 80ms ease;
  font-size: 18px;       /* sizes the FA glyph; no width/height on <i> */
}
.app .admin-icon-picker-popover-cell:hover {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--fg);
}
.app .admin-icon-picker-popover-cell svg.lucide { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .app .admin-assessments-form { grid-template-columns: 1fr; gap: 16px; }
  .app .admin-assessments-form > .admin-assessments-toc,
  .app .admin-assessments-form > .admin-assessments-sections,
  .app .admin-assessments-form > .admin-assessments-error-summary,
  .app .admin-assessments-form > .admin-assessments-actions { grid-column: 1; }
  .app .admin-assessments-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }
  .app .admin-assessments-toc a { white-space: nowrap; }
  .app .admin-assessments-grid-2,
  .app .admin-assessments-grid-3 { grid-template-columns: 1fr; }
  .app .admin-icon-picker-row { grid-template-columns: 1fr; }
  .app .admin-icon-picker-popover-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ----- Categories ----- */
.app .admin-categories-empty {
  text-align: center;
  padding: 40px 24px;
}
.app .admin-categories-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--fg-subtle);
  margin: 0 auto 12px;
  display: block;
}
.app .admin-categories-empty h3 { margin: 0 0 6px; }
.app .admin-categories-empty p { color: var(--fg-muted); margin: 0 auto 16px; max-width: 440px; }

.app .admin-categories-card { padding: 0; overflow: hidden; }

.app .admin-categories-table {
  width: 100%;
  border-collapse: collapse;
}
.app .admin-categories-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.app .admin-categories-table thead th.admin-categories-actions-col {
  width: 96px;
}
.app .admin-categories-row {
  border-bottom: 1px solid var(--border);
  transition: background 90ms ease;
}
.app .admin-categories-row:last-child { border-bottom: none; }
.app .admin-categories-row:hover { background: var(--surface-2); }
.app .admin-categories-row td { padding: 12px 16px; vertical-align: middle; }
.app .admin-categories-name {
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}
.app .admin-categories-description {
  color: var(--fg-muted);
  font-size: 13.5px;
  max-width: 0;
  width: 100%;
}
.app .admin-categories-empty-cell {
  color: var(--fg-subtle);
  font-style: italic;
  font-size: 13px;
}
.app .admin-categories-actions {
  white-space: nowrap;
  text-align: right;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.app .admin-categories-action-form { display: inline-flex; }

/* Categories form */
.app .admin-categories-editor { max-width: 720px; }
.app .admin-categories-form-card { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.app .admin-categories-field { display: flex; flex-direction: column; gap: 6px; }
.app .admin-categories-label { font-size: 13px; font-weight: 500; color: var(--fg); }
.app .admin-categories-help {
  margin: 0;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.45;
}
.app .admin-categories-help.is-error { color: var(--danger); }

.app .admin-categories-error-summary {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-1));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.app .admin-categories-error-summary-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  margin-bottom: 6px;
}
.app .admin-categories-error-summary-head svg.lucide { width: 16px; height: 16px; }
.app .admin-categories-error-summary ul { margin: 0; padding-left: 22px; }
.app .admin-categories-error-summary a { color: var(--danger); text-decoration: underline; }

.app .admin-categories-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}

@media (max-width: 768px) {
  .app .admin-categories-table thead { display: none; }
  .app .admin-categories-row,
  .app .admin-categories-row td { display: block; padding: 8px 16px; }
  .app .admin-categories-row { padding: 12px 0; }
  .app .admin-categories-actions { justify-content: flex-start; padding-bottom: 12px; }
}

/* ----- Prompt reports ----- */
.app .admin-prompt-reports-filters { margin-bottom: 16px; }

.app .admin-prompt-reports-card { padding: 0; overflow-x: auto; }
.app .admin-prompt-reports-table { width: 100%; border-collapse: collapse; }
.app .admin-prompt-reports-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.app .admin-prompt-reports-table thead th.admin-prompt-reports-actions-col { width: 110px; }
.app .admin-prompt-reports-row { border-bottom: 1px solid var(--border); }
.app .admin-prompt-reports-row:last-child { border-bottom: none; }
.app .admin-prompt-reports-row:hover { background: var(--surface-2); }
.app .admin-prompt-reports-row td { padding: 12px 16px; vertical-align: middle; }

.app .admin-prompt-reports-user { font-weight: 500; color: var(--fg); white-space: nowrap; }
.app .admin-prompt-reports-anon { color: var(--fg-muted); font-style: italic; }
.app .admin-prompt-reports-detail {
  margin: 4px 0 0;
  color: var(--fg-muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.app .admin-prompt-reports-time { color: var(--fg-muted); font-size: 13px; white-space: nowrap; }
.app .admin-prompt-reports-actions { white-space: nowrap; text-align: right; }

.app .admin-prompt-reports-reason {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}
.app .admin-prompt-reports-reason.is-severe {
  background: color-mix(in srgb, var(--danger) 15%, var(--surface-2));
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.app .admin-prompt-reports-reason.is-warning {
  background: color-mix(in srgb, var(--warning) 15%, var(--surface-2));
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}
.app .admin-prompt-reports-reason.is-muted {
  background: var(--surface-3);
  color: var(--fg-muted);
}

.app .admin-prompt-reports-pill .dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.app .admin-prompt-reports-pill.is-pending   { color: var(--warning); }
.app .admin-prompt-reports-pill.is-pending   .dot { background: var(--warning); }
.app .admin-prompt-reports-pill.is-resolved  { color: var(--success); }
.app .admin-prompt-reports-pill.is-resolved  .dot { background: var(--success); }
.app .admin-prompt-reports-pill.is-dismissed { color: var(--fg-muted); }
.app .admin-prompt-reports-pill.is-dismissed .dot { background: var(--fg-muted); }

.app .admin-prompt-reports-pagination {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.app .admin-prompt-reports-pagination .pagy.nav { display: flex; gap: 4px; }
.app .admin-prompt-reports-pagination .pagy.nav a,
.app .admin-prompt-reports-pagination .pagy.nav .page.current,
.app .admin-prompt-reports-pagination .pagy.nav .gap {
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--fg-muted);
  font-size: 13px;
  text-decoration: none;
  min-width: 32px;
  text-align: center;
}
.app .admin-prompt-reports-pagination .pagy.nav a:hover {
  background: var(--surface-3);
  color: var(--fg);
}
.app .admin-prompt-reports-pagination .pagy.nav .page.current {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.app .admin-prompt-reports-empty {
  text-align: center;
  padding: 40px 24px;
}
.app .admin-prompt-reports-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--success);
  margin: 0 auto 12px;
  display: block;
}
.app .admin-prompt-reports-empty h3 { margin: 0 0 6px; }
.app .admin-prompt-reports-empty p { color: var(--fg-muted); margin: 0 auto; max-width: 400px; }

/* Show page — match other admin show pages (1240px, centered) for
   consistency. The narrower 960px previously left a lot of dead space
   on wide viewports and read as left-aligned. Scoped via .page so the
   index uses .admin-prompt-reports-detail on a <p> inside a table cell
   without inheriting page-wrapper sizing. */
.app .page.admin-prompt-reports-detail { max-width: 1240px; margin: 0 auto; }
.app .admin-prompt-reports-status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.app .admin-prompt-reports-reviewed-by { color: var(--fg-muted); font-size: 13px; }

.app .admin-prompt-reports-section { padding: 20px 22px; margin-bottom: 16px; }
.app .admin-prompt-reports-section-head { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
.app .admin-prompt-reports-section-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app .admin-prompt-reports-section-head h2 svg.lucide { width: 15px; height: 15px; color: var(--accent); }

.app .admin-prompt-reports-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
}
.app .admin-prompt-reports-meta-grid div { display: flex; flex-direction: column; gap: 4px; }
.app .admin-prompt-reports-meta-grid dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  margin: 0;
}
.app .admin-prompt-reports-meta-grid dd { margin: 0; color: var(--fg); }

.app .admin-prompt-reports-extra-details {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.app .admin-prompt-reports-extra-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  margin-bottom: 6px;
}
.app .admin-prompt-reports-extra-details p {
  margin: 0;
  background: var(--surface-2);
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--fg);
  border: 1px solid var(--border);
}

.app .admin-prompt-reports-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 500;
}
.app .admin-prompt-reports-banner.is-warning {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-2));
  color: var(--warning);
}
.app .admin-prompt-reports-banner.is-removed {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-2));
  color: var(--danger);
}

.app .admin-prompt-reports-prompt-body {
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.app .admin-prompt-reports-vote-meta {
  margin-top: 12px;
  display: flex;
  gap: 14px;
  color: var(--fg-muted);
  font-size: 12.5px;
}
.app .admin-prompt-reports-vote-meta svg.lucide { width: 13px; height: 13px; vertical-align: -2px; }

.app .admin-prompt-reports-actions-section { background: color-mix(in srgb, var(--accent) 5%, var(--surface-1)); }
.app .admin-prompt-reports-action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.app .admin-prompt-reports-action-buttons form { display: inline-flex; }

@media (max-width: 768px) {
  .app .admin-prompt-reports-meta-grid { grid-template-columns: 1fr; }
  .app .admin-prompt-reports-card { overflow-x: auto; }
}

/* ----- Certificate templates ----- */
.app .admin-cert-templates-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-1));
  color: var(--fg);
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
}
.app .admin-cert-templates-banner svg.lucide { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

.app .admin-cert-templates-grid { gap: 16px; }
.app .admin-cert-templates-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app .admin-cert-templates-card:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.app .admin-cert-templates-thumb {
  position: relative;
  aspect-ratio: 11 / 8.5;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.app .admin-cert-templates-thumb-img { width: 100%; height: 100%; object-fit: contain; }
/* Index card preview canvas — fills the thumb box; the controller sizes
   the bitmap to devicePixelRatio internally. Stacked above the
   placeholder via z-index so it covers the ribbon icon when present. */
.app .admin-cert-templates-thumb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.app .admin-cert-templates-thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--fg-subtle);
}
.app .admin-cert-templates-thumb-placeholder svg.lucide { width: 64px; height: 64px; }

.app .admin-cert-templates-default-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: var(--success);
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .admin-cert-templates-default-pill.is-inline {
  position: static;
  margin-left: 8px;
}
.app .admin-cert-templates-default-pill svg.lucide { width: 12px; height: 12px; }

.app .admin-cert-templates-card-body {
  padding: 14px 16px 8px;
  flex: 1;
}
.app .admin-cert-templates-card-name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}
.app .admin-cert-templates-card-name a {
  color: var(--fg);
  text-decoration: none;
}
.app .admin-cert-templates-card-name a:hover { color: var(--accent); }
.app .admin-cert-templates-card-meta { margin: 0; color: var(--fg-muted); font-size: 12.5px; }

.app .admin-cert-templates-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}
.app .admin-cert-templates-time { color: var(--fg-subtle); font-size: 12px; }
.app .admin-cert-templates-card-buttons {
  display: flex;
  gap: 6px;
}
.app .admin-cert-templates-action-form { display: inline-flex; }

.app .admin-cert-templates-empty {
  text-align: center;
  padding: 40px 24px;
}
.app .admin-cert-templates-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--fg-subtle);
  margin: 0 auto 12px;
  display: block;
}
.app .admin-cert-templates-empty h3 { margin: 0 0 6px; }
.app .admin-cert-templates-empty p { color: var(--fg-muted); margin: 0 auto 16px; max-width: 420px; }

/* Show page */
.app .admin-cert-templates-show { max-width: 1280px; }
.app .admin-cert-templates-show-grid { gap: 16px; }
.app .admin-cert-templates-show-actions { display: flex; gap: 8px; }
.app .admin-cert-templates-show-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.app .admin-cert-templates-preview-card {
  padding: 18px;
}
.app .admin-cert-templates-preview-img {
  width: 100%;
  border-radius: 8px;
  display: block;
  background: var(--surface-2);
}
.app .admin-cert-templates-preview-blank {
  aspect-ratio: 11 / 8.5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--fg-muted);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.app .admin-cert-templates-preview-blank svg.lucide { width: 36px; height: 36px; color: var(--fg-subtle); }

.app .admin-cert-templates-show-section { padding: 18px; }
.app .admin-cert-templates-show-section-head { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
.app .admin-cert-templates-show-section-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
}
.app .admin-cert-templates-show-section-head h2 svg.lucide { width: 14px; height: 14px; color: var(--accent); }

.app .admin-cert-templates-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-3);
  border-radius: 999px;
  color: var(--fg-muted);
}

.app .admin-cert-templates-dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.app .admin-cert-templates-dl > div { display: flex; flex-direction: column; gap: 3px; }
.app .admin-cert-templates-dl dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  margin: 0;
}
.app .admin-cert-templates-dl dd { margin: 0; color: var(--fg); }

.app .admin-cert-templates-fields-list,
.app .admin-cert-templates-fields-edit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.app .admin-cert-templates-fields-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 13px;
}
.app .admin-cert-templates-field-type,
.app .admin-cert-templates-fields-edit-item .admin-cert-templates-field-type {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .admin-cert-templates-field-type.is-auto { background: var(--success); }
.app .admin-cert-templates-field-type.is-static { background: var(--accent); }
.app .admin-cert-templates-field-type.is-input { background: var(--warning); color: #1a1a1a; }
.app .admin-cert-templates-field-label { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .admin-cert-templates-field-meta { color: var(--fg-muted); font-size: 11px; }

.app .admin-cert-templates-callout {
  padding: 12px 14px;
  border-radius: 10px;
  display: flex;
  gap: 10px;
}
.app .admin-cert-templates-callout.is-warning {
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
  color: var(--fg);
}
.app .admin-cert-templates-callout.is-warning svg.lucide { color: var(--warning); width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.app .admin-cert-templates-callout strong { display: block; color: var(--warning); font-size: 13px; margin-bottom: 2px; }
.app .admin-cert-templates-callout p { margin: 0; color: var(--fg-muted); font-size: 12.5px; }

/* Edit form */
.app .admin-cert-templates-editor { max-width: 1280px; }
.app .admin-cert-templates-error-summary {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-1));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.app .admin-cert-templates-error-summary-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  margin-bottom: 6px;
}
.app .admin-cert-templates-error-summary-head svg.lucide { width: 16px; height: 16px; }
.app .admin-cert-templates-error-summary ul { margin: 0; padding-left: 22px; color: var(--danger); }

.app .admin-cert-templates-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.app .admin-cert-templates-editor-controls,
.app .admin-cert-templates-editor-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.app .admin-cert-templates-editor-preview { position: sticky; top: 84px; align-self: start; }

.app .admin-cert-templates-section { padding: 24px; }
.app .admin-cert-templates-section-head { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
.app .admin-cert-templates-section-head-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.app .admin-cert-templates-section-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
}
.app .admin-cert-templates-section-head h2 svg.lucide { width: 14px; height: 14px; color: var(--accent); }

.app .admin-cert-templates-field { display: flex; flex-direction: column; gap: 6px; }
/* Direct-child of section only — preserves spacing for stacked single-column
   fields without affecting fields inside a grid wrapper. (No .sections
   wrapper exists for cert templates; the section IS the parent.) */
.app .admin-cert-templates-section > .admin-cert-templates-field + .admin-cert-templates-field { margin-top: 12px; }
.app .admin-cert-templates-label { font-size: 13px; font-weight: 500; color: var(--fg); }
.app .admin-cert-templates-help { margin: 0; color: var(--fg-muted); font-size: 12px; line-height: 1.45; }
.app .admin-cert-templates-help-tip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.app .admin-cert-templates-help-tip svg.lucide { width: 13px; height: 13px; color: var(--accent); }
.app .admin-cert-templates-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.app .admin-cert-templates-toggle {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 12px;
  cursor: pointer;
}
.app .admin-cert-templates-toggle input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.app .admin-cert-templates-toggle-name { font-size: 13.5px; font-weight: 500; color: var(--fg); display: block; }
.app .admin-cert-templates-toggle-help { font-size: 12px; color: var(--fg-muted); }

.app .admin-cert-templates-current-bg { margin-bottom: 10px; }
.app .admin-cert-templates-current-bg-img { height: 96px; border-radius: 8px; border: 1px solid var(--border); }

.app .admin-cert-templates-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 140px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  cursor: pointer;
  padding: 20px;
  transition: border-color 120ms ease, background 120ms ease;
}
.app .admin-cert-templates-upload:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
}
.app .admin-cert-templates-upload-input { display: none; }
.app .admin-cert-templates-upload-placeholder,
.app .admin-cert-templates-upload-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.app .admin-cert-templates-upload-placeholder svg.lucide,
.app .admin-cert-templates-upload-selected svg.lucide {
  width: 28px;
  height: 28px;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.app .admin-cert-templates-upload-selected svg.lucide { color: var(--success); }
.app .admin-cert-templates-upload-primary { margin: 0; font-size: 13.5px; color: var(--fg); }
.app .admin-cert-templates-upload-secondary { margin: 0; font-size: 12px; color: var(--fg-muted); }
.app .admin-cert-templates-upload-filename { margin: 0; font-size: 13.5px; color: var(--fg); word-break: break-all; }

.app .admin-cert-templates-fields-edit-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  border: 1px solid transparent;
}
.app .admin-cert-templates-fields-edit-item:hover { background: var(--surface-3); }
.app .admin-cert-templates-fields-edit-item.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}
.app .admin-cert-templates-field-edit-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px;
  border-radius: 6px;
  color: var(--fg-muted);
  cursor: pointer;
}
.app .admin-cert-templates-field-edit-btn:hover { background: var(--surface-3); color: var(--fg); }
.app .admin-cert-templates-field-edit-btn svg.lucide { width: 14px; height: 14px; }

.app .admin-cert-templates-canvas-section { padding: 24px; }
.app .admin-cert-templates-canvas-frame {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  overflow: auto;
  display: flex;
  justify-content: center;
}
.app .admin-cert-templates-canvas {
  border: 1px solid var(--border);
  background: white;
  cursor: crosshair;
  max-width: 100%;
}
.app .admin-cert-templates-canvas-help { text-align: center; margin-top: 8px; }

.app .admin-cert-templates-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Field editor modal */
.app .admin-cert-templates-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, black 55%, transparent);
  z-index: 100;
  padding: 16px;
}
.app .admin-cert-templates-modal-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
}
.app .admin-cert-templates-modal-title { margin: 0 0 16px; font-size: 18px; }
.app .admin-cert-templates-modal-body { display: flex; flex-direction: column; gap: 12px; }
.app .admin-cert-templates-modal-toggles {
  display: flex;
  gap: 16px;
  align-items: center;
}
.app .admin-cert-templates-modal-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
}
.app .admin-cert-templates-modal-toggles input[type="checkbox"] { accent-color: var(--accent); }
.app .admin-cert-templates-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.app .admin-cert-templates-modal-actions-right { display: flex; gap: 8px; }

@media (max-width: 1024px) {
  .app .admin-cert-templates-editor-grid { grid-template-columns: 1fr; }
  .app .admin-cert-templates-editor-preview { position: static; }
}
@media (max-width: 768px) {
  .app .admin-cert-templates-grid-2 { grid-template-columns: 1fr; }
  .app .admin-cert-templates-show-grid { grid-template-columns: 1fr; }
}

/* ----- Vendor models ----- */
.app .admin-vendor-models-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.app .admin-vendor-models-dropdown { position: relative; }
.app .admin-vendor-models-chev { width: 14px; height: 14px; margin-left: 6px; color: var(--fg-muted); }
.app .admin-vendor-models-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
  min-width: 200px;
  padding: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Required so Tailwind's `.hidden` (toggled by dropdown_controller) wins
   over the `.app` prefixed `display: flex` rule above. Same pattern as
   .admin-assessments-card-menu-list / .admin-vendor-models-card-menu-list. */
.app .admin-vendor-models-dropdown-menu.hidden { display: none; }
.app .admin-vendor-models-dropdown-menu hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.app .admin-vendor-models-dropdown-menu button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--fg);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  width: 100%;
}
.app .admin-vendor-models-dropdown-menu button:hover { background: var(--surface-3); }
.app .admin-vendor-models-dropdown-menu button svg.lucide { width: 14px; height: 14px; color: var(--fg-muted); }

.app .admin-vendor-models-sync-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--fg);
}
.app .admin-vendor-models-sync-banner.bg-blue-600 { background: color-mix(in srgb, var(--accent) 18%, var(--surface-1)); border-color: var(--accent); }
.app .admin-vendor-models-sync-banner.bg-green-600 { background: color-mix(in srgb, var(--success) 16%, var(--surface-1)); border-color: var(--success); color: var(--fg); }
.app .admin-vendor-models-sync-banner.bg-red-600 { background: color-mix(in srgb, var(--danger) 14%, var(--surface-1)); border-color: var(--danger); color: var(--fg); }
/* Required so Tailwind's `.hidden` (toggled by vendor_model_sync_controller)
   wins over the `.app` prefixed `display: flex` rule above. */
.app .admin-vendor-models-sync-banner.hidden { display: none; }
.app .admin-vendor-models-sync-message { display: inline-flex; align-items: center; gap: 8px; }
.app .admin-vendor-models-sync-dismiss {
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.app .admin-vendor-models-sync-dismiss:hover { background: var(--surface-3); color: var(--fg); }

.app .admin-vendor-models-empty {
  text-align: center;
  padding: 40px 24px;
}
.app .admin-vendor-models-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--fg-subtle);
  margin: 0 auto 12px;
  display: block;
}
.app .admin-vendor-models-empty h3 { margin: 0 0 6px; }
.app .admin-vendor-models-empty p { color: var(--fg-muted); margin: 0 auto 16px; max-width: 440px; }

.app .admin-vendor-models-section { margin-bottom: 28px; }
.app .admin-vendor-models-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.app .admin-vendor-models-section-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.app .admin-vendor-models-section-head h2 svg.lucide { width: 14px; height: 14px; color: var(--accent); }
.app .admin-vendor-models-section-count {
  padding: 1px 8px;
  font-size: 11px;
  background: var(--surface-3);
  color: var(--fg-muted);
  border-radius: 999px;
}

/* Card grid — same auto-fill pattern as the user-facing .challenge-grid
   and the new admin-assessments-grid. */
.app .admin-vendor-models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.app .admin-vendor-models-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface-1);
  transition: all 140ms;
  min-height: 160px;
}
.app .admin-vendor-models-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.app .admin-vendor-models-card.is-inactive { opacity: 0.55; }

/* Whole-card link — sits beneath visual content. Same pattern as
   admin-assessments-card. */
.app .admin-vendor-models-card-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
.app .admin-vendor-models-card > *:not(.admin-vendor-models-card-link) {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.app .admin-vendor-models-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.app .admin-vendor-models-card-title { min-width: 0; }
.app .admin-vendor-models-card-title h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .admin-vendor-models-model-id {
  font-size: 12px;
  color: var(--fg-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app .admin-vendor-models-pill .dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.app .admin-vendor-models-pill.is-active { color: var(--success); }
.app .admin-vendor-models-pill.is-active .dot { background: var(--success); }
.app .admin-vendor-models-pill.is-paused { color: var(--fg-muted); }
.app .admin-vendor-models-pill.is-paused .dot { background: var(--fg-muted); }

.app .admin-vendor-models-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.app .admin-vendor-models-cap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid var(--border);
}
.app .admin-vendor-models-cap svg.lucide { width: 12px; height: 12px; }
.app .admin-vendor-models-cap.is-accent {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.app .admin-vendor-models-pricing {
  margin: 0;
  display: flex;
  gap: 16px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.app .admin-vendor-models-pricing > div { display: flex; flex-direction: column; gap: 2px; }
.app .admin-vendor-models-pricing dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  margin: 0;
}
.app .admin-vendor-models-pricing dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.app .admin-vendor-models-pricing dd span { color: var(--fg-muted); font-weight: 400; font-size: 11px; margin-left: 3px; }

/* Filter bar (clientside; admin--vendor-models-filter Stimulus controller) */
.app .admin-vendor-models-list { display: block; }

.app .admin-vendor-models-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.app .admin-vendor-models-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 240px;
  flex: 1;
  max-width: 360px;
}
.app .admin-vendor-models-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.app .admin-vendor-models-search svg.lucide {
  width: 14px;
  height: 14px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.app .admin-vendor-models-search-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  min-width: 0;
}
.app .admin-vendor-models-filter-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Hide cards / sections filtered out by the controller */
.app .admin-vendor-models-card.is-filtered-out,
.app .admin-vendor-models-section.is-filtered-out { display: none; }

/* No-results banner */
.app .admin-vendor-models-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 20px;
  background: var(--surface-1);
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--fg-muted);
  text-align: center;
  margin-bottom: 18px;
}
.app .admin-vendor-models-no-results svg.lucide {
  width: 32px;
  height: 32px;
  color: var(--fg-subtle);
}
.app .admin-vendor-models-no-results p { margin: 0; font-size: 14px; }

/* Footer: status pill on the left, 3-dot menu pushed right. Mirrors
   the admin-assessments-card-foot pattern. */
.app .admin-vendor-models-card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 11.5px;
  color: var(--fg-subtle);
}

/* 3-dot menu — same as assessments: opens upward to avoid clipping. */
.app .admin-vendor-models-card-menu {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}
/* Re-enable pointer-events on the menu (which lives inside the footer,
   a direct child that's pointer-events:none from the catch-all above).
   Specificity (0,0,4,0) beats the catch-all's (0,0,3,0). */
.app .admin-vendor-models-card .admin-vendor-models-card-foot .admin-vendor-models-card-menu,
.app .admin-vendor-models-card .admin-vendor-models-card-foot .admin-vendor-models-card-menu * {
  pointer-events: auto;
}
.app .admin-vendor-models-card-menu-trigger {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--fg-muted);
  cursor: pointer;
}
.app .admin-vendor-models-card-menu-trigger:hover {
  background: var(--surface-3);
  color: var(--fg);
  border-color: var(--border);
}
.app .admin-vendor-models-card-menu-trigger svg.lucide { width: 14px; height: 14px; }

.app .admin-vendor-models-card-menu-list {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  min-width: 160px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 2;
}
/* Required so Tailwind's `.hidden` (toggled by dropdown_controller) wins
   over the `.app` prefixed `display: flex` rule above. */
.app .admin-vendor-models-card-menu-list.hidden { display: none; }

.app .admin-vendor-models-card-menu-form { display: block; margin: 0; }
.app .admin-vendor-models-card-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.app .admin-vendor-models-card-menu-item:hover { background: var(--surface-3); }
.app .admin-vendor-models-card-menu-item.is-danger:hover {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-3));
  color: var(--danger);
}
.app .admin-vendor-models-card-menu-item svg.lucide {
  width: 14px;
  height: 14px;
  color: var(--fg-muted);
}

/* Editor */
.app .admin-vendor-models-editor { max-width: 1240px; }
.app .admin-vendor-models-error-summary {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-1));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.app .admin-vendor-models-error-summary-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  margin-bottom: 6px;
}
.app .admin-vendor-models-error-summary-head svg.lucide { width: 16px; height: 16px; }
.app .admin-vendor-models-error-summary ul { margin: 0; padding-left: 22px; color: var(--danger); }
.app .admin-vendor-models-error-summary a { color: var(--danger); text-decoration: underline; }

/* Form is the TOC | body grid (no shell wrapper). Explicit grid-column on
   every direct child so error-summary appearing/disappearing can't shuffle
   children into wrong cells via auto-placement. */
.app .admin-vendor-models-form {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.app .admin-vendor-models-form > .admin-vendor-models-toc { grid-column: 1; }
.app .admin-vendor-models-form > .admin-vendor-models-sections { grid-column: 2; }
.app .admin-vendor-models-form > .admin-vendor-models-error-summary { grid-column: 2; }
.app .admin-vendor-models-form > .admin-vendor-models-actions { grid-column: 2; }

.app .admin-vendor-models-toc {
  position: sticky;
  top: 84px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.app .admin-vendor-models-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 13px;
}
.app .admin-vendor-models-toc a:hover { background: var(--surface-3); color: var(--fg); }

.app .admin-vendor-models-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
/* Scoped to form sections only — the bare .admin-vendor-models-section
   selector is reused by the vendor_models index page for vendor groupings,
   so we MUST scope under .admin-vendor-models-sections > to avoid leaking
   form styling onto the index. Explicit margin: 0 resets the
   .admin-vendor-models-section { margin-bottom: 28px } rule used on the
   index — the parent flex `gap: 32px` handles section spacing here. */
.app .admin-vendor-models-sections > .admin-vendor-models-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin: 0;
  scroll-margin-top: 80px;
}
.app .admin-vendor-models-sections > .admin-vendor-models-section header {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.app .admin-vendor-models-sections > .admin-vendor-models-section header h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0;
}
.app .admin-vendor-models-sections > .admin-vendor-models-section header h2 svg.lucide { width: 18px; height: 18px; color: var(--accent); }
.app .admin-vendor-models-sections > .admin-vendor-models-section header p { margin: 0; color: var(--fg-muted); font-size: 13px; }

.app .admin-vendor-models-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
.app .admin-vendor-models-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
}

.app .admin-vendor-models-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Direct-child of section only — preserves spacing for stacked single-column
   fields (Notes / etc.) without affecting fields inside a grid wrapper. */
.app .admin-vendor-models-sections > .admin-vendor-models-section > .admin-vendor-models-field + .admin-vendor-models-field { margin-top: 12px; }
.app .admin-vendor-models-label { font-size: 13px; font-weight: 500; color: var(--fg); }
.app .admin-vendor-models-help { margin: 0; color: var(--fg-muted); font-size: 12px; line-height: 1.45; }
.app .admin-vendor-models-input.is-just-filled {
  background: color-mix(in srgb, var(--success) 18%, var(--surface-2));
  transition: background-color 0.4s ease;
}

.app .admin-vendor-models-toggles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app .admin-vendor-models-toggle {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.app .admin-vendor-models-toggle:hover { background: var(--surface-3); }
.app .admin-vendor-models-toggle input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; margin-top: 2px; }
.app .admin-vendor-models-toggle-body { display: flex; flex-direction: column; gap: 3px; }
.app .admin-vendor-models-toggle-name { font-size: 13.5px; font-weight: 500; color: var(--fg); }
.app .admin-vendor-models-toggle-help { font-size: 12px; color: var(--fg-muted); line-height: 1.45; }

.app .admin-vendor-models-info-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 10px;
  margin-top: 12px;
  color: var(--fg);
  font-size: 12.5px;
}
.app .admin-vendor-models-info-banner svg.lucide { color: var(--accent); width: 14px; height: 14px; }

.app .admin-vendor-models-pricing-source,
.app .admin-vendor-models-pricing-synced {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.app .admin-vendor-models-pricing-source.is-litellm {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
}
.app .admin-vendor-models-pricing-source.is-manual {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-2));
  color: var(--warning);
}
.app .admin-vendor-models-pricing-synced { background: var(--surface-3); color: var(--fg-muted); }
.app .admin-vendor-models-pricing-synced svg.lucide { width: 11px; height: 11px; vertical-align: -1px; }

/* Form action bar — placement on form grid handled by .admin-vendor-models-form > rule */
.app .admin-vendor-models-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Model autocomplete dropdown */
.app .admin-vendor-models-field-with-dropdown { position: relative; }
.app .admin-vendor-models-form-dropdown {
  position: absolute;
  top: calc(100% - 16px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  z-index: 30;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.app .admin-vendor-models-form-dropdown-option {
  background: transparent;
  border: 1px solid transparent;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.app .admin-vendor-models-form-dropdown-option:hover,
.app .admin-vendor-models-form-dropdown-option.is-highlighted {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  color: var(--fg);
}

@media (max-width: 900px) {
  .app .admin-vendor-models-form { grid-template-columns: 1fr; gap: 16px; }
  .app .admin-vendor-models-form > .admin-vendor-models-toc,
  .app .admin-vendor-models-form > .admin-vendor-models-sections,
  .app .admin-vendor-models-form > .admin-vendor-models-error-summary,
  .app .admin-vendor-models-form > .admin-vendor-models-actions { grid-column: 1; }
  .app .admin-vendor-models-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }
  .app .admin-vendor-models-toc a { white-space: nowrap; }
  .app .admin-vendor-models-grid-2,
  .app .admin-vendor-models-grid-3 { grid-template-columns: 1fr; }
}

/* ----- Parser configs ----- */
.app .admin-parser-configs-card { padding: 0; overflow-x: auto; }
.app .admin-parser-configs-table { width: 100%; border-collapse: collapse; }
.app .admin-parser-configs-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.app .admin-parser-configs-table thead th.admin-parser-configs-actions-col { width: 96px; }
.app .admin-parser-configs-row { border-bottom: 1px solid var(--border); }
.app .admin-parser-configs-row:last-child { border-bottom: none; }
.app .admin-parser-configs-row:hover { background: var(--surface-2); }
.app .admin-parser-configs-row td { padding: 12px 16px; vertical-align: middle; }
.app .admin-parser-configs-name { font-weight: 500; color: var(--fg); white-space: nowrap; }
.app .admin-parser-configs-pattern code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--fg-muted);
  word-break: break-all;
}
.app .admin-parser-configs-type {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.app .admin-parser-configs-type.is-builtin {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.app .admin-parser-configs-type.is-global {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-2));
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}
.app .admin-parser-configs-type.is-project {
  background: color-mix(in srgb, var(--success) 14%, var(--surface-2));
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}
.app .admin-parser-configs-pill .dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.app .admin-parser-configs-pill.is-active { color: var(--success); }
.app .admin-parser-configs-pill.is-active .dot { background: var(--success); }
.app .admin-parser-configs-pill.is-paused { color: var(--fg-muted); }
.app .admin-parser-configs-pill.is-paused .dot { background: var(--fg-muted); }

.app .admin-parser-configs-actions { white-space: nowrap; text-align: right; display: flex; gap: 6px; justify-content: flex-end; }
.app .admin-parser-configs-action-form { display: inline-flex; }
.app .admin-parser-configs-readonly { color: var(--fg-subtle); font-style: italic; font-size: 12.5px; }

.app .admin-parser-configs-empty {
  text-align: center;
  padding: 40px 24px;
}
.app .admin-parser-configs-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--fg-subtle);
  margin: 0 auto 12px;
  display: block;
}
.app .admin-parser-configs-empty h3 { margin: 0 0 6px; }
.app .admin-parser-configs-empty p { color: var(--fg-muted); margin: 0 auto 16px; max-width: 460px; }

/* Form */
.app .admin-parser-configs-editor { max-width: 1080px; }
.app .admin-parser-configs-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
  align-items: start;
}
.app .admin-parser-configs-card-form { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.app .admin-parser-configs-card-selectors { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.app .admin-parser-configs-selectors-head { padding: 0; }
.app .admin-parser-configs-selectors-head h2 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app .admin-parser-configs-selectors-head h2 svg.lucide { width: 15px; height: 15px; color: var(--accent); }
.app .admin-parser-configs-selectors-head p { margin: 0; color: var(--fg-muted); font-size: 12.5px; }

.app .admin-parser-configs-field { display: flex; flex-direction: column; gap: 6px; }
.app .admin-parser-configs-label { font-size: 13px; font-weight: 500; color: var(--fg); }
.app .admin-parser-configs-help { margin: 0; color: var(--fg-muted); font-size: 12px; line-height: 1.45; }
.app .admin-parser-configs-help code {
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
}

.app .admin-parser-configs-toggle {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.app .admin-parser-configs-toggle input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; margin-top: 2px; }
.app .admin-parser-configs-toggle-name { font-size: 13.5px; font-weight: 500; color: var(--fg); display: block; }
.app .admin-parser-configs-toggle-help { font-size: 12px; color: var(--fg-muted); }

.app .admin-parser-configs-reference {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.app .admin-parser-configs-reference summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.app .admin-parser-configs-reference summary::-webkit-details-marker { display: none; }
.app .admin-parser-configs-reference summary svg.lucide { width: 14px; height: 14px; color: var(--accent); }
.app .admin-parser-configs-reference[open] summary { border-bottom: 1px solid var(--border); }
.app .admin-parser-configs-reference ul {
  margin: 0;
  padding: 12px 18px 12px 32px;
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.6;
}
.app .admin-parser-configs-reference ul li strong { color: var(--fg); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 500; }

.app .admin-parser-configs-examples h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.app .admin-parser-configs-example {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
}
.app .admin-parser-configs-example summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--accent);
}
.app .admin-parser-configs-example pre {
  margin: 0;
  padding: 10px 14px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--fg-muted);
  overflow-x: auto;
  border-top: 1px solid var(--border);
}

.app .admin-parser-configs-error-summary {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-1));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.app .admin-parser-configs-error-summary-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  margin-bottom: 6px;
}
.app .admin-parser-configs-error-summary-head svg.lucide { width: 16px; height: 16px; }
.app .admin-parser-configs-error-summary ul { margin: 0; padding-left: 22px; color: var(--danger); }
.app .admin-parser-configs-error-summary a { color: var(--danger); text-decoration: underline; }

/* Form-level Cancel/Submit row. Scoped to .admin-parser-configs-form so
   it does not collide with the table cell that shares the same class
   (.admin-parser-configs-actions on <td>) — the unscoped rule's
   border-top/padding-top was leaking onto the index table actions cell. */
.app .admin-parser-configs-form .admin-parser-configs-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

@media (max-width: 1024px) {
  .app .admin-parser-configs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .app .admin-parser-configs-table thead { display: none; }
  .app .admin-parser-configs-row,
  .app .admin-parser-configs-row td { display: block; padding: 8px 14px; }
  .app .admin-parser-configs-row { padding: 12px 0; }
  .app .admin-parser-configs-actions { justify-content: flex-start; padding-bottom: 12px; }
}

/* ----- Benchmark models ----- */
.app .admin-benchmark-models-card { padding: 0; overflow-x: auto; }
.app .admin-benchmark-models-table { width: 100%; border-collapse: collapse; }
.app .admin-benchmark-models-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.app .admin-benchmark-models-table thead th.admin-benchmark-models-num,
.app .admin-benchmark-models-table tbody td.admin-benchmark-models-num { text-align: center; }
.app .admin-benchmark-models-table thead th.admin-benchmark-models-actions-col { width: 130px; }
.app .admin-benchmark-models-row { border-bottom: 1px solid var(--border); }
.app .admin-benchmark-models-row:last-child { border-bottom: none; }
.app .admin-benchmark-models-row:hover { background: var(--surface-2); }
.app .admin-benchmark-models-row td { padding: 12px 16px; vertical-align: middle; }
.app .admin-benchmark-models-id-link { text-decoration: none; }
.app .admin-benchmark-models-id-link code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12.5px;
}
.app .admin-benchmark-models-id-link:hover code { background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); }
.app .admin-benchmark-models-vendor { color: var(--fg); font-weight: 500; }
.app .admin-benchmark-models-name-link { color: var(--fg-muted); text-decoration: none; }
.app .admin-benchmark-models-name-link:hover { color: var(--fg); }
.app .admin-benchmark-models-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
}
.app .admin-benchmark-models-type.is-oss {
  background: color-mix(in srgb, var(--success) 14%, var(--surface-2));
  color: var(--success);
}
.app .admin-benchmark-models-type.is-proprietary {
  background: var(--surface-3);
  color: var(--fg-muted);
}
.app .admin-benchmark-models-type svg.lucide { width: 12px; height: 12px; }
.app .admin-benchmark-models-actions {
  white-space: nowrap;
  text-align: right;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.app .admin-benchmark-models-action-form { display: inline-flex; }
.app .admin-benchmark-models-disabled-action {
  cursor: not-allowed;
  opacity: 0.5;
}

.app .admin-benchmark-models-empty {
  text-align: center;
  padding: 40px 24px;
}
.app .admin-benchmark-models-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--fg-subtle);
  margin: 0 auto 12px;
  display: block;
}
.app .admin-benchmark-models-empty h3 { margin: 0 0 6px; }
.app .admin-benchmark-models-empty p { color: var(--fg-muted); margin: 0 auto 16px; max-width: 420px; }

/* Show page */
.app .admin-benchmark-models-show { max-width: 1240px; }
.app .admin-benchmark-models-show-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.app .admin-benchmark-models-cost-card {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
  border-radius: 14px;
  margin-bottom: 18px;
}
.app .admin-benchmark-models-cost-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--warning) 22%, var(--surface-2));
  color: var(--warning);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app .admin-benchmark-models-cost-icon svg.lucide { width: 22px; height: 22px; }
.app .admin-benchmark-models-cost-body { flex: 1; }
.app .admin-benchmark-models-cost-body h3 { margin: 0 0 12px; font-size: 15px; color: var(--fg); }
.app .admin-benchmark-models-cost-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10.5px;
  background: var(--surface-3);
  color: var(--warning);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.app .admin-benchmark-models-cost-grid {
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.app .admin-benchmark-models-cost-grid div { display: flex; flex-direction: column; gap: 2px; }
.app .admin-benchmark-models-cost-grid dt { font-size: 12px; color: var(--fg-muted); margin: 0; }
.app .admin-benchmark-models-cost-grid dd { margin: 0; color: var(--fg); font-size: 14px; font-weight: 600; }
.app .admin-benchmark-models-cost-usd { font-size: 22px !important; color: var(--warning) !important; }
.app .admin-benchmark-models-cost-meta { margin: 0; color: var(--fg-muted); font-size: 11.5px; }
.app .admin-benchmark-models-cost-meta span { color: var(--warning); }

.app .admin-benchmark-models-overview { gap: 14px; margin-bottom: 18px; }
.app .admin-benchmark-models-stat-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app .admin-benchmark-models-stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}
.app .admin-benchmark-models-stat-value { font-size: 18px; font-weight: 600; color: var(--fg); }

.app .admin-benchmark-models-description {
  padding: 18px 20px;
  margin-bottom: 18px;
}
.app .admin-benchmark-models-description h2 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app .admin-benchmark-models-description h2 svg.lucide { width: 14px; height: 14px; color: var(--accent); }
.app .admin-benchmark-models-description p { margin: 0; color: var(--fg); }

.app .admin-benchmark-models-submissions { padding: 0; overflow: hidden; }
.app .admin-benchmark-models-submissions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.app .admin-benchmark-models-submissions-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app .admin-benchmark-models-submissions-head h2 svg.lucide { width: 14px; height: 14px; color: var(--accent); }
.app .admin-benchmark-models-submissions-count {
  background: var(--surface-3);
  color: var(--fg-muted);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
}

.app .admin-benchmark-models-submissions-table-wrap { overflow-x: auto; }
.app .admin-benchmark-models-submissions-table { width: 100%; border-collapse: collapse; }
.app .admin-benchmark-models-submissions-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  padding: 10px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.app .admin-benchmark-models-submissions-table tbody tr { border-bottom: 1px solid var(--border); }
.app .admin-benchmark-models-submissions-table tbody tr:last-child { border-bottom: none; }
.app .admin-benchmark-models-submissions-table tbody td { padding: 12px 16px; vertical-align: middle; font-size: 13px; }

.app .admin-benchmark-models-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
}
.app .admin-benchmark-models-source.is-auto { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: var(--accent); }
.app .admin-benchmark-models-source.is-upload { background: color-mix(in srgb, var(--success) 14%, var(--surface-2)); color: var(--success); }
.app .admin-benchmark-models-source svg.lucide { width: 12px; height: 12px; }

.app .admin-benchmark-models-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
}
.app .admin-benchmark-models-status.is-success { background: color-mix(in srgb, var(--success) 14%, var(--surface-2)); color: var(--success); }
.app .admin-benchmark-models-status.is-running { background: color-mix(in srgb, var(--warning) 14%, var(--surface-2)); color: var(--warning); }
.app .admin-benchmark-models-status.is-failed { background: color-mix(in srgb, var(--danger) 14%, var(--surface-2)); color: var(--danger); }
.app .admin-benchmark-models-status.is-muted { background: var(--surface-3); color: var(--fg-muted); }
.app .admin-benchmark-models-status svg.lucide { width: 12px; height: 12px; }

.app .admin-benchmark-models-progress-cell { text-align: center; min-width: 100px; }
.app .admin-benchmark-models-progress {
  width: 100px;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  margin: 0 auto;
  overflow: hidden;
}
.app .admin-benchmark-models-progress-bar { background: var(--accent); height: 100%; }
.app .admin-benchmark-models-progress-pct { display: block; font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
.app .admin-benchmark-models-progress-text { color: var(--fg-muted); font-size: 12px; }

.app .admin-benchmark-models-score {
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}

.app .admin-benchmark-models-row-actions { text-align: right; }

.app .admin-benchmark-models-no-submissions {
  text-align: center;
  padding: 40px 24px;
  color: var(--fg-muted);
}
.app .admin-benchmark-models-no-submissions svg.lucide { width: 36px; height: 36px; color: var(--fg-subtle); margin-bottom: 10px; }
.app .admin-benchmark-models-no-submissions h3 { margin: 0 0 6px; color: var(--fg); }
.app .admin-benchmark-models-no-submissions p { margin: 0 0 16px; }

/* Editor */
.app .admin-benchmark-models-editor { max-width: 880px; }
.app .admin-benchmark-models-error-summary {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-1));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.app .admin-benchmark-models-error-summary-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  margin-bottom: 6px;
}
.app .admin-benchmark-models-error-summary-head svg.lucide { width: 16px; height: 16px; }
.app .admin-benchmark-models-error-summary ul { margin: 0; padding-left: 22px; color: var(--danger); }

.app .admin-benchmark-models-form-card { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.app .admin-benchmark-models-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.app .admin-benchmark-models-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.app .admin-benchmark-models-field-with-dropdown { position: relative; }
.app .admin-benchmark-models-label { font-size: 13px; font-weight: 500; color: var(--fg); }
.app .admin-benchmark-models-input {
  width: 100%;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.app .admin-benchmark-models-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.app .admin-benchmark-models-help { margin: 0; color: var(--fg-muted); font-size: 12px; line-height: 1.45; }

.app .admin-benchmark-models-toggle {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  margin-top: 22px;
}
.app .admin-benchmark-models-toggle input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.app .admin-benchmark-models-toggle-name { font-size: 13.5px; font-weight: 500; color: var(--fg); display: block; }
.app .admin-benchmark-models-toggle-help { font-size: 12px; color: var(--fg-muted); }

.app .admin-benchmark-models-id-preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.app .admin-benchmark-models-id-preview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.app .admin-benchmark-models-id-preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--accent);
  font-size: 15px;
  word-break: break-all;
}

.app .admin-benchmark-models-form-dropdown {
  position: absolute;
  top: calc(100% - 16px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  z-index: 30;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.app .admin-benchmark-models-form-dropdown-option {
  background: transparent;
  border: 1px solid transparent;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.app .admin-benchmark-models-form-dropdown-option:hover,
.app .admin-benchmark-models-form-dropdown-option.is-highlighted {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-3));
}

/* Form-level Cancel/Submit row. Scoped to .admin-benchmark-models-form
   so it does not collide with the table cell that shares the same class
   (.admin-benchmark-models-actions on <td>) — the unscoped rule's
   border-top/padding-top was leaking onto the index table actions cell. */
.app .admin-benchmark-models-form .admin-benchmark-models-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

@media (max-width: 1024px) {
  .app .admin-benchmark-models-cost-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .app .admin-benchmark-models-grid-2 { grid-template-columns: 1fr; }
  .app .admin-benchmark-models-cost-grid { grid-template-columns: 1fr; }
  .app .admin-benchmark-models-table thead { display: none; }
  .app .admin-benchmark-models-row,
  .app .admin-benchmark-models-row td { display: block; padding: 8px 14px; }
  .app .admin-benchmark-models-row { padding: 12px 0; }
  .app .admin-benchmark-models-actions { justify-content: flex-start; padding-bottom: 12px; }
}

/* ----- Benchmarks (registry) ----- */
.app .admin-benchmarks-card { padding: 0; overflow-x: auto; }
.app .admin-benchmarks-table { width: 100%; border-collapse: collapse; }
.app .admin-benchmarks-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.app .admin-benchmarks-table thead th.admin-benchmarks-num,
.app .admin-benchmarks-table tbody td.admin-benchmarks-num { text-align: center; }
.app .admin-benchmarks-row { border-bottom: 1px solid var(--border); }
.app .admin-benchmarks-row:last-child { border-bottom: none; }
.app .admin-benchmarks-row:hover { background: var(--surface-2); }
.app .admin-benchmarks-row td { padding: 12px 16px; vertical-align: middle; }

.app .admin-benchmarks-name-cell { display: flex; align-items: center; gap: 12px; }
.app .admin-benchmarks-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app .admin-benchmarks-icon svg.lucide { width: 18px; height: 18px; }
.app .admin-benchmarks-name { color: var(--fg); font-weight: 600; }
.app .admin-benchmarks-slug {
  display: block;
  color: var(--fg-muted);
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.app .admin-benchmarks-category {
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 500;
}

.app .admin-benchmarks-pill .dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.app .admin-benchmarks-pill.is-active { color: var(--success); }
.app .admin-benchmarks-pill.is-active .dot { background: var(--success); }
.app .admin-benchmarks-pill.is-paused { color: var(--fg-muted); }
.app .admin-benchmarks-pill.is-paused .dot { background: var(--fg-muted); }

.app .admin-benchmarks-public-toggle.is-public {
  background: color-mix(in srgb, var(--success) 14%, var(--surface-1));
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 28%, var(--border));
}
.app .admin-benchmarks-public-toggle.is-private {
  background: var(--surface-2);
  color: var(--fg-muted);
}

.app .admin-benchmarks-actions { white-space: nowrap; text-align: right; }
.app .admin-benchmarks-action-form { display: inline-flex; }

.app .admin-benchmarks-empty { text-align: center; padding: 40px 24px; }
.app .admin-benchmarks-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--fg-subtle);
  margin: 0 auto 12px;
  display: block;
}
.app .admin-benchmarks-empty h3 { margin: 0 0 6px; }
.app .admin-benchmarks-empty p { color: var(--fg-muted); margin: 0 auto; max-width: 420px; }

/* Show */
.app .admin-benchmarks-show { max-width: 1240px; }
.app .admin-benchmarks-show-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.app .admin-benchmarks-stat-grid { gap: 14px; margin-bottom: 18px; }
.app .admin-benchmarks-stat {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app .admin-benchmarks-stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}
.app .admin-benchmarks-stat-value { font-size: 18px; font-weight: 600; color: var(--fg); }
.app .admin-benchmarks-stat-value.is-success { color: var(--success); }
.app .admin-benchmarks-stat-value.is-muted { color: var(--fg-muted); }
.app .admin-benchmarks-stat-value code { font-size: 17px; color: var(--accent); }

.app .admin-benchmarks-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  margin-bottom: 18px;
}
.app .admin-benchmarks-banner.is-public {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border));
}
.app .admin-benchmarks-banner.is-private {
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
}
.app .admin-benchmarks-banner svg.lucide { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.app .admin-benchmarks-banner.is-public svg.lucide { color: var(--success); }
.app .admin-benchmarks-banner.is-private svg.lucide { color: var(--warning); }
.app .admin-benchmarks-banner strong { display: block; margin-bottom: 2px; color: var(--fg); }
.app .admin-benchmarks-banner.is-public strong { color: var(--success); }
.app .admin-benchmarks-banner.is-private strong { color: var(--warning); }
.app .admin-benchmarks-banner p { margin: 0; color: var(--fg-muted); font-size: 13px; }

.app .admin-benchmarks-section { padding: 0; overflow: hidden; margin-bottom: 18px; }
.app .admin-benchmarks-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.app .admin-benchmarks-section-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app .admin-benchmarks-section-head h2 svg.lucide { width: 14px; height: 14px; color: var(--accent); }
.app .admin-benchmarks-link-action {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app .admin-benchmarks-link-action:hover { text-decoration: underline; }
.app .admin-benchmarks-link-action svg.lucide { width: 12px; height: 12px; }

.app .admin-benchmarks-versions { list-style: none; margin: 0; padding: 0; }
.app .admin-benchmarks-version {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.app .admin-benchmarks-version:last-child { border-bottom: none; }
.app .admin-benchmarks-version-meta { display: inline-flex; align-items: center; gap: 12px; }
.app .admin-benchmarks-version-meta code {
  color: var(--accent);
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.app .admin-benchmarks-version-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.app .admin-benchmarks-version-status.is-published { background: color-mix(in srgb, var(--success) 14%, var(--surface-2)); color: var(--success); }
.app .admin-benchmarks-version-status.is-draft { background: var(--surface-3); color: var(--fg-muted); }
.app .admin-benchmarks-version-tests { color: var(--fg-muted); font-size: 12.5px; }

.app .admin-benchmarks-submissions { list-style: none; margin: 0; padding: 0; }
.app .admin-benchmarks-submission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.app .admin-benchmarks-submission:last-child { border-bottom: none; }
.app .admin-benchmarks-submission:hover { background: var(--surface-2); }
.app .admin-benchmarks-submission-meta { display: flex; align-items: center; gap: 12px; }
.app .admin-benchmarks-submission-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app .admin-benchmarks-submission-icon svg.lucide { width: 16px; height: 16px; }
.app .admin-benchmarks-submission-name { color: var(--fg); font-weight: 500; }
.app .admin-benchmarks-submission-by { color: var(--fg-muted); font-size: 12px; }
.app .admin-benchmarks-submission-right { display: flex; align-items: center; gap: 14px; }

.app .admin-benchmarks-score {
  font-size: 16px;
  font-weight: 700;
}
.app .admin-benchmarks-score.is-good { color: var(--success); }
.app .admin-benchmarks-score.is-mid { color: var(--warning); }
.app .admin-benchmarks-score.is-low { color: var(--danger); }

.app .admin-benchmarks-submission-status {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
}
.app .admin-benchmarks-submission-status.is-success { background: color-mix(in srgb, var(--success) 14%, var(--surface-2)); color: var(--success); }
.app .admin-benchmarks-submission-status.is-failed { background: color-mix(in srgb, var(--danger) 14%, var(--surface-2)); color: var(--danger); }
.app .admin-benchmarks-submission-status.is-running { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: var(--accent); }

.app .admin-benchmarks-submission-link {
  color: var(--fg-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.app .admin-benchmarks-submission-link:hover { color: var(--fg); }
.app .admin-benchmarks-submission-link svg.lucide { width: 14px; height: 14px; }

.app .admin-benchmarks-no-submissions {
  text-align: center;
  padding: 36px 24px;
  color: var(--fg-muted);
}
.app .admin-benchmarks-no-submissions svg.lucide { width: 32px; height: 32px; color: var(--fg-subtle); margin-bottom: 10px; }
.app .admin-benchmarks-no-submissions p { margin: 0; }

@media (max-width: 768px) {
  .app .admin-benchmarks-table thead { display: none; }
  .app .admin-benchmarks-row,
  .app .admin-benchmarks-row td { display: block; padding: 8px 14px; }
  .app .admin-benchmarks-row { padding: 12px 0; }
  .app .admin-benchmarks-actions { justify-content: flex-start; padding-bottom: 12px; }
}

/* === Worker 3 (admin course) — append below this line === */

/* ---------- Status pill state modifiers (course namespace) ---------- */
.app .status-pill.admin-course-status.is-draft {
  background: var(--warning-soft);
  color: var(--warning);
}
.app .status-pill.admin-course-status.is-draft .dot { background: var(--warning); }
.app .status-pill.admin-course-status.is-active {
  background: var(--success-soft);
  color: var(--success);
}
.app .status-pill.admin-course-status.is-active .dot { background: var(--success); }
.app .status-pill.admin-course-status.is-archived {
  background: var(--surface-3);
  color: var(--fg-muted);
}
.app .status-pill.admin-course-status.is-archived .dot { background: var(--fg-muted); }
.app .status-pill.admin-course-status.is-deleted {
  background: var(--danger-soft);
  color: var(--danger);
}
.app .status-pill.admin-course-status.is-deleted .dot { background: var(--danger); }

/* ---------- Filter row count chip ---------- */
.app .admin-course-filter-row .chip { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Course index — card grid ---------- */
.app .admin-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1024px) {
  .app .admin-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .app .admin-course-grid { grid-template-columns: 1fr; }
}

.app .admin-course-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.12s ease, transform 0.12s ease;
  text-decoration: none;
  color: inherit;
}
.app .admin-course-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.app .admin-course-card.is-deleted { opacity: 0.55; }

.app .admin-course-card-cover {
  aspect-ratio: 4 / 1;
  background: var(--surface-3);
  position: relative;
  overflow: hidden;
}
.app .admin-course-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.app .admin-course-card-cover .admin-course-card-cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-subtle);
}

.app .admin-course-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.app .admin-course-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  line-height: 1.3;
}
.app .admin-course-card-byline {
  font-size: 12px;
  color: var(--fg-subtle);
  margin: 0;
}
.app .admin-course-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.app .admin-course-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.app .admin-course-card-meta-item .i {
  width: 14px;
  height: 14px;
}

/* ---------- Course form — sectioned subheadings ---------- */
.app .admin-course-form { display: flex; flex-direction: column; gap: 24px; }
.app .admin-course-form-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.app .admin-course-form-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.app .admin-course-form-subhead {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}
.app .admin-course-form-field { display: flex; flex-direction: column; gap: 6px; }
.app .admin-course-form-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}
.app .admin-course-form-field input[type="text"],
.app .admin-course-form-field input[type="number"],
.app .admin-course-form-field textarea,
.app .admin-course-form-field select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--fg);
  font: inherit;
  width: 100%;
}
.app .admin-course-form-field input[type="text"]:focus,
.app .admin-course-form-field input[type="number"]:focus,
.app .admin-course-form-field textarea:focus,
.app .admin-course-form-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.app .admin-course-form-field-help {
  font-size: 12px;
  color: var(--fg-subtle);
}
.app .admin-course-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .app .admin-course-form-row { grid-template-columns: 1fr; }
}
.app .admin-course-form-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.app .admin-course-form-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}
.app .admin-course-form-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app .admin-course-form-toggle-label strong {
  font-size: 14px;
  color: var(--fg);
}
.app .admin-course-form-toggle-label span {
  font-size: 12px;
  color: var(--fg-subtle);
}
.app .admin-course-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}
.app .admin-course-form-errors {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--danger);
}
.app .admin-course-form-errors h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.app .admin-course-form-errors ul { margin: 0; padding-left: 18px; font-size: 13px; }

/* ---------- Course form — cover image upload ---------- */
.app .admin-course-cover-existing {
  width: 100%;
  aspect-ratio: 4 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  margin-bottom: 8px;
}
.app .admin-course-cover-existing img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.app .admin-course-cover-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}
.app .admin-course-cover-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  padding: 0;
}
.app .admin-course-cover-tool-btn:hover { color: var(--accent-fg); }
.app .admin-course-cover-tool-remove { color: var(--danger); }
.app .admin-course-cover-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 128px;
  border: 2px dashed var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
  background: var(--surface-2);
}
.app .admin-course-cover-dropzone:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.app .admin-course-cover-dropzone-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.app .admin-course-cover-dropzone-inner .i { width: 28px; height: 28px; color: var(--fg-subtle); }
.app .admin-course-cover-dropzone p { margin: 0; font-size: 13px; color: var(--fg-muted); }
.app .admin-course-cover-dropzone p.hint { font-size: 11px; color: var(--fg-subtle); }

/* ---------- Reposition modal ---------- */
.app .admin-course-reposition-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.app .admin-course-reposition-modal-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.app .admin-course-reposition-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.app .admin-course-reposition-modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.app .admin-course-reposition-modal-close {
  background: none;
  border: none;
  color: var(--fg-subtle);
  cursor: pointer;
  font-size: 20px;
  padding: 0;
  line-height: 1;
}
.app .admin-course-reposition-modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.app .admin-course-reposition-canvas {
  position: relative;
  width: 100%;
  background: var(--surface-3);
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
  cursor: grab;
  aspect-ratio: 4 / 1;
}
.app .admin-course-reposition-canvas:active { cursor: grabbing; }
.app .admin-course-reposition-canvas img {
  position: absolute;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 0 0;
  will-change: transform;
  top: 0;
  left: 0;
}
.app .admin-course-reposition-canvas-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}
.app .admin-course-reposition-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

/* ---------- Course show — KPI fillers ---------- */
.app .admin-course-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .app .admin-course-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Course show — content tree (sections + lessons) ---------- */
.app .admin-course-tree { display: flex; flex-direction: column; gap: 12px; }
.app .admin-course-tree-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-1);
}
.app .admin-course-tree-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-2);
  gap: 12px;
}
.app .admin-course-tree-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.app .admin-course-tree-section-title .drag-handle {
  width: 13px;
  height: 13px;
  color: var(--fg-subtle);
  cursor: grab;
}
.app .admin-course-tree-section-title .drag-handle:active { cursor: grabbing; }
.app .admin-course-tree-section-title .label {
  color: var(--fg-subtle);
  font-weight: 500;
  margin-right: 4px;
}
.app .admin-course-tree-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.app .admin-course-tree-lessons {
  display: flex;
  flex-direction: column;
}
.app .admin-course-tree-lesson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  gap: 12px;
}
.app .admin-course-tree-lesson-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.app .admin-course-tree-lesson-main .i {
  width: 14px;
  height: 14px;
}
.app .admin-course-tree-lesson-main .drag-handle {
  width: 13px;
  height: 13px;
  color: var(--fg-subtle);
  cursor: grab;
}
.app .admin-course-tree-lesson-main .drag-handle:active { cursor: grabbing; }
.app .admin-course-tree-lesson-main .label {
  color: var(--fg-subtle);
  margin-right: 4px;
}
.app .admin-course-tree-lesson-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-muted);
}
.app .admin-course-tree-lesson-type .i {
  width: 14px;
  height: 14px;
}
.app .admin-course-tree-lesson-type.is-quiz { color: var(--accent); }
.app .admin-course-tree-lesson-type.is-challenge { color: var(--warning); }
.app .admin-course-tree-lesson-type.is-demo { color: var(--accent); }
.app .admin-course-tree-lesson-type.is-article { color: var(--fg-muted); }
.app .admin-course-tree-lesson-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.app .admin-course-tree-empty {
  padding: 18px 14px;
  text-align: center;
  color: var(--fg-subtle);
  font-size: 13px;
  border-top: 1px solid var(--border);
}

/* ---------- Add-lesson popover ---------- */
.app .admin-course-add-lesson { position: relative; display: inline-block; }
.app .admin-course-add-lesson-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 4px;
}
.app .admin-course-add-lesson-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  border-radius: 6px;
}
.app .admin-course-add-lesson-menu a:hover { background: var(--surface-3); }
.app .admin-course-add-lesson-menu a .i { width: 14px; height: 14px; }

/* ---------- Certificate template thumbnails ---------- */
.app .admin-course-cert-active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  gap: 12px;
}
.app .admin-course-cert-active-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.app .admin-course-cert-active-meta .label {
  font-size: 11px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .admin-course-cert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1024px) {
  .app .admin-course-cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .app .admin-course-cert-grid { grid-template-columns: 1fr; }
}
.app .admin-course-cert-thumb {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app .admin-course-cert-thumb-canvas {
  aspect-ratio: 11 / 8.5;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.app .admin-course-cert-thumb-canvas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.app .admin-course-cert-thumb-canvas .empty-i {
  color: var(--fg-subtle);
  width: 36px;
  height: 36px;
}
.app .admin-course-cert-thumb-default {
  position: absolute;
  top: 8px;
  right: 8px;
}
.app .admin-course-cert-thumb-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}
.app .admin-course-cert-thumb-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.app .admin-course-cert-thumb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-subtle);
}
.app .admin-course-cert-thumb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Danger zone ---------- */
.app .admin-course-danger {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app .admin-course-danger h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
}
.app .admin-course-danger p {
  margin: 0;
  font-size: 13px;
  color: var(--fg-muted);
}

/* ---------- Course preview banner ---------- */
.app .admin-course-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: 10px;
  margin-bottom: 20px;
}
.app .admin-course-preview-banner-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app .admin-course-preview-banner-meta .i {
  width: 20px;
  height: 20px;
  color: var(--warning);
}
.app .admin-course-preview-banner-meta strong {
  font-size: 14px;
  color: var(--warning);
  display: block;
}
.app .admin-course-preview-banner-meta span {
  font-size: 12px;
  color: var(--fg-muted);
}

/* ---------- Course breadcrumb (compact) ---------- */
.app .admin-course-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-subtle);
  margin-bottom: 8px;
}
.app .admin-course-breadcrumb a {
  color: var(--fg-muted);
  text-decoration: none;
}
.app .admin-course-breadcrumb a:hover { color: var(--fg); }
.app .admin-course-breadcrumb .sep { color: var(--fg-subtle); }

/* ---------- Lesson preview banner (yellow tint) ---------- */
/* Reuses .admin-course-preview-banner from earlier section */

/* ---------- Lesson type meta strip (header on preview/show pages) ---------- */
.app .admin-course-lesson-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-subtle);
  margin-bottom: 8px;
}
.app .admin-course-lesson-meta .sep { color: var(--fg-subtle); }
.app .admin-course-lesson-meta .type-label.is-quiz { color: var(--accent); }
.app .admin-course-lesson-meta .type-label.is-challenge { color: var(--warning); }
.app .admin-course-lesson-meta .type-label.is-demo { color: var(--accent); }

/* ---------- Quiz preview question card ---------- */
.app .admin-course-quiz-questions { display: flex; flex-direction: column; gap: 18px; }
.app .admin-course-quiz-question-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  background: var(--surface-2);
}
.app .admin-course-quiz-question-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 8px;
}
.app .admin-course-quiz-question-num .points {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-subtle);
  margin-left: 6px;
}
.app .admin-course-quiz-options { display: flex; flex-direction: column; gap: 8px; }
.app .admin-course-quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-3);
  border: 1px solid transparent;
  cursor: not-allowed;
}
.app .admin-course-quiz-option.is-correct {
  background: var(--success-soft);
  border-color: var(--success);
}
.app .admin-course-quiz-option-correct-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.app .admin-course-quiz-option-explanation {
  margin-left: 28px;
  margin-top: 4px;
  padding-left: 12px;
  font-size: 12px;
  color: var(--fg-muted);
  border-left: 2px solid var(--border);
}
.app .admin-course-quiz-option-explanation.is-correct { border-left-color: var(--success); }
.app .admin-course-quiz-matching-pair {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-3);
  border-radius: 8px;
}
.app .admin-course-quiz-matching-pair .term { font-weight: 600; flex-shrink: 0; max-width: 40%; }
.app .admin-course-quiz-matching-pair .arrow { color: var(--fg-subtle); flex-shrink: 0; margin-top: 2px; }
.app .admin-course-quiz-matching-pair .definition { color: var(--success); }
.app .admin-course-quiz-grading-info {
  font-size: 12px;
  color: var(--fg-subtle);
  margin-top: 8px;
}
.app .admin-course-quiz-grading-info.is-manual { color: var(--warning); }
.app .admin-course-quiz-disabled-input {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--fg-subtle);
  cursor: not-allowed;
  font: inherit;
}

/* ---------- Modal (used by lesson form modals) ---------- */
.app .admin-course-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.app .admin-course-modal-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.app .admin-course-modal-card.is-narrow { max-width: 560px; }
.app .admin-course-modal-card.is-wide { max-width: 880px; }
.app .admin-course-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.app .admin-course-modal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.app .admin-course-modal-head .subtitle {
  font-size: 12px;
  color: var(--fg-subtle);
  margin-top: 4px;
}
.app .admin-course-modal-close {
  background: none;
  border: none;
  color: var(--fg-subtle);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 6px;
  line-height: 1;
}
.app .admin-course-modal-close:hover { color: var(--fg); }
.app .admin-course-modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.app .admin-course-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ---------- Modal sub-components ---------- */
.app .admin-course-modal-checklist {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  max-height: 192px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app .admin-course-modal-checklist label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.app .admin-course-modal-checklist label:hover { background: var(--surface-3); }
.app .admin-course-modal-error {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--danger);
  font-size: 13px;
}
.app .admin-course-modal-output {
  background: var(--surface-3);
  border-radius: 8px;
  padding: 14px;
  max-height: 240px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  color: var(--fg);
}

/* ---------- Lesson form section (article/quiz/challenge/demo wrapper) ---------- */
.app .admin-course-lesson-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.app .admin-course-lesson-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.app .admin-course-lesson-section-head .title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.app .admin-course-lesson-section-head .title label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.app .admin-course-lesson-section-head .title-help {
  font-size: 12px;
  color: var(--fg-subtle);
  font-weight: 400;
  margin: 2px 0 0;
}
.app .admin-course-lesson-section-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---------- Tip banner (markdown hint, info hint) ---------- */
.app .admin-course-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-subtle);
}
.app .admin-course-tip code {
  background: var(--surface-3);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* ---------- Suggested prompts list ---------- */
.app .admin-course-prompts { display: flex; flex-direction: column; gap: 6px; }
.app .admin-course-prompt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
}
.app .admin-course-prompt-row .grip { color: var(--fg-subtle); cursor: move; flex-shrink: 0; }
.app .admin-course-prompt-row input[type="text"] {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--fg);
}
.app .admin-course-prompt-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------- Quiz builder ---------- */
.app .admin-course-quiz-builder {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.app .admin-course-quiz-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.app .admin-course-quiz-builder-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.app .admin-course-quiz-builder-tools { display: flex; gap: 8px; }
.app .admin-course-quiz-builder-empty {
  text-align: center;
  padding: 24px 0;
  color: var(--fg-subtle);
  font-size: 13px;
}
.app .admin-course-quiz-builder-question {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Generic styled inputs used by JS-rendered DOM ---------- */
.app .admin-course-input,
.app input.admin-course-input,
.app select.admin-course-input,
.app textarea.admin-course-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
}
.app .admin-course-input:focus,
.app input.admin-course-input:focus,
.app select.admin-course-input:focus,
.app textarea.admin-course-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.app .admin-course-input.is-subtle {
  background: var(--surface-3);
  font-size: 12px;
  padding: 6px 8px;
}

/* ---------- Generic checkbox-row used in modals ---------- */
.app .admin-course-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg);
}
.app .admin-course-checkbox-row.is-tight { padding: 6px 8px; }
.app .admin-course-checkbox-row input[type="checkbox"],
.app .admin-course-checkbox-row input[type="radio"] { width: 16px; height: 16px; flex-shrink: 0; }
.app .admin-course-checkbox-row span { font-size: 13px; line-height: 1.4; }

/* ---------- Type badge (used in auto-generate preview) ---------- */
.app .admin-course-type-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--fg-muted);
  white-space: nowrap;
}
.app .admin-course-type-badge.is-multiple_choice { background: var(--accent-soft); color: var(--accent); }
.app .admin-course-type-badge.is-matching { background: var(--success-soft); color: var(--success); }
.app .admin-course-type-badge.is-short_answer { background: var(--warning-soft); color: var(--warning); }
.app .admin-course-type-badge.is-free_form { background: var(--accent-soft); color: var(--accent); }

/* ---------- Quiz attempts table ---------- */
.app .admin-course-attempts-table {
  width: 100%;
  border-collapse: collapse;
}
.app .admin-course-attempts-table th,
.app .admin-course-attempts-table td {
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.app .admin-course-attempts-table th {
  color: var(--fg-muted);
  font-weight: 500;
  background: var(--surface-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .admin-course-attempts-table tr:last-child td { border-bottom: none; }

/* ---------- Demo embedded preview wrapper ---------- */
.app .admin-course-demo-frame {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}

/* ---------- Admin course preview banner (sticky top) ---------- */
/* Rendered by app/views/admin/course/_preview_banner.html.erb when
   @preview_mode is true. Sits above dashboard_v2 sidebar. The user-facing
   templates (course/courses/show, course/lessons/show_*) render this banner
   first so admin sees a 1-click escape from any scroll position. */
.app .admin-course-preview-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: var(--warning-soft);
  border-bottom: 1px solid var(--warning);
  font-size: 13px;
  color: var(--fg);
  flex-wrap: wrap;
}
.app .admin-course-preview-bar-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.app .admin-course-preview-bar-meta strong {
  color: var(--warning);
  font-weight: 600;
}
.app .admin-course-preview-bar-meta .sep {
  color: var(--fg-subtle);
}
.app .admin-course-preview-bar-target {
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.app .admin-course-preview-bar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Disabled-CTA placeholder used in admin preview (Enroll, Mark complete,
   etc.). Visually identical to the live button but click-suppressed via
   `disabled` attribute, with a subtle "(preview)" label cue. */
.app .admin-course-preview-cta {
  opacity: 0.6;
  cursor: not-allowed !important;
  pointer-events: none;
}
.app .admin-course-preview-cta-note {
  font-size: 11px;
  color: var(--fg-subtle);
  margin-top: 4px;
}

/* Embedded challenge layout uses position: fixed with top: 56px (topbar
   height) -- it ignores in-flow siblings like our preview banner. When
   @preview_mode is true (banner rendered above the wrap), bump the wrap's
   fixed-position top offset down by the banner height (~44px) so the
   embedded layout doesn't overlap the banner. */
.app #page-course-wrap[data-course-preview-mode="true"][data-course-rail-default-collapsed="true"] {
  top: 100px;
}

/* ---------- Admin course show — hero (Phase 6) ---------- */
.app .admin-course-show-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--surface-3);
}
.app .admin-course-show-hero-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
}
.app .admin-course-show-hero-cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  color: var(--fg-subtle);
}
.app .admin-course-show-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
}
.app:not(.dark) .admin-course-show-hero-overlay {
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}
.app .admin-course-show-hero-meta {
  min-width: 0;
  flex: 1;
}
.app .admin-course-show-hero-title {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
}
.app .admin-course-show-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.app .admin-course-show-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.app .admin-course-show-hero-meta-item .i {
  width: 13px;
  height: 13px;
}
.app .admin-course-show-hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.app .admin-course-show-hero-actions .btn {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  backdrop-filter: blur(6px);
}
.app .admin-course-show-hero-actions .btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.app .admin-course-show-hero-actions .btn.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

/* Mobile hero (Codex round-1 #1 + round-2 #2):
   16:5 ratio gives only ~100px at 375px width -- replace with stacked
   layout, taller min-height, smaller title, wrapped action row.
   button_to renders <form> as the flex item (not the inner <button>),
   so target both <a> and <form> direct children for the wrap. */
@media (max-width: 640px) {
  .app .admin-course-show-hero {
    aspect-ratio: auto;
    min-height: 200px;
  }
  .app .admin-course-show-hero-overlay {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
  }
  .app .admin-course-show-hero-title {
    font-size: 20px;
  }
  .app .admin-course-show-hero-tags {
    gap: 8px;
  }
  .app .admin-course-show-hero-actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .app .admin-course-show-hero-actions > a,
  .app .admin-course-show-hero-actions > form {
    flex: 1 1 auto;
    min-width: 0;
  }
  .app .admin-course-show-hero-actions form .btn {
    width: 100%;
    justify-content: center;
  }
  .app .admin-course-show-hero-actions > a.btn {
    justify-content: center;
  }
}

/* ---------- Admin course show — two-column layout ---------- */
.app .admin-course-show-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1024px) {
  .app .admin-course-show-layout {
    grid-template-columns: 1fr;
  }
}
.app .admin-course-show-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.app .admin-course-show-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 76px; /* topbar 56 + 20 breathing room */
}
@media (max-width: 1024px) {
  .app .admin-course-show-rail {
    position: static;
  }
}

/* ---------- Admin course show — rail cards ---------- */
.app .admin-course-rail-card {
  padding: 14px 16px;
}
.app .admin-course-rail-card-head {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.app .admin-course-rail-kpi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app .admin-course-rail-kpi-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.app .admin-course-rail-kpi-row .num {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
}
.app .admin-course-rail-kpi-row .label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-muted);
}
.app .admin-course-rail-kpi-row .label .i {
  width: 12px;
  height: 12px;
}
.app .admin-course-rail-detail {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app .admin-course-rail-detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app .admin-course-rail-detail-row dt {
  font-size: 11px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app .admin-course-rail-detail-row dd {
  margin: 0;
  font-size: 13px;
  color: var(--fg);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.app .admin-course-rail-detail-row code {
  font-size: 12px;
  word-break: break-all;
}
.app .admin-course-rail-detail-row-block dd {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* ---------- Lesson edit/new — sticky header (Phase 4) ---------- */
.app .admin-course-edit-header {
  position: sticky;
  top: 56px; /* clears topbar */
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  margin: -20px -20px 16px;
  background: rgba(var(--surface-1-rgb, 16, 16, 22), 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.app:not(.dark) .admin-course-edit-header {
  background: rgba(255, 255, 255, 0.85);
}
.app .admin-course-edit-header-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.app .admin-course-edit-header-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--fg);
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .admin-course-edit-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ---------- Lesson edit/new — 2-col layout (Phase 6) ---------- */
.app .admin-course-edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1024px) {
  .app .admin-course-edit-layout {
    grid-template-columns: 1fr;
  }
}
.app .admin-course-edit-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.app .admin-course-edit-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 120px; /* topbar 56 + sticky header ~64 */
}
@media (max-width: 1024px) {
  .app .admin-course-edit-rail {
    position: static;
  }
}
.app .admin-course-edit-rail-card {
  padding: 14px 16px;
}

/* ---------- Lesson edit — segmented type control (Phase 5) ---------- */
.app .admin-course-type-segmented {
  display: flex;
  gap: 8px;
}
.app .admin-course-type-segmented-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--fg-muted);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, transform 0.06s ease;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}
.app .admin-course-type-segmented-btn:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.app .admin-course-type-segmented-btn:active {
  transform: translateY(1px);
}
.app .admin-course-type-segmented-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.app .admin-course-type-segmented-btn .i {
  width: 22px;
  height: 22px;
}

/* ---------- Lesson edit — slide-over modifier on AI modals (Phase 7) ---------- */
/* Scoped: only applies to .admin-course-modal-card with .is-slideover.
   Does NOT modify the global .is-hidden rule -- accept no entry transition. */
.app .admin-course-modal:has(.is-slideover) {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}
.app .admin-course-modal-card.is-slideover {
  width: min(480px, 100%);
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  border-left: 1px solid var(--border);
  margin: 0;
}
@media (max-width: 640px) {
  .app .admin-course-modal-card.is-slideover {
    width: 100%;
  }
}

/* ---------- Lesson edit — article toolbar (Phase 8) ---------- */
.app .admin-course-article-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.app .admin-course-article-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
  font: inherit;
}
.app .admin-course-article-toolbar-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.app .admin-course-article-toolbar-btn .i {
  width: 14px;
  height: 14px;
}
.app .admin-course-article-toolbar-spacer {
  flex: 1;
}
.app .admin-course-article-toolbar-btn.is-hint-pill {
  width: auto;
  height: 28px;
  padding: 0 10px;
  gap: 6px;
  background: var(--surface-3);
  cursor: default;
  font-size: 11px;
  color: var(--fg-subtle);
}
.app .admin-course-article-toolbar-btn.is-hint-pill:hover {
  border-color: var(--border);
  color: var(--fg-subtle);
}

/* ---------- Lesson edit — quiz card polish (Phase 9) ---------- */
/* (Existing .admin-course-quiz-builder-question rules already provide
   the structure; light tightening for the new layout context.) */
.app .admin-course-edit-main .admin-course-quiz-builder {
  padding: 14px;
}
.app .admin-course-edit-main .admin-course-quiz-builder-question {
  padding: 12px;
}
/* Bare <label> elements rendered by the inline JS quiz builder (e.g.
   "Answer options", "Matching pairs", "Correct answers", "Required
   keywords") otherwise inherit the page's body font-size + weight,
   which made them visually compete with section headings. Match the
   form-field label sizing for visual consistency with surrounding
   "Type" / "Points" / "Question" labels. */
.app .admin-course-quiz-builder-question label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  margin: 0;
}

/* ---------- Lesson edit — mobile sticky-header collapse ---------- */
@media (max-width: 640px) {
  .app .admin-course-edit-header {
    padding: 10px 14px;
    gap: 8px;
  }
  .app .admin-course-edit-header-title {
    font-size: 15px;
  }
  .app .admin-course-edit-header-actions .btn {
    padding: 0 10px;
  }
  .app .admin-course-edit-header-actions .btn span {
    display: none;
  }
}

/* ========================================================================
   Course edit — modernization (2026-05-08)
   Hero cover with hover overlay + segmented status + live preview rail.
   ======================================================================== */

/* Cover hero — populated state */
.app .admin-course-cover-hero {
  position: relative;
  aspect-ratio: 4 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: block;
}
.app .admin-course-cover-hero #cover_image_preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
}

/* Cover hero — empty / dropzone state */
.app .admin-course-cover-hero-empty {
  cursor: pointer;
  background:
    linear-gradient(135deg, var(--surface-2), var(--surface-3));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.app .admin-course-cover-hero-empty:hover {
  background:
    linear-gradient(135deg, var(--surface-3), var(--surface-2));
  border-color: var(--border-strong);
}
.app .admin-course-cover-hero-empty > div:not([id]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--fg-muted);
}
.app .admin-course-cover-hero-empty .i {
  width: 32px;
  height: 32px;
  color: var(--fg-subtle);
}
.app .admin-course-cover-hero-empty p {
  margin: 0;
  font-size: 13px;
  color: var(--fg-muted);
  font-weight: 500;
}
.app .admin-course-cover-hero-empty p.hint {
  font-size: 11px;
  color: var(--fg-subtle);
  font-weight: 400;
}

/* Hover overlay — bottom-right action group */
.app .admin-course-cover-hero-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.app .admin-course-cover-hero:hover .admin-course-cover-hero-overlay,
.app .admin-course-cover-hero:focus-within .admin-course-cover-hero-overlay {
  opacity: 1;
  pointer-events: auto;
}
.app .admin-course-cover-hero-overlay > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.12s ease;
  margin: 0;
}
.app .admin-course-cover-hero-overlay > *:hover {
  background: rgba(0, 0, 0, 0.78);
}
.app .admin-course-cover-hero-overlay .i {
  width: 14px;
  height: 14px;
}
.app .admin-course-cover-hero-overlay input[type="checkbox"],
.app .admin-course-cover-hero-overlay input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.app .admin-course-cover-tool-remove {
  background: rgba(168, 36, 36, 0.7) !important;
}
.app .admin-course-cover-tool-remove:hover {
  background: rgba(168, 36, 36, 0.88) !important;
}

/* Visual hint when Remove is pending — fade hero */
.app .admin-course-cover-hero:has(#remove_cover_image_checkbox:checked) #cover_image_preview {
  opacity: 0.4;
  filter: grayscale(0.6);
}

/* Mobile fallback: keep overlay visible at reduced opacity */
@media (max-width: 768px) {
  .app .admin-course-cover-hero-overlay {
    opacity: 0.92;
    pointer-events: auto;
    transition: none;
  }
}

/* Status segmented control (3-up, single row) */
.app .admin-course-status-segmented {
  display: flex;
  gap: 8px;
}
.app .admin-course-status-segmented-btn {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--fg-muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, transform 0.06s ease;
}
.app .admin-course-status-segmented-btn:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.app .admin-course-status-segmented-btn:active {
  transform: translateY(1px);
}
.app .admin-course-status-segmented-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Edit form field — label/input parity with lesson editor */
.app .admin-course-edit-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app .admin-course-edit-form-field > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.app .admin-course-edit-form-field input[type="text"],
.app .admin-course-edit-form-field input[type="number"],
.app .admin-course-edit-form-field textarea,
.app .admin-course-edit-form-field select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.app .admin-course-edit-form-field input:focus,
.app .admin-course-edit-form-field textarea:focus,
.app .admin-course-edit-form-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Live catalog preview card */
.app .admin-course-preview-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app .admin-course-preview-card .rail-card-head {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.app .admin-course-preview-card .preview-mini-cover {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--border);
}
.app .admin-course-preview-card .preview-mini-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
}
.app .admin-course-preview-card .preview-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app .admin-course-preview-card .preview-desc {
  font-size: 12px;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.app .admin-course-preview-card .preview-status-pill {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--fg-muted);
}
.app .admin-course-preview-card .preview-status-pill[data-status="active"] {
  background: var(--success-soft);
  color: var(--success);
}
.app .admin-course-preview-card .preview-status-pill[data-status="draft"] {
  background: var(--warning-soft);
  color: var(--warning);
}
.app .admin-course-preview-card .preview-status-pill[data-status="archived"] {
  background: var(--surface-3);
  color: var(--fg-subtle);
}

/* Rail Quick info / Manage cards — dt/dd grid + link list */
.app .admin-course-edit-rail-card h4 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.app .admin-course-edit-rail-card dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  margin: 0;
  font-size: 13px;
}
.app .admin-course-edit-rail-card dt {
  color: var(--fg-muted);
}
.app .admin-course-edit-rail-card dd {
  margin: 0;
  color: var(--fg);
  font-weight: 500;
}
.app .admin-course-edit-rail-card a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.app .admin-course-edit-rail-card a:last-child {
  border-bottom: 0;
}
.app .admin-course-edit-rail-card a:hover {
  color: var(--accent);
}

/* Form errors block reuse (kept compact in the new layout) */
.app .admin-course-form .admin-course-form-errors {
  margin-bottom: 16px;
}

/* === Worker 4 (admin other subsystems) — append below this line === */

/* ----------------------------------------------------------------------
   W4 · admin/agent cluster
   Namespace prefix: .admin-agent- (avoids cross-worker / cross-namespace
   bleed; also keeps these distinct from the user-facing .agent-* styles
   that already live in the agent module's section).
---------------------------------------------------------------------- */

/* KPI strip on agents/index */
.app .admin-agent-kpis { margin-bottom: 20px; }

/* Filter row on agents/index — search input on the left, chip group on the right */
.app .admin-agent-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.app .admin-agent-search-form { display: flex; align-items: center; }
.app .admin-agent-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Table card on agents/index — light overrides on top of .conv-table */
.app .admin-agent-table-card { padding: 0; overflow: hidden; }
.app .admin-agent-table th { white-space: nowrap; }
.app .admin-agent-table .admin-agent-actions-col { text-align: right; }
.app .admin-agent-row td { vertical-align: middle; }
.app .admin-agent-name-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.app .admin-agent-name-link:hover { text-decoration: underline; }

/* Inline "Inert" pill on the index row, sibling to the agent name */
.app .admin-agent-inert-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning);
  vertical-align: middle;
}
.app .admin-agent-inert-pill svg.lucide,
.app .admin-agent-inert-pill i[data-lucide] { width: 11px; height: 11px; }

/* Per-row action button group on agents/index */
.app .admin-agent-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.app .admin-agent-actions form { margin: 0; display: inline-flex; }
.app .admin-agent-delete-btn { padding: 4px 8px; }
.app .admin-agent-delete-btn svg.lucide,
.app .admin-agent-delete-btn i[data-lucide] { width: 14px; height: 14px; }

/* Empty state on agents/index — extends global .empty-board with an icon stack */
.app .admin-agent-empty { text-align: center; padding: 48px 24px; }
.app .admin-agent-empty svg.lucide,
.app .admin-agent-empty i[data-lucide] { margin-bottom: 12px; }
.app .admin-agent-empty h3 { margin: 0 0 6px; }
.app .admin-agent-empty p { color: var(--fg-muted); margin: 0 0 16px; }

/* Header actions on agents/show */
.app .admin-agent-show-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app .admin-agent-show-actions form { margin: 0; display: inline-flex; }

/* Show page two-column grid */
.app .admin-agent-show-grid { gap: 16px; }
.app .admin-agent-show-main > .card,
.app .admin-agent-show-side > .card { margin-bottom: 16px; }
.app .admin-agent-show-main > .card:last-child,
.app .admin-agent-show-side > .card:last-child { margin-bottom: 0; }

.app .admin-agent-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.app .admin-agent-section-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: 0;
}

.app .admin-agent-system-prompt {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--fg);
  margin: 0;
  max-height: 360px;
  overflow-y: auto;
}

.app .admin-agent-empty-inline {
  color: var(--fg-subtle);
  font-style: italic;
  margin: 0;
}

/* Recent messages on the show page */
.app .admin-agent-message-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}
.app .admin-agent-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
}
.app .admin-agent-message-assistant { background: var(--surface-2); }
.app .admin-agent-message-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.app .admin-agent-message-avatar-user      { background: var(--accent); }
.app .admin-agent-message-avatar-assistant { background: #7c3aed; }
.app .admin-agent-message-body { flex: 1; min-width: 0; }
.app .admin-agent-message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--fg-subtle);
  margin-bottom: 4px;
}
.app .admin-agent-message-meta strong { color: var(--fg); font-weight: 600; }
.app .admin-agent-message-text {
  font-size: 13px;
  color: var(--fg);
  white-space: pre-wrap;
  margin: 0;
}

/* Right-side configuration / tools sidebar on the show page */
.app .admin-agent-side-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.app .admin-agent-config-list { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.app .admin-agent-config-list > div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.app .admin-agent-config-list dt { color: var(--fg-muted); margin: 0; }
.app .admin-agent-config-list dd { color: var(--fg); margin: 0; text-align: right; }

.app .admin-agent-tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app .admin-agent-tool-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.app .admin-agent-tool-list svg.lucide,
.app .admin-agent-tool-list i[data-lucide] { width: 14px; height: 14px; color: var(--accent); }
.app .admin-agent-tool-meta {
  font-size: 11px;
  color: var(--fg-subtle);
  margin: 12px 0 0;
}

/* tools/show — header subtitle helper link styling */
.app .admin-agent-link-inline { color: var(--accent); text-decoration: underline; }

/* tools/show — banner-style boxes (project flag warning, flash alert) */
.app .admin-agent-tools-warning,
.app .admin-agent-tools-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
}
.app .admin-agent-tools-warning {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  color: var(--fg);
}
.app .admin-agent-tools-warning svg.lucide,
.app .admin-agent-tools-warning i[data-lucide] { color: var(--warning); flex-shrink: 0; }
.app .admin-agent-tools-warning strong { color: var(--warning); }
.app .admin-agent-tools-flash {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--fg);
}
.app .admin-agent-tools-flash svg.lucide,
.app .admin-agent-tools-flash i[data-lucide] { color: var(--danger); flex-shrink: 0; }

/* tools/show — card grid */
.app .admin-agent-tools-form > .admin-agent-tools-grid { margin-bottom: 16px; }
.app .admin-agent-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.app .admin-agent-tool-card {
  display: block;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.app .admin-agent-tool-card.admin-agent-tool-card-disabled { cursor: not-allowed; opacity: 0.65; }
.app .admin-agent-tool-card.admin-agent-tool-card-inert    { border-color: var(--warning); }
.app .admin-agent-tool-card.admin-agent-tool-card-active:hover {
  border-color: var(--accent);
  background: var(--surface-3);
}
.app label.admin-agent-tool-card { margin: 0; }

.app .admin-agent-tool-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.app .admin-agent-tool-icon { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.app .admin-agent-tool-name { font-weight: 600; font-size: 14px; color: var(--fg); flex: 1 1 auto; min-width: 0; }
.app .admin-agent-tool-desc { font-size: 12.5px; color: var(--fg-muted); margin: 0 0 8px; line-height: 1.45; }
.app .admin-agent-tool-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.app .admin-agent-tool-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}
.app .admin-agent-tool-state-pill svg.lucide,
.app .admin-agent-tool-state-pill i[data-lucide] { width: 11px; height: 11px; }
.app .admin-agent-tool-state-pill.warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.app .admin-agent-tool-state-pill.muted   { background: var(--surface-3); color: var(--fg-muted); border-color: var(--border); }
.app .admin-agent-tool-state-pill.admin   { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.app .admin-agent-tool-inert-note {
  background: var(--surface-2);
  border-left: 3px solid var(--warning);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 10px;
  line-height: 1.45;
}
.app .admin-agent-tool-remove-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  margin: 0;
}
.app .admin-agent-tool-remove-checkbox { width: 16px; height: 16px; accent-color: var(--danger); }

.app .admin-agent-tools-actions {
  display: flex;
  justify-content: flex-end;
}

/* ----------------------------------------------------------------------
   W4 · admin/wiki/pages cluster (v2)
   Namespace prefix: .admin-wiki-

   This cluster reuses W3's `.admin-course-edit-*` / `.admin-course-modal*`
   / `.admin-course-lesson-section*` / `.admin-course-article-toolbar*`
   / `.admin-course-tip` / `.admin-course-form-*` classes for the page
   chrome (sticky save header, slide-over modals, sectioned content,
   article-toolbar, rail cards). Wiki-specific bits live below.
---------------------------------------------------------------------- */

/* ---- shared table chrome (index + trash + versions) ---- */
.app .admin-wiki-table-card { padding: 0; overflow: hidden; }
.app .admin-wiki-table th,
.app .admin-wiki-versions-table th { white-space: nowrap; }
.app .admin-wiki-actions-col { text-align: right; }
.app .admin-wiki-row td { vertical-align: middle; }
.app .admin-wiki-row.is-current { background: var(--accent-soft); }

.app .admin-wiki-page-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.app .admin-wiki-page-icon { width: 16px; height: 16px; color: var(--fg-subtle); flex-shrink: 0; margin-top: 2px; }
.app .admin-wiki-page-title {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app .admin-wiki-page-link { color: var(--accent); text-decoration: none; }
.app .admin-wiki-page-link:hover { text-decoration: underline; }
.app .admin-wiki-page-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--fg-subtle);
}
.app .admin-wiki-pin-i { width: 12px; height: 12px; color: var(--warning); }
.app .admin-wiki-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.app .admin-wiki-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.app .admin-wiki-actions form { margin: 0; display: inline-flex; }
.app .admin-wiki-icon-btn { padding: 4px 8px; }
.app .admin-wiki-icon-btn.pinned { color: var(--warning); border-color: var(--warning); }
.app .admin-wiki-icon-btn svg.lucide,
.app .admin-wiki-icon-btn i[data-lucide] { width: 14px; height: 14px; }

.app .admin-wiki-empty { text-align: center; padding: 48px 24px; }
.app .admin-wiki-empty svg.lucide,
.app .admin-wiki-empty i[data-lucide] { margin-bottom: 12px; }
.app .admin-wiki-empty h3 { margin: 0 0 6px; }
.app .admin-wiki-empty p { color: var(--fg-muted); margin: 0 0 16px; }

.app .admin-wiki-empty-inline { color: var(--fg-subtle); font-style: italic; margin: 0; }

/* ---- sticky page-header for index / trash / versions ----
   top: 56px clears the dashboard topbar (verified at .topbar:691 — 56px).
   Same offset W3 lesson edit uses for its sticky save header. */
.app .admin-wiki-sticky-subhead {
  position: sticky;
  top: 56px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  margin: -20px -20px 16px;
  background: rgba(var(--surface-1-rgb, 16, 16, 22), 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.app:not(.dark) .admin-wiki-sticky-subhead {
  background: rgba(255, 255, 255, 0.85);
}
.app .admin-wiki-sticky-subhead-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.app .admin-wiki-sticky-subhead-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.app .admin-wiki-sticky-subhead-title svg.lucide,
.app .admin-wiki-sticky-subhead-title i[data-lucide] {
  width: 18px;
  height: 18px;
  color: var(--fg-muted);
}
.app .admin-wiki-sticky-subhead-help {
  font-size: 12.5px;
  color: var(--fg-muted);
}
.app .admin-wiki-sticky-subhead-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ---- show page rail content ---- */
.app .admin-wiki-rendered { color: var(--fg); }

.app .admin-wiki-info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.app .admin-wiki-info-list > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.app .admin-wiki-info-list dt { color: var(--fg-muted); margin: 0; font-size: 12px; }
.app .admin-wiki-info-list dd { color: var(--fg); margin: 0; }

.app .admin-wiki-backlinks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app .admin-wiki-backlinks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.app .admin-wiki-backlinks svg.lucide,
.app .admin-wiki-backlinks i[data-lucide] { width: 14px; height: 14px; color: var(--fg-subtle); }
.app .admin-wiki-backlinks a { color: var(--accent); text-decoration: none; }
.app .admin-wiki-backlinks a:hover { text-decoration: underline; }

/* ---- form sticky-header inline edit-summary ---- */
.app .admin-wiki-edit-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--fg-muted);
}
.app .admin-wiki-edit-summary-row label {
  font-weight: 500;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.app .admin-wiki-edit-summary-row input {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.4;
}
.app .admin-wiki-edit-summary-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ---- slug field with leading prefix addon (rail-narrow form factor) ---- */
.app .admin-wiki-slug-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.app .admin-wiki-slug-prefix {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--fg-subtle);
  padding: 7px 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  white-space: nowrap;
}
.app .admin-wiki-slug-row .admin-wiki-slug-input {
  border-radius: 0 6px 6px 0;
  flex: 1;
  min-width: 0;
}

/* ---- content editor preview pane ---- */
.app .admin-wiki-content-preview {
  width: 100%;
  min-height: 360px;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-y: auto;
  margin-top: 8px;
}
.app .admin-wiki-preview-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-muted);
  font-size: 13px;
}
.app .admin-wiki-preview-loading svg.lucide,
.app .admin-wiki-preview-loading i[data-lucide] { width: 16px; height: 16px; }

/* preview-toggle visual cue when in preview mode (icon-only button) */
.app .admin-course-article-toolbar-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* ---- attachments dropzone — narrower form factor for the rail ---- */
.app .admin-wiki-dropzone-rail {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.app .admin-wiki-dropzone-rail:hover { border-color: var(--accent); }
.app .admin-wiki-dropzone-rail-icon {
  width: 22px;
  height: 22px;
  color: var(--fg-subtle);
  margin-bottom: 4px;
}
.app .admin-wiki-dropzone-rail p {
  color: var(--fg-muted);
  font-size: 12.5px;
  margin: 0;
}
.app .admin-wiki-dropzone-status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-muted);
}

.app .admin-wiki-attachment-list-rail {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.app .admin-wiki-attachment-list-rail li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 12px;
}
.app .admin-wiki-attachment-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg);
}
.app .admin-wiki-attachment-copy-btn {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
}
.app .admin-wiki-attachment-copy-btn:hover { color: var(--accent); }
.app .admin-wiki-attachment-copy-btn svg.lucide,
.app .admin-wiki-attachment-copy-btn i[data-lucide] { width: 14px; height: 14px; }

/* ---- quick-actions stack in rail ---- */
.app .admin-wiki-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app .admin-wiki-quick-actions form { margin: 0; }
.app .admin-wiki-quick-actions .btn {
  width: 100%;
  justify-content: center;
}

/* ---- embed-modal supported-providers list ---- */
.app .admin-wiki-embed-providers { font-size: 12px; color: var(--fg-muted); margin-top: 4px; }
.app .admin-wiki-embed-providers-label {
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 6px;
}
.app .admin-wiki-embed-provider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.app .admin-wiki-embed-provider-grid span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app .admin-wiki-embed-provider-grid svg.lucide,
.app .admin-wiki-embed-provider-grid i[data-lucide] {
  width: 12px;
  height: 12px;
  color: var(--fg-subtle);
}

/* ---- versions preview modal — inner styling that lives inside W3
       slide-over shell ---- */
.app .admin-wiki-preview-rendered { color: var(--fg); }
.app .admin-wiki-preview-error {
  text-align: center;
  padding: 32px 16px;
  color: var(--danger);
}
.app .admin-wiki-preview-error svg.lucide,
.app .admin-wiki-preview-error i[data-lucide] {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
}
.app .admin-wiki-preview-raw {
  background: var(--surface-2);
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  white-space: pre-wrap;
  color: var(--fg);
  margin: 0;
}

/* ---- Lucide spinning loader utility used by wiki-editor controller's
       loading state and inline writing-assist generate button. ---- */
.app .admin-wiki-spin { animation: admin-wiki-spin 0.8s linear infinite; }
@keyframes admin-wiki-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------------
   W4 · admin/review_campaign cluster
   Namespace prefix: .admin-rc-
---------------------------------------------------------------------- */

.app .admin-rc-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app .admin-rc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 12px;
}
.app .admin-rc-breadcrumb svg.lucide,
.app .admin-rc-breadcrumb i[data-lucide] { width: 12px; height: 12px; color: var(--fg-subtle); }
.app .admin-rc-breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.app .admin-rc-breadcrumb a:hover { color: var(--accent); }
.app .admin-rc-breadcrumb span { color: var(--fg); }

/* index table */
.app .admin-rc-table-card { padding: 0; overflow: hidden; }
.app .admin-rc-table th { white-space: nowrap; }
.app .admin-rc-actions-col { text-align: right; }
.app .admin-rc-row td { vertical-align: middle; }
.app .admin-rc-row.is-deleted { opacity: 0.55; }

.app .admin-rc-campaign-name { font-weight: 600; }
.app .admin-rc-campaign-link { color: var(--accent); text-decoration: none; }
.app .admin-rc-campaign-link:hover { text-decoration: underline; }
.app .admin-rc-campaign-meta { font-size: 11.5px; color: var(--fg-subtle); margin-top: 2px; }

.app .admin-rc-progress-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}
.app .admin-rc-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.app .admin-rc-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 240ms ease;
}
.app .admin-rc-progress-pct {
  font-size: 12px;
  color: var(--fg-muted);
  min-width: 36px;
  text-align: right;
}

.app .admin-rc-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.app .admin-rc-actions form { margin: 0; display: inline-flex; }
.app .admin-rc-icon-btn { padding: 4px 8px; }
.app .admin-rc-icon-btn svg.lucide,
.app .admin-rc-icon-btn i[data-lucide] { width: 14px; height: 14px; }

.app .admin-rc-empty { text-align: center; padding: 48px 24px; }
.app .admin-rc-empty svg.lucide,
.app .admin-rc-empty i[data-lucide] { margin-bottom: 12px; }
.app .admin-rc-empty h3 { margin: 0 0 6px; }
.app .admin-rc-empty p { color: var(--fg-muted); margin: 0 0 16px; }

/* show page */
.app .admin-rc-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 16px;
}
.app .admin-rc-meta-strip strong { color: var(--fg); font-weight: 600; }
.app .admin-rc-kpis { margin-bottom: 16px; }

.app .admin-rc-progress-card { margin-bottom: 16px; }
.app .admin-rc-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.app .admin-rc-progress-label { font-size: 13px; font-weight: 500; color: var(--fg); }
.app .admin-rc-progress-pct-large { font-size: 14px; font-weight: 600; color: var(--accent); min-width: 0; text-align: left; }
.app .admin-rc-progress-bar-large { height: 10px; }
.app .admin-rc-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 8px;
}

.app .admin-rc-toolbar-card { margin-bottom: 16px; }
.app .admin-rc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.app .admin-rc-toolbar form { margin: 0; }

/* dropdown — relies on existing dropdown_controller.js (toggles `.hidden`) */
.app .admin-rc-dropdown { position: relative; }
.app .admin-rc-dropdown-caret { width: 12px; height: 12px; margin-left: 4px; }
.app .admin-rc-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 4px;
  z-index: 50;
}
.app .admin-rc-dropdown-menu.hidden { display: none; }
.app .admin-rc-dropdown-item {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  border-radius: 4px;
}
.app .admin-rc-dropdown-item:hover { background: var(--surface-3); color: var(--fg); }
.app .admin-rc-dropdown-item:focus {
  outline: none;
  background: var(--accent-soft);
  color: var(--accent);
}

/* analysis grid */
.app .admin-rc-analysis-grid { gap: 16px; margin-bottom: 16px; }

.app .admin-rc-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.app .admin-rc-section-title svg.lucide,
.app .admin-rc-section-title i[data-lucide] { width: 16px; height: 16px; color: var(--fg-muted); }
.app .admin-rc-section-help {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0 0 12px;
}

/* rating distribution rows */
.app .admin-rc-rating-rows { display: flex; flex-direction: column; gap: 8px; }
.app .admin-rc-rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.app .admin-rc-rating-label {
  width: 24px;
  text-align: right;
  font-weight: 600;
  color: var(--fg);
}
.app .admin-rc-rating-bar {
  flex: 1;
  height: 16px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
}
.app .admin-rc-rating-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}
.app .admin-rc-rating-count {
  min-width: 100px;
  text-align: right;
  color: var(--fg);
}

/* reliability list */
.app .admin-rc-reliability-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.app .admin-rc-reliability-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.app .admin-rc-reliability-list dt { color: var(--fg-muted); margin: 0; }
.app .admin-rc-reliability-list dd { color: var(--fg); margin: 0; font-weight: 600; }
.app .admin-rc-reliability-divider {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.app .admin-rc-controversy-count { color: var(--danger) !important; }

/* top reviewers / controversy / stats tables */
.app .admin-rc-top-reviewers-card,
.app .admin-rc-controversy-card { margin-bottom: 16px; }
.app .admin-rc-stats-table { width: 100%; }
.app .admin-rc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* rubric — show + form */
.app .admin-rc-rubric-list { display: flex; flex-direction: column; gap: 6px; }
.app .admin-rc-rubric-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
}
.app .admin-rc-rubric-rating {
  width: 28px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
  flex-shrink: 0;
}
.app .admin-rc-rubric-desc { color: var(--fg); font-size: 13px; }
.app .admin-rc-rubric-tone-bad     { background: rgba(220, 38, 38, 0.08); }
.app .admin-rc-rubric-tone-good    { background: rgba(34, 197, 94, 0.08); }
.app .admin-rc-rubric-tone-neutral { background: var(--surface-2); }

/* source projects pills */
.app .admin-rc-source-projects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.app .admin-rc-source-pill {
  padding: 4px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--fg);
}

.app .admin-rc-empty-inline {
  color: var(--fg-subtle);
  font-style: italic;
  margin: 0;
}

/* form v2 — sticky save header + 2-col + visual rubric ladder.
   Page chrome (sticky save header, 2-col layout, modal-shell, form fields)
   reuses W3 admin-course-* classes. The classes below are wiki-form-specific
   bits that don't fit the W3 reuse model. */

/* visual rubric ladder — colored rating chip + description input per row */
.app .admin-rc-rubric-ladder {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app .admin-rc-rubric-ladder-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app .admin-rc-rubric-rating-chip {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid transparent;
}
/* Rating gradient — red (low) → green (high). Token-based so they follow theme. */
.app .admin-rc-rubric-rating-chip.is-rating-0 { background: var(--danger);      color: #fff;            border-color: var(--danger); }
.app .admin-rc-rubric-rating-chip.is-rating-1 { background: var(--danger-soft); color: var(--danger);   border-color: var(--danger); }
.app .admin-rc-rubric-rating-chip.is-rating-2 { background: var(--warning-soft);color: var(--warning);  border-color: var(--warning); }
.app .admin-rc-rubric-rating-chip.is-rating-3 { background: var(--accent-soft); color: var(--accent);   border-color: var(--accent); }
.app .admin-rc-rubric-rating-chip.is-rating-4 { background: var(--success-soft);color: var(--success);  border-color: var(--success); }
.app .admin-rc-rubric-rating-chip.is-rating-5 { background: var(--success);     color: #fff;            border-color: var(--success); }

/* source-projects rail card — search input + selected-count pill */
.app .admin-rc-source-card { padding: 14px 16px; }
.app .admin-rc-source-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.app .admin-rc-source-selected-pill {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.app .admin-rc-source-search { font-size: 12.5px; }
.app .admin-rc-source-empty {
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-muted);
  font-style: italic;
  padding: 12px 8px;
  margin: 0;
}

/* edit-only "Campaign at a glance" rail card */
.app .admin-rc-stats-glance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.app .admin-rc-stats-glance-label { color: var(--fg-muted); }
.app .admin-rc-stats-glance-value { font-weight: 600; color: var(--fg); }
.app .admin-rc-stats-glance-bar {
  margin: 8px 0 12px;
  height: 6px;
}
.app .admin-rc-stats-glance-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
}
.app .admin-rc-stats-glance-link:hover { text-decoration: underline; }
.app .admin-rc-stats-glance-link svg.lucide,
.app .admin-rc-stats-glance-link i[data-lucide] { width: 12px; height: 12px; }

.app .admin-rc-source-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}
.app .admin-rc-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg);
}
.app .admin-rc-source-row:hover { background: var(--surface-3); }
.app .admin-rc-source-row.is-current {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
.app .admin-rc-source-name { flex: 1; }
.app .admin-rc-source-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
}
.app .admin-rc-source-count {
  font-size: 11.5px;
  color: var(--fg-subtle);
}

.app .admin-rc-edit-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  color: var(--fg);
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.app .admin-rc-edit-warning svg.lucide,
.app .admin-rc-edit-warning i[data-lucide] { color: var(--warning); flex-shrink: 0; }
.app .admin-rc-edit-warning strong { color: var(--warning); }

/* reviewers cell */
.app .admin-rc-reviewer-name { display: block; font-weight: 600; color: var(--fg); }
.app .admin-rc-reviewer-email { display: block; font-size: 11.5px; color: var(--fg-subtle); }

/* ----------------------------------------------------------------------
   W4 · admin/workflows cluster
   Namespace prefix: .admin-wf-
---------------------------------------------------------------------- */

.app .admin-wf-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app .admin-wf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 12px;
}
.app .admin-wf-breadcrumb svg.lucide,
.app .admin-wf-breadcrumb i[data-lucide] { width: 12px; height: 12px; color: var(--fg-subtle); }
.app .admin-wf-breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.app .admin-wf-breadcrumb a:hover { color: var(--accent); }
.app .admin-wf-breadcrumb span { color: var(--fg); }

/* filter row — chips + form-managed selects */
.app .admin-wf-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.app .admin-wf-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.app .admin-wf-user-form,
.app .admin-wf-filter-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* tables */
.app .admin-wf-table-card { padding: 0; overflow: hidden; }
.app .admin-wf-table th { white-space: nowrap; }
.app .admin-wf-actions-col { text-align: right; }
.app .admin-wf-row td { vertical-align: middle; }
.app .admin-wf-name-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.app .admin-wf-name-link:hover { text-decoration: underline; }

.app .admin-wf-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.app .admin-wf-actions form { margin: 0; display: inline-flex; }

/* form input (used inside filter row) — narrower than the .card-pad inputs */
.app .admin-wf-form-input {
  padding: 7px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 13.5px;
  min-width: 180px;
}
.app .admin-wf-form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* empty state */
.app .admin-wf-empty { text-align: center; padding: 48px 24px; }
.app .admin-wf-empty svg.lucide,
.app .admin-wf-empty i[data-lucide] { margin-bottom: 12px; }
.app .admin-wf-empty h3 { margin: 0 0 6px; }
.app .admin-wf-empty p { color: var(--fg-muted); margin: 0 0 16px; }

/* status pill pulse — for "Running" state */
.app .admin-wf-pulse {
  animation: admin-wf-pulse-anim 1.6s ease-in-out infinite;
}
@keyframes admin-wf-pulse-anim {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ---- show + show_run shared ---- */

.app .admin-wf-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.app .admin-wf-section-title svg.lucide,
.app .admin-wf-section-title i[data-lucide] { width: 16px; height: 16px; color: var(--fg-muted); }
.app .admin-wf-section-title-danger { color: var(--danger); }
.app .admin-wf-section-title-danger svg.lucide,
.app .admin-wf-section-title-danger i[data-lucide] { color: var(--danger); }

.app .admin-wf-section-count {
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--surface-3);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: 0;
}

.app .admin-wf-section-hint {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-subtle);
  text-transform: none;
  letter-spacing: 0;
}

.app .admin-wf-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.app .admin-wf-section-head .admin-wf-section-title { margin: 0; }
.app .admin-wf-section-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
}
.app .admin-wf-section-link:hover { text-decoration: underline; }
.app .admin-wf-section-link svg.lucide,
.app .admin-wf-section-link i[data-lucide] { width: 12px; height: 12px; }

.app .admin-wf-page > .card { margin-bottom: 16px; }
.app .admin-wf-page > .card:last-child { margin-bottom: 0; }
/* margins handled per-section since the page has many cards */
.app .page > .admin-wf-error-card,
.app .page > .admin-wf-collapsible-card,
.app .page > .card { margin-bottom: 16px; }

.app .admin-wf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.app .admin-wf-info-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin: 0;
}
@media (max-width: 600px) {
  .app .admin-wf-info-list { grid-template-columns: 1fr; }
}
.app .admin-wf-info-list > div { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.app .admin-wf-info-list dt { color: var(--fg-muted); margin: 0; min-width: 80px; }
.app .admin-wf-info-list dd { color: var(--fg); margin: 0; word-break: break-word; }

.app .admin-wf-desc { color: var(--fg); font-size: 13.5px; line-height: 1.55; margin: 0; }

/* input variables list */
.app .admin-wf-input-list { display: flex; flex-direction: column; gap: 8px; }
.app .admin-wf-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.app .admin-wf-input-name { font-weight: 600; color: var(--fg); }
.app .admin-wf-input-type { color: var(--fg-subtle); font-size: 12px; margin-left: 6px; }
.app .admin-wf-input-required {
  color: var(--danger);
  font-size: 11.5px;
  margin-left: 6px;
  font-weight: 600;
}
.app .admin-wf-input-default { color: var(--fg-muted); font-size: 12px; }

/* steps */
.app .admin-wf-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.app .admin-wf-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.app .admin-wf-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--surface-3);
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  color: var(--fg);
  flex-shrink: 0;
}
.app .admin-wf-step-type { font-weight: 600; color: var(--fg); }
.app .admin-wf-step-id { margin-left: auto; font-size: 11.5px; color: var(--fg-subtle); }

/* JSON / log payload blocks */
.app .admin-wf-json {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--fg);
  max-height: 360px;
  overflow-y: auto;
}
.app .admin-wf-json-inline { padding: 8px 10px; max-height: 200px; }
.app .admin-wf-json-error { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.app .admin-wf-error-card { border-left: 3px solid var(--danger); }

/* run rows on show */
.app .admin-wf-run-list { display: flex; flex-direction: column; gap: 6px; }
.app .admin-wf-run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--fg);
}
.app .admin-wf-run-row:hover { background: var(--surface-3); }
.app .admin-wf-run-status {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}
.app .admin-wf-run-status svg.lucide,
.app .admin-wf-run-status i[data-lucide] { width: 18px; height: 18px; }
.app .admin-wf-run-status-completed { color: var(--success); }
.app .admin-wf-run-status-running   { color: var(--accent); }
.app .admin-wf-run-status-pending   { color: var(--warning); }
.app .admin-wf-run-status-failed    { color: var(--danger); }
.app .admin-wf-run-status-cancelled { color: var(--fg-subtle); }
.app .admin-wf-run-meta { flex: 1; font-size: 13px; }
.app .admin-wf-run-meta strong { color: var(--fg); margin-right: 6px; }
.app .admin-wf-run-duration { color: var(--fg-muted); font-size: 12px; }

.app .admin-wf-spin { animation: admin-wf-spin-anim 0.8s linear infinite; }
@keyframes admin-wf-spin-anim { to { transform: rotate(360deg); } }

.app .admin-wf-empty-inline {
  color: var(--fg-subtle);
  font-style: italic;
  text-align: center;
  margin: 16px 0;
}

/* show_run sections */
.app .admin-wf-collapsible-card details { display: block; }
.app .admin-wf-collapsible-card summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}
.app .admin-wf-collapsible-card summary::-webkit-details-marker { display: none; }
.app .admin-wf-collapsible-card summary .admin-wf-section-title { margin-bottom: 0; }
.app .admin-wf-collapsible-card details[open] summary .admin-wf-section-title { margin-bottom: 12px; }
.app .admin-wf-collapsible-card summary:hover .admin-wf-section-title { color: var(--accent); }

.app .admin-wf-variable-list { display: flex; flex-direction: column; gap: 8px; }
.app .admin-wf-variable-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.app .admin-wf-variable-name { font-weight: 600; color: var(--fg); font-size: 13px; margin-bottom: 4px; }

.app .admin-wf-log-stream {
  background: var(--surface-3);
  border-radius: 6px;
  padding: 10px 12px;
  max-height: 360px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}
.app .admin-wf-log-row { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.app .admin-wf-log-ts { color: var(--fg-subtle); }
.app .admin-wf-log-level { font-weight: 700; }
.app .admin-wf-log-level-error { color: var(--danger); }
.app .admin-wf-log-level-warn  { color: var(--warning); }
.app .admin-wf-log-level-info  { color: var(--accent); }
.app .admin-wf-log-level-debug { color: var(--fg-subtle); }
.app .admin-wf-log-msg { color: var(--fg); flex: 1; word-break: break-word; }

.app .admin-wf-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

/* ---- confirm-modal chrome (used by index Share buttons) ----
   Stimulus controller (confirm_modal_controller.js, presumed) toggles `.hidden`
   on the modal target. Keep `class="hidden"` on the initial markup for the
   Stimulus toggle to work; layer the dashboard_v2 chrome on top. */
.app .admin-wf-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.app .admin-wf-modal.hidden { display: none; }
.app .admin-wf-modal-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.app .admin-wf-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px;
}
.app .admin-wf-modal-message {
  color: var(--fg-muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.app .admin-wf-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.app .admin-wf-modal-actions form { margin: 0; }

/* ----------------------------------------------------------------------
   W4 · admin/memories cluster
   Namespace prefix: .admin-mem-
---------------------------------------------------------------------- */

.app .admin-mem-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app .admin-mem-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 12px;
}
.app .admin-mem-breadcrumb svg.lucide,
.app .admin-mem-breadcrumb i[data-lucide] { width: 12px; height: 12px; color: var(--fg-subtle); }
.app .admin-mem-breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.app .admin-mem-breadcrumb a:hover { color: var(--accent); }
.app .admin-mem-breadcrumb span { color: var(--fg); }

/* tables (users + index) */
.app .admin-mem-table-card { padding: 0; overflow: hidden; }
.app .admin-mem-table th { white-space: nowrap; }
.app .admin-mem-actions-col { text-align: right; }
.app .admin-mem-row td { vertical-align: middle; }

.app .admin-mem-count-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
.app .admin-mem-count-pill.is-zero {
  background: var(--surface-3);
  color: var(--fg-subtle);
}

/* memory content cell — line-clamp at 2 lines, full-content on /show */
.app .admin-mem-content-link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--fg);
  text-decoration: none;
  max-width: 540px;
  font-size: 13px;
  line-height: 1.5;
}
.app .admin-mem-content-link:hover { color: var(--accent); }

.app .admin-mem-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.app .admin-mem-actions form { margin: 0; display: inline-flex; }

/* source pill — different tones per source */
.app .admin-mem-source-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}
.app .admin-mem-source-pill-manual    { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.app .admin-mem-source-pill-extracted { background: rgba(124, 58, 237, 0.12); color: #c4b5fd; border-color: #7c3aed; }
.app .admin-mem-source-pill-admin     { background: var(--surface-3); color: var(--fg); border-color: var(--border-strong); }

/* Auto-Save toggle button — green when on, muted when off */
.app .admin-mem-toggle-btn { font-weight: 600; }
.app .admin-mem-toggle-btn.on {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.app .admin-mem-toggle-btn.on svg.lucide,
.app .admin-mem-toggle-btn.on i[data-lucide] { color: #fff; }

/* show page */
.app .admin-mem-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.app .admin-mem-section-title svg.lucide,
.app .admin-mem-section-title i[data-lucide] { width: 16px; height: 16px; color: var(--fg-muted); }
.app .admin-mem-section-hint {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-subtle);
  text-transform: none;
  letter-spacing: 0;
}

.app .admin-mem-content-block {
  white-space: pre-wrap;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
  word-break: break-word;
}

.app .admin-mem-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 13px;
  color: var(--fg-muted);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.app .admin-mem-meta-strip strong { color: var(--fg); margin-right: 6px; font-weight: 600; }
.app .admin-mem-source-meta { color: var(--fg-subtle); margin-left: 8px; }
.app .admin-mem-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.app .admin-mem-collapsible-card details { display: block; }
.app .admin-mem-collapsible-card summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}
.app .admin-mem-collapsible-card summary::-webkit-details-marker { display: none; }
.app .admin-mem-collapsible-card summary .admin-mem-section-title { margin-bottom: 0; }
.app .admin-mem-collapsible-card details[open] summary .admin-mem-section-title { margin-bottom: 12px; }
.app .admin-mem-collapsible-card summary:hover .admin-mem-section-title { color: var(--accent); }

.app .admin-mem-json {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--fg);
  max-height: 360px;
  overflow-y: auto;
}

/* form (new + edit) */
.app .admin-mem-form-page .page-header { margin-bottom: 16px; }
.app .admin-mem-form { max-width: 720px; }
.app .admin-mem-form-field { margin-bottom: 0; }
.app .admin-mem-form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 6px;
}
.app .admin-mem-form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}
.app .admin-mem-form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.app .admin-mem-form-textarea { resize: vertical; min-height: 140px; }
.app .admin-mem-form-help {
  display: block;
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 8px;
}

.app .admin-mem-form-error-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--fg);
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  max-width: 720px;
}
.app .admin-mem-form-error-summary strong { color: var(--danger); }
.app .admin-mem-form-error-summary svg.lucide,
.app .admin-mem-form-error-summary i[data-lucide] { color: var(--danger); flex-shrink: 0; }
.app .admin-mem-form-error-summary ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }

.app .admin-mem-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 0;
  margin-top: 16px;
  max-width: 720px;
}

/* empty state */
.app .admin-mem-empty { text-align: center; padding: 48px 24px; }
.app .admin-mem-empty svg.lucide,
.app .admin-mem-empty i[data-lucide] { margin-bottom: 12px; }
.app .admin-mem-empty h3 { margin: 0 0 6px; }
.app .admin-mem-empty p { color: var(--fg-muted); margin: 0 0 16px; }

/* confirm-modal chrome (Delete confirmation on index)
   Stimulus controller toggles `class="hidden"` on the modal target. Keep it. */
.app .admin-mem-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.app .admin-mem-modal.hidden { display: none; }
.app .admin-mem-modal-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.app .admin-mem-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px;
}
.app .admin-mem-modal-message {
  color: var(--fg-muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.app .admin-mem-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.app .admin-mem-modal-actions form { margin: 0; }

/* ----------------------------------------------------------------------
   W4 · admin/shared_challenges cluster
   Namespace prefix: .admin-sc-
---------------------------------------------------------------------- */

.app .admin-sc-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app .admin-sc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 12px;
}
.app .admin-sc-breadcrumb svg.lucide,
.app .admin-sc-breadcrumb i[data-lucide] { width: 12px; height: 12px; color: var(--fg-subtle); }
.app .admin-sc-breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.app .admin-sc-breadcrumb a:hover { color: var(--accent); }
.app .admin-sc-breadcrumb span { color: var(--fg); }

/* index table */
.app .admin-sc-table-card { padding: 0; overflow: hidden; }
.app .admin-sc-table th { white-space: nowrap; }
.app .admin-sc-actions-col { text-align: right; }
.app .admin-sc-row td { vertical-align: middle; }
.app .admin-sc-name-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.app .admin-sc-name-link:hover { text-decoration: underline; }

.app .admin-sc-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.app .admin-sc-actions form { margin: 0; display: inline-flex; }

.app .admin-sc-empty { text-align: center; padding: 48px 24px; }
.app .admin-sc-empty svg.lucide,
.app .admin-sc-empty i[data-lucide] { margin-bottom: 12px; }
.app .admin-sc-empty h3 { margin: 0 0 6px; }
.app .admin-sc-empty p { color: var(--fg-muted); margin: 0; max-width: 480px; margin-left: auto; margin-right: auto; }
.app .admin-sc-link-inline { color: var(--accent); text-decoration: underline; }

/* status pill — `warning` modifier (used for difficulty=Advanced).
   Defined here for the shared_challenges cluster; not yet promoted global. */
.app .status-pill.warning {
  background: var(--warning-soft);
  color: var(--warning);
}
.app .status-pill.warning .dot { background: var(--warning); }

/* show page */
.app .admin-sc-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.app .admin-sc-section-title svg.lucide,
.app .admin-sc-section-title i[data-lucide] { width: 16px; height: 16px; color: var(--fg-muted); }
.app .admin-sc-section-count {
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--surface-3);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: 0;
}
.app .admin-sc-section-hint {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-subtle);
  text-transform: none;
  letter-spacing: 0;
}

.app .admin-sc-info-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin: 0;
}
@media (max-width: 600px) {
  .app .admin-sc-info-list { grid-template-columns: 1fr; }
}
.app .admin-sc-info-list > div { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.app .admin-sc-info-list dt { color: var(--fg-muted); margin: 0; min-width: 160px; }
.app .admin-sc-info-list dd { color: var(--fg); margin: 0; word-break: break-word; }
.app .admin-sc-info-list dd.admin-sc-yes { color: var(--success); font-weight: 600; }
.app .admin-sc-info-list dd.admin-sc-no  { color: var(--fg-subtle); }

.app .admin-sc-subsection { margin-top: 16px; }
.app .admin-sc-subsection:first-of-type { margin-top: 12px; }
.app .admin-sc-subsection-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  margin: 0 0 6px;
}

.app .admin-sc-pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--fg);
  max-height: 320px;
  overflow-y: auto;
}
.app .admin-sc-pre-mono { font-size: 11.5px; }

.app .admin-sc-text { color: var(--fg); font-size: 13.5px; line-height: 1.55; margin: 0; }

.app .admin-sc-background { color: var(--fg); }

.app .admin-sc-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.app .admin-sc-tag-pill {
  padding: 3px 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg);
}

.app .admin-sc-model-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.app .admin-sc-model-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.app .admin-sc-model-name { font-weight: 600; color: var(--fg); }
.app .admin-sc-model-vendor { color: var(--fg-subtle); font-size: 11.5px; }

.app .admin-sc-collapsible-card details { display: block; }
.app .admin-sc-collapsible-card summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}
.app .admin-sc-collapsible-card summary::-webkit-details-marker { display: none; }
.app .admin-sc-collapsible-card summary .admin-sc-section-title { margin-bottom: 0; }
.app .admin-sc-collapsible-card details[open] summary .admin-sc-section-title { margin-bottom: 12px; }
.app .admin-sc-collapsible-card summary:hover .admin-sc-section-title { color: var(--accent); }

.app .admin-sc-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

/* confirm-modal chrome (Copy confirmation on index + show)
   Stimulus controller toggles `class="hidden"` on the modal target. Keep it. */
.app .admin-sc-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.app .admin-sc-modal.hidden { display: none; }
.app .admin-sc-modal-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.app .admin-sc-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px;
}
.app .admin-sc-modal-message {
  color: var(--fg-muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.app .admin-sc-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.app .admin-sc-modal-actions form { margin: 0; }

/* ----------------------------------------------------------------------
   W4 · admin/survey_questions cluster
   Namespace prefix: .admin-sq-
---------------------------------------------------------------------- */

.app .admin-sq-section-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 16px 0 12px;
}
.app .admin-sq-question-list { display: flex; flex-direction: column; gap: 12px; }
.app .admin-sq-question-card { margin-bottom: 0; }

.app .admin-sq-question-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.app .admin-sq-question-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.app .admin-sq-question-num {
  font-size: 12px;
  color: var(--fg-subtle);
  font-weight: 500;
  min-width: 24px;
}
.app .admin-sq-tag {
  padding: 2px 8px;
  background: var(--surface-3);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  text-transform: capitalize;
}

.app .admin-sq-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app .admin-sq-actions form { margin: 0; display: inline-flex; }

.app .admin-sq-question-text {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 6px;
  word-break: break-word;
}
.app .admin-sq-question-options {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0;
}
.app .admin-sq-question-options strong { color: var(--fg); font-weight: 600; }

.app .admin-sq-edit-form { display: flex; flex-direction: column; gap: 12px; }
.app .admin-sq-form-field { display: flex; flex-direction: column; }
.app .admin-sq-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .app .admin-sq-form-row { grid-template-columns: 1fr; }
}
.app .admin-sq-form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 4px;
}
.app .admin-sq-form-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.4;
}
.app .admin-sq-form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.app .admin-sq-form-textarea { resize: vertical; min-height: 60px; }
.app .admin-sq-form-help { font-size: 11.5px; color: var(--fg-muted); margin-top: 4px; }

.app .admin-sq-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.app .admin-sq-edit-actions form { margin: 0; }

.app .admin-sq-empty { text-align: center; padding: 48px 24px; }
.app .admin-sq-empty svg.lucide,
.app .admin-sq-empty i[data-lucide] { margin-bottom: 12px; }
.app .admin-sq-empty h3 { margin: 0 0 6px; }
.app .admin-sq-empty p { color: var(--fg-muted); margin: 0; }

.app .admin-sq-add-card { margin-bottom: 0; }
.app .admin-sq-add-form { display: flex; flex-direction: column; gap: 12px; }

/* ----------------------------------------------------------------------
   W4 · admin/project_user_events + admin/user_events (events) cluster
   Namespace prefix: .admin-ev-
---------------------------------------------------------------------- */

.app .admin-ev-filter-card { margin-bottom: 16px; }
.app .admin-ev-filter-form { display: flex; flex-direction: column; gap: 12px; }
.app .admin-ev-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.app .admin-ev-form-field { display: flex; flex-direction: column; }
.app .admin-ev-form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 4px;
}
.app .admin-ev-form-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.4;
}
.app .admin-ev-form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.app .admin-ev-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app .admin-ev-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.app .admin-ev-active-label {
  font-size: 12px;
  color: var(--fg-muted);
  margin-right: 4px;
}
.app .admin-ev-pill {
  padding: 2px 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--fg);
}

.app .admin-ev-table-card { padding: 0; overflow: hidden; }
.app .admin-ev-table th { white-space: nowrap; }
.app .admin-ev-row td { vertical-align: middle; }

.app .admin-ev-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--fg-muted);
  white-space: nowrap;
}

.app .admin-ev-time { white-space: nowrap; }

.app .admin-ev-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.app .admin-ev-meta-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.app .admin-ev-arrow { width: 12px; height: 12px; color: var(--fg-subtle); }

.app .admin-ev-meta-details summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  color: var(--fg-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
  max-width: 320px;
}
.app .admin-ev-meta-details summary::-webkit-details-marker { display: none; }
.app .admin-ev-meta-details summary:hover { color: var(--accent); }
.app .admin-ev-meta-details[open] summary { color: var(--fg); }
.app .admin-ev-meta-pre {
  margin: 6px 0 0;
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--fg);
  max-height: 240px;
  overflow-y: auto;
  max-width: 480px;
}

.app .admin-ev-empty { text-align: center; padding: 48px 24px; }
.app .admin-ev-empty svg.lucide,
.app .admin-ev-empty i[data-lucide] { margin-bottom: 12px; }
.app .admin-ev-empty h3 { margin: 0 0 6px; }
.app .admin-ev-empty p { color: var(--fg-muted); margin: 0; }

/* === Worker 5 (arena + games + workflow) — append below this line === */

/* === Worker 6a (vigil) — append below this line === */

/* === Worker 6b (talsam) — append below this line === */

/* === Worker 6c (benchmarks/mtad) — append below this line === */

/* === Worker 7 (global admin) — append below this line === */

/* === Worker 8 (user-facing standalone) — append below this line === */

/* === Scale Ascend — shared (Worker 0) ====================================
 * Structural patterns from scale-ascend (mono eyebrows, hairline dividers,
 * fluid display headlines, pill CTAs, signature gradient for slide decks).
 * Skinned with Discovery's redesign tokens (--bg, --surface-1, --fg, --accent).
 * All rules scoped to `.app.scale-ascend` so they only apply on /ascend/* pages.
 * ====================================================================== */

.app.scale-ascend {
  /* Slightly tighter line-height for the editorial feel. */
  line-height: 1.5;
}

/* Mono uppercase eyebrow — strongest scale-ascend brand tic. */
.app.scale-ascend .ascend-eyebrow {
  font-family: var(--font-mono, "Geist Mono", ui-monospace, "SFMono-Regular", monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 12px;
}

/* Hairline section divider — instead of cards or backgrounds. */
.app.scale-ascend .ascend-hairline {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 48px 0;
}

/* Fluid display headlines — tracking-tighter, large clamp. */
.app.scale-ascend .ascend-display-2xl {
  font-family: var(--font-display, "Geist", "Inter", system-ui, sans-serif);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.75rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--fg);
}

/* White-on-near-black pill CTA. */
.app.scale-ascend .ascend-pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.app.scale-ascend .ascend-pill-cta:hover { opacity: 0.85; }

/* Faint dot grain — mirrors scale-ascend's body::before treatment. */
.app.scale-ascend.dark::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--fg) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  opacity: 0.025;
}

/* Signature gradient (cyan→indigo→violet→pink) — reserved for slide decks. */
.app.scale-ascend .scale-gradient-text {
  background: linear-gradient(90deg, #7DD3FC, #818CF8, #A78BFA, #E879A8, #F472B6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.app.scale-ascend .scale-gradient-bar {
  height: 4px;
  background: linear-gradient(90deg, #7DD3FC, #818CF8, #A78BFA, #E879A8, #F472B6);
  border-radius: 2px;
}

/* === Scale Ascend — top nav === */
.app.scale-ascend .ascend-topnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.app.scale-ascend .ascend-topnav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.app.scale-ascend .ascend-topnav-brand {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--fg);
}
.app.scale-ascend .ascend-topnav-brand-mark {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.app.scale-ascend .ascend-topnav-brand-subtitle {
  font-size: 11px;
  color: var(--fg-subtle);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.app.scale-ascend .ascend-topnav-links {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.app.scale-ascend .ascend-topnav-link {
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 14px;
}
.app.scale-ascend .ascend-topnav-link:hover {
  background: var(--surface-2);
  color: var(--fg);
}
.app.scale-ascend .ascend-topnav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* === Scale Ascend — account dropdown === */
.app.scale-ascend .ascend-account-dropdown {
  position: relative;
}
.app.scale-ascend .ascend-account-trigger {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
  cursor: pointer;
  font-size: 13px;
}
.app.scale-ascend .ascend-account-trigger:hover { border-color: var(--border-strong); }
.app.scale-ascend .ascend-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 50;
}
.app.scale-ascend .ascend-account-menu-section { padding: 6px; }
.app.scale-ascend .ascend-account-menu-eyebrow {
  font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 4px 8px 6px;
}
.app.scale-ascend .ascend-account-menu-item {
  display: block;
  width: 100%;
  text-align: start;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.app.scale-ascend .ascend-account-menu-item:hover { background: var(--surface-2); }
.app.scale-ascend .ascend-account-menu-item.is-active { color: var(--accent); }
.app.scale-ascend .ascend-account-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* === Scale Ascend — locale switcher === */
.app.scale-ascend .ascend-locale-switcher {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.app.scale-ascend .ascend-locale-form { display: inline-flex; }
.app.scale-ascend .ascend-locale-btn {
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  cursor: pointer;
}
.app.scale-ascend .ascend-locale-btn.is-active {
  background: var(--accent);
  color: var(--accent-fg);
}

/* === Scale Ascend — main shell (no sidebar) === */
.app.scale-ascend .ascend-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
  position: relative;
  z-index: 1;
}
.app.scale-ascend .ascend-section { margin-bottom: 64px; }
.app.scale-ascend .ascend-section-lede {
  font-size: 18px;
  color: var(--fg-muted);
  max-width: 640px;
  margin: 8px 0 32px;
}

.app.scale-ascend .ascend-hero {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.app.scale-ascend .ascend-hero-inner { max-width: 720px; }
.app.scale-ascend .ascend-hero-lede {
  font-size: 18px;
  color: var(--fg-muted);
  margin: 16px 0 32px;
  max-width: 560px;
}
.app.scale-ascend .ascend-hero-cta { display: flex; gap: 12px; }

/* === Scale Ascend — footer === */
.app.scale-ascend .ascend-footer {
  border-top: 1px solid var(--border);
  margin-top: 96px;
  padding: 24px 0;
}
.app.scale-ascend .ascend-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app.scale-ascend .ascend-footer-meta {
  font-size: 12px;
  color: var(--fg-subtle);
}

/* === Scale Ascend — Worker 1 (lessons) — append below this line === */

/* --- Lesson catalog (index) --- */
.app.scale-ascend .ascend-lessons-grid {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.app.scale-ascend .ascend-lesson-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  position: relative;
  transition: border-color 160ms ease;
}
.app.scale-ascend .ascend-lesson-card:hover { border-color: var(--border-strong); }
.app.scale-ascend .ascend-lesson-card.is-locked { opacity: 0.7; }
.app.scale-ascend .ascend-lesson-card-link {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: inherit;
}
.app.scale-ascend .ascend-lesson-card-title {
  font-size: 18px;
  margin: 8px 0 6px;
}
.app.scale-ascend .ascend-lesson-card-desc {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0 0 12px;
}
.app.scale-ascend .ascend-lesson-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--fg-subtle);
}

/* --- Filter chips --- */
.app.scale-ascend .ascend-lesson-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: flex-end;
  margin: 24px 0 8px;
}
.app.scale-ascend .ascend-chip-group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app.scale-ascend .ascend-chip-select {
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
}
.app.scale-ascend .ascend-chip-clear {
  font-size: 12px;
  color: var(--fg-muted);
  text-decoration: underline;
}

/* --- Lesson reader (slide deck) --- */
.app.scale-ascend .ascend-lesson {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  outline: none;
}
@media (min-width: 1200px) {
  .app.scale-ascend .ascend-lesson {
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas:
      "header header"
      "body toc";
  }
  .app.scale-ascend .ascend-lesson-header { grid-area: header; }
  .app.scale-ascend .ascend-lesson-body   { grid-area: body; }
  .app.scale-ascend .ascend-lesson-toc    { grid-area: toc; }
}
.app.scale-ascend .ascend-lesson-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--fg-subtle);
  margin-top: 8px;
}
.app.scale-ascend .ascend-lesson-slide {
  display: none;
  min-height: 320px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.app.scale-ascend .ascend-lesson-slide.is-active {
  display: block;
}
/* When JS fails entirely, the controller never connects → no `is-active` is
   set. Stack all slides vertically so the lesson remains readable. */
.app.scale-ascend .ascend-lesson:not([data-controller~="sa-lesson-deck"]) .ascend-lesson-slide {
  display: block;
}
.app.scale-ascend .ascend-lesson-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.app.scale-ascend .ascend-lesson-counter {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 12px;
  color: var(--fg-subtle);
}
.app.scale-ascend .ascend-pill-cta.is-secondary {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg);
}
.app.scale-ascend .ascend-pill-cta[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- TOC right-rail --- */
.app.scale-ascend .ascend-lesson-toc ol {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 13px;
  position: sticky;
  top: 96px;
}
.app.scale-ascend .ascend-lesson-toc li { padding: 4px 0; }
.app.scale-ascend .ascend-lesson-toc a {
  color: var(--fg-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 10px;
  display: block;
}
.app.scale-ascend .ascend-lesson-toc a.is-active {
  color: var(--fg);
  border-left-color: var(--accent);
}
.app.scale-ascend .ascend-lesson-toc a:hover { color: var(--fg); }

/* --- Inline :::quiz widget --- */
.app.scale-ascend .ascend-quiz {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  background: var(--surface-1);
  margin: 16px 0;
}
.app.scale-ascend .ascend-quiz-question {
  font-weight: 600;
  margin: 0 0 12px;
}
.app.scale-ascend .ascend-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app.scale-ascend .ascend-quiz-option {
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.app.scale-ascend .ascend-quiz-option:hover { border-color: var(--border-strong); }
.app.scale-ascend .ascend-quiz.is-answered .ascend-quiz-option {
  cursor: default;
}
.app.scale-ascend .ascend-quiz-option.is-correct {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.12);
}
.app.scale-ascend .ascend-quiz-option.is-incorrect {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
}
.app.scale-ascend .ascend-quiz-explanation {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--fg-muted);
}
.app.scale-ascend .ascend-quiz-error {
  color: #dc2626;
  font-size: 13px;
  border: 1px dashed #dc2626;
  padding: 8px 12px;
  border-radius: 8px;
}

/* --- Micro-lessons --- */
.app.scale-ascend .ascend-micro-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.app.scale-ascend .ascend-micro-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  background: var(--surface-1);
}
.app.scale-ascend .ascend-micro-card h3 {
  font-size: 14px;
  margin: 0 0 6px;
}
.app.scale-ascend .ascend-micro-card p {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
}

/* --- Admin lesson management --- */
.app.scale-ascend .ascend-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.app.scale-ascend .ascend-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.app.scale-ascend .ascend-admin-table th,
.app.scale-ascend .ascend-admin-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.app.scale-ascend .ascend-admin-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}
.app.scale-ascend .ascend-admin-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.app.scale-ascend .ascend-link-button {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--fg-muted);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.app.scale-ascend .ascend-admin-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin-top: 24px;
}
.app.scale-ascend .ascend-admin-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app.scale-ascend .ascend-admin-field input[type="text"],
.app.scale-ascend .ascend-admin-field input[type="number"],
.app.scale-ascend .ascend-admin-field textarea {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  padding: 8px 10px;
  font-size: 14px;
}
.app.scale-ascend .ascend-admin-field textarea {
  resize: vertical;
}
.app.scale-ascend .ascend-admin-monospace {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 13px;
}
.app.scale-ascend .ascend-admin-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.app.scale-ascend .ascend-admin-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.app.scale-ascend .ascend-admin-hint {
  font-size: 12px;
  color: var(--fg-subtle);
  margin: 0;
}
.app.scale-ascend .ascend-admin-errors {
  border: 1px solid #dc2626;
  border-radius: 8px;
  padding: 12px 16px;
  background: rgba(220, 38, 38, 0.06);
  color: var(--fg);
}
.app.scale-ascend .ascend-admin-errors ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

/* === Scale Ascend — Worker 2 (slide decks) — append below this line === */

/* Catalog (index) */
.app.scale-ascend .ascend-slide-decks-index .ascend-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}
.app.scale-ascend .ascend-deck-card {
  background: var(--surface-1, #11131a);
  border: 1px solid var(--border, #2a2d3a);
  border-radius: 14px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.app.scale-ascend .ascend-deck-card:hover {
  border-color: var(--accent, #b66bff);
  transform: translateY(-1px);
}
.app.scale-ascend .ascend-deck-card-link {
  display: block;
  padding: 20px 22px;
  color: inherit;
  text-decoration: none;
}
.app.scale-ascend .ascend-deck-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #b66bff);
  margin-bottom: 10px;
}
.app.scale-ascend .ascend-deck-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--fg, #e7e9ec);
}
.app.scale-ascend .ascend-deck-subtitle {
  font-size: 14px;
  color: var(--fg-muted, #8a8f98);
  margin: 0 0 10px;
}
.app.scale-ascend .ascend-deck-meta {
  font-size: 12px;
  color: var(--fg-subtle, #5a626e);
  margin: 0;
}

/* Show (embedded reader) */
.app.scale-ascend .ascend-slide-deck-show .ascend-deck-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 24px 0;
  color: var(--fg-muted, #8a8f98);
  font-size: 14px;
}
.app.scale-ascend .ascend-deck-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

/* Presenter fullscreen layout */
.app.scale-ascend.ascend-presenter-body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}
.app.scale-ascend .ascend-presenter-main {
  margin: 0;
  padding: 0;
}
.app.scale-ascend .ascend-presenter {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 10%, rgba(182, 107, 255, 0.18), transparent 60%),
              radial-gradient(circle at 80% 90%, rgba(83, 195, 255, 0.16), transparent 55%),
              #050608;
  display: flex;
  flex-direction: column;
  color: var(--fg, #e7e9ec);
}
.app.scale-ascend .ascend-presenter-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* Presenter chrome bar (top) */
.app.scale-ascend .ascend-presenter-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 5;
}
.app.scale-ascend .ascend-presenter-chrome > * {
  pointer-events: auto;
}
.app.scale-ascend .ascend-presenter-exit,
.app.scale-ascend .ascend-presenter-fullscreen {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg, #e7e9ec);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
}
.app.scale-ascend .ascend-presenter-exit:hover,
.app.scale-ascend .ascend-presenter-fullscreen:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}
.app.scale-ascend .ascend-presenter-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.app.scale-ascend .ascend-presenter-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, #b66bff);
}
.app.scale-ascend .ascend-presenter-deck-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg, #e7e9ec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app.scale-ascend .ascend-presenter-counter {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted, #8a8f98);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 6px 12px;
}
.app.scale-ascend .ascend-presenter-counter-sep {
  margin: 0 4px;
  color: var(--fg-subtle, #5a626e);
}

/* Progress bar (top edge, beneath chrome) */
.app.scale-ascend .ascend-presenter-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 4;
}
.app.scale-ascend .ascend-presenter-progress-bar {
  height: 100%;
  background: linear-gradient(to right, var(--accent, #b66bff), #53c3ff);
  transition: width 0.25s ease;
}

/* Speaker notes drawer (slides up from bottom) */
.app.scale-ascend .ascend-presenter-notes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 40vh;
  overflow-y: auto;
  background: rgba(10, 11, 15, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 28px 28px;
  z-index: 6;
  transform: translateY(0);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.app.scale-ascend .ascend-presenter-notes.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.app.scale-ascend .ascend-presenter-notes-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, #b66bff);
  margin-bottom: 10px;
}
.app.scale-ascend .ascend-presenter-notes-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg, #e7e9ec);
}
.app.scale-ascend .ascend-presenter-notes-body p { margin: 0 0 10px; }
.app.scale-ascend .ascend-presenter-notes-body ul,
.app.scale-ascend .ascend-presenter-notes-body ol { margin: 0 0 10px; padding-inline-start: 20px; }
.app.scale-ascend .ascend-presenter-notes-body a {
  color: var(--accent, #b66bff);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Keyboard-shortcut hint (bottom-right, fades on hover) */
.app.scale-ascend .ascend-presenter-hint {
  position: absolute;
  bottom: 16px;
  right: 20px;
  font-size: 11px;
  color: var(--fg-muted, #8a8f98);
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
  opacity: 0.7;
  z-index: 3;
}
.app.scale-ascend .ascend-presenter-hint kbd {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 10px;
  margin: 0 2px;
}

/* === Scale Ascend — Worker 3 (workshops) — append below this line === */

.app.scale-ascend .ascend-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 24px;
}
.app.scale-ascend .ascend-section-lede {
  font-size: 18px;
  color: var(--fg-muted);
  margin: 12px 0 32px;
  max-width: 720px;
}
.app.scale-ascend .ascend-empty {
  color: var(--fg-muted);
  font-size: 16px;
  padding: 32px 0;
}

/* Workshops index — card grid */
.app.scale-ascend .ascend-workshops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}
.app.scale-ascend .ascend-workshop-card {
  background: var(--surface-1, #11131a);
  border: 1px solid var(--border, #2a2d3a);
  border-radius: 14px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.app.scale-ascend .ascend-workshop-card:hover {
  border-color: var(--accent, #b66bff);
  transform: translateY(-1px);
}
.app.scale-ascend .ascend-workshop-card-link {
  display: block;
  padding: 20px 22px;
  color: inherit;
  text-decoration: none;
}
.app.scale-ascend .ascend-workshop-kind {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #b66bff);
  margin-bottom: 10px;
}
.app.scale-ascend .ascend-workshop-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--fg, #e7e9ec);
}
.app.scale-ascend .ascend-workshop-meta {
  font-size: 13px;
  color: var(--fg-muted, #8a8f98);
  margin: 0;
}

/* Workshop show */
.app.scale-ascend .ascend-workshop-show .ascend-workshop-meta-list {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 24px 0;
  color: var(--fg-muted);
  font-size: 14px;
}
.app.scale-ascend .ascend-workshop-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 32px;
}
.app.scale-ascend .ascend-link-secondary {
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Workshop step form */
.app.scale-ascend .ascend-workshop-step .ascend-display-md {
  font-size: 32px;
  font-weight: 600;
  margin: 12px 0 16px;
  color: var(--fg, #e7e9ec);
}
.app.scale-ascend .ascend-workshop-prompt {
  background: var(--surface-1, #11131a);
  border-left: 3px solid var(--accent, #b66bff);
  padding: 16px 20px;
  margin: 0 0 24px;
  border-radius: 0 8px 8px 0;
  color: var(--fg, #e7e9ec);
  line-height: 1.55;
}
.app.scale-ascend .ascend-workshop-form {
  margin-top: 24px;
}
.app.scale-ascend .ascend-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.app.scale-ascend .ascend-form-textarea {
  width: 100%;
  min-height: 220px;
  background: var(--surface-1, #11131a);
  color: var(--fg, #e7e9ec);
  border: 1px solid var(--border, #2a2d3a);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}
.app.scale-ascend .ascend-form-textarea:focus {
  border-color: var(--accent, #b66bff);
  outline: none;
}
.app.scale-ascend .ascend-workshop-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.app.scale-ascend .ascend-error-step {
  background: rgba(228, 90, 90, 0.08);
  border: 1px solid rgba(228, 90, 90, 0.3);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 24px;
  color: #f3c5c5;
}

/* Verdict callout */
.app.scale-ascend .ascend-workshop-verdict {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1, #11131a);
}
.app.scale-ascend .ascend-workshop-verdict.is-passed {
  border-color: rgba(92, 198, 137, 0.45);
}
.app.scale-ascend .ascend-workshop-verdict.is-failed {
  border-color: rgba(228, 90, 90, 0.45);
}
.app.scale-ascend .ascend-workshop-feedback {
  margin: 8px 0 0;
  color: var(--fg, #e7e9ec);
  line-height: 1.55;
}

/* Workshop report */
.app.scale-ascend .ascend-workshop-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 0 40px;
  padding: 24px;
  background: var(--surface-1, #11131a);
  border-radius: 14px;
  border: 1px solid var(--border, #2a2d3a);
}
.app.scale-ascend .ascend-workshop-summary dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.app.scale-ascend .ascend-workshop-summary dd {
  font-size: 28px;
  font-weight: 600;
  color: var(--fg, #e7e9ec);
  margin: 0;
}
.app.scale-ascend .ascend-workshop-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app.scale-ascend .ascend-workshop-step-item {
  position: relative;
  padding: 18px 22px 18px 28px;
  background: var(--surface-1, #11131a);
  border: 1px solid var(--border, #2a2d3a);
  border-radius: 12px;
}
.app.scale-ascend .ascend-workshop-step-item.is-passed {
  border-left: 3px solid rgba(92, 198, 137, 0.6);
}
.app.scale-ascend .ascend-workshop-step-item.is-failed {
  border-left: 3px solid rgba(228, 90, 90, 0.6);
}
.app.scale-ascend .ascend-workshop-step-badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.app.scale-ascend .ascend-workshop-step-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--fg, #e7e9ec);
}
.app.scale-ascend .ascend-workshop-step-feedback {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.55;
}
.app.scale-ascend .ascend-workshop-report-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 32px;
}

/* === Scale Ascend — Worker 4 (agent builder) — append below this line === */

/* Index — card grid of the user's agents. */
.app.scale-ascend .ascend-agents-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}
.app.scale-ascend .ascend-agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.app.scale-ascend .ascend-agent-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 120ms, transform 120ms;
}
.app.scale-ascend .ascend-agent-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.app.scale-ascend .ascend-agent-card-link {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px;
  text-decoration: none;
  color: inherit;
}
.app.scale-ascend .ascend-agent-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}
.app.scale-ascend .ascend-agent-card-body { min-width: 0; }
.app.scale-ascend .ascend-agent-card-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app.scale-ascend .ascend-agent-card-meta {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  margin: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.app.scale-ascend .ascend-agent-card-status {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.app.scale-ascend .ascend-agent-card-status.is-active { color: var(--success); }
.app.scale-ascend .ascend-agent-card-status.is-draft { color: var(--fg-subtle); }
.app.scale-ascend .ascend-agent-card-status.is-paused { color: var(--warning); }

/* New-agent form card. */
.app.scale-ascend .ascend-agents-new-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  max-width: 560px;
}

/* Editor TOC skin — flatter & monospace eyebrow flavour to match Scale Ascend. */
.app.scale-ascend .ascend-agents-editor .agent-editor-toc a {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  border-radius: 0;
  border-inline-start: 2px solid transparent;
  padding-inline-start: 14px;
}
.app.scale-ascend .ascend-agents-editor .agent-editor-toc a:hover {
  background: transparent;
  color: var(--fg);
  border-inline-start-color: var(--border);
}
.app.scale-ascend .ascend-agents-editor .agent-editor-toc a.is-active {
  background: transparent;
  color: var(--fg);
  border-inline-start-color: var(--accent);
}

/* Editor sections — replace card backgrounds with Scale Ascend hairline. */
.app.scale-ascend .ascend-agents-editor .agent-editor-section {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 28px 0 0;
}
.app.scale-ascend .ascend-agents-editor .agent-editor-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.app.scale-ascend .ascend-agents-editor .agent-editor-section header h2 {
  font-family: var(--font-display, "Geist", "Inter", system-ui, sans-serif);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.app.scale-ascend .ascend-agents-editor .agent-editor-section.is-danger {
  border-top-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

/* Studio show — eyebrow above the agent title. */
.app.scale-ascend .ascend-agents-studio .agent-studio-identity .ascend-eyebrow {
  margin-bottom: 4px;
}

/* === Scale Ascend — Worker 5 (dashboard / paths / badges / catalog) — append below this line === */

/* Shared progress bar (used by dashboard + paths) */
.app.scale-ascend .ascend-progress {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0 4px;
}
.app.scale-ascend .ascend-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 240ms ease;
}
.app.scale-ascend .ascend-progress-meta {
  font-size: 12px;
  color: var(--fg-subtle);
}

.app.scale-ascend .ascend-empty-state {
  color: var(--fg-muted);
  font-size: 14px;
  padding: 24px 0;
}

.app.scale-ascend .ascend-section-lede {
  font-size: 16px;
  color: var(--fg-muted);
  margin: 12px 0 24px;
  max-width: 640px;
}

/* --- Dashboard --- */
.app.scale-ascend .ascend-dashboard-path-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin: 24px 0;
  background: var(--surface-1);
}
.app.scale-ascend .ascend-dashboard-path-title {
  font-size: 24px;
  margin: 8px 0 4px;
}
.app.scale-ascend .ascend-dashboard-path-title a {
  color: inherit;
  text-decoration: none;
}
.app.scale-ascend .ascend-dashboard-path-title a:hover {
  text-decoration: underline;
}
.app.scale-ascend .ascend-dashboard-path-desc {
  color: var(--fg-muted);
  margin: 0 0 12px;
}

/* --- Badge grid (shared by dashboard + badges index) --- */
.app.scale-ascend .ascend-badge-grid {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.app.scale-ascend .ascend-badge-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  transition: border-color 160ms ease, transform 160ms ease;
}
.app.scale-ascend .ascend-badge-card a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  text-decoration: none;
  color: inherit;
}
.app.scale-ascend .ascend-badge-card:hover { border-color: var(--border-strong); }
.app.scale-ascend .ascend-badge-card.is-earned      { border-color: var(--accent); }
.app.scale-ascend .ascend-badge-card.is-in-progress { opacity: 0.95; }
.app.scale-ascend .ascend-badge-card.is-locked      { opacity: 0.6; }
.app.scale-ascend .ascend-badge-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.app.scale-ascend .ascend-badge-title {
  font-size: 16px;
  margin: 0 0 4px;
}
.app.scale-ascend .ascend-badge-desc,
.app.scale-ascend .ascend-badge-status {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
}
.app.scale-ascend .ascend-badges-section { margin-top: 32px; }

/* --- App catalog --- */
.app.scale-ascend .ascend-app-grid {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.app.scale-ascend .ascend-app-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  position: relative;
  transition: border-color 160ms ease;
}
.app.scale-ascend .ascend-app-card:hover { border-color: var(--border-strong); }
.app.scale-ascend .ascend-app-card.is-locked { opacity: 0.7; }
.app.scale-ascend .ascend-app-card-link {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: inherit;
}
.app.scale-ascend .ascend-app-card-title {
  font-size: 18px;
  margin: 0 0 8px;
}
.app.scale-ascend .ascend-app-card-blurb {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0;
}
.app.scale-ascend .ascend-locked-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--surface-2);
  color: var(--fg-muted);
}
.app.scale-ascend .ascend-app-detail .ascend-app-customers {
  margin-top: 24px;
}
.app.scale-ascend .ascend-app-customers-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.app.scale-ascend .ascend-app-customers-list li {
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--fg-muted);
}
.app.scale-ascend .ascend-linked-lessons {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.app.scale-ascend .ascend-linked-lessons li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.app.scale-ascend .ascend-linked-lesson-meta {
  font-size: 12px;
  color: var(--fg-subtle);
}

/* --- Paths --- */
.app.scale-ascend .ascend-paths-grid {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.app.scale-ascend .ascend-path-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  transition: border-color 160ms ease;
}
.app.scale-ascend .ascend-path-card:hover { border-color: var(--border-strong); }
.app.scale-ascend .ascend-path-card-link {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: inherit;
}
.app.scale-ascend .ascend-path-card-title {
  font-size: 20px;
  margin: 0 0 8px;
}
.app.scale-ascend .ascend-path-card-desc {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0 0 12px;
}
.app.scale-ascend .ascend-path-lessons {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.app.scale-ascend .ascend-path-lesson {
  display: grid;
  grid-template-columns: 32px 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.app.scale-ascend .ascend-path-lesson-index {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 12px;
  color: var(--fg-subtle);
}
.app.scale-ascend .ascend-path-lesson-check {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.app.scale-ascend .ascend-path-lesson.is-completed .ascend-path-lesson-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface-1);
}
.app.scale-ascend .ascend-path-lesson-link {
  color: inherit;
  text-decoration: none;
}
.app.scale-ascend .ascend-path-lesson-link:hover { text-decoration: underline; }
.app.scale-ascend .ascend-path-lesson.is-completed .ascend-path-lesson-link {
  color: var(--fg-muted);
}
.app.scale-ascend .ascend-path-lesson-meta {
  font-size: 12px;
  color: var(--fg-subtle);
}

/* --- Badge detail --- */
.app.scale-ascend .ascend-badge-detail-icon {
  font-size: 64px;
  line-height: 1;
  margin: 8px 0 16px;
}
.app.scale-ascend .ascend-badge-detail-status {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  margin-bottom: 16px;
}
.app.scale-ascend .ascend-badge-detail-status.is-earned {
  border-color: var(--accent);
  color: var(--accent);
}
.app.scale-ascend .ascend-badge-criteria {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.app.scale-ascend .ascend-badge-criterion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
}
.app.scale-ascend .ascend-badge-criterion.is-met {
  color: var(--fg);
}
.app.scale-ascend .ascend-badge-criterion-mark {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 14px;
  width: 20px;
  display: inline-block;
  text-align: center;
}

/* === Scale Ascend — Worker 6 (i18n + RTL: [dir="rtl"] rules) — append below this line === */

/* Locale switcher transitions (LTR + RTL).
   The page does a full reload after locale change; these rules just smooth
   the gap between click and reload by fading the switcher and disabling
   pointer events on its buttons. */
.app.scale-ascend .ascend-locale-switcher {
  transition: opacity 120ms ease;
}
.app.scale-ascend .ascend-locale-switcher.is-switching {
  opacity: 0.5;
  pointer-events: none;
}
.app.scale-ascend .ascend-locale-btn[disabled] {
  cursor: progress;
}

/* RTL — Arabic and other right-to-left locales.
   Most Scale Ascend chrome already uses logical properties (gap, text-align:
   start, padding shorthand) so renders correctly under [dir="rtl"]. The rules
   below only mirror the few elements that still rely on physical properties
   (positioning, transforms, fixed-corner classes from Tailwind utilities). */

[dir="rtl"] .app.scale-ascend .ascend-account-menu {
  /* Account menu is anchored to the trigger's leading edge in LTR via
     `right: 0`. In RTL the trigger sits on the left, so flip to `left: 0`
     and clear the LTR right value. */
  right: auto;
  left: 0;
}

[dir="rtl"] .app.scale-ascend .ascend-topnav-links {
  /* Visually reverse the order of nav items in RTL so the first <a> in the
     DOM (Modules) appears at the visual leading edge (the right side). */
  flex-direction: row-reverse;
}

[dir="rtl"] .app.scale-ascend .ascend-topnav-right {
  /* Locale switcher + account dropdown stay grouped, but their internal
     order should flip so the chevron-bearing account button sits on the
     visual leading edge (left, in RTL). */
  flex-direction: row-reverse;
}

[dir="rtl"] .app.scale-ascend .ascend-account-trigger [data-lucide="chevron-down"] {
  /* Mirror the account-trigger chevron in RTL. Scoped to the account trigger
     deliberately — chevron icons elsewhere may be non-directional (e.g.
     accordion/expand toggles in upcoming worker UI), so we flip per-component
     instead of globally. Future workers introducing a directional chevron
     should add their own scoped rule alongside it. */
  transform: scaleX(-1);
}

/* Skip-to-main link uses Tailwind utilities focus:left-4 / focus:top-4 in the
   layout. The skip link only matters at focus time (sr-only otherwise), so
   we mirror it to focus:right-4 in RTL via an attribute override. */
[dir="rtl"] .app.scale-ascend a[href="#main-content"]:focus {
  left: auto !important;
  right: 1rem !important;
}

/* Footer items justify-between already RTL-safe via flex; copyright text
   uses logical-direction shorthand. No additional rule needed. */


/* =============================================================================
   Simulation participant player — full-bleed 2-column shell. Sits inside
   the dashboard_v2 layout (sidebar + topbar visible) for logged-in users,
   or inside the bare `public` layout for anonymous kiosk users. Rather
   than hardcoding the topbar height (which misses flash banners, the
   streak data div, etc. rendered above .app-shell), we lock the layout
   chain at 100vh via :has() and let flexbox give the player whatever is
   actually left below the chrome.
   ============================================================================= */
body.app:has(.simulation-player) {
  height: 100vh;
  overflow: hidden;
}
body.app:has(.simulation-player) .app-shell,
body.app:has(.simulation-player) .main-wrap {
  height: 100vh;
  min-height: 0;
}
body.app:has(.simulation-player) main#main-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Kiosk path: the participant view wraps itself in <div class="app dark">.
   That wrapper directly contains the player and must constrain its height. */
.app.dark:has(> .simulation-player) {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.app .simulation-player {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.app .simulation-player-header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.app .simulation-player-header-left,
.app .simulation-player-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app .simulation-player-header-right {
  font-size: 13px;
  color: var(--fg-muted);
}
.app .simulation-player-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.app .simulation-player-icon.is-red-team {
  background: var(--danger-soft);
  color: var(--danger);
}
.app .simulation-player-title {
  color: var(--fg);
  font-weight: 600;
  font-size: 14px;
}
.app .chip.is-red-team {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}
.app .chip.is-observational {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
  border-color: transparent;
}
.app .simulation-player-turn-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.app .simulation-player-tools-popover { position: relative; }
.app .simulation-player-tools-popover summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-muted);
}
.app .simulation-player-tools-popover summary::-webkit-details-marker { display: none; }
.app .simulation-player-tools-popover .popover-body {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 320px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 50;
}
.app .simulation-player-tools-popover .popover-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  margin-bottom: 8px;
}
.app .simulation-player-tools-popover ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app .simulation-player-tools-popover .tool-name {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.app .simulation-player-tools-popover .tool-desc {
  font-size: 11.5px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin-top: 2px;
}

.app .simulation-player-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms;
}
.app .simulation-player-reset-btn:hover {
  background: var(--surface-3);
  color: var(--fg);
}

.app .simulation-player-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 3fr 2fr;
  min-height: 0;
}
.app .simulation-player-visual {
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
.app .simulation-player .agent-chat {
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  border: none;
  border-radius: 0;
  border-left: 1px solid var(--border);
}
.app .simulation-player .agent-chat-scroll {
  flex: 1;
}

/* The participant chat wraps its bubbles in an inner div so SSE-streamed
   bubbles can be appended to a stable target. The .agent-chat-scroll's
   `gap` only spaces its DIRECT children, so apply our own flex+gap on the
   inner list. */
.app .simulation-chat-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tool-call description + arguments label — used by both the JS-rendered
   live tool card (composer_controller.js) and the server-rendered
   finalized card (_finalized_tool_call.html.erb). */
.app .agent-tool-call .body .tool-description {
  font-size: 12px;
  color: var(--fg-muted);
  font-style: italic;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.app .agent-tool-call .body .args-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  margin-bottom: 4px;
}

/* ============================================================== */
/* Intro-video modal (shared by challenges + simulations)          */
/* Dismissible explainer that auto-opens on first visit.           */
/* ============================================================== */
.app dialog.intro-video-dialog {
  border: none;
  padding: 0;
  border-radius: 14px;
  background: var(--surface-1);
  color: var(--fg);
  width: min(720px, 92vw);
  max-height: 92vh;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.app dialog.intro-video-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.app .intro-video-dialog__inner {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow-y: auto;
}
.app .intro-video-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.app .intro-video-dialog__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.app .intro-video-dialog__close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  cursor: pointer;
}
.app .intro-video-dialog__close:hover {
  color: var(--fg);
  background: var(--surface-3);
}
.app .intro-video-dialog__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.app .intro-video-dialog__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.app .intro-video-dialog__caption {
  padding: 16px 20px;
  color: var(--fg-muted);
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-line;
  border-top: 1px solid var(--border);
}
.app .intro-video-dialog__footer {
  padding: 12px 18px 16px 18px;
  display: flex;
  justify-content: flex-end;
}
.app .intro-video-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--fg-muted);
  cursor: pointer;
}
.app .intro-video-trigger:hover {
  color: var(--fg);
  background: var(--surface-2);
}

/* ============================================================== */
/* Glossary popover                                                */
/* `glossary_term("...")` wraps jargon in a hoverable underline.   */
/* ============================================================== */
.app .glossary-term {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
  color: inherit;
}
.app .glossary-term:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.glossary-popover {
  background: var(--surface-1, #1c1f24);
  color: var(--fg, #eaeaf0);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  font-family: inherit;
}

/* ============================================================== */
/* Simulation narrator strip                                       */
/* Plain-English caption bar above the visual panel.               */
/* ============================================================== */
.app .simulation-narrator {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 12px 20px 0 20px;
}
.app .simulation-narrator__header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  margin-bottom: 6px;
}
.app .simulation-narrator__label {
  font-weight: 600;
}
.app .simulation-narrator__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 92px;
  overflow: hidden;
}
.app .simulation-narrator-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
  opacity: 0.55;
  transition: opacity 200ms ease;
}
/* Highlight only the newest line; older ones fade. */
.app .simulation-narrator-line:last-child {
  opacity: 1;
}
.app .simulation-narrator-line__time {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  color: var(--fg-subtle);
  flex-shrink: 0;
}
.app .simulation-narrator-line__text {
  flex: 1;
}
.app .simulation-narrator__empty {
  font-size: 12.5px;
  color: var(--fg-subtle);
  font-style: italic;
  padding: 4px 0;
}
/* Hide the placeholder when real narrator lines have arrived (via Turbo
   append) — otherwise the "Send a message…" copy hangs around next to
   live narration. */
.app .simulation-narrator__list .simulation-narrator__empty:not(:only-child) {
  display: none;
}

/* ============================================================== */
/* Simulation visual fidelity — backplates + callout overlay       */
/* Week 3 of the comprehension upgrade.                            */
/* ============================================================== */

/* Avatar slot — small circular badge for the AI/officer mascots.
   SVGs are inlined so stroke="currentColor" actually picks up these
   color tokens; otherwise they'd render in their own black-default
   context and disappear in dark mode. */
.app .simulation-avatar {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
}
.app .simulation-avatar svg,
.app .simulation-avatar img {
  width: 100%;
  height: 100%;
  display: block;
}
.app .simulation-avatar.is-agent     { color: var(--accent); }
.app .simulation-avatar.is-officer   { color: var(--warning); }

/* Inline asset (bag-luggage on passenger cards, source-document /
   email-envelope on briefing cards). Bright by default; the visual
   panel can override `color:` inline for state-specific tints
   (e.g. green/red on flagged/cleared items). */
.app .simulation-asset {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  color: var(--fg);
}
.app .simulation-asset svg,
.app .simulation-asset img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Callout overlay — transient annotation pinned over a tool's anchor. */
.app .simulation-callout {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--surface-1);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 8px 12px;
  max-width: 320px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.app .simulation-callout[data-state="visible"] {
  opacity: 1;
  transform: translateY(0);
}
.app .simulation-callout__body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
}
.app .simulation-callout__body i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.app .simulation-callout__text { flex: 1; }
.app .simulation-callout__arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--surface-1);
  border-left: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
}
.app .simulation-callout[data-arrow-side="bottom"] .simulation-callout__arrow {
  bottom: -7px;
  left: 24px;
}
.app .simulation-callout[data-arrow-side="top"] .simulation-callout__arrow {
  top: -7px;
  left: 24px;
  transform: rotate(225deg);
}

/* ============================================================== */
/* TSA scanner stage — visual representation of the machine.       */
/* Three zones (input belt | scanner tunnel | output belt) with a  */
/* bag silhouette that moves between them as the agent scans.      */
/* Wraps the X-Ray Scanner card body. CSS-only animation; Stimulus */
/* just toggles .is-scanning briefly on each new scan_log entry.   */
/* ============================================================== */
.app .tsa-stage {
  position: relative;
  height: 168px;
  margin: 4px 0 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* Conveyor belt running across the bottom. */
.app .tsa-stage__belt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  height: 18px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.05) 14px,
      rgba(255, 255, 255, 0.12) 14px,
      rgba(255, 255, 255, 0.12) 16px
    );
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.app .tsa-stage__belt::before,
.app .tsa-stage__belt::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fg-subtle);
  opacity: 0.4;
}
.app .tsa-stage__belt::before { left: 10px;  }
.app .tsa-stage__belt::after  { right: 10px; }

/* Scanner tunnel centered above the belt. */
.app .tsa-stage__tunnel {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  max-width: 60%;
}
.app .tsa-stage__chassis {
  position: relative;
  height: 116px;
  border: 1.5px solid var(--fg-muted);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.25);
  padding: 22px 14px 14px;
  display: flex;
  flex-direction: column;
}
/* Top status strip with LEDs + label */
.app .tsa-stage__display {
  position: absolute;
  top: 6px;
  left: 12px;
  right: 12px;
  height: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.app .tsa-stage__display .led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-subtle);
  opacity: 0.4;
}
.app .tsa-stage[data-scan-result="clear"]   .tsa-stage__display .led:nth-child(2) { background: var(--success); opacity: 1; box-shadow: 0 0 6px var(--success); }
.app .tsa-stage[data-scan-result="flagged"] .tsa-stage__display .led:nth-child(3) { background: var(--danger);  opacity: 1; box-shadow: 0 0 6px var(--danger);  }
.app .tsa-stage[data-scan-result="idle"]    .tsa-stage__display .led:nth-child(1) { background: var(--warning); opacity: 1; box-shadow: 0 0 6px var(--warning); }
.app .tsa-stage__display-label {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.app .tsa-stage[data-scan-result="clear"]   .tsa-stage__display-label { color: var(--success); }
.app .tsa-stage[data-scan-result="flagged"] .tsa-stage__display-label { color: var(--danger);  }

/* X-ray screen inside the chassis */
.app .tsa-stage__screen {
  flex: 1;
  position: relative;
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 40%, rgba(64, 116, 255, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(0, 30, 60, 0.55), rgba(0, 20, 40, 0.85));
  border: 1px dashed rgba(130, 143, 255, 0.32);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
}
.app .tsa-stage__screen-idle {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: rgba(130, 200, 255, 0.55);
  letter-spacing: 0.06em;
}
.app .tsa-stage__items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.app .tsa-stage__item {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(130, 200, 255, 0.12);
  color: rgba(180, 220, 255, 0.85);
  letter-spacing: 0.03em;
}
.app .tsa-stage__item.is-flagged {
  background: rgba(248, 113, 113, 0.22);
  color: rgba(255, 200, 200, 0.95);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  animation: tsaFlagPulse 1.4s ease-in-out infinite;
}
@keyframes tsaFlagPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.35); }
}

/* Sweep light bar that crosses the screen during a scan. */
.app .tsa-stage__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 16px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(130, 200, 255, 0.65),
    transparent
  );
  opacity: 0;
  pointer-events: none;
}
.app .tsa-stage.is-scanning .tsa-stage__sweep {
  animation: tsaScanSweep 1.2s ease-out 1;
}
@keyframes tsaScanSweep {
  0%   { left: -16px; opacity: 0; }
  10%  { opacity: 1;  }
  90%  { opacity: 1;  }
  100% { left: 100%;  opacity: 0; }
}

/* The bag — positioned by data-bag-position via translateX. */
.app .tsa-stage__bag {
  position: absolute;
  bottom: 22px;
  left: 0;
  transition: left 900ms cubic-bezier(0.5, 0.05, 0.2, 1),
              opacity 300ms ease;
  color: var(--fg);
  pointer-events: none;
}
.app .tsa-stage[data-bag-position="input"]          .tsa-stage__bag { left: 8%;  }
.app .tsa-stage[data-bag-position="tunnel"]         .tsa-stage__bag { left: calc(50% - 28px); }
.app .tsa-stage[data-bag-position="output-clear"]   .tsa-stage__bag { left: 88%; color: var(--success); }
.app .tsa-stage[data-bag-position="output-flagged"] .tsa-stage__bag { left: 88%; color: var(--danger); }
.app .tsa-stage.is-scanning .tsa-stage__bag {
  /* While the sweep is active the bag pauses inside the tunnel so the
     screen reveal feels synced with the scan. */
  left: calc(50% - 28px);
}

/* JS adds this for one frame to snap the bag back to "input" between
   scans without animating. Removed before the position is set to the new
   final state so the next transition glides through the tunnel. */
.app .tsa-stage.no-transition .tsa-stage__bag {
  transition: none !important;
}

/* ============================================================== */
/* Briefing Memo — drafting / sending / stamp                      */
/* Layers on top of the existing three-column visual. Stimulus     */
/* toggles classes; CSS owns all the motion.                       */
/* ============================================================== */
.app .briefing-draft {
  overflow: hidden; /* clip the stamp's rotation against draft edges */
}

/* New-draft "typing" effect — when the agent revises the draft, the
   body fades + un-blurs over 500ms so the viewer feels the new copy
   land. Not literally character-by-character typing — that's brittle
   for multi-paragraph content. */
.app .briefing-draft__body {
  transition: none;
}
.app .briefing-draft__body.is-typing {
  animation: briefingType 520ms ease-out;
}
@keyframes briefingType {
  from { opacity: 0; transform: translateY(4px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0);   }
}

/* DISTRIBUTED WITHOUT REVIEW stamp — slammed onto the draft pane
   when an unreviewed memo is sent. Persists until the run resets. */
.app .briefing-stamp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}
.app .briefing-stamp__text {
  display: inline-block;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: var(--danger);
  border: 4px solid var(--danger);
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.18);
  text-transform: uppercase;
  transform: rotate(-12deg) scale(0.4);
  transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.35);
}
.app .briefing-stamp.is-visible {
  opacity: 1;
  animation: stampPunch 480ms ease-out 1;
}
.app .briefing-stamp.is-visible .briefing-stamp__text {
  transform: rotate(-12deg) scale(1);
}
@keyframes stampPunch {
  0%   { background: rgba(248, 113, 113, 0.0); }
  25%  { background: rgba(248, 113, 113, 0.18); }
  100% { background: rgba(248, 113, 113, 0.0); }
}

/* Flying envelope — JS sets position/transform; CSS just provides
   the base styling and the transition. */
.app .briefing-envelope {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.app .briefing-envelope.is-flying {
  opacity: 1;
  /* JS animates the inner span's transform so we can read distances
     from getBoundingClientRect and apply them per-instance. */
}
.app .briefing-envelope .simulation-asset {
  transition: transform 900ms cubic-bezier(0.4, 0.0, 0.2, 1);
}