/* ══════════════════════════════════════════════════════════════
   BizNeuro dashboard — design system
   Loaded after styles.css and redesign.css. Everything is scoped to
   #dashboard-screen so the sign-in screen is unaffected.

   1. Tokens          5. Buttons & inputs     9. Analytics
   2. Base            6. Tables & pagination  10. Page specifics
   3. App shell       7. Segmented controls   11. Responsive
   4. Page anatomy    8. Badges, modals, code
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
#dashboard-screen {
  /* Neutrals */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-subtle: #f9fbfd;
  --surface-muted: #f1f4f8;
  --border: #e3e8ef;
  --border-strong: #d0d8e3;
  --text: #172033;
  --text-secondary: #5a6a80;
  --text-tertiary: #8794a8;

  /* Brand — matches the RouteNeuro homepage (#0057ff) and the logo navy */
  --navy: #183153;
  --brand-teal: #14a3b8;
  --primary: #0057ff;
  --primary-hover: #0048df;
  --primary-text: #0047d1;
  --primary-soft: #eef4ff;
  --primary-soft-border: #cfdfff;
  --ring: rgba(0, 87, 255, 0.16);

  /* Status */
  --success: #18794e;
  --success-soft: #e9f6ef;
  --warning: #b25e09;
  --warning-soft: #fff4e5;
  --danger: #ce2c31;
  --danger-soft: #feebec;
  --info: #0b68cb;
  --info-soft: #eaf3ff;

  /* Shape & depth */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
  --shadow-primary: 0 1px 2px rgba(0, 72, 223, 0.24), 0 0 0 1px rgba(0, 72, 223, 0.6) inset;

  /* Type */
  --font-sans: "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --sidebar-width: 248px;
  --header-height: 56px;
  --content-max: 1280px;

  /* Legacy variable names used by styles.css / redesign.css */
  --accent: var(--primary);
  --accent-alt: var(--primary-hover);
  --cyan: var(--primary);
  --cyan-rgb: 0, 87, 255;
  --teal: var(--primary);
  --em: var(--primary);
  --em-dim: var(--primary-soft);
  --line: var(--border);
  --line2: var(--primary-soft-border);
  --surface-1: var(--surface);
  --surface-2: var(--surface-subtle);
  --surface2: var(--surface-muted);
  --bg-card: var(--surface);
  --void: var(--surface-subtle);
  --deep: var(--surface-muted);
  --ink: var(--surface);
  --muted: var(--text-secondary);
  --text-primary: var(--text);
  --text-muted: var(--text-secondary);
  --text-success: var(--success);
  --shadow: none;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
}

/* ── 2. Base ───────────────────────────────────────────────── */
#dashboard-screen,
#dashboard-screen button,
#dashboard-screen input,
#dashboard-screen select,
#dashboard-screen textarea {
  font-family: var(--font-sans);
}

#dashboard-screen code,
#dashboard-screen pre,
#dashboard-screen kbd,
#dashboard-screen .mono {
  font-family: var(--font-mono) !important;
}

#dashboard-screen .ti {
  font-family: "tabler-icons" !important;
}

#dashboard-screen ::selection {
  background: var(--primary-soft-border);
}

#dashboard-screen :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

#dashboard-screen .text-muted { color: var(--text-secondary) !important; }
#dashboard-screen .text-success,
#dashboard-screen .text-green { color: var(--success) !important; }
#dashboard-screen .text-danger { color: var(--danger) !important; }
#dashboard-screen .text-cyan { color: var(--primary-text) !important; }

/* ── 3. App shell ──────────────────────────────────────────── */
/* body is overflow:hidden (styles.css), so the content column is the scroller */
#dashboard-screen .page-wrapper-main-inside {
  display: flex;
  height: 100vh;
  min-height: 0;
  align-items: stretch;
}

#dashboard-screen .page-left-panel {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

#dashboard-screen .topbar {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 12px 12px;
  gap: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#dashboard-screen .topbar-brand {
  display: flex;
  align-items: center;
  flex: 0 0 var(--header-height);
  min-height: var(--header-height);
  padding: 0 8px;
  margin-bottom: 8px;
}

#dashboard-screen .topbar-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#dashboard-screen .brand-mark-hd {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

#dashboard-screen .brand-wordmark {
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

#dashboard-screen .topbar-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  min-height: 0;
  margin: 0 -12px;
  padding: 0 12px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#dashboard-screen .nav-group-label {
  padding: 18px 10px 6px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-transform: uppercase;
}

#dashboard-screen .nav-tab,
#dashboard-screen .nav-tab[data-page="playground"],
#dashboard-screen .nav-tab[data-page="documentation"] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

#dashboard-screen .nav-tab .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 18px;
}

#dashboard-screen .nav-tab .nav-tab-trailing {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 14px;
}

#dashboard-screen .nav-tab:hover:not(.active) {
  background: var(--surface-muted);
  color: var(--text);
}

#dashboard-screen .nav-tab.active {
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 600;
  box-shadow: none;
}

#dashboard-screen .nav-tab.active .icon {
  color: var(--primary);
}

#dashboard-screen .nav-tab.active::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}

#dashboard-screen .sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

#dashboard-screen .sidebar-credits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-subtle);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

#dashboard-screen .sidebar-credits:hover {
  border-color: var(--primary-soft-border);
  background: var(--primary-soft);
}

#dashboard-screen .sidebar-credits-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#dashboard-screen .sidebar-credits-label {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 14px;
  text-transform: uppercase;
}

#dashboard-screen .sidebar-credits-value {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}

#dashboard-screen .sidebar-credits-action {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

#dashboard-screen .sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 0;
}

#dashboard-screen .sidebar-user-avatar {
  display: inline-flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--primary));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#dashboard-screen .sidebar-user-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

#dashboard-screen .sidebar-user-copy strong,
#dashboard-screen .sidebar-user-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboard-screen .sidebar-user-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

#dashboard-screen .sidebar-user-copy span {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 16px;
}

#dashboard-screen .sidebar-icon-btn {
  display: inline-flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: 17px;
  cursor: pointer;
}

#dashboard-screen .sidebar-icon-btn:hover {
  border-color: var(--border);
  background: var(--surface-muted);
  color: var(--danger);
}

#dashboard-screen .page-right-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
}

#dashboard-screen .app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-height);
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(246, 248, 251, 0.88);
  backdrop-filter: saturate(180%) blur(10px);
}

#dashboard-screen .app-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

#dashboard-screen .app-breadcrumb .ti {
  color: var(--text-tertiary);
  font-size: 14px;
}

#dashboard-screen .app-breadcrumb-current {
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboard-screen .app-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#dashboard-screen .app-plan-pill {
  padding: 3px 10px;
  border: 1px solid var(--primary-soft-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

#dashboard-screen .app-header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

#dashboard-screen .app-header-link:hover {
  background: var(--surface-muted);
}

#dashboard-screen .billing-blocked-banner {
  margin: 16px 32px 0;
  border-radius: var(--radius);
}

#dashboard-screen .sticky-footer {
  display: none;
}

/* ── 4. Page anatomy ───────────────────────────────────────── */
#dashboard-screen .page-right-panel > .page {
  padding: 28px 32px 64px;
}

#dashboard-screen .page-right-panel .page.active {
  animation: dashboardPageIn 160ms ease-out both;
}

@keyframes dashboardPageIn {
  from { opacity: 0.4; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

#dashboard-screen .page-container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0;
}

#dashboard-screen .card-header-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

#dashboard-screen .card-header-flex.mb-3 { margin-bottom: 20px; }

#dashboard-screen .card-header-left { min-width: 0; }

#dashboard-screen .card-header-right {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#dashboard-screen .page-title,
#dashboard-screen .analytics-title {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
}

#dashboard-screen .subtext {
  max-width: 720px;
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 20px;
}

#dashboard-screen .dash-card,
#dashboard-screen .welcome-card {
  margin: 0 0 16px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  backdrop-filter: none;
  animation: none;
}

#dashboard-screen .dash-card:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

#dashboard-screen .dash-card.p-0 {
  padding: 0;
  overflow: hidden;
}

#dashboard-screen .dash-card > .card-header-flex:last-child { margin-bottom: 0; }

#dashboard-screen .dash-card.p-0 > .card-header-flex {
  margin: 0;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border);
}

#dashboard-screen .dash-card h2,
#dashboard-screen .dash-card h3,
#dashboard-screen .dash-card h4,
#dashboard-screen .dash-card .title-h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.005em;
}

#dashboard-screen .dash-card p,
#dashboard-screen .dash-card label {
  color: var(--text);
}

#dashboard-screen .dash-card .subtext,
#dashboard-screen .dash-card .stat-label {
  color: var(--text-secondary);
}

/* Section label, e.g. "USAGE & PERFORMANCE" */
#dashboard-screen .section-label,
#dashboard-screen .analytics-section-title,
#dashboard-screen .routing-details-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-transform: uppercase;
}

#dashboard-screen .analytics-section-title::after { display: none; }

/* Stat / KPI cards — label, value, sub-line, pastel icon tile top-right */
#dashboard-screen .stat-grid,
#dashboard-screen .analytics-kpi-grid,
#dashboard-screen #page-apikeys .api-key-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 0 0 20px;
}

#dashboard-screen .analytics-kpi-grid { margin: 0; }

#dashboard-screen .analytics-kpi-card,
#dashboard-screen .analytics-stat-card,
#dashboard-screen #page-apikeys .api-key-summary-card,
#dashboard-screen .stat-card {
  position: relative;
  min-height: 96px;
  margin: 0;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
  transition: border-color 120ms ease;
}

#dashboard-screen .analytics-kpi-card:nth-child(n),
#dashboard-screen .analytics-stat-card:hover,
#dashboard-screen .analytics-kpi-card:hover {
  background: var(--surface);
  box-shadow: none;
}

#dashboard-screen .analytics-kpi-card:hover,
#dashboard-screen .analytics-stat-card:hover {
  border-color: var(--border-strong);
}

#dashboard-screen .analytics-kpi-card::before,
#dashboard-screen .analytics-kpi-card:nth-child(n)::before {
  display: none;
}

#dashboard-screen .kpi-card-label,
#dashboard-screen .analytics-stat-label,
#dashboard-screen #page-apikeys .api-key-summary-label,
#dashboard-screen .stat-card .stat-label {
  display: block;
  margin: 0 40px 8px 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
}

#dashboard-screen .kpi-card-value,
#dashboard-screen .analytics-stat-value,
#dashboard-screen #page-apikeys .api-key-summary-value,
#dashboard-screen .stat-card .stat-value {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

#dashboard-screen .kpi-card-value.text-muted,
#dashboard-screen .kpi-card-value.text-cyan {
  color: var(--text) !important;
}

#dashboard-screen .kpi-card-sub,
#dashboard-screen .analytics-stat-sub {
  display: block;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 16px;
}

#dashboard-screen .kpi-card-sub.positive { color: var(--success); }

#dashboard-screen .kpi-card-icon,
#dashboard-screen #page-apikeys .api-key-summary-icon,
#dashboard-screen .icon-tile {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: var(--radius);
  font-size: 17px;
}

#dashboard-screen #page-apikeys .api-key-summary-icon svg { width: 17px; height: 17px; }

#dashboard-screen .icon-tile { position: static; flex: 0 0 auto; }

#dashboard-screen .tint-indigo,
#dashboard-screen .kpi-card-icon.indigo,
#dashboard-screen #page-apikeys .api-key-summary-icon.total { background: #eef4ff; color: #0057ff; }
#dashboard-screen .tint-blue,
#dashboard-screen .kpi-card-icon.blue { background: #eaf2ff; color: #2f6fe4; }
#dashboard-screen .tint-green,
#dashboard-screen .kpi-card-icon.green,
#dashboard-screen #page-apikeys .api-key-summary-icon.active { background: #e8f7ef; color: #1b8a5a; }
#dashboard-screen .tint-mint,
#dashboard-screen .kpi-card-icon.mint { background: #e6f7f4; color: #0f8f7d; }
#dashboard-screen .tint-amber,
#dashboard-screen .kpi-card-icon.amber,
#dashboard-screen #page-apikeys .api-key-summary-icon.credits { background: #fff4e0; color: #c26a05; }
#dashboard-screen .tint-red,
#dashboard-screen .kpi-card-icon.red { background: #fdeeee; color: #d4383e; }
#dashboard-screen .tint-pink,
#dashboard-screen .kpi-card-icon.pink { background: #fdeef6; color: #c93a85; }
#dashboard-screen .tint-slate,
#dashboard-screen .kpi-card-icon.slate { background: var(--surface-muted); color: var(--text-secondary); }

/* Empty states */
/* .analytics-no-data stays hidden until JS adds .show or sets display */
#dashboard-screen .analytics-no-data.show,
#dashboard-screen .empty-state {
  display: flex;
}

#dashboard-screen .analytics-no-data,
#dashboard-screen .empty-state {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

#dashboard-screen .analytics-no-data-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-subtle);
  color: var(--text-tertiary);
  font-size: 20px;
  opacity: 1;
}

/* ── 5. Buttons & inputs ───────────────────────────────────── */
#dashboard-screen .btn-primary,
#dashboard-screen .btn-success,
#dashboard-screen .btn-ghost,
#dashboard-screen .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

#dashboard-screen .btn-primary svg,
#dashboard-screen .btn-ghost svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

#dashboard-screen .btn-primary,
#dashboard-screen .btn-success,
#dashboard-screen #btn-create-key,
#dashboard-screen #btn-save-user-config,
#dashboard-screen #btn-add-provider-key {
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}

#dashboard-screen .btn-primary:hover,
#dashboard-screen .btn-success:hover,
#dashboard-screen #btn-create-key:hover,
#dashboard-screen #btn-save-user-config:hover,
#dashboard-screen #btn-add-provider-key:hover {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  color: #fff;
  box-shadow: var(--shadow-primary);
}

#dashboard-screen .btn-ghost,
#dashboard-screen .btn-secondary,
#dashboard-screen .page-right-panel .btn-ghost {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

#dashboard-screen .btn-ghost:hover,
#dashboard-screen .btn-secondary:hover,
#dashboard-screen .page-right-panel .btn-ghost:hover {
  border-color: var(--border-strong);
  background: var(--surface-muted);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

#dashboard-screen .btn-ghost:disabled,
#dashboard-screen .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

#dashboard-screen .btn-sm,
#dashboard-screen .btn-ghost.btn-sm {
  min-height: 30px;
  padding: 0 10px !important;
  font-size: 13px !important;
}

#dashboard-screen .btn-danger,
#dashboard-screen .btn-ghost.danger {
  border: 1px solid #f6c9cb;
  background: var(--surface);
  color: var(--danger);
}

#dashboard-screen .btn-danger:hover {
  background: var(--danger-soft);
}

#dashboard-screen .btn-icon {
  border-radius: var(--radius);
}

#dashboard-screen .input-inline,
#dashboard-screen .select-input,
#dashboard-screen .page-right-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
#dashboard-screen .page-right-panel select,
#dashboard-screen .page-right-panel textarea,
#dashboard-screen .modal-card input:not([type="checkbox"]):not([type="radio"]),
#dashboard-screen .modal-card select,
#dashboard-screen .modal-card textarea {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--text);
  font-size: 14px;
  box-shadow: var(--shadow-xs);
  color-scheme: light;
}

#dashboard-screen .page-right-panel textarea,
#dashboard-screen .modal-card textarea {
  padding: 10px 12px;
}

#dashboard-screen .page-right-panel input::placeholder,
#dashboard-screen .page-right-panel textarea::placeholder,
#dashboard-screen .modal-card input::placeholder {
  color: var(--text-tertiary);
}

#dashboard-screen .page-right-panel input:focus,
#dashboard-screen .page-right-panel select:focus,
#dashboard-screen .page-right-panel textarea:focus,
#dashboard-screen .modal-card input:focus,
#dashboard-screen .modal-card select:focus,
#dashboard-screen .modal-card textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

#dashboard-screen .input-group {
  gap: 6px;
}

#dashboard-screen .input-group label,
#dashboard-screen .form-label {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
}

#dashboard-screen .input-hint {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 16px;
}

#dashboard-screen .settings-form-grid {
  display: grid;
  gap: 20px;
}

#dashboard-screen .slider-value {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 600;
}

#dashboard-screen .settings-slider {
  height: 4px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  background: var(--surface-muted) !important;
  box-shadow: none !important;
  accent-color: var(--primary);
}

#dashboard-screen .settings-slider::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  background: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 1px 3px rgba(16, 24, 40, 0.2);
}

#dashboard-screen .settings-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  background: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

/* Option cards, e.g. routing strategy */
#dashboard-screen .radio-group { gap: 12px; }

#dashboard-screen .radio-label {
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
  transition: border-color 120ms ease, background-color 120ms ease;
}

#dashboard-screen .radio-label:hover { border-color: var(--border-strong); }

#dashboard-screen .radio-label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--ring);
}

#dashboard-screen .radio-label span {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}

#dashboard-screen .radio-label small {
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: none;
}

#dashboard-screen .toggle-row {
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

#dashboard-screen .toggle-switch {
  width: 36px;
  height: 20px;
}

#dashboard-screen .toggle-slider {
  background: var(--border-strong);
}

#dashboard-screen .toggle-slider:before {
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
}

#dashboard-screen .toggle-switch input:checked + .toggle-slider { background: var(--primary); }
#dashboard-screen .toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px); }

/* ── 6. Tables & pagination ────────────────────────────────── */
#dashboard-screen .table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface);
}

#dashboard-screen .page-right-panel .table-toolbar input {
  width: min(100%, 320px);
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px;
  padding-left: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b919d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  background-position: 11px center;
  background-repeat: no-repeat;
}

#dashboard-screen .table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 0;
}

#dashboard-screen .data-table,
#dashboard-screen .license-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  color: var(--text);
}

#dashboard-screen .data-table th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 16px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

#dashboard-screen .data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  line-height: 20px;
  vertical-align: middle;
}

#dashboard-screen .data-table tbody tr:last-child td { border-bottom: 0; }

#dashboard-screen .data-table tbody tr:hover td { background: var(--surface-subtle); }

#dashboard-screen .data-table td.text-center.text-muted,
#dashboard-screen .data-table td[colspan] {
  padding: 40px 16px !important;
  color: var(--text-secondary) !important;
  text-align: center;
}

#dashboard-screen .data-table .text-right,
#dashboard-screen .data-table th.num,
#dashboard-screen .data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#dashboard-screen .data-table code,
#dashboard-screen .key-prefix {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text);
  font-size: 12px;
}

#dashboard-screen .license-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
}

#dashboard-screen .license-table tr:last-child td { border-bottom: 0; }

#dashboard-screen .license-table td:first-child {
  width: 40%;
  color: var(--text-secondary);
}

#dashboard-screen .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

#dashboard-screen .pagination .btn-ghost {
  min-height: 30px;
  padding: 0 10px;
  font-size: 13px;
}

#dashboard-screen .pagination .btn-ghost svg { width: 14px; height: 14px; }

#dashboard-screen .pagination-info {
  color: var(--text-secondary);
  font-size: 13px;
}

/* ── 7. Segmented controls & tabs ──────────────────────────── */
#dashboard-screen .date-pills,
#dashboard-screen .scope-toggle,
#dashboard-screen .code-tabs,
#dashboard-screen .route-toggle,
#dashboard-screen .segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
  box-shadow: none;
}

#dashboard-screen .date-pill,
#dashboard-screen .scope-btn,
#dashboard-screen .code-tab,
#dashboard-screen .route-toggle-btn {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  box-shadow: none;
  cursor: pointer;
}

#dashboard-screen .date-pill:hover:not(.active),
#dashboard-screen .scope-btn:hover:not(.active),
#dashboard-screen .code-tab:hover:not(.active),
#dashboard-screen .route-toggle-btn:hover:not(.active) {
  background: transparent;
  color: var(--text);
}

#dashboard-screen .date-pill.active,
#dashboard-screen .scope-btn.active,
#dashboard-screen .code-tab.active,
#dashboard-screen .route-toggle-btn.active {
  border: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px rgba(16, 24, 40, 0.04);
}

/* Section tab bar — one full-width, underlined strip used by Settings,
   Super Admin and the CIO dashboard */
#dashboard-screen .settings-tabs-wrapper,
#dashboard-screen .admin-tabs-wrapper {
  width: 100%;
  margin: 0 0 24px;
}

#dashboard-screen .admin-tabs-wrap { width: 100%; }

#dashboard-screen .settings-tabs,
#dashboard-screen .admin-tabs,
#dashboard-screen #page-cio .tab-nav {
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
}

#dashboard-screen .settings-tabs::-webkit-scrollbar,
#dashboard-screen .admin-tabs::-webkit-scrollbar { display: none; }

#dashboard-screen .settings-tab,
#dashboard-screen .admin-tab,
#dashboard-screen #page-cio .tab-btn {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 0 0 -1px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

#dashboard-screen .settings-tab .ti,
#dashboard-screen .admin-tab .ti {
  color: var(--text-tertiary);
  font-size: 17px;
}

#dashboard-screen .settings-tab:hover:not(.active),
#dashboard-screen .admin-tab:hover:not(.active),
#dashboard-screen #page-cio .tab-btn:hover:not(.active) {
  border-bottom-color: var(--border-strong);
  background: transparent;
  color: var(--text);
}

#dashboard-screen .settings-tab.active,
#dashboard-screen .admin-tab.active,
#dashboard-screen #page-cio .tab-btn.active {
  border-bottom-color: var(--primary);
  background: transparent;
  color: var(--primary-text);
  font-weight: 600;
  box-shadow: none;
}

#dashboard-screen .settings-tab.active .ti,
#dashboard-screen .admin-tab.active .ti { color: var(--primary); }

#dashboard-screen .admin-tab span { position: static; }
#dashboard-screen .tab-slider-indicator { display: none; }

/* ── 8. Badges, modals, code ───────────────────────────────── */
#dashboard-screen .chart-badge,
#dashboard-screen .analytics-section-title .chart-badge,
#dashboard-screen .badge,
#dashboard-screen .role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 16px;
  text-transform: none;
}

#dashboard-screen .role-badge {
  border-color: var(--primary-soft-border);
  background: var(--primary-soft);
  color: var(--primary-text);
  text-transform: capitalize;
}

#dashboard-screen .modal-overlay {
  background: rgba(15, 17, 26, 0.42);
  backdrop-filter: blur(2px);
}

#dashboard-screen .modal-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
}

#dashboard-screen .modal-card,
#log-details-modal .modal-card {
  padding: 20px 24px 24px;
  animation: none;
}

#dashboard-screen .modal-header,
#log-details-modal .modal-header {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: auto;
  margin: 0 0 16px;
  padding: 0;
}

#dashboard-screen .modal-header .modal-close,
#log-details-modal .modal-header .modal-close {
  position: static;
  padding: 4px;
}

#dashboard-screen .modal-body,
#log-details-modal .modal-body {
  max-height: calc(90vh - 120px);
  padding: 0;
  font-size: 13px;
  line-height: 20px;
}

#dashboard-screen .modal-header h3,
#dashboard-screen .modal-card h3,
#log-details-modal .modal-card h3 {
  margin: 0;
  color: var(--text, #1c2024);
  font-family: "Rethink Sans", system-ui, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

#dashboard-screen .modal-close {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
}

#dashboard-screen .modal-close:hover {
  border-color: var(--border);
  background: var(--surface-muted);
  color: var(--text);
}

#dashboard-screen .global-loader-overlay {
  background: rgba(15, 17, 26, 0.24);
  backdrop-filter: blur(2px);
}

#dashboard-screen .global-loader-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
}

#dashboard-screen .global-loader-spinner { border-top-color: var(--primary); }

/* Code sample — light theme to sit on white cards */
#dashboard-screen .code-window {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-subtle);
}

#dashboard-screen .code-window-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

#dashboard-screen .code-window-dots span { width: 10px; height: 10px; }
#dashboard-screen .code-window-dots span:nth-child(1) { background: #ff5f56; }
#dashboard-screen .code-window-dots span:nth-child(2) { background: #ffbd2e; }
#dashboard-screen .code-window-dots span:nth-child(3) { background: #27c93f; }
#dashboard-screen .code-window-header { display: flex; align-items: center; justify-content: space-between; }

#dashboard-screen .code-block {
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 22px;
}

#dashboard-screen .code-block .kw { color: #0047d1; font-weight: 500; }
#dashboard-screen .code-block .str { color: #0a7b6c; }
#dashboard-screen .code-block .num { color: #b35900; }
#dashboard-screen .code-block .cmt { color: var(--text-tertiary); font-style: italic; }
#dashboard-screen .code-block .hl {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

#dashboard-screen .btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
}

#dashboard-screen .btn-copy:hover { background: var(--surface-muted); color: var(--text); }

/* ── 9. Analytics ──────────────────────────────────────────── */
#dashboard-screen .analytics-dash {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#dashboard-screen .analytics-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}

#dashboard-screen .analytics-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#dashboard-screen .custom-range input[type="date"] {
  min-height: 32px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  color-scheme: light;
}

#dashboard-screen .custom-range label {
  color: var(--text-secondary);
  font-size: 12px;
}

#dashboard-screen .analytics-charts-row,
#dashboard-screen .analytics-charts-bottom {
  gap: 16px;
  margin: 0 !important;
}

#dashboard-screen .analytics-stat-row {
  gap: 16px;
}

#dashboard-screen .analytics-stat-card { min-height: 0; }

#dashboard-screen .analytics-chart-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

#dashboard-screen .analytics-chart-canvas-wrap { height: 240px; }
#dashboard-screen .analytics-chart-canvas-wrap.tall { height: 260px; }

#dashboard-screen .analytics-chart-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}

/* ── 10. Page specifics ────────────────────────────────────── */

/* API keys */
#dashboard-screen #page-apikeys .api-key-summary-card {
  display: block;
}

#dashboard-screen #page-apikeys .api-keys-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
}

#dashboard-screen #page-apikeys .api-keys-section-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

#dashboard-screen #page-apikeys .api-keys-section-header p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
}

#dashboard-screen #page-apikeys .api-keys-section-header + .dash-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#dashboard-screen #page-apikeys #btn-create-key { flex: 0 0 auto; width: auto; }

#dashboard-screen .usage-example-wrapper {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#dashboard-screen .usage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* Profile */
#dashboard-screen .profile-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#dashboard-screen .profile-meta strong { color: var(--text); font-weight: 600; }

#dashboard-screen .stat-card { text-align: left; }

#dashboard-screen #page-overview .stat-card .stat-value { font-size: 20px; }

/* Playground & EvalNeuro result tiles */
#dashboard-screen .routing-details-grid { gap: 12px; }

#dashboard-screen .rd-card,
#dashboard-screen .rd-card.highlight,
#dashboard-screen .rd-card.saving {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
}

#dashboard-screen .rd-card.highlight { border-color: var(--primary-soft-border); background: var(--primary-soft); }
#dashboard-screen .rd-card.saving { border-color: #bfe5d0; background: var(--success-soft); }

#dashboard-screen .rd-label {
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 16px;
  text-transform: none;
}

#dashboard-screen .rd-value {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#dashboard-screen .rd-card.saving .rd-value { color: var(--success); }

/* Playground — single-turn chat with a routing-details rail */
#dashboard-screen .pg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  height: calc(100vh - 220px);
  min-height: 560px;
}

#dashboard-screen .pg-chat,
#dashboard-screen .pg-details {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

#dashboard-screen .pg-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: visible; /* lets the model picker menu escape the card */
}

#dashboard-screen .pg-toolbar { position: relative; z-index: 5; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface); }
#dashboard-screen .pg-composer { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

#dashboard-screen .pg-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

#dashboard-screen .pg-target {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

#dashboard-screen .pg-target-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

#dashboard-screen .pg-target-btn .ti { font-size: 16px; }
#dashboard-screen .pg-target-btn:hover:not(.active) { color: var(--text); }

#dashboard-screen .pg-target-btn.active {
  background: var(--surface);
  color: var(--primary-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px rgba(16, 24, 40, 0.04);
}

#dashboard-screen .pg-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#dashboard-screen .pg-select > .ti {
  position: absolute;
  left: 10px;
  color: var(--text-tertiary);
  font-size: 16px;
  pointer-events: none;
}

#dashboard-screen .pg-select select {
  min-width: 210px;
  height: 36px;
  padding-left: 32px !important;
  font-size: 13px;
  cursor: pointer;
}

#dashboard-screen .pg-select-wide select { min-width: 300px; max-width: 420px; }
/* Grouped model picker: groups on the left, hovered group's models on the right */
#dashboard-screen .pg-picker { position: relative; }

#dashboard-screen .pg-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

#dashboard-screen .pg-picker-btn > .ti:first-child { color: var(--text-tertiary); font-size: 16px; }
#dashboard-screen .pg-picker-btn span { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dashboard-screen .pg-picker-caret { color: var(--text-tertiary); font-size: 14px; transition: transform 150ms ease; }
#dashboard-screen .pg-picker-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
#dashboard-screen .pg-picker-btn[aria-expanded="true"] .pg-picker-caret { transform: rotate(180deg); }

#dashboard-screen .pg-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  animation: pgMenuIn 120ms ease-out;
}

#dashboard-screen .pg-picker-menu.hidden { display: none; }

@keyframes pgMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

#dashboard-screen .pg-picker-groups {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 220px;
  padding: 6px;
  border-right: 1px solid var(--border);
  background: var(--surface-subtle);
}

#dashboard-screen .pg-picker-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

#dashboard-screen .pg-picker-group > .ti { color: var(--text-tertiary); font-size: 14px; }
#dashboard-screen .pg-picker-group.active { background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 0 0 1px var(--border); color: var(--primary-text); }
#dashboard-screen .pg-picker-group.active > .ti { color: var(--primary); }

#dashboard-screen .pg-picker-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 15px;
}

#dashboard-screen .pg-picker-group-name { flex: 1 1 auto; }

#dashboard-screen .pg-picker-count {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
}

#dashboard-screen .pg-picker-flyout {
  display: flex;
  flex-direction: column;
  width: 380px;
  min-height: 0;
}

/* One fixed size whatever the group, so the menu doesn't jump while hovering */
#dashboard-screen .pg-picker-menu { height: 380px; }
#dashboard-screen .pg-picker-groups { overflow-y: auto; }

#dashboard-screen .pg-picker-flyout-head {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

#dashboard-screen .pg-picker-flyout-head span { margin-left: 4px; color: var(--text-tertiary); font-size: 12px; font-weight: 400; }

#dashboard-screen .pg-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#dashboard-screen .pg-picker-model {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

#dashboard-screen .pg-picker-model:hover { background: var(--surface-muted); }
#dashboard-screen .pg-picker-model.selected { background: var(--primary-soft); }

#dashboard-screen .pg-picker-model-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }

#dashboard-screen .pg-picker-model-id {
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboard-screen .pg-picker-model-meta { color: var(--text-tertiary); font-size: 11.5px; }

#dashboard-screen .pg-picker-model-price {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

#dashboard-screen .pg-picker-model-price small { margin-left: 3px; color: var(--text-tertiary); font-family: var(--font-sans); font-size: 10.5px; }
#dashboard-screen .pg-picker-tick { visibility: hidden; color: var(--primary); font-size: 15px; }
#dashboard-screen .pg-picker-model.selected .pg-picker-tick { visibility: visible; }

#dashboard-screen .pg-new { margin-left: auto; }

#dashboard-screen .pg-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 24px;
}

#dashboard-screen .pg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 680px;
  margin: 0 auto;
  padding-top: 32px;
  text-align: center;
}

#dashboard-screen .pg-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border: 1px solid var(--primary-soft-border);
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 24px;
}

#dashboard-screen .pg-empty h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

#dashboard-screen .pg-empty p {
  max-width: 440px;
  margin: 4px 0 24px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 20px;
}

#dashboard-screen .pg-starters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

#dashboard-screen .pg-starter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

#dashboard-screen .pg-starter:hover {
  border-color: var(--primary-soft-border);
  background: var(--primary-soft);
}

#dashboard-screen .pg-starter-icon {
  display: inline-flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  font-size: 17px;
}

#dashboard-screen .pg-starter-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#dashboard-screen .pg-starter-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

#dashboard-screen .pg-starter-copy span {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 16px;
}

#dashboard-screen .pg-turn {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}

#dashboard-screen .pg-msg { display: flex; gap: 12px; }
#dashboard-screen .pg-msg-user { justify-content: flex-end; }

#dashboard-screen .pg-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

#dashboard-screen #pgUserText { white-space: pre-wrap; }

#dashboard-screen .pg-user-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

#dashboard-screen .pg-avatar {
  display: inline-flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
}

#dashboard-screen .pg-avatar img { width: 20px; height: 20px; object-fit: contain; }
#dashboard-screen .pg-answer { flex: 1 1 auto; min-width: 0; }

#dashboard-screen .pg-answer-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 5px 0 6px;
}

#dashboard-screen .pg-answer-meta strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}

#dashboard-screen .pg-answer-meta span { color: var(--text-tertiary); font-size: 12px; }

#dashboard-screen .pg-answer .response-content {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

#dashboard-screen .pg-answer .response-content.placeholder {
  color: var(--text-secondary);
  font-style: normal;
}

#dashboard-screen .pg-answer .response-content.placeholder::after {
  content: "";
  display: inline-block;
  width: 14px;
  margin-left: 2px;
  text-align: left;
  animation: pgDots 1.2s steps(4, end) infinite;
}

@keyframes pgDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

#dashboard-screen .pg-answer .response-content.response-error {
  padding: 10px 12px;
  border: 1px solid #f6c9cb;
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
}

#dashboard-screen .pg-answer .response-content pre {
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
}

#dashboard-screen .pg-answer .response-content :not(pre) > code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-muted);
  font-size: 12.5px;
}

#dashboard-screen .pg-media img {
  display: block;
  max-width: 100%;
  max-height: 480px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

#dashboard-screen .pg-download { margin-top: 10px; }

#dashboard-screen .pg-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #bfe5d0;
  border-radius: 10px;
  background: var(--success-soft);
  color: var(--text-secondary);
  font-size: 13px;
}

#dashboard-screen .pg-notice strong { color: var(--success); }

#dashboard-screen .pg-composer {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

#dashboard-screen .pg-input {
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

#dashboard-screen .pg-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

#dashboard-screen .pg-input textarea,
#dashboard-screen .pg-input textarea:focus {
  display: block;
  width: 100%;
  min-height: 46px;
  max-height: 200px;
  padding: 12px 14px 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  line-height: 22px;
  resize: none;
}

#dashboard-screen .pg-input-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 8px;
}

#dashboard-screen .pg-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
}

#dashboard-screen .pg-icon-btn:hover { border-color: var(--border); background: var(--surface-muted); color: var(--text); }

#dashboard-screen .pg-hint {
  color: var(--text-tertiary);
  font-size: 12px;
  white-space: nowrap;
}

#dashboard-screen .pg-hint kbd {
  padding: 0 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-family: var(--font-sans) !important;
  font-size: 11px;
}

#dashboard-screen .pg-send { flex: 0 0 auto; width: auto; min-height: 34px; margin-left: auto; padding: 0 12px; }
#dashboard-screen .pg-send .ti { font-size: 16px; }
#dashboard-screen .pg-send .loader { width: 14px; height: 14px; border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
#dashboard-screen .pg-send .loader:not(.hidden) + .ti { display: none; }

#dashboard-screen .pg-composer .file-preview {
  max-width: 820px;
  margin: 0 auto 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

#dashboard-screen .file-preview-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--text);
  font-size: 13px;
}

#dashboard-screen .file-preview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dashboard-screen .file-preview-meta { color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }

#dashboard-screen .file-remove-btn {
  display: inline-flex;
  padding: 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

#dashboard-screen .file-remove-btn:hover { background: var(--surface-muted); color: var(--danger); }

#dashboard-screen .pg-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
}

#dashboard-screen .pg-details-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

#dashboard-screen .pg-details-head p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 12px;
}

#dashboard-screen .pg-model-card,
#dashboard-screen .pg-saving {
  padding: 12px 14px;
  border-radius: 10px;
}

#dashboard-screen .pg-model-card {
  border: 1px solid var(--primary-soft-border);
  background: var(--primary-soft);
}

#dashboard-screen .pg-model-card .rd-value,
#dashboard-screen .pg-saving .rd-value {
  margin: 2px 0;
  font-family: var(--font-mono);
  font-size: 15px;
  word-break: break-all;
}

#dashboard-screen .pg-model-card .rd-sub,
#dashboard-screen .pg-saving .rd-sub {
  color: var(--text-secondary);
  font-size: 12px;
}

#dashboard-screen .pg-kpis { margin: 0; }

#dashboard-screen .pg-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

#dashboard-screen .pg-kpi:first-child { padding-top: 0; }
#dashboard-screen .pg-kpi:last-child { border-bottom: 0; }

#dashboard-screen .pg-kpi dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

#dashboard-screen .pg-kpi dt .ti { color: var(--text-tertiary); font-size: 16px; }

#dashboard-screen .pg-kpi dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

#dashboard-screen .pg-saving {
  margin-top: auto;
  border: 1px solid #bfe5d0;
  background: var(--success-soft);
}

#dashboard-screen .pg-saving .rd-value { color: var(--success); font-size: 18px; }

#dashboard-screen .pg-level {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
}

#dashboard-screen .pg-level-low { background: var(--success-soft); color: var(--success); }
#dashboard-screen .pg-level-medium { background: var(--warning-soft); color: var(--warning); }
#dashboard-screen .pg-level-high { background: var(--danger-soft); color: var(--danger); }
#dashboard-screen .pg-level-critical { background: #fdeef6; color: #c93a85; }

#dashboard-screen .pg-chip {
  margin-left: 4px;
  padding: 1px 6px;
  border: 1px solid var(--primary-soft-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 600;
}

#dashboard-screen .mc-selected { color: var(--success); }

/* Playground has no side rail: routing details render under each answer. */
#dashboard-screen .pg.pg-single { grid-template-columns: minmax(0, 1fr); }

#dashboard-screen .pg-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}

#dashboard-screen .pg-summary.hidden { display: none; }

#dashboard-screen .pg-meta-item { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
#dashboard-screen .pg-meta-item > span { color: var(--text-tertiary); font-family: var(--font-sans); font-size: 11.5px; }
#dashboard-screen .pg-meta-saved { color: var(--success); font-weight: 600; }
#dashboard-screen .pg-meta-saved.is-zero { color: var(--text-secondary); font-weight: 500; }
#dashboard-screen .pg-summary .pg-level { font-size: 11px; padding: 0 7px; }

/* Playground: routing controls live in the composer, beside the attach button */
#dashboard-screen .pg-single .pg-input { max-width: 920px; }
#dashboard-screen .pg-single .pg-input-actions { flex-wrap: wrap; row-gap: 6px; }
#dashboard-screen .pg-actions-sep { width: 1px; height: 20px; background: var(--border); }
#dashboard-screen .pg-target-sm { padding: 2px; }
#dashboard-screen .pg-target-sm .pg-target-btn { height: 28px; padding: 0 10px; font-size: 12.5px; }
#dashboard-screen .pg-target-sm .pg-target-btn .ti { font-size: 15px; }
#dashboard-screen .pg-select-sm .cs,
#dashboard-screen .pg-select-sm select { min-width: 190px; }
#dashboard-screen .pg-select-sm .cs-btn,
#dashboard-screen .pg-select-sm select { height: 32px; min-height: 32px; font-size: 12.5px; }
#dashboard-screen .pg-picker-up .pg-picker-btn { min-width: 240px; height: 32px; font-size: 12.5px; }
#dashboard-screen .pg-picker-up .pg-picker-menu { top: auto; bottom: calc(100% + 6px); left: auto; right: 0; animation: none; }

/* Copy button on the model answer */
#dashboard-screen .pg-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
}

#dashboard-screen .pg-copy:hover { border-color: var(--border-strong); color: var(--text); }
#dashboard-screen .pg-copy.copied { border-color: #bfe5d0; background: var(--success-soft); color: var(--success); }
#dashboard-screen .pg-copy.hidden { display: none; }
#dashboard-screen .pg-copy .ti { font-size: 14px; }

/* EvalNeuro — configure card above a results card */
#dashboard-screen .ev { display: flex; flex-direction: column; gap: 16px; }

#dashboard-screen .ev-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

#dashboard-screen .ev-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

#dashboard-screen .ev-card-title h3 { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; line-height: 22px; }
#dashboard-screen .ev-card-title p { margin: 2px 0 0; color: var(--text-tertiary); font-size: 12.5px; }
#dashboard-screen .ev-card-body { padding: 16px 18px 18px; }
#dashboard-screen .ev-card-body.hidden { display: none; }

#dashboard-screen .ev-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}

#dashboard-screen .ev-card .ev-fields,
#dashboard-screen .ev-card #evalTrafficFields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
}

#dashboard-screen .ev-card #evalTrafficFields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#dashboard-screen .ev-card .ev-fields.hidden { display: none; }
#dashboard-screen .ev-field-full { grid-column: 1 / -1; }
#dashboard-screen .ev-field > span em { margin-left: 4px; color: var(--text-tertiary); font-style: normal; font-weight: 400; }
#dashboard-screen .ev-card .ev-field input,
#dashboard-screen .ev-card .ev-field select { height: 36px; min-height: 36px; }
#dashboard-screen .ev-card .ev-stepper { align-self: flex-start; }

#dashboard-screen .ev-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

#dashboard-screen .ev-drop:hover { border-color: var(--primary); background: var(--primary-soft); }
#dashboard-screen .ev-drop > .ti { color: var(--primary); font-size: 22px; }
#dashboard-screen .ev-drop strong { display: block; font-size: 13.5px; font-weight: 600; }
#dashboard-screen .ev-drop small { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 12px; }
#dashboard-screen .ev-card .file-preview { margin-top: 8px; }

#dashboard-screen .ev-note {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--info-soft);
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 18px;
}

#dashboard-screen .ev-note .ti { color: var(--info); font-size: 16px; }

#dashboard-screen .ev-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

#dashboard-screen .ev-foot-note { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--text-tertiary); font-size: 12px; }
#dashboard-screen .ev-run { width: auto; min-height: 34px; padding: 0 14px; gap: 6px; }
#dashboard-screen .ev-run .loader { width: 14px; height: 14px; border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
#dashboard-screen .ev-run .loader:not(.hidden) + .ti { display: none; }

#dashboard-screen .ev-head-actions { display: inline-flex; align-items: center; gap: 10px; }
#dashboard-screen .ev-time { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 12px; }

#dashboard-screen .ev-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 18px;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}

#dashboard-screen .ev-empty.hidden { display: none; }
#dashboard-screen .ev-empty strong { color: var(--text); font-size: 14px; }

#dashboard-screen .ev-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

#dashboard-screen #evalSummaryGrid.traffic { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#dashboard-screen .ev-kpi {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

#dashboard-screen .ev-kpi > span { display: block; color: var(--text-secondary); font-size: 12px; }
#dashboard-screen .ev-kpi strong { display: block; margin: 4px 0 2px; color: var(--text); font-family: var(--font-mono); font-size: 18px; font-weight: 650; }
#dashboard-screen .ev-kpi small { color: var(--text-tertiary); font-size: 11.5px; }
#dashboard-screen .ev-kpi-saving { border-color: #bfe5d0; background: var(--success-soft); }
#dashboard-screen .ev-kpi-saving strong { color: var(--success); }
#dashboard-screen .ev-kpis .ev-traffic-note { grid-column: 1 / -1; margin: 0; }

#dashboard-screen .ev-status { color: var(--text-secondary); font-size: 13px; }
#dashboard-screen .ev-status-line { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
#dashboard-screen .ev-status-line strong { color: var(--text); font-weight: 600; }
#dashboard-screen .ev-status-line .loader { width: 14px; height: 14px; }
#dashboard-screen .ev-done .ev-status-line .ti { color: var(--success); font-size: 18px; }
#dashboard-screen .ev-status-sub { margin: 8px 0 0; color: var(--text-tertiary); font-size: 12px; }

#dashboard-screen .ev-progress {
  position: relative;
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}

#dashboard-screen .ev-progress span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .3s ease; }
#dashboard-screen .ev-progress.indeterminate span { animation: evSlide 1.4s ease-in-out infinite; }
@keyframes evSlide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

#dashboard-screen .ev-error { padding: 10px 12px; border: 1px solid #f6c9cb; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); }
#dashboard-screen .ev-warnings { margin: 10px 0 0; padding-left: 18px; color: var(--warning); font-size: 12.5px; }

#dashboard-screen .ev-raw { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-subtle); }
#dashboard-screen .ev-raw summary { padding: 8px 12px; color: var(--text-secondary); font-size: 12.5px; font-weight: 500; cursor: pointer; }
#dashboard-screen .ev-raw pre { max-height: 420px; margin: 0; padding: 12px; overflow: auto; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; line-height: 19px; white-space: pre-wrap; }

@media (max-width: 860px) {
  #dashboard-screen .ev-grid,
  #dashboard-screen .ev-card .ev-fields,
  #dashboard-screen .ev-card #evalTrafficFields,
  #dashboard-screen .ev-kpis,
  #dashboard-screen #evalSummaryGrid.traffic { grid-template-columns: 1fr; }
  #dashboard-screen .ev-foot-note { display: none; }
}

/* Settings → Active Models, grouped by provider like the Playground picker */
#dashboard-screen .am-groups { display: flex; flex-direction: column; gap: 12px; }

#dashboard-screen .am-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

#dashboard-screen .am-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
}

#dashboard-screen .am-group.collapsed .am-group-head { border-bottom: 0; }

#dashboard-screen .am-group-collapse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#dashboard-screen .am-group-collapse > .ti-chevron-down { color: var(--text-tertiary); font-size: 16px; transition: transform .15s; }
#dashboard-screen .am-group.collapsed .am-group-collapse > .ti-chevron-down { transform: rotate(-90deg); }
#dashboard-screen .am-group-name { font-size: 14px; font-weight: 600; }
#dashboard-screen .am-group-count { color: var(--text-tertiary); font-size: 12px; font-weight: 500; }

#dashboard-screen .am-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

#dashboard-screen .am-group-toggle:hover { background: var(--surface-muted); }

#dashboard-screen .am-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background .15s;
}

#dashboard-screen .am-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
  transition: transform .15s;
}

#dashboard-screen .am-group-toggle[aria-checked="true"] .am-switch { background: var(--primary); }
#dashboard-screen .am-group-toggle[aria-checked="true"] .am-switch::after { transform: translateX(16px); }
#dashboard-screen .am-group-toggle[aria-checked="mixed"] .am-switch { background: var(--primary-soft-border); }
#dashboard-screen .am-group-toggle[aria-checked="mixed"] .am-switch::after { transform: translateX(8px); }

#dashboard-screen .am-group-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px 14px 14px;
}

#dashboard-screen .am-group.collapsed .am-group-body { display: none; }

@media (max-width: 1100px) {
  #dashboard-screen .pg { grid-template-columns: 1fr; height: auto; min-height: 0; }
  #dashboard-screen .pg-chat { min-height: 560px; }
  #dashboard-screen .pg-saving { margin-top: 0; }
}

@media (max-width: 700px) {
  #dashboard-screen .pg-starters { grid-template-columns: 1fr; }
  #dashboard-screen .pg-hint { display: none; }
  #dashboard-screen .pg-select select,
  #dashboard-screen .pg-select-wide select { min-width: 0; width: 100%; }
}

/* EvalNeuro — same frame as the Playground */
#dashboard-screen .ev-sample {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  box-shadow: var(--shadow-xs);
}

#dashboard-screen .ev-sample .ti { color: var(--text-tertiary); font-size: 16px; }

#dashboard-screen .ev-sample input,
#dashboard-screen .ev-sample input:focus {
  width: 56px;
  min-height: 28px !important;
  height: 28px;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface-muted) !important;
  box-shadow: none !important;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
}

#page-evalneuro .pg-toolbar { gap: 12px; }
#page-evalneuro .pg-target { margin-right: 4px; }

#dashboard-screen .ev-sample-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, 440px);
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
}

#dashboard-screen .ev-sample-copy { display: flex; align-items: center; gap: 10px; }

#dashboard-screen .ev-stepper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

#dashboard-screen .ev-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 36px;
  border: 0;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
}

#dashboard-screen .ev-step:hover { background: var(--primary-soft); color: var(--primary); }

#dashboard-screen .ev-stepper input,
#dashboard-screen .ev-stepper input:focus {
  width: 56px;
  min-height: 36px !important;
  height: 36px;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}

#dashboard-screen .ev-stepper input::-webkit-outer-spin-button,
#dashboard-screen .ev-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#dashboard-screen .ev-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 14px 4px;
}

#dashboard-screen #evalTrafficFields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#dashboard-screen .ev-fields.hidden { display: none; }

#dashboard-screen .ev-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

#dashboard-screen .ev-field > span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

#dashboard-screen .ev-field input,
#dashboard-screen .ev-field select {
  width: 100%;
  min-height: 34px;
  height: 34px;
  font-size: 13px;
}

#dashboard-screen .ev-input .pg-hint { overflow: hidden; text-overflow: ellipsis; }

#dashboard-screen .ev-info { cursor: default; }
#dashboard-screen .ev-info:hover { border-color: var(--border); background: var(--surface); }

#dashboard-screen .pg-answer-meta .ev-download { margin-left: auto; }

#dashboard-screen .pg-answer .response-content.ev-progress { white-space: pre-line; }

#dashboard-screen .pg-answer .response-content.ev-result {
  max-height: 520px;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 20px;
  white-space: pre-wrap;
}

#dashboard-screen #evalSummaryGrid { display: grid; }
#dashboard-screen #evalSummaryGrid.traffic .eval-baseline-kpi { display: none; }

#dashboard-screen .ev-traffic-note {
  display: none;
  margin: auto 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 18px;
}

#dashboard-screen #evalSummaryGrid.traffic .ev-traffic-note { display: block; }

@media (max-width: 700px) {
  #dashboard-screen .ev-fields,
  #dashboard-screen #evalTrafficFields { grid-template-columns: 1fr; }
}

/* Models tab — structured list with sticky toolbar */
#dashboard-screen .catalog-section { padding: 0; }

#dashboard-screen .mc-toolbar {
  position: sticky;
  top: calc(var(--header-height) + 0px);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 0;
  background: var(--bg);
}

#dashboard-screen .mc-search,
#dashboard-screen .mc-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#dashboard-screen .mc-search > .ti,
#dashboard-screen .mc-sort > .ti {
  position: absolute;
  left: 11px;
  color: var(--text-tertiary);
  font-size: 16px;
  pointer-events: none;
}

#dashboard-screen .mc-search input { width: 220px; padding-left: 34px !important; }
#dashboard-screen .mc-sort { margin-left: auto; }
#dashboard-screen .mc-sort select { padding-left: 34px !important; font-size: 13px; cursor: pointer; }

#dashboard-screen .mc-filters { display: flex; gap: 6px; flex-wrap: wrap; }

#dashboard-screen .mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

#dashboard-screen .mc-chip .ti { font-size: 15px; }

#dashboard-screen .mc-chip span {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
}

#dashboard-screen .mc-chip:hover { border-color: var(--border-strong); color: var(--text); }
#dashboard-screen .mc-chip.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }
#dashboard-screen .mc-chip.active span { background: var(--surface); color: var(--primary-text); }

#dashboard-screen .catalog-title {
  margin: 0 0 10px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#dashboard-screen .mc-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

#dashboard-screen .mc-list-head,
#dashboard-screen .model-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 104px 80px 80px 168px;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
}

#dashboard-screen .mc-list-head {
  height: 38px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#dashboard-screen .mc-list-head .num,
#dashboard-screen .mc-metric { text-align: right; }

#dashboard-screen .model-grid { display: block; gap: 0; }

#dashboard-screen .model-card {
  position: relative;
  min-height: 72px;
  margin: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  transition: background-color 120ms ease;
  animation: mcRowIn 220ms ease-out both;
  animation-delay: calc(var(--i, 0) * 18ms);
}

#dashboard-screen .model-card:last-child { border-bottom: 0; }

@keyframes mcRowIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

#dashboard-screen .model-card::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
  opacity: 0;
  transition: opacity 120ms ease;
}

#dashboard-screen .model-card:hover { border-color: var(--border); background: var(--surface-subtle); }
#dashboard-screen .model-card:hover::before,
#dashboard-screen .model-card.selected-card::before { opacity: 1; }
#dashboard-screen .model-card.selected-card { background: var(--primary-soft); }

#dashboard-screen .mc-model { display: flex; align-items: center; gap: 12px; min-width: 0; }

#dashboard-screen .mc-group-icon {
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--primary-soft-border);
  border-radius: 9px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 17px;
}

#dashboard-screen .mc-model-copy { min-width: 0; }
#dashboard-screen .mc-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }

#dashboard-screen .mc-name {
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboard-screen .mc-copy {
  display: inline-flex;
  padding: 3px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 14px;
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease;
}

#dashboard-screen .model-card:hover .mc-copy,
#dashboard-screen .mc-copy:focus-visible { opacity: 1; }
#dashboard-screen .mc-copy:hover { background: var(--surface-muted); color: var(--text); }

#dashboard-screen .mc-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

#dashboard-screen .mc-provider-chip,
#dashboard-screen .mc-flag {
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
}

#dashboard-screen .mc-provider-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); }
#dashboard-screen .mc-flag { border: 1px solid #bfe5d0; background: var(--success-soft); color: var(--success); }

#dashboard-screen .brand-svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }
#dashboard-screen .mc-chip .brand-svg { font-size: 14px; }
#dashboard-screen .mc-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--text-tertiary); font-size: 12px; }

/* Text brand mark (used for Anthropic's "A\\") */
#dashboard-screen .brand-glyph {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

#dashboard-screen .mc-io { display: inline-flex; align-items: center; gap: 4px; }
#dashboard-screen .mc-io > .ti { color: var(--text-tertiary); font-size: 14px; }

#dashboard-screen .mc-metric {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

#dashboard-screen .mc-metric-strong { color: var(--text); font-weight: 600; }

#dashboard-screen .mc-actions { display: flex; justify-content: flex-end; }

#dashboard-screen .mc-try {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

#dashboard-screen .mc-try .ti { font-size: 14px; }
#dashboard-screen .model-card:hover .mc-try,
#dashboard-screen .mc-try:focus-visible { opacity: 1; transform: none; }

#dashboard-screen .mc-empty {
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 1000px) {
  #dashboard-screen .mc-list-head { display: none; }
  #dashboard-screen .model-card { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 8px; }
  #dashboard-screen .mc-model,
  #dashboard-screen .mc-actions { grid-column: 1 / -1; }
  #dashboard-screen .mc-metric { text-align: left; }
  #dashboard-screen .mc-metric::before { content: attr(data-label); display: block; color: var(--text-tertiary); font-family: var(--font-sans); font-size: 11px; }
  #dashboard-screen .mc-try { opacity: 1; transform: none; }
  #dashboard-screen .mc-sort { margin-left: 0; }
}

#dashboard-screen .type-badge {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  text-transform: lowercase;
}

#dashboard-screen .type-badge.image { border-color: #cfe9ef; background: #e9f7fa; color: #0e7c8c; }
#dashboard-screen .type-badge.audio,
#dashboard-screen .type-badge.video { border-color: #f6dfc4; background: #fff5e8; color: #a65a05; }

/* CIO dashboard */
#dashboard-screen #page-cio .kpi,
#dashboard-screen #page-cio .card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

#dashboard-screen #page-cio .kpi { padding: 16px 18px; }

#dashboard-screen #page-cio .kpi-lbl {
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#dashboard-screen #page-cio .card-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#dashboard-screen #page-cio .kpi-val {
  color: var(--text) !important;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

#dashboard-screen #page-cio .kpi-note { font-size: 12px; color: var(--text-tertiary); }
#dashboard-screen #page-cio .kpi-note.pos { color: var(--success); }

/* Documentation overlay */

/* Credits */
#dashboard-screen .credit-meter-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-muted);
}

#dashboard-screen .credit-meter-fill {
  border-radius: 999px;
  background: var(--primary);
}

#dashboard-screen .credit-meter-pct {
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
}

#dashboard-screen .credit-meter-state,
#dashboard-screen .credit-meter-scale span {
  color: var(--text-secondary);
}

#dashboard-screen .credit-meter-tick { background: var(--border-strong); }

/* Request details lives outside #dashboard-screen (after </main>) */
#log-details-modal {
  --bg-alt: #fafbfd;
  --text: #1c2024;
  background: rgba(15, 17, 26, 0.42);
  backdrop-filter: blur(2px);
  font-family: "Rethink Sans", system-ui, sans-serif;
}

#log-details-modal .modal-card {
  border: 1px solid #e3e6ee;
  border-radius: 14px;
  background: #ffffff;
  color: #1c2024;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
}

#dashboard-screen .modal-header,
#log-details-modal .modal-header {
  background: transparent;
  border-color: #e3e6ee;
}

#log-details-modal .modal-body,
#log-details-modal .modal-body div,
#log-details-modal .modal-body pre {
  color: #1c2024;
}

#log-details-modal .modal-close {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #5f6673;
}

#log-details-modal .modal-close:hover {
  border-color: #e3e6ee;
  background: #f2f4f8;
}

/* Global "Processing…" loader — lives outside #dashboard-screen, so it is
   styled by id. Both screens are light now. */
#global-loader-overlay {
  background: rgba(23, 32, 51, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#global-loader-overlay .global-loader-card {
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 1px solid #e3e8ef;
  border-radius: 999px;
  background: #ffffff;
  color: #172033;
  font-family: "Rethink Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
}

#global-loader-overlay .global-loader-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #cfdfff;
  border-top-color: #0057ff;
  border-right-color: #0057ff;
}

#global-loader-overlay .global-loader-text { color: #172033; }

/* KPI values while loading: light skeleton instead of the old navy shimmer */
#dashboard-screen .analytics-kpi-card.loading .kpi-card-value,
#dashboard-screen .analytics-stat-card.loading .analytics-stat-value {
  width: 96px;
  height: 26px;
  margin-top: 2px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eef2f7 25%, #f7f9fc 50%, #eef2f7 75%);
  background-size: 200% 100%;
  color: transparent !important;
  animation: shimmer 1.4s infinite;
}

/* Activity — compact rows + details drawer */
#dashboard-screen .act-count { color: var(--text-tertiary); font-size: 12px; }
#dashboard-screen .act-table td { padding-top: 10px; padding-bottom: 10px; }
#dashboard-screen .act-row { cursor: pointer; }
#dashboard-screen .act-row:hover td { background: var(--primary-soft) !important; }
#dashboard-screen .act-time { color: var(--text); font-weight: 600; }
#dashboard-screen .act-time span { margin-left: 6px; color: var(--text-secondary); font-weight: 400; }
#dashboard-screen .act-rel { color: var(--text-tertiary); font-size: 12px; }
#dashboard-screen .act-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#dashboard-screen .act-client, #dashboard-screen .act-model {
  display: inline-flex; align-items: center; gap: 5px; max-width: 220px; padding: 2px 8px;
  border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#dashboard-screen .act-client .ti, #dashboard-screen .act-model .ti { font-size: 13px; }
#dashboard-screen .act-client-web { border-color: #cfdfff; background: #eef4ff; color: #0047d1; }
#dashboard-screen .act-client-playground { border-color: #e3d9f7; background: #f3eefc; color: #5b34a8; }
#dashboard-screen .act-client-ide { border-color: #c6ebf0; background: #e8f7fa; color: #0e7c8c; }
#dashboard-screen .act-client-cli { border-color: #d3dae6; background: #eef1f6; color: #183153; }
#dashboard-screen .act-model-auto { border-color: #cfdfff; background: #eef4ff; color: #0047d1; }
#dashboard-screen .act-model-fixed { border-color: #d3dae6; background: #f1f4f8; color: #183153; font-family: var(--font-mono); font-weight: 500; }
#dashboard-screen .act-saving { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--success-soft); color: var(--success); font-size: 12px; font-weight: 700; }
#dashboard-screen .act-saving.none { background: var(--surface-muted); color: var(--text-tertiary); }
#dashboard-screen .act-saving-usd { margin-top: 2px; color: var(--text-tertiary); font-size: 11px; }
#dashboard-screen .act-chevron-col { width: 32px; color: var(--text-tertiary); text-align: right; }
#dashboard-screen .act-skel td span { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, #eef2f7 25%, #f7f9fc 50%, #eef2f7 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
#dashboard-screen .act-drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(23, 32, 51, 0.28); }
#dashboard-screen .act-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; display: flex; flex-direction: column;
  width: min(560px, 100vw); background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-pop); animation: actIn 180ms ease-out;
}
@keyframes actIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
#dashboard-screen .act-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
#dashboard-screen .act-drawer-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
#dashboard-screen .act-drawer-head p { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; }
#dashboard-screen .act-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 20px; }
#dashboard-screen .act-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#dashboard-screen .act-tile { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-subtle); }
#dashboard-screen .act-tile span { display: block; color: var(--text-secondary); font-size: 11.5px; }
#dashboard-screen .act-tile strong { font-family: var(--font-mono); font-size: 14px; }
#dashboard-screen .act-tile em { display: block; color: var(--success); font-size: 11px; font-style: normal; }
#dashboard-screen .act-tile-good { border-color: #bfe5d0; background: var(--success-soft); }
#dashboard-screen .act-tile-good strong { color: var(--success); }
#dashboard-screen .act-section h4 { margin: 0 0 10px; color: var(--text-tertiary); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
#dashboard-screen .act-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0; }
#dashboard-screen .act-dl-row { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--border); min-width: 0; }
#dashboard-screen .act-dl-row.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
#dashboard-screen .act-dl-row dt { color: var(--text-secondary); font-size: 12px; }
#dashboard-screen .act-dl-row dd { margin: 0; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
#dashboard-screen .act-dl-row dd.mono, #dashboard-screen .act-id { font-family: var(--font-mono); font-size: 12.5px; }
#dashboard-screen .act-copy { opacity: 1; }
#dashboard-screen .act-token-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
#dashboard-screen .act-token-grid > div { padding: 10px 12px; border-right: 1px solid var(--border); }
#dashboard-screen .act-token-grid > div:last-child { border-right: 0; }
#dashboard-screen .act-token-grid span { display: block; color: var(--text-secondary); font-size: 11.5px; }
#dashboard-screen .act-token-grid strong { font-family: var(--font-mono); font-size: 14px; }
#dashboard-screen .act-token-grid .good strong { color: var(--success); }
#dashboard-screen .act-conversation { display: flex; flex-direction: column; gap: 12px; }
#dashboard-screen .act-exchange { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
#dashboard-screen .act-exchange-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); color: var(--text-secondary); font-size: 12px; }
#dashboard-screen .act-step { color: var(--text); font-weight: 600; }
#dashboard-screen .act-status { margin-left: auto; padding: 0 8px; border-radius: 999px; font-weight: 600; }
#dashboard-screen .act-status.ok { background: var(--success-soft); color: var(--success); }
#dashboard-screen .act-status.err { background: var(--danger-soft); color: var(--danger); }
#dashboard-screen .act-msg { padding: 10px 12px; }
#dashboard-screen .act-msg-user { background: var(--surface); border-bottom: 1px dashed var(--border); }
#dashboard-screen .act-msg-label { display: block; margin-bottom: 4px; color: var(--text-tertiary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
#dashboard-screen .act-msg-model .act-msg-label { color: var(--primary-text); font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }
#dashboard-screen .act-msg-text { max-height: 260px; overflow-y: auto; color: var(--text); font-size: 13px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
#dashboard-screen .act-exchange-meta { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 12px; border-top: 1px solid var(--border); color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; }
#dashboard-screen .act-exchange-meta .ti { margin-right: 3px; color: var(--text-tertiary); }
#dashboard-screen .act-muted { margin: 0; color: var(--text-secondary); font-size: 13px; }
#dashboard-screen .act-skel-block { height: 64px; border-radius: 10px; background: linear-gradient(90deg, #eef2f7 25%, #f7f9fc 50%, #eef2f7 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
#dashboard-screen .act-skel-block.short { height: 36px; width: 60%; }
@media (max-width: 600px) { #dashboard-screen .act-tiles, #dashboard-screen .act-token-grid { grid-template-columns: 1fr 1fr; } }

/* Analytics: controls sit on their own row so System-wide never wraps the header */
#dashboard-screen .analytics-header .analytics-controls { flex-basis: 100%; }
#dashboard-screen .analytics-controls .date-pills { margin-left: auto; }

/* Toggles & checkboxes — one switch style and one checkbox colour everywhere */
#dashboard-screen input[type="checkbox"],
#dashboard-screen input[type="radio"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* BYOK active-model cards: switch + selected state on brand blue */
#dashboard-screen .model-map-switch { background: var(--border-strong) !important; }
#dashboard-screen .model-map-card.active .model-map-switch { background: var(--primary) !important; }
#dashboard-screen .model-map-card { border: 1px solid var(--border) !important; border-radius: 10px !important; background: var(--surface) !important; }
#dashboard-screen .model-map-card:hover { border-color: var(--border-strong) !important; }
#dashboard-screen .model-map-card.active { border-color: var(--primary-soft-border) !important; background: var(--primary-soft) !important; }
#dashboard-screen .model-map-switch::after { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2) !important; }

/* CIO alert thresholds: render the plain checkboxes as switches */
#dashboard-screen #page-cio .thr-cfg input[type="checkbox"] {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  background: var(--border-strong);
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 150ms ease;
}

#dashboard-screen #page-cio .thr-cfg input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
  transition: transform 150ms ease;
}

#dashboard-screen #page-cio .thr-cfg input[type="checkbox"]:checked { background: var(--primary); }
#dashboard-screen #page-cio .thr-cfg input[type="checkbox"]:checked::after { transform: translateX(16px); }
#dashboard-screen #page-cio .thr-cfg input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Settings switches: keep the knob perfectly centred inside the track */
#dashboard-screen .toggle-switch input:focus-visible + .toggle-slider { box-shadow: 0 0 0 3px var(--ring); }

/* Native dropdown lists — styles.css forces black options globally */
#dashboard-screen select,
#log-details-modal select { color-scheme: light; }

#dashboard-screen select option,
#dashboard-screen select optgroup,
#log-details-modal select option {
  background-color: #ffffff !important;
  color: #172033 !important;
}

#dashboard-screen select option:checked { background-color: #eef4ff !important; color: #0047d1 !important; }
#dashboard-screen select option:disabled { color: #8794a8 !important; }

#dashboard-screen select:not([multiple]):not([hidden]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238794a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 16px;
}

/* "API key created" dialog */
#dashboard-screen .key-saved-card { max-width: 520px; padding: 24px; }
#dashboard-screen .key-saved-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
#dashboard-screen .key-saved-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--success-soft); color: var(--success); font-size: 22px; }
#dashboard-screen .key-saved-head h3 { margin: 0; font-size: 17px; }
#dashboard-screen .key-saved-head p { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; }
#dashboard-screen .key-saved-box { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border: 1px solid var(--primary-soft-border); border-radius: 10px; background: var(--primary-soft); }
#dashboard-screen .key-saved-box code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text); background: transparent; font-size: 13.5px; font-weight: 500; }
#dashboard-screen .key-saved-copy { flex: 0 0 auto; }
#dashboard-screen .key-saved-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--text-secondary); font-size: 12.5px; line-height: 18px; }
#dashboard-screen .key-saved-note .ti { color: var(--warning); font-size: 16px; }
#dashboard-screen .key-saved-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
#dashboard-screen .key-saved-actions .btn-primary.modal-close {
  position: static;
  width: auto;
  min-width: 104px;
  padding: 0 16px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
#dashboard-screen .key-saved-actions .btn-primary.modal-close:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
#dashboard-screen .key-loader { width: 14px; height: 14px; margin-right: 6px; border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; vertical-align: -2px; }

/* System logs: drawer payload viewer */
#dashboard-screen .act-drawer.act-drawer-wide { width: min(820px, 100vw); }
#dashboard-screen .sl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
#dashboard-screen .sl-head h4 { margin: 0; }
#dashboard-screen .sl-size { margin-left: 6px; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
#dashboard-screen .sl-copy .ti { font-size: 14px; }
#dashboard-screen .sl-sub { margin: 4px 0 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
#dashboard-screen .sl-sub span { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--surface-muted); color: var(--text-secondary); font-size: 11px; }
#dashboard-screen .sl-box { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); font-size: 12.5px; overflow-wrap: anywhere; }
#dashboard-screen .sl-box.mono { font-family: var(--font-mono); }
#dashboard-screen .sl-pre {
  max-height: 360px;
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 19px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
#dashboard-screen .sl-response { max-height: 280px; font-family: var(--font-sans); font-size: 13px; line-height: 20px; }
#dashboard-screen .sl-block { border: 1px solid var(--border); border-radius: 8px; }
#dashboard-screen .sl-block > summary { padding: 9px 12px; color: var(--text-secondary); font-size: 12.5px; font-weight: 500; cursor: pointer; }
#dashboard-screen .sl-block > .sl-pre { border: 0; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; }
#dashboard-screen .sl-msgs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#dashboard-screen .sl-msg { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
#dashboard-screen .sl-msg > summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none; }
#dashboard-screen .sl-msg > summary::-webkit-details-marker { display: none; }
#dashboard-screen .sl-msg[open] > summary { border-bottom: 1px solid var(--border); }
#dashboard-screen .sl-msg > .sl-pre { border: 0; border-radius: 0 0 8px 8px; }
#dashboard-screen .sl-role { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: capitalize; background: var(--surface-muted); color: var(--text-secondary); }
#dashboard-screen .sl-role-user { background: #eef4ff; color: #0047d1; }
#dashboard-screen .sl-role-system { background: #f1f4f8; color: #183153; }
#dashboard-screen .sl-role-assistant { background: #e8f7fa; color: #0e7c8c; }
#dashboard-screen .sl-role-tool { background: #fff4e0; color: #a65a05; }
#dashboard-screen .sl-preview { flex: 1; min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
#dashboard-screen .sl-msg .sl-size { flex: 0 0 auto; }
#dashboard-screen .sl-token-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* System logs table: readable chips (columns unchanged) */
#dashboard-screen #sys-logs-tbody tr.hover-row:hover td { background: var(--primary-soft); }
#dashboard-screen .chip-model,
#dashboard-screen .chip-model.selected {
  display: inline-flex; max-width: 200px; padding: 2px 8px; overflow: hidden;
  border: 1px solid #d3dae6; border-radius: 999px; background: #f1f4f8; color: #183153;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap;
}
#dashboard-screen .chip-complexity { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-muted); color: var(--text-secondary); }
#dashboard-screen .chip-complexity.low { background: var(--success-soft); color: var(--success); }
#dashboard-screen .chip-complexity.medium { background: var(--warning-soft); color: var(--warning); }
#dashboard-screen .chip-complexity.high,
#dashboard-screen .chip-complexity.complex { background: var(--danger-soft); color: var(--danger); }
#dashboard-screen .badge-surface { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid #cfdfff; border-radius: 999px; background: #eef4ff; color: #0047d1; font-size: 11px; font-weight: 600; }
#dashboard-screen .badge-surface.ide { border-color: #c6ebf0; background: #e8f7fa; color: #0e7c8c; }
#dashboard-screen .badge-surface.cli { border-color: #d3dae6; background: #eef1f6; color: #183153; }
#dashboard-screen .surface-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#dashboard-screen .badge-subtle { padding: 0 6px; border-radius: 4px; background: var(--surface-muted); color: var(--text-secondary); font-size: 11px; }
#dashboard-screen .saving-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--success-soft); color: var(--success); font-size: 12px; font-weight: 700; }
#dashboard-screen .saving-tokens-badge { color: var(--success); font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; }
#dashboard-screen .cost-cell-actual { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
#dashboard-screen .cost-cell-baseline { color: var(--text-secondary); font-family: var(--font-mono); }

/* Themed dropdowns (custom-select.js) — replaces the OS-drawn <select> menu */
#dashboard-screen .cs { position: relative; display: inline-flex; max-width: 100%; vertical-align: middle; }
#dashboard-screen .cs.hidden { display: none !important; }
#dashboard-screen .cs > select.cs-native {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
  margin: 0 !important; opacity: 0 !important; pointer-events: none !important;
}
#dashboard-screen .cs-btn {
  position: relative; display: inline-flex; align-items: center; width: 100%; min-width: 0;
  min-height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: 13.5px; text-align: left;
  box-shadow: var(--shadow-xs); cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease;
}
#dashboard-screen .cs-btn:hover { border-color: var(--border-strong); }
#dashboard-screen .cs-btn:focus-visible,
#dashboard-screen .cs.cs-open .cs-btn { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--ring); }
#dashboard-screen .cs-btn:disabled { opacity: .55; cursor: not-allowed; }
#dashboard-screen .cs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dashboard-screen .cs-caret { position: absolute; right: 10px; color: var(--text-tertiary); font-size: 15px; transition: transform 150ms ease; }
#dashboard-screen .cs.cs-open .cs-caret { transform: rotate(180deg); }

/* Full-width in forms */
#dashboard-screen .input-group .cs,
#dashboard-screen .ev-field .cs,
#dashboard-screen .settings-section .cs,
#dashboard-screen .form-grp .cs,
#dashboard-screen .modal-card .cs,
#dashboard-screen .provider-settings-card .cs { display: flex; width: 100%; }

/* Toolbar selects with a leading icon */
#dashboard-screen .pg-select .cs { min-width: 210px; }
#dashboard-screen .pg-select .cs-btn { padding-left: 32px; }
#dashboard-screen .pg-select > .ti { z-index: 1; }
#dashboard-screen .mc-sort .cs-btn { padding-left: 34px; }
#dashboard-screen .mc-sort > .ti { z-index: 1; }

#dashboard-screen .cs-menu {
  position: fixed; z-index: 1000; max-width: min(420px, calc(100vw - 16px)); max-height: 320px;
  padding: 4px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow-pop); animation: pgMenuIn 120ms ease-out;
}
#dashboard-screen .cs-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; cursor: pointer;
}
#dashboard-screen .cs-option.active { background: var(--surface-muted); }
#dashboard-screen .cs-option.selected { color: var(--primary-text); font-weight: 600; }
#dashboard-screen .cs-option.selected.active,
#dashboard-screen .cs-option.selected:hover { background: var(--primary-soft); }
#dashboard-screen .cs-option .ti { visibility: hidden; color: var(--primary); font-size: 15px; }
#dashboard-screen .cs-option.selected .ti { visibility: visible; }
#dashboard-screen .cs-option.disabled { color: var(--text-tertiary); cursor: not-allowed; }
#dashboard-screen .cs-group { padding: 8px 10px 4px; color: var(--text-tertiary); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
#dashboard-screen .cs-empty { padding: 10px; color: var(--text-tertiary); font-size: 13px; }

/* Settings switches — one fixed geometry so the knob always sits inside the track.
   Older rules (48×26 track, knob top:8px) are overridden here. */
#dashboard-screen .toggle-switch {
  position: relative !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 20px !important;
}
#dashboard-screen .toggle-switch .toggle-slider {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
}
#dashboard-screen .toggle-switch .toggle-slider:before {
  top: 2px !important;
  left: 2px !important;
  bottom: auto !important;
  width: 16px !important;
  height: 16px !important;
  transform: none;
}
#dashboard-screen .toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px) !important; }

/* BYOK model cards: never let a long name squeeze the switch */
#dashboard-screen .model-map-card { gap: 12px; }
#dashboard-screen .model-map-info { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
#dashboard-screen .model-map-switch {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 20px !important;
}
#dashboard-screen .model-map-switch::after { top: 2px !important; left: 2px !important; }

/* Models excluded by the Open Source setting show as off (selection is kept
   underneath, so switching the mode back restores it). */
#dashboard-screen .model-map-card.disabled,
#dashboard-screen .model-map-card.active.disabled { background: var(--surface-subtle) !important; border-color: var(--border) !important; }
#dashboard-screen .model-map-card.disabled .model-map-switch { background: var(--border-strong) !important; }
#dashboard-screen .model-map-card.disabled .model-map-switch::after { transform: none !important; }

/* Inputs with a "$" prefix: leave room for the symbol */
#dashboard-screen .input-with-prefix { position: relative; }
#dashboard-screen .input-with-prefix .input-prefix { left: 12px !important; color: var(--text-tertiary); font-size: 14px; pointer-events: none; z-index: 1; }
#dashboard-screen .input-with-prefix input { padding-left: 28px !important; }

/* EvalNeuro traffic dates: a field-like button and a themed calendar popover */
#dashboard-screen .ev-date {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px 0 11px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs);
  color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
#dashboard-screen .ev-date > .ti-calendar-event { color: var(--primary); font-size: 16px; }
#dashboard-screen .ev-date-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
#dashboard-screen .ev-date.is-empty .ev-date-text { color: var(--text-tertiary); }
#dashboard-screen .ev-date-caret { color: var(--text-tertiary); font-size: 15px; transition: transform 150ms ease; }
#dashboard-screen .ev-date:hover { border-color: var(--border-strong); }
#dashboard-screen .ev-date[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
#dashboard-screen .ev-date[aria-expanded="true"] .ev-date-caret { transform: rotate(180deg); }
#dashboard-screen .ev-cal {
  position: fixed; z-index: 1000; width: 280px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop);
  animation: pgMenuIn 120ms ease-out;
}
#dashboard-screen .ev-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#dashboard-screen .ev-cal-head strong { color: var(--text); font-size: 14px; font-weight: 600; }
#dashboard-screen .ev-cal-nav {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-secondary); font-size: 16px; cursor: pointer;
}
#dashboard-screen .ev-cal-nav:hover:not(:disabled) { border-color: var(--border); background: var(--surface-muted); color: var(--text); }
#dashboard-screen .ev-cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }
#dashboard-screen .ev-cal-week,
#dashboard-screen .ev-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
#dashboard-screen .ev-cal-week span { padding: 4px 0; color: var(--text-tertiary); font-size: 11px; font-weight: 600; text-align: center; text-transform: uppercase; }
#dashboard-screen .ev-cal-day {
  height: 34px; padding: 0; border: 0; border-radius: var(--radius); background: transparent;
  color: var(--text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
}
#dashboard-screen .ev-cal-day:hover:not(:disabled):not(.selected) { background: var(--surface-muted); }
#dashboard-screen .ev-cal-day.outside { color: var(--text-tertiary); }
#dashboard-screen .ev-cal-day.in-range { border-radius: 0; background: var(--primary-soft); color: var(--primary-text); }
#dashboard-screen .ev-cal-day.today { box-shadow: inset 0 0 0 1px var(--primary-soft-border); font-weight: 600; color: var(--primary-text); }
#dashboard-screen .ev-cal-day.selected { border-radius: var(--radius); background: var(--primary); box-shadow: var(--shadow-primary); color: #fff; font-weight: 600; }
#dashboard-screen .ev-cal-day:disabled { color: var(--border-strong); cursor: not-allowed; background: transparent; }
#dashboard-screen .ev-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
#dashboard-screen .ev-cal-link { padding: 4px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--primary-text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
#dashboard-screen .ev-cal-link:hover:not(:disabled) { background: var(--primary-soft); }
#dashboard-screen .ev-cal-link:disabled { color: var(--text-tertiary); cursor: not-allowed; }

/* Super Admin → Users: KPI cards are filters (shorter, clickable, one selected) */
#dashboard-screen .admin-stat-filter {
  min-height: 0;
  padding: 12px 16px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
#dashboard-screen .admin-stat-filter .stat-label { margin: 0 0 4px; }
#dashboard-screen .admin-stat-filter .stat-value { font-size: 20px; line-height: 26px; }
#dashboard-screen .admin-stat-filter:hover { border-color: var(--border-strong); }
#dashboard-screen .admin-stat-filter.active { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--ring); }
#dashboard-screen .admin-stat-filter.active .stat-label { color: var(--primary-text); }
#dashboard-screen #admin-stats-row { margin-bottom: 16px; }

/* ── Organizations (org.js) ─────────────────────────────────────
   Organization header, section tabs and one content area; detail views
   (a team, a reseller customer, Super Admin's org page) reuse the same
   blocks. Theme tokens only, so it follows the design system. */

/* Header: identity on the left, switcher and actions on the right */
#dashboard-screen .org-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
#dashboard-screen .org-hero-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
#dashboard-screen .org-hero-copy { min-width: 0; }
#dashboard-screen .org-hero-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#dashboard-screen .org-hero-title .page-title { margin: 0; overflow-wrap: anywhere; }
#dashboard-screen .org-hero-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#dashboard-screen .org-hero-desc {
  max-width: 680px;
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 20px;
}
#dashboard-screen .org-hero-desc:empty { display: none; }
#dashboard-screen .org-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 18px;
}
#dashboard-screen .org-hero-meta > * { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
#dashboard-screen .org-hero-meta a:hover { color: var(--primary-text); }
#dashboard-screen .org-hero-meta .ti { font-size: 15px; }
#dashboard-screen .org-hero-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#dashboard-screen .org-picker-wrap { position: relative; display: inline-flex; align-items: center; }
#dashboard-screen .org-picker-wrap > .ti {
  position: absolute;
  left: 11px;
  z-index: 1;
  color: var(--text-tertiary);
  font-size: 15px;
  pointer-events: none;
}
#dashboard-screen .org-picker-wrap .cs { min-width: 210px; }
#dashboard-screen .org-picker-wrap .cs-btn { padding-left: 32px; font-weight: 500; }
#dashboard-screen .org-hero summary.org-icon-btn { width: 36px; padding: 0 !important; font-size: 18px; }

/* Avatars: initials on one of six theme tints */
#dashboard-screen .org-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
#dashboard-screen .org-avatar-md { width: 36px; height: 36px; font-size: 13px; }
#dashboard-screen .org-avatar-xl { width: 56px; height: 56px; border-radius: var(--radius-lg); font-size: 20px; }
#dashboard-screen .org-avatar--0 { background: var(--primary-soft); color: var(--primary-text); }
#dashboard-screen .org-avatar--1 { background: var(--success-soft); color: var(--success); }
#dashboard-screen .org-avatar--2 { background: var(--warning-soft); color: var(--warning); }
#dashboard-screen .org-avatar--3 { background: var(--info-soft); color: var(--info); }
#dashboard-screen .org-avatar--4 { background: var(--danger-soft); color: var(--danger); }
#dashboard-screen .org-avatar--5 { background: var(--surface-muted); color: var(--text-secondary); }
#dashboard-screen .org-hero .org-avatar,
#dashboard-screen .org-accept-card .org-avatar { background: linear-gradient(135deg, var(--navy), var(--primary)); color: var(--surface); }

/* Section tabs: the Settings / Super Admin underline strip, groups split by a rule */
#dashboard-screen .org-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0 0 24px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
#dashboard-screen .org-tabs::-webkit-scrollbar { display: none; }
#dashboard-screen .org-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 0 0 -1px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
#dashboard-screen .org-tab .ti { color: var(--text-tertiary); font-size: 17px; }
#dashboard-screen .org-tab:hover:not(.active) { border-bottom-color: var(--border-strong); color: var(--text); }
#dashboard-screen .org-tab.active { border-bottom-color: var(--primary); color: var(--primary-text); font-weight: 600; }
#dashboard-screen .org-tab.active .ti { color: var(--primary); }
#dashboard-screen .org-tab-sep { flex: 0 0 1px; width: 1px; margin: 12px 6px; background: var(--border); }

/* Section anatomy */
#dashboard-screen .org-section { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#dashboard-screen .org-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#dashboard-screen .org-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
#dashboard-screen .org-section-copy { min-width: 0; }
#dashboard-screen .org-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 650;
  line-height: 26px;
  letter-spacing: -0.01em;
}
#dashboard-screen .org-section-sub {
  max-width: 720px;
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 20px;
}
#dashboard-screen .org-section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#dashboard-screen .org-title-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#dashboard-screen .org-subbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#dashboard-screen .org-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--text-tertiary);
  font-size: 13px;
}
#dashboard-screen .org-crumb button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
#dashboard-screen .org-crumb button:hover { color: var(--primary-text); }
#dashboard-screen .org-crumb .ti { font-size: 14px; }
#dashboard-screen .org-crumb > span { overflow: hidden; color: var(--text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
#dashboard-screen .org-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
#dashboard-screen .org-split-main,
#dashboard-screen .org-split-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#dashboard-screen .org-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

/* KPI tiles: the dashboard's stat cards */
#dashboard-screen .org-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
#dashboard-screen .org-kpi .stat-value { font-size: 22px; overflow-wrap: anywhere; }
#dashboard-screen .org-kpi .kpi-card-sub { margin: 4px 0 0; }

/* Cards: head · body · footer */
#dashboard-screen .org-card { margin: 0; padding: 0; overflow: hidden; }
#dashboard-screen .org-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
#dashboard-screen .org-card-copy { min-width: 0; }
#dashboard-screen .org-card .org-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}
#dashboard-screen .org-card .org-card-sub { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 18px; }
#dashboard-screen .org-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#dashboard-screen .org-card-body { padding: 20px; }
#dashboard-screen .org-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-subtle);
}
#dashboard-screen .org-card-foot > :only-child { margin-left: auto; }
#dashboard-screen .org-card-foot:has(> .pagination) { padding: 0; background: var(--surface); }
#dashboard-screen .org-card-foot > .pagination { flex: 1; margin: 0; border-top: 0; }
#dashboard-screen .org-details > summary { list-style: none; border-bottom-color: transparent; cursor: pointer; }
#dashboard-screen .org-details > summary::-webkit-details-marker { display: none; }
#dashboard-screen .org-details[open] > summary { border-bottom-color: var(--border); }
#dashboard-screen .org-details-caret { color: var(--text-tertiary); font-size: 18px; transition: transform 150ms ease; }
#dashboard-screen .org-details[open] .org-details-caret { transform: rotate(180deg); }

/* Tables */
#dashboard-screen .org-toolbar { gap: 12px; }
#dashboard-screen .org-toolbar-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#dashboard-screen .org-table td { vertical-align: middle; }
#dashboard-screen .org-actions-cell { width: 1%; text-align: right; white-space: nowrap; }
#dashboard-screen .org-actions-cell > * + * { margin-left: 6px; }
#dashboard-screen .org-row-click { cursor: pointer; }
#dashboard-screen .org-chevron { color: var(--text-tertiary); font-size: 16px; transition: transform 120ms ease, color 120ms ease; }
#dashboard-screen .org-row-click:hover .org-chevron { color: var(--primary); transform: translateX(2px); }
#dashboard-screen .org-nowrap { white-space: nowrap; }
#dashboard-screen .org-log-prompt {
  max-width: 340px;
  overflow: hidden;
  color: var(--text-secondary) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dashboard-screen .org-empty-cell { padding: 36px 16px !important; }
#dashboard-screen .org-empty-row { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#dashboard-screen .org-empty-row p { margin: 0; color: var(--text-secondary); font-size: 13px; }
#dashboard-screen .org-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-subtle);
  color: var(--text-tertiary);
  font-size: 20px;
}
#dashboard-screen .org-empty-icon-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 24px; }
#dashboard-screen .org-empty-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 24px; text-align: center; }
#dashboard-screen .org-empty-card h3 { margin: 4px 0 0; font-size: 16px; }
#dashboard-screen .org-card.org-empty-card p { max-width: 480px; margin: 0; color: var(--text-secondary); }

/* People, items, badges */
#dashboard-screen .org-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
#dashboard-screen .org-who .org-avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 11.5px; }
#dashboard-screen .org-who-copy { min-width: 0; }
#dashboard-screen .org-who-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 20px;
}
#dashboard-screen .org-who-sub { overflow: hidden; color: var(--text-tertiary); font-size: 12.5px; line-height: 18px; text-overflow: ellipsis; }
#dashboard-screen .org-item-icon {
  display: inline-flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: 16px;
}
#dashboard-screen .org-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
#dashboard-screen .org-badge .ti { font-size: 12px; }
#dashboard-screen .org-badge--brand { border-color: var(--primary-soft-border); background: var(--primary-soft); color: var(--primary-text); }
#dashboard-screen .org-badge--neutral { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); }
#dashboard-screen .org-badge--outline { border-color: var(--border); background: var(--surface); color: var(--text); font-weight: 500; }
#dashboard-screen .org-badge--success { background: var(--success-soft); color: var(--success); }
#dashboard-screen .org-badge--warning { background: var(--warning-soft); color: var(--warning); }
#dashboard-screen .org-badge--danger { background: var(--danger-soft); color: var(--danger); }
#dashboard-screen .org-badge--info { background: var(--info-soft); color: var(--info); }
#dashboard-screen .org-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#dashboard-screen .org-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#dashboard-screen .org-muted { color: var(--text-secondary); }
#dashboard-screen .org-label { color: var(--text-tertiary); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
#dashboard-screen .org-role-summary { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-secondary); font-size: 13px; }
#dashboard-screen .org-role-summary strong { color: var(--text); font-weight: 600; }
#dashboard-screen .org-when { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 18px; }
#dashboard-screen .org-when .org-muted { color: var(--text-tertiary); font-size: 12px; }
#dashboard-screen .org-action { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
#dashboard-screen .org-action .ti { color: var(--text-tertiary); font-size: 16px; }
#dashboard-screen .org-reason { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: 12px; }
#dashboard-screen .org-amount-in { color: var(--success); font-weight: 600; }

/* Spend meters */
#dashboard-screen .org-meter { display: flex; flex-direction: column; gap: 6px; min-width: 160px; max-width: 260px; }
#dashboard-screen .org-meter-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-muted); }
#dashboard-screen .org-meter-track > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
#dashboard-screen .org-meter--warn .org-meter-track > span { background: var(--warning); }
#dashboard-screen .org-meter--over .org-meter-track > span { background: var(--danger); }
#dashboard-screen .org-meter-label { display: flex; align-items: baseline; gap: 4px; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
#dashboard-screen .org-meter-label strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
#dashboard-screen .org-meter-label em { margin-left: auto; color: var(--text-tertiary); font-style: normal; font-weight: 600; }
#dashboard-screen .org-meter--warn .org-meter-label em { color: var(--warning); }
#dashboard-screen .org-meter--over .org-meter-label em { color: var(--danger); }
#dashboard-screen .org-share { display: flex; align-items: center; gap: 10px; min-width: 140px; }
#dashboard-screen .org-share .org-meter-track { flex: 1; }
#dashboard-screen .org-share > span { width: 36px; color: var(--text-secondary); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* Overview side column */
#dashboard-screen .org-access { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#dashboard-screen .org-card .org-access p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 19px; }
#dashboard-screen .org-access-teams { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
#dashboard-screen .org-feed { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
#dashboard-screen .org-feed li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
#dashboard-screen .org-feed li:first-child { padding-top: 0; }
#dashboard-screen .org-feed li:last-child { padding-bottom: 0; border-bottom: 0; }
#dashboard-screen .org-feed-icon {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 14px;
}
#dashboard-screen .org-card .org-feed p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 18px; }
#dashboard-screen .org-feed strong { color: var(--text); font-weight: 600; }
#dashboard-screen .org-feed .org-muted { color: var(--text-tertiary); font-size: 12px; }

/* Forms */
#dashboard-screen .org-form { display: grid; gap: 18px; max-width: 640px; }
#dashboard-screen .org-form-wide { max-width: 880px; }
#dashboard-screen .org-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
#dashboard-screen .org-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
#dashboard-screen .org-field > .input-inline,
#dashboard-screen .org-field > .select-input,
#dashboard-screen .org-field > .cs,
#dashboard-screen .org-money .input-inline { width: 100%; max-width: none; }
/* Every field the same height, whatever its type (text, url, email, number) */
#dashboard-screen .org-field input:not([type="checkbox"]),
#dashboard-screen .org-inline-form input { box-sizing: border-box; height: 36px; padding-top: 0; padding-bottom: 0; }
#dashboard-screen .org-field > * { flex: 0 0 auto; }
/* A lone number field doesn't need the whole row */
#dashboard-screen .org-form > .org-field > input[type="number"],
#dashboard-screen .org-form > .org-field > .org-money { max-width: 320px; }
#dashboard-screen .org-card .org-help { margin: 0; color: var(--text-tertiary); font-size: 12px; line-height: 17px; }
#dashboard-screen .org-money { position: relative; display: flex; }
#dashboard-screen .org-money > span {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  color: var(--text-tertiary);
  transform: translateY(-50%);
  pointer-events: none;
}
#dashboard-screen .org-money input { padding-left: 26px !important; }
#dashboard-screen .org-inline-form { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
#dashboard-screen .org-inline-form input { flex: 1 1 200px; min-width: 0; }
#dashboard-screen .org-search { width: min(100%, 300px) !important; }
#dashboard-screen .cs:has(> .org-select-sm) { min-width: 150px; }
#dashboard-screen .cs:has(> .org-select-sm) .cs-btn { min-height: 32px; font-size: 13px; }

/* Settings: one row of segmented tabs; org value on the left, what members may change on the right */
#dashboard-screen .org-subnav { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
#dashboard-screen .org-subnav::-webkit-scrollbar { display: none; }
#dashboard-screen .org-segmented .scope-btn { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; white-space: nowrap; }
#dashboard-screen .org-segmented .scope-btn .ti { color: var(--text-tertiary); font-size: 15px; }
#dashboard-screen .org-segmented .scope-btn.active .ti { color: var(--primary); }
#dashboard-screen .org-card .am-group-body .model-map-card { cursor: pointer; }
#dashboard-screen .org-policy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 24px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
#dashboard-screen .org-policy-row:last-child { padding-bottom: 0; border-bottom: 0; }
#dashboard-screen .org-policy-side { display: flex; align-items: center; justify-content: flex-end; min-height: 36px; padding-top: 24px; }
#dashboard-screen .org-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text) !important;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
#dashboard-screen .org-toggle input { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0; opacity: 0; }
#dashboard-screen .org-toggle-track {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 150ms ease;
}
#dashboard-screen .org-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
  transition: transform 150ms ease;
}
#dashboard-screen .org-toggle input:checked + .org-toggle-track { background: var(--primary); }
#dashboard-screen .org-toggle input:checked + .org-toggle-track::after { transform: translateX(16px); }
#dashboard-screen .org-toggle input:focus-visible + .org-toggle-track { box-shadow: 0 0 0 3px var(--ring); }
#dashboard-screen .org-toggle input:disabled + .org-toggle-track { opacity: 0.5; cursor: not-allowed; }
#dashboard-screen .org-check-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#dashboard-screen .org-check-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text) !important;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
#dashboard-screen .org-check-chip:hover { border-color: var(--border-strong); }
#dashboard-screen .org-check-chip:has(input:checked) { border-color: var(--primary-soft-border); background: var(--primary-soft); color: var(--primary-text) !important; }
#dashboard-screen .org-check-chip input,
#dashboard-screen .org-check input { flex: 0 0 auto; margin: 0; }
#dashboard-screen .org-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
#dashboard-screen .org-check { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text) !important; font-size: 13px; cursor: pointer; }
#dashboard-screen .org-check-grid .org-check {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 120ms ease, background-color 120ms ease;
}
#dashboard-screen .org-check-grid .org-check:hover { border-color: var(--border-strong); }
#dashboard-screen .org-check-grid .org-check:has(input:checked) { border-color: var(--primary-soft-border); background: var(--primary-soft); }
#dashboard-screen .org-check-grid .org-check span { overflow: hidden; font-family: var(--font-mono); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }

/* Danger zone */
#dashboard-screen .org-danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
#dashboard-screen .org-danger .org-card-head { background: color-mix(in srgb, var(--danger-soft) 55%, var(--surface)); }
#dashboard-screen .org-danger .org-card-title { color: var(--danger); }
#dashboard-screen .org-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--border); }
#dashboard-screen .org-danger-row:first-child { border-top: 0; }
#dashboard-screen .org-card .org-danger-row p { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; }

/* Buttons: never full width (styles.css stretches .btn-primary); icons, danger text, solid danger */
#dashboard-screen .org-shell .btn-primary,
#dashboard-screen .org-shell .btn-ghost,
#dashboard-screen .org-shell .btn-danger,
#dashboard-screen .org-onboard .btn-primary,
#dashboard-screen .org-modal .btn-primary,
#dashboard-screen .org-modal .btn-ghost,
#dashboard-screen .org-modal .btn-danger,
#dashboard-screen #admin-orgs-view .btn-primary,
#dashboard-screen #admin-orgs-view .btn-ghost,
#dashboard-screen #admin-orgs-view .btn-danger { width: auto; }
#dashboard-screen .org-section .btn-primary .ti,
#dashboard-screen .org-section .btn-ghost .ti,
#dashboard-screen .org-section .btn-danger .ti,
#dashboard-screen .org-hero .ti,
#dashboard-screen .org-onboard .btn-primary .ti,
#dashboard-screen .org-modal .btn-ghost .ti { font-size: 16px; }
#dashboard-screen .org-section .btn-danger,
#dashboard-screen .org-modal .btn-danger,
#dashboard-screen #admin-orgs-view .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
#dashboard-screen .org-section .btn-danger.btn-sm { min-height: 30px; }
#dashboard-screen .org-btn-danger-text { color: var(--danger) !important; }
#dashboard-screen .org-btn-danger-text:hover { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)) !important; background: var(--danger-soft) !important; }
#dashboard-screen .org-modal .org-btn-danger-solid,
#dashboard-screen .org-modal .org-btn-danger-solid:hover { border-color: var(--danger); background: var(--danger); color: var(--surface); }
#dashboard-screen .org-modal .org-btn-danger-solid:hover { filter: brightness(0.94); }

/* Callouts */
#dashboard-screen .org-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
}
#dashboard-screen .org-callout .ti { flex: 0 0 auto; margin-top: 1px; font-size: 18px; }
#dashboard-screen .org-callout p { margin: 0; color: var(--text); font-size: 13.5px; line-height: 20px; }
#dashboard-screen .org-callout--info { border-color: color-mix(in srgb, var(--info) 22%, var(--surface)); background: var(--info-soft); }
#dashboard-screen .org-callout--info .ti { color: var(--info); }
#dashboard-screen .org-callout--warning { border-color: color-mix(in srgb, var(--warning) 25%, var(--surface)); background: var(--warning-soft); }
#dashboard-screen .org-callout--warning .ti { color: var(--warning); }
#dashboard-screen .org-callout--danger { border-color: color-mix(in srgb, var(--danger) 25%, var(--surface)); background: var(--danger-soft); }
#dashboard-screen .org-callout--danger .ti { color: var(--danger); }
#dashboard-screen #org-suspended-banner { margin: 0 0 16px; }
#dashboard-screen #org-suspended-banner.hidden { display: none; }

/* "More" menus */
#dashboard-screen .org-menu { position: relative; display: inline-block; }
#dashboard-screen .org-menu > summary { list-style: none; cursor: pointer; }
#dashboard-screen .org-menu > summary::-webkit-details-marker { display: none; }
#dashboard-screen .org-menu[open] > summary { border-color: var(--border-strong); background: var(--surface-muted); }
#dashboard-screen .org-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
#dashboard-screen .org-menu-panel button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
#dashboard-screen .org-menu-panel button .ti { color: var(--text-tertiary); font-size: 16px; }
#dashboard-screen .org-menu-panel button:hover { background: var(--surface-muted); }
#dashboard-screen .org-menu-panel button.danger,
#dashboard-screen .org-menu-panel button.danger .ti { color: var(--danger); }
#dashboard-screen .org-menu-panel button.danger:hover { background: var(--danger-soft); }

/* No organization yet */
#dashboard-screen .org-onboard { display: flex; justify-content: center; padding: 24px 0; }
#dashboard-screen .org-onboard.hidden { display: none; }
#dashboard-screen .org-onboard-card { width: min(100%, 620px); margin: 0; padding: 40px; text-align: center; }
#dashboard-screen .org-onboard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 28px;
}
#dashboard-screen .org-onboard-card .subtext { margin: 8px auto 24px; }
#dashboard-screen .org-onboard-list { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; text-align: left; }
#dashboard-screen .org-onboard-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
}
#dashboard-screen .org-onboard-list .kpi-card-icon { position: static; flex: 0 0 32px; }
#dashboard-screen .org-onboard-list strong { display: block; color: var(--text); font-size: 14px; line-height: 20px; }
#dashboard-screen .org-onboard-list div span { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 13px; line-height: 18px; }

/* Loading */
#dashboard-screen .org-skeleton { display: flex; flex-direction: column; gap: 16px; }
#dashboard-screen .org-skeleton.hidden { display: none; }
#dashboard-screen .org-skel {
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--surface-muted) 25%, var(--surface-subtle) 50%, var(--surface-muted) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
#dashboard-screen .org-skel-hero { height: 72px; }
#dashboard-screen .org-skel-title { width: 220px; height: 26px; border-radius: var(--radius); }
#dashboard-screen .org-skel-line { width: 420px; max-width: 80%; height: 14px; border-radius: var(--radius-sm); }
#dashboard-screen .org-skel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
#dashboard-screen .org-skel-kpi { height: 96px; }
#dashboard-screen .org-skel-card { height: 260px; }

/* Dialogs: icon, title and description; Cancel and the main action in the footer */
#dashboard-screen .org-modal .modal-card { width: min(100%, 480px); max-width: 480px; padding: 24px; border-radius: 16px; }
#dashboard-screen .org-modal-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
#dashboard-screen .org-modal-icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 22px;
}
#dashboard-screen .org-modal-icon--danger { background: var(--danger-soft); color: var(--danger); }
#dashboard-screen .org-modal-icon--success { background: var(--success-soft); color: var(--success); }
#dashboard-screen .org-modal-copy { flex: 1; min-width: 0; }
#dashboard-screen .org-modal .org-modal-copy h3 { margin: 0; font-size: 18px; font-weight: 650; line-height: 24px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
#dashboard-screen .org-modal-copy p { margin: 3px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 19px; }
#dashboard-screen .org-modal-copy p:empty { display: none; }
#dashboard-screen .org-modal .org-modal-close {
  position: static;
  display: inline-flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
}
#dashboard-screen .org-modal .org-modal-close:hover { background: var(--primary-soft); color: var(--primary-text); }
#dashboard-screen .org-modal .input-group { display: flex; flex-direction: column; gap: 6px; }
#dashboard-screen .org-modal .input-group > input,
#dashboard-screen .org-modal .input-group > select,
#dashboard-screen .org-modal .input-group > .cs { width: 100%; max-width: none; }
#dashboard-screen .org-modal .input-inline { max-width: none; }
#dashboard-screen .org-modal .subtext { margin: 0; color: var(--text-tertiary); font-size: 12.5px; line-height: 18px; }
#dashboard-screen .org-modal .subtext:empty { display: none; }
#dashboard-screen .org-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
#dashboard-screen .org-modal-actions--split { justify-content: space-between; }
#dashboard-screen .org-modal-actions .modal-close { position: static; padding: 0 14px; font-size: 14px; }
#dashboard-screen .org-modal .form-error {
  min-height: 0;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  text-align: left;
}
#dashboard-screen .org-modal .form-error:empty { display: none; }
#dashboard-screen .org-modal #org-reason-extra:empty { display: none; }
#dashboard-screen .org-modal #org-key-secret .org-modal-actions { margin-top: 20px; }
#dashboard-screen .org-accept-card { position: relative; text-align: center; }
#dashboard-screen .org-accept-card .org-avatar { margin: 8px auto 14px; }
#dashboard-screen .org-modal .org-accept-card .org-modal-close { position: absolute; top: 16px; right: 16px; margin: 0; }
#dashboard-screen .org-accept-card h3 { margin: 0; font-size: 19px; }
#dashboard-screen .org-modal .org-accept-card .subtext { max-width: 380px; margin: 6px auto 0; color: var(--text-secondary); font-size: 13.5px; }
#dashboard-screen .org-accept-card .org-modal-actions { justify-content: center; margin-top: 22px; }

/* Main menu hide / show (layout.js) in the app shell */
#dashboard-screen .nav-hide-btn {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 11;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 18px;
  cursor: pointer;
}
#dashboard-screen .nav-hide-btn:hover { border-color: var(--border); background: var(--surface-muted); color: var(--text); }
#dashboard-screen .app-header .nav-show-btn {
  position: static;
  display: none;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 -4px 0 -8px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
}
#dashboard-screen .app-header .nav-show-btn:hover { background: var(--surface-muted); color: var(--text); }
body.nav-hidden #dashboard-screen .app-header .nav-show-btn { display: inline-flex; }
#dashboard-screen .app-header .app-breadcrumb { margin-right: auto; }

@media (max-width: 1180px) {
  #dashboard-screen .org-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  #dashboard-screen .org-grid-2 { grid-template-columns: minmax(0, 1fr); }
  #dashboard-screen .org-policy-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #dashboard-screen .org-policy-side { justify-content: flex-start; min-height: 0; padding-top: 0; }
}
@media (max-width: 640px) {
  #dashboard-screen .org-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #dashboard-screen .org-kpi .stat-value { font-size: 19px; }
  #dashboard-screen .org-hero-actions { width: 100%; }
  #dashboard-screen .org-picker-wrap,
  #dashboard-screen .org-picker-wrap .cs { flex: 1; min-width: 0; }
  #dashboard-screen .org-avatar-xl { width: 48px; height: 48px; font-size: 17px; }
  #dashboard-screen .org-danger-row { flex-direction: column; align-items: flex-start; }
  #dashboard-screen .org-modal-actions--split { flex-direction: column-reverse; align-items: stretch; }
}
/* Org email + "Send code" on one row (Create dialog and Settings → Profile); names for new invitees */
#dashboard-screen .org-inline { display: flex; align-items: center; gap: 8px; }
#dashboard-screen .org-inline > input { flex: 1 1 auto; min-width: 0; }
#dashboard-screen .org-inline > .btn-ghost,
#dashboard-screen .org-inline > .org-badge { flex: 0 0 auto; }
#dashboard-screen .org-modal #org-invite-names { display: grid; gap: 8px; }
/* ── end Organizations ── */

/* ── 11. Responsive ────────────────────────────────────────── */
@media (max-width: 1100px) {
  #dashboard-screen .analytics-charts-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  #dashboard-screen .page-wrapper-main-inside { flex-direction: column; }

  #dashboard-screen .page-left-panel {
    z-index: 30;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  /* Two rows: brand + account on top, a scrollable tab strip below */
  #dashboard-screen .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 16px 8px;
  }

  #dashboard-screen .topbar-brand { min-height: 0; margin: 0; padding: 0; }
  #dashboard-screen .page-right-panel { flex: 1 1 auto; min-height: 0; }

  #dashboard-screen .topbar-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    min-width: 0;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #dashboard-screen .topbar-nav::-webkit-scrollbar { display: none; }

  #dashboard-screen .nav-group-label,
  #dashboard-screen .sidebar-credits,
  #dashboard-screen .sidebar-user-copy,
  #dashboard-screen .sidebar-user-avatar,
  #dashboard-screen .nav-tab .nav-tab-trailing,
  #dashboard-screen .nav-tab.active::before { display: none; }

  #dashboard-screen .nav-tab,
  #dashboard-screen .nav-tab[data-page] { width: auto; flex: 0 0 auto; white-space: nowrap; }

  #dashboard-screen .sidebar-footer { padding: 0; border: 0; }
  #dashboard-screen .sidebar-user { padding: 0; }

  #dashboard-screen .app-header { position: static; padding: 0 16px; }
  #dashboard-screen .page-right-panel > .page { padding: 20px 16px 48px; }
  #dashboard-screen .billing-blocked-banner { margin: 12px 16px 0; }

}

@media (max-width: 600px) {
  #dashboard-screen .analytics-kpi-grid,
  #dashboard-screen .stat-grid,
  #dashboard-screen #page-apikeys .api-key-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #dashboard-screen .app-plan-pill { display: none; }
  #dashboard-screen .dash-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #dashboard-screen .page-right-panel .page.active { animation: none; }
}

/* Scrollbars: the global rule in styles.css draws a white thumb (from the old
   dark theme), which is invisible on these light surfaces. */
#dashboard-screen * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
#dashboard-screen ::-webkit-scrollbar { width: 8px; height: 8px; }
#dashboard-screen ::-webkit-scrollbar-track { background: transparent; }
#dashboard-screen ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--border-strong); background-clip: padding-box; }
#dashboard-screen ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: padding-box; }
#dashboard-screen .settings-tabs,
#dashboard-screen .admin-tabs { scrollbar-width: none; }
#dashboard-screen .pg-price-sep { margin: 0 5px; color: var(--border-strong); }

/* Models list: input / output types as a chip row under each model */
#dashboard-screen .mc-io { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -8px 0 12px 44px; }
#dashboard-screen .mc-io-label { color: var(--text-tertiary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
#dashboard-screen .mc-io-label + .mc-io-chip { margin-left: 2px; }
#dashboard-screen .mc-io-arrow { margin: 0 4px; color: var(--border-strong); font-size: 13px; }
#dashboard-screen .mc-io-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 11px; line-height: 16px; }
#dashboard-screen .mc-io-chip .ti { color: var(--text-tertiary); font-size: 12px; }

@media (min-width: 1001px) and (max-width: 1280px) {
  #dashboard-screen .mc-list-head,
  #dashboard-screen .model-card { grid-template-columns: minmax(0, 1fr) 84px 92px 64px 72px 40px; }
  #dashboard-screen .mc-try span { display: none; }
  #dashboard-screen .mc-try { padding: 0 8px; }
}

#dashboard-screen #page-playground .card-header-flex { flex-wrap: nowrap; align-items: flex-end; }
#dashboard-screen #page-playground .card-header-left { flex: 1 1 0; min-width: 0; }
#dashboard-screen .pg-header-reset { flex: 0 0 auto; width: auto; }

/* Sidebar brand: larger mark and wordmark, left edge aligned with the nav icons. */
#dashboard-screen .topbar-brand {
  flex-basis: var(--header-height);
  margin: 0 -12px 6px;
  padding: 0 10px;
}
#dashboard-screen .topbar-brand-logo { gap: 10px; }
#dashboard-screen .brand-mark-hd { width: 34px; height: 34px; }
#dashboard-screen .brand-wordmark { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
#dashboard-screen .brand-wordmark-ai { color: #005192; }
@media (max-width: 900px) {
  #dashboard-screen .topbar-brand { margin: 0; padding: 0; border-bottom: 0; }
}

/* Top ribbon removed; header only hosts the show-menu button when the sidebar is hidden */
#dashboard-screen .app-header { display: none; }
body.nav-hidden #dashboard-screen .app-header { display: flex; }

/* Sidebar fills its height: rows and group labels share the free space (between a
   compact minimum and a comfortable maximum), so there is no empty gap under the
   menu and no scrolling on laptop heights. Very short windows still scroll. */
#dashboard-screen .topbar { padding-bottom: 12px; }
#dashboard-screen .topbar-brand { flex-basis: 52px; min-height: 52px; margin-bottom: 4px; }
#dashboard-screen .topbar-nav { gap: 2px; padding-bottom: 8px; }
#dashboard-screen .nav-group-label {
  display: flex;
  flex: 1 1 24px;
  align-items: flex-end;
  min-height: 24px;
  max-height: 52px;
  padding: 0 10px 6px;
}
#dashboard-screen .nav-group-label:first-of-type { flex-grow: 0.6; }
#dashboard-screen .nav-tab,
#dashboard-screen .nav-tab[data-page="playground"],
#dashboard-screen .nav-tab[data-page="documentation"] {
  flex: 1 1 30px;
  min-height: 30px;
  max-height: 46px;
  font-size: 14.5px;
}
#dashboard-screen .nav-tab .icon { font-size: 19px; }
#dashboard-screen .sidebar-footer { gap: 10px; padding-top: 12px; }