/* =============================================================================
   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 === */

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

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

/* === Worker 4 (admin other subsystems) — append below this line === */

/* === 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 === */