/* Rad-Intel Minimalist Light & Orange Design System */

:root {
  --bg-main: #fbfcfd;
  --bg-card: #ffffff;
  --bg-card-subtle: #f8fafc;
  --bg-orange-soft: #fff7ed;
  --bg-orange-subtle: #ffedd5;
  
  --primary-orange: #f97316;
  --primary-orange-hover: #ea580c;
  --primary-orange-active: #c2410c;
  
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  
  --border-light: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-orange: #fed7aa;
  
  --success: #10b981;
  --success-bg: #ecfdf5;
  --danger: #ef4444;
  --danger-bg: #fef2f2;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-orange: 0 8px 24px rgba(249, 115, 22, 0.18);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  
  --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.header {
  border-bottom: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-main);
}

.brand-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #ff8c42, var(--primary-orange));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.25);
}

.brand-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-badge {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-orange-soft);
  color: var(--primary-orange-hover);
  border: 1px solid var(--border-orange);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.model-pill {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Layout */
.main-container {
  max-width: 1080px;
  margin: 36px auto 60px;
  padding: 0 24px;
}

.app-grid {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 960px) {
  .app-grid {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* Drop Zone */
.dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: var(--radius-md);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  background-color: var(--bg-card-subtle);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.dropzone:hover,
.dropzone.drag-active {
  border-color: var(--primary-orange);
  background-color: var(--bg-orange-soft);
}

.dropzone-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-orange);
  font-size: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.dropzone-prompt {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-main);
  margin-bottom: 4px;
}

.dropzone-prompt span {
  color: var(--primary-orange);
  text-decoration: underline;
}

.dropzone-hint {
  font-size: 0.78rem;
  color: var(--text-light);
}

#file-input {
  display: none;
}

/* Preview Area */
.preview-container {
  display: none;
  margin-top: 18px;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: #000;
}

.preview-img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
}

.preview-clear {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #ffffff;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}

.preview-clear:hover {
  background: #ef4444;
}

/* Sample CXR Quick Load */
.sample-section {
  margin-top: 20px;
}

.sample-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.sample-buttons {
  display: flex;
  gap: 8px;
}

.sample-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sample-btn:hover {
  background: var(--bg-orange-soft);
  border-color: var(--border-orange);
  color: var(--primary-orange-hover);
}

/* Metadata Form */
.meta-accordion {
  margin-top: 20px;
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

.meta-toggle {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--primary-orange);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.meta-toggle:hover {
  color: var(--primary-orange-hover);
}

.meta-fields {
  display: none;
  margin-top: 14px;
  gap: 10px;
  flex-direction: column;
}

.meta-fields.open {
  display: flex;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.input-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.input-group input,
.input-group select,
.input-group textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.82rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text-main);
  transition: var(--transition);
  font-family: inherit;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  outline: none;
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

/* Primary Action Button */
.btn-analyze {
  width: 100%;
  margin-top: 24px;
  padding: 14px 20px;
  background: var(--primary-orange);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-orange);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-analyze:hover:not(:disabled) {
  background: var(--primary-orange-hover);
  transform: translateY(-1px);
}

.btn-analyze:active:not(:disabled) {
  background: var(--primary-orange-active);
  transform: translateY(0);
}

.btn-analyze:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Right Panel: Results */
.results-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  color: var(--text-light);
}

.results-empty-icon {
  font-size: 42px;
  color: #cbd5e1;
  margin-bottom: 12px;
}

.results-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.results-empty-desc {
  font-size: 0.82rem;
  max-width: 320px;
}

/* Loading State */
.loading-panel {
  display: none;
  padding: 60px 24px;
  text-align: center;
}

.spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--bg-orange-subtle);
  border-top-color: var(--primary-orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 18px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
}

.loading-step {
  font-size: 0.82rem;
  color: var(--primary-orange);
  font-weight: 500;
}

/* Results Content */
.results-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Diagnosis Banner */
.verdict-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.verdict-banner.pneumonia {
  background: #fff5f5;
  border: 1px solid #fed7d7;
}

.verdict-banner.normal {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.verdict-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.verdict-icon {
  font-size: 26px;
}

.verdict-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.verdict-banner.pneumonia .verdict-title {
  color: #dc2626;
}

.verdict-banner.normal .verdict-title {
  color: #16a34a;
}

.verdict-conf-badge {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.verdict-banner.pneumonia .verdict-conf-badge {
  background: #fee2e2;
  color: #b91c1c;
}

.verdict-banner.normal .verdict-conf-badge {
  background: #dcfce7;
  color: #15803d;
}

/* Probability Bar */
.prob-bar-container {
  margin-bottom: 24px;
}

.prob-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.prob-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
}

.prob-fill-normal {
  background: #10b981;
  transition: width 0.5s ease;
}

.prob-fill-pneumonia {
  background: #ef4444;
  transition: width 0.5s ease;
}

/* Visualizer Grid (CXR + Grad-CAM) */
.images-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.image-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}

.image-label {
  background: var(--bg-card-subtle);
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}

.image-frame {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-frame img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
}

/* Anatomical Findings Pill */
.findings-panel {
  background: var(--bg-orange-soft);
  border: 1px solid var(--border-orange);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 24px;
}

.findings-header {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-orange-hover);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.findings-text {
  font-size: 0.86rem;
  color: var(--text-main);
  line-height: 1.4;
}

/* Report Section */
.report-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.report-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-engine-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary-orange);
  background: var(--bg-orange-soft);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-orange);
}

.report-section {
  margin-bottom: 14px;
}

.report-section-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.report-section-content {
  font-size: 0.85rem;
  color: var(--text-main);
  white-space: pre-wrap;
  line-height: 1.5;
}

.report-disclaimer {
  font-size: 0.72rem;
  color: var(--text-light);
  font-style: italic;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}

/* Report Actions */
.report-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.report-actions .btn-primary {
  flex: 1.4;
  padding: 10px 14px;
  background: var(--navy-primary, #0f2850);
  color: #ffffff;
  border: 1px solid var(--navy-primary, #0f2850);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(15, 40, 80, 0.15);
}

.report-actions .btn-primary:hover {
  background: #1e3a8a;
  border-color: #1e3a8a;
  transform: translateY(-1px);
}

.btn-secondary {
  flex: 1;
  padding: 10px 14px;
  background: #ffffff;
  color: var(--text-main);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-secondary:hover {
  background: var(--bg-card-subtle);
  border-color: #cbd5e1;
}


/* Toast Notification */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--text-main);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 0.84rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  transition: var(--transition);
  pointer-events: none;
  z-index: 1000;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================================
   Section tabs, educational assistant, clinician feedback
   Added for the four-section layout; no existing rule was modified.
   =================================================================== */

.tabs {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 40;
}
.tabs-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-inner::-webkit-scrollbar { display: none; }

.tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.tab:hover { color: var(--text-main); }
.tab.is-active {
  color: var(--primary-orange);
  border-bottom-color: var(--primary-orange);
}
.tab:focus-visible {
  outline: 2px solid var(--primary-orange);
  outline-offset: -2px;
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.learn-grid, .about-grid {
  display: grid;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

/* --- notices --- */
.notice {
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.notice-amber {
  background: var(--bg-orange-soft);
  border-color: var(--border-orange);
  color: #9a3412;
}
.notice-red {
  background: var(--danger-bg);
  border-color: #fecaca;
  color: #991b1b;
}

.assistant-status {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* --- chat --- */
.chat-log {
  min-height: 280px;
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.chat-empty { color: var(--text-muted); font-size: 0.86rem; }
.chat-empty p { margin: 0 0 10px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  font-size: 0.8rem;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
}
.chip:hover { border-color: var(--primary-orange); color: var(--primary-orange); }
.chip.is-active {
  background: var(--primary-orange);
  border-color: var(--primary-orange);
  color: #fff;
}

.bubble {
  max-width: 88%;
  padding: 11px 15px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: normal;
  word-wrap: break-word;
}
.bubble-user {
  align-self: flex-end;
  background: var(--primary-orange);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bubble-bot {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text-main);
  border-bottom-left-radius: 4px;
}
.bubble-emergency {
  background: var(--danger-bg);
  border-color: #fecaca;
  color: #7f1d1d;
}
.bubble-error { background: var(--danger-bg); border-color: #fecaca; color: #991b1b; }
.bubble-sources, .bubble-mode {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
  font-size: 0.74rem;
  color: var(--text-muted);
}
.bubble-sources a { color: var(--primary-orange); text-decoration: none; }
.bubble-sources a:hover { text-decoration: underline; }
.dots { color: var(--text-light); font-style: italic; }

.chat-context {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  cursor: pointer;
  line-height: 1.45;
}
.chat-context input { margin-top: 2px; flex-shrink: 0; }

.chat-form { display: flex; gap: 10px; }
.chat-input {
  flex: 1;
  padding: 11px 15px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-main);
  background: var(--bg-card);
}
.chat-input:focus {
  outline: none;
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

/* --- feedback workspace --- */
.form-row { margin-bottom: 14px; }
.field-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text-main);
  background: var(--bg-card);
  box-sizing: border-box;
}
.input:focus {
  outline: none;
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}
textarea.input { resize: vertical; }

.fb-result {
  margin: 14px 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-light);
}
.fb-result.fb-ok { background: var(--success-bg); border-color: #a7f3d0; color: #065f46; }
.fb-result.fb-error { background: var(--danger-bg); border-color: #fecaca; color: #991b1b; }
.fb-review {
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
  margin-top: 4px;
}

.fb-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.count-pill {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 4px 11px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.fb-queue { max-height: 420px; overflow-y: auto; display: grid; gap: 10px; }
.queue-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  background: var(--bg-card);
  font-size: 0.82rem;
}
.queue-item.is-frozen { background: var(--bg-card-subtle); opacity: 0.85; }
.queue-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.queue-verdict {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}
.queue-correct { color: var(--success); }
.queue-incorrect { color: var(--danger); }
.queue-status {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--text-light);
  letter-spacing: 0.05em;
}
.queue-body { color: var(--text-main); margin-bottom: 5px; }
.queue-meta { color: var(--text-light); font-size: 0.72rem; }
.queue-note {
  margin-top: 7px;
  padding: 7px 10px;
  background: var(--bg-card-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.78rem;
}
.fb-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.fb-exports { margin-top: 14px; }
.export-row { font-size: 0.76rem; color: var(--text-muted); padding: 3px 0; }

.btn-link {
  appearance: none;
  background: none;
  border: none;
  color: var(--primary-orange);
  font-size: 0.76rem;
  cursor: pointer;
  padding: 6px 0 0;
  font-family: inherit;
}
.btn-link:hover { text-decoration: underline; }

.muted { color: var(--text-muted); font-size: 0.84rem; }
.muted.small { font-size: 0.74rem; margin-top: 10px; }

/* --- about --- */
.about-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; margin-top: 10px; }
.about-table th, .about-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.about-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.about-table td:not(:first-child), .about-table th:not(:first-child) { text-align: right; }
.about-list { margin: 10px 0 0; padding-left: 20px; color: var(--text-muted); font-size: 0.86rem; }
.about-list li { margin-bottom: 7px; line-height: 1.55; }

@media (max-width: 768px) {
  .tabs-inner { padding: 0 12px; }
  .tab { padding: 12px 11px; font-size: 0.82rem; }
  .bubble { max-width: 94%; }
  .chat-log { min-height: 220px; max-height: 46vh; }
  .fb-actions { flex-direction: column; }
  .fb-actions button { width: 100%; }
}

/* A grid item defaults to min-width:auto, so the five-column results table
   pushed the whole page wider than a phone viewport and clipped every card.
   Let the cards shrink, and let the table scroll inside its own box. */
.learn-grid > *, .about-grid > *, .app-grid > * { min-width: 0; }

.about-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.about-table { min-width: 460px; }

@media (max-width: 768px) {
  .about-table { font-size: 0.78rem; }
  .about-table th, .about-table td { padding: 7px 8px; }
}

/* ===================================================================
   DESIGN SYSTEM REFINEMENT
   Depth, spacing, typography and motion tokens, plus polished variants
   of the shared primitives. Additive: earlier rules are left in place
   and overridden only where the refinement applies.
   =================================================================== */

:root {
  /* Surface depth */
  --surface-sunken: #f1f5f9;
  --surface-raised: #ffffff;
  --surface-overlay: rgba(15, 23, 42, 0.04);

  /* Shadow ladder */
  --elev-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --elev-2: 0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.07);
  --elev-3: 0 4px 8px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.10);
  --ring-accent: 0 0 0 3px rgba(249, 115, 22, 0.16);

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Motion, within the 150-250ms band */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
}

body {
  background-color: var(--bg-main);
  background-image:
    radial-gradient(900px 400px at 15% -8%, rgba(249, 115, 22, 0.045), transparent 60%),
    radial-gradient(700px 360px at 90% -5%, rgba(15, 23, 42, 0.035), transparent 62%);
  background-attachment: fixed;
  letter-spacing: -0.005em;
}

/* --- workspace navigation ------------------------------------------ */

.tabs {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
}
.tabs-inner {
  max-width: 1080px;
  padding: var(--sp-2) var(--sp-6);
  gap: var(--sp-1);
  align-items: center;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.tab .tab-ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tab:hover { background: var(--surface-overlay); color: var(--text-main); }
.tab.is-active {
  background: var(--bg-orange-soft);
  border-color: var(--border-orange);
  color: var(--primary-orange-hover);
}
.tab:focus-visible { outline: none; box-shadow: var(--ring-accent); }

.tab-panel.is-active { animation: panel-in var(--dur-slow) var(--ease); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* --- cards ---------------------------------------------------------- */

.card {
  box-shadow: var(--elev-1);
  transition: box-shadow var(--dur-base) var(--ease);
}
.card:hover { box-shadow: var(--elev-2); }

.card-title {
  letter-spacing: -0.018em;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Numbered step marker for the guided analysis flow */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--bg-orange-soft);
  border: 1px solid var(--border-orange);
  color: var(--primary-orange-hover);
  font-size: 0.72rem;
  font-weight: 700;
}

/* --- buttons -------------------------------------------------------- */

.btn-primary, .btn-secondary {
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:focus-visible,
.btn-secondary:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.btn-primary:disabled, .btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-primary.is-loading { position: relative; color: transparent !important; }
.btn-primary.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- inputs --------------------------------------------------------- */

.input, .chat-input {
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.input:hover:not(:focus), .chat-input:hover:not(:focus) { border-color: #cbd5e1; }
.input:focus, .chat-input:focus { box-shadow: var(--ring-accent); }

/* --- badges and alerts ---------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.badge-ok      { background: var(--success-bg); color: #047857; border-color: #a7f3d0; }
.badge-warn    { background: var(--danger-bg);  color: #b91c1c; border-color: #fecaca; }
.badge-neutral { background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border-light); }
.badge-accent  { background: var(--bg-orange-soft); color: var(--primary-orange-hover); border-color: var(--border-orange); }

.notice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
}
.notice .notice-ico {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The persistent educational disclaimer stays readable but recedes. */
.notice-amber {
  background: var(--surface-sunken);
  border-color: var(--border-light);
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* --- chat ----------------------------------------------------------- */

.chat-log { background: var(--surface-sunken); gap: var(--sp-4); }
.bubble { animation: bubble-in var(--dur-slow) var(--ease); box-shadow: var(--elev-1); }
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.bubble-row { display: flex; gap: var(--sp-3); align-items: flex-start; max-width: 92%; }
.bubble-row.is-user { align-self: flex-end; flex-direction: row-reverse; }
.bubble-row.is-bot  { align-self: flex-start; }

.avatar {
  width: 29px; height: 29px; flex-shrink: 0;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-orange-soft);
  border: 1px solid var(--border-orange);
  color: var(--primary-orange-hover);
}
.avatar svg {
  width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.avatar.is-emergency { background: var(--danger-bg); border-color: #fecaca; color: #b91c1c; }

.bubble-sources { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.source-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 3px 9px;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
}
.source-chip:hover {
  border-color: var(--border-orange);
  color: var(--primary-orange-hover);
  background: var(--bg-orange-soft);
}
.source-chip svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }

.chat-form { align-items: stretch; }
.btn-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; flex-shrink: 0;
  border: none; border-radius: var(--radius-sm);
  background: var(--primary-orange); color: #fff; cursor: pointer;
  transition: var(--transition);
}
.btn-send:hover:not(:disabled) { background: var(--primary-orange-hover); }
.btn-send:active:not(:disabled) { transform: translateY(1px); }
.btn-send:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-send:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.btn-send svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- review queue --------------------------------------------------- */

.queue-item {
  box-shadow: var(--elev-1);
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.queue-item:hover { box-shadow: var(--elev-2); }
.queue-item.is-frozen { box-shadow: none; }
.queue-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; }
.queue-meta .meta-ico { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; opacity: 0.7; }

.empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-light); }
.empty-state svg {
  width: 34px; height: 34px; stroke: currentColor; fill: none;
  stroke-width: 1.5; margin-bottom: var(--sp-3); opacity: 0.55;
}
.empty-state p { font-size: 0.84rem; margin: 0; }

/* --- about ---------------------------------------------------------- */

.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.metric-tile {
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}
.metric-tile .metric-value {
  font-size: 1.32rem; font-weight: 700; letter-spacing: -0.03em;
  color: var(--text-main); line-height: 1.15;
}
.metric-tile .metric-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin-top: 3px;
}

.about-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.about-table tbody tr:hover { background: var(--surface-sunken); }
.about-table tbody tr.is-best { background: var(--bg-orange-soft); }
.about-table tbody tr.is-best td:first-child { font-weight: 650; }

.limitation-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.limitation-list li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--border-orange);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.84rem; color: var(--text-muted); line-height: 1.55;
}
.limitation-list svg {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px;
  stroke: var(--primary-orange); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.8;
}

/* --- accessibility -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary-orange);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .tabs-inner { padding: var(--sp-2) var(--sp-3); }
  .tab { padding: var(--sp-2) var(--sp-3); font-size: 0.8rem; }
  .tab .tab-ico { width: 15px; height: 15px; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
}

/* --- analysis workflow polish --------------------------------------- */

.results-step { margin-bottom: var(--sp-4); }

.dropzone {
  transition: border-color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.dropzone:hover, .dropzone:focus-visible {
  border-color: var(--primary-orange);
  background: var(--bg-orange-soft);
}
.dropzone.drag-active {
  border-color: var(--primary-orange);
  background: var(--bg-orange-subtle);
  transform: scale(1.012);
}
.dropzone-icon svg {
  width: 30px; height: 30px;
  stroke: var(--text-light); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--dur-base) var(--ease);
}
.dropzone:hover .dropzone-icon svg,
.dropzone.drag-active .dropzone-icon svg { stroke: var(--primary-orange); }

.opt-tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  margin-left: 6px;
}

/* --- reusable button components -------------------------------------
   .btn-primary previously existed only scoped under .report-actions, so
   buttons added elsewhere rendered unstyled. These are the standalone
   components; the scoped navy variant is more specific and still wins
   inside the report actions row. */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary-orange);
  color: #ffffff;
  border: 1px solid var(--primary-orange);
  box-shadow: 0 1px 2px rgba(249, 115, 22, 0.2);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-orange-hover);
  border-color: var(--primary-orange-hover);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.24);
}
.btn-primary:active:not(:disabled) {
  background: var(--primary-orange-active);
  border-color: var(--primary-orange-active);
}

.btn-secondary {
  background: var(--surface-raised);
  color: var(--text-main);
  border: 1px solid var(--border-light);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-card-subtle);
  border-color: #cbd5e1;
}

/* The analysis button keeps its own rule; give it the shared states. */
.btn-analyze {
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.btn-analyze:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.btn-analyze:disabled { opacity: 0.55; cursor: not-allowed; }

/* File inputs are browser-chrome by default; bring them into the system. */
input[type="file"].input {
  padding: 7px 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--surface-sunken);
  cursor: pointer;
}
input[type="file"].input::file-selector-button {
  margin-right: var(--sp-3);
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
input[type="file"].input::file-selector-button:hover {
  border-color: var(--primary-orange);
  color: var(--primary-orange-hover);
  background: var(--bg-orange-soft);
}

/* --- generated report readability ----------------------------------- */

.report-section { margin-bottom: var(--sp-5); }
.report-section-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  color: var(--primary-orange-hover);
  margin-bottom: var(--sp-2);
}
.report-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.report-section-content.is-formatted { white-space: normal; }
.report-section-content p { margin: 0 0 var(--sp-2); line-height: 1.62; }
.report-section-content p:last-child { margin-bottom: 0; }

.rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.rep-list li {
  position: relative;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);
  background: var(--bg-card-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.845rem;
  line-height: 1.6;
}
.rep-list li::before {
  content: "";
  position: absolute;
  left: var(--sp-3);
  top: 0.82em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-orange);
  opacity: 0.55;
}
.rep-key {
  display: block;
  font-weight: 650;
  color: var(--text-main);
  font-size: 0.78rem;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.report-section-content .num {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--primary-orange-hover);
}

/* --- training panel -------------------------------------------------- */

.train-panel {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-light);
}
.train-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-2);
}
.train-ico {
  width: 16px; height: 16px;
  stroke: var(--primary-orange); fill: none; stroke-width: 2;
  stroke-linecap: round;
}
.train-title.is-running .train-ico { animation: spin 2.4s linear infinite; }
.train-note { margin-bottom: var(--sp-3); }
.train-title-sm { font-size: 0.88rem; }

/* --- the community model --------------------------------------------- */

.community-block {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-light);
}

.community-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.community-step {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
/* Numbered because the three parts only make sense in order: download what
   has been collected, train it elsewhere, bring the result back. */
.step-num {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-orange-soft);
  border: 1px solid var(--border-orange);
  color: var(--primary-orange-hover);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.step-body { flex: 1 1 auto; min-width: 0; }
.step-body > strong {
  display: block;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.step-body .fb-actions { margin-top: var(--sp-3); }
.community-step input[type="file"] {
  padding: var(--sp-2);
  font-size: 0.8rem;
}

.train-log {
  margin-top: var(--sp-3);
  max-height: 260px;
  overflow: auto;
  padding: var(--sp-3);
  background: #0f172a;
  color: #cbd5e1;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.count-pill.is-site {
  background: var(--bg-orange-soft);
  border-color: var(--border-orange);
  color: var(--primary-orange-hover);
}

/* ===================================================================
   VISUAL REFINEMENT — inputs, chat, depth and micro-interaction
   =================================================================== */

/* --- inputs: filled, with a clear resting state --------------------- */

.input,
.chat-input,
#input-patient-id,
#input-patient-age,
#input-patient-history,
#select-model,
#select-patient-sex {
  background: var(--surface-sunken);
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px var(--border-light);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.input:hover:not(:focus),
.chat-input:hover:not(:focus),
#input-patient-id:hover:not(:focus),
#input-patient-history:hover:not(:focus) {
  background: #eef2f7;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}
.input:focus,
.chat-input:focus,
#input-patient-id:focus,
#input-patient-age:focus,
#input-patient-history:focus,
#select-model:focus,
#select-patient-sex:focus {
  background: var(--surface-raised);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--primary-orange), var(--ring-accent);
  outline: none;
}
.input::placeholder, .chat-input::placeholder { color: var(--text-light); }

select.input,
#select-model,
#select-patient-sex {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
  padding-right: 32px;
}

/* --- card headers get a quiet accent rule --------------------------- */

.card { position: relative; overflow: hidden; }
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-orange), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.card:hover::before { opacity: 0.5; }
.tab-panel.is-active .card:first-child::before { opacity: 0.35; }

/* --- chat: warmer, with a live typing indicator --------------------- */

.chat-log {
  background:
    linear-gradient(var(--surface-sunken), var(--surface-sunken)) padding-box,
    var(--surface-sunken);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.05) 1px, transparent 0);
  background-size: 18px 18px;
}
.bubble-user {
  background: linear-gradient(180deg, var(--primary-orange), var(--primary-orange-hover));
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.22);
}
.chat-empty { text-align: center; padding: var(--sp-6) var(--sp-3); }
.chat-empty p { color: var(--text-light); font-size: 0.8rem; }
.chat-empty .chip-row { justify-content: center; }

/* Three-dot thinking indicator, replacing the static word. */
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-light);
  animation: typing 1.25s var(--ease) infinite;
}
.typing i:nth-child(2) { animation-delay: 0.16s; }
.typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* --- verdict and results emphasis ----------------------------------- */

.probability-bar, .prob-bar { overflow: hidden; }
.probability-bar > *, .prob-bar > * {
  transition: width var(--dur-slow) var(--ease);
}

/* --- queue + chips: press feedback ---------------------------------- */

.chip:active { transform: translateY(1px); }
.queue-item { position: relative; }
.queue-item::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--border-light);
  transition: background var(--dur-base) var(--ease);
}
.queue-item:has(.badge-ok)::after { background: var(--success); }
.queue-item:has(.badge-warn)::after { background: var(--danger); }
.queue-item { padding-left: var(--sp-4); }

/* --- benchmark buttons --------------------------------------------- */

.sample-btn, .btn-sample {
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.sample-btn:hover, .btn-sample:hover {
  border-color: var(--border-orange);
  background: var(--bg-orange-soft);
}
.sample-btn:active, .btn-sample:active { transform: translateY(1px); }

/* --- access gate ----------------------------------------------------- */

.consent-box {
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--primary-orange);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.consent-box h3 {
  font-size: 0.9rem;
  font-weight: 650;
  margin-bottom: var(--sp-3);
  letter-spacing: -0.012em;
}
.consent-box ul { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.consent-box li { font-size: 0.83rem; color: var(--text-muted); line-height: 1.58; }
.consent-box strong { color: var(--text-main); }

.auth-form { max-width: 420px; }
.auth-heading {
  font-size: 0.95rem;
  font-weight: 650;
  margin-bottom: var(--sp-3);
  letter-spacing: -0.015em;
}
.request-details {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-light);
}
.request-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-orange-hover);
  list-style: none;
}
.request-details summary::-webkit-details-marker { display: none; }
.request-details summary::before { content: "+ "; font-weight: 700; }
.request-details[open] summary::before { content: "– "; }
.request-details summary:hover { text-decoration: underline; }

.session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  background: var(--surface-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
}
.session-who { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.86rem; font-weight: 600; }
.session-ico { width: 16px; height: 16px; stroke: var(--primary-orange); fill: none; stroke-width: 2; }

/* --- reviewed image thumbnails --------------------------------------- */

.queue-thumb-row { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0; }
.queue-thumb {
  width: 54px; height: 54px; flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: #0f172a;
  cursor: zoom-in;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.queue-thumb:hover { transform: scale(1.06); box-shadow: var(--elev-2); }
.queue-thumb-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.82);
  padding: var(--sp-6);
  animation: fade-in var(--dur-base) var(--ease);
  cursor: zoom-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
  max-width: min(760px, 92vw);
  max-height: 88vh;
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
}

.shared-model-note {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--bg-orange-soft);
  border: 1px solid var(--border-orange);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.shared-model-note svg {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px;
  stroke: var(--primary-orange); fill: none; stroke-width: 2;
}
.shared-model-note strong { color: var(--text-main); }

/* The hidden attribute is a UA rule, so any class that sets display wins
   over it. .learn-grid is display:grid, which left the signed-out gate
   visible underneath the workspace. */
[hidden] { display: none !important; }

/* ===================================================================
   REVIEW WORKSPACE
   The closed clinician area: the access gate, the queue toolbar, the
   participant roster, the model lineage and the administrator console.
   Built from the tokens above rather than new colours, so this reads as
   part of the same interface and not a panel bolted onto it.
   =================================================================== */

/* --- small primitives the workspace needs --------------------------- */

.mono,
code.id-reveal {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  letter-spacing: 0.02em;
}

.field-hint {
  display: block;
  margin-top: 5px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--text-light);
}

.card-title-sm { font-size: 0.98rem; }

.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }
.btn-ico {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.86rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  background: var(--surface-raised);
  color: #b91c1c;
  border: 1px solid #fecaca;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-bg); border-color: #fca5a5; }

.btn-link-danger { color: #b91c1c; }
.btn-link-danger:hover { color: #991b1b; }

.input-sm { padding: 7px 10px; font-size: 0.8rem; }

/* A segmented control. Used for who is logging in, and for the queue
   filters, so the two read as the same kind of choice. */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-4);
}
.seg-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-full);
  padding: 7px 16px;
  font: inherit;
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.seg-btn:hover { color: var(--text-main); }
.seg-btn.is-active {
  background: var(--surface-raised);
  border-color: var(--border-light);
  color: var(--primary-orange-hover);
  box-shadow: var(--elev-1);
}
.seg-sm { margin-bottom: 0; }
.seg-sm .seg-btn { padding: 6px 12px; font-size: 0.78rem; }

/* --- the access gate ------------------------------------------------ */

.gate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 1000px) {
  .gate-grid { grid-template-columns: 1fr; }
}

.gate-eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 4px 11px;
  border-radius: var(--radius-full);
  background: var(--bg-orange-soft);
  border: 1px solid var(--border-orange);
  color: var(--primary-orange-hover);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.gate-contact {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.gate-contact svg {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px;
  stroke: var(--primary-orange); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.gate-forms .auth-form { max-width: none; }

.gate-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-4);
  color: var(--text-light);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.gate-divider::before,
.gate-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

/* The one-time code step. Hidden until a code has actually been sent, so
   the form never asks for something the reader has no way to have. */
.code-step {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-light);
  animation: code-in var(--dur-base) var(--ease);
}
@keyframes code-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.code-sent {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 0.8rem;
  line-height: 1.5;
}
.code-sent svg {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px;
  stroke: currentColor; fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.code-input {
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-align: center;
}

/* Asking for access. A full-width card rather than a text link: it is one
   of the two things somebody arriving here can actually do. */
.request-cta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  text-align: left;
  cursor: pointer;
  font: inherit;
  background: var(--surface-raised);
  border: 1px solid var(--border-orange);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
.request-cta:hover {
  background: var(--bg-orange-soft);
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}
.request-cta-ico {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--bg-orange-subtle);
  color: var(--primary-orange-hover);
}
.request-cta-ico svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.request-cta-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.request-cta-text strong { font-size: 0.88rem; font-weight: 650; }
.request-cta-text small { font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; }
.request-cta-chev svg {
  width: 18px; height: 18px; stroke: var(--text-light); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-base) var(--ease);
}
.request-cta.is-open .request-cta-chev svg { transform: rotate(180deg); }

.request-panel {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
}
.request-panel .auth-form { max-width: none; }

/* --- the logged-in workspace ---------------------------------------- */

#session-role { text-transform: lowercase; }

/* A run in progress concerns everybody, so it sits above the columns in
   the accent colour rather than inside one card in grey. */
#train-banner.notice-amber {
  background: var(--bg-orange-soft);
  border-color: var(--border-orange);
  color: #9a3412;
  font-size: 0.83rem;
}
#train-banner strong { color: #7c2d12; }

.ws-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  align-items: start;
}

.detail-list { display: grid; gap: 1px; margin: var(--sp-3) 0 var(--sp-4); }
.detail-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: 9px var(--sp-3);
  background: var(--surface-sunken);
  font-size: 0.82rem;
}
.detail-row:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.detail-row:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.detail-row dt { color: var(--text-muted); font-weight: 600; }
.detail-row dd { margin: 0; overflow-wrap: anywhere; }

/* A fixed-height, scrolling box, so a roster of thirty does not push the
   rest of the column off the screen. */
.scroll-box {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.scroll-tall { max-height: 420px; }
.scroll-box::-webkit-scrollbar { width: 8px; }
.scroll-box::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: var(--radius-full);
}
.scroll-box::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

.roster-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.roster-row:hover { border-color: var(--border-light); }
.roster-row .avatar {
  width: 30px; height: 30px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.roster-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.roster-text strong { font-size: 0.83rem; font-weight: 620; }
.roster-text small {
  font-size: 0.73rem; color: var(--text-muted); line-height: 1.45;
  overflow-wrap: anywhere;
}

/* --- queue toolbar and per-case actions ----------------------------- */

.queue-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-4);
}
.sort-field { display: grid; gap: 4px; }
.sort-field .field-label { margin: 0; }
.sort-field select { min-width: 150px; }

.queue-item.is-mine { border-left: 3px solid var(--primary-orange); }
.badge-mine {
  background: var(--bg-orange-subtle);
  border-color: var(--border-orange);
  color: var(--primary-orange-active);
}

.queue-actions {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border-subtle);
}
.queue-edit {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
}
.queue-edit .form-row:last-of-type { margin-bottom: var(--sp-3); }

/* --- cautions ------------------------------------------------------- */

.caution {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.caution svg {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px;
  stroke: var(--primary-orange); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.caution strong { color: var(--text-main); }

/* --- model lineage -------------------------------------------------- */

.version-list { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-4); }
.version-row {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
}
.version-row.is-live {
  background: var(--bg-orange-soft);
  border-color: var(--border-orange);
}
.version-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: 4px;
}
.version-head code { font-size: 0.74rem; overflow-wrap: anywhere; }
.version-label { font-size: 0.78rem; color: var(--text-muted); }
.version-metrics {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
.version-metrics span {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  border: 1px solid var(--border-light);
}
.version-meta { margin-top: 5px; font-size: 0.72rem; color: var(--text-light); }
.version-row .btn-secondary { margin-top: var(--sp-3); }

.storage-summary {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-light);
}
.storage-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.storage-path { font-size: 0.74rem; margin-bottom: var(--sp-2); overflow-wrap: anywhere; }

/* --- administrator console ------------------------------------------ */

#admin-console {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 2px solid var(--border-orange);
}
.admin-header { margin-bottom: var(--sp-5); }
.admin-header .card-subtitle { max-width: 76ch; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.stat {
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--border-light);
  box-shadow: var(--elev-1);
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--primary-orange-hover);
}
.stat-label { font-size: 0.8rem; font-weight: 620; }
.stat-hint { font-size: 0.71rem; color: var(--text-light); }

.search-field {
  position: relative;
  flex: 1;
  min-width: 240px;
}
.search-field svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  stroke: var(--text-light); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.search-field .input { padding-left: 35px; }

.id-field { display: flex; gap: var(--sp-2); }
.id-field .input { flex: 1; min-width: 0; }
code.id-reveal {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--bg-orange-subtle);
  border: 1px solid var(--border-orange);
  border-radius: var(--radius-sm);
  color: var(--primary-orange-active);
  user-select: all;
}

.form-divided {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-light);
}

/* Tables scroll sideways rather than squashing: a Rad-Intel ID and a
   timestamp are both unbreakable, so there is nothing to reflow. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.data-table th {
  position: sticky; top: 0;
  text-align: left;
  padding: var(--sp-3);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-light);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}
.data-table td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-sunken); }
.data-table tr.is-disabled { opacity: 0.58; }
.data-table tr.is-refused code { color: #b91c1c; }
.data-table .badge { margin-left: 5px; }
.table-empty {
  padding: var(--sp-6) var(--sp-4) !important;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}
.row-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); white-space: nowrap; }
.data-table tr.edit-row:hover { background: transparent; }
.data-table tr.edit-row td { background: var(--surface-sunken); }

.inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
  align-items: end;
}
.inline-form label { display: grid; gap: 4px; }
.inline-form .fb-actions,
.inline-form .fb-result { grid-column: 1 / -1; }

.request-row {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border-light);
}
.request-row-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: 5px;
}
.request-row-head strong { font-size: 0.86rem; }
.request-row-body { font-size: 0.79rem; color: var(--text-muted); line-height: 1.55; }
.request-row-body a { color: var(--primary-orange-hover); }
.request-row-meta { margin: var(--sp-2) 0; font-size: 0.71rem; color: var(--text-light); }
.request-row .fb-actions { flex-wrap: wrap; gap: var(--sp-3); }

/* --- disabled states ------------------------------------------------ */

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.session-until {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-light);
  white-space: nowrap;
}
@media (max-width: 640px) { .session-until { display: none; } }

/* ===================================================================
   WORKSPACE BREATHING ROOM
   The console stacks several full-width cards under a two-column grid,
   and at that density the default gap read as one continuous slab with
   lines through it. Everything below is spacing: no colours, no new
   components.
   =================================================================== */

/* The workspace is denser than the analysis view and wants the room. */
#tab-feedback .main-container,
#tab-feedback {
  --ws-gap: var(--sp-6);
}

#fb-workspace .app-grid,
#fb-gate.gate-grid {
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

#fb-workspace .ws-trio {
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

/* Consecutive full-width cards in the console were touching. */
#admin-console > .card,
#admin-console > .app-grid {
  margin-bottom: var(--sp-6);
}
#admin-console > .card:last-child {
  margin-bottom: 0;
}
#admin-console .app-grid {
  gap: var(--sp-6);
}

#admin-console {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
}
.admin-header {
  margin-bottom: var(--sp-6);
}
.stat-row {
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

/* Give each card its own edge rather than relying on the gap alone. */
#fb-workspace .card {
  padding: var(--sp-6);
}
@media (max-width: 640px) {
  #fb-workspace .card { padding: var(--sp-5); }
}

/* The table sat flush against the toolbar above it. */
#admin-console .table-wrap {
  margin-top: var(--sp-4);
}
#admin-console .queue-toolbar {
  margin-bottom: var(--sp-4);
}

/* Rows inside a scroll box need a little air, or they read as one block. */
.scroll-box { gap: var(--sp-3); }
.roster-row { padding: var(--sp-3); }

/* Notices stacked directly on top of each other. */
#fb-workspace > .notice { margin-bottom: var(--sp-4); }
.session-bar { margin-bottom: var(--sp-5); }

/* Form rows inside the console's two-column cards. */
#admin-console .auth-form .form-row { margin-bottom: var(--sp-4); }
#admin-console .form-divided { margin-top: var(--sp-6); padding-top: var(--sp-6); }

/* ===================================================================
   LISTS THAT SCROLL INSIDE THEMSELVES
   A list long enough to need scrolling should scroll in its own box,
   not push the rest of the page down. The height is set from the real
   rows by showRows() in workspace.js; everything here is the chrome
   around that -- the scrollbar, and the hint that there is more below.
   =================================================================== */

.scroll-box,
.table-wrap {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

/* A fixed cap is still wanted when a list is rendered before its rows
   can be measured, so nothing can run away down the page. */
.scroll-box { max-height: 420px; }
.table-wrap { max-height: 560px; }

.table-wrap::-webkit-scrollbar,
.scroll-box::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrap::-webkit-scrollbar-thumb,
.scroll-box::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: var(--radius-full);
}
.table-wrap::-webkit-scrollbar-thumb:hover,
.scroll-box::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* A capped list says so: a soft edge at the bottom, so it is obvious
   there is more rather than looking like the list simply ends. */
.scroll-box.has-more,
.table-wrap.has-more {
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
.scroll-box.has-more:hover,
.table-wrap.has-more:hover {
  -webkit-mask-image: none;
          mask-image: none;
}

/* The sticky header must sit above the rows scrolling under it. */
.data-table thead th { z-index: 2; background: var(--surface-sunken); }

/* The version lists in the side panels get the same treatment. */
.version-list { overflow-y: auto; scrollbar-width: thin; }
.version-list::-webkit-scrollbar { width: 8px; }
.version-list::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: var(--radius-full);
}

/* ===================================================================
   THE RELEASE CARD
   Putting a model in front of the public is the one thing in the
   console that reaches past the study, and it was seventh in a column
   of identical white cards. It is the same components as the rest --
   this only stops it reading as one more row of admin.
   =================================================================== */

.card-feature {
  border: 1px solid var(--border-orange);
  border-left: 4px solid var(--primary-orange);
  background:
    linear-gradient(180deg, var(--bg-orange-soft) 0%, var(--surface-raised) 88px);
  box-shadow: var(--elev-2);
}

.feature-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.feature-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--primary-orange);
  color: #fff;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);
}
.feature-ico svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* The count of versions waiting, so a finished training run is visible
   from the top of the console rather than found by scrolling. */
#release-count {
  background: var(--primary-orange);
  border-color: var(--primary-orange);
  color: #fff;
  font-weight: 700;
}

/* The same nudge on the stat tile that carries the number. */
.stat.is-waiting {
  border-color: var(--border-orange);
  background: var(--bg-orange-soft);
}
.stat.is-waiting .stat-value { color: var(--primary-orange-active); }

/* --- when an analysis could not be done ------------------------------ */
/*
   Said where the answer would have been, rather than in an alert box. An
   alert stops the page, reads as a crash, and puts "Analysis Error:" in
   front of a message that is often not an error at all -- a rate limit is
   the service working.
*/
.results-problem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  min-height: 280px;
}
.results-problem-icon svg {
  width: 34px; height: 34px;
  stroke: var(--primary-orange); fill: none; stroke-width: 1.6;
  stroke-linecap: round;
}
.results-problem-title {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--text-main);
}
.results-problem-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 44ch;
}