/* ═══════════════════════════════════════════════════════════
   HCM AIR / ELLA – Programme Hub
   Design inspired by RLAM purple professional template
   ═══════════════════════════════════════════════════════════ */

:root {
  --page-max: 1260px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, 0.12);
  --ring: 0 0 0 3px rgba(79, 56, 168, 0.25);

  /* Core palette (purple) */
  --purple-deep: #2f0438;
  --purple-mid: #4a0a5b;
  --purple-bright: #7a1a86;
  --purple-light: #a12aa6;
  --purple-glow: rgba(74, 10, 91, 0.12);
  --teal: #007a74;
  --teal-light: #00a89d;

  /* Light mode (default) */
  --bg: #ffffff;
  --bg-page: #f5f7fb;
  --bg-card: #ffffff;
  --text: #1f1a24;
  --text-muted: rgba(31, 26, 36, 0.74);
  --text-dim: rgba(31, 26, 36, 0.54);
  --border: rgba(31, 26, 36, 0.14);
  --border-hover: rgba(74, 10, 91, 0.22);

  --sidebar-width: 220px;
}

/* Dark mode overrides */
body[data-theme="dark"] {
  --bg: #111827;
  --bg-page: #0f1118;
  --bg-card: #1f2937;
  --text: #f0eff2;
  --text-muted: rgba(240, 239, 242, 0.72);
  --text-dim: rgba(240, 239, 242, 0.48);
  --border: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(161, 42, 166, 0.4);
  --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, 0.4);
}

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

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-page);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 10px; }

/* ═══════════════════════════════════════
   DATE INPUTS (consistent across all modals)
   ═══════════════════════════════════════ */
input[type="date"], input[type="number"] {
  font-family: inherit; font-size: .85rem; padding: 6px 10px;
  border: 1px solid var(--border, #ccc); border-radius: 8px;
  background: var(--bg-page, #fff); color: var(--text, #222);
  transition: border-color .15s, box-shadow .15s;
  width: 100%; box-sizing: border-box;
}
input[type="date"]:focus, input[type="number"]:focus { border-color: var(--purple-mid, #7a1a86); box-shadow: 0 0 0 3px rgba(122,26,134,.12); outline: none; }
input[type="date"]:hover, input[type="number"]:hover { border-color: var(--purple-light, #a855f7); }
body[data-theme="dark"] input[type="date"], body[data-theme="dark"] input[type="number"] { background: var(--bg-card, #2a2a3d); color: var(--text, #e0e0e0); border-color: var(--border, #444); }
.date-field-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
.date-field-wrap input[type="date"] { flex: 1; padding-right: 58px; }
.date-field-btns { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; }
.date-field-btn {
  border: none; background: none; cursor: pointer; padding: 2px 5px;
  font-size: .65rem; font-weight: 700; border-radius: 4px;
  color: var(--text-dim, #888); transition: all .15s;
}
.date-field-btn:hover { background: var(--purple-glow, rgba(122,26,134,.08)); color: var(--purple-mid, #7a1a86); }

/* ═══════════════════════════════════════
   TOPBAR (Purple header – RLAM style)
   ═══════════════════════════════════════ */
.topbar {
  background: var(--purple-mid);
  color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: fixed; top: 0; left: 0; right: 0; z-index: 8500;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 20px;
  max-width: var(--page-max); margin: 0 auto;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ella-logo-btn {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
}
.ella-logo-btn:hover .ella-logo {
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}
.ella-logo-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}
.ella-logo {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  background: conic-gradient(from 200deg,#2ea685,#48a9e5 100deg,#7b4fb0 180deg,#ed79cf 260deg,#2ea685 360deg);
  flex-shrink: 0;
}
.ella-logo svg { display: block; width: 100%; height: 100%; animation: ellaOrbSpin 20s linear infinite; }
@keyframes ellaOrbSpin {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(1.06); }
  50%  { transform: rotate(180deg) scale(1); }
  75%  { transform: rotate(270deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}
.ella-logo .etr { stroke: #fff; stroke-width: 2.2; fill: none; opacity: .35; }
.ella-logo .esg { stroke: #fff; stroke-width: 3; fill: none; stroke-dasharray: 8 18; stroke-linecap: round; opacity: 0; }
.ella-logo .esg1 { animation: elSigPass 3s ease-in-out infinite; }
.ella-logo .esg2 { animation: elSigPass 3s ease-in-out infinite 1s; }
.ella-logo .esg3 { animation: elSigPass 3s ease-in-out infinite 2s; }
@keyframes elSigPass { 0%{stroke-dashoffset:26;opacity:0}8%{opacity:.95}33%{stroke-dashoffset:0;opacity:.95}40%{opacity:0}100%{opacity:0} }
.ella-logo .eat { fill: #fff; opacity: .85; }
.ella-logo .eat1 { animation: elAtomFire 3s ease-in-out infinite .5s; }
.ella-logo .eat2 { animation: elAtomFire 3s ease-in-out infinite 1.5s; }
.ella-logo .eat3 { animation: elAtomFire 3s ease-in-out infinite 2.5s; }
@keyframes elAtomFire { 0%,25%,100%{filter:none;opacity:.85}12%{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px rgba(255,255,255,.5));opacity:1} }
.topbar-title {
  font-weight: 700; font-size: 1.1rem; letter-spacing: 0.2px;
  white-space: nowrap; color: rgba(255,255,255,0.95);
}
.topbar-subtitle {
  color: rgba(255,255,255,0.6); font-size: 0.82rem;
}

/* Theme toggle – pill style */
.theme-toggle {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  padding: 6px 12px; border-radius: var(--radius-pill);
  font: inherit; cursor: pointer; user-select: none;
  font-size: 0.78rem; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.18s, border-color 0.18s;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.42);
}

/* Admin pill */
.admin-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: rgba(0,122,116,0.2); border: 1px solid rgba(0,122,116,0.4);
  color: #00c9b7; font-size: 0.78rem; font-weight: 600;
}
.admin-pill.hidden { display: none; }

.admin-env-block {
  margin: 14px 0 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.admin-env-block label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}
.admin-env-hint {
  font-size: 0.72rem !important;
  margin: 0 0 8px !important;
  line-height: 1.45;
}
.admin-env-hint code {
  font-size: 0.85em;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(74, 10, 91, 0.08);
}
body[data-theme="dark"] .admin-env-hint code {
  background: rgba(255, 255, 255, 0.08);
}
#admin-openai-key-save {
  margin-top: 10px;
}

/* Admin modals */
.admin-modal {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.admin-modal.hidden { display: none; }
.admin-modal-backdrop {
  position: absolute; inset: 0; background: rgba(15, 10, 20, 0.55);
  backdrop-filter: blur(4px);
}
.admin-modal-panel {
  position: relative; z-index: 1;
  width: min(420px, 100%);
  max-height: 90vh; overflow: auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 22px 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
}
.admin-modal-panel--wide { width: min(640px, 100%); }
.admin-modal-panel--xxl { width: min(1040px, 96vw); }
.admin-modal-panel--health { width: min(1500px, 96%); }
.admin-modal-panel h2 { margin: 0 0 10px; font-size: 1.15rem; }
.admin-modal-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
  justify-content: flex-end;
}
.admin-input {
  width: 100%; margin-top: 12px; padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-page); color: var(--text); font: inherit;
}
.form-error { color: #dc2626; font-size: 0.82rem; margin-top: 8px; }
.form-error.hidden { display: none; }
.btn-secondary {
  appearance: none; padding: 8px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-page);
  color: var(--text); font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--purple-bright); background: var(--purple-glow); }
.btn-danger {
  appearance: none; padding: 8px 18px; border-radius: var(--radius-pill);
  border: 1px solid rgba(220, 38, 38, 0.45); background: rgba(220, 38, 38, 0.08);
  color: #dc2626; font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.btn-danger:hover { background: rgba(220, 38, 38, 0.15); }

.admin-plan-wrap {
  margin-top: 16px; padding: 16px;
  border: 1px dashed var(--border); border-radius: var(--radius-md);
  background: rgba(74, 10, 91, 0.04);
}
body[data-theme="dark"] .admin-plan-wrap { background: rgba(255,255,255,0.03); }
.admin-plan-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.admin-plan-row label { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--text-dim); }
.admin-plan-row input[type="number"], .admin-plan-row input[type="date"], .admin-plan-row input[type="text"] {
  min-width: 120px; padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-page); color: var(--text); font: inherit;
}
.admin-plan-table-wrap { overflow: auto; max-width: 100%; }
.admin-plan-table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
}
.admin-plan-table th, .admin-plan-table td {
  border: 1px solid var(--border); padding: 6px 8px; text-align: left;
}
.admin-plan-table th { background: var(--bg-page); color: var(--text-dim); font-weight: 600; }
.admin-plan-table input { width: 100%; min-width: 0; box-sizing: border-box; padding: 4px 6px; font: inherit; }
.admin-plan-hint { font-size: 0.72rem; color: var(--text-muted); margin: 8px 0 0; }

/* Plan: view vs edit (admin) */
.chip.chip-plan-view { background: rgba(0, 122, 116, 0.12); border: 1px solid rgba(0, 122, 116, 0.28); }
.chip.chip-plan-edit { background: rgba(123, 31, 162, 0.12); border: 1px solid rgba(123, 31, 162, 0.28); }
body[data-theme="dark"] .chip.chip-plan-view { background: rgba(0, 200, 180, 0.1); }
body[data-theme="dark"] .chip.chip-plan-edit { background: rgba(200, 120, 255, 0.1); }

.plan-mode-banner--view {
  margin-top: 16px;
  border: 1px solid rgba(123, 31, 162, 0.22);
  background: linear-gradient(135deg, rgba(59, 6, 71, 0.06) 0%, rgba(0, 122, 116, 0.05) 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
body[data-theme="dark"] .plan-mode-banner--view {
  background: linear-gradient(135deg, rgba(40, 20, 50, 0.5) 0%, rgba(0, 80, 80, 0.15) 100%);
}
.plan-mode-banner-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px;
}
.plan-mode-lead { margin: 4px 0 0; font-size: 0.88rem; line-height: 1.4; color: var(--text-muted); max-width: 52ch; }
.plan-mode-copy .kicker { display: block; }

.plan-editor-card { margin-top: 0; }
.plan-editor-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.plan-editor-card .kicker { margin: 0; }
.plan-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plan-editor-dates { margin-top: 0; margin-bottom: 0; }

/* Primary plan actions */
.btn-plan {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 20px; border-radius: 999px; font: inherit; font-weight: 600;
  font-size: 0.85rem; cursor: pointer; transition: transform 0.12s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-plan-text { line-height: 1.1; }
.btn-plan-icon { font-size: 1.05em; line-height: 1; }
.btn-plan--primary {
  color: #fff;
  background: linear-gradient(120deg, #3b0647, #5c1d6e 45%, #007a74);
  box-shadow: 0 4px 14px rgba(59, 6, 71, 0.35);
}
.btn-plan--primary:hover {
  box-shadow: 0 6px 22px rgba(59, 6, 71, 0.45);
  transform: translateY(-1px);
}
.btn-plan--accent {
  color: #fff;
  background: linear-gradient(120deg, #007a74, #0d9488, #0ea5a0);
  box-shadow: 0 4px 14px rgba(0, 122, 116, 0.35);
}
.btn-plan--accent:hover {
  box-shadow: 0 6px 22px rgba(0, 122, 116, 0.45);
  transform: translateY(-1px);
}
.btn-plan--ghost {
  color: var(--text);
  background: var(--bg-page);
  border: 1px solid var(--border);
  min-height: 38px; font-weight: 500;
}
.btn-plan--ghost:hover { border-color: var(--purple-bright); background: var(--purple-glow); }
.btn-plan:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.gantt-bar.gantt-bar--admin:active { cursor: grabbing; }
.gantt-bar.gantt-bar--admin::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  cursor: ew-resize; border-radius: 6px 0 0 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.25), transparent);
}
.gantt-bar.gantt-bar--admin::before {
  content: "";
  position: absolute; right: 0; top: 0; bottom: 0; width: 12px;
  cursor: ew-resize; border-radius: 0 6px 6px 0;
  background: linear-gradient(270deg, rgba(255,255,255,0.25), transparent);
}

.log-card-admin {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.log-admin-btn {
  appearance: none; padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--purple-bright); background: rgba(74,10,91,0.06);
  color: var(--purple-bright); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; font: inherit; transition: all 0.18s;
}
.log-admin-btn:hover {
  background: var(--purple-glow); border-color: var(--purple-mid);
  color: var(--purple-mid);
}
.log-section-add {
  margin-left: auto; align-self: center;
}

.admin-log-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-top: 14px;
}
.admin-log-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.78rem; color: var(--text-dim);
  min-width: 0;
}
.admin-log-form label.field-wide { grid-column: 1 / -1; }
.admin-log-form input, .admin-log-form textarea, .admin-log-form select {
  padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-page); color: var(--text); font: inherit;
  width: 100%; box-sizing: border-box;
}
.admin-log-form textarea { min-height: 72px; resize: vertical; }
.admin-log-form textarea[data-autogrow="1"] {
  min-height: 96px;
  max-height: 60vh;
  resize: vertical;
  overflow: auto;
  line-height: 1.5;
  font-family: inherit;
  field-sizing: content;
}
@media (max-width: 760px) {
  .admin-log-form { grid-template-columns: 1fr; }
}

.qa-admin-edit {
  margin-top: 12px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-page);
}
.qa-admin-edit label { display: block; font-size: 0.72rem; color: var(--text-dim); margin-bottom: 4px; }
.qa-admin-edit textarea, .qa-admin-edit input[type="text"] {
  width: 100%; margin-bottom: 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font: inherit;
}
.qa-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

body.has-topbar .app { margin-top: 60px; }
body.has-topbar .sidebar { top: 60px; height: calc(100vh - 60px); }

/* ═══════════════════════════════════════
   SIDEBAR NAV
   ═══════════════════════════════════════ */
.sidebar {
  position: fixed; top: 0; left: 0; z-index: 8000;
  width: var(--sidebar-width); height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 24px rgba(0,0,0,0.06);
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
body[data-theme="dark"] .sidebar { background: #1a1f2e; box-shadow: 4px 0 24px rgba(0,0,0,0.3); }
.sidebar.collapsed { width: 0; border-right-color: transparent; pointer-events: none; }

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sidebar-title {
  font-weight: 700; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-dim); white-space: nowrap;
}
.sidebar-toggle {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem;
  transition: all 0.18s;
}
.sidebar-toggle:hover { border-color: var(--purple-bright); color: var(--purple-bright); }

.sidebar-nav {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 8px;
  overflow-y: auto; flex: 1;
}
.nav-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid transparent; background: transparent; color: var(--text-muted);
  padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.18s; font-weight: 500; font-size: 0.84rem;
  white-space: nowrap; overflow: hidden; text-decoration: none;
}
.nav-btn:hover {
  background: var(--purple-glow); border-color: var(--border);
  color: var(--text);
}
.nav-btn.active {
  background: rgba(74, 10, 91, 0.08); color: var(--purple-mid);
  border-color: rgba(74, 10, 91, 0.18); font-weight: 600;
}
body[data-theme="dark"] .nav-btn.active {
  background: rgba(161,42,166,0.15); color: #d99fdd;
  border-color: rgba(161,42,166,0.3);
}
.nav-icon { font-size: 1.05rem; flex-shrink: 0; width: 22px; text-align: center; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
/* Sub-item: indented child shown directly beneath its parent nav entry. */
.nav-btn.nav-sub { padding-left: 28px; font-size: 0.8rem; opacity: 0.92; }
.nav-btn.nav-sub .nav-icon { font-size: 0.92rem; }

/* ── Nav groups (collapsible sections) ── */
.nav-group { margin-bottom: 4px; }
.nav-group-header {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; border: none; background: transparent;
  color: var(--text-dim); cursor: pointer;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: color 0.18s;
}
.nav-group-header:hover { color: var(--text); }
.nav-group-chevron {
  font-size: 0.55rem; transition: transform 0.2s ease; flex-shrink: 0;
}
.nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 1px; }
.nav-group.collapsed .nav-group-items { display: none; }
.nav-group-items .nav-btn { padding-left: 20px; font-size: 0.82rem; }
.nav-group-items .nav-group { margin-bottom: 2px; }
.nav-group-items .nav-group .nav-group-header { padding: 6px 12px 6px 22px; font-size: 0.65rem; text-align: left; justify-content: flex-start; }
.nav-group-items .nav-group .nav-group-items .nav-btn {
  padding: 5px 8px 5px 28px; font-size: 0.76rem; text-align: left;
  white-space: normal; line-height: 1.3; gap: 6px; align-items: flex-start;
}
.nav-group-items .nav-group .nav-group-items .nav-btn .nav-icon { flex-shrink: 0; font-size: 0.6rem; margin-top: 2px; }
.nav-group-items .nav-group .nav-group-items .nav-btn .nav-label { text-align: left; word-break: break-word; }
.nav-group-divider { height: 1px; background: var(--border); margin: 6px 12px; opacity: 0.5; }

.sidebar-expand {
  position: fixed; top: 72px; left: 10px; z-index: 8001;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-dim); cursor: pointer; display: none;
  align-items: center; justify-content: center; font-size: 0.75rem;
  box-shadow: var(--shadow-1);
}

/* ═══════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════ */
.app {
  padding: 24px 20px; transition: margin-left 0.3s ease;
  margin-left: var(--sidebar-width);
  max-width: none;
  flex: 1; display: flex; flex-direction: column;
  min-height: 0;
}
.app.no-sidebar { margin-left: 0; }

.tab-content { display: none; animation: fadeUp 0.35s ease; }
.tab-content.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════
   HERO SECTIONS (gradient banners)
   ═══════════════════════════════════════ */
.hero {
  background: linear-gradient(100deg, var(--purple-deep), var(--purple-light));
  color: #ffffff;
  border-radius: 18px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.hero-inner {
  padding: 22px 24px;
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
}
.hero-inner > div:first-child { flex: 1; min-width: 0; }
.hero h1 {
  margin: 0 0 4px; font-size: clamp(18px, 2.6vw, 26px); letter-spacing: -0.2px;
}
.hero p { margin: 0; color: rgba(255,255,255,0.8); font-size: 0.88rem; }
.hero-card {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.12);
  border-radius: 18px; padding: 16px; display: grid; gap: 10px;
  width: fit-content; flex-shrink: 1;
}

/* Kicker labels */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--purple-glow);
  padding: 6px 10px; border-radius: var(--radius-pill);
  font-size: 12px; margin-bottom: 10px; color: var(--text-muted);
}

/* Chips / pills */
.chip {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.95);
  padding: 5px 10px; border-radius: var(--radius-pill); font-size: 13px;
}
.chipRow { display: flex; gap: 8px; flex-wrap: wrap; }

/* ═══════════════════════════════════════
   CARDS (white, rounded, shadow)
   ═══════════════════════════════════════ */
.card {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-1);
  overflow: hidden; margin-bottom: 14px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  transform: translateZ(0);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 60px rgba(31, 26, 36, 0.14);
    border-color: var(--border-hover);
  }
  body[data-theme="dark"] .card:hover {
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4);
  }
}
.pad { padding: 14px; }
.card h2 { margin: 0 0 10px; letter-spacing: -0.1px; }
.card h3 { margin: 0 0 8px; letter-spacing: -0.1px; }

/* Section headers */
.section-header { margin-bottom: 10px; }
.section-header h2 {
  font-size: 1.4rem; font-weight: 700; margin: 0 0 4px;
  color: var(--purple-mid); letter-spacing: -0.2px;
}
body[data-theme="dark"] .section-header h2 { color: #d99fdd; }
.section-header p { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

/* Meta row */
.meta {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  color: var(--text-dim); font-size: 13px;
}

/* ═══════════════════════════════════════
   RAG BADGES
   ═══════════════════════════════════════ */
.rag-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.75rem; text-transform: uppercase;
}
.rag-R { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #dc2626; }
.rag-A { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: #d97706; }
.rag-G { background: rgba(0,122,116,0.12); border: 1px solid rgba(0,122,116,0.3); color: var(--teal); }
body[data-theme="dark"] .rag-R { color: #f87171; background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.45); }
body[data-theme="dark"] .rag-A { color: #fbbf24; background: rgba(245,158,11,0.2); border-color: rgba(245,158,11,0.45); }
body[data-theme="dark"] .rag-G { color: #34d399; background: rgba(0,122,116,0.2); border-color: rgba(0,122,116,0.45); }

/* ═══════════════════════════════════════
   CONTENT CARDS (static pages)
   ═══════════════════════════════════════ */
.content-card { margin-top: 8px !important; }
.content-card[style*="margin-top:20px"] { margin-top: 8px !important; }
.content-card[style*="margin-top:12px"] { margin-top: 8px !important; }
.content-card[style*="margin-top:24px"] { margin-top: 12px !important; }
.content-card[style*="padding:1.5rem"] { padding: 1rem 1.25rem !important; }
.content-card ul, .content-card ol { margin: 0.5em 0 0.5em 1.4em; padding: 0; }
.content-card li { margin-bottom: 0.35rem; font-size: 0.88rem; line-height: 1.55; }
.content-card ul[style*="list-style:none"] { margin-left: 0; }

/* ═══════════════════════════════════════
   UI EMBEDDING
   ═══════════════════════════════════════ */
.embed-steps-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px;
}
@media (max-width: 900px) { .embed-steps-grid { grid-template-columns: 1fr; } }
.embed-step { padding: 1.25rem 1.25rem 1.25rem 3.5rem; position: relative; }
.embed-step h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.embed-step-num {
  position: absolute; top: 12px; left: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--purple-mid, #7a1a86); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.82rem;
}
.embed-step-file {
  font-size: 0.78rem; color: var(--text-dim); font-family: monospace;
  margin: 0 0 0.5rem; word-break: break-all;
}
.embed-code {
  background: var(--bg-surface, #f4f4f6); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 0.78rem; overflow-x: auto; margin: 0.5rem 0;
}
body[data-theme="dark"] .embed-code { background: #1a1f2e; }
.embed-diagram {
  background: var(--bg-surface, #f4f4f6); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: 0.8rem; overflow-x: auto; margin: 0.75rem 0;
}
body[data-theme="dark"] .embed-diagram { background: #1a1f2e; }
.embed-auth-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.5rem;
}
.embed-auth-table th, .embed-auth-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.embed-auth-table th {
  background: var(--bg-surface, #f4f4f6); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
body[data-theme="dark"] .embed-auth-table th { background: #1a1f2e; }
.embed-checklist { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .embed-checklist { grid-template-columns: 1fr; } }
.embed-check-group h3 { margin: 0 0 0.5rem; font-size: 0.9rem; }
.embed-check-group ul {
  list-style: none; margin: 0; padding: 0;
}
.embed-check-group li {
  padding: 4px 0 4px 22px; position: relative; font-size: 0.85rem;
}
.embed-check-group li::before {
  content: "\2610"; position: absolute; left: 0; color: var(--text-dim);
}

/* ═══════════════════════════════════════
   OPERATING MODEL ANALYSIS (compact cards)
   ═══════════════════════════════════════ */
.om-wrap { margin-top: 0.5rem; }
.om-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
.om-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px 3px; font-size: 0.72rem; line-height: 1.3; }
.om-pillar-th {
  text-align: center; padding: 8px 6px; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, #4a0a5b 0%, #6b1a7a 55%, #007a74 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.om-pillar-th + .om-pillar-th { border-left: 1px solid rgba(255,255,255,0.2); }
.om-pillar-td { padding: 0; vertical-align: top; width: 20%; }
.om-td-empty { background: transparent; }
.om-cell {
  padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-card); display: flex; flex-direction: column; gap: 4px;
  min-height: 3.5rem; position: relative; transition: box-shadow 0.15s;
}
.om-cell:hover { box-shadow: var(--shadow-1); }
.om-cell--green { border-left: 3px solid var(--teal); }
.om-cell--amber { border-left: 3px solid #d97706; }
.om-cell--red   { border-left: 3px solid #dc2626; }
.om-cell--neutral { border-left: 3px solid var(--border); }
.om-cell-rag { position: absolute; top: 6px; right: 6px; }
.om-rag-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.2rem; height: 1.2rem; font-size: 0.6rem; font-weight: 800; color: #fff;
  border-radius: 4px; line-height: 1;
}
.om-rag-green { background: var(--teal); }
.om-rag-amber { background: #d97706; }
.om-rag-red { background: #dc2626; }
.om-cell-act { font-weight: 700; font-size: 0.7rem; color: var(--text); padding-right: 1.5rem; }
.om-cell-headline { font-size: 0.65rem; color: var(--text-dim); line-height: 1.25; }
.om-cell-actions { display: flex; gap: 4px; margin-top: 2px; }
.om-detail-pill, .om-edit-pill {
  font-size: 0.6rem; padding: 1px 8px; border-radius: 8px; cursor: pointer;
  font-weight: 600; border: 1px solid var(--border); background: var(--bg-surface, #f4f4f6);
  color: var(--text-dim); transition: all 0.15s;
}
.om-detail-pill:hover { background: rgba(74,10,91,0.1); color: var(--purple-mid); border-color: rgba(74,10,91,0.3); }
.om-edit-pill:hover { background: rgba(0,122,116,0.1); color: var(--teal); border-color: rgba(0,122,116,0.3); }
body[data-theme="dark"] .om-detail-pill, body[data-theme="dark"] .om-edit-pill { background: #1a1f2e; }
.om-modal-rationale { margin-top: 8px; padding: 10px 12px; background: var(--bg-surface, #f4f4f6); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; }
body[data-theme="dark"] .om-modal-rationale { background: #1a1f2e; }
.om-legend { margin-top: 8px; font-size: 0.72rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; justify-content: center; }
#sec-operating-model .hero { margin-bottom: 6px; border-radius: 12px; }
#sec-operating-model .hero-inner { padding: 12px 16px; gap: 10px; }
#sec-operating-model .hero p { font-size: 0.82rem; }

/* ═══════════════════════════════════════
   STATIC PAGE EDITOR
   ═══════════════════════════════════════ */
.sp-editor {
  width: 100%; min-height: 500px; padding: 12px; font-family: monospace;
  font-size: 0.82rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-surface, #f4f4f6); color: var(--text);
  resize: vertical; tab-size: 2;
}
body[data-theme="dark"] .sp-editor { background: #1a1f2e; }

/* ═══════════════════════════════════════
   AUTHORISATION
   ═══════════════════════════════════════ */
.authz-cards-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px;
}
@media (max-width: 900px) { .authz-cards-grid { grid-template-columns: 1fr; } }
.authz-card { padding: 1.25rem; position: relative; }
.authz-card h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.authz-card ul { margin: 0; padding: 0 0 0 1.2rem; }
.authz-card li { margin-bottom: 0.35rem; font-size: 0.88rem; }
.authz-card-tag {
  position: absolute; top: 12px; right: 14px;
  background: rgba(0,122,116,0.15); color: var(--teal);
  border: 1px solid rgba(0,122,116,0.3);
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 8px; border-radius: 4px;
}
.authz-flow {
  display: flex; align-items: stretch; gap: 16px;
}
@media (max-width: 700px) { .authz-flow { flex-direction: column; } .authz-flow-arrow { transform: rotate(90deg); } }
.authz-flow-box {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1rem; background: var(--bg-surface, #f4f4f6);
}
body[data-theme="dark"] .authz-flow-box { background: #1a1f2e; }
.authz-flow-box h4 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.authz-flow-box ul { margin: 0 0 0.5rem; padding: 0 0 0 1.2rem; font-size: 0.85rem; }
.authz-flow-box li { margin-bottom: 0.25rem; }
.authz-flow-note { font-size: 0.8rem; color: var(--text-dim); margin: 0; }
.authz-flow-box--rl { border-top: 3px solid var(--purple-mid, #7a1a86); }
.authz-flow-box--zip { border-top: 3px solid var(--teal); }
.authz-flow-arrow {
  display: flex; align-items: center; font-size: 1.8rem;
  color: var(--text-dim); flex-shrink: 0;
}
.authz-steps { margin: 0.5rem 0 0 1.2rem; padding: 0; }
.authz-steps li { margin-bottom: 0.4rem; font-size: 0.9rem; }

/* ═══════════════════════════════════════
   VIDEOS
   ═══════════════════════════════════════ */
.video-list { display: flex; flex-direction: column; gap: 10px; }
.video-card { padding: 14px 18px; }
.video-card-body {
  display: flex; align-items: center; gap: 14px;
}
.video-card-icon { font-size: 1.6rem; flex-shrink: 0; }
.video-card-info { flex: 1; min-width: 0; }
.video-card-title {
  font-weight: 600; font-size: 0.95rem;
  color: var(--purple-mid); text-decoration: none;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.video-card-title:hover { text-decoration: underline; }
.video-card-date { font-size: 0.78rem; color: var(--text-dim); }
.video-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.video-launch-btn { font-size: 0.82rem; padding: 5px 14px; }

/* ═══════════════════════════════════════
   SCOPE
   ═══════════════════════════════════════ */
/* Bleed to edges of main content (matches .app horizontal padding) */
#sec-scope .scope-page {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 640px) {
  #sec-scope .scope-page {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}
.scope-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 20px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
@media (max-width: 800px) {
  .scope-grid { grid-template-columns: 1fr; }
}
.scope-section { margin-bottom: 8px; }
.scope-section-header {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--purple-accent, #7a1a86);
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.scope-section-header:hover { opacity: 0.85; }
.scope-section-chevron {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.scope-section.collapsed .scope-section-chevron { transform: rotate(-90deg); }
.scope-section.collapsed .scope-section-body { display: none; }
body[data-theme="dark"] .scope-section-header { color: #d99fdd; }
.scope-panel {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.scope-panel--in { border-top: 3px solid var(--teal); }
.scope-panel--out { border-top: 3px solid #dc2626; }
.scope-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--purple-mid);
  letter-spacing: -0.02em;
}
body[data-theme="dark"] .scope-panel-title { color: #d99fdd; }
.scope-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.scope-title-icon--in {
  background: rgba(0, 122, 116, 0.2);
  color: var(--teal);
  border: 1px solid rgba(0, 122, 116, 0.35);
}
.scope-title-icon--out {
  background: rgba(220, 38, 38, 0.14);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.35);
}
body[data-theme="dark"] .scope-title-icon--in {
  background: rgba(0, 201, 183, 0.15);
  color: #5eead4;
  border-color: rgba(94, 234, 212, 0.35);
}
body[data-theme="dark"] .scope-title-icon--out {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.35);
}

/* Hero chips — match in/out icons */
.chip-scope-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  margin-right: 6px;
}
.chip-scope-in .chip-scope-glyph {
  background: rgba(255, 255, 255, 0.22);
  color: #a7f3d0;
}
.chip-scope-out .chip-scope-glyph {
  background: rgba(255, 255, 255, 0.18);
  color: #fecaca;
}

.scope-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 0.93rem;
}
.scope-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0.45em;
}
.scope-list-item:last-child { margin-bottom: 0; }
.scope-li-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.12em;
}
.scope-li-icon--in {
  background: rgba(0, 122, 116, 0.12);
  color: var(--teal);
  border: 1px solid rgba(0, 122, 116, 0.22);
}
.scope-li-icon--out {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.22);
}
body[data-theme="dark"] .scope-li-icon--in {
  background: rgba(94, 234, 212, 0.1);
  color: #5eead4;
  border-color: rgba(94, 234, 212, 0.25);
}
body[data-theme="dark"] .scope-li-icon--out {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.28);
}
.scope-li-text { flex: 1; min-width: 0; }

/* Expandable scope items */
.scope-item {
  list-style: none;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.scope-item:hover {
  border-color: var(--border-hover);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.scope-item--open {
  border-color: var(--border-hover);
}
.scope-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.scope-item-header:hover {
  background: var(--purple-glow);
}
.scope-chevron {
  font-size: 0.6rem;
  color: var(--text-dim);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.scope-chevron.open {
  transform: rotate(90deg);
}
.scope-chevron-spacer {
  width: 14px;
  flex-shrink: 0;
}
.scope-item-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  min-width: 0;
}
.scope-item-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--purple-glow);
  border: 1px solid var(--border);
  color: var(--purple-mid);
  flex-shrink: 0;
}
body[data-theme="dark"] .scope-item-count {
  color: #d99fdd;
}
.scope-item-admin {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.scope-item-header:hover .scope-item-admin {
  opacity: 1;
}
.scope-admin-sm {
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  padding: 0;
}
.scope-admin-sm:hover {
  border-color: var(--purple-bright);
  color: var(--purple-bright);
  background: var(--purple-glow);
}
.scope-admin-sm--del:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220,38,38,0.06);
}

/* Sub-items list */
.scope-sub-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 12px 48px;
  animation: fadeUp 0.2s ease;
}
.scope-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 3px;
  border-radius: 8px;
  transition: background 0.12s;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.scope-sub-item:hover {
  background: rgba(74,10,91,0.04);
}
body[data-theme="dark"] .scope-sub-item:hover {
  background: rgba(255,255,255,0.04);
}
.scope-sub-bullet {
  font-size: 0.4rem;
  color: var(--text-dim);
  flex-shrink: 0;
}
.scope-sub-text {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}
.scope-sub-admin {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.scope-sub-item:hover .scope-sub-admin {
  opacity: 1;
}
.scope-sub-add {
  padding: 4px 10px;
}
.scope-admin-add-sub {
  appearance: none;
  padding: 5px 14px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.12s;
}
.scope-admin-add-sub:hover {
  border-color: var(--purple-bright);
  color: var(--purple-bright);
}

/* Panel title with add button */
.scope-panel-title .log-admin-btn {
  margin-left: auto;
  font-size: 0.76rem;
  padding: 4px 12px;
}

/* ═══════════════════════════════════════
   HEADLINES (collapsible week cards)
   ═══════════════════════════════════════ */
.week-card {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-1);
  margin-bottom: 10px; overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.week-card:hover { border-color: var(--border-hover); }
.week-card.future { opacity: 0.32; pointer-events: none; filter: grayscale(0.3); }
.week-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer; user-select: none;
  transition: background 0.18s;
}
.week-header:hover { background: var(--purple-glow); }
.week-chevron { transition: transform 0.3s; font-size: 0.7rem; color: var(--text-dim); }
.week-card.open .week-chevron { transform: rotate(90deg); }
.week-title { font-weight: 600; flex: 1; font-size: 0.95rem; }
.week-date { color: var(--text-dim); font-size: 0.8rem; }
.week-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s;
  padding: 0 18px;
}
.week-card.open .week-body { max-height: 500px; padding: 0 18px 16px; }
.week-body ul { padding-left: 20px; }
.week-body li { margin-bottom: 5px; color: var(--text-muted); }

/* ═══════════════════════════════════════
   GANTT CHART
   ═══════════════════════════════════════ */
/* Plan tab */
#sec-plan.active > .hero,
#sec-plan.active > .plan-mode-banner,
#sec-plan.active > .plan-editor-card,
#sec-plan.active > .admin-plan-wrap,
#sec-plan.active > .gantt-toolbar,
#sec-plan.active > .card {
  flex-shrink: 0;
}
#sec-plan.active {
  overflow: hidden;
}
#sec-plan.active > .gantt-container {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  width: 100%;
  overflow: auto;
}
/* Corner headers (frozen left + top) sit above everything when scrolling both axes */
.gantt-col-header:nth-child(-n+5) {
  z-index: 5;
}
.gantt-container {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-1);
  overflow: auto;
}
.gantt-grid {
  display: grid;
  grid-template-columns:
    var(--gcol-task, 200px)
    var(--gcol-phase, 80px)
    var(--gcol-who, 92px)
    var(--gcol-team, 80px)
    var(--gcol-dur, 120px)
    minmax(200px, 1fr);
  min-width: 1000px;
}
/* Frozen left columns */
.gantt-task-label, .gantt-task-phase, .gantt-task-who, .gantt-task-team, .gantt-task-dur,
.gantt-col-header:nth-child(-n+5) {
  position: sticky; z-index: 4; background: var(--bg-page, #fff);
}
body[data-theme="dark"] .gantt-task-label, body[data-theme="dark"] .gantt-task-phase,
body[data-theme="dark"] .gantt-task-who, body[data-theme="dark"] .gantt-task-team, body[data-theme="dark"] .gantt-task-dur,
body[data-theme="dark"] .gantt-col-header:nth-child(-n+5) {
  background: var(--bg-page, #1e1e2e);
}
.gantt-col-header:nth-child(1), .gantt-task-label { left: 0; }
.gantt-col-header:nth-child(2), .gantt-task-phase { left: var(--gcol-task, 200px); }
.gantt-col-header:nth-child(3), .gantt-task-who { left: calc(var(--gcol-task, 200px) + var(--gcol-phase, 80px)); }
.gantt-col-header:nth-child(4), .gantt-task-team { left: calc(var(--gcol-task, 200px) + var(--gcol-phase, 80px) + var(--gcol-who, 92px)); }
.gantt-col-header:nth-child(5), .gantt-task-dur { left: calc(var(--gcol-task, 200px) + var(--gcol-phase, 80px) + var(--gcol-who, 92px) + var(--gcol-team, 80px)); }
/* Expand button */
.gantt-expand-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg-card, #f8f8fb); color: var(--text-dim); cursor: pointer;
  font-size: 11px; font-weight: 700; flex-shrink: 0; margin-right: 4px;
  transition: background .15s, color .15s;
}
.gantt-expand-btn:hover { background: var(--purple-glow); color: var(--purple-mid); }
.gantt-expand-btn--open { background: var(--purple-glow); color: var(--purple-mid); }
/* Child rows (expanded deliverables/actions) — same sizing and frozen behavior as parent rows */
.gantt-child-row.gantt-task-label {
  position: sticky; left: 0; z-index: 4;
  font-size: .68rem; font-weight: 400;
}
.gantt-child-row.gantt-task-phase {
  position: sticky; left: var(--gcol-task, 200px); z-index: 4;
  font-size: .68rem;
}
.gantt-child-row.gantt-task-who {
  position: sticky; left: calc(var(--gcol-task, 200px) + var(--gcol-phase, 80px)); z-index: 4;
  font-size: .65rem;
}
.gantt-child-row.gantt-task-team {
  position: sticky; left: calc(var(--gcol-task, 200px) + var(--gcol-phase, 80px) + var(--gcol-who, 92px)); z-index: 4;
  font-size: .65rem;
}
.gantt-child-row.gantt-task-dur {
  position: sticky; left: calc(var(--gcol-task, 200px) + var(--gcol-phase, 80px) + var(--gcol-who, 92px) + var(--gcol-team, 80px)); z-index: 4;
  font-size: .65rem;
}
.gantt-child-row.gantt-task-label:hover { background: var(--purple-glow) !important; }
/* Today drag line */
.gantt-today-line {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: #007a74; z-index: 3;
  border-radius: 2px; opacity: .75; transition: opacity .15s; cursor: ew-resize;
}
.gantt-today-line:hover { opacity: 1; }
.gantt-today-handle {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  background: #007a74; color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 0 0 4px 4px; white-space: nowrap;
  pointer-events: none;
}
.gantt-col-header {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg-page); border-bottom: 1px solid var(--border);
  padding: 8px 10px; font-weight: 700; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim);
}
.gantt-col-header--resizable { position: relative; padding-right: 2px; }
.gantt-col-resize {
  position: absolute; right: 0; top: 0; bottom: 0; width: 9px; margin-right: -4px; z-index: 5;
  cursor: col-resize; touch-action: none; box-sizing: border-box;
  border-radius: 2px;
  transition: background 0.12s;
}
.gantt-col-resize::after {
  content: "";
  position: absolute; right: 3px; top: 10px; bottom: 10px; width: 2px; border-radius: 1px;
  background: rgba(74, 10, 91, 0.2);
}
body[data-theme="dark"] .gantt-col-resize::after { background: rgba(255, 255, 255, 0.12); }
.gantt-col-resize:hover, .gantt-col-resize--active {
  background: rgba(0, 122, 116, 0.1);
}
.gantt-col-resize:hover::after, .gantt-col-resize--active::after { background: var(--teal); }
body.gantt-col-resize-dragging { cursor: col-resize !important; user-select: none; }
.gantt-col-header:not(:last-child) { border-right: 1px solid var(--border); }
/* Column visibility toggle strip — sits above the gantt-container */
.gantt-col-strip {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 2px; padding: 0 0; height: 18px; user-select: none;
}
.gantt-col-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 5px; height: 15px; border-radius: 3px; cursor: pointer;
  font-size: .55rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-dim); opacity: 0.35;
  transition: opacity .15s, color .15s, background .15s;
}
.gantt-col-toggle:hover { opacity: 1; background: rgba(74, 10, 91, 0.08); color: var(--purple-mid, #7a1a86); }
.gantt-col-toggle--off {
  opacity: 0.5; text-decoration: line-through;
}
.gantt-col-toggle--off:hover { opacity: 1; text-decoration: none; color: var(--purple-mid, #7a1a86); }
/* Hidden column — 0-width, no content, no border */
.gantt-col-header--hidden { padding: 0 !important; border: none !important; overflow: hidden; }
.gantt-grid--hide-phase .gantt-task-phase,
.gantt-grid--hide-who .gantt-task-who,
.gantt-grid--hide-team .gantt-task-team,
.gantt-grid--hide-dur .gantt-task-dur { padding: 0 !important; border-right: none !important; }
/* Ensure cell content is clipped when column is narrow */
.gantt-task-phase, .gantt-task-who, .gantt-task-team, .gantt-task-dur { overflow: hidden; min-width: 0; }
.gantt-timeline-header {
  position: sticky; top: 0; z-index: 3;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--gantt-cell, 22px);
  background: var(--bg-page); border-bottom: 1px solid var(--border);
}
.gantt-day-header {
  border-left: 1px solid var(--border); text-align: center;
  font-size: 0.48rem; writing-mode: vertical-rl; text-orientation: mixed;
  height: 52px; padding-top: 4px; color: var(--text-dim);
}
.gantt-day-header.weekend { background: rgba(74, 10, 91, 0.04); }
body[data-theme="dark"] .gantt-day-header.weekend { background: rgba(255,255,255,0.03); }
.gantt-day-header.today { background: rgba(0, 122, 116, 0.1); border-left: 2px solid var(--teal); }
.gantt-task-label {
  padding: 6px 10px; font-size: 0.8rem; font-weight: 600; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; min-height: 36px;
}
.gantt-task-name-link { cursor: pointer; transition: color .15s; }
.gantt-task-name-link:hover { color: var(--purple-mid, #7a1a86); text-decoration: underline; }
.gantt-task-label--admin { gap: 6px; padding: 4px 6px; overflow: visible; z-index: 6; }
.gantt-task-label--admin .gantt-inline-text { flex: 1; min-width: 0; }
.gantt-drag-handle {
  cursor: grab; font-size: .9rem; color: var(--text-dim); opacity: 0.5;
  flex-shrink: 0; user-select: none; width: 18px; min-width: 18px; text-align: center;
  line-height: 1; transition: opacity .15s, color .15s;
}
.gantt-drag-handle:hover { opacity: 1; color: var(--purple-mid,#7a1a86); }
.gantt-drag-handle:active { cursor: grabbing; }
.gantt-task-label--drag-over { background: rgba(122,26,134,.08); outline: 2px dashed var(--purple-mid,#7a1a86); outline-offset: -2px; border-radius: 4px; }
.gantt-row-action-btn {
  flex-shrink: 0; appearance: none; width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-page);
  color: var(--text-dim); font: inherit; font-size: 1.1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.gantt-row-action-btn:hover {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.4);
  color: #b91c1c;
}
body[data-theme="dark"] .gantt-row-action-btn:hover { color: #f87171; }
.gantt-inline-text,
.gantt-inline-select {
  max-width: 100%; min-width: 0; box-sizing: border-box;
  padding: 2px 6px; font-size: 0.7rem; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-page); color: var(--text); font: inherit;
}
.gantt-inline-select { padding: 1px 4px; }
.gantt-task-phase {
  padding: 4px 8px; font-size: 0.68rem; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; min-height: 36px;
}
.gantt-task-phase--admin { padding: 2px 4px; }
.gantt-phase-pill {
  display: inline-flex; padding: 2px 8px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid var(--border);
}
.gantt-phase-pill--design { background: rgba(99, 102, 241, 0.12); color: #4f46e5; }
.gantt-phase-pill--build  { background: rgba(0, 122, 116, 0.12); color: var(--teal); }
.gantt-phase-pill--test   { background: rgba(202, 138, 4, 0.15); color: #a16207; }
.gantt-phase-pill--config { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
body[data-theme="dark"] .gantt-phase-pill--config { color: #93c5fd; }
body[data-theme="dark"] .gantt-phase-pill--design { color: #a5b4fc; }
.gantt-legend-rag {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  font-size: 0.75rem; color: var(--text-muted);
}
.gantt-legend-swatch {
  display: inline-block; width: 18px; height: 9px; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1); vertical-align: -2px; margin-right: 3px;
}
.gantt-rag-row { width: 100%; margin-bottom: 2px; }
.gantt-dur-pair--rag { min-width: 0; }
.gantt-rag-select { max-width: 100%; font-size: 0.6rem; }
.gantt-rag-dot {
  display: inline-flex; align-items: center; justify-content: center; min-width: 14px;
  font-size: 0.58rem; font-weight: 800; border-radius: 3px; margin-right: 4px;
  color: #fff; padding: 0 2px; line-height: 1.3;
}
.gantt-rag-dot--not-started { background: #6b7280; color: #f3f4f6; }
.gantt-rag-dot--in-progress { background: #15803d; }
.gantt-rag-dot--in-review { background: #7c3aed; }
.gantt-rag-dot--blocked { background: #b91c1c; }
.gantt-rag-dot--complete { background: #14532d; }
.gantt-rag-dot--deferred { background: #b45309; }
.gantt-bar--status-not-started { color: #0f172a; text-shadow: 0 1px 0 rgba(255,255,255,0.2); }
body[data-theme="dark"] .gantt-bar--status-not-started { color: #0f172a; }
.gantt-bar--status-in-progress { color: #052e16; text-shadow: 0 1px 0 rgba(255,255,255,0.2); }
body[data-theme="dark"] .gantt-bar--status-in-progress { color: #052e16; }
.gantt-bar.gantt-bar--admin::after, .gantt-bar.gantt-bar--admin::before { opacity: 0.5; }
.gantt-phase-empty { color: var(--text-dim); font-size: 0.72rem; }
.gantt-task-who {
  padding: 4px 6px; font-size: 0.68rem; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border); overflow: hidden;
}
.gantt-task-who--admin { padding: 4px; }
.gantt-task-team {
  padding: 4px 6px; font-size: 0.68rem; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gantt-task-team--admin {
  padding: 3px 4px;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
}
.gantt-task-team--admin .team-chip-group { width: 100%; }
.gantt-task-dur {
  padding: 4px 6px; font-size: 0.7rem; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 36px; flex-wrap: wrap;
}
.gantt-task-dur--admin {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; justify-content: flex-start;
}
.gantt-dur-nums { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 4px; }
.gantt-task-dur--admin .gantt-dur-pair { flex-direction: column; align-items: center; }
.gantt-dur-pair { display: flex; flex-direction: column; align-items: center; gap: 0; }
.gantt-dur-pair span { font-size: 0.52rem; text-transform: uppercase; color: var(--text-dim); }
.gantt-inline-num {
  width: 100%; max-width: 44px; box-sizing: border-box; padding: 1px 4px;
  font-size: 0.68rem; text-align: center; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-page); color: var(--text); font: inherit;
}
.gantt-dur-s, .gantt-dur-n { font-weight: 600; }
.gantt-dur-sep { color: var(--text-dim); font-size: 0.6rem; padding: 0 1px; }
.who-pill {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 7px; border-radius: var(--radius-pill);
  font-size: 0.6rem; margin: 1px 2px;
  border: 1px solid var(--border); background: var(--purple-glow);
}
.gantt-row {
  position: relative; display: grid;
  grid-auto-flow: column; grid-auto-columns: var(--gantt-cell, 22px);
  border-bottom: 1px solid var(--border);
  min-height: 36px; height: 36px;
}
.gantt-cell { border-left: 1px solid rgba(31, 26, 36, 0.05); height: 100%; }
body[data-theme="dark"] .gantt-cell { border-left-color: rgba(255,255,255,0.04); }
.gantt-cell.weekend { background: rgba(74, 10, 91, 0.03); }
body[data-theme="dark"] .gantt-cell.weekend { background: rgba(255,255,255,0.02); }
.gantt-cell.today { background: rgba(0, 122, 116, 0.06); }
.gantt-bar {
  position: absolute; top: 2px; bottom: 2px; height: auto; border-radius: 6px;
  cursor: default; display: flex; align-items: center; justify-content: center;
  min-height: 0; padding: 0 4px; box-sizing: border-box;
  font-weight: 600; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.gantt-bar--clickable { cursor: pointer; }
.gantt-bar--clickable:hover { filter: brightness(1.15); }
.gantt-bar--milestone { border-radius: 2px !important; padding: 0 !important; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.gantt-bar--milestone:hover { filter: brightness(1.2); }
.gantt-child-row.gantt-row .gantt-bar { top: 8px; bottom: 8px; font-size: .6rem; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.gantt-child-row.gantt-row .gantt-bar .gantt-bar-label { font-size: .55rem; }
.gantt-bar--draggable { cursor: grab; }
.gantt-bar--draggable:active { cursor: grabbing; }
.gantt-bar-label {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
  font-size: 0.64rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gantt-bar.gantt-bar--admin { cursor: grab; }
.gantt-bar.gantt-bar--admin:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.gantt-bar:not(.gantt-bar--admin):hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.gantt-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
}
.gantt-toolbar .g-btn {
  appearance: none; padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); cursor: pointer; font-size: 0.78rem; font: inherit;
  transition: all 0.18s;
}
.gantt-toolbar .g-btn:hover { border-color: var(--purple-bright); background: var(--purple-glow); }
.gantt-zoom-label { font-size: 0.78rem; color: var(--text-dim); min-width: 42px; }
.gantt-wheel-hint {
  font-size: 0.72rem; color: var(--text-muted);
  white-space: nowrap; padding: 0 4px; user-select: none;
}
.gantt-search-wrap { position: relative; flex-shrink: 1; min-width: 0; }
.gantt-search-input {
  width: 220px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg-page); color: var(--text); font: inherit; font-size: 0.78rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gantt-search-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 2px rgba(0, 122, 116, 0.15); }
.gantt-search-input::placeholder { color: var(--text-dim); opacity: 0.7; }
.gantt-search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 100;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15); max-height: 300px; overflow-y: auto;
}
.gantt-search-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
  font-size: 0.78rem; border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.gantt-search-item:last-child { border-bottom: none; }
.gantt-search-item:hover { background: var(--purple-glow, rgba(122,26,134,0.06)); }
.gantt-search-icon { font-size: 0.9rem; flex-shrink: 0; }
.gantt-search-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-search-tag {
  flex-shrink: 0; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 4px; background: rgba(0,122,116,0.1); color: var(--teal);
}
.gantt-search-empty { color: var(--text-dim); font-style: italic; cursor: default; }
@media (max-width: 1100px) {
  .gantt-wheel-hint { display: none; }
  .gantt-search-input { width: 160px; }
}

/* ═══════════════════════════════════════
   LOG CARDS (Risks, Issues, Deps, Assumptions)
   UseCase-style cards from RLAM template
   ═══════════════════════════════════════ */
.log-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }

.log-card {
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--bg-card); box-shadow: var(--shadow-1);
  overflow: hidden; position: relative;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  transform: translateZ(0);
}
@media (hover: hover) and (pointer: fine) {
  .log-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 60px rgba(31, 26, 36, 0.14);
    border-color: var(--border-hover);
  }
  body[data-theme="dark"] .log-card:hover { box-shadow: 0 22px 60px rgba(0,0,0,0.4); }
}
/* Left accent stripe (like useCard::before) */
.log-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--purple-mid), var(--teal));
  opacity: 0.9;
}
.log-card.rag-border-R::before { background: linear-gradient(180deg, #dc2626, #ef4444); }
.log-card.rag-border-A::before { background: linear-gradient(180deg, #d97706, #f59e0b); }
.log-card.rag-border-G::before { background: linear-gradient(180deg, var(--teal), #34d399); }

.log-card-header {
  padding: 14px 14px 10px; padding-left: 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(74,10,91,0.06), rgba(122,26,134,0.03));
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; flex-wrap: wrap;
}
body[data-theme="dark"] .log-card-header { background: rgba(161,42,166,0.06); }
.log-card-header strong { font-size: 0.92rem; letter-spacing: -0.1px; }
.log-card-title-row {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.log-card-icon {
  width: 28px; height: 28px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.95); font-size: 0.85rem;
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
  box-shadow: 0 8px 20px rgba(74,10,91,0.18); flex: 0 0 auto;
}
.log-card-body {
  padding: 14px 14px 14px 18px; display: grid; gap: 8px;
}
.log-card-md p { margin: 0 0 .3em; }
.log-card-md ul, .log-card-md ol { margin: 0 0 .3em; padding-left: 1.4em; }
.log-card-md li { margin-bottom: .1em; }
.log-card-md h1, .log-card-md h2, .log-card-md h3, .log-card-md h4 { margin: 0 0 .2em; font-size: inherit; }
.log-row { display: grid; gap: 3px; }
.log-row b {
  font-size: 11px; letter-spacing: 0.2px; text-transform: uppercase;
  color: var(--text-dim);
}
.log-row p { color: var(--text-muted); font-size: 0.88rem; margin: 0; }
.log-row-md { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }
.log-row-md p { color: var(--text-muted); font-size: 0.88rem; margin: 4px 0; }
.log-row-md p:first-child { margin-top: 0; }
.log-row-md p:last-child { margin-bottom: 0; }
.log-row-md ul, .log-row-md ol { margin: 4px 0 4px 1.2em; padding: 0; }
.log-row-md li { margin: 2px 0; }
.log-row-md strong { color: var(--text); }
.log-row-md code { background: var(--bg-page); padding: 1px 4px; border-radius: 3px; font-size: 0.85em; }
.log-row-md h1, .log-row-md h2, .log-row-md h3, .log-row-md h4 { margin: 8px 0 4px; font-size: 0.95rem; color: var(--text); }
.log-row-md hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.log-row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 0; margin: 4px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.log-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.log-badge {
  border: 1px solid var(--border); background: var(--purple-glow);
  color: var(--text-muted); padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px;
}
.log-empty { text-align: center; padding: 40px; color: var(--text-dim); font-size: 1rem; }
.log-empty-icon { font-size: 2.5rem; margin-bottom: 8px; display: block; }

/* Sub-section headings */
.sub-heading {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 1rem; font-weight: 600;
  color: var(--purple-mid);
}
body[data-theme="dark"] .sub-heading { color: #d99fdd; }
.sub-heading-count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--purple-glow); border: 1px solid var(--border);
  font-size: 0.72rem; font-weight: 700; color: var(--purple-mid);
}
body[data-theme="dark"] .sub-heading-count { color: #d99fdd; }

/* ═══════════════════════════════════════
   Q&A
   ═══════════════════════════════════════ */
.qa-card {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-card); padding: 16px; margin-bottom: 10px;
  box-shadow: var(--shadow-1);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.qa-collapsible:hover { border-color: var(--border-hover); }
.qa-collapsible .qa-collapse-body { display: none; }
.qa-collapsible.qa-expanded .qa-collapse-body { display: block !important; }
.qa-collapsible.qa-expanded .qa-collapse-chevron { transform: rotate(90deg); }
.qa-collapsible.qa-expanded { border-color: var(--border-hover); box-shadow: 0 16px 40px rgba(31,26,36,0.1); }
.import-hist-open #import-history { display: block !important; }
.import-hist-open .import-hist-chevron { transform: rotate(90deg); }
.qa-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(31,26,36,0.1); }
.qa-question { font-weight: 700; margin-bottom: 6px; }
.qa-answer { color: var(--text-muted); font-size: 0.9rem; }
.qa-status {
  display: inline-flex; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
}
.qa-status-open { background: rgba(217,119,6,0.1); color: #d97706; border: 1px solid rgba(217,119,6,0.25); }
.qa-status-answered { background: rgba(0,122,116,0.1); color: var(--teal); border: 1px solid rgba(0,122,116,0.25); }
body[data-theme="dark"] .qa-status-open { color: #fbbf24; background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.35); }
body[data-theme="dark"] .qa-status-answered { color: #34d399; background: rgba(0,122,116,0.15); border-color: rgba(0,122,116,0.35); }

.qa-form {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); padding: 20px; margin-bottom: 18px;
  box-shadow: var(--shadow-1);
}
.qa-form textarea, .qa-form input[type="text"] {
  width: 100%; background: var(--bg-page); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; font-family: inherit; font-size: 0.9rem; resize: vertical;
}
.qa-form textarea { min-height: 60px; }
.qa-form textarea:focus, .qa-form input:focus { outline: none; box-shadow: var(--ring); border-color: var(--purple-bright); }

.btn-primary {
  appearance: none; padding: 8px 20px; border-radius: var(--radius-pill); border: none;
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
  color: #fff; font-weight: 600; cursor: pointer; font-size: 0.85rem; font: inherit;
  box-shadow: 0 8px 20px rgba(74,10,91,0.2);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(74,10,91,0.3); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════════════
   ELLA-PEDIA (Wikipedia-inspired)
   ═══════════════════════════════════════ */
.wiki-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  align-items: start;
}
/* Let the article column shrink/wrap correctly inside grid (avoids odd horizontal squeeze). */
.wiki-layout > .wiki-sidebar { min-width: 0; }
.wiki-layout > .wiki-content { min-width: 0; width: 100%; max-width: 100%; }
@media (max-width: 800px) { .wiki-layout { grid-template-columns: 1fr; } }

/* ── Sidebar: Wikipedia "Contents" box feel ── */
.wiki-sidebar {
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-card); padding: 14px 16px;
  height: fit-content; position: sticky; top: 80px;
}
.wiki-sidebar-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.wiki-sidebar h3 {
  margin-bottom: 6px; font-size: 0.78rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.wiki-link {
  display: block; padding: 3px 8px; border-radius: 3px;
  color: #3366cc; text-decoration: none; font-size: 0.87rem;
  transition: background 0.12s; margin-bottom: 1px;
}
body[data-theme="dark"] .wiki-link { color: #8ab4f8; }
.wiki-link:hover { background: rgba(51,102,204,0.08); text-decoration: underline; }
.wiki-link.active { background: rgba(74,10,91,0.08); font-weight: 600; color: var(--purple-bright); }
body[data-theme="dark"] .wiki-link.active { color: #d99fdd; background: rgba(161,42,166,0.15); }

/* ── Main article area ── */
.wiki-content {
  display: flow-root;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-card);
  padding: 16px 24px 20px;
  font-family: sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  box-sizing: border-box;
}
/* Flex child of .tab-content — allow shrinking so wiki grid gets real width */
#wiki-tab-read {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.wiki-content h1 {
  font-family: "Linux Libertine", Georgia, "Times New Roman", serif;
  font-size: 1.8rem; font-weight: 400; margin: 0 0 0.25em;
  border-bottom: 1px solid var(--border); padding-bottom: 4px;
  line-height: 1.3;
  color: var(--text);
}
body[data-theme="dark"] .wiki-content h1 { color: #f0eff2; }

/* Deck line under page title (markdown # demoted when template already has <h1>) */
.wiki-content .wiki-lead {
  font-family: "Linux Libertine", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 0.5em;
  padding: 0;
  border: none;
}

/* Tagline under article title */
.wiki-tagline {
  font-size: 0.8rem; color: var(--text-dim); font-style: italic;
  margin: 2px 0 8px;
  line-height: 1.4;
}

/* Section headings – Wikipedia bottom-border style */
.wiki-content h2 {
  font-family: "Linux Libertine", Georgia, "Times New Roman", serif;
  font-size: 1.35rem; font-weight: 400; margin: 1.2em 0 0.4em;
  border-bottom: 1px solid var(--border); padding-bottom: 4px;
  color: var(--text);
  line-height: 1.3;
}
body[data-theme="dark"] .wiki-content h2 { color: #f0eff2; }
.wiki-content h2 .wiki-edit-link {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem; font-weight: 400; color: #3366cc; margin-left: 8px;
  cursor: default; text-decoration: none;
}
body[data-theme="dark"] .wiki-content h2 .wiki-edit-link { color: #8ab4f8; }

.wiki-content h3 {
  font-size: 1.05rem; font-weight: 700; margin: 1em 0 0.3em; color: var(--text);
  line-height: 1.3;
}

.wiki-content p {
  margin: 0 0 0.8em;
  line-height: 1.6;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.wiki-content p:last-child { margin-bottom: 0; }
.wiki-content h2 + p,
.wiki-content h3 + p { margin-top: 0; }
.wiki-content .wiki-lead + p { margin-top: 0; }
.wiki-content a { color: #3366cc; text-decoration: none; }
.wiki-content a:hover { text-decoration: underline; }
body[data-theme="dark"] .wiki-content a { color: #8ab4f8; }
.wiki-content a.wiki-link-broken { color: #ba0000; }
body[data-theme="dark"] .wiki-content a.wiki-link-broken { color: #e57373; }

.wiki-table {
  width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.88rem;
}
.wiki-table th {
  padding: 8px 12px; border-bottom: 2px solid var(--border, #ccc);
  background: var(--bg-card, #f8f8fa); font-weight: 600; white-space: nowrap;
}
.wiki-table td {
  padding: 7px 12px; border-bottom: 1px solid var(--border, #eee); vertical-align: top;
}
.wiki-table tr:hover td { background: rgba(0,0,0,0.02); }
body[data-theme="dark"] .wiki-table th { background: rgba(255,255,255,0.04); }
body[data-theme="dark"] .wiki-table tr:hover td { background: rgba(255,255,255,0.03); }
.wiki-table code {
  font-size: 0.82rem; background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px;
}
body[data-theme="dark"] .wiki-table code { background: rgba(255,255,255,0.08); }
.wiki-content ul { padding-left: 1.6em; margin: 0.3em 0 0.8em; }
.wiki-content ol { padding-left: 1.6em; margin: 0.3em 0 0.8em; }
.wiki-content li { margin-bottom: 0.25em; color: var(--text-muted); line-height: 1.6; font-size: 0.9rem; }
.wiki-content p + ul,
.wiki-content p + ol { margin-top: 0.2em; }
.wiki-content strong { color: var(--text); }
.wiki-content blockquote {
  border-left: 3px solid var(--purple-light); margin: 0.5em 0; padding: 6px 16px;
  background: rgba(74,10,91,0.04); border-radius: 0 4px 4px 0;
  font-style: italic; color: var(--text-muted);
}
body[data-theme="dark"] .wiki-content blockquote { background: rgba(161,42,166,0.08); }

/* ── Infobox (Wikipedia-style right-side info card) ── */
.wiki-infobox {
  float: right; width: 240px; margin: 0 0 8px 14px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-card); font-size: 0.82rem;
  border-collapse: collapse;
}
.wiki-infobox-header {
  background: var(--purple-mid); color: #fff;
  text-align: center; padding: 6px 10px;
  font-weight: 600; font-size: 0.88rem; border-radius: 3px 3px 0 0;
}
.wiki-infobox-logo {
  text-align: center; padding: 8px 10px; border-bottom: 1px solid var(--border);
  background: rgba(74,10,91,0.03);
}
.wiki-infobox-logo img {
  max-width: 140px; height: auto;
}
body[data-theme="dark"] .wiki-infobox-logo { background: rgba(161,42,166,0.06); }
.wiki-infobox-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 0;
  border-bottom: 1px solid var(--border);
}
.wiki-infobox-row:last-child { border-bottom: none; }
.wiki-infobox-label {
  padding: 5px 10px; font-weight: 600; color: var(--text-dim);
  background: rgba(74,10,91,0.03); border-right: 1px solid var(--border);
}
body[data-theme="dark"] .wiki-infobox-label { background: rgba(161,42,166,0.06); }
.wiki-infobox-value { padding: 5px 10px; color: var(--text-muted); }
@media (max-width: 640px) {
  .wiki-infobox { float: none; width: 100%; margin: 0 0 14px 0; }
}

/* Agentic framework: article is rendered before infobox in DOM; keep infobox non-floating.
   Class is set in renderEllapedia(); attribute/:has() kept for older cached HTML without reorder. */
.wiki-infobox.wiki-infobox--nofloat,
.wiki-content[data-wiki-slug="what-is-ella-agentic-framework"] .wiki-infobox,
.wiki-content:has(.ella-af-shell) .wiki-infobox {
  float: none !important;
  width: min(100%, 280px);
  margin: 16px 0 0 auto;
}

/* ── Quick-nav tabs ── */
.wiki-top-links { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.wiki-top-btn {
  appearance: none; padding: 7px 16px; border-radius: var(--radius-pill);
  border: 1px solid rgba(74,10,91,0.2); background: transparent;
  color: var(--purple-mid); font-weight: 600; cursor: pointer;
  transition: all 0.18s; font-size: 0.84rem; font: inherit;
}
body[data-theme="dark"] .wiki-top-btn { color: #d99fdd; border-color: rgba(161,42,166,0.35); }
.wiki-top-btn:hover { background: var(--purple-glow); border-color: var(--purple-bright); }
.wiki-top-btn.active {
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
  color: #fff; border-color: transparent;
}

/* ── Article tabs (Read · Talk · Edit) decorative ── */
.wiki-article-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  margin: 0 0 4px;
}
.wiki-article-tab {
  padding: 3px 10px 4px; font-size: 0.78rem; color: var(--text-dim);
  border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0;
  cursor: default; background: transparent;
  line-height: 1.2;
}
.wiki-article-tab.active {
  background: var(--bg-card); color: var(--text);
  border-color: var(--border); margin-bottom: -1px;
}

/* ── Ask ELLA-Wikipedia query box ── */
.wiki-query-box {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.wiki-query-box input {
  flex: 1; padding: 10px 14px; font: inherit; font-size: 0.9rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg-card); color: var(--text);
  outline: none; transition: border-color 0.15s;
}
.wiki-query-box input:focus { border-color: var(--purple-bright); }
body[data-theme="dark"] .wiki-query-box input { background: var(--bg-card); color: #f0eff2; }
.wiki-query-box button {
  appearance: none; padding: 10px 20px; border-radius: var(--radius-pill);
  border: none; background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
  color: #fff; font-weight: 600; font-size: 0.88rem; cursor: pointer;
  transition: opacity 0.15s; font: inherit;
}
.wiki-query-box button:hover { opacity: 0.9; }

.wiki-query-result {
  margin-bottom: 14px; padding: 14px 18px;
  border-left: 4px solid var(--purple-bright);
  background: var(--bg-card); border-radius: 0 6px 6px 0;
  border: 1px solid var(--border); border-left: 4px solid var(--purple-bright);
}
body[data-theme="dark"] .wiki-query-result { background: rgba(74,10,91,0.08); }

/* ── Metadata bar ── */
.wiki-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px;
}
.wiki-meta-chip {
  display: inline-flex; align-items: center;
  font-size: 0.76rem; color: var(--text-dim);
  background: rgba(74,10,91,0.05); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: var(--radius-pill);
}
body[data-theme="dark"] .wiki-meta-chip { background: rgba(161,42,166,0.1); }

/* ── Sidebar category headers ── */
.wiki-category-header {
  font-size: 0.72rem; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 10px 0 4px; padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
}
.wiki-category-header:first-child { margin-top: 0; }

/* ── Health indicator dots ── */
.wiki-health-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 5px; vertical-align: middle;
}
.wiki-health-dot-red { background: #f44336; }
.wiki-health-dot-amber { background: #ff9800; }

/* ── Ingest panel ── */
.wiki-ingest-panel { padding: 8px 0; }
.wiki-ingest-dropzone {
  border: 2px dashed var(--border); border-radius: 10px;
  padding: 32px 20px; text-align: center;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.wiki-ingest-dropzone.dragover {
  border-color: var(--purple-bright);
  background: rgba(74,10,91,0.06);
}
body[data-theme="dark"] .wiki-ingest-dropzone.dragover { background: rgba(161,42,166,0.12); }
.wiki-ingest-dropzone-inner p { margin: 4px 0; color: var(--text-muted); font-size: 0.88rem; }
.wiki-ingest-preview {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); padding: 14px;
}
.wiki-ingest-preview h3 { margin: 0 0 10px; font-size: 0.92rem; }
.wiki-ingest-preview-item {
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.wiki-ingest-preview-item:last-child { border-bottom: none; }

/* ── Source list ── */
.wiki-sources-list { display: flex; flex-direction: column; gap: 8px; }
.wiki-source-item {
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-card);
}
.wiki-source-status {
  font-size: 0.72rem; padding: 1px 7px; border-radius: var(--radius-pill);
  margin-left: 6px; font-weight: 600;
}
.wiki-source-status-uploaded { background: #fff3e0; color: #e65100; }
.wiki-source-status-ingested { background: #e8f5e9; color: #2e7d32; }
body[data-theme="dark"] .wiki-source-status-uploaded { background: rgba(230,81,0,0.15); color: #ffb74d; }
body[data-theme="dark"] .wiki-source-status-ingested { background: rgba(46,125,50,0.15); color: #81c784; }

/* ── Wiki Graph ── */
#wiki-graph-container { background: #0d1117; }
.wg-legend {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 6px 12px; border-radius: 6px;
  background: rgba(13,17,23,0.85); backdrop-filter: blur(6px);
  font-size: 0.75rem; color: rgba(255,255,255,0.7);
}
.wg-legend-item { display: flex; align-items: center; gap: 5px; }
.wg-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.wg-controls {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; gap: 6px;
}
.wg-ctrl-btn {
  width: 32px; height: 32px; border: none; border-radius: 6px;
  background: rgba(255,255,255,0.1); color: #fff; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: background 0.15s;
}
.wg-ctrl-btn:hover { background: rgba(255,255,255,0.22); }

.wg-maximised {
  position: fixed !important; top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  z-index: 9999 !important; border-radius: 0 !important;
}

/* ── Wiki Graph Modal ── */
.wg-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.wg-modal.hidden { display: none; }
.wg-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.wg-modal-panel {
  position: relative; z-index: 1;
  width: min(680px, 92vw); max-height: 80vh;
  background: var(--bg-card, #fff); color: var(--text, #1a1a2e);
  border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; overflow: hidden;
}
.wg-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border, #e0e0e0);
}
.wg-modal-header h2 { margin: 0; font-size: 1.15rem; }
.wg-modal-close {
  background: none; border: none; font-size: 1.5rem; cursor: pointer;
  color: var(--text-dim, #888); line-height: 1; padding: 0 4px;
}
.wg-modal-close:hover { color: var(--text, #333); }
.wg-modal-meta { padding: 8px 20px 0; display: flex; gap: 10px; align-items: center; }
.wg-modal-cat {
  font-size: 0.78rem; font-weight: 600; padding: 2px 10px;
  border: 1.5px solid; border-radius: 20px;
}
.wg-modal-conn { font-size: 0.78rem; color: var(--text-dim, #888); }
.wg-modal-body {
  padding: 14px 20px 20px; overflow-y: auto; flex: 1;
  font-size: 0.92rem; line-height: 1.6;
}
.wg-modal-body h1 { font-size: 1.1rem; margin: 14px 0 6px; }
.wg-modal-body h2 { font-size: 1rem; margin: 12px 0 6px; }
.wg-modal-body h3 { font-size: 0.92rem; margin: 10px 0 4px; }
.wg-modal-body ul, .wg-modal-body ol { padding-left: 20px; }
.wg-modal-body p { margin: 0 0 8px; }
.wg-modal-footer {
  padding: 10px 20px 14px; border-top: 1px solid var(--border, #e0e0e0);
  display: flex; justify-content: flex-end;
}

/* ═══════════════════════════════════════
   FEEDBACK
   ═══════════════════════════════════════ */

/* ── Submit form card ── */
.fb-form-card { margin-bottom: 18px; }
.fb-form-card h3 { margin-bottom: 10px; font-size: 1rem; color: var(--text); }
.fb-form { display: flex; flex-direction: column; gap: 10px; }
.fb-form-row { display: flex; flex-direction: column; gap: 3px; }
.fb-form-row label { font-size: 0.82rem; font-weight: 600; color: var(--text-dim); }
.fb-input, .fb-textarea, .fb-edit-textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-page); color: var(--text);
  font: inherit; font-size: 0.9rem; resize: vertical;
  transition: border-color 0.15s;
}
.fb-input:focus, .fb-textarea:focus, .fb-edit-textarea:focus {
  outline: none; border-color: var(--purple-bright); box-shadow: var(--ring);
}
.fb-submit-btn {
  align-self: flex-start; padding: 8px 22px; border: none; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
  color: #fff; font-weight: 600; font-size: 0.88rem; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.fb-submit-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.fb-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Section title ── */
.fb-section-title {
  font-size: 1.05rem; font-weight: 700; margin: 16px 0 10px;
  color: var(--text); display: flex; align-items: center; gap: 8px;
}
.fb-count {
  font-size: 0.75rem; font-weight: 600;
  background: var(--purple-glow); color: var(--purple-bright);
  padding: 2px 10px; border-radius: var(--radius-pill);
}
body[data-theme="dark"] .fb-count { background: rgba(161,42,166,0.18); color: #d99fdd; }

/* ── Feedback cards ── */
.fb-card {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); padding: 14px 18px; margin-bottom: 10px;
  border-left: 4px solid var(--purple-bright);
  transition: box-shadow 0.2s, transform 0.2s;
}
.fb-card:hover { box-shadow: var(--shadow-1); transform: translateY(-1px); }
.fb-card.archived {
  border-left-color: var(--text-dim); opacity: 0.7;
}
.fb-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 6px;
}
.fb-card-meta { display: flex; flex-direction: column; gap: 1px; }
.fb-card-name { font-weight: 700; font-size: 0.92rem; color: var(--text); }
.fb-card-date { font-size: 0.76rem; color: var(--text-dim); }
.fb-card-actions { display: flex; gap: 4px; }
.fb-action-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; cursor: pointer; font-size: 0.82rem;
  transition: background 0.12s, border-color 0.12s; color: var(--text-muted);
}
.fb-action-btn:hover { background: var(--purple-glow); border-color: var(--purple-bright); }
.fb-card-body { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }
.fb-card-body p { margin: 0; }
.fb-card-admin-note {
  margin-top: 8px; padding: 6px 10px; border-radius: 6px;
  background: rgba(0,122,116,0.08); font-size: 0.82rem; color: var(--teal);
  border-left: 3px solid var(--teal);
}
body[data-theme="dark"] .fb-card-admin-note { background: rgba(0,168,157,0.1); }
.fb-archived-badge {
  display: inline-block; margin-top: 6px; font-size: 0.72rem; font-weight: 600;
  color: var(--text-dim); background: var(--bg-page);
  padding: 2px 10px; border-radius: var(--radius-pill); text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Edit inline ── */
.fb-edit-textarea { margin-bottom: 6px; min-height: 60px; }
.fb-edit-actions { display: flex; gap: 6px; }
.fb-save-btn, .fb-cancel-btn {
  padding: 5px 16px; border-radius: var(--radius-pill); font-size: 0.82rem;
  font-weight: 600; cursor: pointer; border: 1px solid var(--border);
  transition: all 0.15s;
}
.fb-save-btn {
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
  color: #fff; border-color: transparent;
}
.fb-save-btn:hover { opacity: 0.9; }
.fb-cancel-btn { background: transparent; color: var(--text-muted); }
.fb-cancel-btn:hover { background: var(--bg-page); }

/* ── Archive toggle ── */
.fb-archive-toggle {
  display: flex; align-items: center; gap: 6px;
  margin: 16px 0 10px; padding: 6px 14px; border-radius: 8px;
  background: none; border: 1px solid var(--border);
  color: var(--text-dim); font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s; font: inherit;
}
.fb-archive-toggle:hover { background: var(--bg-card); border-color: var(--border-hover); color: var(--text); }

/* ═══════════════════════════════════════
   MEETINGS
   ═══════════════════════════════════════ */

.mtg-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 22px; margin-bottom: 16px;
  border: none; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
  color: #fff; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.15s;
}
.mtg-add-btn:hover { opacity: 0.92; transform: translateY(-1px); }

.mtg-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.mtg-toolbar .mtg-add-btn { margin-bottom: 0; }
.mtg-toolbar-right {
  display: flex; align-items: center; gap: 8px;
}
.mtg-search-wrap {
  display: flex; align-items: center; gap: 6px; position: relative;
}
.mtg-search-icon {
  width: 16px; height: 16px; flex-shrink: 0; color: var(--text-dim);
}
.mtg-search-input {
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg-page); color: var(--text);
  font: inherit; font-size: 0.85rem; width: 220px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mtg-search-input::placeholder { color: var(--text-dim); }
.mtg-search-input:focus {
  outline: none; border-color: var(--purple-bright);
  box-shadow: var(--ring);
}
.mtg-search-clear {
  position: absolute; right: 8px; background: none; border: none;
  color: var(--text-dim); cursor: pointer; font-size: 0.8rem; padding: 2px 4px;
  line-height: 1;
}
.mtg-search-clear:hover { color: #dc2626; }
.mtg-sort-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg-card); color: var(--text-muted);
  font: inherit; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.mtg-sort-btn:hover {
  border-color: var(--purple-bright); color: var(--purple-bright);
  background: var(--purple-glow);
}

.mtg-form-card { margin-bottom: 18px; }
.mtg-form-card h3 { margin-bottom: 12px; font-size: 1rem; color: var(--text); }
.mtg-form { display: flex; flex-direction: column; gap: 14px; }
.mtg-form-row { display: flex; flex-direction: column; gap: 3px; }
.mtg-form-row label {
  font-size: 0.82rem; font-weight: 600; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.mtg-hint { font-weight: 400; color: var(--text-dim); font-size: 0.76rem; }
.mtg-form-row-pair { display: flex; gap: 14px; }
.mtg-form-row-pair > .mtg-form-row { flex: 1; }

.mtg-input, .mtg-textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-page); color: var(--text);
  font: inherit; font-size: 0.9rem; resize: vertical;
  transition: border-color 0.15s;
}
.mtg-textarea.mtg-autosize {
  overflow: hidden; resize: none; min-height: 80px;
}
.mtg-input:focus, .mtg-textarea:focus {
  outline: none; border-color: var(--purple-bright); box-shadow: var(--ring);
}

.mtg-img-toolbar {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.mtg-img-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border: 1px dashed var(--border); border-radius: 6px;
  background: none; color: var(--text-muted); font-size: 0.82rem;
  cursor: pointer; font-family: inherit; transition: all 0.12s;
}
.mtg-img-add-btn:hover { border-color: var(--purple-bright); color: var(--purple-bright); }
.mtg-img-hint { font-size: 0.74rem; color: var(--text-dim); }

/* ── Contenteditable summary editor ── */
.mtg-editor {
  width: 100%; min-height: 100px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-page); color: var(--text);
  font: inherit; font-size: 0.9rem; line-height: 1.6;
  white-space: pre-wrap; word-wrap: break-word;
  outline: none; resize: vertical; overflow-y: auto;
  transition: border-color 0.15s;
}
.mtg-editor:focus {
  border-color: var(--purple-bright); box-shadow: var(--ring);
}
.mtg-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-dim); pointer-events: none;
}
.mtg-ed-img {
  display: block; max-width: 100%; height: auto;
  border-radius: 6px; margin: 8px 0;
  border: 2px solid transparent;
  cursor: grab;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mtg-ed-img:hover {
  border-color: var(--purple-bright);
  box-shadow: 0 0 0 3px var(--purple-glow);
}
.mtg-ed-img--resizing {
  border-color: var(--purple-bright) !important;
  box-shadow: 0 0 0 3px rgba(161,42,166,0.25) !important;
  cursor: nwse-resize !important; user-select: none;
}
.mtg-ed-img--dragging,
.mtg-ed-img-wrap.mtg-ed-img--dragging { opacity: 0.4; }
.mtg-ed-resize-handle {
  position: absolute; right: -1px; bottom: -1px;
  width: 16px; height: 16px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 40%, var(--purple-bright) 40%);
  border-radius: 0 0 5px 0; opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.mtg-ed-img-wrap { position: relative; display: inline-block; max-width: 100%; }
.mtg-ed-img-wrap:hover .mtg-ed-resize-handle { opacity: 1; }

.mtg-inline-img {
  display: block; max-width: 100%; height: auto;
  border-radius: 8px; margin: 10px 0;
  border: 1px solid var(--border); cursor: pointer;
  transition: box-shadow 0.15s;
}
.mtg-inline-img:hover { box-shadow: var(--shadow-1); }

.mtg-img-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.8); display: flex;
  align-items: center; justify-content: center;
  cursor: zoom-out;
}
.mtg-img-overlay img {
  max-width: 90vw; max-height: 90vh; border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.mtg-img-overlay-close {
  position: absolute; top: 20px; right: 24px;
  background: rgba(255,255,255,0.15); border: none;
  color: #fff; font-size: 1.5rem; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background 0.15s;
}
.mtg-img-overlay-close:hover { background: rgba(255,255,255,0.3); }

.mtg-drop-zone {
  position: relative;
  border: 2px dashed var(--border); border-radius: 12px;
  padding: 28px 20px; text-align: center;
  background: var(--bg-page);
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
}
.mtg-drop-zone.drag-over {
  border-color: var(--purple-bright);
  background: rgba(74,10,91,0.06);
}
body[data-theme="dark"] .mtg-drop-zone.drag-over { background: rgba(161,42,166,0.1); }
.mtg-drop-icon { font-size: 2rem; margin-bottom: 6px; }
.mtg-drop-text { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 4px; }
.mtg-drop-subtext { font-size: 0.8rem; color: var(--text-dim); }
.mtg-browse-label {
  color: var(--purple-bright); cursor: pointer; text-decoration: underline;
  font-weight: 600;
}
.mtg-browse-label:hover { color: var(--purple-light); }

.mtg-file-attached {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 6px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: 0.84rem; color: var(--text);
}
.mtg-file-remove {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 0.9rem; padding: 0 2px;
}
.mtg-file-remove:hover { color: #dc2626; }

.mtg-ai-row {
  display: flex; justify-content: center; margin-top: 12px;
}
.mtg-ai-btn {
  padding: 9px 24px; border: none; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #007a74, #00a89d);
  color: #fff; font-weight: 700; font-size: 0.88rem;
  cursor: pointer; font-family: inherit;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(0,122,116,0.25);
}
.mtg-ai-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.mtg-ai-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.mtg-ns-header {
  display: flex; gap: 8px; align-items: center; margin-bottom: 4px;
  padding: 0 0 4px; border-bottom: 1px solid var(--border);
}
.mtg-ns-header span {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim);
}
.mtg-nsh-done { width: 26px; flex-shrink: 0; }
.mtg-nsh-action { flex: 3; }
.mtg-nsh-owner { flex: 1.5; }
.mtg-nsh-priority { flex: 1; }
.mtg-nsh-date { flex: 1.2; }
.mtg-nsh-remove { width: 28px; flex-shrink: 0; }

.mtg-ns-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 6px;
}
.mtg-ns-row input[type="text"], .mtg-ns-row input[type="date"] { flex: 1; }
.mtg-ns-action { flex: 3 !important; }
.mtg-ns-owner { flex: 1.5 !important; }
.mtg-ns-date { flex: 1.2 !important; }
.mtg-ns-row input[type="text"], .mtg-ns-row input[type="date"], .mtg-ns-row select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-page); color: var(--text); font: inherit; font-size: 0.85rem;
}
.mtg-ns-row input:focus, .mtg-ns-row select:focus {
  outline: none; border-color: var(--purple-bright); box-shadow: var(--ring);
}

.mtg-ns-priority {
  flex: 1 !important; cursor: pointer; font-weight: 600;
  appearance: auto;
}
.mtg-ns-priority.mtg-pri-high {
  background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.3); color: #dc2626;
}
.mtg-ns-priority.mtg-pri-medium {
  background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); color: #b45309;
}
.mtg-ns-priority.mtg-pri-low {
  background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); color: #047857;
}
body[data-theme="dark"] .mtg-ns-priority.mtg-pri-high { background: rgba(220,38,38,0.15); color: #f87171; }
body[data-theme="dark"] .mtg-ns-priority.mtg-pri-medium { background: rgba(245,158,11,0.15); color: #fbbf24; }
body[data-theme="dark"] .mtg-ns-priority.mtg-pri-low { background: rgba(16,185,129,0.15); color: #34d399; }

.mtg-ns-check-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; cursor: pointer; position: relative;
}
.mtg-ns-check-wrap input { position: absolute; opacity: 0; width: 0; height: 0; }
.mtg-ns-checkmark {
  width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid var(--border); background: var(--bg-page);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.mtg-ns-check-wrap input:checked + .mtg-ns-checkmark {
  background: linear-gradient(135deg, #047857, #10b981);
  border-color: #047857;
}
.mtg-ns-check-wrap input:checked + .mtg-ns-checkmark::after {
  content: "✓"; color: #fff; font-size: 0.7rem; font-weight: 900;
}

.mtg-ns-remove {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border); background: none;
  color: var(--text-dim); cursor: pointer; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.12s;
}
.mtg-ns-remove:hover { background: rgba(220,38,38,0.08); border-color: #dc2626; color: #dc2626; }

.mtg-ns-add {
  padding: 5px 14px; border: 1px dashed var(--border); border-radius: 6px;
  background: none; color: var(--text-dim); font-size: 0.82rem;
  cursor: pointer; font-family: inherit; transition: all 0.12s;
}
.mtg-ns-add:hover { border-color: var(--purple-bright); color: var(--purple-bright); }

.mtg-form-actions { display: flex; gap: 10px; margin-top: 4px; }
.mtg-save-btn {
  padding: 9px 24px; border: none; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
  color: #fff; font-weight: 600; font-size: 0.88rem; cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.15s;
}
.mtg-save-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.mtg-cancel-btn {
  padding: 9px 18px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: none; color: var(--text-muted); font-size: 0.88rem; cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.mtg-cancel-btn:hover { background: var(--bg-page); border-color: var(--border-hover); }

.mtg-card {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-card); padding: 16px 20px; margin-bottom: 12px;
  border-left: 4px solid #007a74;
  transition: box-shadow 0.2s, transform 0.2s;
}
.mtg-card:hover { box-shadow: var(--shadow-1); transform: translateY(-1px); }
.mtg-card-header {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;
}
.mtg-card-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mtg-collapse-icon { font-size: 0.7rem; color: var(--text-dim); margin-right: 6px; display: inline-block; width: 0.8em; }
.mtg-card-title { font-weight: 700; font-size: 1rem; color: var(--text); }
.mtg-card-date { font-size: 0.78rem; color: var(--text-dim); }
.mtg-card-actions { display: flex; gap: 4px; }

.mtg-card-attendees {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px;
}
.mtg-attendee-chip {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 0.76rem; font-weight: 600;
  background: var(--purple-glow); color: var(--purple-bright);
  border: 1px solid rgba(74,10,91,0.12);
}
body[data-theme="dark"] .mtg-attendee-chip {
  background: rgba(161,42,166,0.15); color: #d99fdd;
  border-color: rgba(161,42,166,0.25);
}

.mtg-card-summary {
  font-size: 0.9rem; line-height: 1.6; color: var(--text-muted);
  margin-bottom: 10px; white-space: pre-wrap;
}

.mtg-edit-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--purple-bright); background: var(--purple-glow);
  color: var(--purple-bright); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.mtg-edit-btn:hover {
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
  color: #fff; border-color: transparent;
}

.mtg-card-ns { margin-bottom: 10px; }
.mtg-card-ns h4 {
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px;
}
.mtg-ns-progress {
  font-size: 0.72rem; font-weight: 600; color: var(--teal);
  background: rgba(0,122,116,0.08); padding: 2px 10px;
  border-radius: var(--radius-pill); text-transform: none; letter-spacing: 0;
}

.mtg-card-ns-header {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px 5px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.mtg-card-ns-header span {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim);
}
.mtg-cnsh-done { width: 38px; flex-shrink: 0; text-align: center; }
.mtg-cnsh-action { flex: 1; min-width: 80px; padding-left: 4px; }
.mtg-cnsh-owner { width: auto; }
.mtg-cnsh-priority { width: auto; }
.mtg-cnsh-date { width: auto; }
.mtg-card-ns ul {
  list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px;
}
.mtg-card-ns li {
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.45;
  padding: 8px 12px; border-radius: 8px; background: var(--bg-page);
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  transition: opacity 0.2s;
}
.mtg-card-ns li.ns-done {
  opacity: 0.55;
}
.mtg-card-ns li.ns-done .mtg-ns-action-text {
  text-decoration: line-through;
}
.mtg-ns-card-check { width: 26px; height: 22px; flex-shrink: 0; }
.mtg-ns-card-check .mtg-ns-checkmark { width: 18px; height: 18px; border-radius: 4px; }
.mtg-ns-action-text { flex: 1; min-width: 120px; }
.mtg-ns-action-clickable { cursor: pointer; border-radius: 4px; padding: 1px 4px; margin: -1px -4px; transition: background .15s; }
.mtg-ns-action-clickable:hover { background: rgba(8,145,178,0.08); }
.mtg-nse-link-opt:hover { background: rgba(74,10,91,0.06); }

.mtg-ns-owner-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 0.73rem; font-weight: 600;
  background: rgba(0,122,116,0.1); color: var(--teal);
  border: 1px solid rgba(0,122,116,0.15);
}
body[data-theme="dark"] .mtg-ns-owner-tag { background: rgba(0,168,157,0.12); color: #5eead4; }

.mtg-pri-badge {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.mtg-pri-badge.mtg-pri-high {
  background: rgba(220,38,38,0.1); color: #dc2626; border: 1px solid rgba(220,38,38,0.2);
}
.mtg-pri-badge.mtg-pri-medium {
  background: rgba(245,158,11,0.1); color: #b45309; border: 1px solid rgba(245,158,11,0.2);
}
.mtg-pri-badge.mtg-pri-low {
  background: rgba(16,185,129,0.1); color: #047857; border: 1px solid rgba(16,185,129,0.2);
}
body[data-theme="dark"] .mtg-pri-badge.mtg-pri-high { background: rgba(220,38,38,0.18); color: #f87171; border-color: rgba(220,38,38,0.3); }
body[data-theme="dark"] .mtg-pri-badge.mtg-pri-medium { background: rgba(245,158,11,0.18); color: #fbbf24; border-color: rgba(245,158,11,0.3); }
body[data-theme="dark"] .mtg-pri-badge.mtg-pri-low { background: rgba(16,185,129,0.18); color: #34d399; border-color: rgba(16,185,129,0.3); }

.mtg-ns-due-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600;
  background: rgba(74,10,91,0.07); color: var(--purple-bright);
  border: 1px solid rgba(74,10,91,0.12);
}
body[data-theme="dark"] .mtg-ns-due-tag { background: rgba(161,42,166,0.12); color: #d99fdd; border-color: rgba(161,42,166,0.2); }

.mtg-ns-links {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; padding-left: 28px;
}
.mtg-ns-link {
  display: inline-block; padding: 1px 8px; border-radius: 6px;
  font-size: .72rem; font-weight: 600; text-decoration: none;
  transition: all .15s; cursor: pointer; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtg-ns-link-del { background: rgba(124,58,237,0.08); color: #7c3aed; border: 1px solid rgba(124,58,237,0.18); }
.mtg-ns-link-del:hover { background: #7c3aed; color: #fff; }
.mtg-ns-link-act { background: rgba(217,119,6,0.08); color: #b45309; border: 1px solid rgba(217,119,6,0.18); }
.mtg-ns-link-act:hover { background: #d97706; color: #fff; }
body[data-theme="dark"] .mtg-ns-link-del { background: rgba(124,58,237,0.15); color: #c4b5fd; border-color: rgba(124,58,237,0.25); }
body[data-theme="dark"] .mtg-ns-link-act { background: rgba(217,119,6,0.15); color: #fcd34d; border-color: rgba(217,119,6,0.25); }

.mtg-ns-del-pill {
  display: inline-block; padding: 1px 8px; border-radius: 4px;
  font-size: .68rem; font-weight: 600; color: #dc2626; cursor: pointer;
  background: transparent; border: 1px solid #fca5a5;
  transition: all .15s; margin-left: auto; flex-shrink: 0;
}
.mtg-ns-del-pill:hover { background: #fee2e2; }

.mtg-card-files {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.mtg-file-chip {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 0.76rem; background: var(--bg-page); border: 1px solid var(--border);
  color: var(--text-dim);
}

.mtg-edit-history {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.mtg-edit-history h4 {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 6px;
}
.mtg-edit-entry {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 0.78rem; line-height: 1.5; margin-bottom: 3px;
}
.mtg-edit-date {
  flex-shrink: 0; font-weight: 600; color: var(--text-dim);
  font-size: 0.72rem;
}
.mtg-edit-summary {
  color: var(--text-muted); font-style: italic;
}

@media (max-width: 600px) {
  .mtg-toolbar { flex-direction: column; align-items: stretch; }
  .mtg-toolbar-right { flex-wrap: wrap; }
  .mtg-search-input { width: 100%; }
  .mtg-form-row-pair { flex-direction: column; gap: 10px; }
  .mtg-ns-row { flex-wrap: wrap; }
  .mtg-ns-row input { min-width: 0; }
}

/* ═══════════════════════════════════════
   TL;DR / EXECUTIVE SUMMARY
   ═══════════════════════════════════════ */
.es-page {
  background: #f8f7fc;
  color: #1e1e1e;
  border-radius: var(--radius-md);
  box-shadow: 0 6px 32px rgba(0,0,0,0.10);
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
  line-height: 1.6;
}
body[data-theme="dark"] .es-page {
  background: #0f0f1e;
  color: #e2e8f0;
}

/* ── Week timeline bar ── */
.es-timeline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 28px;
  background: linear-gradient(90deg, #1e1e2f, #2d1b4e);
}
.es-tl-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.es-tl-track {
  display: flex;
  flex: 1;
  gap: 3px;
}
.es-wp {
  flex: 1;
  text-align: center;
  padding: 3px 0;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  transition: background 0.2s;
}
.es-wp-num {
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
}
.es-wp--done {
  background: rgba(74,10,91,0.6);
}
.es-wp--done .es-wp-num { color: rgba(255,255,255,0.7); }
.es-wp--now {
  background: linear-gradient(135deg, #7a1a86, #a855f7);
  box-shadow: 0 0 8px rgba(168,85,247,0.5);
}
.es-wp--now .es-wp-num {
  color: #fff;
  font-weight: 800;
}
.es-tl-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #a855f7;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(168,85,247,0.15);
  border: 1px solid rgba(168,85,247,0.3);
}

.es-rag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 800;
  border: 1px solid transparent;
}
.es-rag-pill--R {
  background: rgba(220, 38, 38, 0.45);
  border-color: rgba(252, 165, 165, 0.5);
  color: #fff;
}
.es-rag-pill--A {
  background: rgba(245, 158, 11, 0.5);
  border-color: rgba(253, 224, 71, 0.65);
  color: #1a1408;
}
.es-rag-pill--G {
  background: rgba(16, 185, 129, 0.45);
  border-color: rgba(110, 231, 183, 0.55);
  color: #fff;
}
body[data-theme="dark"] .es-rag-pill--A {
  color: #fffbeb;
}

/* ── Vision banner: vision text + programme RAG on one line (row) ── */
.es-vision {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  background: linear-gradient(100deg, #1e3a5f, #4a0a5b);
  padding: 18px 28px;
}
.es-vision-text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.45;
}
.es-vision-rag {
  flex: 0 0 auto;
  align-self: center;
}
@media (max-width: 520px) {
  .es-vision-text {
    font-size: 0.95rem;
  }
}

/* ── Body grid ── */
.es-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px 28px;
}
@media (max-width: 640px) {
  .es-body { grid-template-columns: 1fr; }
}

/* Section cards */
.es-card {
  border-radius: 10px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body[data-theme="dark"] .es-card {
  background: #1e1e30;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Heading badges */
.es-heading {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: #111;
}
body[data-theme="dark"] .es-heading { color: #f3f4f6; }
.es-heading strong { font-weight: 900; }
.es-hi {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  background: rgba(4,120,87,0.12);
  color: #047857;
}
body[data-theme="dark"] .es-hi { background: rgba(4,120,87,0.18); color: #34d399; }
.es-hi--red { background: rgba(220,38,38,0.1); color: #dc2626; }
body[data-theme="dark"] .es-hi--red { background: rgba(220,38,38,0.15); color: #f87171; }
.es-hi--amber { background: rgba(245,158,11,0.12); color: #b45309; }
body[data-theme="dark"] .es-hi--amber { background: rgba(245,158,11,0.15); color: #fbbf24; }
.es-hi--teal { background: rgba(0,122,116,0.1); color: #007a74; }
body[data-theme="dark"] .es-hi--teal { background: rgba(0,168,157,0.12); color: #00c9b7; }

/* Lists */
.es-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.es-list li {
  padding: 3px 0;
  font-size: 0.86rem;
  line-height: 1.55;
}
.es-list--dash li::before {
  content: "–  ";
  color: var(--text-dim);
}
.es-tick { color: #047857; font-weight: 700; margin-right: 4px; }
.es-cross { color: #dc2626; font-weight: 700; margin-right: 4px; }
.es-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.es-dot--amber { background: #f59e0b; }
.es-dot--red { background: #dc2626; }
.es-li-kind {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-dim); margin-right: 4px;
}

/* ── Metrics strip ── */
.es-metrics-section {
  padding: 16px 28px 18px;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
}
body[data-theme="dark"] .es-metrics-section {
  background: #111827;
  border-top-color: rgba(255,255,255,0.06);
}
.es-metrics-section > .es-heading { margin-bottom: 10px; }
.es-metrics-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
@media (max-width: 800px) {
  .es-metrics-row { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
.es-metric {
  text-align: center;
  background: #f4f0fa;
  border-radius: 10px;
  padding: 12px 6px 10px;
  border: 1px solid rgba(74,10,91,0.08);
}
body[data-theme="dark"] .es-metric {
  background: rgba(74,10,91,0.12);
  border-color: rgba(74,10,91,0.2);
}
.es-metric-value {
  font-size: 1.3rem;
  font-weight: 900;
  color: #4a0a5b;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
body[data-theme="dark"] .es-metric-value { color: #d8b4fe; }
.es-metric-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #111;
  margin-bottom: 3px;
}
body[data-theme="dark"] .es-metric-label { color: #e5e7eb; }
.es-metric-desc {
  font-size: 0.65rem;
  color: #6b7280;
  line-height: 1.4;
}
body[data-theme="dark"] .es-metric-desc { color: #9ca3af; }

/* ── Footer ── */
.es-footer {
  display: flex;
  justify-content: space-between;
  padding: 8px 28px;
  font-size: 0.68rem;
  color: #9ca3af;
  background: #f8f7fc;
  border-top: 1px solid rgba(0,0,0,0.04);
}
body[data-theme="dark"] .es-footer {
  background: #0f0f1e;
  border-top-color: rgba(255,255,255,0.04);
}

/* ═══════════════════════════════════════
   BUTTONS & FORMS
   ═══════════════════════════════════════ */
.btn {
  appearance: none; padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); cursor: pointer; font-size: 0.82rem; font: inherit;
  transition: all 0.18s;
}
.btn:hover { border-color: var(--purple-bright); background: var(--purple-glow); }
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  background: var(--bg-page); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-family: inherit; font-size: 0.88rem;
  transition: border-color 0.18s;
}
input:focus, textarea:focus, select:focus {
  outline: none; box-shadow: var(--ring); border-color: var(--purple-bright);
}

/* ═══════════════════════════════════════
   CHAT BUTTON (topbar)
   ═══════════════════════════════════════ */
.chat-fab-topbar {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 14px 5px 6px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.95);
  cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600;
  transition: all 0.2s;
  margin-right: -6px; /* push flush to far right edge */
}
.chat-fab-topbar:hover {
  background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.45);
}
.chat-fab-topbar-img {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.3);
}
.chat-fab-topbar-label { white-space: nowrap; }

/* Old chat-panel CSS removed — replaced by .ella-panel CSS at end of file */

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.site-footer {
  background: var(--purple-mid); color: rgba(255,255,255,0.95);
  padding: 16px 20px; margin-top: auto;
  margin-left: var(--sidebar-width); text-align: center;
  font-size: 12px;
}
.app.no-sidebar ~ .site-footer { margin-left: 0; }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 800px) {
  .sidebar { width: 0; }
  .sidebar-expand { display: flex; }
  .app { margin-left: 0 !important; padding: 14px; }
  .site-footer { margin-left: 0; }
  .hero-inner { flex-direction: column; }
  .gantt-grid { min-width: 900px; }
  .wiki-layout { grid-template-columns: 1fr; }
  .log-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════ */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(74,10,91,0.18); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(74,10,91,0.35); }
body[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

/* ═══════════════════════════════════════
   SO WHAT — INFOGRAPHIC LAYOUT
   ═══════════════════════════════════════ */

/* Vision banner */
.sw-vision-banner {
  display: flex; align-items: flex-start; gap: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-1);
  padding: 20px 24px; margin-bottom: 20px;
}
.sw-vision-icon {
  font-size: 2rem; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(74,10,91,0.1), rgba(0,122,116,0.08));
  border: 1px solid var(--border);
}
.sw-vision-banner h2 { margin: 0 0 6px; font-size: 1.15rem; color: var(--purple-mid); }
body[data-theme="dark"] .sw-vision-banner h2 { color: #d99fdd; }
.sw-vision-banner p { margin: 0; color: var(--text-muted); line-height: 1.55; font-size: 0.9rem; }

/* Section titles */
.sw-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.1rem; font-weight: 700; color: var(--purple-mid);
  margin: 8px 0 12px; padding-bottom: 6px;
  border-bottom: 2px solid var(--purple-glow);
}
body[data-theme="dark"] .sw-section-title { color: #d99fdd; }
.sw-section-icon {
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
  color: #fff; box-shadow: 0 4px 12px rgba(74,10,91,0.2);
}

/* Goals grid — 4 cards */
.sw-goals-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.sw-goal-card {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-1);
  padding: 18px; text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.sw-goal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--border-hover); }
.sw-goal-icon {
  width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.sw-goal-card h3 { font-size: 0.95rem; margin: 0 0 6px; color: var(--text); }
.sw-goal-card p { font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); margin: 0; }

/* Metrics grid */
.sw-metrics-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.sw-metric-card {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-1);
  padding: 16px; text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.sw-metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.sw-metric-value {
  font-size: 1.6rem; font-weight: 900; color: var(--purple-mid);
  margin-bottom: 8px; letter-spacing: -0.5px;
}
body[data-theme="dark"] .sw-metric-value { color: #d99fdd; }
.sw-metric-label {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #111; margin-bottom: 6px;
}
body[data-theme="dark"] .sw-metric-label {
  color: #f3f4f6;
}
.sw-metric-card p { font-size: 0.78rem; color: var(--text-muted); margin: 0; line-height: 1.4; }

/* Benefits grid */
.sw-benefits-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.sw-benefit-card {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-1);
  padding: 18px; text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.sw-benefit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.sw-benefit-icon {
  font-size: 2rem; margin-bottom: 8px;
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(74,10,91,0.08), rgba(0,122,116,0.06));
  border: 1px solid var(--border);
}
.sw-benefit-card h3 { font-size: 0.95rem; margin: 0 0 4px; }
.sw-benefit-card p { font-size: 0.82rem; color: var(--text-muted); margin: 0; line-height: 1.45; }

.sw-outcomes-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.sw-outcomes-table th {
  text-align: left; padding: 10px 12px; font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim);
  border-bottom: 2px solid var(--border); background: var(--bg-page);
}
.sw-outcomes-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top;
  line-height: 1.45;
}
.sw-outcomes-table tbody tr:hover { background: rgba(139,92,246,0.04); }
body[data-theme="dark"] .sw-outcomes-table tbody tr:hover { background: rgba(139,92,246,0.1); }

/* ═══════════════════════════════════════
   WORKFLOW DESIGNER
   ═══════════════════════════════════════ */
.wf-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wf-toolbar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; flex-wrap: wrap;
  background: var(--bg-card); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.wf-tb-select { padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-page); color: var(--text); font-size: 0.82rem; min-width: 140px; }
.wf-tb-btn {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text); font-size: 0.78rem; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.wf-tb-btn:hover { background: var(--bg-page); border-color: var(--purple-bright); }
.wf-tb-primary { background: linear-gradient(135deg, var(--purple-mid), var(--purple-bright)); color: #fff; border-color: transparent; }
.wf-tb-primary:hover { opacity: 0.9; }
.wf-tb-danger { color: #dc2626; border-color: #fca5a5; }
.wf-tb-danger:hover { background: #fee2e2; }
.wf-tb-sm { padding: 4px 7px; font-size: 0.75rem; }
.wf-tb-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
.wf-tb-label { font-size: 0.72rem; color: var(--text-dim); font-weight: 600; }

.wf-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

.wf-sidebar {
  display: flex; flex-direction: column; flex-shrink: 0;
  transition: width 0.25s ease, min-width 0.25s ease;
  overflow: hidden;
}
.wf-sidebar-left { width: 170px; min-width: 170px; border-right: 1px solid var(--border); background: var(--bg-card); }
.wf-sidebar-right { width: 260px; min-width: 260px; border-left: 1px solid var(--border); background: var(--bg-card); }
.wf-sidebar-collapsed { width: 32px !important; min-width: 32px !important; }
.wf-sidebar-collapsed .wf-palette,
.wf-sidebar-collapsed .wf-props { display: none; }
.wf-sidebar-collapsed .wf-sidebar-title { display: none; }
.wf-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.wf-sidebar-title { font-size: 0.72rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.wf-sidebar-toggle {
  width: 22px; height: 22px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-page); color: var(--text-dim); cursor: pointer; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0;
}
.wf-sidebar-toggle:hover { border-color: var(--purple-bright); color: var(--text); }

.wf-palette {
  flex: 1; overflow-y: auto; padding: 10px 8px;
}
.wf-pal-cat { font-size: 0.7rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 4px 4px; }
.wf-pal-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm);
  cursor: grab; transition: background 0.15s; font-size: 0.8rem;
}
.wf-pal-item:hover { background: rgba(139,92,246,0.08); }
.wf-pal-icon {
  width: 28px; height: 28px; border-radius: 6px; border: 2px solid;
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0;
}
.wf-pal-label { font-size: 0.78rem; color: var(--text); }

.wf-canvas-wrap { flex: 1; overflow: hidden; position: relative; background: var(--bg-page); }
#wf-svg { width: 100%; height: 100%; display: block; cursor: grab; }
#wf-svg:active { cursor: grabbing; }

.wf-props {
  flex: 1; overflow-y: auto; padding: 14px 12px;
}
.wf-props-empty { color: var(--text-dim); font-size: 0.82rem; text-align: center; padding-top: 40px; }
.wf-props-title { font-size: 0.9rem; margin: 0 0 12px; }
.wf-props-label { display: block; font-size: 0.72rem; color: var(--text-dim); font-weight: 600; margin-bottom: 10px; }
.wf-props-input {
  display: block; width: 100%; padding: 5px 8px; margin-top: 3px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-page); color: var(--text); font-family: inherit; font-size: 0.82rem;
}
.wf-props-ta { min-height: 60px; resize: vertical; }
.wf-props-del { margin-top: 16px; width: 100%; }
.wf-props-process { margin-top: 8px; width: 100%; }

.wf-node { cursor: grab; }
.wf-node:hover { filter: brightness(1.04); }
.wf-node-fo { overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.wf-node-fo-label { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wf-node-fo-desc { font-size: 0.72em; color: var(--text-dim); margin-top: 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wf-node-label { pointer-events: none; }

.wf-port { fill: transparent; stroke: transparent; stroke-width: 2; cursor: crosshair; transition: all 0.15s; }
.wf-port-out:hover, .wf-port-in:hover { r: 8; }
.wf-node:hover ~ .wf-port, .wf-port:hover { fill: rgba(139,92,246,0.15); stroke: var(--purple-bright); }
.wf-port-out { fill: rgba(59,130,246,0.1); stroke: #3b82f6; }
.wf-port-in { fill: rgba(156,163,175,0.1); stroke: #9ca3af; }

.wf-edge-hit { cursor: pointer; }
.wf-edge-vis { pointer-events: none; }

/* ═══════════════════════════════════════
   VISION PAGE
   ═══════════════════════════════════════ */
.vis-statement {
  display: flex; gap: 0; margin: 14px 0 16px;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg-card); box-shadow: var(--shadow-2);
}
.vis-statement-accent {
  width: 6px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--purple-bright), var(--teal));
}
.vis-statement-body {
  padding: 28px 32px;
}
.vis-statement-body h2 { margin: 0 0 10px; font-size: 1.3rem; color: var(--text); }
.vis-statement-body p { margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); }
.vis-statement-body ul, .vis-statement-body ol { margin: 0.5em 0 0.5em 1.4em; padding: 0; font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); }
.vis-statement-body li { margin-bottom: 0.3rem; }

.vis-section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 700; margin: 18px 0 10px;
  color: var(--text); letter-spacing: -0.01em;
}
.vis-section-icon { font-size: 1.3rem; }

.vis-pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px;
}
.vis-pillar {
  display: flex; align-items: flex-start; gap: 16px;
  border-radius: var(--radius-md); padding: 24px 22px;
  background: var(--bg-card); box-shadow: var(--shadow-1);
  border-left: 4px solid transparent; transition: transform 0.2s, box-shadow 0.2s;
}
.vis-pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.vis-pillar--problem { border-left-color: #ef4444; }
.vis-pillar-icon { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }
.vis-pillar h3 { font-size: 1rem; margin: 0 0 8px; color: var(--text); }
.vis-pillar p { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.55; }

.vis-capabilities {
  display: flex; flex-direction: column; gap: 16px;
}
.vis-cap-card {
  display: flex; align-items: flex-start; gap: 20px;
  background: var(--bg-card); border-radius: var(--radius-md);
  padding: 22px 24px; box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}
.vis-cap-card:hover { transform: translateX(4px); box-shadow: var(--shadow-2); }
.vis-cap-number {
  font-size: 1.6rem; flex-shrink: 0;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(74,10,91,0.1), rgba(0,122,116,0.1));
}
body[data-theme="dark"] .vis-cap-number {
  background: linear-gradient(135deg, rgba(161,42,166,0.15), rgba(0,168,157,0.15));
}
.vis-cap-content h3 { margin: 0 0 6px; font-size: 0.95rem; color: var(--text); }
.vis-cap-content p { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; }

.vis-impact-flow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
}
.vis-impact-card {
  border-radius: var(--radius-md); padding: 24px 20px;
  background: var(--bg-card); box-shadow: var(--shadow-1);
  text-align: center; transition: transform 0.2s, box-shadow 0.2s;
}
.vis-impact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.vis-impact-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 12px; color: #fff;
}
.vis-impact-card h3 { font-size: 0.95rem; margin: 0 0 8px; color: var(--text); }
.vis-impact-card p { font-size: 0.82rem; color: var(--text-muted); margin: 0; line-height: 1.5; text-align: left; }

.vis-personas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px;
}
.vis-persona {
  background: var(--bg-card); border-radius: var(--radius-md);
  padding: 22px 18px; box-shadow: var(--shadow-1); text-align: center;
  border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s;
}
.vis-persona:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.vis-persona-avatar { font-size: 2.2rem; margin-bottom: 8px; }
.vis-persona h3 { font-size: 0.9rem; margin: 0 0 6px; color: var(--text); }
.vis-persona p { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.45; text-align: left; }

.vis-closing {
  margin: 40px 0 20px; padding: 0 8px;
}
.vis-closing blockquote {
  margin: 0; padding: 24px 32px;
  background: linear-gradient(135deg, rgba(74,10,91,0.06), rgba(0,122,116,0.06));
  border-left: 5px solid var(--purple-bright);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 1.05rem; line-height: 1.7; color: var(--text);
  font-style: italic;
}
body[data-theme="dark"] .vis-closing blockquote {
  background: linear-gradient(135deg, rgba(161,42,166,0.08), rgba(0,168,157,0.08));
}

/* ═══════════════════════════════════════
   LOG SECTION DIVIDERS (Risks vs Issues)
   ═══════════════════════════════════════ */
.log-section-divider {
  border-radius: var(--radius-md); overflow: hidden;
  margin-bottom: 14px; margin-top: 8px;
}
.log-section-stripe {
  height: 4px; width: 100%;
}
.log-section-risks .log-section-stripe {
  background: linear-gradient(90deg, #dc2626, #f59e0b, #007a74);
}
.log-section-issues .log-section-stripe {
  background: linear-gradient(90deg, #6d28d9, #ec4899, #f59e0b);
}
.log-section-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-1);
}
.log-section-icon {
  font-size: 1.5rem; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-page); border: 1px solid var(--border);
}
.log-section-header h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.log-section-header p { margin: 0; font-size: 0.8rem; color: var(--text-dim); }
.log-section-count {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 10px; min-width: 28px; height: 28px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 800; white-space: nowrap;
  background: var(--purple-glow); border: 1px solid var(--border);
  color: var(--purple-mid);
}
body[data-theme="dark"] .log-section-count { color: #d99fdd; }

/* ═══════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════ */
/* ═══════════════════════════════════════
   SUCCESS MAP (Graph View)
   ═══════════════════════════════════════ */

.gn-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-1);
}
.gn-toolbar .g-btn {
  appearance: none; padding: 7px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-page);
  color: var(--text); cursor: pointer; font: inherit; font-size: 0.82rem;
  font-weight: 600; transition: all 0.18s; display: inline-flex;
  align-items: center; gap: 5px;
}
.gn-toolbar .g-btn:hover {
  border-color: var(--purple-bright); background: var(--purple-glow); color: var(--purple-mid);
}
.gn-toolbar .g-btn.gn-active {
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-light));
  color: #fff; border-color: transparent;
}
.gn-legend {
  display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto;
  align-items: center;
}
.gn-legend-dot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--text-dim); font-weight: 500;
  white-space: nowrap;
}
.gn-legend-dot span {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  flex-shrink: 0;
}

.gn-score-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 12px 18px; border-radius: var(--radius-md);
  background: linear-gradient(100deg, rgba(74,10,91,0.06), rgba(0,122,116,0.04));
  border: 1px solid var(--border);
}
body[data-theme="dark"] .gn-score-bar {
  background: linear-gradient(100deg, rgba(161,42,166,0.08), rgba(0,168,157,0.06));
}
.gn-score-label {
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  white-space: nowrap;
}
.gn-score-track {
  flex: 1; height: 10px; border-radius: 5px;
  background: var(--bg-page); overflow: hidden;
  border: 1px solid var(--border);
}
.gn-score-fill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.gn-score-pct {
  font-size: 1.1rem; font-weight: 900; color: var(--purple-mid);
  min-width: 48px; text-align: right;
}
body[data-theme="dark"] .gn-score-pct { color: #d99fdd; }

.gn-wrap {
  overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-page); box-shadow: var(--shadow-1);
  position: relative; max-width: 100%;
}
#sec-graph { overflow: hidden; min-width: 0; }
body[data-theme="dark"] .gn-wrap {
  background: #0d1117;
}

.gn-canvas {
  position: relative; min-height: 650px; width: 100%; box-sizing: border-box;
  background:
    radial-gradient(circle at 10% 20%, rgba(74,10,91,0.03) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(0,122,116,0.03) 0%, transparent 50%);
}
body[data-theme="dark"] .gn-canvas {
  background:
    radial-gradient(circle at 10% 20%, rgba(161,42,166,0.04) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(0,168,157,0.04) 0%, transparent 50%);
}

.gn-grid-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.4;
}

.gn-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;
}
.gn-edge-path {
  fill: none; stroke: var(--text-dim); stroke-width: 2;
  stroke-opacity: 0.35; pointer-events: stroke;
  transition: stroke-opacity 0.2s;
}
.gn-edge-path:hover {
  stroke-opacity: 0.7; stroke-width: 2.5; cursor: pointer;
  pointer-events: stroke;
}
.gn-edge-path.gn-edge-highlight {
  stroke: var(--purple-bright); stroke-opacity: 0.7; stroke-width: 2.5;
}

.gn-node {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--bg-card);
  border: 2px solid var(--nc, var(--border));
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  cursor: grab; user-select: none;
  min-width: 100px; box-sizing: border-box;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text);
}
.gn-node:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transform: translateY(-1px);
  z-index: 5;
}
.gn-node:active { cursor: grabbing; }
.gn-node.selected {
  box-shadow: 0 0 0 3px var(--nc, var(--purple-bright)), 0 4px 20px rgba(0,0,0,0.15);
  transform: translateY(-2px);
  z-index: 6;
}
.gn-node.gn-conn-source {
  box-shadow: 0 0 0 3px var(--purple-bright), 0 0 16px rgba(122,26,134,0.3);
  animation: gnPulse 1.5s ease-in-out infinite;
}
@keyframes gnPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--purple-bright), 0 0 16px rgba(122,26,134,0.2); }
  50% { box-shadow: 0 0 0 5px var(--purple-bright), 0 0 24px rgba(122,26,134,0.4); }
}
.gn-node-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(0,0,0,0.06); border-radius: 0 0 10px 10px;
}
.gn-node-progress-fill {
  height: 100%; border-radius: 0 0 10px 10px;
  transition: width 0.4s ease;
  opacity: 0.7;
}
.gn-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0,0,0,0.15);
}
.gn-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
}

.gn-metric {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,122,116,0.08), rgba(74,10,91,0.06));
  border: 2px solid var(--teal);
  min-width: 140px; box-sizing: border-box;
  overflow: hidden;
  cursor: pointer; user-select: none;
  transition: box-shadow 0.2s, transform 0.15s;
  font-size: 0.8rem; font-weight: 700;
  color: var(--text);
}
body[data-theme="dark"] .gn-metric {
  background: linear-gradient(135deg, rgba(0,168,157,0.1), rgba(161,42,166,0.08));
}
.gn-metric:hover {
  box-shadow: 0 4px 20px rgba(0,122,116,0.15);
  transform: translateY(-1px);
  z-index: 5;
}
.gn-metric.selected {
  box-shadow: 0 0 0 3px var(--teal), 0 4px 20px rgba(0,122,116,0.2);
  z-index: 6;
}
.gn-metric.gn-conn-source {
  box-shadow: 0 0 0 3px var(--purple-bright), 0 0 16px rgba(122,26,134,0.3);
  animation: gnPulse 1.5s ease-in-out infinite;
}
.gn-resize-handle {
  position: absolute; bottom: 0; right: 0; width: 14px; height: 14px;
  cursor: nwse-resize; z-index: 10; opacity: 0;
  transition: opacity 0.15s;
  background:
    linear-gradient(135deg, transparent 50%, var(--text-dim) 50%, var(--text-dim) 55%, transparent 55%),
    linear-gradient(135deg, transparent 65%, var(--text-dim) 65%, var(--text-dim) 70%, transparent 70%);
  border-radius: 0 0 10px 0;
}
.gn-node:hover .gn-resize-handle,
.gn-metric:hover .gn-resize-handle,
.gn-node.selected .gn-resize-handle,
.gn-metric.selected .gn-resize-handle { opacity: 0.5; }
.gn-resize-handle:hover { opacity: 0.9 !important; }
.gn-node.gn-resizing, .gn-metric.gn-resizing {
  transition: none !important; transform: none !important;
  z-index: 10;
}
.gn-metric-icon {
  font-size: 1.2rem; flex-shrink: 0;
}
.gn-metric-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
}
.gn-metric-progress {
  position: absolute; bottom: -4px; left: 14px; right: 14px;
  height: 5px; border-radius: 3px; background: rgba(0,0,0,0.08);
  overflow: hidden;
}
body[data-theme="dark"] .gn-metric-progress {
  background: rgba(255,255,255,0.1);
}
.gn-metric-progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), #34d399);
  transition: width 0.5s ease;
}

.gn-edit-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.gn-edit-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.4);
}
.gn-edit {
  position: relative; z-index: 1;
  padding: 22px 28px; max-width: 600px; width: 92%;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: fadeUp 0.25s ease;
}
.gn-edit.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.gn-edit-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.gn-edit-header h3 {
  margin: 0; font-size: 1rem; color: var(--purple-mid);
  display: flex; align-items: center; gap: 8px;
}
body[data-theme="dark"] .gn-edit-header h3 { color: #d99fdd; }
.gn-edit-close {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; transition: all 0.15s;
}
.gn-edit-close:hover { border-color: #dc2626; color: #dc2626; }
.gn-edit-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 640px) { .gn-edit-body { grid-template-columns: 1fr; } }
.gn-edit-field { display: flex; flex-direction: column; gap: 4px; }
.gn-edit-field.full { grid-column: 1 / -1; }
.gn-edit-field label {
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim);
}
.gn-edit-field input,
.gn-edit-field textarea {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-page); color: var(--text); font: inherit; font-size: 0.88rem;
  transition: border-color 0.15s;
}
.gn-edit-field input:focus,
.gn-edit-field textarea:focus {
  outline: none; border-color: var(--purple-bright); box-shadow: var(--ring);
}
.gn-edit-field textarea { min-height: 60px; resize: vertical; }

.gn-status-picker {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.gn-status-btn {
  appearance: none; padding: 5px 12px; border-radius: var(--radius-pill);
  border: 2px solid var(--sb, var(--border));
  background: var(--sbg, transparent);
  color: var(--sc, var(--text-muted));
  font: inherit; font-size: 0.76rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 4px;
}
.gn-status-btn:hover { transform: translateY(-1px); }
.gn-status-btn.active {
  box-shadow: 0 0 0 2px var(--sb), 0 2px 8px rgba(0,0,0,0.1);
  transform: scale(1.05);
}

.gn-edit-actions {
  display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}

.gn-connections {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.gn-connections h4 {
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim); margin: 0 0 8px;
}
.gn-conn-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.gn-conn-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--purple-glow); border: 1px solid var(--border);
  font-size: 0.76rem; color: var(--text-muted);
}
.gn-conn-remove {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 0.7rem; padding: 0 2px;
  line-height: 1;
}
.gn-conn-remove:hover { color: #dc2626; }

/* ── Success Map detail sections (metric activities + node actions) ── */
.gn-edit-wide { max-width: 920px; }
.gn-detail-section {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.gn-detail-section h4 {
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim); margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.gn-detail-summary {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--text-muted); font-size: 0.74rem;
}

/* Temperature bar rows (metric modal) */
.gn-activity-list { display: flex; flex-direction: column; gap: 8px; }
.gn-activity-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 8px; background: var(--bg-page);
  border: 1px solid var(--border);
}
.gn-activity-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.gn-activity-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.gn-activity-name {
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gn-activity-meta {
  font-size: 0.7rem; color: var(--text-dim); white-space: nowrap; flex-shrink: 0;
}
.gn-temp-bar-wrap {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; width: 140px;
}
.gn-temp-bar {
  flex: 1; height: 10px; border-radius: 5px;
  background: var(--border); overflow: hidden;
}
.gn-temp-fill {
  height: 100%; border-radius: 5px;
  transition: width 0.4s ease, background 0.4s ease;
}
.gn-temp-pct {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  min-width: 30px; text-align: right;
}

/* Action rows (activity modal) */
.gn-action-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 280px; overflow-y: auto;
}
.gn-action-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px;
  transition: background 0.1s;
}
.gn-action-row:hover { background: var(--bg-page); }
.gn-action-icon {
  width: 18px; text-align: center; font-size: 0.82rem; flex-shrink: 0;
}
.gn-as-complete .gn-action-icon { color: #8b5cf6; }
.gn-as-review .gn-action-icon { color: #3b82f6; }
.gn-as-progress .gn-action-icon { color: #3b82f6; }
.gn-as-blocked .gn-action-icon { color: #ef4444; }
.gn-as-notstarted .gn-action-icon { color: #9ca3af; }
.gn-as-deferred .gn-action-icon { color: #9ca3af; }
.gn-as-complete .gn-action-name { text-decoration: line-through; color: var(--text-dim); }
.gn-action-info { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.gn-action-name {
  font-size: 0.8rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gn-action-owner { font-size: 0.68rem; color: var(--text-dim); }
.gn-action-meta { font-size: 0.68rem; color: var(--text-dim); display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; flex-shrink: 0; }
.gn-action-dates { font-family: monospace; font-size: 0.66rem; color: var(--purple-mid, #7a1a86); white-space: nowrap; }
.gn-action-row { cursor: pointer; }
.gn-future-tag { display: inline-block; font-size: 0.6rem; font-weight: 600; padding: 0 5px; border-radius: 6px; background: #e0f2fe; color: #0369a1; vertical-align: middle; margin-left: 4px; }
body[data-theme="dark"] .gn-future-tag { background: #0c3547; color: #7dd3fc; }
.gn-action-status-badge {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px 8px; border-radius: var(--radius-pill);
  white-space: nowrap; flex-shrink: 0;
}
.gn-as-complete .gn-action-status-badge { background: #ede9fe; color: #7c3aed; }
.gn-as-review .gn-action-status-badge { background: #dbeafe; color: #2563eb; }
.gn-as-progress .gn-action-status-badge { background: #dbeafe; color: #2563eb; }
.gn-as-blocked .gn-action-status-badge { background: #fee2e2; color: #dc2626; }
.gn-as-notstarted .gn-action-status-badge { background: #f3f4f6; color: #6b7280; }
.gn-as-deferred .gn-action-status-badge { background: #f3f4f6; color: #6b7280; }
body[data-theme="dark"] .gn-as-complete .gn-action-status-badge { background: #3b1f5e; color: #c4b5fd; }
body[data-theme="dark"] .gn-as-review .gn-action-status-badge { background: #1e3a5f; color: #93c5fd; }
body[data-theme="dark"] .gn-as-progress .gn-action-status-badge { background: #1e3a5f; color: #93c5fd; }
body[data-theme="dark"] .gn-as-blocked .gn-action-status-badge { background: #5f1e1e; color: #fca5a5; }
body[data-theme="dark"] .gn-as-notstarted .gn-action-status-badge { background: #374151; color: #9ca3af; }
body[data-theme="dark"] .gn-as-deferred .gn-action-status-badge { background: #374151; color: #9ca3af; }

.gn-empty-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; color: var(--text-dim); pointer-events: none; z-index: 0;
  opacity: 0.5;
}
.gn-empty-hint-icon { font-size: 3rem; margin-bottom: 8px; display: block; }

.gn-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 10px 24px; border-radius: var(--radius-pill);
  background: var(--purple-mid); color: #fff;
  font-size: 0.85rem; font-weight: 600; z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  animation: gnToastIn 0.3s ease-out;
  pointer-events: none;
}
@keyframes gnToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 800px) {
  .gn-toolbar { flex-direction: column; align-items: stretch; }
  .gn-legend { margin-left: 0; justify-content: center; }
  .gn-edit-body { grid-template-columns: 1fr; }
}

/* ── Stakeholder Map ─────────────────────── */
.sh-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; margin-bottom: 6px;
}
.sh-filter {
  padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: 0.78rem; cursor: pointer;
}
.sh-legend { display: flex; gap: 10px; font-size: 0.72rem; color: var(--text-dim); flex-wrap: wrap; }
.sh-leg-item { display: flex; align-items: center; gap: 4px; }
.sh-leg-dot { width: 8px; height: 8px; border-radius: 50%; }
.sh-zoom-ctrl { display: flex; align-items: center; gap: 4px; }
.sh-zoom-btn {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: 0.85rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.sh-zoom-btn:hover { background: var(--purple-bright); color: #fff; }

.sh-wrap {
  overflow: hidden; border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg-page); box-shadow: var(--shadow-1); position: relative;
  cursor: grab; min-height: 700px;
}
.sh-wrap:active { cursor: grabbing; }

.sh-canvas {
  position: relative; transition: transform 0.1s ease-out;
}
.sh-grid-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 30px 30px; opacity: 0.25;
}
.sh-svg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.sh-node {
  position: absolute; z-index: 3; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  background: var(--sh-bg, var(--bg-card));
  border: 2px solid var(--sh-c, var(--border));
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  cursor: pointer; user-select: none;
  transition: box-shadow 0.2s, transform 0.15s;
  font-size: 0.72rem; font-weight: 700;
  overflow: visible;
}
.sh-node:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transform: scale(1.08);
  z-index: 10;
}
.sh-node-sel {
  box-shadow: 0 0 0 3px var(--sh-c, var(--purple-bright)), 0 4px 20px rgba(0,0,0,0.2) !important;
  transform: scale(1.1) !important;
  z-index: 11;
}
.sh-initials { color: var(--sh-c, var(--text)); letter-spacing: 0.5px; }
.sh-days-badge {
  position: absolute; top: -6px; left: -6px;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  font-size: 0.58rem; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25); z-index: 5;
  line-height: 1;
}
.sh-today-btn {
  margin-left: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); font-size: 0.72rem; cursor: pointer;
}
.sh-today-btn:hover { background: var(--purple-bright); color: #fff; }
.sh-raci-badge {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px; border-radius: 50%; font-size: 0.6rem; font-weight: 800;
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2); z-index: 4;
}
.sh-influence-ring {
  position: absolute; inset: -4px; border-radius: 12px; pointer-events: none; z-index: 2;
}

.sh-edit-close {
  background: none; border: none; font-size: 1.2rem; cursor: pointer;
  color: var(--text-dim); padding: 4px 8px; border-radius: 6px;
}
.sh-edit-close:hover { background: var(--bg-page); }
.sh-edit-body {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.sh-edit-body .full { grid-column: 1 / -1; }
.sh-edit-field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
.sh-edit-field input, .sh-edit-field select, .sh-edit-field textarea {
  width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-page); color: var(--text); font-size: 0.85rem;
  box-sizing: border-box;
}
.sh-btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-raci-btn, .sh-sent-btn {
  appearance: none; padding: 5px 12px; border-radius: var(--radius-pill);
  border: 2px solid var(--sb, var(--border)); background: var(--sbg, transparent);
  color: var(--sc, var(--text-muted)); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.sh-raci-btn:hover, .sh-sent-btn:hover { opacity: 0.85; }
.sh-raci-btn.active, .sh-sent-btn.active {
  box-shadow: 0 0 0 2px var(--sb), 0 2px 8px rgba(0,0,0,0.1);
  transform: scale(1.05); font-weight: 800;
}
.sh-edit-actions { display: flex; gap: 8px; align-items: center; }

.sh-stats {
  display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; justify-content: center;
}
.sh-stat-card {
  text-align: center; padding: 8px 14px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  min-width: 60px;
}
.sh-stat-val { font-size: 1.3rem; font-weight: 800; }
.sh-stat-lbl { font-size: 0.68rem; color: var(--text-dim); margin-top: 2px; }

.sh-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 10px 24px; border-radius: var(--radius-pill);
  background: var(--purple-mid); color: #fff;
  font-size: 0.85rem; font-weight: 600; z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  animation: gnToastIn 0.3s ease-out; pointer-events: none;
}

@media (max-width: 800px) {
  .sh-toolbar { flex-direction: column; align-items: stretch; }
  .sh-edit-body { grid-template-columns: 1fr; }
  .sh-stats { justify-content: flex-start; }
}

/* ── Mission Control ─────────────────────── */
.mc-hud {
  display: flex; align-items: center; gap: 20px; padding: 18px 22px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-1); margin-bottom: 16px; flex-wrap: wrap;
}
.mc-hud-left { flex-shrink: 0; transition: transform .2s, filter .2s; }
.mc-hud-left:hover { transform: scale(1.08); filter: brightness(1.1); }
.mc-hud-centre { flex: 1; min-width: 250px; }
.mc-hud-right { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mc-hud-title { font-size: 1.3rem; font-weight: 800; color: var(--purple-mid); }
.mc-hud-subtitle { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 6px; }
.mc-hud-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.8rem; margin-bottom: 8px; }
.mc-stat { color: var(--text-muted); }
.mc-stat strong { color: var(--text); }
.mc-score-ring .mc-score-arc {
  transition: stroke-dasharray 1.2s cubic-bezier(0.4,0,0.2,1);
}
/* Comms Planner tabs */
.cp-tab {
  padding: 10px 20px; font-weight: 700; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: .9rem; color: var(--text-dim, #888);
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s;
}
.cp-tab:hover { color: var(--text); }
.cp-tab--active { color: var(--purple-mid, #7a1a86); border-bottom-color: var(--purple-mid, #7a1a86); }
.cp-sh-row:hover { background: var(--purple-glow, rgba(122,26,134,.06)); border-radius: 6px; }

/* Message Marshalling */
.cm-yard { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-top: 12px; }
@media (max-width: 800px) { .cm-yard { grid-template-columns: 1fr; } }
.cm-section-head {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem;
  padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px 10px 0 0;
}
.cm-section-icon { font-size: 1.1rem; }
.cm-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  border-radius: 999px; font-size: .7rem; font-weight: 700; background: rgba(74,10,91,.1); color: var(--purple-mid,#7a1a86);
}
.cm-inbox-body, .cm-groups {
  border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px;
  padding: 10px; min-height: 120px; background: var(--bg-card);
}
.cm-pill {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px;
  background: var(--bg-page,#f8f8fa); margin-bottom: 4px; font-size: .82rem; cursor: grab;
  transition: box-shadow .15s, opacity .15s;
}
.cm-pill:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.cm-pill--grouped { cursor: default; font-size: .78rem; padding: 5px 8px; }
.cm-pill-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cm-pill-owner { font-size: .7rem; color: var(--text-dim); flex-shrink: 0; }
.cm-pill-x { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: .8rem; padding: 0 2px; flex-shrink: 0; }
.cm-pill-x:hover { color: #dc2626; }
.cm-group { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.cm-group-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-page,#f8f8fa);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.cm-group-name {
  font-weight: 700; font-size: .88rem; border: 1px solid transparent; background: transparent;
  padding: 2px 6px; border-radius: 4px; font-family: inherit; color: var(--text);
  flex: 1 1 auto; min-width: 200px;
}
.cm-group-name:focus { border-color: var(--purple-mid,#7a1a86); outline: none; background: var(--bg-card); }
.cm-group-recipients {
  font-size: .78rem; border: 1px solid transparent; background: transparent; padding: 2px 6px;
  border-radius: 4px; font-family: inherit; color: var(--text); min-width: 120px; max-width: 220px;
}
.cm-group-recipients:focus { border-color: #0891b2; outline: none; background: var(--bg-card); }
.cm-group-recipients::placeholder { color: var(--text-dim); opacity: 0.6; }
.cm-recip-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.cm-recip-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.cm-recip-pill--matched { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.cm-recip-pill--unmatched { background: #fef3cd; color: #92400e; border: 1px solid #fcd34d; }
.cm-recip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cm-recip-dot--matched { background: #16a34a; }
.cm-recip-dot--unmatched { background: #d97706; }
.cm-recip-email { font-weight: 400; color: #166534; font-size: .65rem; }
.cm-recip-x {
  background: none; border: none; cursor: pointer; font-size: .85rem; line-height: 1;
  color: inherit; opacity: 0.5; padding: 0 0 0 2px; flex-shrink: 0;
}
.cm-recip-x:hover { opacity: 1; }
.cm-recip-opt:hover { background: var(--purple-tint, rgba(122,26,134,.06)); }
[data-theme="dark"] .cm-recip-pill--matched { background: rgba(22,163,74,.15); color: #86efac; border-color: rgba(22,163,74,.3); }
[data-theme="dark"] .cm-recip-pill--unmatched { background: rgba(217,119,6,.15); color: #fcd34d; border-color: rgba(217,119,6,.3); }
[data-theme="dark"] .cm-recip-email { color: #86efac; }
.cm-group-audience { font-size: .68rem; color: var(--text-dim); }
.cm-badge { padding: 2px 8px; border-radius: 4px; font-size: .65rem; font-weight: 700; }
.cm-badge--draft { background: #dcfce7; color: #15803d; }
.cm-group-drop { padding: 8px; min-height: 50px; transition: background .15s; }
.cm-drop-active { background: rgba(8,145,178,.08); outline: 2px dashed #0891b2; outline-offset: -2px; border-radius: 0 0 10px 10px; }
.cm-drop-hint { padding: 12px; text-align: center; font-size: .78rem; color: var(--text-dim); font-style: italic; }
.cm-draft-preview { padding: 8px 12px; border-top: 1px solid var(--border); }
.cm-draft-preview--visible {
  padding: 12px 14px; margin: 8px 0 0;
  border: 2px solid var(--purple-bright, #7a1a86);
  border-radius: 10px;
  background: var(--bg-soft, #f8f5fa);
}
.cm-draft-text {
  width: 100%; font-family: inherit; font-size: .84rem; line-height: 1.6; border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; background: var(--bg-card); color: var(--text); resize: vertical;
}
[data-theme="dark"] .cm-draft-preview--visible { background: rgba(122,26,134,.08); }
.cm-empty { padding: 16px; text-align: center; font-size: .84rem; color: var(--text-dim); font-style: italic; }
[data-theme="dark"] .cm-pill { background: rgba(255,255,255,.06); }
[data-theme="dark"] .cm-group-drop.cm-drop-active { background: rgba(8,145,178,.15); }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Deliverables By Team */
.td-team { background: var(--bg-card); border-radius: 10px; margin: 12px 0; overflow: hidden; border: 1px solid var(--border); }
.td-team-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.td-team-name { font-weight: 800; font-size: .95rem; }
.td-team-count { font-size: .78rem; color: var(--text-dim); font-weight: 600; }
.td-conf { padding: 2px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.td-timeline { padding: 8px 16px 12px; overflow-x: auto; }
.td-timeline-track { position: relative; min-height: 60px; border-bottom: 1px solid var(--border); }
.td-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #dc2626; opacity: 0.5; z-index: 2; }
.td-today::after { content: "Today"; position: absolute; top: -14px; left: 4px; font-size: .55rem; color: #dc2626; font-weight: 700; white-space: nowrap; }
.td-month { position: absolute; top: 0; font-size: .55rem; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: 0.6; }
.td-bar { position: absolute; height: 22px; border-radius: 6px; display: flex; align-items: center; padding: 0 8px; min-width: 20px; cursor: default; transition: filter .15s; }
.td-bar:hover { filter: brightness(1.15); z-index: 3; }
.td-bar-label { font-size: .68rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-bar--overdue { outline: 2px solid #dc2626; outline-offset: -1px; animation: tdPulse 2s infinite; }
@keyframes tdPulse { 0%,100% { outline-color: #dc2626; } 50% { outline-color: transparent; } }
.td-bar--milestone { display: flex; align-items: center; gap: 4px; background: none; }
.td-bar-diamond { width: 12px; height: 12px; transform: rotate(45deg); border: 2px solid; background: var(--bg-card); flex-shrink: 0; }
.td-bar--milestone .td-bar-label { color: var(--text); font-size: .65rem; }
.td-columns { display: flex; gap: 10px; overflow-x: auto; align-items: flex-start; margin-top: 10px; padding-bottom: 8px; }
.td-column { flex: 1; min-width: 200px; max-width: 320px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0 0 10px 10px; }
.td-col-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.td-col-body { display: flex; flex-direction: column; gap: 5px; padding: 8px; max-height: 70vh; overflow-y: auto; }
.td-card {
  background: var(--bg-page,#f8f8fa); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; cursor: pointer; transition: box-shadow .15s, transform .12s;
}
.td-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); }
[data-theme="dark"] .td-team { background: rgba(255,255,255,.04); }
[data-theme="dark"] .td-card { background: rgba(255,255,255,.06); }
[data-theme="dark"] .td-bar-label { color: #fff; }

/* ── TD Dependency Linking ── */
.td-dep-container { position: relative; }
.td-dep-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.td-dep-svg path.td-dep-line {
  fill: none; stroke: url(#tdDepGrad); stroke-width: 2; opacity: 0.55;
  stroke-dasharray: 8 4; transition: stroke-width .2s, opacity .2s;
  animation: tdDepFlow 1.2s linear infinite;
}
.td-dep-svg path.td-dep-line:hover,
.td-dep-svg path.td-dep-line.td-dep-hover { stroke-width: 3.5; opacity: 1; cursor: pointer; filter: drop-shadow(0 0 6px rgba(124,58,237,.45)); }
.td-dep-svg circle.td-dep-dot { pointer-events: none; }
@keyframes tdDepFlow { to { stroke-dashoffset: -24; } }
@keyframes tdDepDraw { from { stroke-dashoffset: 800; } to { stroke-dashoffset: 0; } }
.td-bar--linkable { cursor: crosshair !important; outline: 2px dashed rgba(124,58,237,.3); outline-offset: 2px; }
.td-bar--link-source { outline: 2.5px solid #7c3aed !important; outline-offset: 1px; animation: tdLinkPulse 1s infinite; z-index: 6; }
@keyframes tdLinkPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(124,58,237,.4); } 50% { box-shadow: 0 0 0 7px rgba(124,58,237,.12); } }
.td-bar--dep-highlight { filter: brightness(1.15) !important; z-index: 6 !important; box-shadow: 0 0 0 2px #7c3aed, 0 2px 12px rgba(124,58,237,.3) !important; }
.td-dep-tooltip { position: absolute; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: .78rem; box-shadow: 0 4px 16px rgba(0,0,0,.15); z-index: 20; pointer-events: none; max-width: 260px; }
.td-link-btn--active { background: #7c3aed !important; color: #fff !important; border-color: #7c3aed !important; animation: tdLinkPulse 1.5s infinite; }
.td-dep-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; font-size: .58rem; font-weight: 600; background: rgba(124,58,237,.1); color: #7c3aed; border: 1px solid rgba(124,58,237,.25); }
[data-theme="dark"] .td-dep-svg path.td-dep-line { stroke: url(#tdDepGrad); }
[data-theme="dark"] .td-bar--dep-highlight { box-shadow: 0 0 0 2px #a78bfa, 0 2px 12px rgba(167,139,250,.3) !important; }
.td-dep-agent-spinner { width: 40px; height: 40px; margin: 0 auto; border: 3px solid rgba(124,58,237,.15); border-top-color: #7c3aed; border-radius: 50%; animation: tdDepSpin 0.8s linear infinite; }
@keyframes tdDepSpin { to { transform: rotate(360deg); } }

.mc-health-indicators { display: flex; gap: 14px; }
.mc-health-ind {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mc-health-ring {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.mc-health-ring::after {
  content: ""; position: absolute;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-card);
}
.mc-health-val {
  position: relative; z-index: 1;
  font-size: 0.65rem; font-weight: 800;
}
.mc-health-lbl { font-size: 0.62rem; font-weight: 700; color: var(--text-dim); }
.mc-health-detail { font-size: 0.58rem; color: var(--text-dim); }

.mc-phase-bar {
  display: flex; gap: 3px; height: 22px; border-radius: 6px; overflow: hidden;
  background: var(--bg-page); border: 1px solid var(--border);
}
.mc-phase-seg {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.mc-phase-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; opacity: 0.7;
  transition: width 0.8s ease;
}
.mc-phase-lbl {
  position: relative; z-index: 1; font-size: 0.65rem; font-weight: 700; color: var(--text);
  white-space: nowrap; padding: 0 6px;
}

.mc-xphase-panel {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-1); padding: 14px 20px; margin-bottom: 16px;
}
.mc-xphase-title {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim); margin-bottom: 10px;
}
.mc-xphase-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.mc-xphase-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; border-radius: 8px; transition: background .15s;
}
.mc-xphase-cell:hover {
  background: var(--bg-card, #f8f8fb);
  box-shadow: 0 0 0 1px var(--border);
}
.mc-xphase-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.mc-xphase-label { font-size: .82rem; font-weight: 700; }
.mc-xphase-pct { font-size: .82rem; font-weight: 800; }
.mc-xphase-track {
  height: 20px; border-radius: 6px; background: var(--bg-page);
  border: 1px solid var(--border); overflow: hidden; position: relative; width: 100%;
}
.mc-xphase-fill {
  height: 100%; border-radius: 5px; transition: width 0.8s ease; opacity: 0.85;
}
.mc-xphase-counts {
  display: flex; gap: 6px; font-size: .68rem; font-weight: 700; white-space: nowrap;
}
@media (max-width: 700px) {
  .mc-xphase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .mc-xphase-grid { grid-template-columns: 1fr; }
}
.mc-trajectory-wrap {
  border: 1px solid var(--border); border-radius: 16px; background: var(--bg-page);
  box-shadow: var(--shadow-1); overflow: visible; padding: 12px;
}
.mc-stages-list { display: flex; flex-direction: column; gap: 6px; }

.mc-stage {
  margin-bottom: 8px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-card); box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.mc-stage:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.08); }
.mc-stage-hd {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  cursor: pointer; user-select: none;
}
.mc-rag-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.mc-stage-name { font-weight: 700; font-size: 0.85rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-stage-pills { display: flex; gap: 3px; flex-shrink: 0; }
.mc-phase-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 8px; font-size: 0.65rem; font-weight: 700;
}
.mc-pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.mc-mini-bar {
  width: 60px; height: 6px; border-radius: 3px; background: var(--bg-page);
  overflow: hidden; flex-shrink: 0;
}
.mc-mini-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.mc-stage-score { font-size: 0.75rem; font-weight: 800; min-width: 32px; text-align: right; }
.mc-expand-btn {
  background: none; border: none; cursor: pointer; font-size: 0.7rem;
  color: var(--text-dim); padding: 2px 4px; transition: transform 0.2s;
}
.mc-stage--expanded .mc-expand-btn { transform: rotate(180deg); }

.mc-stage-body {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 14px;
}
.mc-stage--expanded .mc-stage-body {
  max-height: 600px; padding: 0 14px 14px;
}
.mc-gantt-track {
  position: relative; height: 24px; margin: 8px 0;
  background: var(--bg-page); border-radius: 6px; overflow: hidden;
}
.mc-gantt-bar {
  position: absolute; top: 2px; bottom: 2px; border-radius: 4px;
  display: flex; align-items: center; gap: 4px; padding: 0 6px;
  font-size: 0.6rem; font-weight: 700; color: #fff; white-space: nowrap; opacity: 0.85;
}
.mc-gantt-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.mc-section-lbl {
  font-size: 0.68rem; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.5px; margin: 10px 0 4px;
}
.mc-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-radius: 6px; font-size: 0.78rem; cursor: pointer;
  transition: background 0.15s;
}
.mc-item:hover { background: var(--bg-page); }
.mc-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mc-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-item-badge { font-size: 0.68rem; font-weight: 600; flex-shrink: 0; }
.mc-item-owner { font-size: 0.65rem; color: var(--text-dim); flex-shrink: 0; font-weight: 600; }
.mc-item-due { font-size: 0.65rem; color: var(--text-dim); flex-shrink: 0; }
.mc-empty { color: var(--text-dim); font-size: 0.75rem; font-style: italic; padding: 4px 8px; }
.mc-crew-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
.mc-crew {
  width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid;
  display: flex; align-items: center; justify-content: center; position: relative;
  background: var(--bg-card); cursor: default;
}
.mc-crew-ini { font-size: 0.6rem; font-weight: 800; color: var(--text); }
.mc-crew-days {
  position: absolute; top: -5px; left: -5px;
  min-width: 14px; height: 14px; border-radius: 7px; padding: 0 3px;
  font-size: 0.5rem; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
}

.mc-badges-section {
  margin-top: 16px; padding: 16px 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
}
.mc-badges-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 10px; color: var(--text-dim); }
.mc-badges-shelf { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-badge {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 12px; border-radius: 12px; min-width: 70px;
  background: var(--bg-page); border: 1px solid var(--border);
  opacity: 0.35; filter: grayscale(1); transition: all 0.3s;
}
.mc-badge-earned { opacity: 1; filter: none; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.mc-badge-new { animation: mcBadgeEarn 0.6s ease; }
@keyframes mcBadgeEarn {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
.mc-badge-icon { font-size: 1.5rem; }
.mc-badge-name { font-size: 0.6rem; font-weight: 700; color: var(--text-dim); text-align: center; }
.mc-badge-earned .mc-badge-name { color: var(--text); }

.mc-summary-row {
  display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap;
}
.mc-sum-card {
  flex: 1; min-width: 120px; text-align: center; padding: 14px 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
}
.mc-sum-val { font-size: 1.6rem; font-weight: 800; color: var(--purple-mid); }
.mc-sum-lbl { font-size: 0.75rem; font-weight: 600; color: var(--text); margin-top: 2px; }
.mc-sum-sub { font-size: 0.68rem; color: var(--text-dim); margin-top: 2px; }

@media (max-width: 800px) {
  .mc-hud { flex-direction: column; align-items: stretch; }
  .mc-hud-left { text-align: center; }
  .mc-summary-row { flex-direction: column; }
}

.muted { color: var(--text-dim); font-size: 0.8rem; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-12 { margin-top: 12px; }
.mb-12 { margin-bottom: 12px; }
.mb-24 { margin-bottom: 24px; }
.flex-gap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ═══════════════════════════════════════
   APP MAP — Interactive Visualization
   ═══════════════════════════════════════ */
.appmap-container {
  position: relative;
  width: 100%;
  height: 650px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1035 40%, #0d1117 100%);
  border: 1px solid rgba(139, 92, 246, 0.15);
  box-shadow: 0 0 60px rgba(139, 92, 246, 0.08), inset 0 0 60px rgba(0,0,0,0.3);
}
.appmap-container canvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.appmap-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── Feature nodes (orbiting) ── */
.appmap-node {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  text-align: center;
  transition: transform 0.15s ease, filter 0.15s ease;
  cursor: pointer;
  user-select: none;
}
.appmap-node-feature {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px;
  background: rgba(15, 12, 41, 0.75);
  border: 1px solid var(--node-color, rgba(255,255,255,0.15));
  border-radius: 12px;
  backdrop-filter: blur(8px);
  min-width: 80px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3), 0 0 20px color-mix(in srgb, var(--node-color) 15%, transparent);
}
.appmap-node-feature:hover {
  transform: translate(-50%, -50%) scale(1.12);
  filter: brightness(1.3);
  box-shadow: 0 0 25px rgba(0,0,0,0.4), 0 0 35px color-mix(in srgb, var(--node-color) 30%, transparent);
  z-index: 10;
}
.appmap-node-icon {
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
}
.appmap-node-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.appmap-node-stat {
  font-size: 0.62rem;
  color: var(--node-color, rgba(255,255,255,0.5));
  white-space: nowrap;
}

/* ── Infrastructure nodes (center) ── */
.appmap-node-infra {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
.appmap-node-infra .appmap-node-icon {
  font-size: 1rem;
}
.appmap-node-infra:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(255,255,255,0.08);
  border-color: var(--node-color, rgba(255,255,255,0.2));
}

/* ── Tooltip ── */
.appmap-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: rgba(15, 12, 41, 0.92);
  border: 1px solid rgba(139, 92, 246, 0.3);
  backdrop-filter: blur(12px);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  pointer-events: none;
  z-index: 20;
  max-width: 220px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* ── Legend ── */
.appmap-legend {
  margin-top: 12px; padding: 12px 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.appmap-legend-title {
  font-size: 0.78rem; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.appmap-legend-items { display: flex; gap: 14px; flex-wrap: wrap; }
.appmap-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-muted);
}
.appmap-legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}

/* ── Dark mode adjustments (already dark by default, but handle light mode) ── */
body:not([data-theme="dark"]) .appmap-container {
  border-color: rgba(74, 10, 91, 0.2);
  box-shadow: 0 0 40px rgba(74, 10, 91, 0.06), inset 0 0 40px rgba(0,0,0,0.2);
}

/* ── Audit Log ── */
.audit-log-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 18px 0;
}
.audit-log-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom: none;
  transition: background 0.15s;
}
.audit-log-entry:first-child { border-radius: 10px 10px 0 0; }
.audit-log-entry:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 10px 10px; }
.audit-log-entry:only-child { border-radius: 10px; border-bottom: 1px solid var(--border); }
.audit-log-entry:hover { background: var(--bg-hover, rgba(74,10,91,0.04)); }
.audit-log-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.audit-log-timestamp {
  font-size: 0.76rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.audit-log-user {
  font-size: 0.76rem;
  color: var(--purple-accent, #7c3aed);
  font-weight: 600;
}
.audit-log-desc {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.4;
}
.audit-log-details {
  font-size: 0.78rem; padding: 4px 0 0 0; display: flex; flex-wrap: wrap; gap: 6px;
}
.audit-detail-add { color: #15803d; }
.audit-detail-remove { color: #dc2626; }
.audit-detail-mod { color: #d97706; }
.audit-detail-count { color: var(--text-dim); }
body[data-theme="dark"] .audit-detail-add { color: #4ade80; }
body[data-theme="dark"] .audit-detail-remove { color: #fca5a5; }
body[data-theme="dark"] .audit-detail-mod { color: #fbbf24; }
.audit-log-delete-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: all 0.15s;
}
.audit-log-delete-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
}

/* ── Document Library ── */
/* ── Document Library ── */
.doc-drop-zone {
  position: relative;
  border: 2px dashed var(--border); border-radius: 12px;
  padding: 32px 20px; text-align: center;
  background: var(--bg-page);
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
}
.doc-drop-zone.drag-over {
  border-color: var(--purple-bright);
  background: rgba(74,10,91,0.06);
}
body[data-theme="dark"] .doc-drop-zone.drag-over { background: rgba(161,42,166,0.1); }
.doc-drop-icon { font-size: 2.2rem; margin-bottom: 6px; }
.doc-drop-text { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 4px; }
.doc-drop-subtext { font-size: 0.82rem; color: var(--text-dim); }
.doc-drop-hint { font-size: 0.75rem; color: var(--text-dim); margin-top: 8px; }
.doc-browse-label {
  color: var(--purple-bright); cursor: pointer; text-decoration: underline;
  font-weight: 600;
}
.doc-browse-label:hover { color: var(--purple-light); }

/* Toolbar */
.doc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; margin-bottom: 4px;
}
.doc-toolbar-left { display: flex; align-items: center; gap: 8px; }
.doc-toolbar-count { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.doc-toolbar-right { display: flex; align-items: center; gap: 8px; }
.doc-search-wrap { position: relative; }
.doc-search-input {
  font-size: 0.82rem; padding: 6px 12px 6px 34px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text);
  width: 200px; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.doc-search-input:focus {
  border-color: var(--purple-bright);
  box-shadow: 0 0 0 3px rgba(122,26,134,0.1);
}
.doc-search-wrap::before {
  content: "🔍"; position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); font-size: 0.7rem; pointer-events: none;
}
.doc-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: 0.75rem;
  color: var(--text-dim); padding: 0 4px;
}
.doc-sort-btn {
  font-size: 0.82rem; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text-muted);
  cursor: pointer; transition: all 0.15s; font-weight: 500;
}
.doc-sort-btn:hover { border-color: var(--purple-bright); color: var(--purple-bright); }

/* Document grid */
.doc-grid { display: flex; flex-direction: column; gap: 10px; }

/* Document card */
.doc-card {
  display: flex; flex-wrap: wrap; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; gap: 14px;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.doc-card:hover {
  box-shadow: var(--shadow-1); transform: translateY(-1px);
  border-color: rgba(74,10,91,0.18);
}
body[data-theme="dark"] .doc-card:hover { border-color: rgba(161,42,166,0.25); }

.doc-card-left {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--purple-glow); font-size: 1.5rem; flex-shrink: 0;
}
body[data-theme="dark"] .doc-card-left { background: rgba(161,42,166,0.12); }

.doc-card-body { flex: 1; min-width: 0; }

.doc-card-header { margin-bottom: 6px; }
.doc-card-name {
  color: var(--text); text-decoration: none; font-weight: 600;
  font-size: 0.92rem; word-break: break-word;
  transition: color 0.15s;
}
.doc-card-name:hover { color: var(--purple-bright); }

.doc-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 0;
}
.doc-card-ext {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; letter-spacing: 0.04em;
  background: var(--purple-glow); color: var(--purple-bright);
  border: 1px solid rgba(74,10,91,0.1);
}
body[data-theme="dark"] .doc-card-ext {
  background: rgba(161,42,166,0.15); color: var(--purple-light);
  border-color: rgba(161,42,166,0.2);
}
.doc-card-size, .doc-card-date {
  font-size: 0.78rem; color: var(--text-dim);
}

.doc-card-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-left: auto; flex-shrink: 0; align-self: center;
  justify-content: flex-end;
}

.doc-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.76rem; font-weight: 500; padding: 5px 11px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-muted);
  cursor: pointer; transition: all 0.15s; text-decoration: none;
  white-space: nowrap;
}
.doc-action-btn:hover:not(:disabled) {
  border-color: var(--purple-bright); color: var(--purple-bright);
  background: var(--purple-glow);
}
.doc-action-btn:disabled {
  opacity: 0.35; cursor: not-allowed;
}
.doc-action-btn svg { flex-shrink: 0; }

.doc-action-summarise:hover:not(:disabled) {
  border-color: #007a74; color: #007a74;
  background: rgba(0,122,116,0.06);
}
.doc-action-critique:hover:not(:disabled) {
  border-color: #c2710c; color: #c2710c;
  background: rgba(194,113,12,0.06);
}
.doc-action-wiki:hover:not(:disabled) {
  border-color: var(--purple-bright); color: var(--purple-bright);
  background: var(--purple-glow);
}
.doc-action-delete:hover:not(:disabled) {
  border-color: #ef4444; color: #ef4444;
  background: rgba(239,68,68,0.06);
}

/* Spinner animation for loading states */
@keyframes doc-spin-anim { to { transform: rotate(360deg); } }
.doc-spin { animation: doc-spin-anim 1s linear infinite; }

/* Result panel (expands below card) */
.doc-card-result {
  width: 100%; padding: 14px 16px; margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem; line-height: 1.55;
}
.doc-result-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.doc-result-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.doc-result-badge-summary { background: rgba(0,122,116,0.1); color: #007a74; }
.doc-result-badge-critique { background: rgba(194,113,12,0.1); color: #c2710c; }
.doc-result-badge-wiki { background: var(--purple-glow); color: var(--purple-bright); }
body[data-theme="dark"] .doc-result-badge-summary { background: rgba(0,122,116,0.18); }
body[data-theme="dark"] .doc-result-badge-critique { background: rgba(194,113,12,0.18); }

.doc-result-type { font-size: 0.78rem; color: var(--text-dim); }
.doc-result-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 0.9rem; color: var(--text-dim); padding: 2px 6px;
  border-radius: 4px; transition: background 0.15s;
}
.doc-result-close:hover { background: rgba(0,0,0,0.06); }

.doc-card-result h4 { margin: 0 0 8px; font-size: 0.92rem; color: var(--text); }
.doc-result-body { color: var(--text-muted); white-space: pre-wrap; margin-bottom: 8px; }
.doc-result-assessment { font-weight: 600; color: var(--text); margin: 0 0 10px; font-size: 0.88rem; }

.doc-result-rating {
  font-size: 0.72rem; font-weight: 700; padding: 2px 10px;
  border-radius: 999px;
}
.doc-rating-green { background: rgba(22,163,74,0.1); color: #16a34a; }
.doc-rating-amber { background: rgba(194,113,12,0.1); color: #c2710c; }
.doc-rating-red { background: rgba(239,68,68,0.1); color: #ef4444; }

.doc-result-section { margin-bottom: 8px; }
.doc-result-section strong { display: block; font-size: 0.8rem; margin-bottom: 3px; color: var(--text); }
.doc-result-section ul { margin: 0; padding-left: 18px; }
.doc-result-section li { margin-bottom: 2px; color: var(--text-muted); }
.doc-result-points strong { display: block; font-size: 0.8rem; margin-bottom: 3px; color: var(--text); }
.doc-result-points ul { margin: 0; padding-left: 18px; }
.doc-result-points li { margin-bottom: 2px; color: var(--text-muted); }

.doc-section-strengths li::marker { color: #16a34a; }
.doc-section-weaknesses li::marker { color: #ef4444; }
.doc-section-suggestions li::marker { color: #007a74; }
.doc-section-risks li::marker { color: #c2710c; }

.doc-result-error {
  color: #ef4444; background: rgba(239,68,68,0.06);
  padding: 10px 14px; border-radius: 8px; font-size: 0.82rem;
}

.doc-result-wiki-msg { margin: 0 0 8px; color: var(--text-muted); }
.doc-wiki-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--purple-bright); font-weight: 600; font-size: 0.82rem;
  text-decoration: none; transition: opacity 0.15s;
}
.doc-wiki-link:hover { opacity: 0.8; text-decoration: underline; }

/* Document AI modal */
.admin-modal-panel--xl { width: min(780px, 100%); }
.doc-ai-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.doc-ai-modal-header h2 { margin: 0; font-size: 1.15rem; }
.doc-ai-modal-close {
  background: none; border: none; font-size: 1.5rem; cursor: pointer;
  color: var(--text-dim); line-height: 1; padding: 0 4px;
  transition: color 0.15s;
}
.doc-ai-modal-close:hover { color: var(--text); }
.doc-ai-modal-body { max-height: 70vh; overflow-y: auto; }
.doc-ai-modal-body .doc-result-header { margin-bottom: 10px; }
.doc-ai-modal-body .doc-result-body { font-size: 0.88rem; line-height: 1.6; }
.doc-ai-modal-body .doc-result-points,
.doc-ai-modal-body .doc-result-section { font-size: 0.85rem; }
.doc-ai-modal-body h4 { margin: 0 0 8px; font-size: 1rem; }
.doc-ai-loading {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 40px 20px; color: var(--text-dim);
}
.doc-ai-loading svg { animation: doc-spin-anim 1s linear infinite; }

/* Empty state */
.doc-empty { padding: 40px 24px; text-align: center; }
.doc-empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
.doc-empty-title { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.doc-empty-text { font-size: 0.85rem; color: var(--text-dim); }

/* ── Test Harness / Playwright (admin) ── */
.uc-profile-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-top: 16px; padding: 14px 16px;
  background: linear-gradient(110deg, rgba(74,10,91,0.08), rgba(66,135,176,0.1));
  border: 1px solid var(--border); border-radius: 12px;
}
body[data-theme="dark"] .uc-profile-bar {
  background: linear-gradient(110deg, rgba(161,42,166,0.12), rgba(66,135,176,0.12));
}
.uc-profile-label { font-weight: 600; font-size: 0.85rem; color: var(--text-muted); }
.uc-profile-select { min-width: 200px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); }
.uc-profile-indicator { flex: 1; min-width: 200px; font-size: 0.82rem; color: var(--text-muted); }
.uc-profile-indicator code { word-break: break-all; font-size: 0.78rem; }

/* Right-aligned hero variant: sits on the right side of .hero-inner next to the title */
.uc-profile-bar.uc-profile-bar-hero {
  margin-top: 0; padding: 8px 12px; gap: 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(2px);
  border-radius: 10px;
  flex-shrink: 0; max-width: 60%;
  align-self: center;
}
.uc-profile-bar-hero .uc-profile-label { color: rgba(255,255,255,0.85); white-space: nowrap; }
.uc-profile-bar-hero .uc-profile-select {
  min-width: 180px; padding: 6px 8px;
  background: rgba(255,255,255,0.95); color: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.35);
}
.uc-profile-bar-hero .uc-profile-indicator { flex: 0 1 auto; min-width: 0; color: rgba(255,255,255,0.85); }
.uc-profile-bar-hero .uc-profile-indicator code {
  background: rgba(0,0,0,0.22); color: rgba(255,255,255,0.95);
  padding: 1px 6px; border-radius: 4px;
  display: inline-block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
}
@media (max-width: 800px) {
  .uc-profile-bar.uc-profile-bar-hero { max-width: 100%; }
}

/* Backend tag pill next to the profile indicator (legacy-es vs standalone). */
.uc-backend-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid transparent;
}
.uc-backend-legacy {
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.30);
}
.uc-backend-standalone {
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #04221a;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 1px 3px rgba(16,185,129,0.45);
}

/* ── Test Harness / Playwright — gamified status badges & stats ── */
.uc-stats-banner {
  position: relative; margin-top: 14px; padding: 10px 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.06));
}
.uc-stats-progress {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(34,197,94,0.18) 0%, rgba(34,197,94,0.10) var(--pct,0%), transparent var(--pct,0%));
  pointer-events: none; transition: background 600ms ease;
}
.uc-stats-cells { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.uc-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.uc-stat-num { font-size: 1.35rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.uc-stat-lab { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 600; }
.uc-stat-pass .uc-stat-num { color: #16a34a; }
.uc-stat-fail .uc-stat-num { color: #dc2626; }
.uc-stat-idle .uc-stat-num { color: var(--text-dim); }
.uc-stat-rate .uc-stat-num { color: var(--purple-bright, #8b5cf6); }
@media (max-width: 600px) { .uc-stats-cells { grid-template-columns: repeat(2, 1fr); } }

/* Card edge stripe + base appearance per state */
.uc-item { position: relative; }
.uc-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-top-left-radius: inherit; border-bottom-left-radius: inherit;
  background: var(--border); transition: background 300ms ease, box-shadow 300ms ease;
}
.uc-item.uc-state-pass::before { background: linear-gradient(180deg, #22c55e, #16a34a); box-shadow: 0 0 8px rgba(34,197,94,0.45); }
.uc-item.uc-state-fail::before { background: linear-gradient(180deg, #f87171, #dc2626); box-shadow: 0 0 8px rgba(220,38,38,0.45); }
.uc-item.uc-state-running::before { background: linear-gradient(180deg, var(--purple-bright,#8b5cf6), #a855f7); animation: uc-edge-pulse 1.4s ease-in-out infinite; }
.uc-item.uc-state-idle::before { background: var(--border); }
@keyframes uc-edge-pulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; box-shadow: 0 0 12px rgba(139,92,246,0.65); } }

/* Status pill badges */
.uc-summary-meta { display: inline-flex; align-items: center; gap: 6px; }
.uc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
  border-radius: 999px; border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.uc-badge-pass { background: rgba(34,197,94,0.15); color: #15803d; border-color: rgba(34,197,94,0.4); }
.uc-badge-fail { background: rgba(220,38,38,0.13); color: #b91c1c; border-color: rgba(220,38,38,0.4); }
.uc-badge-idle { background: rgba(148,163,184,0.18); color: var(--text-dim); border-color: rgba(148,163,184,0.35); }
.uc-badge-running { background: rgba(139,92,246,0.18); color: #6d28d9; border-color: rgba(139,92,246,0.45); }
.uc-badge-running .uc-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #8b5cf6;
  box-shadow: 0 0 0 0 rgba(139,92,246,0.6); animation: uc-dot-pulse 1.2s ease-out infinite;
}
@keyframes uc-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(139,92,246,0.6); }
  100% { box-shadow: 0 0 0 8px rgba(139,92,246,0); }
}
body[data-theme="dark"] .uc-badge-pass { color: #4ade80; }
body[data-theme="dark"] .uc-badge-fail { color: #fca5a5; }
body[data-theme="dark"] .uc-badge-running { color: #c4b5fd; }

.uc-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; font-size: 0.7rem; font-weight: 600;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-page); color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.uc-pill-pass { background: rgba(34,197,94,0.12); color: #15803d; border-color: rgba(34,197,94,0.35); }
.uc-pill-fail { background: rgba(220,38,38,0.10); color: #b91c1c; border-color: rgba(220,38,38,0.35); }
body[data-theme="dark"] .uc-pill-pass { color: #4ade80; }
body[data-theme="dark"] .uc-pill-fail { color: #fca5a5; }
.uc-pill-interpret { background: rgba(109,40,217,0.12); color: #7c3aed; border-color: rgba(109,40,217,0.3); cursor: pointer; }
.uc-pill-interpret:hover { background: rgba(109,40,217,0.2); }
body[data-theme="dark"] .uc-pill-interpret { color: #a78bfa; }
.uc-pill-tag { background: rgba(0,122,116,0.1); color: var(--teal); border-color: rgba(0,122,116,0.25); font-size: 0.68rem; }
.uc-pill-sqldata { background: rgba(37,99,235,0.12); color: #2563eb; border-color: rgba(37,99,235,0.3); cursor: pointer; font-size: 0.68rem; }
.uc-pill-sqldata:hover { background: rgba(37,99,235,0.2); }
body[data-theme="dark"] .uc-pill-sqldata { color: #60a5fa; }
.uc-pill-followup { background: rgba(217,119,6,0.12); color: #b45309; border-color: rgba(217,119,6,0.3); cursor: pointer; font-size: 0.68rem; }
.uc-pill-followup:hover { background: rgba(217,119,6,0.2); }
body[data-theme="dark"] .uc-pill-followup { color: #fbbf24; }
.uc-followup-history { border-top: 1px solid var(--border, #ddd); margin-top: 12px; padding-top: 8px; }
.uc-followup-turn { margin-bottom: 10px; padding: 8px 12px; border-left: 3px solid var(--purple-bright, #7a1a86); background: rgba(74,10,91,0.03); border-radius: 0 6px 6px 0; }
.uc-followup-user { font-size: 0.88rem; margin-bottom: 6px; }

/* Routing hint pills */
.uc-pill-routing { font-size: 0.68rem; font-weight: 600; }
.uc-routing-confident-answer { background: rgba(16,185,129,0.12); color: #059669; border-color: rgba(16,185,129,0.35); }
.uc-routing-discovery-caveats { background: rgba(245,158,11,0.12); color: #b45309; border-color: rgba(245,158,11,0.35); }
.uc-routing-cant-do { background: rgba(220,38,38,0.10); color: #b91c1c; border-color: rgba(220,38,38,0.35); }
.uc-routing-ack-only { background: rgba(148,163,184,0.18); color: var(--text-dim); border-color: rgba(148,163,184,0.35); }
.uc-routing-no-reply { background: rgba(148,163,184,0.18); color: var(--text-dim); border-color: rgba(148,163,184,0.35); }
body[data-theme="dark"] .uc-routing-confident-answer { color: #34d399; }
body[data-theme="dark"] .uc-routing-discovery-caveats { color: #fbbf24; }
body[data-theme="dark"] .uc-routing-cant-do { color: #fca5a5; }

/* SQL validation verdict pills */
.uc-pill-sql { font-size: 0.68rem; font-weight: 600; }
.uc-sql-match, .uc-sql-row-count-only-match { background: rgba(16,185,129,0.12); color: #059669; border-color: rgba(16,185,129,0.35); }
.uc-sql-near-match, .uc-sql-match-subset { background: rgba(245,158,11,0.12); color: #b45309; border-color: rgba(245,158,11,0.35); }
.uc-sql-mismatch-totals, .uc-sql-row-count-mismatch, .uc-sql-rerun-has-more-rows { background: rgba(220,38,38,0.10); color: #b91c1c; border-color: rgba(220,38,38,0.35); }
.uc-sql-no-sql-to-rerun, .uc-sql-no-table-in-ella-reply, .uc-sql-no-comparable-numeric-cols { background: rgba(148,163,184,0.18); color: var(--text-dim); border-color: rgba(148,163,184,0.35); }
.uc-sql-sql-rerun-failed, .uc-sql-fetch-error { background: rgba(220,38,38,0.10); color: #b91c1c; border-color: rgba(220,38,38,0.35); }
body[data-theme="dark"] .uc-sql-match, body[data-theme="dark"] .uc-sql-row-count-only-match { color: #34d399; }
body[data-theme="dark"] .uc-sql-near-match, body[data-theme="dark"] .uc-sql-match-subset { color: #fbbf24; }
body[data-theme="dark"] .uc-sql-mismatch-totals, body[data-theme="dark"] .uc-sql-row-count-mismatch { color: #fca5a5; }

/* Judge verdict pills */
.uc-verdict-correct { background: rgba(16,185,129,0.12); color: #059669; border-color: rgba(16,185,129,0.35); }
.uc-verdict-partial { background: rgba(245,158,11,0.12); color: #b45309; border-color: rgba(245,158,11,0.35); }
.uc-verdict-incorrect { background: rgba(220,38,38,0.10); color: #b91c1c; border-color: rgba(220,38,38,0.35); }
.uc-verdict-uncertain { background: rgba(148,163,184,0.18); color: var(--text-dim); border-color: rgba(148,163,184,0.35); }
body[data-theme="dark"] .uc-verdict-correct { color: #34d399; }
body[data-theme="dark"] .uc-verdict-partial { color: #fbbf24; }
body[data-theme="dark"] .uc-verdict-incorrect { color: #fca5a5; }

/* SQL validation section in judge modal */
.pw-judge-sql-section { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface, #f4f4f6); }
body[data-theme="dark"] .pw-judge-sql-section { background: #1a1f2e; }
.uc-step-num { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--purple-mid, #7a1a86); }
.uc-step-prompt-block { padding: 4px 0 4px 12px; border-left: 2px solid var(--border); margin: 4px 0; font-size: 0.88rem; }
.uc-step-prompt-text { color: var(--text); }
.uc-step-result { margin: 8px 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface, #f4f4f6); }
body[data-theme="dark"] .uc-step-result { background: #1a1f2e; }
.uc-step-result-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.uc-step-result-status { font-size: 0.75rem; font-weight: 600; }
.uc-step-ok { color: #15803d; }
.uc-step-err { color: #b91c1c; }
.uc-step-result-prompt { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 6px; font-style: italic; }
.uc-step-editor-row { margin-bottom: 8px; }
.uc-step-textarea { width: 100%; }
.uc-step-remove { font-size: 0.7rem; padding: 1px 6px; line-height: 1; }

/* Batch / Run-all progress card */
.uc-batch-progress {
  position: sticky; top: 8px; z-index: 5;
  margin-top: 12px; padding: 12px 16px;
  background: linear-gradient(110deg, rgba(139,92,246,0.10), rgba(66,135,176,0.10));
  border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-1);
}
body[data-theme="dark"] .uc-batch-progress {
  background: linear-gradient(110deg, rgba(139,92,246,0.18), rgba(66,135,176,0.16));
}
.uc-batch-progress-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.uc-batch-progress-title { font-weight: 700; font-size: 0.92rem; color: var(--text); letter-spacing: 0.01em; }
.uc-batch-progress-counts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.uc-batch-track {
  position: relative; height: 10px; border-radius: 999px;
  background: rgba(148,163,184,0.25); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.uc-batch-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 50%, #22c55e 100%);
  background-size: 200% 100%;
  border-radius: inherit;
  transition: width 320ms ease;
  animation: uc-batch-shimmer 2s linear infinite;
  box-shadow: 0 0 10px rgba(139,92,246,0.45);
}
@keyframes uc-batch-shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
.uc-batch-current-row { font-size: 0.85rem; color: var(--text); }
.uc-batch-current-row .muted { color: var(--text-dim); margin-right: 4px; }
.uc-batch-abort {
  background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.4); color: #b91c1c;
}
.uc-batch-abort:hover { background: rgba(220,38,38,0.2); }
body[data-theme="dark"] .uc-batch-abort { color: #fca5a5; }
@media (prefers-reduced-motion: reduce) {
  .uc-batch-fill { animation: none; }
}

/* Celebration animations on freshly completed runs */
.uc-just-passed {
  animation: uc-celebrate 900ms cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.35), 0 8px 24px rgba(34,197,94,0.18) !important;
}
.uc-just-passed::after {
  content: "🎉"; position: absolute; top: -8px; right: 12px;
  font-size: 1.6rem; pointer-events: none;
  animation: uc-celebrate-icon 1500ms ease-out forwards;
}
.uc-just-failed { animation: uc-shake 540ms ease-in-out; box-shadow: 0 0 0 3px rgba(220,38,38,0.35) !important; }
.uc-just-failed::after {
  content: "💥"; position: absolute; top: -8px; right: 12px;
  font-size: 1.4rem; pointer-events: none;
  animation: uc-celebrate-icon 1300ms ease-out forwards;
}

@keyframes uc-celebrate {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.025); }
  70%  { transform: scale(0.995); }
  100% { transform: scale(1); }
}
@keyframes uc-celebrate-icon {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  20%  { opacity: 1; transform: translateY(-6px) scale(1.15); }
  60%  { opacity: 1; transform: translateY(-14px) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(0.9); }
}
@keyframes uc-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .uc-just-passed, .uc-just-failed,
  .uc-item.uc-state-running::before, .uc-badge-running .uc-badge-dot { animation: none !important; }
}

.uc-toolbar, .uc-batch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; padding: 12px 14px;
}
.uc-batch-input { flex: 1; min-width: 140px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); }
.uc-batch-select { min-width: 220px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); }

/* Merged toolbar — actions + batch ops in a single pill */
.uc-toolbar.uc-toolbar-merged {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 10px 14px;
}
.uc-toolbar-merged .uc-tool-group {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.uc-toolbar-merged .uc-tool-batch {
  flex: 1 1 480px; min-width: 0;
}
.uc-toolbar-merged .uc-batch-input { flex: 1 1 140px; min-width: 120px; }
.uc-toolbar-merged .uc-batch-select { flex: 1 1 220px; min-width: 180px; }
.uc-tool-divider {
  flex: 0 0 1px; align-self: stretch; min-height: 28px;
  background: var(--border); margin: 0 4px;
}
@media (max-width: 760px) {
  .uc-tool-divider { flex-basis: 100%; height: 1px; min-height: 0; margin: 2px 0; }
}

/* ── Test Harness — Chart.js result charts ── */
.uc-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (min-width: 980px) {
  .uc-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.uc-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
body[data-theme="dark"] .uc-chart-card {
  background: rgba(255,255,255,0.03);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.uc-chart-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.uc-chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}
.uc-chart-canvas-wrap > canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.uc-chart-error {
  font-size: 0.85rem;
  color: var(--purple-bright);
  padding: 8px 4px;
}

.uc-status { min-height: 1.25em; margin: 10px 0 6px; font-size: 0.9rem; color: var(--purple-bright); }
.uc-empty { padding: 12px 0; }

.uc-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.uc-item {
  display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card); transition: box-shadow 0.15s, transform 0.15s;
}
.uc-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
body[data-theme="dark"] .uc-item:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
.uc-item.uc-running {
  box-shadow: 0 0 0 2px rgba(74,10,91,0.35), 0 6px 20px rgba(74,10,91,0.15);
}
body[data-theme="dark"] .uc-item.uc-running {
  box-shadow: 0 0 0 2px rgba(161,42,166,0.45), 0 6px 22px rgba(0,0,0,0.4);
}
.uc-item.dragging { opacity: 0.65; transform: rotate(-0.5deg); }
.uc-item.drag-over { border-top: 3px solid var(--purple-bright); }

.uc-drag-handle {
  cursor: grab; user-select: none; color: var(--text-dim); padding: 4px 2px; line-height: 1.2;
  font-size: 1rem; letter-spacing: -2px;
}
.uc-drag-handle:hover { color: var(--purple-bright); }
.uc-drag-handle:active { cursor: grabbing; }
.pw-drag-handle {
  cursor: grab; user-select: none; color: var(--text-dim); padding: 4px 2px; line-height: 1.2;
  font-size: 1rem; letter-spacing: -2px;
}
.pw-drag-handle:hover { color: var(--purple-bright); }
.pw-drag-handle:active { cursor: grabbing; }
.pw-shots { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.pw-shot-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 600;
  background: var(--purple-subtle, rgba(124,58,237,0.08)); color: var(--purple-bright, #7c3aed);
  border: 1px solid var(--purple-bright, #7c3aed); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.pw-shot-link::before { content: "\1F4F7"; margin-right: 2px; }

.pw-confidence-pill {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid; cursor: pointer;
}
.pw-conf-high { background: rgba(16,185,129,0.12); color: #059669; border-color: #059669; }
.pw-conf-good { background: rgba(59,130,246,0.10); color: #2563eb; border-color: #2563eb; }
.pw-conf-mid  { background: rgba(245,158,11,0.12); color: #d97706; border-color: #d97706; }
.pw-conf-low  { background: rgba(239,68,68,0.10); color: #dc2626; border-color: #dc2626; }
body[data-theme="dark"] .pw-conf-high { background: rgba(16,185,129,0.2); color: #34d399; border-color: #34d399; }
body[data-theme="dark"] .pw-conf-good { background: rgba(59,130,246,0.18); color: #60a5fa; border-color: #60a5fa; }
body[data-theme="dark"] .pw-conf-mid  { background: rgba(245,158,11,0.18); color: #fbbf24; border-color: #fbbf24; }
body[data-theme="dark"] .pw-conf-low  { background: rgba(239,68,68,0.18); color: #f87171; border-color: #f87171; }

.pw-judge-panel { max-width: 720px; width: 92vw; }
.pw-judge-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.pw-judge-scenario { font-size: 1rem; font-weight: 600; color: var(--text); }
.pw-judge-reason {
  font-size: 0.92rem; line-height: 1.5; color: var(--text);
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--bg); border-radius: 8px; border-left: 3px solid var(--purple-bright, #7c3aed);
}
.pw-judge-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;
}
.pw-judge-dim {
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
}
.pw-judge-dim strong { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.pw-judge-dim p { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--text); }
.pw-judge-list { margin-bottom: 12px; }
.pw-judge-list strong {
  display: block; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px;
}
.pw-judge-list ul { margin: 0; padding-left: 18px; }
.pw-judge-list li { font-size: 0.85rem; line-height: 1.5; color: var(--text); margin-bottom: 2px; }
.pw-judge-meta { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.78rem; }
.pw-judge-meta p { margin: 2px 0; }
.pw-shot-link:hover { background: var(--purple-bright, #7c3aed); color: #fff; }

.uc-details { flex: 1; min-width: 0; }
.uc-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  list-style: none; cursor: pointer;
}
.uc-summary::-webkit-details-marker { display: none; }
.uc-summary-name { font-weight: 700; flex: 1; min-width: 120px; }
.uc-summary-meta { font-size: 0.82rem; color: var(--text-muted); }

.uc-expanded { padding-top: 10px; }
.uc-persona { margin: 0 0 8px; font-size: 0.9rem; }
.uc-prompt-label { margin: 8px 0 4px; font-size: 0.8rem; color: var(--text-muted); }
.uc-prompt-text {
  white-space: pre-wrap; font-size: 0.88rem; padding: 10px 12px; border-radius: 8px;
  background: var(--bg-page); border: 1px solid var(--border);
}
.uc-lastrun { font-size: 0.85rem; color: var(--text-muted); margin: 8px 0; }
.uc-result {
  margin-top: 8px; padding: 12px; border-radius: 8px; font-size: 0.82rem; white-space: pre-wrap; word-break: break-word;
  background: rgba(0,0,0,0.06); border: 1px solid var(--border); font-family: ui-monospace, monospace;
}
body[data-theme="dark"] .uc-result { background: rgba(0,0,0,0.35); }

/* Rendered markdown variant (used for ELLA responses in Test Harness) */
.uc-result.uc-result-md {
  white-space: normal; font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 0.9rem; line-height: 1.5; color: var(--text);
  padding: 14px 16px; background: var(--bg-card);
}
body[data-theme="dark"] .uc-result.uc-result-md { background: rgba(255,255,255,0.03); }
.uc-result-md > *:first-child { margin-top: 0; }
.uc-result-md > *:last-child { margin-bottom: 0; }
.uc-result-md p { margin: 6px 0; }
.uc-result-md .md-h { margin: 14px 0 6px; line-height: 1.25; font-weight: 700; color: var(--text); }
.uc-result-md .md-h1 { font-size: 1.15rem; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.uc-result-md .md-h2 { font-size: 1.05rem; }
.uc-result-md .md-h3 { font-size: 0.98rem; color: var(--purple-bright, #8b5cf6); }
.uc-result-md .md-h4 { font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.uc-result-md .md-list { margin: 6px 0 6px 22px; padding: 0; }
.uc-result-md .md-list li { margin: 2px 0; }
.uc-result-md .md-quote {
  margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--purple-bright, #8b5cf6);
  background: rgba(139,92,246,0.06); color: var(--text-dim); border-radius: 0 6px 6px 0;
}
.uc-result-md hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.uc-result-md code { background: var(--bg) !important; }
.uc-result-md pre { margin: 8px 0; }
.uc-result-md .chat-table-wrap {
  margin: 10px 0; border: 1px solid var(--border); border-radius: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.uc-result-md .chat-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem; white-space: nowrap;
}
.uc-result-md .chat-table th,
.uc-result-md .chat-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  text-align: left; font-variant-numeric: tabular-nums;
}
.uc-result-md .chat-table th {
  background: rgba(139,92,246,0.08); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted);
  position: sticky; top: 0;
}
.uc-result-md .chat-table tbody tr:hover { background: rgba(139,92,246,0.04); }
.uc-result-md .chat-table td:first-child { font-weight: 600; }
body[data-theme="dark"] .uc-result-md .chat-table th { background: rgba(139,92,246,0.15); }
body[data-theme="dark"] .uc-result-md .chat-table tbody tr:hover { background: rgba(139,92,246,0.08); }
.uc-err { color: #dc2626; font-size: 0.88rem; margin-top: 8px; }

.uc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.uc-log-toggle { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.uc-logs-btn { opacity: 0.85; }
.uc-logs-btn:hover { opacity: 1; }

.uc-running-info { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.uc-running-spinner {
  width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--purple-bright);
  border-radius: 50%; animation: uc-spin 0.8s linear infinite;
}
.uc-running-label { animation: uc-pulse-text 2s ease-in-out infinite; font-weight: 600; }
.uc-running-elapsed { font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.95rem; }
.pw-stop-btn { margin-left: auto; }

.uc-running-bar { height: 4px; border-radius: 4px; margin-top: 10px; background: var(--border); overflow: hidden; }
.uc-running-bar-inner {
  display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--purple-bright), var(--purple-light));
  animation: uc-scan 1.6s ease-in-out infinite;
}

@keyframes uc-spin { to { transform: rotate(360deg); } }
@keyframes uc-pulse-text { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes uc-scan { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

.uc-field { display: block; margin-bottom: 12px; width: 100%; }
.uc-field input[type="text"], .uc-field input[type="number"], .uc-field textarea, .uc-field select {
  width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-page); color: var(--text); font-size: 0.9rem;
}
.uc-textarea { min-height: 160px; resize: vertical; font-family: inherit; }

.uc-logs-modal-card { width: min(900px, 100%); max-height: 85vh; display: flex; flex-direction: column; }
.uc-logs-body { overflow: auto; flex: 1; margin: 8px 0; font-size: 0.85rem; }

.uc-log-run { margin-bottom: 16px; padding: 12px 14px; }
.uc-log-run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.uc-outcome-badge { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.uc-log-ok { background: rgba(34,197,94,0.2); color: #15803d; }
.uc-log-warn { background: rgba(245,158,11,0.2); color: #b45309; }
.uc-log-fail { background: rgba(239,68,68,0.2); color: #b91c1c; }
.uc-log-meta { font-size: 0.8rem; color: var(--text-muted); margin: 4px 0; }
.uc-log-prompt {
  font-size: 0.82rem; white-space: pre-wrap; padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.06); border: 1px solid var(--border); margin: 8px 0;
}
body[data-theme="dark"] .uc-log-prompt { background: rgba(0,0,0,0.35); }

.uc-log-interaction { margin: 6px 0; padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-page); }
.uc-log-interaction-error { border-color: rgba(239,68,68,0.45); }
.uc-log-ix-phase { font-weight: 700; color: var(--purple-bright); }
.uc-log-ix-status { font-size: 0.75rem; font-weight: 600; margin-left: 6px; }
.uc-log-ix-body {
  margin-top: 8px; font-size: 0.72rem; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto;
  padding: 8px; border-radius: 6px; background: rgba(0,0,0,0.05);
}
body[data-theme="dark"] .uc-log-ix-body { background: rgba(0,0,0,0.35); }

/* ── ELLA Agentic Framework diagram (ELLA-Wikipedia embed) ── */
.wiki-content .ella-af-shell {
  clear: both;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 1.25em 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
  --ella-border: var(--border);
  --ella-card: var(--bg-page);
  --ella-warn-bg: #fff8e1;
  --ella-warn-border: #ffe082;
}
body[data-theme="dark"] .wiki-content .ella-af-shell {
  --ella-warn-bg: rgba(255, 193, 7, 0.12);
  --ella-warn-border: rgba(255, 193, 7, 0.35);
}

.wiki-content .ella-af-board {
  border: 1px solid var(--ella-border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(74,10,91,0.03), transparent 120px);
  padding: 16px 18px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
body[data-theme="dark"] .wiki-content .ella-af-board {
  background: linear-gradient(180deg, rgba(161,42,166,0.08), transparent 140px);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

.ella-af-head { margin-bottom: 14px; }
.ella-af-title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.ella-af-sub { margin: 0; font-size: 0.88rem; color: var(--text-dim); max-width: 52em; }

.ella-af-section { margin-bottom: 12px; }
.ella-af-kicker {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.ella-af-loadrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.ella-af-path {
  flex: 1; min-width: 200px;
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--ella-border);
  background: var(--ella-card);
  color: var(--text-muted);
}
.ella-af-btn-fake {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  background: #1a1a1a;
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
}
body[data-theme="dark"] .ella-af-btn-fake { background: #e8e8e8; color: #111; }
.ella-af-ico-spin { display: inline-block; opacity: 0.85; }

.ella-af-meta {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.ella-af-meta strong { color: var(--text); font-weight: 700; }
.ella-af-muted { margin-left: auto; opacity: 0.85; }

.ella-af-alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--ella-warn-border);
  background: var(--ella-warn-bg);
  margin-bottom: 16px;
}
.ella-af-alert-ico { font-size: 1.2rem; line-height: 1; }
.ella-af-alert-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ella-af-tag {
  appearance: none; border: 1px solid rgba(180,140,0,0.45);
  background: rgba(255,255,255,0.65);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  color: #6d4c00;
  transition: transform 0.12s, box-shadow 0.12s;
}
body[data-theme="dark"] .ella-af-tag {
  background: rgba(0,0,0,0.25);
  color: #ffe082;
  border-color: rgba(255,193,7,0.4);
}
.ella-af-tag:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.ella-af-tag-reset { border-style: dashed; font-weight: 500; }

.wiki-content .ella-af-details {
  border: 1px solid var(--ella-border);
  border-radius: 8px;
  padding: 0 12px;
  margin-bottom: 12px;
  background: var(--bg-card);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.ella-af-details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 10px 4px;
  color: var(--text);
  list-style: none;
}
.ella-af-details summary::-webkit-details-marker { display: none; }
.ella-af-details summary::before {
  content: "▸ "; display: inline-block; transition: transform 0.15s;
}
.ella-af-details[open] summary::before { transform: rotate(90deg); }
.ella-af-details[open] { padding-bottom: 12px; }

.ella-af-hint { font-size: 0.8rem; margin: 0 0 10px; color: var(--text-dim); }

/* Routing + composition rows: two equal columns so cards across sections align vertically */
.wiki-content .ella-af-row2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.wiki-content .ella-af-row2 > .ella-af-card {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 680px) {
  .wiki-content .ella-af-row2 { grid-template-columns: minmax(0, 1fr); }
}

.ella-af-card {
  border: 1px solid var(--ella-border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--ella-card);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ella-af-card:hover {
  border-color: rgba(74,10,91,0.35);
  box-shadow: 0 4px 14px rgba(74,10,91,0.08);
  transform: translateY(-1px);
}
body[data-theme="dark"] .ella-af-card:hover {
  border-color: rgba(161,42,166,0.45);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}

.ella-af-card-title { margin: 0 0 8px; font-size: 0.95rem; color: var(--text); }
.ella-af-card-desc { margin: 0 0 8px; font-size: 0.8rem; color: var(--text-muted); }
.ella-af-card-stats { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 10px; }
.ella-af-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ella-af-chip {
  font-size: 0.68rem;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--ella-border);
  color: var(--text-muted);
}
body[data-theme="dark"] .ella-af-chip { background: rgba(0,0,0,0.25); }

.ella-af-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(33,150,243,0.12);
  color: #1565c0;
  margin-bottom: 8px;
}
body[data-theme="dark"] .ella-af-pill { color: #90caf9; background: rgba(33,150,243,0.2); }

.wiki-content .ella-af-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.wiki-content .ella-af-domain-grid > .ella-af-domain-card {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 720px) {
  .wiki-content .ella-af-domain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .wiki-content .ella-af-domain-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ella-af-domain-card {
  position: relative;
  border: 1px solid var(--ella-border);
  border-radius: 8px;
  padding: 10px 10px 12px;
  background: var(--ella-card);
  transition: opacity 0.2s, transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ella-af-domain-card:hover {
  transform: translateY(-2px);
  border-color: rgba(74,10,91,0.3);
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}
body[data-theme="dark"] .ella-af-domain-card:hover {
  box-shadow: 0 3px 16px rgba(0,0,0,0.4);
}

.ella-af-domain-card h4 {
  margin: 0 0 8px;
  font-size: 0.88rem;
  color: var(--text);
}
.ella-af-subagents {
  list-style: none; margin: 0 0 8px; padding: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.ella-af-subagents li { margin-bottom: 3px; display: flex; align-items: baseline; gap: 6px; }
.ella-af-subagents li.na { opacity: 0.55; }
.ella-af-subagents .ok { color: #2e7d32; font-weight: 700; }
body[data-theme="dark"] .ella-af-subagents .ok { color: #81c784; }

.ella-af-domain-card-muted { opacity: 0.92; }

.ella-af-metrics {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 0.68rem;
  color: var(--text-dim);
}
.ella-af-warn {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; gap: 2px;
  font-size: 0.72rem; font-weight: 700;
  color: #f57c00;
}

/* Issue filters dim non-matching domain cards */
.ella-af-shell[data-filter="hint"] .ella-af-domain-card[data-issue="gap"] {
  opacity: 0.3;
  transform: none;
  pointer-events: none;
}
.ella-af-shell[data-filter="gap"] .ella-af-domain-card[data-issue="hint"] {
  opacity: 0.3;
  transform: none;
  pointer-events: none;
}

.ella-af-out {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 10px;
}
.ella-af-out span {
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(76,175,80,0.12);
  color: #2e7d32;
  border: 1px solid rgba(76,175,80,0.35);
}
body[data-theme="dark"] .ella-af-out span {
  background: rgba(76,175,80,0.18);
  color: #a5d6a7;
}
.ella-af-out-code {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--text);
  background: rgba(0,0,0,0.05);
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px dashed var(--ella-border);
}
body[data-theme="dark"] .ella-af-out-code { background: rgba(0,0,0,0.3); }

.ella-af-prompt-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #1565c0;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body[data-theme="dark"] .ella-af-prompt-btn { color: #90caf9; }
.ella-af-prompt-btn:hover { opacity: 0.85; }

.ella-af-dialog {
  max-width: min(560px, 92vw);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--bg-card);
  color: var(--text-muted);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.ella-af-dialog::backdrop { background: rgba(0,0,0,0.45); }
.ella-af-dialog h3 { margin: 0 0 10px; font-size: 1rem; color: var(--text); }
.ella-af-dlg-pre {
  margin: 0 0 14px;
  white-space: pre-wrap;
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
  border: 1px solid var(--border);
  max-height: 50vh;
  overflow: auto;
}
body[data-theme="dark"] .ella-af-dlg-pre { background: rgba(0,0,0,0.35); }
.ella-af-dlg-close {
  appearance: none;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}

/* ── ELLA Agentic Framework — layered architecture view ── */
.ella-af-layer {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ella-card);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
body[data-theme="dark"] .ella-af-layer {
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.ella-af-layer-label {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 4px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  min-width: 30px;
  flex-shrink: 0;
}
.ella-af-layer-body {
  flex: 1;
  padding: 16px 18px;
  min-width: 0;
}
.ella-af-layer-body.ella-af-layer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
@media (max-width: 680px) {
  .ella-af-layer-body.ella-af-layer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ella-af-layer--safety .ella-af-layer-label { background: #e53935; }
.ella-af-layer--orchestration .ella-af-layer-label { background: #7b1fa2; }
.ella-af-layer--entry .ella-af-layer-label { background: #2e7d32; }
.ella-af-layer--discovery .ella-af-layer-label { background: #ef6c00; }
.ella-af-layer--response .ella-af-layer-label { background: #1565c0; }

.ella-af-layer--safety .ella-af-agent-title { color: #c62828; }
.ella-af-layer--orchestration .ella-af-agent-title { color: #6a1b9a; }
.ella-af-layer--entry .ella-af-agent-title { color: #2e7d32; }
.ella-af-layer--discovery .ella-af-agent-title { color: #d84315; }
.ella-af-layer--response .ella-af-agent-title { color: #1a237e; }
body[data-theme="dark"] .ella-af-layer--safety .ella-af-agent-title { color: #ef9a9a; }
body[data-theme="dark"] .ella-af-layer--orchestration .ella-af-agent-title { color: #ce93d8; }
body[data-theme="dark"] .ella-af-layer--entry .ella-af-agent-title { color: #a5d6a7; }
body[data-theme="dark"] .ella-af-layer--discovery .ella-af-agent-title { color: #ffcc80; }
body[data-theme="dark"] .ella-af-layer--response .ella-af-agent-title { color: #90caf9; }

.ella-af-agent-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
}
.ella-af-agent-desc {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.ella-af-inner-card {
  border: 1px solid var(--ella-border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--ella-card);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ella-af-inner-card:hover {
  border-color: rgba(74,10,91,0.3);
  box-shadow: 0 3px 12px rgba(0,0,0,0.07);
  transform: translateY(-1px);
}
body[data-theme="dark"] .ella-af-inner-card:hover {
  box-shadow: 0 3px 14px rgba(0,0,0,0.35);
}
.ella-af-nested {
  border-style: dashed;
  margin-top: 12px;
}
.ella-af-chip--blue { background: #1976d2; color: #fff; border-color: #1976d2; }
.ella-af-chip--red { background: #e53935; color: #fff; border-color: #e53935; }
.ella-af-chip--green { background: #43a047; color: #fff; border-color: #43a047; }
.ella-af-chip--orange { background: #ef6c00; color: #fff; border-color: #ef6c00; }
.ella-af-chip--purple { background: #7b1fa2; color: #fff; border-color: #7b1fa2; }
.ella-af-chip--grey { background: #78909c; color: #fff; border-color: #78909c; }
.ella-af-chip--teal { background: #00897b; color: #fff; border-color: #00897b; }
.ella-af-chip--outlined {
  background: transparent !important;
  border-width: 1.5px;
  font-weight: 600;
}
.ella-af-chip--outlined.ella-af-chip--green { color: #2e7d32; border-color: #43a047; }
.ella-af-chip--outlined.ella-af-chip--orange { color: #e65100; border-color: #ef6c00; }
.ella-af-chip--outlined.ella-af-chip--blue { color: #1565c0; border-color: #1976d2; }
.ella-af-chip--outlined.ella-af-chip--teal { color: #00796b; border-color: #00897b; }
body[data-theme="dark"] .ella-af-chip--outlined.ella-af-chip--green { color: #a5d6a7; }
body[data-theme="dark"] .ella-af-chip--outlined.ella-af-chip--orange { color: #ffcc80; }
body[data-theme="dark"] .ella-af-chip--outlined.ella-af-chip--blue { color: #90caf9; }
body[data-theme="dark"] .ella-af-chip--outlined.ella-af-chip--teal { color: #80cbc4; }
.ella-af-resp-col { display: flex; flex-direction: column; gap: 0; }

/* ── Agent (skill-agent.md) ── */
.agt-columns {
  display: flex;
  gap: 16px;
  padding: 0 20px 24px;
  align-items: flex-start;
}
.agt-col {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.agt-col-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  color: var(--text);
}
.agt-subh {
  margin: 16px 0 8px;
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 600;
}
.agt-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.agt-input-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.agt-suggest-btn {
  appearance: none;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--purple-500, #6b4f9a);
  background: transparent;
  color: var(--purple-500, #6b4f9a);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.88rem;
}
.agt-suggest-btn:hover { opacity: 0.9; }
.agt-drop-zone {
  margin-top: 14px;
  padding: 20px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.agt-drop-zone--hover {
  border-color: var(--purple-400, #9575cd);
  background: rgba(107, 79, 154, 0.06);
}
.agt-sub-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agt-sub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  cursor: pointer;
  font: inherit;
  color: var(--text);
  border-left: 4px solid var(--border);
}
.agt-sub-card:hover { filter: brightness(1.03); }
.agt-sub--pending { border-left-color: #ff9800; }
.agt-sub--done { border-left-color: #4caf50; }
.agt-sub--error { border-left-color: #f44336; }
.agt-sub--active {
  box-shadow: 0 0 0 2px var(--purple-400, #9575cd);
}
.agt-sub--archive { opacity: 0.92; }
.agt-sub-meta { font-size: 0.72rem; color: var(--text-muted); }
.agt-sub-preview { font-size: 0.82rem; line-height: 1.35; }
.agt-sub-date { font-size: 0.7rem; color: var(--text-dim, var(--text-muted)); }
.agt-archive summary {
  cursor: pointer;
  font-weight: 600;
  margin-top: 12px;
  color: var(--text-muted);
}
.agt-stream-status {
  font-size: 0.82rem;
  color: var(--purple-500, #6b4f9a);
  margin-bottom: 8px;
  min-height: 1.2em;
}
.agt-exec-actions { margin-bottom: 12px; }
.agt-context-preview {
  max-height: 220px;
  overflow: auto;
  margin-bottom: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.04);
  font-size: 0.72rem;
}
body[data-theme="dark"] .agt-context-preview { background: rgba(0,0,0,0.25); }
.agt-context-pre {
  margin: 0;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.agt-context-loading { padding: 12px; color: var(--text-muted); }
.agt-reason-wrap { margin-top: 8px; }
.agt-reasoning-stream-pre {
  min-height: 80px;
  overflow: visible;
  margin: 0 0 12px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.05);
  white-space: pre-wrap;
  font-size: 0.82rem;
  line-height: 1.45;
  transition: height 0.15s ease;
}
body[data-theme="dark"] .agt-reasoning-stream-pre { background: rgba(0,0,0,0.3); }
.agt-reason-p { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.5; color: var(--text); }
.agt-muted { color: var(--text-muted); font-size: 0.88rem; margin: 0; }
.agt-error { color: #c62828; }
body[data-theme="dark"] .agt-error { color: #ef9a9a; }
.agt-action-card {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  position: relative;
}
.agt-action--pending { background: rgba(255, 152, 0, 0.08); }
.agt-action--approved { background: rgba(76, 175, 80, 0.1); }
.agt-action--rejected { background: rgba(158, 158, 158, 0.12); }
.agt-action-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.agt-badge--pending { background: rgba(255,152,0,0.25); color: #e65100; }
.agt-badge--approved { background: rgba(76,175,80,0.3); color: #1b5e20; }
.agt-badge--rejected { background: rgba(120,120,120,0.25); color: #424242; }
body[data-theme="dark"] .agt-badge--pending { color: #ffcc80; }
body[data-theme="dark"] .agt-badge--approved { color: #a5d6a7; }
body[data-theme="dark"] .agt-badge--rejected { color: #bdbdbd; }
.agt-action-title { margin: 0 0 6px; font-weight: 600; font-size: 0.92rem; }
.agt-action-rationale { margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
.agt-action-btns { display: flex; gap: 8px; margin-top: 10px; }
@media (max-width: 1100px) {
  .agt-columns { flex-direction: column; }
}

/* ── Responsive ── */
@media (max-width: 800px) {
  .appmap-container { height: 500px; }
  .appmap-node-feature { padding: 6px 10px; min-width: 60px; }
  .appmap-node-icon { font-size: 1.1rem; }
  .appmap-node-label { font-size: 0.65rem; }
  .appmap-node-stat { font-size: 0.55rem; }
}

/* ── File type badges (document library, deliverables) ── */
.doc-file-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  font-size: .7rem; font-weight: 800; color: #fff;
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1; flex-shrink: 0; letter-spacing: -.02em;
}
.doc-badge-pdf  { background: #dc2626; }
.doc-badge-word { background: #2563eb; }
.doc-badge-excel { background: #16a34a; font-size: .6rem; }
.doc-badge-ppt  { background: #d97706; }

/* ── Toggle switch (reusable) ── */
.uc-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.uc-toggle input { opacity: 0; width: 0; height: 0; }
.uc-toggle-track { position: absolute; inset: 0; background: #ccc; border-radius: 22px; cursor: pointer; transition: background .2s; }
.uc-toggle input:checked + .uc-toggle-track { background: var(--purple-mid, #7a1a86); }
.uc-toggle-track::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.uc-toggle input:checked + .uc-toggle-track::after { transform: translateX(18px); }

/* ── Deliverables group-by-task ── */
.del-group-btn:hover { filter: brightness(1.1); }
.del-group-btn .del-group-chevron { transition: transform .2s; }
.del-group-btn.open .del-group-chevron { transform: rotate(180deg); }
.del-group-body.open { display: block !important; }

/* ── Selection-explain (highlight → ✨Explain → popover) ─────────── */
.ella-explain-trigger {
  position: fixed;
  z-index: 10001;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  background: var(--surface, #ffffff);
  color: var(--text, #1a1a1a);
  border: 1px solid var(--border, #d0d0d8);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ella-explain-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.1);
}
.ella-explain-trigger-img { width: 18px; height: 18px; border-radius: 50%; }

.ella-explain-popover {
  position: fixed;
  z-index: 10002;
  background: var(--surface, #ffffff);
  color: var(--text, #1a1a1a);
  border: 1px solid var(--border, #d0d0d8);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
}
.ella-explain-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(90deg, rgba(99, 51, 175, .10), rgba(99, 51, 175, 0));
  border-bottom: 1px solid var(--border, #e6e6ee);
}
.ella-explain-icon { width: 18px; height: 18px; border-radius: 50%; }
.ella-explain-title {
  font-weight: 600;
  flex: 1;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted, #6a6a78);
}
.ella-explain-close {
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #6a6a78);
  padding: 0 4px;
}
.ella-explain-close:hover { color: var(--text, #1a1a1a); }

.ella-explain-body { padding: 10px 12px 12px; max-height: 320px; overflow-y: auto; }
.ella-explain-phrase {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted, #6a6a78);
  margin-bottom: 4px;
  word-break: break-word;
}
.ella-explain-answer { word-wrap: break-word; }
.ella-explain-answer p { margin: 0 0 6px; }
.ella-explain-answer p:last-child { margin-bottom: 0; }
.ella-explain-error { color: #b2181a; font-size: 12px; }

.ella-explain-loading { display: flex; gap: 6px; padding: 4px 0 2px; }
.ella-explain-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted, #8a8a98);
  animation: ella-explain-bounce 1s infinite ease-in-out;
}
.ella-explain-dot:nth-child(2) { animation-delay: .15s; }
.ella-explain-dot:nth-child(3) { animation-delay: .30s; }
@keyframes ella-explain-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

[data-theme="dark"] .ella-explain-trigger,
[data-theme="dark"] .ella-explain-popover {
  background: #1f1f29;
  color: #ececf2;
  border-color: #36364a;
}
[data-theme="dark"] .ella-explain-header {
  background: linear-gradient(90deg, rgba(180, 140, 255, .18), rgba(180, 140, 255, 0));
  border-bottom-color: #36364a;
}

/* ─────────────────────────────────────────────────────────────────
   PowerPoint generation progress overlay
   Shown by downloadPptxWithFeedback() in app.js while the deck is
   being planned, rendered and audited (skill-zellis-deck-builder).
   ───────────────────────────────────────────────────────────────── */
.pptx-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 10, 35, .42);
  backdrop-filter: blur(2px);
  animation: pptxFadeIn .18s ease-out;
}
.pptx-progress-overlay.pptx-progress-fadeout {
  animation: pptxFadeOut .26s ease-in forwards;
}
@keyframes pptxFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pptxFadeOut { from { opacity: 1; } to { opacity: 0; } }
.pptx-progress-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #fff8ec 100%);
  color: #1e2233;
  border: 1px solid rgba(217, 119, 6, .35);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(40, 14, 70, .26), 0 4px 12px rgba(0, 0, 0, .08);
  padding: 22px 26px;
  min-width: 360px;
  max-width: 520px;
  animation: pptxCardPop .26s cubic-bezier(.18,.9,.32,1.18);
}
@keyframes pptxCardPop {
  from { transform: translateY(8px) scale(.96); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}
.pptx-progress-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(217, 119, 6, .25);
  border-top-color: #d97706;
  border-right-color: #b45309;
  flex: 0 0 auto;
  animation: pptxSpin .9s linear infinite;
}
@keyframes pptxSpin { to { transform: rotate(360deg); } }
.pptx-progress-icon {
  font-size: 30px;
  flex: 0 0 auto;
  line-height: 1;
}
.pptx-progress-body { flex: 1 1 auto; min-width: 0; }
.pptx-progress-title {
  font-weight: 700;
  font-size: 1rem;
  color: #4a0a5b;
  margin-bottom: 4px;
  letter-spacing: .01em;
}
.pptx-progress-status {
  font-size: .9rem;
  color: #2c2735;
  line-height: 1.4;
  word-break: break-word;
}
.pptx-progress-elapsed {
  font-size: .72rem;
  color: #888;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.pptx-progress-skill {
  font-size: .68rem;
  color: #b45309;
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  opacity: .85;
}
.pptx-progress-card.pptx-progress-success {
  background: linear-gradient(135deg, #fff 0%, #ecfdf5 100%);
  border-color: rgba(5, 150, 105, .4);
}
.pptx-progress-card.pptx-progress-success .pptx-progress-title { color: #065f46; }
.pptx-progress-card.pptx-progress-error {
  background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
  border-color: rgba(220, 38, 38, .45);
}
.pptx-progress-card.pptx-progress-error .pptx-progress-title { color: #991b1b; }

/* Inline spinner inside the Create PowerPoint button while busy. */
.pptx-btn-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  vertical-align: -1px;
  margin-right: 4px;
  animation: pptxSpin .8s linear infinite;
}
.log-admin-btn[data-busy="1"] {
  opacity: .82;
  cursor: progress;
}

[data-theme="dark"] .pptx-progress-overlay {
  background: rgba(0, 0, 0, .55);
}
[data-theme="dark"] .pptx-progress-card {
  background: linear-gradient(135deg, #1c1c28 0%, #251a08 100%);
  color: #f0eadf;
  border-color: rgba(217, 119, 6, .55);
}
[data-theme="dark"] .pptx-progress-card .pptx-progress-title { color: #f4d28a; }
[data-theme="dark"] .pptx-progress-card .pptx-progress-status { color: #d6cfc1; }
[data-theme="dark"] .pptx-progress-card.pptx-progress-success { background: linear-gradient(135deg, #14241d 0%, #0d2b21 100%); }
[data-theme="dark"] .pptx-progress-card.pptx-progress-success .pptx-progress-title { color: #6ee7b7; }
[data-theme="dark"] .pptx-progress-card.pptx-progress-error { background: linear-gradient(135deg, #2a1818 0%, #2c0e0e 100%); }
[data-theme="dark"] .pptx-progress-card.pptx-progress-error .pptx-progress-title { color: #fca5a5; }

/* ── Task Mapping (graph-tier) ── */
.tm-graph { display: flex; flex-direction: column; margin-top: 12px; }
.tm-tier {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.tm-tier-header {
  padding: 8px 16px; font-size: .78rem; font-weight: 700; color: #fff;
  letter-spacing: .4px; text-transform: uppercase;
}
.tm-tier-body {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; min-height: 50px;
  align-items: flex-start;
}
.tm-connectors { position: relative; height: 40px; }
.tm-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px; border: 2px solid;
  background: var(--bg-card); cursor: pointer;
  transition: box-shadow .15s, transform .12s, background .15s;
  max-width: 320px; font-size: .82rem;
}
.tm-pill:hover { box-shadow: 0 3px 12px rgba(0,0,0,.12); transform: translateY(-1px); }
.tm-graph--hovering .tm-pill { opacity: 0.25; transform: scale(0.97); transition: opacity .2s, transform .15s, box-shadow .15s; }
.tm-graph--hovering .tm-pill-highlight { opacity: 1; transform: translateY(-2px) scale(1.03); box-shadow: 0 0 0 3px rgba(122,26,134,.45), 0 4px 16px rgba(122,26,134,.2); z-index: 2; }
.tm-graph--hovering .tm-svg path { opacity: 0.08 !important; transition: opacity .2s; }
.tm-graph--hovering .tm-svg path.tm-line-highlight { opacity: 1 !important; stroke: #7a1a86 !important; stroke-width: 2.5 !important; }
.tm-pill-rag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; border-radius: 4px;
  font-size: .65rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.tm-pill-icon { font-size: .95rem; flex-shrink: 0; }
.tm-pill-label {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.tm-pill-team { font-size: .6rem; font-weight: 700; flex-shrink: 0; }
.tm-pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 999px; font-size: .65rem;
  font-weight: 700; background: rgba(0,0,0,.08); flex-shrink: 0;
}
.tm-pill-status {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-size: .62rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.tm-pill-task { font-size: .8rem; }
.tm-pill-ns { max-width: 400px; }
.tm-pill-ns .tm-pill-label { white-space: normal; font-weight: 500; font-size: .78rem; line-height: 1.3; }
.tm-focus-btn, .tm-push-btn {
  display: none; cursor: pointer; font-size: .7rem; flex-shrink: 0;
  padding: 1px 4px; border-radius: 4px; opacity: 0.5;
  transition: opacity .15s;
}
.tm-pill:hover .tm-focus-btn, .tm-pill:hover .tm-push-btn { display: inline-flex; }
.tm-focus-btn:hover { opacity: 1; background: rgba(122,26,134,.1); }
.tm-push-btn:hover { opacity: 1; background: rgba(122,26,134,.1); color: var(--purple-mid,#7a1a86); }
.tm-pill-ns--unlinked { opacity: 0.75; border-style: dashed; }
.tm-pill-ns--done { opacity: 0.6; }
.tm-pill-ns--done .tm-pill-label { text-decoration: line-through; color: var(--text-dim); }
.tm-ns-check {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; position: relative; width: 18px; height: 18px;
}
.tm-ns-done-cb { position: absolute; opacity: 0; width: 18px; height: 18px; cursor: pointer; margin: 0; }
.tm-ns-checkmark {
  width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--border,#ccc);
  display: flex; align-items: center; justify-content: center; transition: all .15s;
  background: var(--bg-card,#fff); flex-shrink: 0;
}
.tm-ns-done-cb:checked + .tm-ns-checkmark { background: #16a34a; border-color: #16a34a; }
.tm-ns-done-cb:checked + .tm-ns-checkmark::after {
  content: "\2713"; color: #fff; font-size: .65rem; font-weight: 700;
}
.tm-ns-label--done { text-decoration: line-through; color: var(--text-dim); }
[data-theme="dark"] .tm-tier { background: rgba(255,255,255,.04); }
[data-theme="dark"] .tm-pill { background: rgba(255,255,255,.06); }
[data-theme="dark"] .tm-graph--hovering .tm-pill-highlight { box-shadow: 0 0 0 3px rgba(167,89,204,.6), 0 4px 16px rgba(122,26,134,.35); }
[data-theme="dark"] .tm-graph--hovering .tm-svg path.tm-line-highlight { stroke: #a759cc !important; }

/* ── Kanban Filter Pills ── */
.kb-filter-pills {
  display: flex; gap: 6px;
}
.kb-filter-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 999px; border: 2px solid;
  font-family: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .15s; user-select: none;
}
.kb-filter-pill:hover { filter: brightness(1.1); transform: scale(1.03); }
.kb-filter-pill--active { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.kb-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; border-radius: 999px; font-size: .7rem;
  background: rgba(255,255,255,0.25); padding: 0 5px;
}
.kb-filter-pill:not(.kb-filter-pill--active) .kb-filter-count {
  background: currentColor; color: var(--bg-card, #fff);
}

/* ── Kanban Board ── */
.kb-board {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  min-height: 400px;
  align-items: start;
}
.kb-column {
  background: var(--bg-page, #f5f7fb);
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border, #e3e3ea);
  min-height: 300px;
  display: flex;
  flex-direction: column;
}
.kb-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: .88rem;
}
.kb-col-icon { font-size: 1rem; }
.kb-col-title { flex: 1; }
.kb-col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  padding: 0 6px;
}
.kb-col-body {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
  border-radius: 0 0 var(--radius-sm, 10px) var(--radius-sm, 10px);
  transition: background .15s;
}
.kb-col-body.kb-drop-active {
  background: rgba(74, 10, 91, 0.08);
  outline: 2px dashed var(--purple-bright, #7a1a86);
  outline-offset: -2px;
}
.kb-card {
  background: var(--bg-card, #fff);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: box-shadow .15s, transform .15s, opacity .15s;
  user-select: none;
}
.kb-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.kb-card.kb-dragging {
  opacity: 0.4;
  transform: rotate(2deg);
}
.kb-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.kb-due-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .65rem;
  font-weight: 700;
  white-space: nowrap;
}
.kb-overdue {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.kb-due-today {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.kb-card-overdue { box-shadow: 0 0 0 1px #fca5a5, 0 1px 4px rgba(220,38,38,0.15); }
.kb-card-due-today { box-shadow: 0 0 0 1px #fde68a, 0 1px 4px rgba(217,119,6,0.15); }
.kb-meta-overdue { color: #dc2626 !important; font-weight: 700; }
[data-theme="dark"] .kb-overdue { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
[data-theme="dark"] .kb-due-today { background: #451a03; color: #fde68a; border-color: #92400e; }
[data-theme="dark"] .kb-card-overdue { box-shadow: 0 0 0 1px #7f1d1d, 0 1px 4px rgba(220,38,38,0.25); }
[data-theme="dark"] .kb-card-due-today { box-shadow: 0 0 0 1px #92400e, 0 1px 4px rgba(217,119,6,0.25); }
.kb-kind-badge, .kb-team-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: .65rem;
  font-weight: 700;
  white-space: nowrap;
}
.kb-kind-icon {
  font-size: 1rem;
  vertical-align: middle;
  margin-right: 2px;
}
.kb-card-title {
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
  color: var(--text, #1f1a24);
}
.kb-card-desc {
  font-size: .76rem;
  color: var(--text-dim, rgba(31, 26, 36, 0.54));
  line-height: 1.4;
  margin-bottom: 6px;
}
.kb-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.kb-meta-item {
  font-size: .7rem;
  color: var(--text-dim, rgba(31, 26, 36, 0.54));
  white-space: nowrap;
}
.kb-meta-task {
  font-style: italic;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-empty {
  text-align: center;
  padding: 24px 12px;
  font-size: .82rem;
  color: var(--text-dim, rgba(31, 26, 36, 0.54));
  font-style: italic;
}
.kb-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e3e3ea);
  font-size: .76rem;
  color: var(--text-dim);
}
.kb-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.kb-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.kb-legend-sep {
  width: 1px;
  height: 16px;
  background: var(--border, #e3e3ea);
}
@media (max-width: 900px) {
  .kb-board { grid-template-columns: 1fr !important; }
}
[data-theme="dark"] .kb-column { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .kb-card { background: rgba(255,255,255,0.07); box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
[data-theme="dark"] .kb-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
[data-theme="dark"] .kb-col-body.kb-drop-active { background: rgba(122,26,134,0.15); }
[data-theme="dark"] .kb-legend { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }

/* ══════════════════════════════════════════════
   ELLA Orb + Chat Panel (web-component style)
   ══════════════════════════════════════════════ */
.ella-header-orb{width:36px;height:36px;border-radius:50%;overflow:hidden;cursor:pointer;flex-shrink:0;box-shadow:0 2px 8px rgba(115,58,147,0.4);transition:box-shadow .2s;border:2px solid rgba(255,255,255,0.4);position:relative;background:conic-gradient(from 200deg,#2ea685,#48a9e5 100deg,#7b4fb0 180deg,#ed79cf 260deg,#2ea685 360deg);padding:0;appearance:none}
.ella-header-orb:hover{box-shadow:0 4px 16px rgba(115,58,147,0.6)}
.ella-header-orb svg{display:block;width:100%;height:100%;animation:ellaOrbit 20s linear infinite}
@keyframes ellaOrbit{0%{transform:rotate(0deg) scale(1)}25%{transform:rotate(90deg) scale(1.06)}50%{transform:rotate(180deg) scale(1)}75%{transform:rotate(270deg) scale(1.06)}100%{transform:rotate(360deg) scale(1)}}
.ella-header-orb .etr{stroke:#fff;stroke-width:2.2;fill:none;opacity:.35}
.ella-header-orb .esg{stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:8 18;stroke-linecap:round;opacity:0}
.ella-header-orb .esg1{animation:sigPass 3s ease-in-out infinite}
.ella-header-orb .esg2{animation:sigPass 3s ease-in-out infinite 1s}
.ella-header-orb .esg3{animation:sigPass 3s ease-in-out infinite 2s}
@keyframes sigPass{0%{stroke-dashoffset:26;opacity:0}8%{opacity:.95}33%{stroke-dashoffset:0;opacity:.95}40%{opacity:0}100%{opacity:0}}
.ella-header-orb .eat{fill:#fff;opacity:.85}
.ella-header-orb .eat1{animation:atomFire 3s ease-in-out infinite .5s}
.ella-header-orb .eat2{animation:atomFire 3s ease-in-out infinite 1.5s}
.ella-header-orb .eat3{animation:atomFire 3s ease-in-out infinite 2.5s}
@keyframes atomFire{0%,25%,100%{filter:none;opacity:.85}12%{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px rgba(255,255,255,.5));opacity:1}}

ella-chatbot{position:relative;z-index:10000}
.ella-panel{display:none;position:fixed;top:20px;right:20px;bottom:20px;width:390px;z-index:10000;border-radius:20px;border:2px solid transparent;background:linear-gradient(#fcfcfc,#fcfcfc) padding-box,linear-gradient(90deg,#6d378b 0%,#ed79cf 32.69%,#2ea685 65.87%,#48a9e5 100%) border-box;box-shadow:0 8px 32px rgba(0,0,0,0.18);flex-direction:column;font-family:'Yantramanav',sans-serif}
.ella-panel.open{display:flex}
.ella-panel::after{content:'';position:absolute;inset:5px;border-radius:inherit;background:linear-gradient(90deg,#6d378b 0%,#ed79cf 32.69%,#2ea685 65.87%,#48a9e5 100%);filter:blur(7px);z-index:-1;pointer-events:none}

.ella-hdr{display:flex;align-items:center;padding:14px 10px 14px 20px;background:#fcfcfc;border-radius:20px 20px 0 0;flex-shrink:0;z-index:10;border-bottom:1px solid #eee;position:relative;gap:6px}
.ella-hdr-info{flex:1;min-width:0}
.ella-hdr-info h3{margin:0;font-size:14px;font-weight:700;color:#425563;line-height:20px;font-family:'Yantramanav',sans-serif}
.ella-hdr-info h4{margin:-1px 0 0;font-size:13px;font-weight:400;color:#8e99a1;font-family:'Yantramanav',sans-serif}
.ella-hdr-btn{background:transparent;border:none;cursor:pointer;color:#425563;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;font-size:16px;flex-shrink:0}
.ella-hdr-btn:hover{background:#d9dde0}

.ella-body{flex:1;padding:20px;overflow-y:auto;overflow-x:hidden;background:#fcfcfc;z-index:2}
.ella-body::-webkit-scrollbar{width:0}

.ella-m{margin-bottom:20px}
.ella-m-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#8e99a1;margin-bottom:6px;font-family:'Yantramanav',sans-serif}
.ella-m-av{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0}
.ella-m-av img{width:100%;height:100%;display:block}
.ella-m-big-av{width:48px;height:48px;border-radius:50%;overflow:hidden;margin-bottom:8px}
.ella-m-big-av img{width:100%;height:100%;display:block;animation:ellaOrbit 20s linear infinite}
.ella-m-welcome{color:#6d378b;font-size:20px;font-weight:400;line-height:1.4;font-family:'Yantramanav',sans-serif;letter-spacing:.02px}
.ella-m-text{font-size:15px;color:#1b1b1d;line-height:1.55;font-family:'Yantramanav',sans-serif}
.ella-m-text ol,.ella-m-text ul{margin:.5em 0 .5em 1.4em;padding:0}
.ella-m-text li{margin-bottom:.4em}
.ella-m-text strong{font-weight:700}
.ella-m-you{display:flex;justify-content:flex-end;margin-bottom:16px}
.ella-m-you-bubble{background:#f2f0f2;color:#425563;border-radius:20px 20px 0 20px;padding:10px 16px;font-size:15px;line-height:1.5;max-width:80%;font-family:'Yantramanav',sans-serif}
.ella-m-ts{font-size:12px;color:#8e99a1;margin-top:6px;font-family:'Yantramanav',sans-serif}

.ella-ftr{padding:12px;background:#fcfcfc;border-radius:0 0 20px 20px;flex-shrink:0;z-index:2}
.ella-ftr-wrap{position:relative}
.ella-ftr textarea{width:100%;padding:12px 44px 12px 14px;border:1px solid #c3c6cf;border-radius:16px;font-family:'Yantramanav',sans-serif;font-size:14px;outline:none;background:#fff;color:#1b1b1d;box-sizing:border-box;resize:none;min-height:44px;max-height:120px;line-height:1.4}
.ella-ftr textarea:focus{border-color:#6d378b}
.ella-ftr-send{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:none;background:#f5f5f5;color:#a2a2a3;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s;font-size:14px}
.ella-ftr textarea:focus~.ella-ftr-send,.ella-ftr-send:hover{background:#6d378b;color:#fff}

.ella-mode-wrap{position:relative}
.ella-mode-btn{background:transparent;border:1px solid #c3c6cf;cursor:pointer;color:#425563;width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .2s;font-size:15px;padding:0;flex-shrink:0}
.ella-mode-btn:hover{background:#d9dde0}
.ella-mode-btn svg{width:18px;height:18px}
.ella-mode-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:#f1f1f1;padding:8px 0;z-index:11000;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);list-style:none;margin:0}
.ella-mode-menu.open{display:block}
.ella-mode-item{display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;color:#1b1b1d;font-size:14px;font-weight:400;line-height:24px;letter-spacing:.5px;cursor:pointer;border:none;background:none;width:100%;font-family:'Yantramanav',sans-serif;transition:background .15s}
.ella-mode-item:hover,.ella-mode-item.active{background:rgba(70,70,79,.12)}
.ella-mode-item svg{width:20px;height:20px;flex-shrink:0;color:#425563}

.ella-panel.mode-side{top:0!important;right:0!important;bottom:0!important;border-radius:0;margin:0;width:390px}
.ella-panel.mode-side::after{border-radius:0}
.ella-panel.mode-side .ella-hdr{border-radius:0}
.ella-panel.mode-side .ella-ftr{border-radius:0}

.ella-panel.mode-full{width:860px;max-width:calc(100% - 40px);left:50%;right:auto;transform:translateX(-50%);top:20px;bottom:20px;padding:0}
.ella-panel.mode-full .ella-body{padding:20px 100px}
.ella-panel.mode-full .ella-ftr{padding:12px 100px}
.ella-panel.mode-full .ella-m-welcome{font-size:26px}
.ella-panel.mode-full .ella-m-text{font-size:16px}

.ella-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9999}
.ella-backdrop.open{display:block}

/* Persona pills inside ELLA panel */
.ella-panel .chat-persona-pill{font-size:.65rem;padding:2px 8px;border-radius:999px;border:1px solid #c3c6cf;background:transparent;color:#425563;cursor:pointer;font-weight:600;transition:all .15s;font-family:'Yantramanav',sans-serif}
.ella-panel .chat-persona-pill:hover{background:#f2f0f2}
.ella-panel .chat-persona-pill.active{background:#6d378b;color:#fff;border-color:#6d378b}

/* Profile bar inside ELLA panel */
.ella-panel .chat-profile-bar{padding:6px 20px;background:#fafafa;border-bottom:1px solid #eee;font-family:'Yantramanav',sans-serif}
.ella-panel .chat-profile-select{font-family:'Yantramanav',sans-serif;font-size:.82rem;padding:4px 8px;border:1px solid #c3c6cf;border-radius:8px;background:#fff;color:#425563}

/* Dark mode overrides for ELLA panel */
[data-theme="dark"] .ella-panel{background:linear-gradient(#1e1e2e,#1e1e2e) padding-box,linear-gradient(90deg,#6d378b 0%,#ed79cf 32.69%,#2ea685 65.87%,#48a9e5 100%) border-box}
[data-theme="dark"] .ella-hdr{background:#1e1e2e;border-bottom-color:#333}
[data-theme="dark"] .ella-hdr-info h3{color:#cdd6f4}
[data-theme="dark"] .ella-hdr-info h4{color:#6c7086}
[data-theme="dark"] .ella-hdr-btn{color:#cdd6f4}
[data-theme="dark"] .ella-hdr-btn:hover{background:rgba(255,255,255,.1)}
[data-theme="dark"] .ella-body{background:#1e1e2e}
[data-theme="dark"] .ella-m-welcome{color:#cba6f7}
[data-theme="dark"] .ella-m-text{color:#cdd6f4}
[data-theme="dark"] .ella-m-you-bubble{background:#313244;color:#cdd6f4}
[data-theme="dark"] .ella-ftr{background:#1e1e2e}
[data-theme="dark"] .ella-ftr textarea{background:#313244;color:#cdd6f4;border-color:#45475a}
[data-theme="dark"] .ella-ftr textarea:focus{border-color:#cba6f7}
[data-theme="dark"] .ella-ftr-send{background:#313244;color:#6c7086}
[data-theme="dark"] .ella-ftr textarea:focus~.ella-ftr-send{background:#6d378b;color:#fff}
[data-theme="dark"] .ella-mode-btn{border-color:#45475a;color:#cdd6f4}
[data-theme="dark"] .ella-mode-menu{background:#313244}
[data-theme="dark"] .ella-mode-item{color:#cdd6f4}
[data-theme="dark"] .ella-panel .chat-persona-pill{border-color:#45475a;color:#cdd6f4}
[data-theme="dark"] .ella-panel .chat-profile-bar{background:#181825;border-bottom-color:#333}
[data-theme="dark"] .ella-panel .chat-profile-select{background:#313244;color:#cdd6f4;border-color:#45475a}

/* Typing indicator */
.ella-typing-row{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px}
.ella-typing-row .ella-m-label{display:flex;align-items:center;gap:6px;margin:0}
.ella-typing-row .ella-typing-status{display:block!important;font-size:11px;color:#6a6a78;font-style:italic;margin:0;padding-left:30px;min-height:1.2em;line-height:1.2}
.ella-typing-row .ella-typing-dots{display:inline-flex!important;gap:4px;margin:0;padding-left:30px}
.ella-typing-row .ella-typing-dots>span{width:6px;height:6px;border-radius:50%;background:#8a8a98;display:inline-block;animation:ella-bounce 1s infinite ease-in-out}
.ella-typing-row .ella-typing-dots>span:nth-child(2){animation-delay:.15s}
.ella-typing-row .ella-typing-dots>span:nth-child(3){animation-delay:.30s}
@keyframes ella-bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}

@media(max-width:500px){.ella-panel{width:calc(100% - 16px);right:8px;top:8px;bottom:8px}}

/* Bottom-right floating chat FAB (mirrors the header orb but larger).
   Visibility is controlled by refreshAdminUI() in app.js — same admin gate
   as the header orb. */
.ella-fab-bottom{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;overflow:hidden;cursor:pointer;border:2px solid rgba(255,255,255,0.5);background:conic-gradient(from 200deg,#2ea685,#48a9e5 100deg,#7b4fb0 180deg,#ed79cf 260deg,#2ea685 360deg);padding:0;appearance:none;z-index:9998;box-shadow:0 6px 20px rgba(115,58,147,0.45),0 2px 6px rgba(0,0,0,0.18);transition:box-shadow .2s,transform .15s}
.ella-fab-bottom:hover{box-shadow:0 10px 28px rgba(115,58,147,0.65),0 3px 10px rgba(0,0,0,0.22);transform:translateY(-2px)}
.ella-fab-bottom:active{transform:translateY(0)}
.ella-fab-bottom svg{display:block;width:100%;height:100%;animation:ellaOrbit 20s linear infinite}
.ella-fab-bottom .etr{stroke:#fff;stroke-width:2.2;fill:none;opacity:.35}
.ella-fab-bottom .esg{stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:8 18;stroke-linecap:round;opacity:0}
.ella-fab-bottom .esg1{animation:sigPass 3s ease-in-out infinite}
.ella-fab-bottom .esg2{animation:sigPass 3s ease-in-out infinite 1s}
.ella-fab-bottom .esg3{animation:sigPass 3s ease-in-out infinite 2s}
.ella-fab-bottom .eat{fill:#fff;opacity:.85}
.ella-fab-bottom .eat1{animation:atomFire 3s ease-in-out infinite .5s}
.ella-fab-bottom .eat2{animation:atomFire 3s ease-in-out infinite 1.5s}
.ella-fab-bottom .eat3{animation:atomFire 3s ease-in-out infinite 2.5s}
@media(max-width:500px){.ella-fab-bottom{width:48px;height:48px;bottom:16px;right:16px}}

/* ── Benchmarks ─────────────────────────────── */
.bm-hero { margin-bottom: 16px; }
.bm-hero-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.bm-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.bm-summary-card { background: var(--bg-main, #f7f7fa); border-radius: 8px; padding: 16px; text-align: center; border: 1px solid var(--border); }
.bm-summary-card.bm-summary-primary { background: linear-gradient(135deg, #7a1a86 0%, #a855c8 100%); color: #fff; border: none; }
.bm-summary-value { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.bm-summary-label { display: block; font-size: .8rem; margin-top: 4px; opacity: .8; }
.bm-cat-breakdown { margin-bottom: 12px; }
.bm-formula-note { font-size: .8rem; color: var(--text-muted); background: var(--bg-main, #f7f7fa); padding: 8px 12px; border-radius: 6px; border: 1px dashed var(--border); }
.bm-cards-container { display: flex; flex-direction: column; gap: 12px; }
.bm-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: box-shadow .2s; }
.bm-card:hover { box-shadow: 0 2px 12px rgba(122,26,134,.08); }
.bm-card-header { padding: 14px 16px; }
.bm-card-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bm-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bm-card-name { margin: 0; font-size: 1.05rem; flex: 1; }
.bm-pepm-badge { background: linear-gradient(135deg, #7a1a86 0%, #a855c8 100%); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.bm-pepm-badge small { font-weight: 400; opacity: .8; }
.bm-card-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: .82rem; }
.bm-cat-label { font-weight: 600; }
.bm-conf { color: var(--text-muted); }
.bm-metric { color: var(--text-muted); background: var(--bg-main, #f7f7fa); padding: 1px 8px; border-radius: 10px; font-size: .78rem; }
.bm-card-body { display: none; padding: 0 16px 14px; }
.bm-card.bm-expanded .bm-card-body { display: block; }
.bm-desc { font-size: .9rem; line-height: 1.5; margin: 0 0 12px; }
.bm-calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bm-calc-item { background: var(--bg-main, #f7f7fa); border-radius: 6px; padding: 8px; text-align: center; }
.bm-calc-label { display: block; font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.bm-calc-value { display: block; font-size: 1rem; font-weight: 600; margin-top: 2px; }
.bm-source, .bm-notes { font-size: .82rem; line-height: 1.5; margin-bottom: 8px; color: var(--text-muted); }
.bm-source-links { font-size: .82rem; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bm-source-links strong { margin-right: 4px; }
.bm-src-link { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: .75rem; background: var(--bg-main, #f7f7fa); border: 1px solid var(--border); color: var(--purple-mid, #7a1a86); text-decoration: none; transition: all .15s; }
.bm-src-link:hover { background: var(--purple-mid, #7a1a86); color: #fff; text-decoration: none; }
.bm-uc-section { margin-top: 10px; }
.bm-uc-section strong { font-size: .85rem; }
.bm-uc-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bm-uc-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 14px; font-size: .78rem; cursor: default; }
.bm-uc-ok { background: #e8f5e9; color: #2e7d32; }
.bm-uc-pending { background: #fff3e0; color: #e65100; }
.bm-uc-missing { background: #fce4ec; color: #c62828; }
.bm-uc-unlink { cursor: pointer; font-weight: 700; opacity: .6; margin-left: 2px; }
.bm-uc-unlink:hover { opacity: 1; color: #c62828; }
.bm-uc-formal { background: #e3f2fd; color: #1565c0; border: 1px solid rgba(21,101,192,.2); text-decoration: none; }
.bm-uc-formal:hover { background: #1565c0; color: #fff; }
.bm-link-uc-btn, .bm-link-formal-btn { background: none; border: 1px dashed var(--border); border-radius: 14px; padding: 2px 10px; font-size: .78rem; cursor: pointer; margin-left: 8px; color: var(--purple-mid, #7a1a86); }
.bm-link-uc-btn:hover, .bm-link-formal-btn:hover { background: var(--bg-main, #f7f7fa); }
body[data-theme="dark"] .bm-uc-formal { background: #0d3157; color: #64b5f6; }
.bm-card-admin { display: flex; gap: 6px; padding: 6px 16px 10px; }
.bm-card-admin button { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 3px 12px; font-size: .78rem; cursor: pointer; }
.bm-card-admin button:hover { background: var(--bg-main, #f7f7fa); }
.bm-confirm-del { padding: 8px 16px; background: #fff3e0; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.bm-del-yes { background: #c62828; color: #fff; border: none; border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: .8rem; }
.bm-del-no { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: .8rem; }
body[data-theme="dark"] .bm-uc-ok { background: #1b3a1b; color: #66bb6a; }
body[data-theme="dark"] .bm-uc-pending { background: #3e2a00; color: #ffb74d; }
body[data-theme="dark"] .bm-uc-missing { background: #3e1111; color: #ef9a9a; }
body[data-theme="dark"] .bm-confirm-del { background: #3e2a00; }
.bm-tab-bar { display: flex; gap: 4px; margin-bottom: 12px; }
.bm-tab-btn { padding: 8px 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--text-muted); transition: all .15s; }
.bm-tab-btn.bm-tab-active { background: var(--purple-mid, #7a1a86); color: #fff; border-color: var(--purple-mid, #7a1a86); }
.bm-tab-btn:hover:not(.bm-tab-active) { background: var(--bg-main, #f7f7fa); }
.bm-coverage-reason { font-size: .85rem; line-height: 1.5; color: var(--text-muted); margin: 0 0 10px; padding: 8px 12px; background: var(--bg-main, #f7f7fa); border-radius: 6px; border-left: 3px solid #e57373; }
.bm-coverage-list { display: flex; flex-direction: column; gap: 2px; }
.bm-coverage-uc { display: flex; align-items: baseline; gap: 8px; padding: 3px 6px; font-size: .85rem; border-radius: 4px; }
.bm-coverage-uc:hover { background: var(--bg-main, #f7f7fa); }
.bm-coverage-id { font-family: monospace; font-size: .78rem; font-weight: 700; color: var(--purple-mid, #7a1a86); min-width: 65px; flex-shrink: 0; }

/* Use-case benchmark annotations */
.uc-bm-unlinked { border-left: 3px solid #e57373; }
.uc-bm-linked { border-left: 3px solid #66bb6a; }
.uc-bm-badges { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 6px; vertical-align: middle; }
.uc-bm-pill { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: .65rem; font-weight: 600; background: linear-gradient(135deg, rgba(122,26,134,.1), rgba(168,85,200,.1)); color: var(--purple-mid, #7a1a86); text-decoration: none; border: 1px solid rgba(122,26,134,.2); cursor: pointer; transition: all .15s; }
.uc-bm-pill:hover { background: var(--purple-mid, #7a1a86); color: #fff; text-decoration: none; }
body[data-theme="dark"] .uc-bm-unlinked { border-left-color: #c62828; }
body[data-theme="dark"] .uc-bm-linked { border-left-color: #2e7d32; }

/* ═══ Thought Elaboration (sec-thought-elab) ═══════════════════ */
.te-shell {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  gap: 12px;
  height: calc(100vh - 220px);
  min-height: 560px;
  margin-top: 12px;
}
.te-library {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.te-library-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card-alt, #f8fafc);
}
.te-library-head strong { font-size: 0.9rem; }
.te-library-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.te-library-item {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text, #111827);
  cursor: pointer;
  font: inherit;
  transition: background .15s, border-color .15s;
}
.te-library-item:hover { background: var(--bg-card-alt, #f3f4f6); border-color: var(--border, #e5e7eb); }
.te-library-item--active { background: var(--purple-soft, #f3e8ff); border-color: var(--purple-500, #7c3aed); }
.te-library-item strong { font-size: 0.85rem; line-height: 1.2; }
.te-library-meta { font-size: 0.7rem; color: var(--text-dim, #6b7280); }
.te-library-prompt { font-size: 0.72rem; color: var(--text-dim, #6b7280); font-style: italic; line-height: 1.25; }
.te-empty { padding: 14px; color: var(--text-dim, #6b7280); font-size: 0.82rem; text-align: center; }

.te-main {
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
}
.te-prompt-bar {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg-card-alt, #f8fafc);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: start;
}
.te-prompt-bar .te-prompt-label { font-size: 0.78rem; font-weight: 600; padding-top: 8px; color: var(--text-dim, #6b7280); }
.te-prompt-bar textarea {
  grid-column: 2;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--bg-card, #fff);
  color: var(--text, #111827);
  font: inherit;
  font-size: 0.85rem;
  resize: vertical;
  min-height: 40px;
}
.te-prompt-actions {
  grid-column: 2;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.te-delete-confirm {
  font-size: 0.78rem;
  padding: 4px 12px;
  animation: uc-pulse-text 1s ease-in-out infinite;
}
.te-prompt-actions input[type="text"] {
  flex: 1;
  min-width: 180px;
  padding: 5px 9px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--bg-card, #fff);
  color: var(--text, #111827);
  font: inherit;
  font-size: 0.82rem;
}
.te-status {
  grid-column: 2;
  font-size: 0.78rem;
  color: var(--text-dim, #6b7280);
  min-height: 18px;
}
.te-status--ok { color: #059669; }
.te-status--error { color: #dc2626; }
.te-status--info { color: var(--purple-500, #7c3aed); }

.te-canvas-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.te-toolbar {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: var(--bg-card-alt, #f8fafc);
}
.te-tool-btn {
  padding: 4px 10px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg-card, #fff);
  color: var(--text, #111827);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  transition: filter .15s, transform .1s;
}
.te-tool-btn:hover { filter: brightness(0.96); }
.te-tool-btn:active { transform: translateY(1px); }
.te-tool-btn--active {
  background: var(--purple-500, #7c3aed) !important;
  color: #fff !important;
  border-color: var(--purple-500, #7c3aed) !important;
}
.te-tool-sep { width: 1px; height: 18px; background: var(--border, #e5e7eb); margin: 0 4px; }
.te-legend { display: inline-flex; gap: 10px; margin-left: auto; }
.te-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--text-dim, #6b7280); }
.te-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.te-canvas {
  flex: 1;
  width: 100%;
  background: var(--bg-canvas, #fafbfc);
  cursor: grab;
  user-select: none;
}
.te-canvas:active { cursor: grabbing; }
.te-edge { fill: none; stroke: var(--text-dim, #6b7280); stroke-width: 1.5; opacity: 0.7; }
.te-edge-label { font-size: 11px; fill: var(--text-dim, #6b7280); font-weight: 600; pointer-events: none; }
.te-link-preview { fill: none; stroke: var(--purple-500, #7c3aed); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0.75; pointer-events: none; }

.te-node { cursor: grab; }
.te-node:active { cursor: grabbing; }
.te-node-tag { font-size: 10px; font-weight: 700; fill: #fff; text-transform: uppercase; letter-spacing: 0.4px; }
.te-node-title { font-size: 13px; font-weight: 700; }
.te-node-content { font-size: 11px; font-weight: 400; }
.te-node--sel rect:first-child { filter: drop-shadow(0 0 0 2px rgba(15,23,42,0.15)); }
.te-node--linksrc rect:first-child { stroke-dasharray: 6 4; }

.te-inspector {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.te-inspector-empty { color: var(--text-dim, #6b7280); font-size: 0.85rem; line-height: 1.4; text-align: center; padding: 20px 8px; }
.te-inspector-head { display: flex; justify-content: space-between; align-items: center; }
.te-inspector-head strong { font-size: 0.95rem; }
.te-inspector-del {
  background: none;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-dim, #6b7280);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
.te-inspector-del:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.te-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; font-weight: 600; color: var(--text-dim, #6b7280); }
.te-field input, .te-field select, .te-field textarea {
  padding: 6px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--bg-card, #fff);
  color: var(--text, #111827);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 400;
  resize: vertical;
}
.te-edges-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.te-edges-list > strong { font-size: 0.78rem; color: var(--text-dim, #6b7280); font-weight: 600; }
.te-edge-row {
  display: grid;
  grid-template-columns: 16px 1fr 90px 24px;
  gap: 4px;
  align-items: center;
  font-size: 0.78rem;
  padding: 4px 6px;
  background: var(--bg-card-alt, #f8fafc);
  border-radius: 6px;
}
.te-edge-dir { font-weight: 700; color: var(--purple-500, #7c3aed); text-align: center; }
.te-edge-other { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-edge-label-input {
  padding: 2px 6px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  background: var(--bg-card, #fff);
  color: var(--text, #111827);
  font: inherit;
  font-size: 0.72rem;
}
.te-edge-del {
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim, #6b7280);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  border-radius: 4px;
}
.te-edge-del:hover { background: #fee2e2; color: #b91c1c; }

/* Dark theme overrides for thought elaboration */
body[data-theme="dark"] .te-library,
body[data-theme="dark"] .te-main,
body[data-theme="dark"] .te-inspector { background: var(--bg-card, #1f2937); }
body[data-theme="dark"] .te-canvas { background: #0f172a; }
body[data-theme="dark"] .te-library-head,
body[data-theme="dark"] .te-prompt-bar,
body[data-theme="dark"] .te-toolbar { background: rgba(255,255,255,0.04); }
body[data-theme="dark"] .te-edge-row { background: rgba(255,255,255,0.04); }
body[data-theme="dark"] .te-library-item--active { background: rgba(124, 58, 237, 0.18); }
body[data-theme="dark"] .te-tool-btn { background: rgba(255,255,255,0.06); color: var(--text, #e5e7eb); }

@media (max-width: 1100px) {
  .te-shell { grid-template-columns: 220px 1fr 260px; }
}
@media (max-width: 900px) {
  .te-shell { grid-template-columns: 1fr; height: auto; }
  .te-library, .te-inspector { max-height: 220px; }
}

/* ═══ Deck Templates (sec-deck-templates) ═══════════════════════ */
.dt-page { padding: 0; }
.dt-hero {
  background: linear-gradient(100deg, #1a0e3d 0%, #6663DE 100%);
  color: #fff;
  padding: 32px 36px;
  border-radius: 0 0 12px 12px;
  margin-bottom: 20px;
}
.dt-hero-inner h1 { margin: 0 0 6px 0; font-size: 28px; font-weight: 700; letter-spacing: 0.2px; }
.dt-hero-sub { margin: 0; opacity: 0.92; font-size: 14px; max-width: 880px; }
.dt-hero-sub code { background: rgba(255,255,255,0.18); padding: 1px 5px; border-radius: 3px; color: #fff; font-size: 12.5px; }

.dt-tabs { display: flex; gap: 8px; padding: 0 36px; margin-bottom: 20px; border-bottom: 1px solid var(--border, #e5e7eb); }
.dt-tab {
  background: transparent;
  border: 0;
  padding: 12px 18px;
  cursor: pointer;
  color: var(--text-muted, #6b7280);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.dt-tab:hover { color: var(--text, #1f2937); }
.dt-tab.active { color: #6663DE; border-bottom-color: #6663DE; }

.dt-body { padding: 0 36px 60px; }
.dt-loading { padding: 30px; color: var(--text-muted, #6b7280); }
.dt-error { padding: 16px 20px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 8px; }

.dt-section { margin-bottom: 32px; }
.dt-section > h2 { font-size: 18px; font-weight: 700; margin: 0 0 12px; color: var(--text, #1f2937); }
.dt-muted { color: var(--text-muted, #6b7280); }
.dt-section code { background: var(--bg-card-alt, #f3f4f6); padding: 1px 5px; border-radius: 3px; font-size: 12px; }

/* Pipeline */
.dt-pipeline { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding: 8px 0 14px; }
.dt-pipe-step {
  display: flex; gap: 10px; align-items: center;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  padding: 10px 14px;
  border-radius: 8px;
  min-width: 165px;
  flex: 1 1 165px;
}
.dt-pipe-n {
  width: 28px; height: 28px; border-radius: 50%;
  background: #6663DE; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.dt-pipe-arrow { display: flex; align-items: center; color: #6663DE; font-size: 18px; padding: 0 2px; flex-shrink: 0; }

/* Comparison cards */
.dt-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dt-compare-3 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 1600px) { .dt-compare-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px)  { .dt-compare-3 { grid-template-columns: 1fr; } }
.dt-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 18px 20px;
}
.dt-card h3 { margin: 0 0 4px; font-size: 17px; color: var(--text, #1f2937); }
.dt-card h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #6b7280); }
.dt-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }

/* Mini slide previews */
.dt-mini-slides { display: flex; gap: 8px; margin: 10px 0 8px; }
.dt-slide {
  flex: 1 1 0;
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  font-family: 'Inter', system-ui, sans-serif;
  min-width: 0;
}
.dt-slide-eyebrow { position: absolute; left: 6%; font-size: 6.5px; font-weight: 700; letter-spacing: 0.16em; }
.dt-slide-title   { position: absolute; left: 6%; font-size: 13px; font-weight: 700; line-height: 1.1; }
.dt-slide-rule    { position: absolute; left: 6%; width: 12%; height: 2px; border-radius: 1px; }
.dt-slide-bullets { position: absolute; left: 6%; right: 6%; font-size: 7px; line-height: 1.55; }
.dt-slide-bullets > div { margin: 2px 0; }
.dt-slide-sub     { position: absolute; left: 6%; top: 76%; font-size: 7px; font-style: italic; }
.dt-slide-bar     { position: absolute; left: 6%; border-radius: 1px; }
.dt-slide-label   { position: absolute; right: 6%; bottom: 4%; font-size: 6.5px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.12em; }
.dt-slide[style*="background:#FFFFFF"] .dt-slide-label,
.dt-slide[style*="background:#F5F2ED"] .dt-slide-label { color: rgba(0,0,50,0.4); }

/* Palette swatches */
.dt-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.dt-swatch {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; padding: 6px; border-radius: 6px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg-card, #ffffff);
}
.dt-swatch-color { width: 100%; height: 32px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.08); }
.dt-swatch-name { font-weight: 600; color: var(--text, #1f2937); }
.dt-swatch-hex { font-family: monospace; color: var(--text-muted, #6b7280); font-size: 10.5px; }

.dt-fonts { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dt-fonts-row { display: flex; gap: 10px; align-items: baseline; }
.dt-real-decks ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }

/* Differences table */
.dt-diff-wrap { overflow-x: auto; background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; }
.dt-diff { width: 100%; border-collapse: collapse; font-size: 13px; }
.dt-diff th, .dt-diff td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border, #e5e7eb); vertical-align: top; }
.dt-diff th { background: var(--bg-card-alt, #f9fafb); font-weight: 700; color: var(--text, #1f2937); }
.dt-diff tr:last-child td { border-bottom: 0; }

/* Skills disclosure */
.dt-skills { display: flex; flex-direction: column; gap: 10px; }
.dt-skill { background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 10px 14px; }
.dt-skill summary { cursor: pointer; font-size: 13px; color: var(--text, #1f2937); }
.dt-skill-body { white-space: pre-wrap; font-family: monospace; font-size: 12px; line-height: 1.5; margin: 10px 0 0; max-height: 320px; overflow: auto; background: var(--bg-card-alt, #f9fafb); padding: 10px; border-radius: 6px; }

/* Customise tab */
.dt-profile-picker { display: flex; gap: 8px; margin: 8px 0 16px; }
.dt-profile-pill {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb); background: var(--bg-card, #fff);
  cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--text-muted, #6b7280);
}
.dt-profile-pill:hover { border-color: #6663DE; color: #6663DE; }
.dt-profile-pill.active { background: #6663DE; color: #fff; border-color: #6663DE; }

.dt-pane { background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 18px 20px; }
.dt-pane-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dt-pane-header h3 { margin: 0; font-size: 16px; }
.dt-pane-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.dt-btn {
  padding: 8px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border, #e5e7eb); background: var(--bg-card-alt, #f9fafb);
  font-size: 13px; font-weight: 600; color: var(--text, #1f2937);
}
.dt-btn:hover { border-color: #6663DE; color: #6663DE; }
.dt-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.dt-btn-primary { background: #6663DE; color: #fff; border-color: #6663DE; }
.dt-btn-primary:hover { background: #4f4cbf; border-color: #4f4cbf; color: #fff; }
.dt-btn-primary:disabled { background: #c7c5e8; border-color: #c7c5e8; }
.dt-btn-danger { background: #fff; color: #b91c1c; border-color: #fecaca; }
.dt-btn-danger:hover { background: #fef2f2; }

.dt-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 980px) { .dt-grid-two { grid-template-columns: 1fr; } }
.dt-block h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #6b7280); }

.dt-tokens { display: flex; flex-direction: column; gap: 6px; }
.dt-token-row { display: grid; grid-template-columns: 110px 36px 110px 24px 1fr; gap: 8px; align-items: center; font-size: 12.5px; }
.dt-token-name { font-weight: 600; color: var(--text, #1f2937); }
.dt-token-color { width: 36px; height: 28px; border: 1px solid var(--border, #e5e7eb); border-radius: 4px; padding: 0; cursor: pointer; }
.dt-token-hex { font-family: monospace; padding: 4px 6px; border: 1px solid var(--border, #e5e7eb); border-radius: 4px; font-size: 12px; }
.dt-token-reset {
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid #6663DE; background: #f0eefb; color: #6663DE; cursor: pointer;
  font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.dt-token-reset.dt-muted { background: transparent; border-color: transparent; cursor: default; color: var(--text-muted, #6b7280); }
.dt-token-default { font-family: monospace; font-size: 11px; }

.dt-fonts-edit { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.dt-form-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; font-size: 13px; }
.dt-form-row input { padding: 6px 8px; border: 1px solid var(--border, #e5e7eb); border-radius: 4px; font-size: 13px; }

.dt-styles-edit { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.dt-style-row { display: grid; grid-template-columns: 130px auto auto auto; gap: 12px; align-items: center; font-size: 12.5px; padding: 4px 0; }
.dt-style-name { font-size: 12px; }
.dt-style-label { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted, #6b7280); }
.dt-style-label input[type="number"] { width: 58px; padding: 3px 6px; border: 1px solid var(--border, #e5e7eb); border-radius: 4px; font-size: 12px; }
.dt-style-label input[type="checkbox"] { margin: 0; }

.dt-status { margin-top: 14px; font-size: 13px; min-height: 18px; }
.dt-status-ok { color: #16a34a; }
.dt-status-error { color: #b91c1c; }

/* Patterns catalogue */
.dt-pat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dt-pat-grid-3 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 1600px) { .dt-pat-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px)  { .dt-pat-grid, .dt-pat-grid-3 { grid-template-columns: 1fr; } }
.dt-pat-grid > div > h3 { margin: 0 0 10px; font-size: 15px; }

/* ZED Talk mini-slide flourishes — faithful to Thinking About Thinking - 2026-05-27.pptx
 *   Cover   = NEAR-BLACK bg + a diagonal PURPLE wedge in the lower-right
 *             (built with two CSS triangles using clip-path) + Zellis logo
 *             top-right + title/subtitle/date inside the wedge + "UNLIMIT
 *             WHAT'S NEXT" tagline bottom-right with a coral triangle.
 *   Content = NAVY bg + ALL-CAPS title at top + thin purple subtitle bar +
 *             white card with bullets + Zellis logo top-right.
 *   Closing = NAVY bg + huge centred ALL-CAPS title + Zellis logo top-right.
 *   Divider = PURPLE bg + 115pt section number + 120pt ALL-CAPS title (rendered).
 */

/* ONE clean diagonal purple wedge on the cover — fills the lower-right
 * half of the slide. Right angle sits at the slide's bottom-right corner;
 * the hypotenuse runs from the upper-right edge down to the bottom-left
 * corner. Matches the redesigned addCover helper in zedtalkDeckHelpers.js. */
.dt-zd-wedge {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  clip-path: polygon(100% 7%, 100% 100%, 0 100%);
}

/* Cover title / subtitle / date — all sit inside the purple wedge, anchored
 * to the right side so they stay well clear of the diagonal cut. */
.dt-zd-cover-title {
  position: absolute; left: 52%; top: 36%; width: 46%; height: 18%;
  font-family: 'Sofia Sans Extra Condensed', sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: 0.4px;
  line-height: 1.1;
  display: flex; align-items: center;
}
.dt-zd-cover-subtitle {
  position: absolute; left: 52%; top: 56%; width: 46%; height: 18%;
  font-family: 'Inclusive Sans', sans-serif;
  font-size: 6.5px; line-height: 1.3;
}
.dt-zd-cover-date {
  position: absolute; left: 52%; top: 75%; width: 46%; height: 5%;
  font-family: 'Inclusive Sans', sans-serif;
  font-size: 6px;
}
/* Tagline + coral triangle bottom-right ("UNLIMIT WHAT'S NEXT"). */
.dt-zd-tagline {
  position: absolute; right: 9%; bottom: 4%;
  font-family: 'Inclusive Sans', sans-serif;
  font-weight: 700; font-size: 4.5px; letter-spacing: 0.8px;
  text-align: right; line-height: 1.15;
}
.dt-zd-tagline-tri {
  position: absolute; right: 3%; bottom: 3%;
  width: 0; height: 0;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-bottom: 5px solid #E5544F;
  transform: rotate(90deg);
}

/* Zellis logo top-right on every mini-slide preview. Defaults to the
 * official PNGs in content/logos/ (or per-profile uploaded override). */
.dt-zd-logo-img {
  position: absolute; right: 3%; top: 4%;
  height: 14%; width: auto;
  z-index: 10;
  pointer-events: none;
  object-fit: contain;
}

/* ── Customise tab — Brand logo block ──────────────────────────────────── */
.dt-logo-block { margin-top: 18px; }
.dt-logo-row {
  display: flex; gap: 24px; align-items: center;
  padding: 14px 16px;
  background: var(--bg-card, #fafafa);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
}
.dt-logo-preview {
  position: relative;
  flex: 0 0 240px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 6px;
  overflow: hidden;
  /* Checkerboard so transparent logos read clearly against light or dark
   * preview surfaces. */
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
.dt-logo-preview img {
  max-width: 90%; max-height: 80%;
  object-fit: contain;
  display: block;
}
.dt-logo-preview-custom { border-color: var(--purple-500, #6663DE); border-width: 2px; }
.dt-logo-badge {
  position: absolute; top: 4px; right: 4px;
  font-family: 'Inclusive Sans', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(0,0,0,0.6); color: #fff;
}
.dt-logo-preview-custom .dt-logo-badge {
  background: var(--purple-500, #6663DE);
}
.dt-logo-meta { flex: 1; min-width: 0; }
.dt-logo-name { font-weight: 600; margin-bottom: 4px; word-break: break-word; }
.dt-logo-actions {
  display: flex; gap: 8px; margin-top: 12px; align-items: center;
}
.dt-logo-actions .dt-btn { cursor: pointer; }
body[data-theme="dark"] .dt-logo-row { background: var(--bg-card-dark, #1f1f24); }
body[data-theme="dark"] .dt-logo-preview {
  background-color: #2a2a2e;
  background-image:
    linear-gradient(45deg, #353539 25%, transparent 25%),
    linear-gradient(-45deg, #353539 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #353539 75%),
    linear-gradient(-45deg, transparent 75%, #353539 75%);
}

/* Title narrow — title for content slides, clipped on the right so it
 * doesn't run into the Zellis logo. */
.dt-zd-title-narrow {
  position: absolute; left: 4%; top: 6%; width: 76%;
  font-family: 'Sofia Sans Extra Condensed', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 0.6px;
  text-transform: uppercase;
}
/* Thin purple subtitle bar under the title on content slides (THE signature). */
.dt-zd-subtitle-bar {
  position: absolute; left: 4%; top: 18%; width: 86%; height: 7%;
  display: flex; align-items: center; padding: 0 2%;
  font-family: 'Inclusive Sans', sans-serif;
  font-weight: 700; font-size: 6.5px; letter-spacing: 1.5px;
}
/* Wider purple "core question" band — taller than the subtitle bar. */
.dt-zd-band {
  position: absolute; left: 3%; top: 18%; width: 70%; height: 11%;
  display: flex; align-items: center; padding: 0 4%;
  font-family: 'Sofia Sans Extra Condensed', sans-serif;
  font-weight: 400; font-size: 8.5px; letter-spacing: 0.3px;
}
.dt-zd-band strong { font-weight: 700; margin-left: 4px; }
.dt-zd-card {
  position: absolute; left: 4%; top: 30%; width: 64%; height: 60%;
  padding: 2%;
}
.dt-zd-card-lead {
  font-family: 'Inclusive Sans', sans-serif;
  font-weight: 700; font-size: 8px; margin-bottom: 6%;
}
.dt-zd-card-bullets {
  font-size: 6.5px; line-height: 1.65;
}
.dt-zd-card-bullets > div { margin: 1px 0; }
.dt-pat-card {
  background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 8px;
}
.dt-pat-name { margin-bottom: 4px; }
.dt-pat-name code { font-weight: 700; color: #6663DE; background: transparent; padding: 0; }
.dt-pat-opts { color: var(--text-muted, #6b7280); font-family: monospace; font-size: 11.5px; margin-left: 6px; }
.dt-pat-purpose { font-size: 13px; color: var(--text, #1f2937); line-height: 1.5; }

/* Dark theme overrides for Deck Templates */
body[data-theme="dark"] .dt-card,
body[data-theme="dark"] .dt-pane,
body[data-theme="dark"] .dt-pipe-step,
body[data-theme="dark"] .dt-pat-card,
body[data-theme="dark"] .dt-swatch,
body[data-theme="dark"] .dt-skill,
body[data-theme="dark"] .dt-profile-pill {
  background: var(--bg-card, #1f2937);
  color: var(--text, #e5e7eb);
}
body[data-theme="dark"] .dt-tab { color: var(--text-muted, #9ca3af); }
body[data-theme="dark"] .dt-tab:hover { color: var(--text, #e5e7eb); }
body[data-theme="dark"] .dt-tab.active { color: #c4c2f7; border-bottom-color: #c4c2f7; }
body[data-theme="dark"] .dt-btn { background: rgba(255,255,255,0.06); color: var(--text, #e5e7eb); }
body[data-theme="dark"] .dt-btn-primary { background: #6663DE; color: #fff; }
body[data-theme="dark"] .dt-token-hex,
body[data-theme="dark"] .dt-form-row input,
body[data-theme="dark"] .dt-style-label input[type="number"] {
  background: rgba(255,255,255,0.06); color: var(--text, #e5e7eb); border-color: rgba(255,255,255,0.12);
}
body[data-theme="dark"] .dt-diff th { background: rgba(255,255,255,0.04); }
body[data-theme="dark"] .dt-skill-body { background: rgba(0,0,0,0.25); color: var(--text, #e5e7eb); }


/* Agent Listing — running bar pulse */
@keyframes al-bar-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   PubSub Cost Model Calculator
   ═══════════════════════════════════════════════════════════ */
.psc-page { max-width: 1400px; margin: 0 auto; }
.psc-grid { display: grid; grid-template-columns: 380px 1fr; gap: 12px; margin-top: 10px; }
.psc-col-controls { display: flex; flex-direction: column; gap: 10px; }
.psc-col-results { display: flex; flex-direction: column; gap: 10px; }
.psc-card {
  background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px; padding: 16px; position: relative;
}
.psc-card-title {
  margin: 0 0 12px 0; font-size: 0.92rem; font-weight: 700;
  color: var(--text, #1e293b); letter-spacing: 0.3px;
  border-bottom: 2px solid var(--purple-accent, #7c3aed); padding-bottom: 6px;
}

/* Sliders */
.psc-slider-row {
  display: grid; grid-template-columns: 1fr 120px 70px; align-items: center;
  gap: 8px; margin-bottom: 8px;
}
.psc-slider-label { font-size: 0.82rem; color: var(--text, #334155); white-space: nowrap; }
.psc-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 3px; background: var(--border, #cbd5e1); outline: none;
  cursor: pointer; transition: background 0.15s;
}
.psc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: #7c3aed; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(124,58,237,0.4); cursor: grab;
  transition: transform 0.15s, box-shadow 0.15s;
}
.psc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2); box-shadow: 0 2px 12px rgba(124,58,237,0.6);
}
.psc-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #7c3aed;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(124,58,237,0.4); cursor: grab;
}
.psc-slider-val {
  font-size: 0.85rem; font-weight: 700; text-align: right;
  color: var(--purple-accent, #7c3aed); font-variant-numeric: tabular-nums;
}

/* Preset buttons */
.psc-preset-btn {
  padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
  border: 2px solid var(--preset-color, #94a3b8); background: transparent;
  color: #fff; cursor: pointer; transition: all 0.2s;
}
.psc-preset-btn:hover {
  background: var(--preset-color, #94a3b8); color: #0f172a;
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Headline results */
.psc-headline-card { background: linear-gradient(135deg, #1e1b4b, #4a0a5b); border: none; }
.psc-headline-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; text-align: center;
}
.psc-headline-value {
  font-size: 1.6rem; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.psc-headline-label { font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.psc-anim { transition: all 0.3s ease; }

/* Cost split bar */
.psc-cost-split { margin-top: 14px; }
.psc-cost-split-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.psc-cost-split-seg { transition: width 0.4s ease; }
.psc-cost-split-legend { display: flex; gap: 16px; margin-top: 6px; font-size: 0.78rem; color: rgba(255,255,255,0.7); }
.psc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* Pipeline (funnel) */
.psc-pipeline { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.psc-pipe-step {
  flex: 1; min-width: 80px; text-align: center; padding: 8px 4px;
  background: var(--bg-card-alt, #f8fafc); border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
}
.psc-pipe-num { font-size: 1.1rem; font-weight: 800; color: var(--purple-accent, #7c3aed); }
.psc-pipe-label { font-size: 0.72rem; color: var(--text-muted, #64748b); margin-top: 2px; }
.psc-pipe-arrow { font-size: 1.2rem; color: var(--text-muted, #94a3b8); flex-shrink: 0; }
.psc-pipe-highlight { background: linear-gradient(135deg, #ede9fe, #f3e8ff); border-color: #7c3aed; }
.psc-pipe-warn { background: #fef3c7; border-color: #f59e0b; }
.psc-pipe-warn .psc-pipe-num { color: #d97706; }
.psc-pipe-ok { background: #dcfce7; border-color: #22c55e; }
.psc-pipe-ok .psc-pipe-num { color: #16a34a; }

/* Scenario cards */
.psc-scenario-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.psc-scenario-card {
  padding: 14px; border-radius: 8px; text-align: center;
  background: var(--bg-card-alt, #f8fafc); border: 1px solid var(--border, #e2e8f0);
}
.psc-scenario-name { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.psc-scenario-price { font-size: 1.4rem; font-weight: 800; color: var(--text, #1e293b); }
.psc-scenario-period { font-size: 0.75rem; font-weight: 400; color: var(--text-muted, #64748b); }
.psc-scenario-annual { font-size: 0.82rem; color: var(--text-muted, #64748b); margin-top: 2px; }
.psc-scenario-bar-bg { height: 6px; background: var(--border, #e2e8f0); border-radius: 3px; margin: 8px 0; overflow: hidden; }
.psc-scenario-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.psc-scenario-stats { font-size: 0.75rem; color: var(--text-muted, #64748b); text-align: left; }
.psc-scenario-stats div { margin-top: 2px; }

/* Sensitivity analysis */
.psc-sens-intro { font-size: 0.82rem; color: var(--text-muted, #64748b); margin: 0 0 12px 0; }
.psc-sens-section { margin-bottom: 14px; }
.psc-sens-section h4 { margin: 0 0 6px 0; font-size: 0.82rem; font-weight: 600; color: var(--text, #334155); }
.psc-sens-row { display: grid; grid-template-columns: 50px 1fr 90px; align-items: center; gap: 8px; margin-bottom: 4px; }
.psc-sens-label { font-size: 0.78rem; color: var(--text-muted, #64748b); text-align: right; font-variant-numeric: tabular-nums; }
.psc-sens-bar-bg { height: 14px; background: var(--border, #e5e7eb); border-radius: 7px; overflow: hidden; }
.psc-sens-bar { height: 100%; border-radius: 7px; transition: width 0.4s ease; min-width: 2px; }
.psc-sens-val { font-size: 0.78rem; font-weight: 700; color: var(--text, #334155); font-variant-numeric: tabular-nums; }

/* Notes */
.psc-notes { margin: 0; padding-left: 1.2em; font-size: 0.82rem; line-height: 1.6; }
.psc-notes li { margin-bottom: 4px; color: var(--text, #334155); }
.psc-provenance {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border, #e5e7eb);
  font-size: 0.75rem; color: var(--text-muted, #94a3b8); line-height: 1.5;
}

/* Dark mode overrides */
body[data-theme="dark"] .psc-headline-card { background: linear-gradient(135deg, #1e1b4b, #3b0764); }
body[data-theme="dark"] .psc-pipe-step { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
body[data-theme="dark"] .psc-pipe-highlight { background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.4); }
body[data-theme="dark"] .psc-pipe-warn { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.4); }
body[data-theme="dark"] .psc-pipe-ok { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.4); }
body[data-theme="dark"] .psc-scenario-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
body[data-theme="dark"] .psc-slider { background: rgba(255,255,255,0.15); }

/* Responsive */
@media (max-width: 900px) {
  .psc-grid { grid-template-columns: 1fr; }
  .psc-headline-grid { grid-template-columns: 1fr 1fr; }
  .psc-scenario-grid { grid-template-columns: 1fr; }
}

/* ── SQL Runner ───────────────────────────────────────────────── */
.sqlr-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.sqlr-table th, .sqlr-table td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.sqlr-table th {
  background: var(--bg-surface, #f4f4f6); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.04em; position: sticky; top: 0; z-index: 1;
}
body[data-theme="dark"] .sqlr-table th { background: #1a1f2e; }
.sqlr-table tbody tr:hover { background: var(--bg-hover, rgba(0,0,0,0.03)); }
body[data-theme="dark"] .sqlr-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.sqlr-results-scroll { max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sqlr-results-table td { white-space: nowrap; max-width: 400px; overflow: hidden; text-overflow: ellipsis; }
.sqlr-results-table td:hover { white-space: normal; word-break: break-all; }
.sqlr-row-num { color: var(--text-dim); font-size: 0.75rem; text-align: right !important; min-width: 32px; user-select: none; }
.sqlr-null { color: var(--text-dim); font-style: italic; }
.sqlr-error { padding: 12px 16px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: var(--radius-sm); font-size: 0.85rem; white-space: pre-wrap; }
body[data-theme="dark"] .sqlr-error { background: #2d1b1b; color: #fca5a5; border-color: #7f1d1d; }
.sqlr-editor {
  width: 100%; min-height: 120px; margin-top: 10px; padding: 10px 12px;
  font-family: "Cascadia Code", "Fira Code", "Consolas", monospace; font-size: 0.85rem; line-height: 1.5;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
  resize: vertical; tab-size: 2;
}
.sqlr-editor:focus { outline: none; border-color: var(--purple-500, #7c3aed); box-shadow: 0 0 0 2px rgba(124,58,237,0.15); }
.sqlr-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 10px;
}
.sqlr-form-grid label {
  display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; font-weight: 500; color: var(--text-dim);
}
.sqlr-form-grid input[type="text"], .sqlr-form-grid input[type="password"], .sqlr-form-grid input[type="number"], .sqlr-form-grid input:not([type]) {
  padding: 6px 8px; font: inherit; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text);
}
.btn-xs { padding: 2px 8px; font-size: 0.75rem; }
.btn-confirming { background: #dc2626 !important; color: #fff !important; }

/* Education wiki keyword links */
.eth-wl { color: var(--purple-bright, #7a1a86); text-decoration: none; border-bottom: 1px dashed rgba(122,26,134,0.4); cursor: pointer; font-weight: 600; }
.eth-wl:hover { border-bottom-style: solid; color: var(--purple-deep, #2f0438); }
body[data-theme="dark"] .eth-wl { color: #c084fc; border-bottom-color: rgba(192,132,252,0.4); }
body[data-theme="dark"] .eth-wl:hover { color: #e9d5ff; }

/* ── Test Analysis ────────────────────────────────────────── */
.ta-hero {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 32px; margin-bottom: 20px;
  background: linear-gradient(135deg, #0f1428 0%, #1a1040 50%, #0a0e1a 100%);
  border-radius: 14px; border: 1px solid rgba(192,132,252,0.15);
  position: relative; overflow: hidden;
}
.ta-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(192,132,252,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.ta-hero-left { position: relative; z-index: 1; }
.ta-title { margin: 0 0 6px; font-size: 1.7rem; color: #fff; font-weight: 700; letter-spacing: -0.02em; }
.ta-subtitle { margin: 0 0 14px; color: rgba(255,255,255,0.55); font-size: 0.95rem; }
.ta-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-chip {
  padding: 3px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.2s;
  user-select: none;
}
.ta-chip:hover { background: rgba(255,255,255,0.16); color: #fff; }
.ta-chip-toggle:not(.active) { opacity: 0.4; text-decoration: line-through; }
.ta-chip-toggle.active { background: rgba(192,132,252,0.2); border-color: rgba(192,132,252,0.3); }
.ta-hero-health { position: relative; z-index: 1; flex-shrink: 0; text-align: center; }
.ta-health-ring {
  width: 80px; height: 80px; border-radius: 50%;
  border: 3px solid; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3);
}
.ta-health-number { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.ta-health-label { font-size: 0.7rem; text-transform: uppercase; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; }

.ta-tabs {
  display: flex; gap: 2px; margin-bottom: 20px;
  background: var(--bg-card, #f8f7fa); border-radius: 10px; padding: 3px;
  border: 1px solid var(--border);
}
.ta-tab {
  flex: 1; padding: 10px 16px; border: none; background: transparent;
  color: var(--text-secondary, #666); font-size: 0.9rem; font-weight: 600;
  border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
.ta-tab:hover { background: rgba(122,26,134,0.06); }
.ta-tab.active { background: var(--purple-deep, #4a0a5b); color: #fff; }
body[data-theme="dark"] .ta-tabs { background: #1a1a2e; }
body[data-theme="dark"] .ta-tab { color: rgba(255,255,255,0.5); }
body[data-theme="dark"] .ta-tab:hover { background: rgba(192,132,252,0.1); }
body[data-theme="dark"] .ta-tab.active { background: #7c3aed; color: #fff; }

.ta-summary-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
}
@media (max-width: 800px) { .ta-summary-grid { grid-template-columns: repeat(2, 1fr); } }
.ta-stat-card {
  padding: 20px; border-radius: 12px;
  background: var(--bg-card, #fff); border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
body[data-theme="dark"] .ta-stat-card { background: #141424; border-color: rgba(255,255,255,0.08); }
.ta-stat-value { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.ta-stat-label { font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.ta-stat-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  border-radius: 0 0 12px 12px;
}

.ta-severity-row { margin-bottom: 24px; }
.ta-severity-row h3 { margin: 0 0 10px; font-size: 1rem; }
.ta-severity-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.ta-sev-pill { padding: 6px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; }

.ta-themes-section { margin-bottom: 24px; }
.ta-themes-section h3 { margin: 0 0 12px; font-size: 1rem; }
.ta-theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ta-theme-card {
  padding: 16px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ta-theme-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
body[data-theme="dark"] .ta-theme-card { background: #141424; border-color: rgba(255,255,255,0.08); }
body[data-theme="dark"] .ta-theme-card:hover { box-shadow: 0 4px 16px rgba(192,132,252,0.1); }
.ta-theme-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ta-theme-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ta-theme-count { font-size: 0.75rem; opacity: 0.5; margin-left: auto; }
.ta-theme-desc { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; }
.ta-theme-cat { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.ta-code-section { margin-bottom: 24px; }
.ta-code-section h3 { margin: 0 0 10px; font-size: 1rem; }
.ta-code-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-code-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px; font-size: 0.82rem;
  background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.2);
  color: var(--text);
}
.ta-code-dot { width: 6px; height: 6px; border-radius: 50%; }
.ta-code-count { opacity: 0.5; }

.ta-ticket-list { margin-bottom: 24px; }
.ta-ticket-list h3 { margin: 0 0 10px; font-size: 1rem; }
.ta-ticket-table { overflow-x: auto; }
.ta-ticket-table table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ta-ticket-table th { text-align: left; padding: 8px 12px; font-weight: 600; border-bottom: 2px solid var(--border); }
.ta-ticket-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.ta-pill {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 0.75rem; font-weight: 600; text-transform: capitalize;
}
.ta-mini-chip {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 0.72rem; background: rgba(192,132,252,0.12);
  color: var(--purple-bright, #7a1a86); margin: 1px 2px;
}
body[data-theme="dark"] .ta-mini-chip { background: rgba(192,132,252,0.15); color: #c084fc; }

.ta-graph-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; font-size: 0.85rem; color: var(--text-secondary);
}
.ta-graph-stats { display: flex; gap: 16px; }

.ta-legend-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 16px; font-size: 0.78rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
  transition: all 0.2s;
}
.ta-legend-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.ta-legend-btn.active { background: rgba(192,132,252,0.2); color: #fff; border-color: rgba(192,132,252,0.4); }

.ta-graph-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.ta-graph-modal-inner {
  background: var(--bg-card, #fff); border-radius: 14px;
  padding: 24px; max-width: 500px; width: 90%;
  border: 1px solid var(--border); position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
body[data-theme="dark"] .ta-graph-modal-inner { background: #1a1a2e; border-color: rgba(255,255,255,0.1); }
.ta-graph-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; font-size: 1.5rem; cursor: pointer;
  color: var(--text-secondary); line-height: 1;
}
.ta-modal-pill {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 0.78rem; border: 1px solid; background: rgba(255,255,255,0.03);
  color: var(--text);
}

.ta-kb-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ta-kb-search { flex: 1; }
.ta-kb-search input {
  width: 100%; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); font-size: 0.9rem;
}
body[data-theme="dark"] .ta-kb-search input { background: #141424; border-color: rgba(255,255,255,0.1); color: #fff; }

.ta-kb-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ta-kb-cat {
  padding: 4px 14px; border-radius: 16px; font-size: 0.8rem; font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.2s; color: var(--text-secondary);
}
.ta-kb-cat:hover { border-color: var(--purple-bright); color: var(--purple-bright); }
.ta-kb-cat.active { background: var(--purple-deep, #4a0a5b); color: #fff; border-color: var(--purple-deep); }
body[data-theme="dark"] .ta-kb-cat { background: #141424; border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
body[data-theme="dark"] .ta-kb-cat.active { background: #7c3aed; color: #fff; }

.ta-kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ta-kb-card {
  padding: 16px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.2s;
}
.ta-kb-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(192,132,252,0.08); border-color: rgba(192,132,252,0.3); }
body[data-theme="dark"] .ta-kb-card { background: #141424; border-color: rgba(255,255,255,0.08); }
body[data-theme="dark"] .ta-kb-card:hover { border-color: rgba(192,132,252,0.3); box-shadow: 0 4px 16px rgba(192,132,252,0.1); }
.ta-kb-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ta-kb-card-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ta-kb-card-title { font-weight: 600; font-size: 0.92rem; }
.ta-kb-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ta-kb-card-cat { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ta-kb-card-date { font-size: 0.75rem; opacity: 0.4; }
.ta-kb-card-tags { margin-top: 4px; }
.ta-kb-card-tickets { font-size: 0.75rem; opacity: 0.5; margin-top: 6px; }

.ta-article { max-width: 900px; }
.ta-article h1 { margin: 0 0 8px; font-size: 1.5rem; }
.ta-article-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; align-items: center; }
.ta-article-body { line-height: 1.7; }

.ta-admin-bar {
  margin-top: 28px; padding: 20px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
}
body[data-theme="dark"] .ta-admin-bar { background: #141424; border-color: rgba(255,255,255,0.08); }
.ta-admin-bar h3 { margin: 0 0 12px; font-size: 1rem; }
.ta-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.ta-form label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; margin-top: 8px; }
.ta-form input, .ta-form select, .ta-form textarea {
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--text); font-size: 0.9rem;
}
body[data-theme="dark"] .ta-form input, body[data-theme="dark"] .ta-form select, body[data-theme="dark"] .ta-form textarea {
  background: #0d0d1a; border-color: rgba(255,255,255,0.1); color: #fff;
}

.ta-empty-state { text-align: center; padding: 60px 20px; }
.ta-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.ta-empty-state h2 { margin: 0 0 8px; }
.ta-empty-state p { color: var(--text-secondary); max-width: 500px; margin: 0 auto; }

.ta-ai-summary { line-height: 1.6; }
.ta-ai-summary h3 { display: flex; align-items: center; gap: 10px; }
.ta-ai-summary h4 { margin: 16px 0 8px; }
.ta-ai-summary ul { padding-left: 20px; }
.ta-ai-summary li { margin-bottom: 4px; }

.ta-clickable { cursor: pointer; }
.ta-sev-toggle { cursor: pointer; transition: all 0.2s; user-select: none; }
.ta-sev-toggle:not(.active) { opacity: 0.3; filter: grayscale(0.7); }
.ta-sev-toggle:hover { transform: scale(1.05); }

.ta-theme-card.ta-active-filter { border-color: #ffd700; box-shadow: 0 0 0 2px rgba(255,215,0,0.25); }
.ta-code-pill.ta-active-filter { border-color: #00ff88; box-shadow: 0 0 0 2px rgba(0,255,136,0.2); background: rgba(0,255,136,0.15); }

.ta-ticket-row { transition: background 0.15s; }
.ta-ticket-row:hover { background: rgba(192,132,252,0.06); }
body[data-theme="dark"] .ta-ticket-row:hover { background: rgba(192,132,252,0.08); }
/* Ticket-id cell — obvious clickable link. Primary ADO-XXXX in the theme
   link colour + underline-on-hover, secondary BUG-XXXX subdued. The small
   ↗ icon next to it jumps straight to the Azure DevOps work item. */
.ta-tid { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.82rem; white-space: nowrap; }
.ta-tid-link { color: #8ab4f8; text-decoration: none; font-weight: 600; }
.ta-tid-link:hover { text-decoration: underline; }
.ta-tid-ado { color: #8ab4f8; }
.ta-tid-bug { color: var(--text-dim, #94a3b8); font-weight: 400; font-size: 0.75rem; }
.ta-tid-adoext { display: inline-block; margin-left: 4px; padding: 0 4px; color: #8ab4f8; text-decoration: none; font-size: 0.78rem; opacity: 0.7; border: 1px solid rgba(138,180,248,0.35); border-radius: 4px; }
.ta-tid-adoext:hover { opacity: 1; background: rgba(138,180,248,0.12); }

.ta-filter-label { font-size: 0.82rem; margin-left: 10px; }

.ta-detail-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  animation: taFadeIn 0.15s ease-out;
}
@keyframes taFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ta-detail-inner {
  background: var(--bg-card, #fff); border-radius: 16px;
  padding: 28px; max-width: 560px; width: 92%;
  border: 1px solid var(--border); position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  max-height: 85vh; overflow-y: auto;
  animation: taSlideUp 0.2s ease-out;
}
@keyframes taSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
body[data-theme="dark"] .ta-detail-inner { background: #1a1a2e; border-color: rgba(255,255,255,0.1); }
.ta-detail-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; font-size: 1.6rem; cursor: pointer;
  color: var(--text-secondary); line-height: 1; width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ta-detail-close:hover { background: rgba(0,0,0,0.08); }
body[data-theme="dark"] .ta-detail-close:hover { background: rgba(255,255,255,0.08); }
.ta-detail-header { margin-bottom: 16px; }
.ta-detail-section { margin-bottom: 14px; }
.ta-detail-section h4 { margin: 0 0 6px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; }
.ta-detail-section p { margin: 0; line-height: 1.5; }
.ta-article-preview { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 16px; }

.ta-wikilink { color: var(--purple-bright, #7a1a86); text-decoration: none; border-bottom: 1px dashed rgba(122,26,134,0.4); cursor: pointer; font-weight: 600; }
.ta-wikilink:hover { border-bottom-style: solid; }
body[data-theme="dark"] .ta-wikilink { color: #c084fc; border-bottom-color: rgba(192,132,252,0.4); }
body[data-theme="dark"] .ta-wikilink:hover { color: #e9d5ff; }
.ta-wikilink-broken { color: #ff6b6b; border-bottom-color: rgba(255,107,107,0.4); }
body[data-theme="dark"] .ta-wikilink-broken { color: #ff6b6b; }

.ta-compile-status { text-align: center; padding: 40px 20px; }
.ta-compile-status p { margin: 0; color: var(--text-secondary); }
.ta-compile-result { line-height: 1.6; }
.ta-compile-result h3 { margin-bottom: 12px; }
.ta-compile-result ul { padding-left: 20px; margin: 4px 0 8px; }
.ta-compile-result li { margin-bottom: 3px; font-size: 0.9rem; }