/* ===========================
   Wurksy AI – Global Styles
   =========================== */

/* Ensure [hidden] always wins over component display rules */
[hidden] { display: none !important; }

:root {
  --bg: #0b1020;
  --card: #0f152b;
  --elev: #121939;
  --border: #26314b;
  --text: #e5e7eb;
  --muted: #9aa0a6;
  --accent: #60a5fa;
  --accent-2: #22d3ee;
  --contrast: #FA9B60;
  --ring: rgba(96,165,250,.35);
  --shadow: 0 8px 30px rgba(0,0,0,.35);

  --radius: 12px;
  --radius-lg: 16px;

  /* --bubble-user-bg: color-mix(in hsl, var(--accent-2) 10%, var(--card)); */
  --bubble-user-bg: var(--bg);
  --bubble-user-border: color-mix(in hsl, var(--accent-2) 45%, var(--border));
  --bubble-user-text: var(--text);
  --bubble-assistant-bg: color-mix(in hsl, var(--accent) 24%, var(--card));
  --bubble-assistant-border: color-mix(in hsl, var(--accent) 48%, var(--border));
  --bubble-assistant-text: var(--text);

  --surface-1: linear-gradient(180deg, var(--card), var(--elev));
  --surface-2: rgba(255,255,255,.04);
  --text-secondary: #cbd5e1;
}

:root[data-theme="light"] {
  --bg:#f1f1f1;
  --card:#ffffff;
  --elev:#ffffff;
  --surface:#ffffff;
  --surface-1:#ffffff;
  --border:#d1d1d1;
  --text:#0f172a;
  --muted:#64748b;
  --accent: #2563eb;
  --accent-2: #22d3ee;
  --ring: rgba(37,99,235,.25);
  --shadow: 0 8px 30px rgba(2,6,23,.08);
  --surface-2: rgba(0,0,0,.04);
  --text-secondary: #000000;

  --bubble-user-bg: color-mix(in hsl, var(--accent-2) 18%, #ffffff);
  --bubble-user-border: color-mix(in hsl, var(--accent-2) 42%, var(--border));
  --bubble-user-text: #0f172a;
  --bubble-assistant-bg: color-mix(in hsl, var(--accent) 16%, #ffffff);
  --bubble-assistant-border: color-mix(in hsl, var(--accent) 42%, var(--border));
  --bubble-assistant-text: #0f172a;
}

/* Light mode overrides to fix white and faint text visibility */
:root[data-theme="light"] [style*="color:#fff" i]:not(button):not(.btn):not(.badge):not(.nav-role-badge):not(.built-in-style-badge):not(.an-filter-active):not(.tour-next-btn):not(.chat .user):not(.chat .user *):not(.timeline-ratio-bar-container *),
:root[data-theme="light"] [style*="color: #fff" i]:not(button):not(.btn):not(.badge):not(.nav-role-badge):not(.built-in-style-badge):not(.an-filter-active):not(.tour-next-btn):not(.chat .user):not(.chat .user *):not(.timeline-ratio-bar-container *),
:root[data-theme="light"] [style*="color:#ffffff" i]:not(button):not(.btn):not(.badge):not(.nav-role-badge):not(.built-in-style-badge):not(.an-filter-active):not(.tour-next-btn):not(.chat .user):not(.chat .user *):not(.timeline-ratio-bar-container *),
:root[data-theme="light"] [style*="color: #ffffff" i]:not(button):not(.btn):not(.badge):not(.nav-role-badge):not(.built-in-style-badge):not(.an-filter-active):not(.tour-next-btn):not(.chat .user):not(.chat .user *):not(.timeline-ratio-bar-container *),
:root[data-theme="light"] [style*="color:white" i]:not(button):not(.btn):not(.badge):not(.nav-role-badge):not(.built-in-style-badge):not(.an-filter-active):not(.tour-next-btn):not(.chat .user):not(.chat .user *):not(.timeline-ratio-bar-container *),
:root[data-theme="light"] [style*="color: white" i]:not(button):not(.btn):not(.badge):not(.nav-role-badge):not(.built-in-style-badge):not(.an-filter-active):not(.tour-next-btn):not(.chat .user):not(.chat .user *):not(.timeline-ratio-bar-container *),
:root[data-theme="light"] [style*="color:#ccc" i]:not(button):not(.btn):not(.badge),
:root[data-theme="light"] [style*="color: #ccc" i]:not(button):not(.btn):not(.badge),
:root[data-theme="light"] [style*="color:#aaa" i]:not(button):not(.btn):not(.badge),
:root[data-theme="light"] [style*="color: #aaa" i]:not(button):not(.btn):not(.badge),
:root[data-theme="light"] [style*="color: var(--text-color, #ccc)" i],
:root[data-theme="light"] [style*="color: var(--text-secondary, #aaa)" i],
:root[data-theme="light"] [style*="color: var(--text-color, #fff)" i] {
  color: #0f172a !important;
}

:root[data-theme="light"] [style*="background: rgba(255, 255, 255" i]:not(.btn),
:root[data-theme="light"] [style*="background:rgba(255,255,255" i]:not(.btn) {
  background: rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
}

/* ── Light Theme Overrides for Admin Ongoing Section & Green Link Cards ── */
:root[data-theme="light"] #ongoingAssignmentsSelect {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

:root[data-theme="light"] #ongoingAssignmentsSelect option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

:root[data-theme="light"] #ongoingAssignmentsSelect option:hover,
:root[data-theme="light"] #ongoingAssignmentsSelect option:focus,
:root[data-theme="light"] #ongoingAssignmentsSelect option:checked {
  background-color: #e0e7ff !important;
  color: #1e1b4b !important;
}

/* Green cards & info banners contrast fixes in light theme */
:root[data-theme="light"] [style*="background: rgba(16, 185, 129" i],
:root[data-theme="light"] [style*="background:rgba(16,185,129" i],
:root[data-theme="light"] #directStudentLinkContainer,
:root[data-theme="light"] #ongoingDirectStudentLinkCard {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #064e3b !important;
}

:root[data-theme="light"] [style*="color: #10b981" i],
:root[data-theme="light"] [style*="color:#10b981" i] {
  color: #047857 !important;
}

:root[data-theme="light"] input#directStudentShareLinkInput,
:root[data-theme="light"] input#ongoingDirectStudentShareLinkInput,
:root[data-theme="light"] input#linkSuccessUrlInput {
  background: #ffffff !important;
  color: #047857 !important;
  border-color: #6ee7b7 !important;
  font-weight: 600 !important;
}

/* Info banner background & text contrast in light theme */
:root[data-theme="light"] [style*="background: linear-gradient(145deg, rgba(99, 102, 241" i] {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] [style*="background: rgba(16, 185, 129, 0.1)" i] {
  background: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #065f46 !important;
}

/* ── Delivery Method Cards in Light Mode ── */
:root[data-theme="light"] #deliveryMethodCardsContainer {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), inset 0 0 20px rgba(99, 102, 241, 0.03) !important;
}

:root[data-theme="light"] #deliveryMethodCardsContainer [style*="color: #fff" i],
:root[data-theme="light"] #deliveryMethodCardsContainer [style*="color:#fff" i] {
  color: #0f172a !important;
}

:root[data-theme="light"] #deliveryMethodCardsContainer [style*="color: var(--text-secondary" i],
:root[data-theme="light"] #deliveryMethodCardsContainer [style*="color:var(--text-secondary" i] {
  color: #334155 !important;
}

:root[data-theme="light"] #deliveryCardLink {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

:root[data-theme="light"] #deliveryCardLms {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

:root[data-theme="light"] #deliveryCardLink[style*="#10b981" i],
:root[data-theme="light"] #deliveryCardLink[style*="6366f1" i],
:root[data-theme="light"] #deliveryCardLink[style*="16, 185, 129" i] {
  background: linear-gradient(145deg, #ecfdf5 0%, #ffffff 100%) !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15) !important;
}

:root[data-theme="light"] #deliveryCardLms[style*="#f59e0b" i],
:root[data-theme="light"] #deliveryCardLms[style*="245, 158, 11" i] {
  background: linear-gradient(145deg, #fffbeb 0%, #ffffff 100%) !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15) !important;
}

:root[data-theme="light"] #deliveryCardLink [style*="color: #fff" i],
:root[data-theme="light"] #deliveryCardLms [style*="color: #fff" i] {
  color: #0f172a !important;
}

:root[data-theme="light"] #deliveryCardLink [style*="color: var(--text-secondary" i],
:root[data-theme="light"] #deliveryCardLms [style*="color: var(--text-secondary" i] {
  color: #475569 !important;
}

:root[data-theme="light"] #deliveryCardLink [style*="color: var(--accent" i] {
  color: #2563eb !important;
}

:root[data-theme="light"] #deliveryCardLms [style*="color: #f59e0b" i] {
  color: #d97706 !important;
}

:root[data-theme="light"] #deliveryCardLink .badge[style*="10b981" i],
:root[data-theme="light"] #deliveryMethodCardsContainer .badge[style*="10b981" i] {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

:root[data-theme="light"] #deliveryCardLms .badge[style*="f59e0b" i] {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}

:root[data-theme="light"] .copilot-action-btn {
  color: var(--accent) !important;
  border-color: color-mix(in hsl, var(--accent) 35%, var(--border)) !important;
}
:root[data-theme="light"] .copilot-action-btn:hover:not(:disabled) {
  background: color-mix(in hsl, var(--accent) 12%, #ffffff) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ── Light Mode Overrides for Flag Policy Guardrails Configurator ── */
:root[data-theme="light"] #flagPolicyGuardrailsConfigCard,
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] #flagPolicyGuardrailsConfigCard h3,
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard h3 {
  color: #4f46e5 !important;
}

:root[data-theme="light"] #flagPolicyGuardrailsConfigCard p,
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard p {
  color: #334155 !important;
}

:root[data-theme="light"] #btnSelectAllRedGuardrails,
:root[data-theme="light"] #btnOngoingSelectAllRedGuardrails {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="rgba(239, 68, 68, 0.04)"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="rgba(239, 68, 68, 0.04)"],
:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="rgba(239,68,68,0.04)"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="rgba(239,68,68,0.04)"] {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
}

:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="rgba(239, 68, 68, 0.04)"] h4,
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="rgba(239, 68, 68, 0.04)"] h4,
:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="rgba(239,68,68,0.04)"] h4,
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="rgba(239,68,68,0.04)"] h4 {
  color: #dc2626 !important;
}

:root[data-theme="light"] #flagPolicyGuardrailsConfigCard .cfg-red-cb ~ span,
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard .ongoing-cfg-red-cb ~ span,
:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="color: #cbd5e1"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="color: #cbd5e1"],
:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="color:#cbd5e1"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="color:#cbd5e1"] {
  color: #1e293b !important;
}

:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="rgba(245, 158, 11, 0.04)"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="rgba(245, 158, 11, 0.04)"],
:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="rgba(245,158,11,0.04)"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="rgba(245,158,11,0.04)"] {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}

:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="rgba(245, 158, 11, 0.04)"] h4,
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="rgba(245, 158, 11, 0.04)"] h4,
:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="rgba(245,158,11,0.04)"] h4,
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="rgba(245,158,11,0.04)"] h4 {
  color: #d97706 !important;
}

:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="background: rgba(0,0,0,0.3)"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="background: rgba(0,0,0,0.3)"],
:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="background:rgba(0,0,0,0.3)"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="background:rgba(0,0,0,0.3)"],
:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="background: rgba(0, 0, 0, 0.3)"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="background: rgba(0, 0, 0, 0.3)"] {
  background: #ffffff !important;
  border-color: #fcd34d !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] #flagPolicyGuardrailsConfigCard label[for="cfgMinPrompts"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard label[for="ongoingCfgMinPrompts"] {
  color: #92400e !important;
}

:root[data-theme="light"] #cfgMinPrompts,
:root[data-theme="light"] #ongoingCfgMinPrompts {
  background: #ffffff !important;
  color: #92400e !important;
  border-color: #f59e0b !important;
}

:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="color: #94a3b8"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="color: #94a3b8"],
:root[data-theme="light"] #flagPolicyGuardrailsConfigCard [style*="color:#94a3b8"],
:root[data-theme="light"] #ongoingFlagPolicyGuardrailsConfigCard [style*="color:#94a3b8"] {
  color: #78350f !important;
}

/* ── Light Mode Overrides for Organised Course Lectures & Materials ── */
:root[data-theme="light"] #lmsLecturePickerContainer {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #lmsLecturePickerContainer > div:first-child {
  color: #1e293b !important;
}

:root[data-theme="light"] #lmsLecturePickerContainer > div:nth-child(2) {
  color: #475569 !important;
}

:root[data-theme="light"] #lmsLecturePickerContainer [style*="rgba(255,255,255,0.03)"],
:root[data-theme="light"] #lmsLecturePickerContainer [style*="rgba(255, 255, 255, 0.03)"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
}

:root[data-theme="light"] #lmsLecturePickerContainer [style*="color: #818cf8"],
:root[data-theme="light"] #lmsLecturePickerContainer [style*="color:#818cf8"] {
  color: #4338ca !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #lmsLecturePickerContainer label {
  color: #1e293b !important;
}

:root[data-theme="light"] #lmsLecturePickerContainer label span {
  color: #1e293b !important;
}

/* Toggle Pills Container in Light Mode */
:root[data-theme="light"] [style*="background: rgba(255, 255, 255, 0.05)"][style*="padding: 4px"],
:root[data-theme="light"] [style*="background:rgba(255,255,255,0.05)"][style*="padding: 4px"],
:root[data-theme="light"] [style*="background: rgba(255, 255, 255, 0.05)"][style*="padding:4px"] {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

/* Upload drop zones in Light Mode */
:root[data-theme="light"] #uploadReadingPdfBtn,
:root[data-theme="light"] #ongoingUploadReadingPdfBtn,
:root[data-theme="light"] #uploadAiPolicyPdfBtn,
:root[data-theme="light"] #ongoingUploadAiPolicyPdfBtn {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

:root[data-theme="light"] #uploadReadingPdfBtn:hover,
:root[data-theme="light"] #ongoingUploadReadingPdfBtn:hover,
:root[data-theme="light"] #uploadAiPolicyPdfBtn:hover,
:root[data-theme="light"] #ongoingUploadAiPolicyPdfBtn:hover {
  background: #eef2ff !important;
  border-color: #6366f1 !important;
}

:root[data-theme="light"] #readingUploadStatus,
:root[data-theme="light"] #ongoingReadingUploadStatus,
:root[data-theme="light"] #aiPolicyUploadStatus,
:root[data-theme="light"] #ongoingAiPolicyUploadStatus {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}

/* ── Light Mode Submissions & AI Index Audits Table Overrides ── */
:root[data-theme="light"] .table-responsive-wrapper {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] .admin-submissions-table {
  background: #ffffff !important;
}

:root[data-theme="light"] .admin-submissions-table thead tr {
  background: #f8fafc !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

:root[data-theme="light"] .admin-submissions-table thead th {
  color: #475569 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .admin-submissions-table tbody tr {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.15s ease;
}

:root[data-theme="light"] .admin-submissions-table tbody tr:nth-child(even) {
  background: #fbfcfe !important;
}

:root[data-theme="light"] .admin-submissions-table tbody tr:hover {
  background: #f1f5f9 !important;
}

:root[data-theme="light"] .admin-submissions-table td {
  color: #1e293b !important;
}

/* Student names, IDs & Subtext in Light Mode */
:root[data-theme="light"] .admin-submissions-table .student-name,
:root[data-theme="light"] .admin-submissions-table strong {
  color: #0f172a !important;
}

:root[data-theme="light"] .admin-submissions-table .muted,
:root[data-theme="light"] .admin-submissions-table [style*="color: #cbd5e1"],
:root[data-theme="light"] .admin-submissions-table [style*="color: #94a3b8"],
:root[data-theme="light"] .admin-submissions-table [style*="color: var(--muted)"] {
  color: #64748b !important;
}

/* Prompts Pill in Light Mode */
:root[data-theme="light"] .admin-submissions-table [style*="prompts"],
:root[data-theme="light"] .admin-submissions-table .prompts-pill,
:root[data-theme="light"] .admin-submissions-table [style*="background: rgba(99, 102, 241"],
:root[data-theme="light"] .admin-submissions-table [style*="background:rgba(99,102,241"] {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

/* Human Outcome Status Boxes in Light Mode */
:root[data-theme="light"] .admin-submissions-table td [style*="background: rgba(0,0,0,0.3)"],
:root[data-theme="light"] .admin-submissions-table td [style*="background: rgba(0, 0, 0, 0.3)"],
:root[data-theme="light"] .admin-submissions-table td [style*="background:rgba(0,0,0,0.3)"] {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] .admin-submissions-table td [style*="background: rgba(16, 185, 129, 0.18)"],
:root[data-theme="light"] .admin-submissions-table td [style*="background:rgba(16,185,129,0.18)"] {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .admin-submissions-table td [style*="background: rgba(168, 85, 247, 0.18)"],
:root[data-theme="light"] .admin-submissions-table td [style*="background:rgba(168,85,247,0.18)"] {
  background: #faf5ff !important;
  color: #7e22ce !important;
  border: 1px solid #d8b4fe !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .admin-submissions-table td button[style*="Edit"],
:root[data-theme="light"] .admin-submissions-table td [style*="✏️"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

:root[data-theme="light"] .admin-submissions-table td button[style*="Edit"]:hover,
:root[data-theme="light"] .admin-submissions-table td [style*="✏️"]:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .admin-submissions-table td select,
:root[data-theme="light"] .admin-submissions-table td input[type="text"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* Compliance Badges in Light Mode */
:root[data-theme="light"] .compliance-badge.compliant,
:root[data-theme="light"] .admin-submissions-table [style*="color: #34d399"],
:root[data-theme="light"] .admin-submissions-table [style*="color:#34d399"] {
  color: #047857 !important;
}

:root[data-theme="light"] .compliance-badge.amber,
:root[data-theme="light"] .admin-submissions-table [style*="color: #fbbf24"],
:root[data-theme="light"] .admin-submissions-table [style*="color:#fbbf24"] {
  color: #b45309 !important;
}

:root[data-theme="light"] .compliance-badge.red,
:root[data-theme="light"] .admin-submissions-table [style*="color: #f87171"],
:root[data-theme="light"] .admin-submissions-table [style*="color:#f87171"] {
  color: #dc2626 !important;
}

/* Outcome select and reason input controls */
.outcome-select-input {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
}

.outcome-select-input option {
  background: #0f172a;
  color: #ffffff;
}

.outcome-reason-input {
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
}

/* Light Theme Overrides for Outcome Select and Inputs */
:root[data-theme="light"] .outcome-select-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] .outcome-select-input option {
  background: #ffffff !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .outcome-reason-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] .outcome-reason-input::placeholder {
  color: #94a3b8 !important;
}

/* ── Light Mode Modal Overrides (Compliance Guide & Evidence Modals) ── */
:root[data-theme="light"] .modal-overlay > div,
:root[data-theme="light"] #complianceModal > div,
:root[data-theme="light"] #rubricMarkingModal > div,
:root[data-theme="light"] #whySpeedModal > div {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15) !important;
}

:root[data-theme="light"] #complianceModal h3,
:root[data-theme="light"] #complianceModalTitle {
  color: #0f172a !important;
}

:root[data-theme="light"] #complianceModal hr {
  border-top-color: #e2e8f0 !important;
}

:root[data-theme="light"] #complianceModal [style*="color: #60a5fa"],
:root[data-theme="light"] #complianceModal [style*="color:#60a5fa"] {
  color: #2563eb !important;
}

:root[data-theme="light"] #complianceModal [style*="color: #c084fc"],
:root[data-theme="light"] #complianceModal [style*="color:#c084fc"] {
  color: #7e22ce !important;
}

:root[data-theme="light"] #complianceModal [style*="color: #34d399"],
:root[data-theme="light"] #complianceModal [style*="color:#34d399"] {
  color: #059669 !important;
}

/* ── Light Mode Why Speed Modal Overrides ── */
:root[data-theme="light"] #whySpeedModal h3 {
  color: #0284c7 !important;
}

:root[data-theme="light"] #whySpeedModal .why-speed-close-btn:not(button[type="button"].why-speed-close-btn:last-child) {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

:root[data-theme="light"] #whySpeedModal .why-speed-close-btn:not(button[type="button"].why-speed-close-btn:last-child):hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] #whySpeedModal p,
:root[data-theme="light"] #whySpeedModal div[style*="color: #cbd5e1"],
:root[data-theme="light"] #whySpeedModal [style*="color: #cbd5e1"] {
  color: #334155 !important;
}

:root[data-theme="light"] #whySpeedModal strong {
  color: #0f172a !important;
}

:root[data-theme="light"] #whySpeedModal [style*="background: rgba(56, 189, 248, 0.08)"] {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0369a1 !important;
}

:root[data-theme="light"] #whySpeedModal table {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] #whySpeedModal table thead tr {
  background: #f8fafc !important;
  color: #475569 !important;
}

:root[data-theme="light"] #whySpeedModal table thead th {
  color: #475569 !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

:root[data-theme="light"] #whySpeedModal table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
}

:root[data-theme="light"] #whySpeedModal table tbody td[style*="color: #fff"] {
  color: #0f172a !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #whySpeedModal table tbody td[style*="color: #34d399"] {
  color: #059669 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #whySpeedModal table tbody td[style*="color: #fbbf24"] {
  color: #d97706 !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] #whySpeedModal table tbody td[style*="color: #f87171"] {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

/* Bubble 1: How to Review Flags (Light Blue box) */
:root[data-theme="light"] #complianceModal [style*="rgba(59, 130, 246, 0.08)"],
:root[data-theme="light"] #complianceModal [style*="rgba(59,130,246,0.08)"] {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1e293b !important;
}

/* Bubble 2: Scenario-Based Guidance (Light Purple box) */
:root[data-theme="light"] #complianceModal [style*="rgba(168, 85, 247, 0.08)"],
:root[data-theme="light"] #complianceModal [style*="rgba(168,85,247,0.08)"] {
  background: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #1e293b !important;
}

/* Bubble 3: Logging Human Review Outcomes (Light Emerald box) */
:root[data-theme="light"] #complianceModal [style*="rgba(16, 185, 129, 0.08)"],
:root[data-theme="light"] #complianceModal [style*="rgba(16,185,129,0.08)"] {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #064e3b !important;
}

:root[data-theme="light"] #complianceModal [style*="color: #e2e8f0"],
:root[data-theme="light"] #complianceModal [style*="color:#e2e8f0"] {
  color: #334155 !important;
}

:root[data-theme="light"] #complianceModal [style*="color: #cbd5e1"],
:root[data-theme="light"] #complianceModal [style*="color:#cbd5e1"] {
  color: #334155 !important;
}

:root[data-theme="light"] #complianceModal [style*="color: #94a3b8"],
:root[data-theme="light"] #complianceModal [style*="color:#94a3b8"] {
  color: #475569 !important;
}

:root[data-theme="light"] #complianceModal p,
:root[data-theme="light"] #complianceModal li {
  color: #334155 !important;
}

:root[data-theme="light"] #complianceModal strong {
  color: #0f172a !important;
}

:root[data-theme="light"] #complianceModal [style*="background: rgba(37,99,235,0.08)"],
:root[data-theme="light"] #complianceModal [style*="background: rgba(37, 99, 235, 0.08)"] {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] #complianceModal [style*="background: rgba(15,23,42,0.6)"],
:root[data-theme="light"] #complianceModal [style*="background: rgba(15, 23, 42, 0.6)"] {
  background: #ffffff !important;
  border: 1px solid #bae6fd !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] #complianceModal [style*="color: #38bdf8"],
:root[data-theme="light"] #complianceModal [style*="color:#38bdf8"] {
  color: #0284c7 !important;
}

:root[data-theme="light"] #complianceModal [style*="color: #a5b4fc"],
:root[data-theme="light"] #complianceModal [style*="color:#a5b4fc"] {
  color: #4338ca !important;
}

/* Interactive Preview Box inside Bubble 3 */
:root[data-theme="light"] #complianceModal [style*="background: #090d16"],
:root[data-theme="light"] #complianceModal [style*="background:#090d16"] {
  background: #ffffff !important;
  border: 1px solid #a7f3d0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

:root[data-theme="light"] #complianceModal select {
  background: #ffffff !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

:root[data-theme="light"] #complianceModal input[type="text"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] #complianceModal [style*="background: rgba(0,0,0,0.2)"],
:root[data-theme="light"] #complianceModal [style*="background: rgba(0, 0, 0, 0.2)"] {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-left: 3px solid #6366f1 !important;
}

:root[data-theme="light"] #okComplianceModalBtn {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] #okComplianceModalBtn:hover {
  background: #e2e8f0 !important;
}

/* ── Light Mode Overrides for Staff Review / Editor Review Modal ── */
:root[data-theme="light"] .editor-review-modal > div,
:root[data-theme="light"] #editorReviewModal > div,
:root[data-theme="light"] .erp-modal-container {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] .editor-review-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] .erp-session-chip,
:root[data-theme="light"] .editor-review-header .btn-small:not(.btn-accent):not(.btn-primary) {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}

/* Review Modal Top Outcome Box in Light Mode */
:root[data-theme="light"] #replayModalOutcomeActions [style*="background: rgba(0,0,0,0.3)"],
:root[data-theme="light"] #replayModalOutcomeActions [style*="background: rgba(0, 0, 0, 0.3)"],
:root[data-theme="light"] #replayModalOutcomeActions [style*="background:rgba(0,0,0,0.3)"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] #replayModalOutcomeActions [style*="background: rgba(16, 185, 129, 0.18)"],
:root[data-theme="light"] #replayModalOutcomeActions [style*="background:rgba(16,185,129,0.18)"] {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #replayModalOutcomeActions [style*="background: rgba(168, 85, 247, 0.18)"],
:root[data-theme="light"] #replayModalOutcomeActions [style*="background:rgba(168,85,247,0.18)"] {
  background: #faf5ff !important;
  color: #7e22ce !important;
  border: 1px solid #d8b4fe !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #replayModalOutcomeActions button,
:root[data-theme="light"] #replayModalOutcomeActions [style*="✏️"] {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

:root[data-theme="light"] #replayModalOutcomeActions button:hover,
:root[data-theme="light"] #replayModalOutcomeActions [style*="✏️"]:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] #replayModalOutcomeActions [style*="color: #94a3b8"],
:root[data-theme="light"] #replayModalOutcomeActions [style*="color:#94a3b8"] {
  color: #475569 !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] #replayModalOutcomeActions select,
:root[data-theme="light"] #replayModalOutcomeActions input[type="text"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* Quick Swap Action Buttons in Review Header */
:root[data-theme="light"] #editorSwapFeatureBtn {
  background: #eff6ff !important;
  border: 1px solid #3b82f6 !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #editorSwapFeatureBtn:hover {
  background: #dbeafe !important;
  border-color: #2563eb !important;
}

:root[data-theme="light"] #editorSwapSidesBtn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #editorSwapSidesBtn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* View Mode Tabs in Review Header */
:root[data-theme="light"] .erp-tab {
  color: #475569 !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] .erp-tab:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

:root[data-theme="light"] .erp-tab--active {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  font-weight: 700 !important;
}

/* 1. Global Character Composition Ratio Bar in Light Mode */
:root[data-theme="light"] #globalCompositionRatioSection {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #globalCompositionLabel {
  color: #0f172a !important;
}

:root[data-theme="light"] #globalCompositionTypedLegend,
:root[data-theme="light"] #globalCompositionPastedLegend {
  color: #334155 !important;
}

:root[data-theme="light"] .timeline-ratio-bar-container {
  background: #e2e8f0 !important;
}

/* 2. High-Tech Assessor Suite Control Bar in Light Mode */
:root[data-theme="light"] #wxAssessorSuiteControlBar {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #wxAssessorSuiteControlBar [style*="color: #818cf8"],
:root[data-theme="light"] #wxAssessorSuiteControlBar [style*="color:#818cf8"] {
  color: #4338ca !important;
}

:root[data-theme="light"] #wxAssessorSuiteControlBar [style*="color: #94a3b8"],
:root[data-theme="light"] #wxAssessorSuiteControlBar [style*="color:#94a3b8"] {
  color: #475569 !important;
}

:root[data-theme="light"] #editorReplaySpeed {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] #editorReplayStepLabel {
  color: #4338ca !important;
}

:root[data-theme="light"] #wxAssessorSuiteControlBar [style*="border-top: 1px solid rgba(255,255,255,0.06)"],
:root[data-theme="light"] #wxAssessorSuiteControlBar [style*="border-top:1px solid rgba(255,255,255,0.06)"] {
  border-top: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] .replay-zoom-controls {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] .replay-zoom-controls .replay-zoom-label,
:root[data-theme="light"] #replayZoomLabel,
:root[data-theme="light"] #aiIndexZoomLabel {
  color: #0f172a !important;
}

:root[data-theme="light"] .replay-zoom-controls button {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] .replay-zoom-controls button:hover {
  background: #e2e8f0 !important;
}

/* 3. AI Index Header / Right Pane in Light Mode */
:root[data-theme="light"] #editorAiIndexPane .erp-pane-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] #editorRightPaneContainer {
  background: #f1f5f9 !important;
}

/* 4. Auditor & Viva Pane in Light Mode */
:root[data-theme="light"] #editorAuditorPane {
  background: #ffffff !important;
}

:root[data-theme="light"] #auditorChatSection {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
}

:root[data-theme="light"] #auditorChatSection > div:first-child {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #auditorChatLog {
  background: #f8fafc !important;
}

:root[data-theme="light"] #auditorChatLog .ai {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #auditorSampleQuestions {
  background: #f1f5f9 !important;
  border-top: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] .auditor-sample-btn,
:root[data-theme="light"] #auditorSampleQuestions button {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] #auditorSampleQuestions button[data-q*="flags"],
:root[data-theme="light"] #auditorSampleQuestions button[data-q*="Inspect"] {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
}

:root[data-theme="light"] #auditorSampleQuestions button[data-q*="paste"],
:root[data-theme="light"] #auditorSampleQuestions button[data-q*="velocity"] {
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  color: #c2410c !important;
}

:root[data-theme="light"] #auditorSampleQuestions button[data-q*="Summarise"],
:root[data-theme="light"] #auditorSampleQuestions button[data-q*="integrity"] {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
}

:root[data-theme="light"] #auditorChatForm {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] #auditorChatInput {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] #auditorChatInput::placeholder {
  color: #94a3b8 !important;
}

/* 5. Institutional AI Policy Pane in Light Mode */
:root[data-theme="light"] #editorPolicyPane {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent > div {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #editorPolicyPaneContent h2 {
  color: #b45309 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="border-bottom: 1px solid rgba(255,255,255,0.1)"] {
  border-bottom: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="color: #94a3b8"] {
  color: #475569 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="color: #cbd5e1"] {
  color: #334155 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent p {
  color: #334155 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(99,102,241,0.2)"] {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
}

/* Permitted Box in Light Mode */
:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(16,185,129,0.08)"] {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(16,185,129,0.08)"] strong {
  color: #047857 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(16,185,129,0.08)"] ul,
:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(16,185,129,0.08)"] li {
  color: #1e293b !important;
}

/* Prohibited Box in Light Mode */
:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(239,68,68,0.08)"] {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(239,68,68,0.08)"] strong {
  color: #dc2626 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(239,68,68,0.08)"] ul,
:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(239,68,68,0.08)"] li {
  color: #1e293b !important;
}

/* Pilot Telemetry Notice in Light Mode */
:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(56,189,248,0.08)"] {
  background: #f0f9ff !important;
  border-left-color: #0284c7 !important;
  color: #0c4a6e !important;
}

/* Custom Policy Document in Light Mode */
:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(15,23,42,0.9)"] {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(15,23,42,0.9)"] strong {
  color: #7e22ce !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(15,23,42,0.9)"] > div {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}

/* Automatic Guardrails in Light Mode */
:root[data-theme="light"] #editorPolicyPaneContent [style*="border-top: 1px dashed rgba(255,255,255,0.15)"] {
  border-top: 1px dashed #cbd5e1 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="color: #f43f5e"] {
  color: #e11d48 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(239,68,68,0.06)"] {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(239,68,68,0.06)"] [style*="color: #f87171"] {
  color: #dc2626 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(239,68,68,0.2)"] {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(239,68,68,0.06)"] ul,
:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(239,68,68,0.06)"] li {
  color: #1e293b !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(239,68,68,0.06)"] strong {
  color: #991b1b !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(245,158,11,0.06)"] {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(245,158,11,0.06)"] [style*="color: #fbbf24"] {
  color: #d97706 !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(245,158,11,0.2)"] {
  background: #fef3c7 !important;
  color: #92400e !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(245,158,11,0.06)"] ul,
:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(245,158,11,0.06)"] li {
  color: #1e293b !important;
}

:root[data-theme="light"] #editorPolicyPaneContent [style*="background: rgba(245,158,11,0.06)"] strong {
  color: #92400e !important;
}

/* 6. Feature Swap Interactive Selection Modal */
.swap-target-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.swap-target-btn--active {
  background: rgba(99, 102, 241, 0.25);
  border: 2px solid #6366f1;
  color: #a5b4fc;
}

.swap-feature-option-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.swap-feature-option-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
}

.swap-in-badge {
  font-size: 11px;
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
}

/* Feature Swap Modal in Light Mode */
:root[data-theme="light"] #featureSwapModal > div {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15) !important;
}

:root[data-theme="light"] #featureSwapModal h3 {
  color: #4338ca !important;
}

:root[data-theme="light"] #featureSwapModal [style*="border-bottom: 1px solid #1e293b"] {
  border-bottom: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] #featureSwapModal p,
:root[data-theme="light"] #featureSwapModal label {
  color: #334155 !important;
}

:root[data-theme="light"] #closeFeatureSwapModalBtn {
  color: #64748b !important;
}

:root[data-theme="light"] .swap-target-btn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

:root[data-theme="light"] .swap-target-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

:root[data-theme="light"] .swap-target-btn--active {
  background: #eff6ff !important;
  border: 2px solid #3b82f6 !important;
  color: #1d4ed8 !important;
}

:root[data-theme="light"] .swap-feature-option-btn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .swap-feature-option-btn:hover {
  background: #eff6ff !important;
  border-color: #6366f1 !important;
  color: #1e293b !important;
}

:root[data-theme="light"] .swap-in-badge {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
}

/* ── Date Picker Filter Styling (Matching Blue Theme Accent) ── */
.date-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.08);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  transition: all 0.2s ease;
}

.date-filter-label:hover {
  border-color: var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.12);
}

input[type="date"] {
  background: var(--card, #ffffff);
  color: var(--text, #0f172a);
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
  color-scheme: light dark;
}

:root[data-theme="light"] input[type="date"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #93c5fd !important;
  color-scheme: light !important;
}

:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.3) sepia(1) saturate(5) hue-rotate(200deg);
  cursor: pointer;
}

input[type="date"]:focus {
  border-color: var(--accent, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}
:root[data-theme="light"] .copilot-action-btn--secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text) !important;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Prevent double scrollbar when the research or lectures split-panel is active.
   The split wrapper itself becomes a fixed-height grid that fills the viewport
   below the sticky header, and <main>/<aside> scroll internally.
   Without this, the body's own scrollbar overlaps the panel's internal one. */
body:has(.page-split--research[data-panel-order]),
body:has(#pageSplitLec[data-panel-order]),
body:has(#pageSplitRubric[data-panel-order]) {
  overflow: hidden;
}
body {
  margin: 0;
  background:
    radial-gradient(ellipse 90% 60% at 15% -20%, rgba(96,165,250,.05), transparent),
    radial-gradient(ellipse 70% 50% at 90% 0%, rgba(34,211,238,.04), transparent),
    var(--bg);
  color: var(--text);
  font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Focus — remove default browser outlines on click, but ensure keyboard focus is prominent */
:where(a, button, input, select, textarea, [tabindex]):focus {
  outline: none;
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}
input[type="range"]:focus,
input[type="range"]:focus-visible { outline: none !important; }

/* Global autofill override — prevents yellow Chrome flash in dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px var(--card) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  border-color: var(--border) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Global input focus ring */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

/* Scrollbars (WebKit) */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-thumb { background: color-mix(in hsl, var(--border) 60%, transparent); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------
   Header / Topbar
   --------------------------- */
header {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in hsl, var(--bg) 86%, transparent);
  backdrop-filter: blur(6px) saturate(120%);
}

header .brand { display:flex; gap:.75rem; align-items:center; }
header .brand img { height: 32px; width: 32px; border-radius: 6px; }
header .brand span { font-weight: 700; letter-spacing: .2px; font-size: 17px; }

/* ---------------------------
   Generic Layout Helpers
   --------------------------- */
main { 
  max-width: 100%; 
  margin: 12px 0; 
  padding: 0 16px; 
  box-sizing: border-box;
}

/* When the split editor panel is visible on Chat, tighten spacing */
body:has(#assignmentEditorPanel:not([hidden])) .assignment-layout {
  max-width: 100%;
  gap: 6px;
}

body:has(#assignmentEditorPanel:not([hidden])) .hero-wrap {
  padding: 10px 14px;
}

body:has(#assignmentEditorPanel:not([hidden])) .badge {
  display: none;
}

.card {
  background: var(--surface-1);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:14px;
  box-shadow: var(--shadow);
}

/* .card + .card { margin-top: 16px; } */

h1,h2,h3 { margin:0; }
h1 { font-size: 26px; line-height: 1.2; }
h2 { font-size: 18px; }
p { margin: 8px 0; }
.muted, .doc-subtle { color: var(--muted); font-size: 12px; }
.link { color: var(--text); font-weight: 700; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ============================================
   Generic .grid helper (used in modal etc.)
   ============================================ */

.grid {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap: 20px;
  align-items: start;
}

/* Stack generic grids on tablets + phones */
@media (max-width: 1100px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* Chat-specific grid override (legacy) */
#chat-grid.grid {
  grid-template-columns: 2fr 1fr;
  gap: 22px;
}

@media (max-width: 1000px) {
  #chat-grid.grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Index layout: hero, brief, chat (vertical)
   ============================================ */

.assignment-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  box-sizing: border-box;
}

/* HERO ROW
   Left = Wurksy logo/title/buttons
   Right = assignment meta
*/
.hero-wrap { padding: 14px 16px; }

/* Two-column hero: left = all content, right = assignment card */
.hero-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.hero-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* assignment meta box — right column of hero-row */
.assignment-meta {
  width: 100% !important;
  max-width: 820px !important;
  margin: 12px auto 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* 4 Mini Bubbles Row */
.assignment-meta-bubbles {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.meta-bubble {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
  background: color-mix(in srgb, var(--accent, #4f46e5) 12%, var(--card)) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #4f46e5) 30%, transparent) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.15s ease, border-color 0.15s ease !important;
}

.meta-bubble:hover {
  transform: translateY(-1px) !important;
  border-color: var(--accent, #4f46e5) !important;
}

.meta-bubble-label {
  font-weight: 700 !important;
  color: var(--accent, #6366f1) !important;
}

:root[data-theme="light"] .meta-bubble {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .meta-bubble-label {
  color: #4f46e5 !important;
}

/* Title Row matching Brief UI */
.brief-row.assignment-title-row {
  margin-top: 4px !important;
  background: color-mix(in srgb, var(--card) 92%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

.title-text-content {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
  flex: 1 !important;
}
  font-weight: 500;
}

/* CTA Buttons styling - larger, modern, and aligned */
.cta {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cta .btn {
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cta .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}
.cta .btn-primary {
  background: linear-gradient(135deg, var(--accent, #6366f1), #4f46e5) !important;
  border: none !important;
  color: #fff !important;
}


/* keep compact header layout on narrow screens */
@media (max-width: 820px) {
  .assignment-meta {
    padding: 8px 10px;
    font-size: 12px;
  }

  .assignment-meta h3 {
    font-size: 14px;
  }
}

#assignmentBrief {
  overflow-y: auto;
}

.brief-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 14px;
  background: color-mix(in hsl, var(--card) 94%, transparent);
  border: 1px solid color-mix(in hsl, var(--border) 86%, transparent);
  border-radius: var(--radius-lg);
  line-height: 1.55;
  transition: all 0.3s ease;
}

.brief-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.brief-toggle-btn {
  background: transparent;
  border: 1px solid var(--border);
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s ease;
}
.brief-toggle-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.brief-body {
  width: 100%;
}

.brief-row--collapsed .brief-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3.1em;
}

.brief-row--expanded .brief-text {
  display: block;
  max-height: none;
  overflow: visible;
}

.brief-label {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--muted);
  flex: 0 0 auto;
}

.brief-text {
  flex: 1 1 auto;
  font-size: 14px;
}

.mode-notice {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in hsl, var(--border) 82%, transparent);
  background: color-mix(in hsl, var(--card) 96%, transparent);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .brief-row {
    gap: 6px;
  }
  .brief-label {
    font-size: 13px;
  }
}

/* ---------------------------
   Inputs & Buttons
   --------------------------- */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="file"],
input[type="datetime-local"],
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in hsl, var(--card) 88%, transparent);
  color: var(--text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

textarea { min-height: 44px; resize: vertical; }

button {
  font: inherit;
  color: var(--text);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
button:hover { }
button:active { transform: translateY(1px); }

button.primary {
  border: 0;
  color: #0b1020;
  background: var(--accent);
}
button.primary:hover {
  background: color-mix(in hsl, var(--accent) 85%, #fff);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 14px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--text);
  text-decoration:none; cursor:pointer;
  transition: box-shadow .15s ease, transform .05s ease;
}

select.btn,
select {
  color: var(--text, #fff);
  background-color: #0f172a;
}

option {
  color: #fff;
  background-color: #0f172a;
  padding: 10px;
}

option:hover,
option:focus,
option:checked {
  color: #fff;
  background-color: #312e81;
}

.btn:hover { }
.btn:active { transform: translateY(1px); }
.btn-primary { border:0; color:#0b1020; background: var(--accent); }
.btn-primary:hover { background: color-mix(in hsl, var(--accent) 85%, #fff); }
.btn-small { padding: 7px 10px; font-size: 13px; }
.btn-accent { border-color: var(--accent); color: var(--accent); }
.btn-accent:hover { background: var(--accent); color: #0b1020; }

#submitBtn {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(96, 165, 250, 0.22));
  border: 1px solid rgba(125, 211, 252, 0.6);
  color: #e0f2fe;
  font-weight: 500;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.25), inset 0 0 8px rgba(186, 230, 253, 0.08);
  transition: all 0.25s ease;
}

#submitBtn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(96, 165, 250, 0.38));
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 0 12px rgba(186, 230, 253, 0.15);
  transform: translateY(-1px);
}

:root[data-theme="light"] #submitBtn {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.1), rgba(14, 165, 233, 0.15));
  border: 1px solid #38bdf8;
  color: #0369a1;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.2);
}

:root[data-theme="light"] #submitBtn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.18), rgba(14, 165, 233, 0.25));
  border-color: #0284c7;
  color: #0c4a6e;
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.35);
}

.card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.card-head-actions { display: flex; gap: 8px; align-items: center; }

.ask-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 28px;
  margin-top: 4px;
  position: relative;
  flex-shrink: 0;
}

.ask-input.ask-input--compact {
  width: min(100%, 520px);
  min-height: 44px;
  padding: 6px 20px;
  border-radius: 999px;
  margin-left: 0;
  margin-right: auto;
}

.ask-input.ask-input--compact textarea {
  height: 26px;
  max-height: 26px;
  padding: 0 4px;
  line-height: 1.4;
  overflow-y: auto;
}

.ask-input textarea {
  flex: 1;
  padding: 10px 4px;
  border: none;
  background: transparent;
  resize: none;
  max-height: 10em;
  line-height: 1.5;
  font-size: 16px;
}

.ask-input textarea:focus {
  outline: none;
}

.ask-input textarea::placeholder {
  color: var(--muted);
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
}

.ask-input .input-placeholder {
  position: absolute;
  left: 18px;
  right: 200px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ask-input .input-placeholder__prompt {
  font: inherit;
  color: inherit;
}

.ask-input .input-placeholder__hint {
  font: inherit;
  color: inherit;
}

.ask-input textarea:focus + .input-placeholder,
.ask-input textarea:not(:placeholder-shown) + .input-placeholder {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 850px) {
  .ask-input .input-placeholder__hint {
    display: none;
  }
}

.ask-input .send-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.input-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.workspace-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

/* 1. COLLAPSED / CLOSED STATE (data-has-editor="false" OR no panelOrder) */
#chat[data-has-editor="false"],
#chat:not([data-has-editor="true"]),
.workspace-split[data-has-editor="false"],
.workspace-split:not([data-has-editor="true"]),
.assignment-layout[data-has-editor="false"] #chat,
.assignment-layout:not([data-panel-order]) #chat,
#chat:has(#assignmentEditorPanel[hidden]),
#chat:has(#assignmentEditorPanel[style*="display: none"]),
.assignment-layout:has(#assignmentEditorPanel[hidden]) #chat,
.assignment-layout:has(#assignmentEditorPanel[style*="display: none"]) #chat {
  display: block !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#chat[data-has-editor="false"] #aiWorkspacePanel,
#chat:not([data-has-editor="true"]) #aiWorkspacePanel,
.workspace-split[data-has-editor="false"] .chat-wrap,
.workspace-split:not([data-has-editor="true"]) .chat-wrap,
.assignment-layout[data-has-editor="false"] #aiWorkspacePanel,
#chat:has(#assignmentEditorPanel[hidden]) #aiWorkspacePanel,
#chat:has(#assignmentEditorPanel[style*="display: none"]) #aiWorkspacePanel,
.assignment-layout:has(#assignmentEditorPanel[hidden]) #aiWorkspacePanel,
.assignment-layout:has(#assignmentEditorPanel[style*="display: none"]) #aiWorkspacePanel {
  order: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

#chat:has(#assignmentEditorPanel[hidden]) .ep-resize-handle,
#chat:has(#assignmentEditorPanel[style*="display: none"]) .ep-resize-handle,
#chat[data-has-editor="false"] .ep-resize-handle,
.assignment-layout:has(#assignmentEditorPanel[hidden]) .ep-resize-handle,
.assignment-layout:has(#assignmentEditorPanel[style*="display: none"]) .ep-resize-handle {
  display: none !important;
}

/* 2. EDITOR ON RIGHT (editor-right OR split-right) */
#chat[data-panel-order="editor-right"][data-has-editor="true"],
#chat[data-panel-order="split-right"][data-has-editor="true"],
.assignment-layout[data-panel-order="split-right"][data-has-editor="true"] #chat,
.assignment-layout[data-panel-order="editor-right"][data-has-editor="true"] #chat,
.workspace-split[data-panel-order="editor-right"][data-has-editor="true"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 6px var(--editor-w, var(--chat-editor-w, clamp(280px, 38vw, 560px))) !important;
  column-gap: 0 !important;
}

#chat[data-panel-order="editor-right"][data-has-editor="true"] #aiWorkspacePanel,
#chat[data-panel-order="split-right"][data-has-editor="true"] #aiWorkspacePanel,
.workspace-split[data-panel-order="editor-right"][data-has-editor="true"] .chat-wrap {
  order: 1 !important;
}

#chat[data-panel-order="editor-right"][data-has-editor="true"] .ep-resize-handle,
#chat[data-panel-order="split-right"][data-has-editor="true"] .ep-resize-handle,
.workspace-split[data-panel-order="editor-right"][data-has-editor="true"] .ep-resize-handle {
  order: 2 !important;
  display: flex !important;
}

#chat[data-panel-order="editor-right"][data-has-editor="true"] #assignmentEditorPanel,
#chat[data-panel-order="split-right"][data-has-editor="true"] #assignmentEditorPanel,
.workspace-split[data-panel-order="editor-right"][data-has-editor="true"] .assignment-editor-panel {
  order: 3 !important;
}

/* 3. EDITOR ON LEFT (editor-left OR split-left) */
#chat[data-panel-order="editor-left"][data-has-editor="true"],
#chat[data-panel-order="split-left"][data-has-editor="true"],
.assignment-layout[data-panel-order="split-left"][data-has-editor="true"] #chat,
.assignment-layout[data-panel-order="editor-left"][data-has-editor="true"] #chat,
.workspace-split[data-panel-order="editor-left"][data-has-editor="true"] {
  display: grid !important;
  grid-template-columns: var(--editor-w, var(--chat-editor-w, clamp(280px, 38vw, 560px))) 6px minmax(0, 1fr) !important;
  column-gap: 0 !important;
}

#chat[data-panel-order="editor-left"][data-has-editor="true"] #assignmentEditorPanel,
#chat[data-panel-order="split-left"][data-has-editor="true"] #assignmentEditorPanel,
.workspace-split[data-panel-order="editor-left"][data-has-editor="true"] .assignment-editor-panel {
  order: 1 !important;
}

#chat[data-panel-order="editor-left"][data-has-editor="true"] .ep-resize-handle,
#chat[data-panel-order="split-left"][data-has-editor="true"] .ep-resize-handle,
.workspace-split[data-panel-order="editor-left"][data-has-editor="true"] .ep-resize-handle {
  order: 2 !important;
  display: flex !important;
}

#chat[data-panel-order="editor-left"][data-has-editor="true"] #aiWorkspacePanel,
#chat[data-panel-order="split-left"][data-has-editor="true"] #aiWorkspacePanel,
.workspace-split[data-panel-order="editor-left"][data-has-editor="true"] .chat-wrap {
  order: 3 !important;
}

/* Show drag handle in split modes */
.assignment-layout[data-panel-order="split-right"] #chat .ep-resize-handle,
.assignment-layout[data-panel-order="split-left"] #chat .ep-resize-handle {
  display: flex;
}

/* ── Wide/full split: [hero + chat] | [editor] ────────────────────────── */
/* Uses display:contents on #chat so its children join the outer grid */
.assignment-layout[data-panel-order="wide-right"] {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-height: min(88vh, 1000px);
}

.assignment-layout[data-panel-order="wide-right"] .hero-wrap {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.assignment-layout[data-panel-order="wide-right"] #chat {
  display: contents;
}

.assignment-layout[data-panel-order="wide-right"] #aiWorkspacePanel {
  grid-column: 1;
  grid-row: 2;
  height: 100%;
  overflow: hidden;
}

.assignment-layout[data-panel-order="wide-right"] #assignmentEditorPanel {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 100%;
  overflow: hidden;
}

.assignment-layout[data-panel-order="wide-left"] {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-height: min(88vh, 1000px);
}

.assignment-layout[data-panel-order="wide-left"] .hero-wrap {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
}

.assignment-layout[data-panel-order="wide-left"] #chat {
  display: contents;
}

.assignment-layout[data-panel-order="wide-left"] #aiWorkspacePanel {
  grid-column: 2;
  grid-row: 2;
  height: 100%;
  overflow: hidden;
}

.assignment-layout[data-panel-order="wide-left"] #assignmentEditorPanel {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 100%;
  overflow: hidden;
}

/* ── External mode: panel position cycling ─────────────────────────────── */
/* Chat panel pinned to left or right as a narrow side panel */
.assignment-layout[data-panel-order="ext-left"] {
  max-width: 480px;
  margin-right: auto;
  margin-left: 0;
}

.assignment-layout[data-panel-order="ext-right"] {
  max-width: 480px;
  margin-left: auto;
  margin-right: 0;
}

/* Override fixed split-panel heights inside wide modes */
.assignment-layout[data-panel-order^="wide"] .split-panel {
  height: 100%;
  min-height: 0;
}

.assignment-layout[data-panel-order^="wide"] #msgs {
  max-height: none;
  flex: 1;
  overflow-y: auto;
}

.split-panel {
  min-height: 0;
  min-width: 0;
}

/* ── Page split: Lectures / Research editor side panel ─────────────────── */
.page-split {
  display: contents;
}

.page-split[data-panel-order="editor-right"] {
  display: grid;
  grid-template-columns: 1fr 6px clamp(250px, var(--editor-w, 28vw), 50vw);
  height: 100dvh;
  overflow: hidden;
}

.page-split[data-panel-order="editor-left"] {
  display: grid;
  grid-template-columns: clamp(250px, var(--editor-w, 28vw), 50vw) 6px 1fr;
  height: 100dvh;
  overflow: hidden;
}

.page-split[data-panel-order="editor-wide"] {
  display: grid;
  grid-template-columns: 1fr 6px clamp(350px, var(--editor-w, 40vw), 50vw);
  height: 100dvh;
  overflow: hidden;
}

/* When editor is open, shrink sidebar + chat so the viewer column has enough room */
.page-split[data-panel-order] {
  --sidebar-w: clamp(130px, 15vw, 220px);
  --chat-w: clamp(150px, 18vw, 260px);
}

.page-split[data-panel-order="editor-left"] .layout,
.page-split[data-panel-order="editor-left"] .workspace-container,
.page-split[data-panel-order="editor-left"] main {
  order: 3;
}

.page-split[data-panel-order="editor-left"] .ep-resize-handle {
  order: 2;
}

.page-split[data-panel-order="editor-left"] .editor-split-panel {
  order: 1;
}

.page-split[data-panel-order] .layout {
  overflow: hidden;
  height: 100%;
  min-width: 0;
  /* The lectures .layout sets width/max-width: 100vw which bleeds out of the
     grid column when the editor panel is open. Override to fill the cell only. */
  width: 100% !important;
  max-width: 100% !important;
}

.page-split--research[data-panel-order] main {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 12px 16px;
  box-sizing: border-box;
}

.page-split--research[data-panel-order] {
  height: calc(100dvh - 53px) !important;
}

/* All direct grid children must be able to shrink below content size.
   Without min-width: 0, grid items keep their intrinsic content width and
   the main column refuses to shrink when the editor panel is dragged wider,
   causing visible overlap between the two panels.
   isolation: isolate gives each column its own stacking context so that
   high-z-index elements inside one column (sticky headers, Quill toolbar,
   dropdowns) cannot paint over an adjacent column during drag-resize. */
.page-split[data-panel-order] > * {
  min-width: 0;
  isolation: isolate;
}

.page-split[data-panel-order] > .workspace-container,
.page-split[data-panel-order] > main {
  min-width: 320px;
}

/* Drag resize handle between panels */
.ep-resize-handle {
  display: none;
  position: relative;
  width: 6px;
  background: transparent;
  cursor: col-resize;
  z-index: 20;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.page-split[data-panel-order] .ep-resize-handle {
  display: flex;
}

.ep-resize-handle::after {
  content: '';
  width: 3px;
  height: 36px;
  border-radius: 3px;
  background: var(--border);
  opacity: 0.45;
  transition: opacity 0.15s, height 0.15s, background 0.15s;
  pointer-events: none;
}

.ep-resize-handle:hover::after,
.ep-resize-handle.ep-dragging::after {
  opacity: 1;
  height: 56px;
  background: var(--border);
}

.ep-resize-handle.ep-dragging {
  background: color-mix(in hsl, var(--border) 20%, transparent);
}

.editor-split-panel {
  border-left: 1px solid var(--border);
  background: var(--bg, #0f1117);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  gap: 10px;
  padding: 12px;
  box-sizing: border-box;
}

.page-split[data-panel-order="editor-left"] .editor-split-panel {
  border-left: none;
  border-right: 1px solid var(--border);
}

@media (max-width: 1080px) {
  .page-split[data-panel-order="editor-right"],
  .page-split[data-panel-order="editor-left"],
  .page-split[data-panel-order="editor-wide"] {
    grid-template-columns: 1fr;
    height: auto;
  }

  .ep-resize-handle {
    display: none !important;
  }

  .page-split[data-panel-order="editor-left"] .layout,
  .page-split[data-panel-order="editor-left"] main,
  .page-split[data-panel-order="editor-left"] .editor-split-panel {
    order: initial;
  }

  .page-split[data-panel-order] .layout {
    height: auto;
    overflow: visible;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .page-split--research[data-panel-order] main {
    height: auto;
    overflow: visible;
    max-width: 1400px;
    margin: 12px auto;
    padding: 0 16px;
  }

  .page-split--research[data-panel-order] {
    height: auto !important;
  }

  .editor-split-panel {
    height: auto;
    min-height: 400px;
    border-left: none;
    border-top: 1px solid var(--border);
  }
}
/* ────────────────────────────────────────────────────────────────────────── */

.assignment-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 600px;
  min-width: 0;
}

.assignment-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.assignment-editor-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.editor-meta-divider {
  width: 1px;
  height: 14px;
  background: var(--border);
  flex-shrink: 0;
}

#rubricStatus:empty {
  display: none;
}

.assignment-editor-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in hsl, var(--card) 96%, transparent);
}

.assignment-editor-toolbar .btn {
  padding: 5px 9px;
}

#assignmentEditorToolbar .ql-formats {
  flex-shrink: 0;
}

.ql-history-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 5px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted, #8b95a8);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.ql-history-btn:hover {
  color: var(--text, #e2e8f0);
  background: rgba(255, 255, 255, 0.06);
}


.assignment-editor-surface {
  flex: 1;
  min-height: 0;
  background: color-mix(in hsl, var(--card) 99%, #fff 1%);
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
}

/* Workspace layout containers */
.ae-workspace-container,
#fs-workspace-container {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
  box-sizing: border-box;
}

#fs-workspace-container {
  padding: 12px;
  background: var(--bg);
  height: calc(100vh - 43px);
}

.ae-editor-column,
#fs-editor-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.ae-editor-column .assignment-editor-surface {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ae-editor-column .ql-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ae-editor-column .ql-editor {
  flex: 1;
  overflow-y: auto;
}

#fs-editor-column {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

#fs-editor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Inspector panel container */
.ae-inspector-panel {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}

.ae-inspector-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: color-mix(in hsl, var(--card) 95%, transparent);
}

.ae-tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #8b95a8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.ae-tab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.ae-tab-btn.active {
  color: var(--primary, #6366f1);
  border-bottom-color: var(--primary, #6366f1);
  background: rgba(255, 255, 255, 0.05);
}

.ae-tab-content {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  gap: 16px;
}

.ae-tab-content.active {
  display: flex;
}

/* Tab 1: Rubric Controls & Panel */
.rubric-control-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: color-mix(in hsl, var(--surface-1, #1e293b) 50%, transparent);
  padding: 12px;
  border-radius: 8px;
  border: 1px dashed var(--border);
}

.rubric-upload-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rubric-upload-row .btn {
  padding: 6px 12px;
  font-size: 12px;
}

#rubricStatus,
#fs-rubric-status {
  font-size: 11px;
  color: var(--muted, #8b95a8);
  line-height: 1.4;
  word-break: break-all;
}

.rubric-review-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 12px;
}

.rubric-review-panel__header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.rubric-review-panel__header p {
  margin: 4px 0 0 0;
}

.rubric-review-panel__content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

/* Premium Scorecard Rubric Cards */
.rubric-card {
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in hsl, var(--card) 98%, #fff 2%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rubric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rubric-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in hsl, var(--border) 40%, transparent);
}

.rubric-card-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.rubric-card-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.rubric-card-content {
  padding: 12px 14px;
}

.rubric-card-content ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rubric-card-content li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, #94a3b8);
}

.rubric-item-text {
  color: var(--text);
}

/* Card-specific accent borders & backgrounds */
.rubric-card--overall {
  border-left: 4px solid #3b82f6;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.03) 0%, rgba(59, 130, 246, 0) 100%);
}
.rubric-title--overall {
  color: #60a5fa;
}

.rubric-card--strengths {
  border-left: 4px solid #10b981;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.03) 0%, rgba(16, 185, 129, 0) 100%);
}
.rubric-title--strengths {
  color: #34d399;
}

.rubric-card--weaknesses {
  border-left: 4px solid #f43f5e;
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.03) 0%, rgba(244, 63, 94, 0) 100%);
}
.rubric-title--weaknesses {
  color: #fb7185;
}

.rubric-card--improvements {
  border-left: 4px solid #8b5cf6;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.03) 0%, rgba(139, 92, 246, 0) 100%);
}
.rubric-title--improvements {
  color: #a78bfa;
}

.rubric-card--level {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.03) 0%, rgba(245, 158, 11, 0) 100%);
}
.rubric-title--level {
  color: #fbbf24;
}

/* Weaknesses Todo Checklist */
.rubric-todo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rubric-todo-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.rubric-todo-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.rubric-todo-check {
  margin-top: 3px;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  accent-color: #f43f5e;
  cursor: pointer;
}

.rubric-todo-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text);
  transition: all 0.2s ease;
}

/* Checked state transitions */
.rubric-todo-item.checked {
  background: rgba(16, 185, 129, 0.03);
  border-color: rgba(16, 185, 129, 0.1);
  opacity: 0.55;
}

.rubric-todo-item.checked .rubric-todo-text {
  text-decoration: line-through;
  color: var(--muted);
}

.rubric-todo-item.checked .rubric-todo-check {
  accent-color: #10b981;
}

/* Priority Badges */
.rubric-improvements-list {
  list-style: none;
  padding-left: 0 !important;
}

.rubric-improvements-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.rubric-improvements-list li:last-child {
  margin-bottom: 0;
}

.prio-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin-top: 1px;
}

.prio-p1 {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.prio-p2 {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.prio-p3 {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Tab 2: Copilot / AI Assistant Styles */
.copilot-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.copilot-selection-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.copilot-selection-preview {
  background: color-mix(in hsl, var(--surface-1, #1e293b) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.copilot-selection-preview strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted, #8b95a8);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

#copilotSelectedText,
#fs-copilot-selected-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
}

.copilot-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.copilot-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted, #8b95a8);
  letter-spacing: 0.8px;
  margin-top: 8px;
  margin-bottom: 4px;
}

.copilot-group-label:first-of-type {
  margin-top: 0;
}

.copilot-action-btn {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.copilot-action-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.1) 100%);
  border-color: rgba(99, 102, 241, 0.6);
  color: #fff;
  transform: translateX(2px);
}

.copilot-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--muted, #8b95a8);
}

.copilot-action-btn--secondary {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border);
  color: var(--text);
}

.copilot-action-btn--secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--text-muted);
  color: #fff;
}

.copilot-result-panel {
  background: color-mix(in hsl, var(--card) 98%, #fff 2%);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 8px;
}

.copilot-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}

.copilot-result-header h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.copilot-result-actions {
  display: flex;
  gap: 6px;
}

.copilot-result-actions .btn {
  padding: 4px 8px;
  font-size: 11px;
}

.copilot-result-content {
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  overflow-y: auto;
  max-height: 280px;
}

.copilot-result-content h4 {
  margin: 12px 0 6px 0;
  font-size: 14px;
  color: var(--primary, #6366f1);
}

.copilot-result-content h4:first-child {
  margin-top: 0;
}

.copilot-result-content p {
  margin: 0 0 10px 0;
}

.copilot-result-content p:last-child {
  margin-bottom: 0;
}

.copilot-result-content ul,
.copilot-result-content ol {
  margin: 0 0 10px 18px;
  padding: 0;
}

.copilot-result-content li {
  margin-bottom: 4px;
}

.copilot-result-content li:last-child {
  margin-bottom: 0;
}

.copilot-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--primary, #6366f1);
  border-radius: 50%;
  animation: copilot-spin 0.8s linear infinite;
}

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

/* Responsive Inspector layout rule */
@media (max-width: 1080px) {
  .ae-workspace-container,
  #fs-workspace-container {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .ae-inspector-panel,
  #fs-inspector-panel {
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    margin: 12px 0 0 0;
  }

  .ae-tab-content,
  .rubric-review-panel__content,
  .copilot-result-content {
    max-height: none;
    overflow-y: visible;
  }
}

.assignment-editor-panel .ql-container,
.editor-split-panel .ql-container {
  border: 0;
  font-size: 16px;
  line-height: 1.65;
}

.assignment-editor-panel,
.editor-split-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}

.assignment-editor-panel[hidden],
.editor-split-panel[hidden],
[hidden].assignment-editor-panel,
[hidden].editor-split-panel {
  display: none !important;
}

.assignment-editor-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--surface, #0f172a) !important;
  color: var(--text, #ffffff) !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
}

:root[data-theme="light"] .assignment-editor-header {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] .assignment-editor-header .input-label,
:root[data-theme="light"] .assignment-editor-header label {
  color: #0f172a !important;
}

:root[data-theme="light"] .assignment-editor-header .muted,
:root[data-theme="light"] .assignment-editor-header .small-print {
  color: #64748b !important;
}

:root[data-theme="light"] .assignment-editor-header .layout-btn,
:root[data-theme="light"] .assignment-editor-header #headerSwapSidesBtn {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] .assignment-editor-header .layout-btn:hover,
:root[data-theme="light"] .assignment-editor-header #headerSwapSidesBtn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

:root[data-theme="light"] .assignment-editor-header .btn {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] .assignment-editor-header .btn-close-x {
  color: #475569 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

.assignment-editor-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
}

.ae-workspace-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  position: relative !important;
}

.assignment-editor-panel .ql-toolbar.ql-snow,
.editor-split-panel .ql-toolbar.ql-snow,
.ql-toolbar.ql-snow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 6px !important;
  padding: 6px 10px !important;
  background: var(--card) !important;
  border-color: var(--border) !important;
  position: relative !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.assignment-editor-panel .ql-container.ql-snow,
.editor-split-panel .ql-container.ql-snow,
.ql-container.ql-snow {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
  border-color: var(--border) !important;
}

.assignment-editor-panel .ql-editor,
.editor-split-panel .ql-editor,
.ql-editor {
  flex: 1 1 auto !important;
  min-height: 250px !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  padding: 22px !important;
  position: relative !important;
}

.assignment-editor-panel .ql-toolbar.ql-snow .ql-picker,
.assignment-editor-panel .ql-toolbar.ql-snow button,
.assignment-editor-panel .ql-toolbar.ql-snow .ql-stroke,
.editor-split-panel .ql-toolbar.ql-snow .ql-picker,
.editor-split-panel .ql-toolbar.ql-snow button,
.editor-split-panel .ql-toolbar.ql-snow .ql-stroke {
  color: var(--text);
  stroke: var(--text);
}

.ql-toolbar button.wx-page-btn,
.ql-toolbar.ql-snow button.wx-page-btn,
button.wx-page-btn,
.wx-page-btn {
  width: auto !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Editor locked state — triggered by .editor-locked class via JS */
.editor-locked .ql-toolbar {
  opacity: 0.4;
  pointer-events: none;
}
.editor-locked .ql-editor.ql-blank::before {
  content: "Submission locked — editing disabled";
  font-style: normal;
  color: var(--muted, #888);
}
.editor-locked .ql-editor {
  cursor: not-allowed;
  opacity: 0.7;
}
.editor-locked #rubricUploadBtn,
.editor-locked #rubricReviewBtn,
.editor-locked #rubricReReviewBtn {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Narrow workspace variant when assignment editor is enabled */
.workspace-split[data-has-editor="true"] .chat-wrap {
  gap: 8px;
}

.workspace-split[data-has-editor="true"] .split-panel {
  height: min(86vh, 980px);
  min-height: 520px;
}

/* Ensure `#msgs` fills space and scrolls internally when editor is active */
.workspace-split[data-has-editor="true"] #msgs,
.assignment-layout[data-panel-order^="wide"] #msgs {
  flex: 1 1 0%;
  min-height: 120px;
  max-height: none;
  overflow-y: auto;
  margin-bottom: 0;
  scroll-behavior: smooth;
}

/* Explicit custom scrollbars so the scrollbar NEVER disappears on split screen */
.workspace-split[data-has-editor="true"] #msgs::-webkit-scrollbar,
.assignment-layout[data-panel-order^="wide"] #msgs::-webkit-scrollbar {
  width: 8px;
}
.workspace-split[data-has-editor="true"] #msgs::-webkit-scrollbar-track,
.assignment-layout[data-panel-order^="wide"] #msgs::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
.workspace-split[data-has-editor="true"] #msgs::-webkit-scrollbar-thumb,
.assignment-layout[data-panel-order^="wide"] #msgs::-webkit-scrollbar-thumb {
  background: color-mix(in hsl, var(--accent, #6366f1) 60%, var(--border));
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.workspace-split[data-has-editor="true"] #msgs::-webkit-scrollbar-thumb:hover,
.assignment-layout[data-panel-order^="wide"] #msgs::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #6366f1);
}

.workspace-split[data-has-editor="true"] #cap {
  margin-bottom: 2px;
}

.workspace-split[data-has-editor="true"] #send,
.assignment-layout[data-panel-order^="wide"] #send {
  margin-top: 0;
  flex: 0 0 auto;
}

.workspace-split[data-has-editor="true"] #aiWorkspacePanel,
.assignment-layout[data-panel-order^="wide"] #aiWorkspacePanel {
  overflow: hidden; /* Lock container in place so top header and prompt input never scroll out of view */
  display: flex;
  flex-direction: column;
}

/* Bottom container for notes, disclaimer, actions, and footer links */
.chat-bottom-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.workspace-split[data-has-editor="true"] .chat-bottom-container,
.assignment-layout[data-panel-order^="wide"] .chat-bottom-container {
  overflow-y: auto;
  max-height: 180px;
  flex: 0 0 auto;
  min-height: auto;
  transition: max-height 0.3s ease;
}

.workspace-split[data-has-editor="true"] .chat-bottom-container:has(.notes-details[open]),
.assignment-layout[data-panel-order^="wide"] .chat-bottom-container:has(.notes-details[open]),
.chat-bottom-container.has-open-notes {
  max-height: 380px !important;
}

/* Premium Collapsible Notes Accordion */
.notes-details {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in hsl, var(--surface-1) 60%, transparent);
  overflow: hidden;
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-details:hover {
  border-color: var(--accent, #6366f1);
}

.notes-details[open] {
  border-color: var(--border);
}

.notes-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #fff);
  cursor: pointer;
  user-select: none;
  list-style: none; /* Hide default arrow */
}

.notes-summary::-webkit-details-marker {
  display: none; /* Hide default arrow in Safari */
}

.notes-summary-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notes-summary-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-toggle-icon {
  color: var(--muted, #888);
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-summary:hover .notes-toggle-icon {
  color: var(--accent, #6366f1);
}

.notes-details[open] .notes-summary-toggle {
  transform: rotate(180deg);
}

.notes-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

/* Adjust the inner notes-section container inside details */
.notes-details .notes-section {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 14px;
  border-top: 1px solid var(--border);
}

.workspace-split[data-has-editor="true"] .notes-details .notes-section {
  padding: 10px 12px;
  gap: 10px;
}

.notes-section .notes-row {
  margin-top: 0;
}

.notes-section .notes-row + .notes-row {
  margin-top: 0;
}

.workspace-split[data-has-editor="true"] .notes-row {
  min-height: 0;
  margin-top: 0;
}

.workspace-split[data-has-editor="true"] .notes-row + .notes-row {
  margin-top: 0;
}

.workspace-split[data-has-editor="true"] .notes-row textarea {
  min-height: 64px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  resize: vertical;
}

.workspace-split[data-has-editor="true"] .notes-details[open] .notes-section {
  display: flex !important;
  flex-direction: column !important;
  padding: 12px !important;
  gap: 12px !important;
  overflow: visible !important;
}

.workspace-split[data-has-editor="true"] .input-placeholder__hint {
  display: none;
}

.chat-disclaimer {
  font-size: 12px;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  line-height: 1.5;
}

.chat-footer-links {
  font-size: 12px;
  color: var(--muted, #8b95a8);
  padding-top: 12px;
  border-top: 1px solid var(--border);
  padding-bottom: 4px;
}

.chat-footer-links .link {
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 1320px) {
  .assignment-layout[data-panel-order="split-right"] #chat[data-has-editor="true"],
  .assignment-layout[data-panel-order="editor-right"] #chat[data-has-editor="true"] {
    grid-template-columns: 1fr 6px var(--chat-editor-w, clamp(260px, 35vw, 480px)) !important;
  }

  .assignment-layout[data-panel-order="split-left"] #chat[data-has-editor="true"],
  .assignment-layout[data-panel-order="editor-left"] #chat[data-has-editor="true"] {
    grid-template-columns: var(--chat-editor-w, clamp(260px, 35vw, 480px)) 6px 1fr !important;
  }
}

@media (max-width: 1080px) {
  /* Collapse all split modes to single column */
  .assignment-layout[data-panel-order^="split"] #chat {
    grid-template-columns: 1fr;
  }

  .assignment-layout[data-panel-order^="split"] #assignmentEditorPanel,
  .assignment-layout[data-panel-order^="split"] #aiWorkspacePanel {
    order: initial;
  }

  .assignment-layout[data-panel-order^="split"] #chat .ep-resize-handle {
    display: none;
  }

  /* Collapse wide mode back to stacked layout */
  .assignment-layout[data-panel-order^="wide"] {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .assignment-layout[data-panel-order^="wide"] #chat {
    display: grid;
    grid-template-columns: 1fr;
  }

  .assignment-layout[data-panel-order^="wide"] .hero-wrap,
  .assignment-layout[data-panel-order^="wide"] #aiWorkspacePanel,
  .assignment-layout[data-panel-order^="wide"] #assignmentEditorPanel {
    grid-column: auto;
    grid-row: auto;
    height: auto;
  }

  .split-panel {
    height: auto;
  }

  .workspace-split[data-has-editor="true"] #msgs {
    max-height: 55vh;
  }

  .assignment-layout[data-panel-order^="wide"] #msgs {
    max-height: 55vh;
    flex: none;
  }

  .workspace-split[data-has-editor="true"] #aiWorkspacePanel,
  .assignment-layout[data-panel-order^="wide"] #aiWorkspacePanel {
    height: auto;
    overflow: visible;
  }

  .workspace-split[data-has-editor="true"] .chat-bottom-container,
  .assignment-layout[data-panel-order^="wide"] .chat-bottom-container {
    overflow-y: visible;
    flex: none;
    min-height: auto;
  }
}

.inline-error {
  margin: 0;
  font-size: 12px;
  color: #ffb3b3;
}

.notes-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  min-width: 0;
}

.notes-row + .notes-row {
  margin-top: 18px;
}

.notes-row textarea {
  width: 100%;
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.45;
  resize: vertical;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.notes-row textarea:focus {
  outline: none;
  border-color: var(--muted);
}

.notes-field textarea {
  width: 100%;
  min-height: 84px;
  max-height: 220px;
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.45;
  resize: vertical;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  box-sizing: border-box;
}

.ai-index-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.small-print {
  font-size: 12px;
  margin: 0;
}

.flag-cell { position: relative; display: inline-flex; align-items: center; }
.flag-score-btn {
  gap: 6px;
  background: var(--surface-2);
  font-weight: 600;
}
.flag-score-btn .flag-emoji { font-size: 14px; }
.flag-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  min-width: 240px;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.36);
}
.flag-dropdown__header { font-weight: 700; margin-bottom: 2px; }
.flag-dropdown__meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.flag-detail-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.flag-detail-list li { font-size: 13px; line-height: 1.35; }

.editor-replay-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  pointer-events: none;
}

.editor-replay-modal:not([hidden]) {
  display: flex;
  pointer-events: auto;
}

.editor-replay-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.editor-replay-modal__panel {
  position: relative;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ── ERP Toolbar ── */
.erp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.erp-toolbar__left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}
.erp-toolbar__title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: var(--text);
}
.erp-toolbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Meta chips */
.erp-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.erp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.erp-chip strong {
  color: var(--text);
  font-weight: 600;
}

/* Tab bar */
.erp-tabs {
  display: flex;
  align-items: center;
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.erp-tab {
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.erp-tab:hover { background: var(--surface-2); color: var(--text); }
.erp-tab--active {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.erp-tab--active:hover { background: var(--surface-2); color: var(--text); }

/* Close button */
.erp-close-btn {
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid #ef4444 !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.erp-close-btn:hover {
  background: #dc2626 !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.45) !important;
  transform: translateY(-1px) !important;
}

:root[data-theme="light"] .erp-close-btn {
  background: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  color: #dc2626 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15) !important;
}

:root[data-theme="light"] .erp-close-btn:hover {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25) !important;
}

/* Student Editor Active Formatting Button Glow */
.wx-fmt-btn.wx-fmt-active {
  background: rgba(99, 102, 241, 0.25) !important;
  color: #a5b4fc !important;
  border-color: rgba(99, 102, 241, 0.6) !important;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4) !important;
  font-weight: 800 !important;
}

/* Event Jump Pulse Animation */
@keyframes wxEventPulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8); background-color: rgba(245, 158, 11, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); background-color: rgba(245, 158, 11, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.wx-event-pulse {
  animation: wxEventPulse 1.5s ease-out 2;
  border-radius: 4px;
}

/* AI Index Sync Time Match Highlight */
.wx-ai-index-time-highlight {
  border: 2px solid #ec4899 !important;
  background: rgba(236, 72, 153, 0.15) !important;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.4) !important;
  transition: all 0.3s ease !important;
}

/* ── Controls bar ── */
.erp-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 8px;
  flex-shrink: 0;
}
.erp-play-btn {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--elev);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.erp-play-btn:hover:not(:disabled) { background: var(--surface-2); }
.erp-play-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.erp-speed {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
.erp-speed select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--elev);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.erp-step-label {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ── Timeline ── */
.erp-timeline {
  display: grid;
  gap: 5px;
  flex-shrink: 0;
}
.erp-timeline-label {
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
}

/* ── Glowing Pulse Button for Top Panel Toggle ── */
@keyframes headerBtnGlow {
  0% {
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.5), 0 0 12px rgba(99, 102, 241, 0.25);
    border-color: rgba(165, 180, 252, 0.6);
  }
  50% {
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.95), 0 0 26px rgba(99, 102, 241, 0.65), 0 0 36px rgba(99, 102, 241, 0.35);
    border-color: rgba(255, 255, 255, 0.95);
  }
  100% {
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.5), 0 0 12px rgba(99, 102, 241, 0.25);
    border-color: rgba(165, 180, 252, 0.6);
  }
}

.btn-glowing-pulse {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  animation: headerBtnGlow 2.2s infinite ease-in-out !important;
  transition: all 0.2s ease !important;
}

.btn-glowing-pulse:hover {
  background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
  transform: translateY(-1px);
}

/* ── Pane header (AI Index) ── */
.erp-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0 8px;
  flex-shrink: 0;
}
.erp-pane-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.editor-review-split {
  flex: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0 20px 16px;
  background: var(--bg);
}

.editor-review-split[data-view-mode="combined"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 16px;
}

.editor-review-split[data-view-mode="combined"][data-swapped="true"] #editorReplayPane {
  grid-column: 2;
}
.editor-review-split[data-view-mode="combined"][data-swapped="true"] #editorAiIndexPane {
  grid-column: 1;
}

.global-ratio-section {
  grid-row: 1;
  height: auto;
  max-height: 48px;
}

.editor-review-pane {
  grid-row: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* Range input (timeline) */
.erp-timeline input[type="range"] {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
}
.erp-timeline input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(96,165,250,.25);
}
.erp-timeline input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.erp-timeline input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
}

.editor-replay-viewer {
  flex: 1;
  overflow: hidden;   /* zoom wrapper inside handles scroll */
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* The zoom wrapper is a scrollable container for the iframe */
.replay-sandbox-zoom-wrapper {
  flex: 1;
  overflow: auto;
  background: #fff;
  position: relative;
}
/* Plain-text fallback (no iframe) — restore pre-wrap styling */
.editor-replay-viewer > p,
.editor-replay-viewer > .muted {
  padding: 16px;
  white-space: pre-wrap;
  word-break: break-word;
}
.editor-replay-viewer * {
  color: inherit !important;
  font-family: inherit !important;
}
/* Don't force transparent bg on replay sandbox iframe children */
.editor-replay-viewer iframe * {
  background: initial !important;
  color: initial !important;
}

.editor-ai-index-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  display: block;
  margin-top: 0;
}

@media (max-width: 1080px) {
  .editor-review-split[data-view-mode="combined"] {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
}

/* ---------------------------
   Behaviour Analytics Panel
   --------------------------- */
.erp-behaviour-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.erp-behaviour-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.erp-beh-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 20px;
  min-height: 0;
  overflow: hidden;
}

/* Header row: score block + headline stats */
.erp-beh-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-shrink: 0;
}

/* Score ring + breakdown table side by side */
.erp-beh-score-block {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.erp-beh-score-ring {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.erp-beh-score-ring svg {
  width: 64px;
  height: 64px;
  transform: rotate(-90deg);
}
.erp-beh-score-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--score-colour, var(--text));
  line-height: 1;
}
.erp-beh-score-detail {
  flex: 1;
  min-width: 0;
}
.erp-beh-score-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}
.erp-beh-score-formula {
  font-size: 11px;
  color: var(--muted, #888);
  margin-bottom: 10px;
}
.erp-beh-flag {
  font-size: 12px;
  color: var(--red, #ef4444);
  margin: 2px 0;
  font-weight: 500;
}

/* Score breakdown table */
.erp-score-breakdown {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.erp-score-breakdown tr {
  border-top: 1px solid var(--border);
}
.erp-score-breakdown tr:first-child {
  border-top: none;
}
.erp-score-breakdown td {
  padding: 5px 8px 5px 0;
  vertical-align: middle;
}
.erp-bd-factor {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  width: 140px;
}
.erp-bd-level {
  font-weight: 500;
  color: var(--text);
  width: 140px;
  white-space: nowrap;
}
.erp-bd-detail {
  font-size: 11px;
  color: var(--muted, #888);
}
.erp-bd-adj {
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  width: 40px;
}
.adj-penalty { color: var(--red, #ef4444); }
.adj-bonus   { color: var(--green, #22c55e); }
.adj-neutral { color: var(--muted, #888); }
.erp-bd-total td {
  font-weight: 700;
  font-size: 13px;
  padding-top: 8px;
  border-top: 2px solid var(--border) !important;
  color: var(--text);
}
.erp-bd-total .erp-bd-adj {
  color: var(--text);
}

.erp-beh-header-stats {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding-left: 20px;
}
.erp-beh-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 20px;
  border-right: 1px solid var(--border);
}
.erp-beh-stat:last-child { border-right: none; }
.erp-beh-stat__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.erp-beh-stat__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.erp-beh-stat__sub {
  font-size: 11px;
  color: var(--muted);
}

/* 2-column body */
.erp-beh-body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.erp-beh-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}
.erp-beh-right {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Typing/paste bar card */
.erp-beh-bar-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  flex-shrink: 0;
}
.erp-beh-bar-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Cards grid */
.erp-beh-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.erp-beh-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.erp-beh-card__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.erp-beh-card__value {
  font-size: 15px;
  font-weight: 600;
}
.erp-beh-card__value--plain {
  color: var(--text);
}
.erp-beh-card__sub {
  font-size: 12px;
  color: var(--muted);
}

/* Typing/paste bar */
.erp-beh-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--border);
  margin: 2px 0;
}
.erp-beh-bar__fill {
  height: 100%;
  transition: width 0.4s ease;
}
.erp-beh-bar__fill--typed {
  background: var(--accent, #60a5fa);
}
.erp-beh-bar__fill--pasted {
  background: var(--orange, #f97316);
}
.erp-beh-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}

/* Badge */
.erp-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--badge-colour, var(--muted));
  background: color-mix(in hsl, var(--badge-colour, var(--border)) 15%, transparent);
  border: 1px solid color-mix(in hsl, var(--badge-colour, var(--border)) 30%, transparent);
}

/* Event log — lives in .erp-beh-right */
.erp-beh-log {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.erp-beh-log__title {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.erp-beh-log__list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
}
.erp-beh-log__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.erp-beh-log__row:last-child { border-bottom: none; }
.erp-beh-log__icon { flex-shrink: 0; font-size: 13px; }
.erp-beh-log__desc { flex: 1; color: var(--text); }
.erp-beh-log__ts { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Empty state */
.erp-beh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}
.erp-beh-empty p { margin: 0; }

/* Behaviour pane in single-col split */
.editor-review-split[data-view-mode="behaviour"] {
  grid-template-columns: 1fr;
  padding: 0 16px 16px;
}
.editor-review-split[data-view-mode="behaviour"] .erp-behaviour-pane {
  flex: 1;
}

/* ---------------------------
   Lists (Lectures sidebar)
   --------------------------- */
.list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  overflow: auto;
  max-height: calc(100dvh - 180px);
}
.list-item {
  padding: .65rem .75rem;
  border-bottom: 1px solid color-mix(in hsl, var(--border) 70%, transparent);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--surface-2); }
.list-item.active { background: color-mix(in hsl, var(--accent) 12%, transparent); }

.results-list .list-item {
  flex-direction: column;
  gap: 4px;
}

.results-list .title {
  font-size: 16px;
  line-height: 1.35;
}

.results-list .muted {
  font-size: 12px;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.result-actions .btn {
  flex: 0 0 auto;
}

.list-item .item-main { flex: 1; min-width: 0; }

/* ---------------------------
   Recommended reading (Research)
   --------------------------- */
.recommended-reading {
  margin: 12px 0 16px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  font-size: 13px;
}

.recommended-reading h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.recommended-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  display: grid;
  gap: 6px;
}

.recommended-item {
  color: inherit;
}

.recommended-item-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.bib-entry { display: flex; align-items: center; gap: 10px; }
.bib-entry-text { flex: 1; }
.bib-remove {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------
   Lectures Viewer & Chat
   --------------------------- */
.viewer .toolbar {
  background: color-mix(in hsl, var(--card) 92%, transparent);
}
.doc {
  line-height: 1.65;
}
.doc .highlight,
mark.__hit {
  background: color-mix(in hsl, var(--accent) 22%, transparent);
  border-radius: 6px;
  padding: .05rem .2rem;
}

.outline {
  background: color-mix(in hsl, var(--card) 92%, transparent);
  border-right: 1px solid var(--border);
}
.outline .ol { display: grid; gap: .35rem; }
.outline .ol button {
  border-radius: 8px;
  padding: .35rem .5rem;
  background: transparent;
}
.outline .ol button:hover {
  background: var(--surface-2);
}

/* Chat panel */
.chat-wrap {
  padding: 16px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2px; }
.cap { font-size: 12px; }
.prompt-count {
  white-space: nowrap;
  overflow: visible;
  min-width: 118px;
  display: inline-flex;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.cap .prompt-count {
  min-width: 0;
  justify-content: flex-start;
}
.assignment-meta .prompt-count {
  min-width: auto;
  justify-content: flex-start;
}
.locked-notice {
  border: 1px solid #5a2222;
  background: #2a1111;
  color: #ffb3b3;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}
/* ============================================================
   SESSION STATUS BAR
   ============================================================ */
.chat-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: color-mix(in hsl, var(--card) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 2px;
}

.chat-status-bar__left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-status-bar__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.chat-status-bar__progress {
  height: 4px;
  border-radius: 4px;
  background: color-mix(in hsl, var(--border) 70%, transparent);
  overflow: hidden;
}

.chat-status-bar__progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.5s cubic-bezier(.4,0,.2,1);
  min-width: 4px;
}

.chat-status-bar__progress-fill--warn {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.chat-status-bar__progress-fill--full {
  background: #ef4444;
}

.chat-status-bar__count {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chat-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-status-badge--active {
  color: #34d399;
  border-color: rgba(52,211,153,.35);
  background: rgba(52,211,153,.1);
}

.chat-status-badge--locked {
  color: #f87171;
  border-color: rgba(248,113,113,.35);
  background: rgba(248,113,113,.1);
}

.chat-status-badge--cap {
  color: #fbbf24;
  border-color: rgba(251,191,36,.35);
  background: rgba(251,191,36,.1);
}

/* ============================================================
   PREMIUM CHAT MESSAGES
   ============================================================ */

#msgs {
  margin: 0;
  max-height: 55vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 4px;
  scroll-behavior: smooth;
}

/* Legacy .msg-list from history render */
.msg-list:empty { display: none; }
.msg-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Message entrance animation ── */
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: msgSlideIn 0.22s cubic-bezier(.4,0,.2,1) both;
  max-width: 100%;
  margin-bottom: 12px;
}

.msg--instant {
  animation: none;
}

/* ── Avatar ── */
.msg__avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  user-select: none;
  margin-top: 2px;
}

.msg--user .msg__avatar {
  background: color-mix(in hsl, var(--accent-2) 18%, var(--card));
  border: 1px solid color-mix(in hsl, var(--accent-2) 40%, var(--border));
}

.msg--assistant .msg__avatar {
  background: color-mix(in hsl, var(--accent) 18%, var(--card));
  border: 1px solid color-mix(in hsl, var(--accent) 40%, var(--border));
  font-size: 16px;
}

.msg--error .msg__avatar {
  background: rgba(248,113,113,.12);
  border: 1px solid rgba(248,113,113,.3);
  color: #f87171;
}

.msg--grouped .msg__avatar {
  visibility: hidden;
}

/* ── Bubble ── */
.msg__bubble {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* ── Header row (role + time) ── */
.msg__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.msg__role {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.msg--user .msg__role { color: color-mix(in hsl, var(--accent-2) 85%, var(--muted)); }
.msg--assistant .msg__role { color: color-mix(in hsl, var(--accent) 85%, var(--muted)); }

.msg__meta-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in hsl, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in hsl, var(--accent) 30%, transparent);
}

.msg__time {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* ── Body content ── */
.msg__body {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  padding: 12px 16px;
  line-height: 1.65;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  border: 1px solid;
  position: relative;
  box-sizing: border-box;
}

.msg--user .msg__body {
  background: var(--bubble-user-bg);
  border-color: var(--bubble-user-border);
  color: var(--bubble-user-text);
}

.msg--assistant .msg__body {
  background: var(--bubble-assistant-bg);
  border-color: var(--bubble-assistant-border);
  color: var(--bubble-assistant-text);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}

.msg--error .msg__body {
  background: rgba(248,113,113,.08);
  border-color: rgba(248,113,113,.3);
  color: #fca5a5;
}

.msg--grouped .msg__body {
  margin-top: -2px;
}

/* Markdown content inside bubbles */
.msg__body p.msg-para {
  margin: 0 0 6px;
}
.msg__body p.msg-para:last-child { margin-bottom: 0; }

.msg__body .msg-heading {
  font-weight: 700;
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--text);
}
.msg__body .msg-heading:first-child { margin-top: 0; }

.msg__body ul.msg-list,
.msg__body ol.msg-list {
  padding-left: 18px;
  margin: 6px 0;
  display: grid;
  gap: 3px;
}

.msg__body ul.msg-list { list-style: disc; }
.msg__body ol.msg-list { list-style: decimal; }

.msg__body li {
  line-height: 1.5;
}

.msg__body .msg-inline-code {
  font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size: 13px;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in hsl, var(--accent) 12%, var(--bg));
  border: 1px solid color-mix(in hsl, var(--accent) 22%, var(--border));
  color: var(--accent-2);
}

.msg-code-block {
  margin: 8px 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: color-mix(in hsl, var(--bg) 60%, #000);
}

.msg-code-lang {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
  background: color-mix(in hsl, var(--border) 30%, transparent);
}

.msg-code-block pre {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
}

.msg-code-block code {
  font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #e2e8f0;
  white-space: pre;
}

.msg__error-text {
  font-size: 13.5px;
}

/* ── Copy button ── */
.msg-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: color-mix(in hsl, var(--card) 80%, transparent);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  padding: 0;
  line-height: 1;
}

.msg__body:hover .msg-copy { opacity: 1; }
.msg-copy:hover { background: var(--card); color: var(--text); }
.msg-copy--done { color: #34d399 !important; border-color: rgba(52,211,153,.4); }

.msg-cite-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 6px 0;
  gap: 12px;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

.msg-cite-content {
  font-family: var(--font-mono, monospace);
  font-size: 0.9em;
  color: var(--text);
  flex: 1;
  word-break: break-all;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

.msg-cite-copy-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.msg-cite-copy-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Typing Indicator ── */
.typing-indicator {
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 2px 0;
  margin-bottom: 12px;
}

.typing-indicator.is-active { display: flex; }

.typing-indicator__avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in hsl, var(--accent) 18%, var(--card));
  border: 1px solid color-mix(in hsl, var(--accent) 40%, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-top: 2px;
}

.typing-indicator__bubble {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bubble-assistant-bg);
  border: 1px solid var(--bubble-assistant-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  box-sizing: border-box;
}

.typing-indicator__label {
  font-size: 12px;
  color: var(--muted);
}

.typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.75); opacity: 0.4; }
  40%           { transform: scale(1);    opacity: 1; }
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: dotBounce 1.2s ease-in-out infinite;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ── Locked session card ── */
.locked-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(248,113,113,.3);
  background: rgba(248,113,113,.06);
  color: #fca5a5;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
}

.locked-notice::before {
  content: "🔒";
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.research-chat {
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  gap: 10px;
}

.research-search {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.research-search .search-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.research-search input[type="search"] {
  flex: 1;
  min-width: 260px;
  height: 42px;
  font-size: 15px;
  padding: 0 14px;
}

.research-search.research-search--no-recommended {
  flex-wrap: wrap;
}

.research-search.research-search--no-recommended input[type="search"] {
  min-width: 180px;
}

@media (max-width: 820px) {
  .research-search,
  .research-search.research-search--no-recommended {
    flex-wrap: wrap;
    gap: 10px;
  }

  .research-search input[type="search"],
  .research-search.research-search--no-recommended input[type="search"] {
    min-width: 0;
    width: 100%;
    flex-basis: 100%;
  }

  .research-search .search-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

.research-chat__msgs {
  min-height: 120px;
  max-height: 45vh;
  overflow: auto;
}

/* ---------------------------
   Nav + Hero
   --------------------------- */
.nav { 
  max-width: 1400px; 
  margin: 0 auto; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding: 10px 16px; 
  gap: 16px;
}

.brand { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink: 0; }
.brand img { height: 32px; }
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-name { font-weight:700; font-size: 18px; letter-spacing:.2px; color: var(--text); }

.brand-w {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: color 0.15s ease, -webkit-text-fill-color 0.15s ease;
}
:root[data-theme="light"] .brand-w {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* In Left Sidebar overlay mode: brand-w white in dark mode, dark slate in light mode */
[data-nav-pos="left"] header .brand-w {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
:root[data-theme="light"] [data-nav-pos="left"] header .brand-w {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.brand-ai {
  position: relative !important;
  display: inline-block !important;
  margin-right: 0.45em !important;
  background: linear-gradient(135deg, #38bdf8 0%, #22d3ee 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 800 !important;
}

.brand-ai::after {
  content: "®" !important;
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  margin-left: 6px !important;
  font-size: 0.38em !important;
  line-height: 1 !important;
  -webkit-text-fill-color: #38bdf8 !important;
  color: #38bdf8 !important;
  font-weight: 600 !important;
  transform: translateY(-15%) !important;
}

.links { display:flex; gap:10px; align-items:center; flex-shrink: 0; }
.links a { color: var(--muted); text-decoration:none; padding:7px 11px; border-radius: 8px; border:1px solid transparent; font-size: 14px; transition: color .12s, background .12s, border-color .12s; }
.links a:hover { color: var(--text); background: color-mix(in hsl, var(--border) 40%, transparent); }
.links a.active { color: var(--text); border-color: var(--border); background: var(--elev); font-weight: 500; }
.nav-link { color: var(--muted); text-decoration: none; padding: 7px 11px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; transition: color .12s, background .12s, border-color .12s; white-space: nowrap; }
.nav-link:hover { color: var(--text); background: color-mix(in hsl, var(--border) 40%, transparent); }

.themebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 34px;
  height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--elev);
  color: var(--muted);
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  transition: color .15s, border-color .15s, background .15s;
}
.themebtn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.themebtn svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  flex-shrink: 0;
}
.themebtn span {
  display: none;
}
[data-nav-pos="left"] .themebtn span {
  display: inline !important;
}

/* Nav user pill */
.nav-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--elev);
  white-space: nowrap;
  flex-shrink: 0 !important;
  margin-right: 6px !important;
}

/* Ensure top header bar has safety margin on the right and compact spacing when editor is open */
:root:not([data-nav-pos="left"]) header.topbar,
:root:not([data-nav-pos="left"]) .nav {
  padding-right: 28px !important;
  box-sizing: border-box !important;
}

:root:not([data-nav-pos="left"]) .links {
  gap: 8px !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  margin-right: 6px !important;
}

:root:not([data-nav-pos="left"]):has([data-has-editor="true"]) .links a,
:root:not([data-nav-pos="left"]):has([data-has-editor="true"]) .links button,
:root:not([data-nav-pos="left"]):has([data-has-editor="true"]) .nav-link {
  padding: 5px 8px !important;
  font-size: 13px !important;
}

:root:not([data-nav-pos="left"]):has([data-has-editor="true"]) .links {
  gap: 6px !important;
}
.nav-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-role-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.nav-role-badge[data-role="student"] {
  background: color-mix(in srgb, #3b82f6 18%, transparent);
  color: #60a5fa;
}
.nav-role-badge[data-role="admin"] {
  background: color-mix(in srgb, #8b5cf6 18%, transparent);
  color: #a78bfa;
}
:root[data-theme="light"] .nav-role-badge[data-role="student"] {
  background: color-mix(in srgb, #3b82f6 14%, transparent);
  color: #1d4ed8;
}
:root[data-theme="light"] .nav-role-badge[data-role="admin"] {
  background: color-mix(in srgb, #8b5cf6 14%, transparent);
  color: #6d28d9;
}

/* ─── Modern Sign Out Button & User Pill Layout ──────────────────────── */
.nav-logout-btn,
a.nav-link[href="/auth/logout"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  background: color-mix(in srgb, #ef4444 12%, transparent) !important;
  color: #f87171 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  order: 95 !important;
}

.nav-logout-btn:hover,
a.nav-link[href="/auth/logout"]:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
  transform: translateY(-1px) !important;
}

.nav-logout-btn svg,
a.nav-link[href="/auth/logout"] svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.nav-logout-btn:hover svg,
a.nav-link[href="/auth/logout"]:hover svg {
  transform: translateX(2px);
}

:root[data-theme="light"] .nav-logout-btn,
:root[data-theme="light"] a.nav-link[href="/auth/logout"] {
  border-color: rgba(220, 38, 38, 0.3) !important;
  background: color-mix(in srgb, #dc2626 10%, transparent) !important;
  color: #dc2626 !important;
}

:root[data-theme="light"] .nav-logout-btn:hover,
:root[data-theme="light"] a.nav-link[href="/auth/logout"]:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

.nav-user-pill {
  order: 100 !important; /* Always placed at the very bottom */
}

.layout-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: 20px;
  padding: 3px 4px;
}

.layout-picker:not([hidden]) {
  display: inline-flex !important;
}

.layout-picker-group {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.layout-btn {
  background: none;
  border: none;
  border-radius: 14px;
  padding: 5px 6px;
  cursor: pointer;
  color: var(--muted, #8b95a8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 0%;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  transition: background 0.12s, color 0.12s;
}

.layout-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
}

.layout-btn--active {
  color: var(--text);
  background: var(--surface-2, rgba(255,255,255,0.12));
}

.layout-btn--close:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.admin-title-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.admin-title-button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 4px;
  border-radius: 6px;
}

.admin-logo {
  height: 26px;
  width: 26px;
  border-radius: 4px;
}

/* Base hero container – layout is handled by .hero-row */
.hero {
  margin: 0;
}

/* Title + gradient text etc */
.title-xl { 
  font-size: 78px; 
  line-height: 1.1; 
  font-weight: 900; 
  letter-spacing: .2px; 
  margin: 0; 
}

.gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(34,211,238,.12));
}

.slogan-under { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.subtitle { color: var(--muted); margin-top: 8px; font-size: 14px; max-width: 56ch; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in hsl, var(--card) 90%, transparent);
  font-size: 12px;
  width: fit-content;
  margin: 0;
}
.badge-muted {
  color: var(--muted);
  border-color: var(--border);
  background: transparent;
}
.badge-green {
  color: #4caf7d;
  border-color: rgba(76,175,125,0.4);
  background: rgba(76,175,125,0.1);
}
.badge-red {
  color: #e05252;
  border-color: rgba(224,82,82,0.4);
  background: rgba(224,82,82,0.1);
}
.btn-danger {
  background: rgba(224,82,82,0.15);
  color: #e05252;
  border: 1px solid rgba(224,82,82,0.4);
}
.btn-danger:hover {
  background: rgba(224,82,82,0.28);
  color: #e05252;
}

/* ── Admin brand (logo + title) ──────────────────────────── */
.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-header-card .card-head {
  flex-wrap: wrap;
  padding-bottom: 0;
}

.admin-header-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Admin tab bar ──────────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 0;
  margin-top: 14px;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  border-radius: 0;
}
.admin-tab:hover { color: var(--fg); }
.admin-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

.admin-tab-theme {
  margin-left: auto;
  border-bottom: 3px solid transparent;
  align-self: center;
  margin-bottom: -2px;
}

/* ── Compliance badge ───────────────────────────────────── */
.compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.compliance-badge--compliant {
  background: color-mix(in hsl, #22c55e 14%, transparent);
  color: #22c55e;
  border: 1px solid color-mix(in hsl, #22c55e 32%, transparent);
}
.compliance-badge--policy {
  background: color-mix(in hsl, #eab308 14%, transparent);
  color: #eab308;
  border: 1px solid color-mix(in hsl, #eab308 32%, transparent);
}
.compliance-badge--flagged {
  background: color-mix(in hsl, #ef4444 14%, transparent);
  color: #ef4444;
  border: 1px solid color-mix(in hsl, #ef4444 32%, transparent);
}

/* ── Analytics dashboard v2 ──────────────────────────────── */
/* ─── Analytics Dashboard ─────────────────────────── */
.an-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 4px 0 12px;
}

/* ─── Section wrapper ─── */
.an-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.an-section-hd {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ─── 4 Stat cards ─── */
.an-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.an-stat-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.an-stat-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  letter-spacing: -.01em;
}
.an-stat-label {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

/* ─── Standalone chart ─── */
.an-chart-card--standalone {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.an-chart-hd {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.an-chart-hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 11.5px;
}
.an-chart-body {
  padding: 16px;
}
.an-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ─── Key Insights list ─── */
.an-insights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.an-insight-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
}
.an-insight-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
}

/* ─── Recommendations list ─── */
.an-recs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.an-rec-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 10px;
}
.an-rec-arrow {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--accent);
  font-weight: 700;
  margin-top: 1px;
}

/* ─── Filter bar ─── */
.an-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.an-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.an-filter-select {
  font-size: 12px;
  padding: 4px 28px 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b949e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
}
.an-filter-active {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.an-demo-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* ─── 6-card KPI row ─── */
.an-stats-row--6 {
  grid-template-columns: repeat(3, 1fr);
}

/* ─── 2-col chart grid ─── */
.an-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.an-chart-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.an-chart-body--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── 3-col insight panels ─── */
.an-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.an-insight-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.an-insight-panel-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  line-height: 1.35;
}
.an-insight-panel-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.an-insight-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.55;
}
.an-insight-bullet-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 6px;
}

/* ─── Editor behaviour summary row ─── */
.an-beh-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.an-beh-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.an-beh-val {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  letter-spacing: -.01em;
}
.an-beh-unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 2px;
}
.an-beh-lbl {
  font-size: 11.5px;
  color: var(--muted);
}

/* ─── Question groups ─── */
.an-q-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.an-q-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.an-q-group-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-2));
  border-bottom: 1px solid var(--border);
}
.an-q-group-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.an-q-item {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.an-q-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

/* ── Light Mode Analytics Overrides ── */
:root[data-theme="light"] .an-stat-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] .an-stat-value {
  color: #0f172a !important;
}

:root[data-theme="light"] .an-stat-label {
  color: #475569 !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] .an-filter-bar {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] .an-filter-label {
  color: #334155 !important;
}

:root[data-theme="light"] .an-filter-select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .an-chart-card,
:root[data-theme="light"] .an-chart-card--standalone {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] .an-chart-hd {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .an-chart-hint {
  color: #64748b !important;
}

:root[data-theme="light"] .an-insight-panel {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] .an-insight-panel-hd {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .an-rec-item {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1e293b !important;
}

:root[data-theme="light"] .an-q-group {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] .an-q-group-hd {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .an-q-item {
  background: #f8fafc !important;
  color: #334155 !important;
  border-left: 3px solid #2563eb !important;
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .an-insights-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .an-stats-row      { grid-template-columns: repeat(2, 1fr); }
  .an-stats-row--6   { grid-template-columns: repeat(2, 1fr); }
  .an-charts-grid    { grid-template-columns: 1fr; }
  .an-insights-grid  { grid-template-columns: 1fr; }
  .an-beh-row        { grid-template-columns: repeat(2, 1fr); }
  .an-filter-bar { gap: 8px; }
  .an-demo-badge { margin-left: 0; }
}

/* ─── Editor Start Helper (.esh-*) ───────────────────────────────── */
.esh-panel {
  flex-shrink: 0;
  margin: 0 0 4px;
  padding: 8px 12px 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 10px;
}
.esh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  min-height: 22px;
}
.esh-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}
/* Chevron toggle button */
.esh-chevron {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: background 0.12s, color 0.12s;
  line-height: 0;
}
.esh-chevron:hover {
  background: var(--hover);
  color: var(--text);
}
.esh-chevron svg {
  transition: transform 0.25s ease;
}
.esh-chevron--up svg {
  transform: rotate(180deg);
}
/* Animated collapsible body */
.esh-body {
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.25s ease;
  opacity: 1;
}
/* Premium chip grid */
.esh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  max-height: calc(2 * (30px + 6px));
  overflow: hidden;
}

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

.esh-chip {
  height: 26px;
  display: flex;
  align-items: center;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.esh-chip:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border-color: var(--accent);
  color: var(--accent);
}
/* Skeleton loading chips */
.esh-chip-skeleton {
  display: inline-block;
  background: color-mix(in srgb, var(--border) 60%, var(--surface-2));
  border-radius: 20px;
  height: 26px;
  animation: esh-shimmer 1.4s ease-in-out infinite;
}
.esh-chip-skeleton:nth-child(1) { width: 110px; }
.esh-chip-skeleton:nth-child(2) { width: 145px; }
.esh-chip-skeleton:nth-child(3) { width: 128px; }
.esh-chip-skeleton:nth-child(4) { width: 160px; }
.esh-chip-skeleton:nth-child(5) { width: 102px; }
.esh-chip-skeleton:nth-child(6) { width: 138px; }
@keyframes esh-shimmer {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.25; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Typography extensions — Quill font / size pickers
   ──────────────────────────────────────────────────────────────────────────── */

/* Font family option labels shown in Quill Snow picker */
.ql-font span[data-value="Arial"]::before           { font-family: Arial, sans-serif; }
.ql-font span[data-value="Times New Roman"]::before { font-family: "Times New Roman", serif; }
.ql-font span[data-value="Calibri"]::before         { font-family: Calibri, sans-serif; }
.ql-font span[data-value="Georgia"]::before         { font-family: Georgia, serif; }
.ql-font span[data-value="Verdana"]::before         { font-family: Verdana, sans-serif; }
.ql-font span[data-value="Tahoma"]::before          { font-family: Tahoma, sans-serif; }
.ql-font span[data-value="Trebuchet MS"]::before    { font-family: "Trebuchet MS", sans-serif; }
.ql-font span[data-value="Garamond"]::before        { font-family: Garamond, serif; }
.ql-font span[data-value="Cambria"]::before         { font-family: Cambria, serif; }
.ql-font span[data-value="Courier New"]::before     { font-family: "Courier New", monospace; }

/* Picker label width so font names don't get clipped */
.editor-split-panel .ql-snow .ql-picker.ql-font { width: 130px; }
.editor-split-panel .ql-snow .ql-picker.ql-size { width: 62px; }
#fs-editor-wrap .ql-snow .ql-picker.ql-font     { width: 130px; }
#fs-editor-wrap .ql-snow .ql-picker.ql-size     { width: 62px; }

/* ─────────────────────────────────────────────────────────────────────────────
   Page orientation — portrait narrows the content column, landscape widens it
   ──────────────────────────────────────────────────────────────────────────── */

/* When orientation is active: show a "desk" background so the paper stands out */
.wx-portrait .ql-container,
.wx-landscape .ql-container {
  background: rgba(0,0,0,0.18);
  padding: 24px 0;
  overflow-y: auto;
}

/* Portrait: paper-width column with drop shadow */
.wx-portrait .ql-container .ql-editor {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  background: var(--card, #1e1e2e);
  box-shadow: 0 2px 20px rgba(0,0,0,0.35);
  border-radius: 3px;
  min-height: 900px;
}

/* Landscape: wider column with drop shadow */
.wx-landscape .ql-container .ql-editor {
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
  background: var(--card, #1e1e2e);
  box-shadow: 0 2px 20px rgba(0,0,0,0.35);
  border-radius: 3px;
  min-height: 700px;
}

/* Light mode: white paper on light-grey desk */
:root[data-theme="light"] .wx-portrait .ql-container,
:root[data-theme="light"] .wx-landscape .ql-container {
  background: #d0d0d0;
}
:root[data-theme="light"] .wx-portrait .ql-container .ql-editor,
:root[data-theme="light"] .wx-landscape .ql-container .ql-editor {
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.12);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Fullscreen-editor orientation overrides
   The fullscreen HTML sets `#fs-editor .ql-editor { max-width:none }` (specificity 1,1,0)
   which beats the generic `.wx-portrait .ql-container .ql-editor` rules (0,3,0).
   Adding #fs-editor-wrap gives us (1,3,0) which wins.

   Layout goal: header + paper + footer form ONE seamless document column
   floating in the body gradient (which acts as the "desk" background).
   No extra desk overlay is needed — the body's own background provides it.
   ──────────────────────────────────────────────────────────────────────────── */

/* Container: transparent so the body gradient shows through as the desk.
   scrollbar-gutter:stable reserves the scrollbar lane even when hidden, so
   the paper column centers against a consistent width and stays aligned with
   the header/footer bars that live outside the scroll container. */
#fs-editor-wrap.wx-portrait .ql-container,
#fs-editor-wrap.wx-landscape .ql-container {
  background: transparent;
  padding: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Remove the Quill Snow default border that appears around the container and
   toolbar now that the Quill stylesheet loads correctly. The paper column uses
   box-shadow for depth; an extra 1px border looks wrong. */
#fs-editor-wrap .ql-container.ql-snow {
  border: none !important;
}
#fs-editor-wrap .ql-toolbar.ql-snow {
  border: none !important;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
}

/* ── Portrait document column ─────────────────────────────────────────────── */

/* Header — top section of the document column */
#fs-editor-wrap.wx-portrait .wx-doc-header {
  width: 100%;
  max-width: 710px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;   /* desk gap above the document */
  margin-bottom: 0;
  background: var(--card, #0f152b);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px 6px 0 0;
  padding: 7px 60px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45),
              0 -6px 18px rgba(0,0,0,0.35);
}

/* Paper — main writing area */
#fs-editor-wrap.wx-portrait .ql-container .ql-editor {
  max-width: 710px;
  margin-left: auto;
  margin-right: auto;
  background: var(--card, #0f152b);
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45);
  border-radius: 0;
  min-height: 840px;
  padding: 40px 60px;
  /* Quill v2 does not set position:relative on .ql-editor, which causes the
     ql-blank::before placeholder to anchor against .ql-container (x=0) instead
     of the paper column. Forcing position:relative fixes the placeholder. */
  position: relative;
}

/* Footer — bottom section of the document column */
#fs-editor-wrap.wx-portrait .wx-doc-footer {
  width: 100%;
  max-width: 710px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 32px;  /* desk gap below the document */
  background: var(--card, #0f152b);
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-radius: 0 0 6px 6px;
  padding: 7px 60px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45),
              0 6px 18px rgba(0,0,0,0.35);
}

/* ── Landscape document column ────────────────────────────────────────────── */

#fs-editor-wrap.wx-landscape .wx-doc-header {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  margin-bottom: 0;
  background: var(--card, #0f152b);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px 6px 0 0;
  padding: 7px 80px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45),
              0 -6px 18px rgba(0,0,0,0.35);
}

#fs-editor-wrap.wx-landscape .ql-container .ql-editor {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  background: var(--card, #0f152b);
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45);
  border-radius: 0;
  min-height: 700px;
  padding: 40px 80px;
  position: relative;
}

#fs-editor-wrap.wx-landscape .wx-doc-footer {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 32px;
  background: var(--card, #0f152b);
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-radius: 0 0 6px 6px;
  padding: 7px 80px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.45), 4px 0 24px rgba(0,0,0,0.45),
              0 6px 18px rgba(0,0,0,0.35);
}

/* ── Light mode fullscreen orientation ───────────────────────────────────── */

:root[data-theme="light"] #fs-editor-wrap.wx-portrait .wx-doc-header,
:root[data-theme="light"] #fs-editor-wrap.wx-landscape .wx-doc-header {
  background: #ffffff;
  border-bottom-color: rgba(0,0,0,0.07);
  box-shadow: -3px 0 16px rgba(0,0,0,0.12), 3px 0 16px rgba(0,0,0,0.12),
              0 -5px 14px rgba(0,0,0,0.09);
}

:root[data-theme="light"] #fs-editor-wrap.wx-portrait .ql-container .ql-editor,
:root[data-theme="light"] #fs-editor-wrap.wx-landscape .ql-container .ql-editor {
  background: #ffffff;
  box-shadow: -3px 0 16px rgba(0,0,0,0.12), 3px 0 16px rgba(0,0,0,0.12);
}

:root[data-theme="light"] #fs-editor-wrap.wx-portrait .wx-doc-footer,
:root[data-theme="light"] #fs-editor-wrap.wx-landscape .wx-doc-footer {
  background: #ffffff;
  border-top-color: rgba(0,0,0,0.07);
  box-shadow: -3px 0 16px rgba(0,0,0,0.12), 3px 0 16px rgba(0,0,0,0.12),
              0 5px 14px rgba(0,0,0,0.09);
}

/* Orientation toggle button styles */
#wx-orient-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  padding: 3px 10px !important;
  width: auto !important;
  height: auto !important;
  min-width: max-content;
  white-space: nowrap;
  border: 1px solid var(--border, rgba(99,102,241,0.3));
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  background: none;
  color: inherit;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}
#wx-orient-btn:hover { background: rgba(79,142,247,0.12); border-color: var(--accent, #4f8ef7); }
#wx-orient-btn.wx-orient-active {
  background: rgba(79,142,247,0.18);
  border-color: var(--accent, #4f8ef7);
  color: var(--accent, #4f8ef7);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Header and footer editable areas
   ──────────────────────────────────────────────────────────────────────────── */

.wx-doc-header,
.wx-doc-footer {
  width: 100%;
  min-height: 36px;
  padding: 7px 18px;
  font-size: 12px;
  color: var(--text, #e5e7eb);
  border: none;
  outline: none;
  background: transparent;
  box-sizing: border-box;
  line-height: 1.5;
  transition: background 0.15s;
}

.wx-doc-header { margin-bottom: 0; }
.wx-doc-footer { margin-top:    0; }

/* Placeholder text via data attribute */
.wx-doc-header:empty::before,
.wx-doc-footer:empty::before {
  content: attr(data-placeholder);
  color: var(--text, #e5e7eb);
  opacity: 0.28;
  pointer-events: none;
}

/* Subtle highlight on focus */
.wx-doc-header:focus,
.wx-doc-footer:focus {
  background: var(--surface-2, rgba(255,255,255,0.03));
  color: var(--text, #e5e7eb);
}

/* ── Table Style Panel (wx-tbl-style-panel) ──────────────────────── */
.wx-tbl-style-panel {
  position: fixed;
  z-index: 10002;
  background: var(--card, #1e1e2e);
  border: 1px solid var(--border, #444);
  border-radius: 8px;
  padding: 14px 16px;
  width: 270px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  color: var(--text, #e5e7eb);
}

.wx-tsp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.wx-tsp-label {
  font-size: 12px;
  min-width: 90px;
  flex-shrink: 0;
  color: var(--text, #e5e7eb);
}

.wx-tbl-style-panel input[type="color"] {
  width: 38px;
  height: 28px;
  border: 1px solid var(--border, #555);
  border-radius: 4px;
  cursor: pointer;
  padding: 1px 2px;
  background: transparent;
  flex-shrink: 0;
}

.wx-tbl-style-panel select {
  flex: 1;
  background: var(--surface, #111);
  border: 1px solid var(--border, #444);
  border-radius: 4px;
  color: inherit;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
}

.wx-tsp-none-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: var(--muted, #888);
}

.wx-tsp-btns {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  justify-content: flex-end;
}

.wx-tsp-btns button {
  padding: 5px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--border, #444);
  background: transparent;
  color: inherit;
  transition: opacity 0.15s;
}

.wx-tsp-btns button:hover {
  opacity: 0.8;
}

.wx-tsp-btns button.wx-tsp-primary {
  background: var(--accent, #4f8ef7);
  border-color: var(--accent, #4f8ef7);
  color: #fff;
}

/* ── Table captions in the Quill editor ─────────────────────────── */
.ql-editor table caption,
.ql-editor table caption[data-wx-caption] {
  caption-side: bottom;
  display: table-caption;
  font-size: 12px;
  font-style: italic;
  color: var(--muted, #888);
  text-align: center;
  padding: 5px 8px 4px;
  border-top: 1px dashed var(--border, #444);
  outline: none;
  cursor: text;
}

.ql-editor table caption:focus,
.ql-editor table caption[data-wx-caption]:focus {
  background: rgba(79, 142, 247, 0.06);
  border-top-color: var(--accent, #4f8ef7);
  border-radius: 0 0 4px 4px;
}

/* ── Editor tables general ──────────────────────────────────────── */
.ql-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}

.ql-editor table td,
.ql-editor table th {
  min-width: 60px;
  padding: 6px 8px;
  word-break: break-word;
  color: inherit;
}

/* Text-box table — styled callout box */
.ql-editor table[data-wx-textbox] {
  border: 2px solid #4f8ef7 !important;
  border-radius: 6px;
  border-collapse: separate !important;
  border-spacing: 0;
  width: 320px;
  margin: 8px 0;
}
.ql-editor table[data-wx-textbox] td {
  background: rgba(79,142,247,.07);
  border: none !important;
  border-radius: 4px;
  padding: 10px 14px;
  min-height: 52px;
  color: inherit;
}

/* ── Citation style picker ─────────────────────────────────────────────────── */
.style-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.style-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 140px;
  max-width: 220px;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.style-picker-btn.active,
.style-picker-btn:focus {
  border-color: var(--accent, #4f8ef7);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4f8ef7) 20%, transparent);
}

.style-picker-chevron {
  flex-shrink: 0;
  transition: transform 0.18s;
  opacity: 0.6;
}

.style-picker-btn.active .style-picker-chevron {
  transform: rotate(180deg);
}

.style-picker-panel {
  position: fixed;
  min-width: 280px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  z-index: 9500;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

.style-picker-search-row {
  position: relative;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface, #1e1e2e) 80%, transparent);
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.style-picker-search-input {
  flex: 1;
  height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text, #fff) 5%, transparent);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.style-picker-search-input::placeholder {
  color: var(--muted);
  font-size: 12px;
}

.style-picker-search-input:focus {
  border-color: var(--accent, #4f8ef7);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4f8ef7) 20%, transparent);
}

.style-search-clear,
.style-picker-search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.style-search-clear:hover,
.style-picker-search-clear:hover {
  color: var(--text);
}

.style-picker-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px 4px;
  margin: 0;
}

.style-picker-built-in-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
}

.style-picker-built-in-item {
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
  border-radius: 0;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.style-picker-built-in-item:hover {
  background: color-mix(in srgb, var(--accent, #4f8ef7) 12%, transparent);
}

.style-picker-built-in-item.active {
  color: var(--accent, #4f8ef7);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent, #4f8ef7) 8%, transparent);
}

.style-picker-built-in-item.active::before {
  content: "✓";
  font-size: 11px;
  margin-right: 4px;
  color: var(--accent, #4f8ef7);
}

.style-picker-results {
  border-top: 1px solid var(--border);
  padding: 4px 0;
  margin: 0;
  list-style: none;
}

.style-search-item {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.3;
}

.style-search-item:hover,
.style-search-item[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent, #4f8ef7) 15%, transparent);
}

.style-search-item.active {
  color: var(--accent, #4f8ef7);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent, #4f8ef7) 10%, transparent);
}

.style-search-item.active .style-search-item__title::before {
  content: "✓ ";
  font-size: 11px;
  margin-right: 4px;
  color: var(--accent, #4f8ef7);
}

.style-search-item__title {
  flex: 1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.style-search-item__badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent, #4f8ef7) 25%, transparent);
  color: var(--accent, #4f8ef7);
}

.style-search-empty {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.style-picker-custom-section {
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .style-picker-btn {
    min-width: 110px;
    font-size: 12px;
  }
  .style-picker-panel {
    min-width: 240px;
    left: 0;
    right: 0;
  }
}

/* ── Fullscreen-sync toast ───────────────────────────────────────────────── */
.ep-sync-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: color-mix(in hsl, var(--accent) 85%, var(--card));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 99px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}
.ep-sync-toast.ep-sync-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Mobile Hamburger Toggle ─── */
.mobile-nav-toggle {
  display: none; /* hidden on desktop */
  position: relative;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1010;
  margin-left: auto;
}

.mobile-nav-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--text);
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated active state of hamburger */
.mobile-nav-toggle--active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle--active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}
.mobile-nav-toggle--active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 820px) {
  .mobile-nav-toggle {
    display: flex;
  }

  .nav {
    position: relative;
    flex-wrap: wrap;
    width: 100%;
  }

  .links {
    display: none !important; /* hidden by default */
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 16px;
    gap: 8px;
    z-index: 1005;
    box-shadow: var(--shadow);
  }

  .links.links--open {
    display: flex !important;
  }

  .links a, .links button, .links .nav-user-pill {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
  }

  /* Fix topbar heights or headers on pages like lectures.html */
  header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
  }
  
  header .nav {
    flex: 1;
    position: static;
    width: auto;
  }

  header .mobile-nav-toggle {
    margin-left: 12px;
  }

  header .actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  header #startTourBtn {
    display: none !important;
  }

  /* Admin Header and Table responsive overrides */
  .admin-header-card .card-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-bottom: 12px;
  }
  .admin-header-controls {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  .table-responsive-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  /* Constrain main wrap to prevent page-level horizontal overflow */
  .admin-wrap {
    max-width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}

/* ─── Mobile Workspace vs Editor Tabs ─── */
.wx-mobile-tabs {
  display: none !important; /* hidden on desktop */
  width: 100%;
  gap: 6px;
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.wx-mobile-tab {
  flex: 1;
  background: none !important;
  border: none !important;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: calc(var(--radius) - 4px);
  transition: all 0.15s ease;
  text-align: center;
}

.wx-mobile-tab:hover {
  color: var(--text);
}

.wx-mobile-tab--active {
  color: #0b1020 !important;
  background: var(--accent) !important;
}

@media (max-width: 1080px) {
  .wx-mobile-tabs {
    display: none !important;
  }
  .wx-mobile-tabs.wx-mobile-tabs--open {
    display: flex !important;
  }

  /* ─── Index Page (Chat) toggles ─── */
  .assignment-layout:has(#chat[data-mobile-active-pane="editor"]) .hero-wrap {
    display: none !important;
  }

  .workspace-split[data-mobile-active-pane="workspace"] #assignmentEditorPanel {
    display: none !important;
  }
  .workspace-split[data-mobile-active-pane="workspace"] #aiWorkspacePanel {
    display: flex !important;
  }
  
  .workspace-split[data-mobile-active-pane="editor"] #aiWorkspacePanel {
    display: none !important;
  }
  .workspace-split[data-mobile-active-pane="editor"] #assignmentEditorPanel {
    display: flex !important;
    margin-top: 0;
  }

  /* ─── Lectures Page toggles ─── */
  .page-split[data-mobile-active-pane="workspace"] #assignmentEditorPanelLec {
    display: none !important;
  }
  .page-split[data-mobile-active-pane="editor"] .layout aside.sidebar,
  .page-split[data-mobile-active-pane="editor"] .layout section.viewer,
  .page-split[data-mobile-active-pane="editor"] .layout aside.chat {
    display: none !important;
  }
  .page-split[data-mobile-active-pane="editor"] #assignmentEditorPanelLec {
    display: flex !important;
  }

  /* ─── Research Page toggles ─── */
  .page-split--research[data-mobile-active-pane="workspace"] #assignmentEditorPanelRes {
    display: none !important;
  }
  .page-split--research[data-mobile-active-pane="editor"] main {
    display: none !important;
  }
  .page-split--research[data-mobile-active-pane="editor"] #assignmentEditorPanelRes {
    display: flex !important;
  }
}

/* ─── Layout & Hero Adjustments ─── */
@media (max-width: 768px) {
  .hero-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .assignment-meta {
    width: 100% !important;
    max-width: none !important;
  }
  .hero-logo {
    height: 60px !important;
    width: 60px !important;
  }
  .title-xl {
    font-size: 28px !important;
  }
}

@media (max-width: 480px) {
  .cta {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .cta .btn {
    width: 100% !important;
  }
  .ask-input {
    padding: 8px 12px !important;
  }
  .ask-input textarea {
    font-size: 14px !important;
  }
}

/* Validation styles for required fields */
input.is-invalid,
textarea.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

/* Prevent background scrolling when modal is open */
body.modal-open {
  overflow: hidden !important;
}

/* Built-in style badges interaction states */
.built-in-style-badge {
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.built-in-style-badge:hover {
  background: color-mix(in hsl, var(--accent) 20%, transparent) !important;
  border-color: var(--accent) !important;
}
.built-in-style-badge.active {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
}

/* Document Visualizer Highlights */
.wx-text-typed {
  color: #60a5fa !important;
  background: rgba(96, 165, 250, 0.05) !important;
  cursor: help;
  transition: background 0.15s ease;
}
.wx-text-typed:hover {
  background: rgba(96, 165, 250, 0.12) !important;
}

.wx-text-paste {
  color: #f97316 !important;
  background: rgba(249, 115, 22, 0.08) !important;
  border-bottom: 1px dotted #f97316 !important;
  cursor: help;
  transition: background 0.15s ease;
}
.wx-text-paste:hover {
  background: rgba(249, 115, 22, 0.15) !important;
}

.wx-text-large-paste {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border-bottom: 1px dashed #ef4444 !important;
  cursor: help;
  transition: background 0.15s ease;
}
.wx-text-large-paste:hover {
  background: rgba(239, 68, 68, 0.18) !important;
}



/* Event list warnings */
.erp-beh-log__row--warning {
  background: rgba(239, 68, 68, 0.05) !important;
  border-left: 3px solid #ef4444 !important;
}
.erp-beh-log__row--danger {
  background: rgba(239, 68, 68, 0.08) !important;
  border-left: 3px solid #ef4444 !important;
}

/* Modal styling */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100003;
}
.modal-backdrop.show {
  display: flex;
}
.modal {
  width: min(680px, 92vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}

/* ─────────────────────────────────────────────────────────────────────────────
   AI Declaration Modal – Professional Redesign & Polished Spacing
   ──────────────────────────────────────────────────────────────────────────── */

.decl-modal {
  width: min(620px, 94vw);
  background: var(--card, #0f152b);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 28px 30px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: declModalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes declModalFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.decl-modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 14px;
}

.decl-modal-header h3 {
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--text, #f8fafc);
  margin: 0 0 4px 0;
  letter-spacing: -0.015em;
}

.decl-modal-subtitle {
  font-size: 0.88rem;
  color: var(--muted, #94a3b8);
  margin: 0;
}

.decl-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.decl-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.decl-checkbox-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(96, 165, 250, 0.35);
  transform: translateY(-1px);
}

.decl-checkbox-item:has(input:checked) {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.45);
}

.decl-checkbox-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #38bdf8;
  flex-shrink: 0;
}

.decl-checkbox-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.decl-checkbox-label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text, #e2e8f0);
  line-height: 1.4;
}

.decl-checkbox-sublabel {
  font-size: 0.8rem;
  color: var(--muted, #94a3b8);
  line-height: 1.35;
}

.decl-signature-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.decl-section-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text, #cbd5e1);
  letter-spacing: 0.01em;
}

.decl-signature-input {
  width: 100%;
  padding: 11px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(11, 16, 32, 0.7);
  color: var(--text, #fff);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.decl-signature-input:focus {
  outline: none;
  border-color: #38bdf8;
  background: rgba(11, 16, 32, 0.95);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.decl-upload-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.decl-file-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(11, 16, 32, 0.5);
  color: var(--text, #e2e8f0);
  font-size: 0.88rem;
}

.decl-info-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(96, 165, 250, 0.04));
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-left: 4px solid #38bdf8;
}

.decl-info-icon {
  color: #38bdf8;
  flex-shrink: 0;
  margin-top: 2px;
}

.decl-info-text {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted, #cbd5e1);
  margin: 0;
}

.decl-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.decl-btn-cancel {
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted, #94a3b8);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.decl-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text, #fff);
  border-color: rgba(255, 255, 255, 0.25);
}

.decl-btn-confirm {
  padding: 11px 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border: 1px solid #38bdf8;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
}

.decl-btn-confirm:hover:not(:disabled) {
  background: linear-gradient(135deg, #0369a1, #1d4ed8);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.45);
  transform: translateY(-1px);
}

/* Light Mode Overrides */
:root[data-theme="light"] .decl-modal {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .decl-modal-header {
  border-bottom-color: #f1f5f9;
}

:root[data-theme="light"] .decl-checkbox-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

:root[data-theme="light"] .decl-checkbox-item:hover {
  background: #f1f5f9;
  border-color: #93c5fd;
}

:root[data-theme="light"] .decl-checkbox-item:has(input:checked) {
  background: #eff6ff;
  border-color: #60a5fa;
}

:root[data-theme="light"] .decl-signature-input {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

:root[data-theme="light"] .decl-info-card {
  background: #f0f9ff;
  border-color: #bae6fd;
  border-left-color: #0284c7;
}

:root[data-theme="light"] .decl-info-text {
  color: #334155;
}

:root[data-theme="light"] .decl-btn-cancel {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Aesthetic fixes for toolbar alignment, dropdown overlap, and page column
   ──────────────────────────────────────────────────────────────────────────── */

/* Fix the font and header picker widths globally to prevent overlapping */
.ql-snow .ql-picker.ql-font {
  width: 110px !important;
}
.ql-snow .ql-picker.ql-header {
  width: 90px !important;
}

/* Fix the font size picker inside the custom size input combo to only show arrow */
.wx-font-group .ql-picker.ql-size {
  width: 18px !important;
}
.wx-font-group .ql-picker.ql-size .ql-picker-label {
  padding: 0 !important;
  border: none !important;
}
.wx-font-group .ql-picker.ql-size .ql-picker-label::before {
  content: "" !important;
  display: none !important;
}
.wx-font-group .ql-picker.ql-size .ql-picker-label svg {
  right: 0 !important;
  left: 0 !important;
  margin: auto !important;
  width: 12px !important;
  height: 12px !important;
}

/* Disable page orientation layout margins/padding/backgrounds in split panel view */
.editor-split-panel .ql-container,
.assignment-editor-panel .ql-container {
  background: transparent !important;
  padding: 12px 0 !important;
}

.editor-split-panel .ql-editor,
.assignment-editor-panel .ql-editor {
  max-width: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  flex: 1 1 0% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Ensure equal height alignment between chat panel and editor panel in split view */
#chat[data-has-editor="true"],
.workspace-split[data-has-editor="true"] {
  align-items: stretch !important;
  height: calc(100vh - 120px) !important;
  max-height: calc(100vh - 120px) !important;
  min-height: 500px !important;
  overflow: hidden !important;
}

#chat[data-has-editor="true"] #aiWorkspacePanel,
.workspace-split[data-has-editor="true"] #aiWorkspacePanel,
#chat[data-has-editor="true"] #assignmentEditorPanel,
.workspace-split[data-has-editor="true"] .assignment-editor-panel {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.assignment-editor-panel .ae-workspace-container,
.assignment-editor-panel .ae-editor-column,
.assignment-editor-panel .ql-container,
.editor-split-panel .ae-workspace-container,
.editor-split-panel .ae-editor-column,
.editor-split-panel .ql-container {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Also align header/footer inputs to full-width in split panel view */
.editor-split-panel .wx-doc-header,
.editor-split-panel .wx-doc-footer,
.assignment-editor-panel .wx-doc-header,
.assignment-editor-panel .wx-doc-footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* ============================================
   Container Query Responsive Layout Overrides
   ============================================ */

/* 1. Lectures Layout Container Queries */
.workspace-container {
  width: 100%;
  height: 100%;
  container-type: inline-size;
  container-name: workspace;
}

@container workspace (max-width: 1050px) {
  .layout {
    grid-template-columns: clamp(200px, 22vw, 300px) minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr minmax(180px, 1.2fr) !important;
    grid-template-areas:
      "topbar topbar"
      "sidebar viewer"
      "chat viewer" !important;
  }
  
  aside.sidebar {
    border-right: 1px solid var(--border) !important;
    border-bottom: none !important;
  }
  
  aside.chat {
    border-left: none !important;
    border-right: 1px solid var(--border) !important;
    border-top: 1px solid var(--border) !important;
    /* Guarantee enough height to show the form in compact 2-col mode */
    min-height: 180px !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

@container workspace (max-width: 680px) {
  .layout {
    height: auto !important;
    min-height: 100dvh !important;
    grid-template-columns: 1fr !important;
    grid-template-rows:
      auto
      minmax(120px, 26dvh)
      minmax(320px, auto)
      minmax(180px, auto) !important;
    grid-template-areas:
      "topbar"
      "sidebar"
      "viewer"
      "chat" !important;
  }
  
  aside.sidebar {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    height: auto !important;
    max-height: 26dvh !important;
  }
  
  aside.chat {
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    height: auto !important;
    max-height: 80dvh !important;
  }
}

/* 2. Slidebar and Viewer toolbar adjustments when space is tight */
@container workspace (max-width: 750px) {
  .slidebar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .slidebar .slide-nav,
  .slidebar .zoom {
    justify-self: auto !important;
  }
}

.research-vertical-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* 3. Research Layout Container Queries */
.page-split--research main {
  container-type: inline-size;
  container-name: research-main;
}

@container research-main (max-width: 650px) {
  /* Search Hub form and actions layout */
  #qform.research-search {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #qform.research-search input#q {
    width: 100% !important;
    margin: 0 !important;
  }
  #qform.research-search .search-actions {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }
  #qform.research-search .search-actions button {
    flex: 1 !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* Filters row layout */
  .search-filters-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .search-filters-row select {
    width: 100% !important;
    margin: 0 !important;
  }
  .search-filters-row label {
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }

  /* PDF Viewer controls row */
  #viewerCard .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #viewerCard .highlight-controls {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: space-between !important;
    border-top: 1px dashed var(--border) !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
  }
}

@keyframes popInGlow {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(-8px) scale(1);
  }
}

@keyframes highlightBtnGlowPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 16px 4px rgba(139, 92, 246, 0.9);
    transform: scale(1.08);
  }
}

.highlight-btn-pulse {
  animation: highlightBtnGlowPulse 0.8s ease-in-out 3;
  border-color: #8b5cf6 !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #ffffff !important;
}

/* 4. Editor Split Panel Container Queries */
.editor-split-panel {
  container-type: inline-size;
  container-name: editor-panel;
}

@container editor-panel (max-width: 480px) {
  .assignment-editor-rubric-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .assignment-editor-rubric-bar > div {
    justify-content: center !important;
  }
  .assignment-editor-rubric-bar .rubric-status {
    text-align: center !important;
    margin-left: 0 !important;
    max-width: none !important;
  }
  
  .assignment-editor-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .assignment-editor-meta {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

/* 5. Narrow Workspace Nav Bar Scaling */
@container workspace (max-width: 980px) {
  .nav {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .brand {
    gap: 6px !important;
  }
  .brand img {
    height: 24px !important;
    width: 24px !important;
  }
  .brand-name {
    font-size: 14px !important;
  }
  .links {
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  .links a, .nav-link {
    padding: 4px 6px !important;
    font-size: 11px !important;
    letter-spacing: -0.2px !important;
  }
  #startTourBtn {
    display: none !important; /* Hide Interactive Tutorial button to reclaim space */
  }
  .themebtn {
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
  }
  #wurksyTimerToggleBtn {
    width: 26px !important;
    height: 26px !important;
    margin-left: 2px !important;
  }
  .nav-user-pill {
    padding: 2px 6px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
}

@keyframes editor-button-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.7);
    border-color: rgba(96, 165, 250, 0.8);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(96, 165, 250, 0);
    border-color: rgba(96, 165, 250, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
    border-color: rgba(96, 165, 250, 0.8);
  }
}

.wx-glow-button {
  animation: editor-button-glow 2s infinite ease-in-out !important;
  border: 1.5px solid var(--accent, #60a5fa) !important;
  color: var(--accent, #60a5fa) !important;
  background: color-mix(in hsl, var(--accent) 15%, transparent) !important;
  font-weight: bold !important;
}

@keyframes text-glow-pulse {
  0% {
    text-shadow: 0 0 4px rgba(96, 165, 250, 0.4);
    color: #93c5fd;
  }
  50% {
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.8), 0 0 20px rgba(96, 165, 250, 0.4);
    color: #ffffff;
  }
  100% {
    text-shadow: 0 0 4px rgba(96, 165, 250, 0.4);
    color: #93c5fd;
  }
}

.wx-glow-text {
  animation: text-glow-pulse 3s infinite ease-in-out;
  font-weight: 600;
  line-height: 1.5;
  display: block;
  font-size: 11px;
}

:root[data-theme="light"] .wx-glow-text {
  animation: text-glow-pulse-light 3s infinite ease-in-out;
}

@keyframes text-glow-pulse-light {
  0% {
    text-shadow: 0 0 4px rgba(37, 99, 235, 0.1);
    color: #2563eb;
  }
  50% {
    text-shadow: 0 0 12px rgba(37, 99, 235, 0.2), 0 0 20px rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
  }
  100% {
    text-shadow: 0 0 4px rgba(37, 99, 235, 0.1);
    color: #2563eb;
  }
}

/* Quill Dropdown Options (Dark Mode Theme Contrast Fix) */
.ql-snow .ql-picker:not(.ql-color):not(.ql-background) .ql-picker-options {
  background-color: #121939 !important; /* matches dark mode elevation */
  border: 1px solid #26314b !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  border-radius: 8px !important;
  padding: 6px 0 !important;
}

.ql-snow .ql-picker:not(.ql-color):not(.ql-background) .ql-picker-options .ql-picker-item {
  color: #e2e8f0 !important; /* light gray/white text */
  padding: 8px 16px !important;
  font-size: 13px !important;
  background-color: transparent !important;
}

.ql-snow .ql-picker:not(.ql-color):not(.ql-background) .ql-picker-options .ql-picker-item:hover,
.ql-snow .ql-picker:not(.ql-color):not(.ql-background) .ql-picker-options .ql-picker-item.ql-selected {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Ensure high contrast for all Quill toolbar elements (especially in dark mode) */
.ql-toolbar.ql-snow .ql-picker,
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker-item {
  color: var(--text) !important;
}

.ql-toolbar.ql-snow .ql-stroke {
  stroke: var(--text) !important;
}

.ql-toolbar.ql-snow .ql-fill {
  fill: var(--text) !important;
}

.ql-toolbar.ql-snow .ql-thin {
  stroke: var(--text) !important;
}

/* ==========================================================================
   Dockable Navigation Bar (Top Header ↔ Left Sidebar Overlay)
   ========================================================================== */

/* Button styles for dock pos & toggle */
.nav-dock-btn {
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent, #6366f1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-dock-btn:hover {
  background: rgba(99, 102, 241, 0.3);
  border-color: var(--accent, #6366f1);
  color: #ffffff;
}

.nav-floating-reopen-btn {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 10000;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4), 0 0 10px rgba(124, 58, 237, 0.3);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-floating-reopen-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.6);
}

/* LEFT SIDEBAR OVERLAY MODE */
[data-nav-pos="left"] header,
[data-nav-pos="left"] header.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 250px !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: #0f172a !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: none !important;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, border-color 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 14px !important;
  box-sizing: border-box !important;
}

:root[data-theme="light"] [data-nav-pos="left"] header,
:root[data-theme="light"] [data-nav-pos="left"] header.topbar {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.08) !important;
}

[data-nav-pos="left"] header .nav,
[data-nav-pos="left"] header .container,
[data-nav-pos="left"] header .header-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 12px !important;
  position: static !important;
}

[data-nav-pos="left"] header .brand {
  order: -200 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
}

[data-nav-pos="left"] header .links {
  display: flex !important; /* Always visible in sidebar mode regardless of screen width */
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-nav-pos="left"] header .actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="light"] [data-nav-pos="left"] header .actions {
  border-top-color: #e2e8f0 !important;
}

[data-nav-pos="left"] header a,
[data-nav-pos="left"] header button,
[data-nav-pos="left"] header .nav-link,
[data-nav-pos="left"] header .nav-dock-btn,
[data-nav-pos="left"] header .themebtn,
[data-nav-pos="left"] header .layout-picker {
  width: 100% !important;
  text-align: left !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

[data-nav-pos="left"] header .layout-picker {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

[data-nav-pos="left"] header .layout-picker:not([hidden]) {
  display: flex !important;
}

/* Controls buttons in dark vs light mode */
[data-nav-pos="left"] header .nav-dock-btn,
[data-nav-pos="left"] header #navToggleStateBtn,
[data-nav-pos="left"] header .themebtn,
[data-nav-pos="left"] header .layout-btn {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border: 1px solid #334155 !important;
}

:root[data-theme="light"] [data-nav-pos="left"] header .nav-dock-btn,
:root[data-theme="light"] [data-nav-pos="left"] header #navToggleStateBtn,
:root[data-theme="light"] [data-nav-pos="left"] header .themebtn,
:root[data-theme="light"] [data-nav-pos="left"] header .layout-btn {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* User pill in dark vs light mode */
[data-nav-pos="left"] header .nav-user-pill {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
}

:root[data-theme="light"] [data-nav-pos="left"] header .nav-user-pill {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] [data-nav-pos="left"] header .nav-user-name {
  color: #0f172a !important;
}

/* High-contrast navigation links */
[data-nav-pos="left"] header .links a {
  color: #cbd5e1 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}

:root[data-theme="light"] [data-nav-pos="left"] header .links a {
  color: #475569 !important;
}

[data-nav-pos="left"] header .links a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

:root[data-theme="light"] [data-nav-pos="left"] header .links a:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

[data-nav-pos="left"] header .links a.active {
  color: #ffffff !important;
  background: #2563eb !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3) !important;
}

[data-nav-pos="left"] .mobile-nav-toggle {
  display: none !important;
}

/* Exact Left Sidebar Vertical Order:
   0. Wurksy AI Brand Logo
   1. Close side panel (◀)
   2. Move panel to top (📌 Move Top)
   3. Light/dark view toggle (☀️)
   4. Open editor
   5. Swap sides of editor
   6. Interactive tutorial
   7. Chat
   8. Lectures
   9. Research
   10. AI Policy Guide
   11. Tutorials
   12. Contact Us
   13. Sign out
   14. Student badge / ID
*/

/* 0. Wurksy AI Brand Logo at the very top */
[data-nav-pos="left"] header .brand,
[data-nav-pos="left"] a.brand {
  order: -9999 !important;
  margin-bottom: 12px !important;
}

/* 1. Close side panel */
[data-nav-pos="left"] #navToggleStateBtn {
  order: -100 !important;
}

/* 2. Move panel to top */
[data-nav-pos="left"] #navDockPosBtn {
  order: -90 !important;
}

/* 3. Light/dark view toggle */
[data-nav-pos="left"] #themeToggle {
  order: -80 !important;
}

/* 3b. Timer display / toggle button */
[data-nav-pos="left"] #wurksyTimeTrackerClock,
[data-nav-pos="left"] #wurksyTimerToggleBtn {
  order: -75 !important;
}

/* 4. Open editor */
[data-nav-pos="left"] #openEditorChatBtn,
[data-nav-pos="left"] #openEditorLecBtn,
[data-nav-pos="left"] #openEditorBtn {
  order: -70 !important;
}

/* 5. Swap sides of editor */
[data-nav-pos="left"] #layoutPicker,
[data-nav-pos="left"] #layoutPickerLec,
[data-nav-pos="left"] #layoutPickerRes {
  order: -60 !important;
}

/* 6. Interactive tutorial */
[data-nav-pos="left"] #startTourBtn {
  order: -50 !important;
}

/* 7. Chat link (excluding brand logo link) */
[data-nav-pos="left"] .links a[href="/index.html"],
[data-nav-pos="left"] a:not(.brand)[href="/index.html"] {
  order: 1 !important;
}

/* 8. Lectures link */
[data-nav-pos="left"] a[href="/lectures.html"] {
  order: 2 !important;
}

/* 9. Research link */
[data-nav-pos="left"] a[href="/research.html"] {
  order: 3 !important;
}

/* 10. AI Policy Guide link */
[data-nav-pos="left"] a[href="/ai-guide.html"] {
  order: 4 !important;
}

/* 11. Tutorials link */
[data-nav-pos="left"] a[href="/tutorials.html"] {
  order: 5 !important;
}

/* 12. Contact Us link */
[data-nav-pos="left"] a[href="/contact.html"] {
  order: 6 !important;
}

/* Admin link if visible */
[data-nav-pos="left"] #adminNavLink {
  order: 7 !important;
}

/* 13. Sign out link */
[data-nav-pos="left"] a[href="/auth/logout"] {
  order: 8 !important;
}

/* 14. Student pill (badge / ID) */
[data-nav-pos="left"] #navUserPill {
  order: 9 !important;
}

/* Main layout shifts right when left sidebar is open */
[data-nav-pos="left"] main,
[data-nav-pos="left"] .app-main,
[data-nav-pos="left"] .page-main,
[data-nav-pos="left"] .layout,
[data-nav-pos="left"] #app,
[data-nav-pos="left"] .page-split[data-panel-order] {
  margin-left: 250px !important;
  width: calc(100% - 250px) !important;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding-top: 12px !important;
  box-sizing: border-box !important;
}

/* Prevent double-shifting or layout overflow ONLY inside active split-screen grid containers */
[data-nav-pos="left"] .page-split[data-panel-order] main,
[data-nav-pos="left"] .page-split[data-panel-order] .layout,
[data-nav-pos="left"] .page-split[data-panel-order] .editor-split-panel {
  margin-left: 0 !important;
  width: 100% !important;
}

/* COLLAPSED STATE IN LEFT SIDEBAR MODE */
[data-nav-pos="left"][data-nav-state="collapsed"] header,
[data-nav-pos="left"][data-nav-state="collapsed"] header.topbar {
  transform: translateX(-100%) !important;
}

[data-nav-pos="left"][data-nav-state="collapsed"] main,
[data-nav-pos="left"][data-nav-state="collapsed"] .app-main,
[data-nav-pos="left"][data-nav-state="collapsed"] .page-main,
[data-nav-pos="left"][data-nav-state="collapsed"] .layout,
[data-nav-pos="left"][data-nav-state="collapsed"] #app,
[data-nav-pos="left"][data-nav-state="collapsed"] .page-split[data-panel-order] {
  margin-left: 0 !important;
  width: 100% !important;
  padding-top: 12px !important;
}

[data-nav-pos="left"][data-nav-state="collapsed"] .page-split[data-panel-order] main,
[data-nav-pos="left"][data-nav-state="collapsed"] .page-split[data-panel-order] .layout,
[data-nav-pos="left"][data-nav-state="collapsed"] .page-split[data-panel-order] .editor-split-panel {
  margin-left: 0 !important;
  width: 100% !important;
}

/* Ensure Close top panel button is placed first at start before logo in top header mode */
header #navToggleStateBtn,
header.topbar #navToggleStateBtn,
.nav #navToggleStateBtn {
  order: -999999 !important;
  margin-right: 8px !important;
}

/* COLLAPSED STATE IN TOP HEADER MODE */
[data-nav-pos="top"][data-nav-state="collapsed"] header,
[data-nav-pos="top"][data-nav-state="collapsed"] header.topbar,
:root:not([data-nav-pos="left"])[data-nav-state="collapsed"] header,
:root:not([data-nav-pos="left"])[data-nav-state="collapsed"] header.topbar {
  transform: translateY(-100%) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  z-index: 9999 !important;
}

[data-nav-pos="top"][data-nav-state="collapsed"] main,
[data-nav-pos="top"][data-nav-state="collapsed"] .app-main,
[data-nav-pos="top"][data-nav-state="collapsed"] .page-main,
[data-nav-pos="top"][data-nav-state="collapsed"] .layout,
[data-nav-pos="top"][data-nav-state="collapsed"] #app,
:root:not([data-nav-pos="left"])[data-nav-state="collapsed"] main {
  margin-top: -60px !important;
}

/* Centered, Extra Large Hero Logo & Title Section above the Brief */
.hero-row.hero-row--centered {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 16px 0 !important;
}

.hero-main.hero-main--centered {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  gap: 14px !important;
}

.hero-title.hero-title--centered {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  font-size: 76px !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.05 !important;
  margin: 10px 0 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.22s ease !important;
}

.hero-title.hero-title--centered:hover {
  transform: scale(1.03) !important;
  filter: drop-shadow(0 10px 30px rgba(79, 70, 229, 0.45)) !important;
}

.hero-title.hero-title--centered:active {
  transform: scale(0.98) !important;
}

.hero-logo.hero-logo--large {
  width: 96px !important;
  height: 96px !important;
  border-radius: 22px !important;
  filter: drop-shadow(0 10px 30px rgba(79, 70, 229, 0.45)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.hero-logo.hero-logo--large:hover {
  transform: scale(1.06) rotate(-2deg) !important;
}

.hero-action-btns {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 4px !important;
}

.hero-btn {
  padding: 9px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

@media (max-width: 768px) {
  .hero-title.hero-title--centered {
    font-size: 52px !important;
    gap: 14px !important;
  }
  .hero-logo.hero-logo--large {
    width: 64px !important;
    height: 64px !important;
  }
}

/* Admin Glow Tabs Styling */
.admin-glow-tab {
  position: relative !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  padding: 10px 28px !important;
  min-width: 140px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.14)) !important;
  color: var(--text-secondary, #cbd5e1) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  letter-spacing: 0.3px !important;
}

.admin-glow-tab:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.35) !important;
  transform: translateY(-2px) !important;
}

.admin-glow-tab.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border-color: rgba(165, 180, 252, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 0 22px rgba(99, 102, 241, 0.6), 0 4px 14px rgba(99, 102, 241, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Light Mode Admin Glow Tabs Overrides */
:root[data-theme="light"] .admin-glow-tab {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] .admin-glow-tab:hover {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.18) !important;
  transform: translateY(-1px) !important;
}

:root[data-theme="light"] .admin-glow-tab.active {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

.admin-header-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.admin-header-card.collapsed {
  display: none !important;
}

/* Registered trademark styling matching logo design */
.hero-title .brand-ai::after {
  content: "®" !important;
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  margin-left: 6px !important;
  font-size: 0.34em !important;
  color: #38bdf8 !important;
  -webkit-text-fill-color: #38bdf8 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

/* Custom Multi-Select Filter Dropdowns */
.custom-multiselect-container {
  position: relative;
  display: inline-block;
}

.multiselect-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 195px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text, #f1f5f9);
  background: var(--card, rgba(15, 23, 42, 0.85));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.multiselect-trigger-btn:hover {
  border-color: #6366f1;
  background: rgba(30, 41, 59, 0.95);
}

.multiselect-trigger-btn.active {
  border-color: #818cf8;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.35);
  background: rgba(30, 41, 59, 1);
}

.multiselect-arrow {
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.multiselect-trigger-btn.active .multiselect-arrow {
  transform: rotate(180deg);
}

.multiselect-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10000;
  min-width: 250px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  animation: fadeInDown 0.15s ease-out;
}

.multiselect-dropdown-menu[hidden] {
  display: none !important;
}

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

.multiselect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: #cbd5e1;
}

.multiselect-clear-btn {
  background: transparent;
  border: none;
  color: #60a5fa;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.multiselect-clear-btn:hover {
  background: rgba(96, 165, 250, 0.15);
  text-decoration: underline;
}

.multiselect-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.multiselect-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.multiselect-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.multiselect-option input[type="checkbox"] {
  accent-color: #6366f1;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.multiselect-footer {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Multi-Select Filter Dropdowns in Light Mode */
:root[data-theme="light"] .multiselect-trigger-btn,
:root[data-theme="light"] #statusMultiselectBtn,
:root[data-theme="light"] #platformMultiselectBtn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] .multiselect-trigger-btn:hover,
:root[data-theme="light"] #statusMultiselectBtn:hover,
:root[data-theme="light"] #platformMultiselectBtn:hover {
  border-color: #2563eb !important;
  background: #f8fafc !important;
}

:root[data-theme="light"] .multiselect-trigger-btn.active,
:root[data-theme="light"] #statusMultiselectBtn.active,
:root[data-theme="light"] #platformMultiselectBtn.active {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  background: #ffffff !important;
}

:root[data-theme="light"] .multiselect-arrow {
  color: #64748b !important;
}

:root[data-theme="light"] .multiselect-dropdown-menu,
:root[data-theme="light"] #statusMultiselectMenu,
:root[data-theme="light"] #platformMultiselectMenu {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

:root[data-theme="light"] .multiselect-header {
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .multiselect-header strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .multiselect-clear-btn {
  color: #2563eb !important;
}

:root[data-theme="light"] .multiselect-clear-btn:hover {
  background: #eff6ff !important;
}

:root[data-theme="light"] .multiselect-option {
  color: #1e293b !important;
}

:root[data-theme="light"] .multiselect-option:hover {
  background: #f1f5f9 !important;
}

:root[data-theme="light"] .multiselect-footer {
  border-top: 1px solid #e2e8f0 !important;
}

/* ── Light Mode Human Outcome Board Overrides ── */
:root[data-theme="light"] #markedBoardViewContainer > div > div {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #markedBoardViewContainer h4 {
  font-weight: 800 !important;
}

:root[data-theme="light"] #markedBoardViewContainer [style*="color: #10b981"] {
  color: #047857 !important;
  border-bottom-color: #a7f3d0 !important;
}

:root[data-theme="light"] #markedBoardViewContainer [style*="color: #c084fc"] {
  color: #7e22ce !important;
  border-bottom-color: #d8b4fe !important;
}

:root[data-theme="light"] #passMarkedList [style*="background: rgba(255,255,255,0.03)"],
:root[data-theme="light"] #escalateMarkedList [style*="background: rgba(255,255,255,0.03)"],
:root[data-theme="light"] #markedBoardViewContainer .marked-board-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] #passMarkedList [style*="background: rgba(255,255,255,0.03)"]:hover,
:root[data-theme="light"] #escalateMarkedList [style*="background: rgba(255,255,255,0.03)"]:hover,
:root[data-theme="light"] #markedBoardViewContainer .marked-board-card:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

:root[data-theme="light"] #markedBoardViewContainer [style*="color: var(--text)"] {
  color: #0f172a !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #markedBoardViewContainer [style*="color: var(--muted)"] {
  color: #475569 !important;
}

:root[data-theme="light"] #markedBoardViewContainer [style*="color: var(--muted)"] strong {
  color: #0f172a !important;
}

:root[data-theme="light"] #markedBoardViewContainer [style*="background: rgba(255,255,255,0.05)"] {
  background: #ffffff !important;
  color: #1e293b !important;
  border-top: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] #markedBoardViewContainer [style*="color: #60a5fa"] {
  color: #2563eb !important;
  font-weight: 800 !important;
}

/* ── Light Mode Overrides for What Makes WurksyAI Unique / Calculator / Problem ── */
:root[data-theme="light"] #adminUpcomingFeaturesSection {
  background: transparent !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

/* ── What Makes WurksyAI Unique Hero Banner ── */
#adminUpcomingFeaturesSection > div:first-child {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #f8fafc;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child h2 {
  background: linear-gradient(135deg, #0284c7 0%, #7e22ce 50%, #e11d48 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child h3 {
  background: linear-gradient(135deg, #0369a1 0%, #4338ca 50%, #6b21a8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child .glowing-pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 6px 22px !important;
  border-radius: 9999px !important;
  background: #eff6ff !important;
  border: 1.5px solid #38bdf8 !important;
  color: #0284c7 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.15) !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child p,
:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child [style*="color: #cbd5e1"] {
  color: #334155 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child h4 {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child [style*="background: rgba(0, 0, 0, 0.35)"] {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child [style*="background: rgba(56, 189, 248, 0.1)"] {
  background: #ffffff !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child [style*="background: rgba(56, 189, 248, 0.08)"] {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-left: 4px solid #0284c7 !important;
  color: #0c4a6e !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child [style*="background: rgba(56, 189, 248, 0.08)"] strong {
  color: #0369a1 !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child [style*="background: rgba(56, 189, 248, 0.08)"] div,
:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child [style*="background: rgba(56, 189, 248, 0.08)"] p {
  color: #0c4a6e !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection > div:first-child [style*="YOUR USERS"] {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1e3a8a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* Self-Funding Budget Model Callout Boxes in Light Mode */
:root[data-theme="light"] .self-funding-callout {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  border-left: 4px solid #059669 !important;
  color: #064e3b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] .self-funding-callout h3 {
  color: #047857 !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] .self-funding-callout p,
:root[data-theme="light"] .self-funding-callout strong {
  color: #064e3b !important;
}

:root[data-theme="light"] .budget-principle-callout {
  background: #ffffff !important;
  border: 1px dashed #34d399 !important;
  color: #065f46 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

:root[data-theme="light"] .budget-principle-callout strong {
  color: #047857 !important;
}

:root[data-theme="light"] .safeguarding-callout {
  background: #faf5ff !important;
  border: 1px solid #e9d5ff !important;
  border-left: 4px solid #9333ea !important;
  color: #3b0764 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] .safeguarding-callout h4 {
  color: #7e22ce !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] .safeguarding-callout p,
:root[data-theme="light"] .safeguarding-callout li,
:root[data-theme="light"] .safeguarding-callout strong {
  color: #4c1d95 !important;
}

/* Light Mode Misconduct Calculator Overrides */
:root[data-theme="light"] .misconduct-calculator-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .calc-intro-text,
:root[data-theme="light"] .calc-note-text {
  color: #334155 !important;
}

:root[data-theme="light"] .calc-intro-text strong,
:root[data-theme="light"] .calc-note-text strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .calc-sliders-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] .calc-scenario-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

:root[data-theme="light"] .calc-scenario-card h4 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] .calc-scenario-card p {
  color: #475569 !important;
}

:root[data-theme="light"] .calc-scenario-card div {
  color: #0f172a !important;
}

:root[data-theme="light"] .calc-scenario-card span {
  color: #64748b !important;
}

:root[data-theme="light"] .calc-metric-card span {
  color: #475569 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .calc-table-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] .calc-table-box h4 {
  color: #0f172a !important;
}

:root[data-theme="light"] .calc-table-box table thead tr {
  border-bottom-color: #e2e8f0 !important;
  color: #475569 !important;
}

:root[data-theme="light"] .calc-tr {
  border-bottom: 1px solid #f1f5f9 !important;
  color: #334155 !important;
}

:root[data-theme="light"] .calc-footer-bar {
  border-top-color: #e2e8f0 !important;
  color: #475569 !important;
}

:root[data-theme="light"] .calc-footer-bar strong {
  color: #0f172a !important;
}

/* ── Light Mode Problem & Guarantee Cards Overrides ── */
:root[data-theme="light"] .honest-guarantee-box {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0c4a6e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] .honest-guarantee-box h3 {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] .honest-guarantee-box p {
  color: #0c4a6e !important;
}

:root[data-theme="light"] .why-invest-box {
  background: #faf5ff !important;
  border: 1px solid #e9d5ff !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] .why-invest-box h3 {
  color: #7e22ce !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] .why-invest-box p,
:root[data-theme="light"] .why-invest-box li {
  color: #334155 !important;
}

:root[data-theme="light"] .problem-card-hepi {
  background: #ffffff !important;
  border: 1px solid #c7d2fe !important;
  border-left: 4px solid #4f46e5 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

:root[data-theme="light"] .problem-card-hepi p,
:root[data-theme="light"] .problem-card-hepi strong,
:root[data-theme="light"] .problem-card-hepi a {
  color: #4338ca !important;
}

:root[data-theme="light"] .problem-card-foi {
  background: #ffffff !important;
  border: 1px solid #fde68a !important;
  border-left: 4px solid #d97706 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

:root[data-theme="light"] .problem-card-foi p,
:root[data-theme="light"] .problem-card-foi li,
:root[data-theme="light"] .problem-card-foi strong,
:root[data-theme="light"] .problem-card-foi a {
  color: #b45309 !important;
}

:root[data-theme="light"] .problem-card-oia {
  background: #ffffff !important;
  border: 1px solid #fecaca !important;
  border-left: 4px solid #dc2626 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

:root[data-theme="light"] .problem-card-oia p,
:root[data-theme="light"] .problem-card-oia strong,
:root[data-theme="light"] .problem-card-oia a {
  color: #b91c1c !important;
}

:root[data-theme="light"] .problem-card-value {
  background: #ffffff !important;
  border: 1px solid #a7f3d0 !important;
  border-left: 4px solid #059669 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

:root[data-theme="light"] .problem-card-value p,
:root[data-theme="light"] .problem-card-value strong {
  color: #047857 !important;
}

/* 3. Charts Grid & Cards */
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="background: rgba(15, 23, 42, 0.85)"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="background: rgba(0,0,0,0.3)"],
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="background: rgba(0, 0, 0, 0.3)"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection svg line {
  stroke: #cbd5e1 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection svg text {
  fill: #475569 !important;
}

/* Figure 1 Legend Box */
:root[data-theme="light"] .figure-legend-box {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-left: 4px solid #0284c7 !important;
  color: #0c4a6e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] .figure-legend-box strong {
  color: #0369a1 !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] .figure-legend-box em {
  color: #0369a1 !important;
}

/* 4 Metrics Box below charts */
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="background: rgba(0,0,0,0.25)"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="background: rgba(0,0,0,0.25)"] span {
  color: #475569 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="color: #a5b4fc"] {
  color: #4338ca !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="color: #38bdf8"] {
  color: #0284c7 !important;
}

/* Model Your Own Institutional Misconduct Costs Box */
:root[data-theme="light"] .model-misconduct-callout {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-left: 4px solid #0284c7 !important;
  color: #0c4a6e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] .model-misconduct-callout strong {
  color: #0369a1 !important;
  font-weight: 800 !important;
}

/* 4. Academic Misconduct Cost Calculator in Light Mode */
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="background: rgba(15, 23, 42, 0.75)"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="background: rgba(0,0,0,0.25)"][style*="grid-template-columns"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection label {
  color: #334155 !important;
}

:root[data-theme="light"] #tabCalcNumStudentsVal,
:root[data-theme="light"] #tabCalcAssignmentsVal {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}

/* Scenario A, B, C cards in Light Mode */
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="SCENARIO A"] h4,
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="SCENARIO B"] h4,
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="SCENARIO C"] h4,
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="SCENARIO A"] div,
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="SCENARIO B"] div,
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="SCENARIO C"] div {
  color: #0f172a !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="SCENARIO A"] {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="SCENARIO B"] {
  background: #faf5ff !important;
  border: 1px solid #e9d5ff !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="SCENARIO C"] {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
}

/* Calculator Output KPI Cards */
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="CURRENT ANNUAL MISCONDUCT COST"] {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="PROJECTED 5-YEAR RISK"] {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="WURKSY AVOIDED COST"] {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
}

/* Calculator Table in Light Mode */
:root[data-theme="light"] #adminUpcomingFeaturesSection table {
  background: #ffffff !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection table thead tr {
  border-bottom: 2px solid #e2e8f0 !important;
  color: #475569 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection table thead th {
  color: #475569 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #tabCalcProjectionsTbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
}

:root[data-theme="light"] #tabCalcProjectionsTbody td {
  color: #1e293b !important;
}

:root[data-theme="light"] #tabCalcOperatingCostVal,
:root[data-theme="light"] #tabCalcNetSavingVal {
  color: #0f172a !important;
}

/* 5. The Problem Section & Callout Cards in Light Mode */
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="THE PROBLEM"] {
  color: #dc2626 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="Honest System Guarantee"] {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="Honest System Guarantee"] h3 {
  color: #0284c7 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="Why Invest in AI Evidence Review"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="Why Invest in AI Evidence Review"] > div > div {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="Why Invest in AI Evidence Review"] strong {
  color: #0f172a !important;
:root[data-theme="light"] #adminUpcomingFeaturesSection [style*="Why Invest in AI Evidence Review"] a {
  color: #2563eb !important;
}

/* ── Light Mode Overrides for Admin Guidelines Page (admin-guidelines.html) ── */
:root[data-theme="light"] .guidelines-container {
  color: #0f172a;
}

:root[data-theme="light"] .guidelines-hero {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .guidelines-hero h1 {
  color: #1e293b !important;
}

:root[data-theme="light"] .guidelines-hero p {
  color: #334155 !important;
}

:root[data-theme="light"] .section-block {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

:root[data-theme="light"] .section-block h2 {
  color: #0f172a !important;
}

:root[data-theme="light"] .section-block p,
:root[data-theme="light"] .section-block li {
  color: #334155 !important;
}

:root[data-theme="light"] .section-block strong {
  color: #0f172a !important;
}

/* Scenario Cards & Containers in Guidelines */
:root[data-theme="light"] .guidelines-container [style*="background: rgba(0,0,0,0.3)"],
:root[data-theme="light"] .guidelines-container [style*="background: rgba(0, 0, 0, 0.3)"],
:root[data-theme="light"] .guidelines-container [style*="background: rgba(0, 0, 0, 0.35)"],
:root[data-theme="light"] .guidelines-container [style*="background: rgba(15, 23, 42, 0.6)"],
:root[data-theme="light"] .guidelines-container [style*="background: rgba(15, 23, 42, 0.7)"],
:root[data-theme="light"] .guidelines-container .scenario-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  color: #1e293b !important;
}

:root[data-theme="light"] .section-header-banner-a,
:root[data-theme="light"] .guidelines-container [style*="SECTION A: IN-PLATFORM"] {
  background: #faf5ff !important;
  border: 1.5px solid #d8b4fe !important;
  box-shadow: 0 2px 8px rgba(107, 33, 168, 0.06) !important;
}

:root[data-theme="light"] .section-header-title-a,
:root[data-theme="light"] .guidelines-container [style*="SECTION A: IN-PLATFORM"] h3,
:root[data-theme="light"] .guidelines-container h3[style*="color: #e9d5ff"] {
  color: #581c87 !important;
  font-weight: 900 !important;
}

:root[data-theme="light"] .section-header-banner-b,
:root[data-theme="light"] .guidelines-container [style*="SECTION B: EXTERNAL"] {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.06) !important;
}

:root[data-theme="light"] .section-header-title-b,
:root[data-theme="light"] .guidelines-container [style*="SECTION B: EXTERNAL"] h3,
:root[data-theme="light"] .guidelines-container h3[style*="color: #fef08a"] {
  color: #78350f !important;
  font-weight: 900 !important;
}

/* AI Auditor Chatbot Guidance Card */
:root[data-theme="light"] .guidelines-container [style*="AI AUDITOR CHATBOT GUIDANCE"] {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
}

:root[data-theme="light"] .guidelines-container [style*="AI AUDITOR CHATBOT GUIDANCE"] h3 {
  color: #0284c7 !important;
}

:root[data-theme="light"] .guidelines-container [style*="AI AUDITOR CHATBOT GUIDANCE"] p,
:root[data-theme="light"] .guidelines-container [style*="AI AUDITOR CHATBOT GUIDANCE"] li {
  color: #0c4a6e !important;
}

:root[data-theme="light"] .guidelines-container [style*="Mandatory AI Auditor Notice"] {
  background: #ffffff !important;
  border: 1px solid #bae6fd !important;
  border-left: 4px solid #0284c7 !important;
  color: #0c4a6e !important;
}

:root[data-theme="light"] .guidelines-container [style*="Mandatory AI Auditor Notice"] strong {
  color: #0369a1 !important;
}

/* Callout Info Boxes */
:root[data-theme="light"] .guidelines-container .callout-box,
:root[data-theme="light"] .guidelines-container [style*="border-left: 4px solid #6366f1"],
:root[data-theme="light"] .guidelines-container [style*="border-left: 4px solid #34d399"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

/* Timeframe Pill Banner */
:root[data-theme="light"] .guidelines-container [style*="Timeframe Parameters Used"] {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

/* Workload Data Table */
:root[data-theme="light"] .guidelines-container .data-table thead tr {
  background: #f8fafc !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

:root[data-theme="light"] .guidelines-container .data-table thead th {
  color: #475569 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .guidelines-container .data-table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
}

:root[data-theme="light"] .guidelines-container .data-table tbody td {
  color: #1e293b !important;
}

:root[data-theme="light"] .guidelines-container .data-table tbody td strong[style*="color: #fff"] {
  color: #0f172a !important;
}

/* Roadmap Feature Cards & Service Boxes */
:root[data-theme="light"] .guidelines-container [style*="Institutional Plagiarism API Integration"],
:root[data-theme="light"] .guidelines-container [style*="Future WurksyAI Managed Human Evidence Review Service"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] .guidelines-container [style*="Institutional Plagiarism API Integration"] h3 {
  color: #0284c7 !important;
}

:root[data-theme="light"] .guidelines-container [style*="Future WurksyAI Managed Human Evidence Review Service"] h3 {
  color: #7e22ce !important;
}

:root[data-theme="light"] .guidelines-container [style*="Partner & Integration Requirements"],
:root[data-theme="light"] .guidelines-container [style*="Privacy, GDPR & Governance Data Protection"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

:root[data-theme="light"] .guidelines-container [style*="Partner & Integration Requirements"] strong,
:root[data-theme="light"] .guidelines-container [style*="Privacy, GDPR & Governance Data Protection"] h4 {
  color: #0f172a !important;
}

:root[data-theme="light"] .guidelines-container [style*="Dev Time:"] {
  color: #475569 !important;
  border-top-color: #e2e8f0 !important;
}

/* ── Light Mode Header Top Action Pills Overrides ── */
:root[data-theme="light"] #adminRedFlagPolicyLink {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #b91c1c !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.08) !important;
}

:root[data-theme="light"] #adminRedFlagPolicyLink:hover {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
  color: #991b1b !important;
}

:root[data-theme="light"] #adminBestPracticesLink {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #adminBestPracticesLink:hover {
  background: #d1fae5 !important;
  border-color: #34d399 !important;
  color: #064e3b !important;
}

:root[data-theme="light"] #btnToggleAdminKeyBar {
  background: #faf5ff !important;
  border: 1px solid #d8b4fe !important;
  color: #6b21a8 !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(107, 33, 168, 0.08) !important;
}

:root[data-theme="light"] #btnToggleAdminKeyBar:hover {
  background: #f3e8ff !important;
  border-color: #c084fc !important;
  color: #581c87 !important;
}

:root[data-theme="light"] #activeAdminKeyPill {
  background: #faf5ff !important;
  border: 1px solid #d8b4fe !important;
  color: #581c87 !important;
}

:root[data-theme="light"] #activeAdminKeyText {
  color: #2563eb !important;
}

:root[data-theme="light"] #adminKeyBarContainer {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] #adminKeyBarContainer span {
  color: #6b21a8 !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] #adminKeyFilterInput {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #adminKeyFilterInput::placeholder {
  color: #64748b !important;
}

:root[data-theme="light"] #adminKeyFilterInput:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15) !important;
}

:root[data-theme="light"] #btnCloseAdminKeyBar {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

:root[data-theme="light"] #btnCloseAdminKeyBar:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] #adminCloseTopPanelBtn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

/* Table Pagination Light Mode Overrides */
:root[data-theme="light"] #topPaginationGroup {
  border-left-color: #cbd5e1 !important;
}

:root[data-theme="light"] #sessionPageInfo {
  color: #1e293b !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #sessionPrev,
:root[data-theme="light"] #sessionNext {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #sessionPrev:hover:not(:disabled),
:root[data-theme="light"] #sessionNext:hover:not(:disabled) {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  color: #1e3a8a !important;
}

:root[data-theme="light"] #sessionPrev:disabled,
:root[data-theme="light"] #sessionNext:disabled {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  opacity: 0.6 !important;
}

:root[data-theme="light"] #adminCloseTopPanelBtn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* ── Light Mode LMS Provider Buttons & Simulation Container Overrides ── */
:root[data-theme="light"] #lmsSimulationContainer {
  background: #ffffff !important;
  border: 1px solid #fde68a !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #lmsSimulationContainer h3 {
  color: #b45309 !important;
  font-weight: 800 !important;
}

/* Base LMS Provider Buttons */
.lms-provider-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color, #333);
  color: #ffffff;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lms-provider-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.5);
  color: #818cf8;
}

.lms-provider-btn.selected {
  background: rgba(99, 102, 241, 0.25);
  border-color: #6366f1;
  color: #ffffff;
}

:root[data-theme="light"] .lms-provider-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] .lms-provider-btn:hover {
  background: #f8fafc !important;
  border-color: #2563eb !important;
  color: #1d4ed8 !important;
}

:root[data-theme="light"] .lms-provider-btn.selected,
:root[data-theme="light"] .lms-provider-btn:active {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

:root[data-theme="light"] #lmsSyncProgressStatus {
  color: #0f172a !important;
}

:root[data-theme="light"] #lmsRosterDisplayStep > div {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] #vRosterHeading,
:root[data-theme="light"] #lmsSyncModuleName,
:root[data-theme="light"] #lmsSyncLecturerName,
:root[data-theme="light"] #lmsDetectedCoLecturers,
:root[data-theme="light"] #vRosterSelectedSummaryText {
  color: #0f172a !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #btnToggleRosterSelectionGrid {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #btnToggleRosterSelectionGrid:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}

:root[data-theme="light"] #vRosterGridExpandableArea [style*="max-height: 150px"] {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

/* Delivery Summary Banner Base & Light Mode */
#deliverySummaryBanner {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #f8fafc;
}

#btnChangeDeliveryMethod {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:root[data-theme="light"] #deliverySummaryBanner {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1e3a8a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #deliverySummaryMethod {
  color: #1e3a8a !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] #deliverySummaryLms {
  color: #1d4ed8 !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] #btnChangeDeliveryMethod {
  background: #ffffff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] #btnChangeDeliveryMethod:hover {
  background: #dbeafe !important;
  color: #1e3a8a !important;
}

/* ── Light Mode Student Template Designer Overrides ── */
:root[data-theme="light"] #platformTemplateSection {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

:root[data-theme="light"] #platformTemplateSection span[style*="color: #fff"] {
  color: #0f172a !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #platformTemplateSection p.muted {
  color: #475569 !important;
}

:root[data-theme="light"] #btnGenerateStudentTemplate {
  background: #eff6ff !important;
  border: 1px solid #c7d2fe !important;
  color: #3730a3 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Light Mode Secondary & Utility Buttons Overrides */
:root[data-theme="light"] #vRosterSelectAllBtn,
:root[data-theme="light"] #toggleSelectAllStudentsBtn {
  background: #eff6ff !important;
  border: 1px solid #c7d2fe !important;
  color: #3730a3 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #vRosterClearAllBtn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] #vRosterSelectAllBtn:hover,
:root[data-theme="light"] #toggleSelectAllStudentsBtn:hover {
  background: #e0e7ff !important;
  border-color: #818cf8 !important;
  color: #1e1b4b !important;
}

:root[data-theme="light"] #vRosterClearAllBtn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] #btnPrefillLmsDetails {
  background: #f0fdf4 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #btnPrefillLmsDetails:hover {
  background: #dcfce7 !important;
  border-color: #34d399 !important;
  color: #064e3b !important;
}

:root[data-theme="light"] #btnSelectLinkDelivery {
  background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

:root[data-theme="light"] #btnSelectLmsDelivery {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
}

:root[data-theme="light"] #btnGenerateStudentTemplate:hover {
  background: #e0e7ff !important;
  border-color: #818cf8 !important;
  color: #1e1b4b !important;
}

:root[data-theme="light"] #templateFileLabel {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] #templateFileLabel:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] #interactiveTemplateEditorContainer {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] #interactiveTemplateEditorContainer div[style*="font-weight: 700; color: #fff"] {
  color: #0f172a !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] #btnPreviewTemplateModal {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] #btnPreviewTemplateModal:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

:root[data-theme="light"] #interactiveTemplateEditorContainer [style*="background: rgba(0,0,0,0.3)"] {
  background: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
  border-bottom: none !important;
}

:root[data-theme="light"] .tmpl-fmt-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] .tmpl-fmt-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #1d4ed8 !important;
}

:root[data-theme="light"] #templateEditableArea {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-top: none !important;
  color: #0f172a !important;
}

/* Glowing Cyan Pill Badge (Enterprise Security / Institutional Model) */
.glowing-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 18px;
  border-radius: 9999px;
  background: rgba(11, 19, 41, 0.85);
  border: 1.5px solid rgba(56, 189, 248, 0.75);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45), inset 0 0 10px rgba(56, 189, 248, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.glowing-pill-badge:hover {
  border-color: rgba(56, 189, 248, 0.95);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.65), inset 0 0 14px rgba(56, 189, 248, 0.3);
  transform: translateY(-1px);
}