/* ============================================================
   ExpertLab Learner — Premium App Shell
   ============================================================ */

/* ── Typography ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Play:wght@400;700&display=swap');

/* ── Design tokens ── */
:root {
  /* Fonts */
  --font-display: "Play", Inter, system-ui, sans-serif;
  --font-body:    Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Backgrounds */
  --bg-main:         #06111f;
  --bg-panel:        rgba(9, 24, 42, 0.78);
  --bg-panel-strong: rgba(14, 34, 58, 0.94);
  --bg-sidebar:      rgba(5, 16, 30, 0.96);
  --bg-card:         rgba(8, 22, 40, 0.72);
  --bg-inset:        rgba(0, 0, 0, 0.28);

  /* Borders */
  --border-soft:   rgba(93, 160, 220, 0.14);
  --border-mid:    rgba(93, 160, 220, 0.24);
  --border-active: rgba(82, 150, 255, 0.68);
  --border-panel:  rgba(93, 160, 220, 0.18);

  /* Text */
  --text-main:  #f4f7fb;
  --text-muted: #8fa6bd;
  --text-dim:   #5e7288;
  --text-acc:   #4fd8ff;

  /* Semantic colours */
  --blue:   #4c8dff;
  --cyan:   #4fd8ff;
  --green:  #5ee0a0;
  --gold:   #f4b95b;
  --locked: #4b5563;

  --ok:   #5ee0a0;
  --warn: #f4b95b;
  --err:  #e8526a;

  /* Accent */
  --accent:   #4fd8ff;
  --accent-2: #5ee0a0;
  --acc-glow: rgba(79, 216, 255, 0.18);

  /* Radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Shadows */
  --sh-card:  0 2px 20px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.30);
  --sh-float: 0 8px 40px rgba(0,0,0,0.60);
  --sh-glow:  0 0 24px rgba(79,216,255,0.14);

  /* Sidebar */
  --sidebar-w: 58px;
  --topbar-h:  52px;
  --mobile-bottomnav-h: 58px;
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --font-size-body: 14px;
  --font-size-topbar-title: 14px;
  --font-size-topbar-section: 11px;
  --font-size-menu-label: 12px;
  --font-size-menu-hint: 11px;
  --font-size-menu-link: 13px;
}

:root[data-theme="light"] {
  --bg-main:         #eff4fa;
  --bg-panel:        rgba(248, 251, 255, 0.94);
  --bg-panel-strong: rgba(255, 255, 255, 0.98);
  --bg-sidebar:      rgba(243, 248, 255, 0.98);
  --bg-card:         rgba(255, 255, 255, 0.92);
  --bg-inset:        rgba(215, 229, 244, 0.38);
  --border-soft:     rgba(25, 87, 135, 0.13);
  --border-mid:      rgba(25, 87, 135, 0.24);
  --border-active:   rgba(50, 118, 199, 0.72);
  --border-panel:    rgba(25, 87, 135, 0.20);
  --text-main:       #102235;
  --text-muted:      #3a5774;
  --text-dim:        #5a7490;
  --text-acc:        #0f7ca8;
  --accent:          #1578a7;
  --acc-glow:        rgba(21, 120, 167, 0.16);
}

:root[data-font-size="large"] {
  --font-size-body: 15.5px;
  --font-size-topbar-title: 15.5px;
  --font-size-topbar-section: 12px;
  --font-size-menu-label: 13px;
  --font-size-menu-hint: 12px;
  --font-size-menu-link: 14px;
}

/* Dark is the baseline token set in :root; data-theme="dark" intentionally uses defaults. */

/* Large-text mode extends readability across learner hub/career/dashboard surfaces. */
:root[data-font-size="large"] .welcome-title { font-size: clamp(1.9rem, 4.9vw, 2.2rem); }
:root[data-font-size="large"] .welcome-subtitle,
:root[data-font-size="large"] .module-desc,
:root[data-font-size="large"] .side-info-text,
:root[data-font-size="large"] .mia-message,
:root[data-font-size="large"] .mia-meta,
:root[data-font-size="large"] .node-mia-note p,
:root[data-font-size="large"] .node-locked-reason,
:root[data-font-size="large"] .node-locked-how,
:root[data-font-size="large"] .db-status-text,
:root[data-font-size="large"] .db-kpi-explanation-text,
:root[data-font-size="large"] .dashboard-recent-list li,
:root[data-font-size="large"] .dashboard-blocked-text,
:root[data-font-size="large"] .db-next-subtitle,
:root[data-font-size="large"] .dashboard-progress-meta,
:root[data-font-size="large"] .dashboard-progress-pct,
:root[data-font-size="large"] .dashboard-distribution-item,
:root[data-font-size="large"] .dashboard-diagnostic-values-item,
:root[data-font-size="large"] .mia-float-role,
:root[data-font-size="large"] .mia-float-home-meta,
:root[data-font-size="large"] .mia-float-tips li,
:root[data-font-size="large"] .mia-dock-message,
:root[data-font-size="large"] .mia-dock-meta,
:root[data-font-size="large"] .mia-dock-panel-tips li {
  font-size: clamp(0.8rem, 1.2vw, 0.96rem);
}

:root[data-font-size="large"] .module-title,
:root[data-font-size="large"] .btn-primary,
:root[data-font-size="large"] .btn-secondary,
:root[data-font-size="large"] .course-link,
:root[data-font-size="large"] .node-detail-competence,
:root[data-font-size="large"] .node-progress-pct,
:root[data-font-size="large"] .node-detail-dl dd,
:root[data-font-size="large"] .course-unavailable,
:root[data-font-size="large"] .course-locked-label,
:root[data-font-size="large"] .db-title,
:root[data-font-size="large"] .db-family-name,
:root[data-font-size="large"] .db-family-meta p,
:root[data-font-size="large"] .db-family-cta,
:root[data-font-size="large"] .db-next-title,
:root[data-font-size="large"] .dashboard-progress-title,
:root[data-font-size="large"] .mia-name,
:root[data-font-size="large"] .mia-float-name,
:root[data-font-size="large"] .mia-float-message,
:root[data-font-size="large"] .mia-dock-name,
:root[data-font-size="large"] .mia-dock-panel-msg {
  font-size: clamp(0.9rem, 1.35vw, 1.05rem);
}

:root[data-font-size="large"] .btn-secondary--compact,
:root[data-font-size="large"] .db-panel-title,
:root[data-font-size="large"] .db-panel-sub,
:root[data-font-size="large"] .db-empty,
:root[data-font-size="large"] .dashboard-refresh-chip,
:root[data-font-size="large"] .node-status-badge,
:root[data-font-size="large"] .node-level-badge,
:root[data-font-size="large"] .node-detail-family,
:root[data-font-size="large"] .node-progress-label-text,
:root[data-font-size="large"] .node-detail-dl dt,
:root[data-font-size="large"] .learner-page-status-badge,
:root[data-font-size="large"] .mia-role,
:root[data-font-size="large"] .mia-dock-text,
:root[data-font-size="large"] .account-menu-title,
:root[data-font-size="large"] .account-menu-status {
  font-size: clamp(0.75rem, 1.08vw, 0.9rem);
}

:root[data-font-size="large"] .kpi-value,
:root[data-font-size="large"] .db-kpi-value,
:root[data-font-size="large"] .db-engagement-score,
:root[data-font-size="large"] .db-family-pct {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
}

:root[data-font-size="large"] .db-kpi-value--hero {
  font-size: clamp(2rem, 4.6vw, 2.7rem) !important;
}

:root[data-font-size="large"] .db-kpi-label,
:root[data-font-size="large"] .db-engagement-label,
:root[data-font-size="large"] .db-next-status,
:root[data-font-size="large"] .db-eyebrow,
:root[data-font-size="large"] .module-badge,
:root[data-font-size="large"] .node-locked-header,
:root[data-font-size="large"] .panel-section-label {
  font-size: clamp(0.68rem, 0.95vw, 0.82rem);
}

/* Career map SVG text: readable in large-text mode without changing map behavior. */
:root[data-font-size="large"] #career-map-svg text {
  font-size: clamp(10px, 1.08vw, 19px);
}
:root[data-font-size="large"] #career-map-svg text[font-size="8"]  { font-size: clamp(10px, 1.0vw, 13px); }
:root[data-font-size="large"] #career-map-svg text[font-size="11"] { font-size: clamp(12px, 1.12vw, 16px); }
:root[data-font-size="large"] #career-map-svg text[font-size="13"] { font-size: clamp(14px, 1.24vw, 18px); }
:root[data-font-size="large"] #career-map-svg text[font-size="14"] { font-size: clamp(15px, 1.3vw, 19px); }
:root[data-font-size="large"] #career-map-svg text[font-size="16"] { font-size: clamp(17px, 1.45vw, 22px); }
:root[data-font-size="large"] #career-map-svg text[font-size="18"] { font-size: clamp(19px, 1.58vw, 24px); }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

@media (max-width: 900px) {
  html, body { height: 100%; overflow: hidden; }
  body.learner-theme {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .app-shell { flex: 1; min-height: 0; }
}

body.learner-theme {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.55;
  color: var(--text-main);
  background: var(--bg-main);
  background-image:
    radial-gradient(ellipse 70% 50% at 0% 0%,    rgba(76, 141, 255, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 100% 8%,  rgba(94, 224, 160, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
  overflow: hidden;
}

/* ============================================================
   APP SHELL — sidebar + topbar + content
   ============================================================ */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ── */
.app-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 0 16px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-soft);
  z-index: 20;
  overflow: visible;
}

.sidebar-brand {
  width: 100%;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.sidebar-brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(1.1);
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 0;
  width: 100%;
}

.sidebar-item {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .16s, background .16s, border-color .16s;
  cursor: pointer;
}

.sidebar-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-item:hover {
  color: var(--text-muted);
  background: rgba(255,255,255,0.05);
}

.sidebar-item.active {
  color: var(--accent);
  background: rgba(79, 216, 255, 0.10);
  border-color: rgba(79, 216, 255, 0.22);
}

.sidebar-item--disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.sidebar-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--bg-panel-strong);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-main);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 100;
  box-shadow: var(--sh-card);
}

.sidebar-item:hover .sidebar-tooltip { opacity: 1; }

.sidebar-divider {
  width: 28px;
  height: 1px;
  background: var(--border-soft);
  margin: 6px 0;
  flex-shrink: 0;
}

.sidebar-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}

/* ── Topbar ── */
.app-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 18px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(6, 17, 31, 0.94);
  backdrop-filter: blur(16px);
  z-index: 10;
  gap: 16px;
  flex-shrink: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.topbar-section {
  font-size: var(--font-size-topbar-section);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: var(--font-display);
}

.topbar-divider {
  width: 1px;
  height: 16px;
  background: var(--border-soft);
  flex-shrink: 0;
}

.topbar-page-title {
  font-size: var(--font-size-topbar-title);
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
  font-family: var(--font-display);
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
  flex-shrink: 1;
}

.topbar-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color .15s, background .15s, border-color .15s;
}

.topbar-icon-btn svg { width: 15px; height: 15px; }
.topbar-icon-btn:hover { color: var(--text-muted); background: rgba(255,255,255,0.06); border-color: var(--border-mid); }

.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1b4870, #0c2540);
  border: 1.5px solid rgba(79, 216, 255, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.topbar-avatar:hover,
.topbar-avatar:focus-visible,
.topbar-avatar.is-open {
  border-color: rgba(79, 216, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(79, 216, 255, 0.16);
}

.topbar-avatar:focus-visible {
  outline: none;
}

.account-avatar-host {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.active-journey-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 0;
  background: #d93a3a;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.preview-mode-badge {
  position: absolute;
  top: -34px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 202, 79, 0.35);
  background: rgba(255, 202, 79, 0.14);
  color: #ffe8a5;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}

.preview-mode-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 202, 79, 0.30);
  background: rgba(255, 202, 79, 0.10);
  color: #fbe7b1;
  font-size: 12px;
  line-height: 1.35;
}

/* Mia dock in reviewer preview mode: subtle gold tint on border */
.mia-dock[data-preview="true"] {
  border-color: rgba(255, 202, 79, 0.28);
  background: rgba(255, 202, 79, 0.04);
}
.mia-dock[data-preview="true"] .mia-dock-message {
  color: #fbe7b1;
}

.preview-mode-note p {
  margin: 0;
}

.preview-mode-note p + p {
  margin-top: 4px;
}

.preview-mode-note--compact {
  margin-top: 6px;
  max-width: 540px;
}

.account-menu {
  position: fixed;
  min-width: 220px;
  max-width: min(92vw, 320px);
  background: rgba(8, 24, 42, 0.98);
  border: 1px solid rgba(93, 160, 220, 0.28);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  padding: 12px;
  z-index: 2500;
}

:root[data-theme="light"] .app-topbar {
  background: rgba(245, 250, 255, 0.96);
}

:root[data-theme="light"] .account-menu {
  background: rgba(250, 253, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.28);
}

/* Hub cards/panels: explicit light coverage for dark hard-coded card surfaces. */
:root[data-theme="light"] .module-card {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(25, 87, 135, 0.16);
}

:root[data-theme="light"] .module-card--active {
  background: linear-gradient(160deg, rgba(237, 247, 255, 0.96), rgba(250, 253, 255, 0.98));
  border-color: rgba(21, 120, 167, 0.30);
}

:root[data-theme="light"] .module-icon {
  background: rgba(21, 120, 167, 0.10);
  border-color: rgba(21, 120, 167, 0.26);
}

:root[data-theme="light"] .module-arrow {
  background: rgba(21, 120, 167, 0.10);
  border-color: rgba(21, 120, 167, 0.24);
}

:root[data-theme="light"] .mia-panel-full,
:root[data-theme="light"] .side-info {
  background: rgba(248, 252, 255, 0.92);
}

/* Career map + side panel: explicit light overrides for SVG/panel dark surfaces. */
:root[data-theme="light"] .career-panel,
:root[data-theme="light"] .mia-block,
:root[data-theme="light"] .node-detail {
  background: rgba(251, 254, 255, 0.94);
}

:root[data-theme="light"] .map-ctrl-btn {
  background: rgba(244, 250, 255, 0.96);
  border-color: rgba(25, 87, 135, 0.28);
  color: var(--text-muted);
}

:root[data-theme="light"] .cluster-focus-ctx {
  background: rgba(21, 120, 167, 0.12);
  border-color: rgba(21, 120, 167, 0.26);
  color: #0f6f99;
}

:root[data-theme="light"] .career-status-filter-dropdown-btn {
  border-color: rgba(21, 120, 167, 0.42);
  background: linear-gradient(135deg, rgba(21, 120, 167, 0.18) 0%, rgba(21, 120, 167, 0.10) 100%);
  color: #13496b;
}

:root[data-theme="light"] .career-status-filter-select-wrap::after {
  border-right-color: rgba(19, 73, 107, 0.9);
  border-bottom-color: rgba(19, 73, 107, 0.9);
}

:root[data-theme="light"] .career-status-filter-select-wrap.is-open .career-status-filter-dropdown-btn {
  border-color: rgba(21, 120, 167, 0.62);
  box-shadow: inset 0 0 0 1px rgba(21, 120, 167, 0.20), 0 0 12px rgba(21, 120, 167, 0.14);
}

:root[data-theme="light"] .career-status-filter-dropdown-menu {
  border-color: rgba(21, 120, 167, 0.34);
  background: linear-gradient(155deg, rgba(244, 250, 255, 0.98), rgba(252, 255, 255, 0.98));
}

:root[data-theme="light"] .career-status-filter-dropdown-option {
  color: #2f5778;
}

:root[data-theme="light"] .career-status-filter-dropdown-option:hover,
:root[data-theme="light"] .career-status-filter-dropdown-option.is-focused {
  color: #0f496c;
  background: rgba(21, 120, 167, 0.12);
}

:root[data-theme="light"] .career-status-filter-dropdown-option[aria-selected="true"] {
  color: #0e4d72;
  background: linear-gradient(135deg, rgba(21, 120, 167, 0.18) 0%, rgba(21, 120, 167, 0.10) 100%);
  box-shadow: inset 0 0 0 1px rgba(21, 120, 167, 0.22);
}

:root[data-theme="light"] .learner-page-status-badge {
  background: rgba(239, 247, 255, 0.95);
  border-color: rgba(21, 120, 167, 0.30);
  color: #225273;
}

:root[data-theme="light"] .learner-page-status-badge::before {
  box-shadow: 0 0 6px rgba(21, 120, 167, 0.42);
}

:root[data-theme="light"] #career-map-svg rect[fill="#040c18"] {
  fill: #e9f2fb !important;
}

:root[data-theme="light"] #career-map-svg circle[stroke="#040c18"] {
  stroke: rgba(231, 241, 250, 0.98) !important;
  opacity: 1 !important;
}

:root[data-theme="light"] #career-map-svg circle[stroke="rgba(94,168,220,0.18)"] {
  stroke: rgba(25, 87, 135, 0.26) !important;
}

:root[data-theme="light"] #career-map-svg circle[stroke="rgba(61,184,245,0.22)"] {
  stroke: rgba(21, 120, 167, 0.38) !important;
}

:root[data-theme="light"] #career-map-svg circle[fill="rgba(61,184,245,0.07)"] {
  fill: rgba(21, 120, 167, 0.08) !important;
}

:root[data-theme="light"] #career-map-svg circle[fill="url(#cg)"] {
  stroke: #1578a7 !important;
}

:root[data-theme="light"] #career-map-svg circle[fill="#071828"] {
  fill: #dff0ff !important;
}

:root[data-theme="light"] #career-map-svg text[fill="#042e18"] {
  fill: #104d70 !important;
}

:root[data-theme="light"] #career-map-svg text[fill="#cceeff"],
:root[data-theme="light"] #career-map-svg text[fill="rgba(170,215,240,0.65)"] {
  fill: #2c5375 !important;
}

/* Family-end badges around map perimeter. */
:root[data-theme="light"] #career-map-svg rect[fill="#071828"][width="58"][height="36"] {
  fill: #edf6ff !important;
  stroke: rgba(21, 120, 167, 0.72) !important;
  width: 72px;
  height: 42px;
  transform: translateX(-8px);
}

:root[data-theme="light"] #career-map-svg text[letter-spacing="0.10em"] {
  letter-spacing: 0.05em !important;
  fill: #1c567e !important;
}

/* Dashboard surfaces: explicit light coverage for dark hard-coded card/panel containers. */
:root[data-theme="light"] .db-kpi {
  background: linear-gradient(155deg, rgba(244, 250, 255, 0.98), rgba(252, 255, 255, 0.98));
  border-color: rgba(25, 87, 135, 0.20);
}

:root[data-theme="light"] .db-kpi--hero {
  background: linear-gradient(145deg, rgba(231, 244, 255, 0.98) 0%, rgba(247, 252, 255, 0.98) 100%);
  border-color: rgba(21, 120, 167, 0.28);
}

:root[data-theme="light"] .db-panel {
  background: linear-gradient(155deg, rgba(248, 253, 255, 0.98), rgba(242, 249, 255, 0.98));
  border-color: rgba(25, 87, 135, 0.18);
  box-shadow: 0 6px 20px rgba(17, 51, 84, 0.08), 0 1px 0 rgba(255,255,255,0.72) inset;
}

:root[data-theme="light"] .db-family-card {
  background: rgba(249, 253, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.16);
}

:root[data-theme="light"] .db-family-card.is-expanded {
  background: linear-gradient(155deg, rgba(235, 247, 255, 0.98), rgba(247, 253, 255, 0.99));
}

:root[data-theme="light"] .dashboard-diagnostic-chart {
  background: rgba(246, 251, 255, 0.96);
  border-color: rgba(25, 87, 135, 0.14);
}

:root[data-theme="light"] .dashboard-recent-list li,
:root[data-theme="light"] .db-badges-placeholder {
  background: rgba(247, 252, 255, 0.96);
  border-color: rgba(25, 87, 135, 0.16);
}

:root[data-theme="light"] .dashboard-diagnostic-ring {
  stroke: rgba(25, 87, 135, 0.24);
}

:root[data-theme="light"] .dashboard-diagnostic-axis {
  stroke: rgba(25, 87, 135, 0.20);
}

/* Dashboard contrast tune: keep blue/cyan identity but darker on light surfaces. */
:root[data-theme="light"] .db-kpi-icon-wrap--progress,
:root[data-theme="light"] .db-kpi-icon-wrap--activity,
:root[data-theme="light"] .db-kpi-icon-wrap--time {
  color: #116792;
}

:root[data-theme="light"] .db-panel-icon,
:root[data-theme="light"] .db-panel-title,
:root[data-theme="light"] .db-panel-sub,
:root[data-theme="light"] .dashboard-refresh-chip,
:root[data-theme="light"] .db-diag-leg-item,
:root[data-theme="light"] .dashboard-progress-row .dashboard-progress-pct,
:root[data-theme="light"] .db-family-name,
:root[data-theme="light"] .db-family-meta p,
:root[data-theme="light"] .db-family-pct,
:root[data-theme="light"] .dashboard-diagnostic-values-item,
:root[data-theme="light"] .db-status-text--compact {
  color: #225779;
}

:root[data-theme="light"] .dashboard-diagnostic-polygon--learner {
  fill: rgba(17, 103, 146, 0.18);
  stroke: #116792;
}

:root[data-theme="light"] .dashboard-diagnostic-dot--learner {
  fill: #116792;
}

:root[data-theme="light"] .dashboard-distribution-segment--in-progress {
  background: rgba(17, 103, 146, 0.86);
}

:root[data-theme="light"] .dashboard-distribution-dot--in-progress {
  background: rgba(17, 103, 146, 0.95);
}

:root[data-theme="light"] .dashboard-progress-bar > span,
:root[data-theme="light"] .dashboard-progress-bar-fill,
:root[data-theme="light"] .db-family-bar-fill {
  background: linear-gradient(90deg, rgba(17, 103, 146, 0.92) 0%, rgba(34, 116, 161, 0.82) 100%);
}

:root[data-theme="light"] .dashboard-progress-bar,
:root[data-theme="light"] .db-family-bar {
  background: rgba(17, 103, 146, 0.14);
}

:root[data-theme="light"] .mia-avatar {
  background: linear-gradient(145deg, #d7eaf8, #eaf5ff);
  border-color: rgba(21, 120, 167, 0.36);
  box-shadow: 0 0 10px rgba(21, 120, 167, 0.14);
}

:root[data-theme="light"] .mia-avatar-initial {
  color: #116792;
}

:root[data-theme="light"] .mia-name,
:root[data-theme="light"] .mia-role,
:root[data-theme="light"] .mia-message,
:root[data-theme="light"] .mia-meta {
  color: #2f5d7f;
}

/* Career Mia controls/panels + mission detail surfaces in light mode. */
:root[data-theme="light"] .mia-dock,
:root[data-theme="light"] .mia-dock-panel,
:root[data-theme="light"] .mia-float-panel,
:root[data-theme="light"] .mission-window,
:root[data-theme="light"] .detail-sheet-inner,
:root[data-theme="light"] .node-detail,
:root[data-theme="light"] .node-locked-block,
:root[data-theme="light"] .node-mia-note,
:root[data-theme="light"] .mission-page,
:root[data-theme="light"] .mission-header,
:root[data-theme="light"] .mission-activities,
:root[data-theme="light"] .mission-launch-panel {
  background: rgba(248, 252, 255, 0.97);
  border-color: rgba(25, 87, 135, 0.22);
}

:root[data-theme="light"] .mia-dock-text,
:root[data-theme="light"] .mia-dock-name,
:root[data-theme="light"] .mia-dock-message,
:root[data-theme="light"] .mia-dock-meta,
:root[data-theme="light"] .mia-dock-panel-msg,
:root[data-theme="light"] .mia-dock-panel-tips li,
:root[data-theme="light"] .mia-float-name,
:root[data-theme="light"] .mia-float-role,
:root[data-theme="light"] .mia-float-message,
:root[data-theme="light"] .mia-float-home-meta,
:root[data-theme="light"] .mia-float-tips li,
:root[data-theme="light"] .mission-window-label,
:root[data-theme="light"] .node-detail-title,
:root[data-theme="light"] .node-detail-competence,
:root[data-theme="light"] .node-detail-family,
:root[data-theme="light"] .node-mia-note p,
:root[data-theme="light"] .node-locked-reason,
:root[data-theme="light"] .node-locked-how,
:root[data-theme="light"] .mission-kicker,
:root[data-theme="light"] .mission-title,
:root[data-theme="light"] .mission-subtitle,
:root[data-theme="light"] .mission-activity-title,
:root[data-theme="light"] .mission-activity-meta,
:root[data-theme="light"] .mission-launch-panel-title,
:root[data-theme="light"] .mission-launch-panel-body,
:root[data-theme="light"] .mission-launch-panel-status {
  color: #214e70;
}

:root[data-theme="light"] .mia-dock-btn,
:root[data-theme="light"] .mia-float-btn,
:root[data-theme="light"] .mission-window-close,
:root[data-theme="light"] .detail-sheet-close,
:root[data-theme="light"] .mia-dock-panel-close,
:root[data-theme="light"] .mia-float-close,
:root[data-theme="light"] .mission-back-link,
:root[data-theme="light"] .family-return-btn-map {
  background: rgba(237, 247, 255, 0.96);
  color: #1d4f74;
  border-color: rgba(25, 87, 135, 0.26);
}

:root[data-theme="light"] .mia-dock-btn:hover,
:root[data-theme="light"] .mia-float-btn:hover,
:root[data-theme="light"] .mission-window-close:hover,
:root[data-theme="light"] .detail-sheet-close:hover,
:root[data-theme="light"] .mia-dock-panel-close:hover,
:root[data-theme="light"] .mia-float-close:hover,
:root[data-theme="light"] .mission-back-link:hover,
:root[data-theme="light"] .family-return-btn-map:hover {
  background: rgba(226, 240, 252, 0.98);
  border-color: rgba(21, 120, 167, 0.40);
}

/* Mia support/messages + mission intro video: explicit light-mode surfaces for dark hard-coded blocks. */
:root[data-theme="light"] .mia-feedback-panel textarea,
:root[data-theme="light"] .mia-support-reply-box textarea {
  background: rgba(255, 255, 255, 0.98);
  color: #163a58;
  border-color: rgba(25, 87, 135, 0.28);
}

:root[data-theme="light"] .mia-support-ticket-box,
:root[data-theme="light"] .mia-support-msg {
  background: rgba(244, 250, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.24);
}

:root[data-theme="light"] .mia-support-indicator,
:root[data-theme="light"] .mia-support-reply-needed {
  color: #955d00;
}

:root[data-theme="light"] .mia-support-admin-reply,
:root[data-theme="light"] .mia-support-msg-body {
  color: #163a58;
}

:root[data-theme="light"] .mia-support-msg-head,
:root[data-theme="light"] .mia-support-status {
  color: #496a87;
}

:root[data-theme="light"] .mission-intro-video,
:root[data-theme="light"] .mission-intro-fallback {
  background: rgba(248, 252, 255, 0.97);
  border-color: rgba(25, 87, 135, 0.22);
}

:root[data-theme="light"] .mission-intro-video-player,
:root[data-theme="light"] .mission-intro-video-mia-fallback {
  background: rgba(237, 247, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.24);
  box-shadow: 0 2px 12px rgba(14, 52, 82, 0.08);
}

:root[data-theme="light"] .mission-intro-video-mia-title {
  color: #1f4f73;
}

/* Family hover/focus labels and selected-family title in map light mode. */
:root[data-theme="light"] .fam-sel-floating-label,
:root[data-theme="light"] .cluster-focus-ctx {
  color: #1a4f74;
  background: rgba(235, 246, 255, 0.95);
  border-color: rgba(21, 120, 167, 0.34);
}

/* Dashboard: progression globale value + KPI explanation panel readability. */
:root[data-theme="light"] .db-kpi--hero .db-kpi-value--hero,
:root[data-theme="light"] #dashboard-progress,
:root[data-theme="light"] .db-kpi[data-kpi-key="progress"] .db-kpi-value {
  color: #0f5f88;
}

:root[data-theme="light"] .db-kpi-explanation {
  background: rgba(245, 251, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.22);
}

:root[data-theme="light"] .db-kpi-explanation-text {
  color: #285b7f;
}

/* Learner debug surfaces (visual only; no trigger behavior changes). */
:root[data-theme="light"] .refresh-debug-panel,
:root[data-theme="light"] .refresh-debug-panel.refresh-debug-panel--inline {
  background: rgba(248, 252, 255, 0.99);
  border-color: rgba(25, 87, 135, 0.28);
  color: #204c6d;
}

:root[data-theme="light"] .refresh-debug-title,
:root[data-theme="light"] .refresh-debug-label,
:root[data-theme="light"] .refresh-debug-value,
:root[data-theme="light"] .refresh-debug-meta {
  color: #29597b;
}

:root[data-theme="light"] .refresh-debug-row {
  border-color: rgba(25, 87, 135, 0.14);
}

:root[data-theme="light"] .refresh-debug-response {
  background: rgba(236, 246, 255, 0.9);
  border-color: rgba(25, 87, 135, 0.16);
  color: #1f4f72;
}

:root[data-theme="light"] .refresh-debug-close,
:root[data-theme="light"] .refresh-debug-copy {
  background: rgba(232, 245, 255, 0.96);
  border-color: rgba(25, 87, 135, 0.28);
  color: #1f4d6f;
}

/* Family focus header shown after selecting a family on career map. */
:root[data-theme="light"] #family-floating-banner {
  background: rgba(244, 251, 255, 0.98) !important;
  border-color: rgba(25, 87, 135, 0.30) !important;
  box-shadow: 0 4px 20px rgba(17, 51, 84, 0.12), 0 0 14px rgba(21, 120, 167, 0.10);
}

:root[data-theme="light"] .family-banner-name {
  color: #1f4f72 !important;
}

/* Career center Test Beta node: stable class hooks generated by learner-career.js. */
#career-map-svg .career-core-node--state-pending {
  --career-core-glow-rgb: 232, 82, 106;
  --career-core-glow-bright-rgb: 255, 109, 130;
  --career-core-shell-rgb: 58, 17, 27;
}

#career-map-svg .career-core-node--state-completed {
  --career-core-glow-rgb: 94, 224, 160;
  --career-core-glow-bright-rgb: 126, 244, 184;
  --career-core-shell-rgb: 14, 47, 35;
}

#career-map-svg .career-core-node--ring {
  display: none;
}

#career-map-svg .career-core-node--body {
  display: none;
}

#career-map-svg .career-core-node--top {
  display: none;
}

#career-map-svg .career-core-node--aura {
  display: none;
}

#career-map-svg .career-core-node--halo {
  display: none;
}

#career-map-svg .career-core-node--backglow {
  fill: rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.3);
}

:root[data-theme="light"] #career-map-svg .career-core-node-label {
  fill: #1f5d86 !important;
}

:root[data-theme="light"] #career-map-svg .career-core-node-label--sub {
  fill: #3d6e93 !important;
}

#career-map-svg .career-core-node-visual-shell {
  filter: drop-shadow(0 0 22px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.2))
    drop-shadow(0 0 44px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.12));
}

:root[data-theme="light"] #career-map-svg .career-core-node-visual-shell {
  filter: drop-shadow(0 0 22px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.24))
    drop-shadow(0 0 44px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.14));
}

#career-map-svg .career-core-node--pulse {
  transform-origin: center center;
  transform-box: fill-box;
}

#career-map-svg .career-core-node--backglow.career-core-node--pulse {
  animation: careerCoreBackGlowLight 3.2s ease-in-out infinite;
}

#career-map-svg .career-core-node-visual-shell.career-core-node--pulse {
  animation: careerCoreProjectedBloom 3.2s ease-in-out infinite;
}

#career-map-svg .career-core-node-visual {
  animation: careerCoreImageLight 3.2s ease-in-out infinite;
}

@keyframes careerCoreBackGlowLight {
  0%, 100% {
    opacity: 0.36;
    filter: blur(10px) brightness(0.94);
  }
  50% {
    opacity: 0.86;
    filter: blur(20px) brightness(1.16);
  }
}

@keyframes careerCoreProjectedBloom {
  0%, 100% {
    filter: drop-shadow(0 0 24px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.2))
      drop-shadow(0 0 48px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.12));
  }
  50% {
    filter: drop-shadow(0 0 36px rgba(var(--career-core-glow-bright-rgb, 79, 216, 255), 0.38))
      drop-shadow(0 0 72px rgba(var(--career-core-glow-bright-rgb, 79, 216, 255), 0.2));
  }
}

@keyframes careerCoreImageLight {
  0%, 100% {
    filter: brightness(0.97) saturate(1);
  }
  50% {
    filter: brightness(1.16) saturate(1.1);
  }
}

:root[data-theme="light"] .family-return-btn-map {
  background: rgba(242, 250, 255, 0.98) !important;
  border-color: rgba(25, 87, 135, 0.30) !important;
  color: #1e4f72 !important;
}

:root[data-theme="light"] .family-return-btn-map:hover,
:root[data-theme="light"] .family-return-btn-map:focus-visible {
  background: rgba(231, 244, 255, 0.99) !important;
  border-color: rgba(21, 120, 167, 0.42) !important;
}

.account-menu-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.account-menu-section + .account-menu-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(93, 160, 220, 0.18);
}

.account-menu-label {
  margin: 0 0 8px;
  font-size: var(--font-size-menu-label);
  color: var(--text-muted);
}

.account-menu-subtitle {
  margin: -4px 0 8px;
  font-size: var(--font-size-menu-hint);
  color: var(--text-dim);
}

.account-menu-switches {
  display: grid;
  gap: 8px;
}

.account-menu-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(93, 160, 220, 0.22);
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 10px;
  cursor: pointer;
}

.account-menu-switch-row:hover {
  border-color: rgba(79, 216, 255, 0.42);
}

.account-menu-switch-text {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-menu-switch-label {
  color: var(--text-main);
  font-size: var(--font-size-menu-label);
  font-weight: 600;
  line-height: 1.25;
}

.account-menu-switch-hint {
  color: var(--text-dim);
  font-size: var(--font-size-menu-hint);
  line-height: 1.2;
}

.account-menu-switch-control {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.account-menu-switch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.account-menu-switch-ui {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(93, 160, 220, 0.34);
  background: rgba(255, 255, 255, 0.08);
  transition: background .15s ease, border-color .15s ease;
}

.account-menu-switch-ui::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d9f4ff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform .15s ease;
}

.account-menu-switch-input:checked + .account-menu-switch-ui {
  background: rgba(79, 216, 255, 0.28);
  border-color: rgba(79, 216, 255, 0.64);
}

.account-menu-switch-input:checked + .account-menu-switch-ui::before {
  transform: translateX(18px);
}

.account-menu-switch-input:focus-visible + .account-menu-switch-ui {
  outline: 2px solid rgba(79, 216, 255, 0.72);
  outline-offset: 2px;
}

:root[data-theme="light"] .account-menu-switch-row {
  background: rgba(241, 249, 255, 0.86);
  border-color: rgba(25, 87, 135, 0.18);
}

:root[data-theme="light"] .account-menu-switch-input:checked + .account-menu-switch-ui::before {
  background: #ffffff;
}

.account-menu-journeys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-menu-journey-btn {
  height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(93, 160, 220, 0.24);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.account-menu-journey-btn[aria-pressed="true"] {
  border-color: rgba(79, 216, 255, 0.55);
  background: rgba(79, 216, 255, 0.14);
  color: #d9f4ff;
}

.account-menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(93, 160, 220, 0.24);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  text-decoration: none;
  font-size: var(--font-size-menu-link);
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}

.account-menu-link:hover {
  border-color: rgba(79, 216, 255, 0.46);
  background: rgba(79, 216, 255, 0.10);
}

.account-menu-status {
  margin: 8px 0 0;
  min-height: 16px;
  font-size: 11px;
  color: var(--text-muted);
}

.account-menu-status.is-error {
  color: #f5b3c0;
}

.topbar-learner-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ── Content area ── */
.app-content {
  grid-area: content;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ============================================================
   CAREER PAGE
   ============================================================ */

.career-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

/* ── Map area ── */
.map-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* .map-toolbar removed — meta/legend moved to topbar */
.map-toolbar { display: none; }

/* ── Topbar map meta inline group ── */
.topbar-map-meta-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.topbar-map-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-family: var(--font-display);
  white-space: nowrap;
}

.career-refresh-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #ffd890;
  white-space: nowrap;
}

.career-refresh-indicator.is-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.career-refresh-indicator::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1.6px solid rgba(245, 185, 91, 0.24);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: learnerSpin 0.9s linear infinite;
}

/* ── Career topbar status filter ── */
.career-status-filter-select-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 220px;
  width: 220px;
  max-width: 220px;
  position: relative;
  flex-shrink: 0;
}

.career-status-filter-select-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(50%);
  overflow: hidden;
}

.career-status-filter-dropdown-btn {
  width: 100%;
  height: 30px;
  padding: 0 32px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(79,216,255,0.36);
  background:
    linear-gradient(135deg, rgba(61,184,245,0.14) 0%, rgba(79,216,255,0.08) 100%);
  color: #d9f4ff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.career-status-filter-dropdown-btn:hover {
  border-color: rgba(79,216,255,0.62);
  box-shadow: 0 0 12px rgba(79,216,255,0.16);
}

.career-status-filter-select-wrap.is-open .career-status-filter-dropdown-btn {
  border-color: rgba(79,216,255,0.74);
  box-shadow: inset 0 0 0 1px rgba(79,216,255,0.24), 0 0 14px rgba(79,216,255,0.20);
}

.career-status-filter-select-wrap::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(217, 244, 255, 0.9);
  border-bottom: 2px solid rgba(217, 244, 255, 0.9);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.career-status-filter-dropdown-btn:focus-visible {
  outline: 2px solid rgba(79,216,255,0.62);
  outline-offset: 2px;
}

.career-status-filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 14px;
  border: 1px solid rgba(79,216,255,0.34);
  background: linear-gradient(155deg, rgba(9,24,42,0.98), rgba(6,17,31,0.98));
  box-shadow: var(--sh-float);
  z-index: 52;
}

.career-status-filter-dropdown-option {
  width: 100%;
  border-radius: 9px;
  padding: 8px 10px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
}

.career-status-filter-dropdown-option:hover,
.career-status-filter-dropdown-option.is-focused {
  color: #d9f4ff;
  background: rgba(79,216,255,0.12);
}

.career-status-filter-dropdown-option[aria-selected="true"] {
  color: #d9f4ff;
  background: linear-gradient(135deg, rgba(61,184,245,0.20) 0%, rgba(79,216,255,0.10) 100%);
  box-shadow: inset 0 0 0 1px rgba(79,216,255,0.20);
}

.career-status-filter-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.career-status-filter {
  --filter-dot: var(--accent-2);
  --filter-border: rgba(255,255,255,0.14);
  --filter-text: var(--text-muted);
  --filter-bg: rgba(255,255,255,0.03);
  appearance: none;
  border: 1px solid var(--filter-border);
  border-radius: 999px;
  background: var(--filter-bg);
  color: var(--filter-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  height: 26px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, transform .14s ease;
  white-space: nowrap;
  font-family: var(--font-display);
}

.career-status-filter:hover {
  border-color: rgba(255,255,255,0.26);
  color: var(--text-main);
}

.career-status-filter:active {
  transform: translateY(1px);
}

.career-status-filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--filter-dot);
  box-shadow: 0 0 6px var(--filter-dot);
  animation: pulseDot 2.8s ease-in-out infinite;
  opacity: 0.72;
  transition: opacity .18s ease, box-shadow .18s ease, transform .18s ease;
  flex-shrink: 0;
}

.career-status-filter[data-state-filter="locked"] { --filter-dot: #7d8ea0; }
.career-status-filter[data-state-filter="unlocked"] { --filter-dot: #4fd8ff; }
.career-status-filter[data-state-filter="in_progress"] { --filter-dot: #f5b95b; }
.career-status-filter[data-state-filter="completed"] { --filter-dot: #5ee0a0; }

.career-status-filter.is-active,
.career-status-filter[aria-pressed="true"] {
  color: #d9f4ff;
  border-color: rgba(79,216,255,0.52);
  background: linear-gradient(135deg, rgba(61,184,245,0.20) 0%, rgba(79,216,255,0.10) 100%);
  box-shadow: inset 0 0 0 1px rgba(79,216,255,0.14), 0 0 14px rgba(79,216,255,0.20);
}

.career-status-filter.is-active .career-status-filter-dot,
.career-status-filter[aria-pressed="true"] .career-status-filter-dot {
  opacity: 1;
  box-shadow: 0 0 10px var(--filter-dot);
  transform: scale(1.08);
}

.career-status-filter:not(.is-active):not([aria-pressed="true"]) {
  opacity: 0.84;
}

@media (max-width: 1320px) and (min-width: 901px) {
  .career-status-filter { padding: 4px 8px; font-size: 9px; letter-spacing: 0.04em; }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .career-status-filter-bar { gap: 6px; }
}

/* Mobile filter strip — hidden on desktop */
.career-filter-strip {
  display: none;
}

@media (min-width: 901px) {
  .career-status-filter-bar {
    display: none;
  }
}

@media (max-width: 900px) {
  /* Hide ExpertLab brand + divider in topbar at narrow widths to avoid overflow */
  .topbar-section { display: none; }
  .topbar-divider  { display: none; }

  #learner-page-status-badge-career {
    min-height: 30px;
    padding: 6px 12px;
    pointer-events: auto;
    touch-action: manipulation;
    position: relative;
    z-index: 12;
    flex-shrink: 0;
  }

  /* Clean topbar — filters move to strip below, no wrapping */
  .topbar-right {
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .career-status-filter-select-wrap { display: none; }
  /* Hide filter bar and refresh button from topbar on mobile */
  .career-status-filter-bar { display: none; }
  #career-progress-refresh-btn { display: none; }
  .topbar-map-meta-group { display: none; }

  /* Filter strip below topbar */
  .career-filter-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    height: 38px;
    background: rgba(6, 17, 31, 0.92);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
    position: sticky;
    top: var(--topbar-h);
    z-index: 44;
    flex-shrink: 0;
  }

  .career-filter-strip .career-status-filter {
    flex: 1;
    max-width: 80px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .career-filter-strip .career-status-filter-label {
    display: inline;
  }
}

.career-node-filter-dimmed {
  filter: grayscale(0.55) saturate(0.42) brightness(0.60);
}

.map-meta-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cluster-focus-ctx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(61,184,245,0.10);
  border: 1px solid rgba(61,184,245,0.28);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #7dd4f5;
  white-space: nowrap;
  transition: opacity 200ms ease;
}
.cluster-focus-ctx[hidden] {
  display: none;
}

.career-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.legend-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-dot--locked   { background: var(--locked); }
.legend-dot--unlocked { background: var(--accent); }
.legend-dot--progress { background: var(--warn); }
.legend-dot--done     { background: var(--ok); box-shadow: 0 0 5px rgba(94,224,160,0.5); }

.map-canvas-wrap {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#career-map-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Family-end badges around the map perimeter (size/readability only, no behavior change). */
#career-map-svg rect[fill="#071828"][width="58"][height="36"] {
  width: 72px;
  height: 42px;
  transform: translateX(-8px);
}

#career-map-svg text[letter-spacing="0.10em"] {
  font-size: 8.6px;
  letter-spacing: 0.06em !important;
}

/* Map overlay controls */
.map-controls {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 10;
}

.map-ctrl-btn {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-mid);
  background: rgba(6, 15, 28, 0.92);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
  backdrop-filter: blur(10px);
  font-family: inherit;
  user-select: none;
}

.map-ctrl-btn:hover { background: rgba(79,216,255,0.15); color: var(--text-main); border-color: var(--border-active); }
.map-ctrl-btn--reset { font-size: 0.82rem; }

/* ── Cluster marker ── */
[data-cluster-marker] {
  transition: opacity 200ms ease;
}

[data-cluster-marker]:hover circle[filter] {
  filter: url(#fcluster) brightness(1.2);
}

[data-cluster-member] {
  transition: opacity 200ms ease-out;
}

.career-node-refresh-ring {
  fill: none;
  stroke: rgba(245, 185, 91, 0.88);
  stroke-width: 2.2;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  transform-origin: center;
  animation: learnerSpin 1s linear infinite;
  pointer-events: none;
}

/* ── Career right panel — fixed height, internal scroll only ── */
.career-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* ── Mia compact block — fixed, never scrolls ── */
.mia-block {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mia-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mia-avatar {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1b4870, #0c2540);
  border: 1.5px solid rgba(79,216,255,0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(79,216,255,0.12);
}

.mia-avatar-status {
  position: relative;
  isolation: isolate;
}

.mia-avatar-status::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  z-index: 0;
  transform: scale(1);
  transition: opacity 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.mia-avatar-status.is-syncing::before {
  opacity: 1;
  background: rgba(244, 185, 91, 0.30);
  box-shadow: 0 0 18px rgba(244, 185, 91, 0.55);
  animation: miaSyncPulse 1.3s ease-in-out infinite;
}

.mia-avatar-status.is-updated::before {
  opacity: 1;
  background: rgba(94, 224, 160, 0.26);
  box-shadow: 0 0 16px rgba(94, 224, 160, 0.44);
}

.mia-avatar-status.has-error::before {
  opacity: 1;
  background: rgba(232, 82, 106, 0.28);
  box-shadow: 0 0 16px rgba(232, 82, 106, 0.42);
}

.mia-avatar-status > * {
  position: relative;
  z-index: 1;
}

.mia-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
}

.mia-avatar-initial {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.mia-label { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.mia-name  { font-size: 12px; font-weight: 700; color: var(--text-main); }
.mia-role  { font-size: 10px; color: var(--text-dim); letter-spacing: 0.03em; }

.mia-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 7px var(--ok);
  animation: pulseDot 3.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

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

@keyframes miaSyncPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 1; }
}

.mia-message {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.50;
  margin: 0;
}

.mia-meta {
  font-size: 10px;
  color: rgba(79,216,255,0.50);
  font-style: italic;
  margin: 0;
}

/* ── Node detail — scrollable section filling remaining panel height ── */
.node-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}

.node-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
  gap: 12px;
}

.node-detail-empty-icon {
  width: 44px; height: 44px;
  color: var(--text-dim);
  opacity: 0.32;
}
.node-detail-empty-icon svg { width: 100%; height: 100%; }

.node-detail-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Section label */
.panel-section-label {
  padding: 8px 14px 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
}

/* Status bar */
.node-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.node-status-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-family: var(--font-display);
}

.node-status-badge[data-state="completed"]  { background: rgba(94,224,160,0.10); border-color: rgba(94,224,160,0.30); color: #7ef4b8; }
.node-status-badge[data-state="in_progress"]{ background: rgba(244,185,91,0.10); border-color: rgba(244,185,91,0.30); color: #ffd080; }
.node-status-badge[data-state="unlocked"]   { background: rgba(79,216,255,0.09); border-color: rgba(79,216,255,0.28); color: #7ee6ff; }
.node-status-badge[data-state="locked"]     { background: rgba(75,85,99,0.14);   border-color: rgba(75,85,99,0.28);   color: var(--locked); }
.node-status-badge[data-state="preview"]    { background: rgba(255,202,79,0.10); border-color: rgba(255,202,79,0.32); color: #ffe8a5; }

.node-level-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
}

/* Main info block */
.node-info-block {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.node-detail-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  font-family: var(--font-display);
}

.node-detail-competence {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.node-detail-family {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Progress bar */
.node-progress-block {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.node-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.node-progress-label-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.node-progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.node-progress-bar-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.node-progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.45s ease;
}

/* Mia contextual note */
.node-mia-note {
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.node-mia-note p {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  font-style: italic;
}

/* Detail data list */
.node-detail-dl {
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: baseline;
}

.node-detail-dl dt {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.node-detail-dl dd {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
}

/* Locked explanation */
.node-locked-block {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.node-locked-block[hidden] { display: none !important; }

.node-locked-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.node-locked-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.node-locked-header--how {
  color: rgba(79, 216, 255, 0.70);
}

.node-locked-header--how .node-locked-icon {
  color: rgba(79, 216, 255, 0.70);
}

.node-locked-icon {
  width: 12px; height: 12px;
  flex-shrink: 0;
  color: var(--text-dim);
}

.node-locked-reason {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.node-locked-how {
  margin: 0;
  font-size: 11px;
  color: var(--text-acc);
  line-height: 1.5;
  font-style: italic;
}

/* Course CTA — pinned visually at bottom via natural flow */
.node-course-wrap {
  padding: 10px 14px 12px;
}

.course-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  color: #021929;
  border-radius: var(--r-md);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(130deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 2px 14px rgba(79,216,255,0.24);
  width: 100%;
  transition: opacity .17s, transform .12s;
  letter-spacing: 0.01em;
}

.course-link:hover { opacity: 0.88; transform: translateY(-1px); }

.course-unavailable {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  padding: 9px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-sm);
}

.course-locked-label {
  margin: 0;
  font-size: 11px;
  color: var(--locked);
  text-align: center;
  padding: 9px 12px;
  border: 1px solid rgba(75,85,99,0.26);
  border-radius: var(--r-sm);
  background: rgba(75,85,99,0.07);
}

/* ============================================================
   HOME PAGE
   ============================================================ */

.home-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

/* ── Home main ── */
.home-main {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--border-soft);
}

/* ── Welcome strip ── */
.welcome-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.welcome-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.welcome-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-main);
}

.welcome-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.learner-page-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}

.learner-page-status-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 7px var(--accent-2);
  animation: pulseDot 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

.learner-page-status-badge--loading::before {
  animation: pulseDot 1.4s ease-in-out infinite;
}

.learner-page-status-badge--ok::before {
  animation: pulseDot 2.8s ease-in-out infinite;
}

.learner-page-status-badge--pending::before {
  background: #ffd45e;
  box-shadow: 0 0 8px rgba(255, 212, 94, 0.9);
  animation: pulseDot 1.9s ease-in-out infinite;
}

.learner-page-status-badge--error {
  border-color: rgba(232,82,106,0.32);
  color: #ffb2bf;
}

.learner-page-status-badge--error::before {
  background: var(--err);
  box-shadow: 0 0 8px var(--err);
  animation: pulseDot 1.1s ease-in-out infinite;
}

/* Status chip */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  width: fit-content;
}

.status-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-2);
  animation: pulseDot 2.8s ease-in-out infinite;
  flex-shrink: 0;
}

.status-chip.error .status-chip-dot { background: var(--err); box-shadow: 0 0 6px var(--err); }
.status-chip.error { border-color: rgba(232,82,106,0.28); color: #ffa0ae; }

.status-chip.is-clickable {
  cursor: pointer;
}

/* CTA row */
.cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  border-radius: var(--r-md);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  color: #021929;
  background: linear-gradient(130deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 2px 16px rgba(79,216,255,0.26);
  transition: opacity .17s, transform .12s, box-shadow .17s;
  letter-spacing: 0.01em;
}

.btn-primary:hover { opacity: 0.90; transform: translateY(-1px); box-shadow: 0 4px 24px rgba(79,216,255,0.36); }
.btn-primary:active { transform: translateY(0); }
.btn-primary.disabled { pointer-events: none; opacity: 0.30; box-shadow: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  border-radius: var(--r-md);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-main);
  border: 1px solid var(--border-mid);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}

.btn-secondary:hover { background: rgba(255,255,255,0.07); border-color: var(--border-active); }

.btn-secondary--compact {
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 999px;
}

.journey-choice-panel {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100% - 2rem));
  background: rgba(7, 20, 36, 0.94);
  border: 1px solid rgba(93, 160, 220, 0.32);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.52);
  z-index: 11;
}

.journey-choice-title {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  color: #f4f7fb;
}

.journey-choice-intro {
  margin: 0 0 0.9rem;
  color: #b8cadc;
}

.journey-choice-options {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.journey-choice-card {
  display: grid;
  gap: 0.32rem;
  border: 1px solid rgba(93, 160, 220, 0.24);
  background: rgba(14, 35, 58, 0.68);
  border-radius: 12px;
  padding: 0.8rem;
  cursor: pointer;
}

.journey-choice-card input[type="radio"] {
  margin: 0 0 0.2rem;
}

.journey-choice-card-title {
  font-weight: 700;
  color: #e8f0fb;
}

.journey-choice-card-desc {
  color: #b8cadc;
  font-size: 0.92rem;
}

.journey-choice-confirm {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.85rem 0;
  color: #d8e5f4;
}

.journey-choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.journey-choice-status {
  margin: 0.72rem 0 0;
  min-height: 1.2em;
  color: #d8e5f4;
}

.journey-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.6rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(93, 160, 220, 0.22);
  border-radius: 999px;
  background: rgba(11, 28, 48, 0.72);
}

.journey-switcher-label {
  font-size: 0.72rem;
  color: #b9cbdd;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.journey-switcher-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #d9e8f7;
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}

.journey-switcher-btn[aria-pressed="true"] {
  background: rgba(79, 216, 255, 0.16);
  border-color: rgba(79, 216, 255, 0.5);
  color: #f4fbff;
}

@media (max-width: 760px) {
  .journey-choice-panel {
    top: 50%;
    padding: 0.85rem;
  }

  .journey-choice-options {
    grid-template-columns: 1fr;
  }
}

.btn-icon { width: 13px; height: 13px; flex-shrink: 0; }

.learner-inline-spinner {
  width: 10px;
  height: 10px;
  border: 1.6px solid rgba(245, 185, 91, 0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
  animation: learnerSpin 0.9s linear infinite;
  vertical-align: middle;
}

.btn-secondary.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.9;
}

.btn-secondary.is-loading::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1.6px solid rgba(255, 255, 255, 0.28);
  border-top-color: var(--text-main);
  border-radius: 50%;
  animation: learnerSpin 0.9s linear infinite;
  display: inline-block;
  margin-right: 6px;
}

/* KPI strip */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.kpi-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  transition: border-color .16s;
}
.kpi-cell:hover { border-color: var(--border-mid); }

.kpi-cell--action { cursor: pointer; }
.kpi-cell--action:hover { border-color: rgba(79,216,255,0.42); box-shadow: var(--sh-glow); }
.kpi-cell--action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.kpi-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
}

.kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.home-family-progress {
  margin-top: 14px;
  padding: 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

.home-family-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.home-family-progress-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.home-family-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-family-progress-empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.home-family-card {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(10, 26, 44, 0.72);
}

.home-family-card.is-recommended {
  border-color: rgba(79, 216, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(79, 216, 255, 0.18) inset;
}

.home-family-card-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

.home-family-card-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.home-family-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.home-family-letter {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-acc);
}

.home-family-title-meta {
  min-width: 0;
}

.home-family-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.home-family-remaining {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.home-family-pct {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: var(--text-main);
}

.home-family-card-body {
  padding: 0 10px 10px;
}

.home-family-reco {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-acc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-family-stats,
.home-family-next-title {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.home-family-badges-placeholder {
  margin: 6px 0 8px;
  border: 1px dashed var(--border-mid);
  border-radius: 8px;
  padding: 8px;
}

.home-family-badges-placeholder p {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.home-family-badges-placeholder p:last-child {
  margin-bottom: 0;
}

.home-family-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border-mid);
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text-main);
  text-decoration: none;
}

.home-family-cta.is-disabled {
  opacity: 0.65;
  cursor: default;
}

:root[data-theme="light"] .home-family-card {
  background: linear-gradient(155deg, rgba(248, 253, 255, 0.98), rgba(242, 249, 255, 0.98));
  border-color: rgba(25, 87, 135, 0.18);
  box-shadow: 0 5px 16px rgba(17, 51, 84, 0.07), 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

:root[data-theme="light"] .home-family-card.is-recommended {
  border-color: rgba(21, 120, 167, 0.34);
  box-shadow:
    0 0 0 1px rgba(79, 216, 255, 0.18) inset,
    0 6px 18px rgba(17, 51, 84, 0.08);
}

:root[data-theme="light"] .home-family-badges-placeholder {
  background: rgba(247, 252, 255, 0.92);
  border-color: rgba(25, 87, 135, 0.20);
}

:root[data-theme="light"] .home-family-cta {
  background: rgba(246, 252, 255, 0.98);
  border-color: rgba(25, 87, 135, 0.24);
}

@media (max-width: 900px) {
  .home-family-progress-grid {
    grid-template-columns: 1fr;
  }
}

/* Module grid */
.module-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 10px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.module-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  position: relative;
  transition: border-color .16s, box-shadow .16s;
  text-decoration: none;
  color: inherit;
}

.module-card--active {
  border-color: rgba(79,216,255,0.22);
  background: rgba(8,22,44,0.72);
  cursor: pointer;
}
.module-card--active:hover { border-color: rgba(79,216,255,0.48); box-shadow: var(--sh-glow); }
.module-card--disabled { opacity: 0.38; cursor: default; pointer-events: none; }

.module-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: rgba(79,216,255,0.08);
  border: 1px solid rgba(79,216,255,0.18);
  color: var(--accent);
}
.module-icon svg { width: 16px; height: 16px; }
.module-card--disabled .module-icon { color: var(--text-dim); background: rgba(255,255,255,0.03); border-color: var(--border-soft); }

.module-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.module-title { font-size: 12px; font-weight: 700; color: var(--text-main); }
.module-desc  { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.module-arrow {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(79,216,255,0.10);
  border: 1px solid rgba(79,216,255,0.22);
  color: var(--accent);
  align-self: center;
  transition: background .15s, transform .12s;
}
.module-card--active:hover .module-arrow { background: rgba(79,216,255,0.22); transform: translateX(2px); }
.module-arrow svg { width: 10px; height: 10px; }

.module-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ── Home side panel ── */
.home-side {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}

.mia-side-panel {
  display: none;
  border-left: 1px solid var(--border-soft);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}

.mia-media-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: radial-gradient(circle at 35% 20%, rgba(61, 184, 245, 0.22), rgba(8, 20, 40, 0.92));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mia-avatar--panel {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.mia-avatar-img--panel {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mia-feedback {
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}

.mia-feedback-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.mia-feedback-help {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.mia-feedback-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.mia-feedback-panel [data-support-ticket-box][hidden],
.mia-feedback-panel [data-support-reply-box][hidden],
.mia-feedback-panel [data-support-new-ticket][hidden] {
  display: none !important;
}

.mia-feedback-panel textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--border-mid);
  background: rgba(7, 19, 36, 0.88);
  color: var(--text-main);
  padding: 10px;
  font: inherit;
}

.mia-support-ticket-box {
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  background: rgba(8, 20, 40, 0.62);
  padding: 10px;
}

.mia-support-indicator {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: #ffd890;
}

.mia-support-indicator-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mia-support-archives-link {
  border: none;
  background: transparent;
  color: var(--text-acc);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.mia-support-archives-link:hover {
  color: var(--accent-2);
}

.mia-support-admin-reply {
  margin: 0;
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.45;
}

.mia-support-status {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text-dim);
}

.mia-support-history {
  display: grid;
  gap: 6px;
}

.mia-support-msg {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(7, 19, 36, 0.72);
  padding: 8px;
}

.mia-support-msg-head {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}

.mia-support-msg-body {
  margin: 0;
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.45;
}

.mia-support-reply-box {
  display: grid;
  gap: 6px;
}

.mia-support-reply-needed {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #ffd890;
}

.mia-support-reply-box textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--border-mid);
  background: rgba(7, 19, 36, 0.88);
  color: var(--text-main);
  padding: 10px;
  font: inherit;
}

.mia-feedback-actions {
  display: flex;
  gap: 8px;
}

.mia-feedback-actions .btn-secondary,
.mia-feedback-actions .btn-primary {
  flex: 1;
  justify-content: center;
}

.mia-feedback-status {
  margin: 8px 0 0;
  min-height: 18px;
  font-size: 11px;
  color: var(--text-muted);
}

.mia-feedback-status.is-error {
  color: #f5b3c0;
}

.mia-feedback--float {
  margin-top: 10px;
}

.mia-support-archives-modal[hidden] {
  display: none !important;
}

.mia-support-archives-modal {
  position: fixed;
  inset: 0;
  z-index: 360;
  background: rgba(4, 12, 24, 0.62);
  display: grid;
  place-items: center;
  padding: 16px;
}

.mia-support-archives-card {
  width: min(460px, calc(100vw - 32px));
  max-height: min(74vh, 620px);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--border-mid);
  background: rgba(8, 20, 40, 0.98);
  box-shadow: var(--sh-float);
  padding: 12px;
}

.mia-support-archives-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.mia-support-archives-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.mia-support-archives-close {
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  background: rgba(8, 22, 40, 0.86);
  color: var(--text-main);
  font: inherit;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}

.mia-support-archives-content {
  display: grid;
  gap: 8px;
}

.mia-support-archive-ticket {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(7, 19, 36, 0.72);
  padding: 8px;
}

.mia-support-archives-empty {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Mia panel — full home side version */
.mia-panel-full {
  padding: 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.mia-panel-full .mia-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mia-panel-full .mia-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Info block */
.side-info {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.side-info-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  color: var(--text-dim);
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.side-info-icon svg { width: 16px; height: 16px; }

.side-info-text {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ============================================================
   LEARNER DASHBOARD
   ============================================================ */

.dashboard-page {
  padding: 14px 16px 108px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(76, 141, 255, 0.09), transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 80%, rgba(94, 224, 160, 0.04), transparent 55%);
}

.dashboard-layout,
.mission-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

/* ── Header ── */
.db-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 0 2px;
}

.db-header-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.db-header-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.db-eyebrow {
  margin: 0;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  font-weight: 700;
}

.db-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.db-status-text {
  margin: 0;
  color: var(--text-dim);
  font-size: 10px;
}

.db-status-text--compact {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.86;
  white-space: nowrap;
}

/* backward-compat */
.dashboard-refresh-chip {
  margin: 0;
  width: fit-content;
  font-size: 9px;
  color: var(--text-dim);
  border: 1px solid var(--border-soft);
  background: rgba(7, 18, 33, 0.72);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── KPI Ribbon ── */
/*
  7 KPIs. First card (.db-kpi--hero) spans 2 rows and is visually larger.
  At full width: 1 hero + 6 = [hero col][3-col grid for 6] → 4-col total.
  At medium: hero spans 2 rows in a 3-col grid (hero=1col, 6 fill 2×3).
  At small: 2-col, hero normal.
*/
.db-kpi-ribbon {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 7px;
}

.db-kpi--hero {
  grid-row: 1 / 3;
  background:
    linear-gradient(145deg, rgba(12, 30, 56, 0.96) 0%, rgba(8, 20, 40, 0.94) 100%);
  border-color: rgba(79, 216, 255, 0.26);
}

.db-kpi--hero::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(79, 216, 255, 0.06), transparent 70%);
  pointer-events: none;
}

.db-kpi--hero .db-kpi-icon-wrap {
  width: 52px;
  height: 52px;
}

.db-kpi--hero .db-kpi-icon-wrap svg {
  width: 31px;
  height: 31px;
}

.db-kpi--hero .db-kpi-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.db-kpi-value--hero {
  font-size: 36px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #4fd8ff 0%, #7ef4b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.db-kpi {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px 10px;
  background: linear-gradient(155deg, rgba(9, 25, 46, 0.94), rgba(7, 18, 34, 0.90));
  border: 1px solid rgba(93, 160, 220, 0.16);
  border-radius: 10px;
  transition: border-color .18s, box-shadow .18s;
  overflow: hidden;
  cursor: pointer;
}

.db-kpi::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(79, 216, 255, 0.20) 50%, transparent 95%);
  pointer-events: none;
}

.db-kpi:hover {
  border-color: rgba(79, 216, 255, 0.32);
  box-shadow: 0 0 18px rgba(79, 216, 255, 0.06);
}

.db-kpi:focus-visible {
  outline: 2px solid rgba(79, 216, 255, 0.82);
  outline-offset: 1px;
}

.db-kpi.is-explained {
  border-color: rgba(79, 216, 255, 0.46);
  box-shadow: 0 0 20px rgba(79, 216, 255, 0.12);
}

.db-kpi-icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--accent);
}

.db-kpi-icon-wrap svg { width: 24px; height: 24px; }

.db-kpi-icon-wrap--progress  { color: #4fd8ff; filter: drop-shadow(0 0 10px rgba(79, 216, 255, 0.22)); }
.db-kpi-icon-wrap--unlocked  { color: #5ee0a0; filter: drop-shadow(0 0 10px rgba(94, 224, 160, 0.22)); }
.db-kpi-icon-wrap--completed { color: #5ee0a0; filter: drop-shadow(0 0 10px rgba(94, 224, 160, 0.26)); }
.db-kpi-icon-wrap--inprogress{ color: #f4b95b; filter: drop-shadow(0 0 10px rgba(244, 185, 91, 0.22)); }
.db-kpi-icon-wrap--time      { color: #7dd4f5; filter: drop-shadow(0 0 10px rgba(125, 212, 245, 0.20)); }
.db-kpi-icon-wrap--activity  { color: #6bc8ee; filter: drop-shadow(0 0 10px rgba(107, 200, 238, 0.20)); }
.db-kpi-icon-wrap--engagement{ color: #e8526a; filter: drop-shadow(0 0 10px rgba(232, 82, 106, 0.20)); }

.db-kpi-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.db-kpi-label {
  margin: 0;
  font-size: 8px;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-kpi-value {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-main);
}

.db-kpi-value--sm {
  font-size: 10px;
  line-height: 1.4;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-muted);
  white-space: normal;
}

/* Light mode contrast fix for Progression globale KPI value (number + %). */
:root[data-theme="light"] .db-kpi--hero .db-kpi-value#dashboard-progress,
:root[data-theme="light"] .db-kpi--hero .db-kpi-value--hero#dashboard-progress {
  color: #0f5f88 !important;
}

:root[data-theme="light"] .db-kpi--hero #dashboard-progress,
:root[data-theme="light"] .db-kpi[data-kpi-key="progress"] #dashboard-progress {
  color: #0e4d72 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .db-kpi[data-kpi-key="progress"] .db-kpi-label {
  color: #2f5f84 !important;
}

/* Mobile main menu + secondary/sub menu (career filter strip) light mode. */
:root[data-theme="light"] .mobile-bottomnav {
  background: rgba(245, 251, 255, 0.98) !important;
  border-top-color: rgba(25, 87, 135, 0.20) !important;
  box-shadow: 0 -4px 16px rgba(17, 51, 84, 0.10) !important;
}

:root[data-theme="light"] .mobile-bottomnav-item {
  color: #466785 !important;
}

:root[data-theme="light"] .mobile-bottomnav-item .mobile-bottomnav-label {
  color: #4c6f8d !important;
}

:root[data-theme="light"] .mobile-bottomnav-item.active,
:root[data-theme="light"] .mobile-bottomnav-item[aria-current="page"] {
  background: rgba(231, 245, 255, 0.98) !important;
  border-color: rgba(21, 120, 167, 0.34) !important;
  color: #0f5f88 !important;
}

:root[data-theme="light"] .mobile-bottomnav-item.active .mobile-bottomnav-label,
:root[data-theme="light"] .mobile-bottomnav-item[aria-current="page"] .mobile-bottomnav-label {
  color: #0f5f88 !important;
}

:root[data-theme="light"] .mobile-bottomnav-item svg {
  color: #3f6788 !important;
}

:root[data-theme="light"] .mobile-bottomnav-item.active svg,
:root[data-theme="light"] .mobile-bottomnav-item[aria-current="page"] svg {
  color: #116792 !important;
}

:root[data-theme="light"] .career-filter-strip {
  background: rgba(244, 251, 255, 0.97) !important;
  border-bottom-color: rgba(25, 87, 135, 0.20) !important;
}

:root[data-theme="light"] .career-filter-strip .career-status-filter {
  background: rgba(238, 248, 255, 0.96) !important;
  border-color: rgba(25, 87, 135, 0.24) !important;
  color: #2a5678 !important;
}

:root[data-theme="light"] .career-filter-strip .career-status-filter.is-active,
:root[data-theme="light"] .career-filter-strip .career-status-filter[aria-pressed="true"] {
  background: rgba(228, 243, 255, 0.99) !important;
  border-color: rgba(21, 120, 167, 0.44) !important;
  color: #0f5f88 !important;
}

:root[data-theme="light"] .career-filter-strip .career-status-filter-dot {
  box-shadow: 0 0 0 1px rgba(25, 87, 135, 0.12);
}

/* Engagement KPI */
.db-engagement-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-engagement-score {
  font-size: 22px;
  line-height: 1.05;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-main);
}

.db-engagement-label {
  font-size: 8px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.db-kpi[data-engagement="high"] .db-kpi-icon-wrap--engagement { color: #5ee0a0; }
.db-kpi[data-engagement="mid"]  .db-kpi-icon-wrap--engagement { color: #f4b95b; }

.db-kpi-explanation {
  margin-top: -1px;
  padding: 9px 12px;
  border: 1px solid rgba(93, 160, 220, 0.22);
  border-radius: 9px;
  background: rgba(7, 19, 36, 0.70);
}

.db-kpi-explanation-text {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Panel base ── */
.db-panel {
  position: relative;
  background: linear-gradient(155deg, rgba(8, 23, 42, 0.93), rgba(6, 17, 32, 0.90));
  border: 1px solid rgba(93, 160, 220, 0.16);
  border-radius: 12px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255,255,255,0.03) inset;
  padding: 14px 15px;
  overflow: hidden;
}

.db-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(79, 216, 255, 0.25) 50%, transparent 95%);
  pointer-events: none;
}

.db-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.db-panel-header--sub {
  margin: 16px 0 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(93, 160, 220, 0.10);
}

.db-panel-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: rgba(79, 216, 255, 0.80);
  display: inline-flex;
}

.db-panel-icon svg { width: 16px; height: 16px; }
.db-panel-icon--badge { color: rgba(244, 185, 91, 0.80); }

.db-panel-title {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.db-panel-title--sub { font-size: 9px; }

.db-panel-sub {
  margin: -8px 0 10px;
  font-size: 10px;
  color: var(--text-dim);
}

.db-empty {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 10px;
}

/* ── Row layouts ── */
.db-row { display: grid; gap: 10px; }

.db-row--main  { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.db-row--intel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 1fr); }

/* ── Family progression grid ── */
.db-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 10px;
}

.db-family-card {
  padding: 0;
  background: rgba(7, 19, 36, 0.70);
  border: 1px solid rgba(93, 160, 220, 0.13);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color .18s, box-shadow .18s, background .18s, transform .18s;
}

.db-family-card:hover {
  border-color: rgba(79, 216, 255, 0.28);
  box-shadow: 0 0 14px rgba(79, 216, 255, 0.05);
}

.db-family-card.is-expanded {
  border-color: rgba(79, 216, 255, 0.42);
  background: linear-gradient(155deg, rgba(10, 28, 50, 0.90), rgba(7, 20, 36, 0.92));
  box-shadow: 0 0 22px rgba(79, 216, 255, 0.12);
  transform: translateY(-1px);
}

.db-family-toggle {
  width: 100%;
  border: 0;
  margin: 0;
  padding: 12px 13px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.db-family-toggle:focus-visible {
  outline: 2px solid rgba(79, 216, 255, 0.80);
  outline-offset: -2px;
  border-radius: 10px;
}

.db-family-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

.db-family-icon {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.db-family-icon svg { width: 17px; height: 17px; }

.db-family-icon--letter {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.db-family-name {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.db-family-pct {
  margin: 0;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--accent);
  letter-spacing: -0.02em;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: right;
  line-height: 1.05;
}

.db-family-bar {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(79, 216, 255, 0.07);
  overflow: hidden;
}

.db-family-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79,216,255,0.88) 0%, rgba(94,224,160,0.72) 100%);
  box-shadow: 0 0 4px rgba(79,216,255,0.18);
  transition: width .5s ease;
}

.db-family-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-family-meta p {
  margin: 0;
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
}

.db-family-expanded {
  padding: 0 13px 13px;
}

.db-family-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* ── Next action panel ── */
.db-next-status {
  margin: 0;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-dim);
}

.db-next-title {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-main);
  font-weight: 600;
}

.db-next-subtitle {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 10px;
}

.dashboard-blocked-heading {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--warn);
}

.dashboard-blocked-text {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 10px;
}

.dashboard-next-link-wrap { margin: 12px 0 0; }

/* ── Diagnostic panel ── */
.db-diagnostic-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 9px;
  flex-wrap: wrap;
}

.db-diag-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  font-size: 9px;
}

.db-diag-swatch {
  width: 14px;
  height: 2px;
  border-radius: 999px;
  display: inline-block;
}

.db-diag-swatch--you   { background: #4fd8ff; box-shadow: 0 0 4px rgba(79,216,255,0.30); }
.db-diag-swatch--global{ background: rgba(94,224,160,0.80); }

/* Radar chart container */
.dashboard-diagnostic-chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(93, 160, 220, 0.10);
  background: rgba(5, 14, 28, 0.50);
  border-radius: 8px;
}

.dashboard-diagnostic-radar {
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.dashboard-diagnostic-ring {
  fill: none;
  stroke: rgba(93, 160, 220, 0.18);
  stroke-width: 0.7;
}

.dashboard-diagnostic-axis {
  stroke: rgba(93, 160, 220, 0.16);
  stroke-width: 0.7;
}

.dashboard-diagnostic-polygon { fill-opacity: 0.14; stroke-width: 1.5; }

.dashboard-diagnostic-polygon--learner {
  fill: rgba(79, 216, 255, 0.14);
  stroke: #4fd8ff;
  filter: drop-shadow(0 0 4px rgba(79, 216, 255, 0.14));
}

.dashboard-diagnostic-polygon--global {
  fill: rgba(94, 224, 160, 0.10);
  stroke: rgba(94, 224, 160, 0.80);
}

.dashboard-diagnostic-dot--learner { fill: #4fd8ff; }
.dashboard-diagnostic-dot--global  { fill: rgba(94, 224, 160, 0.95); }

.dashboard-diagnostic-label {
  fill: var(--text-dim);
  font-size: 8.5px;
  font-weight: 600;
}

.dashboard-diagnostic-values-list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}

.dashboard-diagnostic-values-item {
  margin: 0;
  color: var(--text-dim);
  font-size: 9px;
  border-bottom: 1px solid rgba(93, 160, 220, 0.08);
  padding-bottom: 3px;
  line-height: 1.4;
}

/* ── Level + distribution ── */
.dashboard-progress-list { display: grid; gap: 4px; }

.dashboard-progress-item {
  padding: 7px 0;
  border: 0;
  border-top: 1px solid rgba(93, 160, 220, 0.12);
  background: transparent;
}

.dashboard-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 6px;
}

.dashboard-progress-title,
.dashboard-progress-meta,
.dashboard-progress-pct { margin: 0; }

.dashboard-progress-title { font-size: 10px; color: var(--text-main); font-weight: 600; }
.dashboard-progress-meta  { font-size: 9px;  color: var(--text-dim); }

.dashboard-progress-bar {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(79, 216, 255, 0.07);
  overflow: hidden;
}

.dashboard-progress-bar > span,
.dashboard-progress-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79,216,255,0.88) 0%, rgba(94,224,160,0.74) 100%);
}

.dashboard-progress-pct {
  margin-top: 4px;
  font-size: 9px;
  color: var(--text-muted);
}

.dashboard-progress-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  align-items: center;
}

.dashboard-progress-row .dashboard-progress-pct {
  margin-top: 0;
  color: rgba(79, 216, 255, 0.90);
}

/* Répartition */
.dashboard-path-distribution { display: grid; gap: 7px; }

.dashboard-distribution-bar {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  overflow: hidden;
}

.dashboard-distribution-segment { display: block; height: 100%; }

.dashboard-distribution-segment--completed  { background: rgba(94,224,160,0.84); }
.dashboard-distribution-segment--in-progress{ background: rgba(79,216,255,0.88);  }
.dashboard-distribution-segment--to-start   { background: rgba(244,185,91,0.84); }
.dashboard-distribution-segment--locked     { background: rgba(95,110,130,0.82); }

.dashboard-distribution-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 6px;
}

.dashboard-distribution-item {
  margin: 0;
  font-size: 9px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dashboard-distribution-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.dashboard-distribution-dot--completed  { background: rgba(94,224,160,0.95); }
.dashboard-distribution-dot--in-progress{ background: rgba(79,216,255,0.95);  }
.dashboard-distribution-dot--to-start   { background: rgba(244,185,91,0.95);  }
.dashboard-distribution-dot--locked     { background: rgba(95,110,130,0.95);  }

/* ── Recent activity ── */
.dashboard-recent-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}

.dashboard-recent-list li {
  padding: 8px 10px;
  background: rgba(6, 16, 30, 0.65);
  border: 1px solid rgba(93, 160, 220, 0.11);
  border-left: 2px solid rgba(79, 216, 255, 0.22);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
  transition: border-color .15s;
}

.dashboard-recent-list li:hover {
  border-left-color: rgba(79, 216, 255, 0.50);
  border-color: rgba(79, 216, 255, 0.20);
}

/* ── Badges ── */
.db-badges-placeholder {
  min-height: 54px;
  display: flex;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px dashed rgba(93, 160, 220, 0.20);
  background: rgba(6, 16, 30, 0.45);
  border-radius: 7px;
  font-size: 10px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
  white-space: normal;
}

.db-panel--badges {
  overflow: visible;
}

/* Backward-compat stubs */
.dashboard-panel--diagnostic,
.dashboard-panel--level,
.dashboard-panel--distribution,
.dashboard-panel--family,
.dashboard-panel--engagement,
.dashboard-panel--badges,
.dashboard-panel--next,
.dashboard-panel--recent,
.dashboard-panel--summary {}

.dashboard-engagement-subtitle,
.dashboard-engagement,
.dashboard-engagement-title,
.dashboard-engagement-detail,
.dashboard-badges-placeholder { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/*
  KPI Ribbon breakpoints:
  Desktop ≥1100px:   [hero row-span-2] [3 cols] = 4-col grid, 2 rows → 1+3+3 = 7 cells ✓
  Medium 700–1099px: [hero row-span-2] [2 cols] = 3-col grid, 2 rows → 1+2+2 = 5 (hero+4)
                     so remaining 6 KPIs need 3 cols to fit neatly → keep 3-col
  Small <700px:      flat 2-col, hero not spanning
*/

@media (max-width: 1100px) {
  .db-kpi-ribbon {
    grid-template-columns: minmax(0, 1.28fr) repeat(2, minmax(0, 1fr));
  }
  .db-row--main  { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .db-row--intel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .db-row--main  { grid-template-columns: 1fr; }
  .db-row--intel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  body.learner-theme {
    padding-top: var(--mobile-safe-top);
  }
  .app-sidebar { display: none; }
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "content";
    padding-bottom: calc(var(--mobile-bottomnav-h) + var(--mobile-safe-bottom));
  }
  .app-topbar {
    position: sticky;
    top: var(--mobile-safe-top);
    z-index: 45;
  }
  .home-content { grid-template-columns: 1fr; }
  .home-side { display: none; }
  .mia-side-panel { display: none !important; }
  .career-layout { grid-template-columns: 1fr; }
  .dashboard-page { padding: 12px; gap: 8px; }
  .db-header {
    align-items: baseline;
  }
  .db-title { font-size: 20px; }
  .db-row--intel { grid-template-columns: 1fr; }
  .career-panel { display: none; }
  .map-area { min-height: 460px; flex: 1; }
}

@media (min-width: 901px) {
  .career-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .dashboard-layout,
  .mission-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .mia-side-panel {
    display: block;
  }

  .mia-float-btn--dashboard,
  .mia-float-panel--dashboard {
    display: none !important;
  }

  .mia-dock {
    display: none !important;
  }
}

@media (max-width: 700px) {
  /* Hero collapses to normal cell, flat grid */
  .db-kpi-ribbon {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .db-kpi--hero {
    grid-row: auto;
    grid-column: 1 / -1;
  }
  .db-kpi--hero .db-kpi-icon-wrap { width: 30px; height: 30px; border-radius: 8px; }
  .db-kpi--hero .db-kpi-icon-wrap svg { width: 20px; height: 20px; }
  .db-kpi-value--hero { font-size: 26px !important; }
}

@media (max-width: 640px) {
  .home-main { padding: 16px; }
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-grid { grid-template-columns: 1fr; }
  .db-kpi-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-kpi--hero { grid-column: 1 / -1; }
  .db-kpi-value--hero { font-size: 28px !important; }
  .dashboard-diagnostic-label { font-size: 8px; }
  .dashboard-diagnostic-values-item { font-size: 9px; }
  .dashboard-distribution-legend { grid-template-columns: 1fr; }
  .welcome-title { font-size: 22px; }
  .career-legend { display: none; }
  .map-area { min-height: 360px; }
  .db-family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
  .kpi-strip { grid-template-columns: 1fr; }
  .db-kpi-ribbon { grid-template-columns: 1fr 1fr; }
  .cta-row { flex-direction: column; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
}

/* ── Debug panel — hidden in client preview ── */
#map-debug-panel { display: none !important; }

/* ── Family selector: side letter buttons ── */
#family-selector {
  position: absolute;
  right: 14px;
  left: auto;
  bottom: calc(14px + 34px * 3 + 5px * 2 + 12px); /* above zoom/reset/recenter trio */
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-height: none;
  overflow: visible;
  scrollbar-width: none;
}

#family-selector::-webkit-scrollbar { display: none; }

.fam-sel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  background: rgba(6, 15, 28, 0.92);
  border: 1px solid rgba(93, 160, 220, 0.18);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
  backdrop-filter: blur(10px);
  font-family: inherit;
  padding: 0;
  gap: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}

.fam-sel-btn:hover {
  background: rgba(10, 22, 42, 0.96);
  border-color: rgba(93, 160, 220, 0.32);
}

.fam-sel-btn--active {
  background: rgba(8, 20, 38, 0.98);
  border-color: var(--fam-color, #4fd8ff);
}

.fam-sel-btn--expanded {
  /* expanded state now drives only visual emphasis; sizing remains fixed */
  background: rgba(10, 22, 42, 0.96);
  border-color: rgba(93, 160, 220, 0.32);
}

:root[data-theme="light"] .fam-sel-btn {
  background: rgba(244, 250, 255, 0.97);
  border-color: rgba(25, 87, 135, 0.28);
  color: #2b5a7c;
}

:root[data-theme="light"] .fam-sel-btn:hover {
  background: rgba(236, 247, 255, 0.98);
  border-color: rgba(21, 120, 167, 0.44);
}

:root[data-theme="light"] .fam-sel-btn--active,
:root[data-theme="light"] .fam-sel-btn--expanded {
  background: rgba(230, 244, 255, 0.98);
  border-color: var(--fam-color, #1578a7);
}

:root[data-theme="light"] .fam-sel-letter {
  color: var(--fam-color, #1578a7);
}

/* Large letter marker */
.fam-sel-letter {
  font-size: 14px;
  font-weight: 800;
  color: var(--fam-color, #4fd8ff);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}

.fam-sel-full-label {
  display: none;
}

.fam-sel-floating-label {
  position: absolute;
  right: 42px;
  top: 0;
  transform: translateY(-50%);
  z-index: 40;
  display: block;
  max-width: min(260px, calc(100vw - 96px));
  background: rgba(6, 15, 28, 0.96);
  border: 1px solid rgba(93, 160, 220, 0.28);
  border-right: 3px solid var(--fam-color, #4fd8ff);
  border-radius: var(--r-sm);
  color: var(--text-main);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  padding: 7px 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease;
}

.fam-sel-floating-label.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ── Floating family banner (inside map area, top-center) ── */
#family-floating-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: rgba(6, 15, 28, 0.88);
  border: 1px solid rgba(93, 160, 220, 0.24);
  border-radius: var(--r-md);
  border-left: 4px solid var(--fam-color, #4fd8ff);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.50), 0 0 20px rgba(79, 216, 255, 0.08);
  backdrop-filter: blur(12px);
  animation: slideInBanner 280ms ease-out;
  max-width: calc(100% - 80px);
  width: max-content;
}

@keyframes slideInBanner {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.family-banner-letter {
  display: none;
}

.family-banner-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-main);
  text-align: center;
  line-height: 1.15;
  max-height: 2.76em;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
  max-width: 240px;
}

/* ── Family return button inside map area, top-right ── */
.family-return-btn-map {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(93, 160, 220, 0.28);
  background: rgba(6, 15, 28, 0.92);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  backdrop-filter: blur(10px);
  padding: 0;
  flex-shrink: 0;
  animation: slideInReturnBtn 280ms ease-out;
  font-family: inherit;
}

@keyframes slideInReturnBtn {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.family-return-btn-map:hover {
  background: rgba(10, 22, 42, 0.96);
  border-color: rgba(93, 160, 220, 0.32);
  color: var(--text-main);
}

.family-return-btn-map svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* ── Mobile adjustments ── */
@media (max-width: 900px) {
  #family-selector {
    position: absolute;
    right: 14px;
    left: auto;
    bottom: calc(14px + 34px * 3 + 5px * 2 + 12px);
    flex-direction: column;
    align-items: flex-end;
    overflow: visible;
    gap: 5px;
    max-height: none;
  }

  .fam-sel-btn {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .fam-sel-floating-label {
    right: 42px;
    max-width: min(220px, calc(100vw - 92px));
  }

  .family-active-header {
    padding: 0 10px;
    font-size: 11px;
    gap: 6px;
  }

  .family-active-letter {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  #family-return-btn {
    width: 34px;
    height: 34px;
  }

  #family-return-btn svg {
    width: 14px;
    height: 14px;
  }

  .family-banner-name {
    font-size: 10px;
    max-height: 2.3em;
    max-width: 200px;
  }
}

@media (max-width: 600px) {
  .family-banner-name {
    font-size: 9.5px;
    max-height: 2.2em;
    max-width: 180px;
  }

  #family-floating-banner {
    max-width: calc(100% - 70px);
    padding: 9px 14px;
  }
}

/* ============================================================
   MOBILE BOTTOM SHEET — mission detail
   ============================================================ */

.detail-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 200;
  backdrop-filter: blur(3px);
}

.detail-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--bg-panel-strong);
  border-top: 1px solid var(--border-mid);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.60);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  animation: sheetSlideUp 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.detail-sheet[hidden] { display: none; }

@keyframes sheetSlideUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

.detail-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  margin: 10px auto 0;
  flex-shrink: 0;
}

.detail-sheet-inner {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
  padding: 12px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.detail-sheet-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-mid);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
  z-index: 2;
}
.detail-sheet-close:hover { background: rgba(255,255,255,0.10); color: var(--text-main); }
.detail-sheet-close svg { width: 12px; height: 12px; }

/* Sheet content elements */
.sheet-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 10px;
}

.sheet-status-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}
.sheet-status-badge--completed  { background: rgba(94,224,160,0.10); border-color: rgba(94,224,160,0.30); color: #7ef4b8; }
.sheet-status-badge--in_progress{ background: rgba(244,185,91,0.10); border-color: rgba(244,185,91,0.30); color: #ffd080; }
.sheet-status-badge--unlocked   { background: rgba(79,216,255,0.09); border-color: rgba(79,216,255,0.28); color: #7ee6ff; }
.sheet-status-badge--locked     { background: rgba(75,85,99,0.14);   border-color: rgba(75,85,99,0.28);   color: var(--locked); }
.sheet-status-badge--preview    { background: rgba(255,202,79,0.10); border-color: rgba(255,202,79,0.32); color: #ffe8a5; }

.sheet-level-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
}

.sheet-info-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.sheet-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.sheet-competence {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.sheet-family {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.sheet-progress-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.sheet-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sheet-progress-label-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.sheet-progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.sheet-progress-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}

.sheet-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.45s ease;
}

.sheet-mia-note {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  font-style: italic;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

.sheet-locked-block {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sheet-locked-block[hidden] { display: none !important; }

.sheet-locked-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sheet-locked-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.sheet-locked-header--how {
  color: rgba(79, 216, 255, 0.70);
}

.sheet-locked-header--how .sheet-locked-icon {
  color: rgba(79, 216, 255, 0.70);
}

.sheet-locked-icon {
  width: 12px; height: 12px;
  flex-shrink: 0;
  color: var(--text-dim);
}

.sheet-locked-reason {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.sheet-locked-how {
  margin: 0;
  font-size: 12px;
  color: var(--text-acc);
  line-height: 1.5;
  font-style: italic;
}

.sheet-course-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #021929;
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(130deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 2px 14px rgba(79,216,255,0.24);
  width: 100%;
  margin-top: 4px;
  transition: opacity .17s, transform .12s;
}
.sheet-course-link:hover { opacity: 0.88; transform: translateY(-1px); }

.sheet-course-locked {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--locked);
  text-align: center;
  padding: 10px 12px;
  border: 1px solid rgba(75,85,99,0.26);
  border-radius: var(--r-sm);
  background: rgba(75,85,99,0.07);
}

/* Show sheet elements only on mobile */
.detail-sheet-backdrop,
.detail-sheet { display: none; }

@media (max-width: 900px) {
  .detail-sheet-backdrop,
  .detail-sheet { display: flex; }
  .detail-sheet-backdrop { display: block; }
.detail-sheet[hidden],
.detail-sheet-backdrop[hidden] { display: none !important; }
}


/* ============================================================
   FLOATING MIA BUTTON & PANEL (mobile/tablet)
   ============================================================ */

.mia-float-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 14px;
  z-index: 220;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(107, 231, 255, 0.42);
  background: radial-gradient(circle at 30% 22%, #1b2a3f 0%, #081425 72%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.56), 0 0 14px rgba(79, 216, 255, 0.16);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
  transition: transform .18s, box-shadow .18s, border-color .18s, bottom .28s cubic-bezier(0.32, 0.72, 0, 1);
}

.mia-float-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.62), 0 0 20px rgba(79, 216, 255, 0.22);
  border-color: rgba(107, 231, 255, 0.58);
}

/* Portrait PNG assets inside the float button */
.mia-float-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  object-position: center center;
  transition: opacity .22s ease;
  pointer-events: none;
}

/* Idle state: show idle asset, hide active */
.mia-float-btn[data-mia-state="idle"]   .mia-float-img--idle   { opacity: 1; }
.mia-float-btn[data-mia-state="idle"]   .mia-float-img--active { opacity: 0; }

/* Active state: show active asset, hide idle */
.mia-float-btn[data-mia-state="active"] .mia-float-img--idle   { opacity: 0; }
.mia-float-btn[data-mia-state="active"] .mia-float-img--active { opacity: 1; }

/* Default (no data-mia-state yet): show idle */
.mia-float-btn:not([data-mia-state]) .mia-float-img--idle   { opacity: 1; }
.mia-float-btn:not([data-mia-state]) .mia-float-img--active { opacity: 0; }

/* Fallback initial text — hidden when SVG images are used */
.mia-float-initial { display: none; }

/* Unread indicator — small glowing dot */
.mia-unread-badge {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff4865;
  border: 2px solid #09162a;
  box-shadow: 0 0 8px rgba(255, 72, 101, 0.80);
  animation: badgePulse 2.4s ease-in-out infinite;
}

.mia-unread-badge[hidden] { display: none !important; }

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 72, 101, 0.65); }
  50%       { box-shadow: 0 0 12px rgba(255, 72, 101, 0.95); }
}

.mia-float-panel {
  display: none;
  position: fixed;
  bottom: 82px;
  right: 14px;
  left: auto;
  z-index: 221;
  width: 240px;
  background: var(--bg-panel-strong);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.60), var(--sh-glow);
  padding: 12px 14px 14px;
  animation: miaFloatIn 200ms ease-out;
  transition: bottom .28s cubic-bezier(0.32, 0.72, 0, 1);
}

.mia-float-panel[hidden] { display: none !important; }

@keyframes miaFloatIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.mia-float-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mia-float-panel-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mia-float-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.mia-float-role {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

.mia-float-close {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s;
}
.mia-float-close:hover { background: rgba(255,255,255,0.08); }
.mia-float-close svg { width: 10px; height: 10px; }

.mia-float-message {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.50;
}

.mia-float-home-meta {
  margin: 0;
  font-size: 10px;
  color: rgba(79,216,255,0.60);
  line-height: 1.45;
}

.mia-float-fallback {
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #9de7ff;
  background: radial-gradient(circle at 34% 24%, #203a5a 0%, #0b1b2f 70%);
}

.mia-float-btn--fallback .mia-float-fallback {
  display: flex;
}

.mia-float-btn--fallback .mia-float-img {
  opacity: 0 !important;
}

.mia-float-tips {
  margin: 0;
  padding: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mia-float-tips li {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .mia-float-btn { display: flex; }
  .mia-float-panel { display: block; }
  .mia-float-panel[hidden] { display: none !important; }
}

/* ============================================================
   DESKTOP — stronger node detail panel, collapsed empty state
   ============================================================ */

@media (min-width: 901px) {
  /* Collapse the empty placeholder — just a small hint, no dead space */
  .node-detail-empty {
    flex: 0;
    padding: 14px 14px 10px;
    gap: 6px;
    font-size: 11px;
    min-height: 0;
  }

  .node-detail-empty-icon {
    width: 28px;
    height: 28px;
    opacity: 0.20;
  }

  /* Active detail surface — raised card feel */
  .node-detail-content {
    border-top: 2px solid var(--border-active);
    background: rgba(8, 20, 42, 0.60);
  }

  .panel-section-label {
    background: rgba(79, 216, 255, 0.06);
    color: var(--accent);
  }
}

/* ============================================================
   MOBILE BOTTOM NAV BAR
   ============================================================ */

.mobile-bottomnav {
  display: none;
  align-items: flex-end;
  justify-content: stretch;
  gap: 0;
  padding: 0 4px calc(var(--mobile-safe-bottom));
  min-height: calc(var(--mobile-bottomnav-h) + var(--mobile-safe-bottom));
  background: rgba(6, 15, 28, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  flex-shrink: 0;
  overflow: visible;
}

/* Top separator line */
.mobile-bottomnav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(93, 160, 220, 0.18) 20%,
    rgba(93, 160, 220, 0.18) 65%,
    rgba(79, 216, 255, 0.30) 75%,
    rgba(79, 216, 255, 0.30) 100%
  );
  pointer-events: none;
}


/* ── Normal nav items ── */
.mobile-bottomnav-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 0;
  height: 54px;
  padding-bottom: 4px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color .15s, background .15s, border-color .15s;
}

.mobile-bottomnav-item:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.mobile-bottomnav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mobile-bottomnav-label {
  line-height: 1;
  white-space: nowrap;
}

.mobile-bottomnav-item.active {
  color: var(--accent);
  background: rgba(79, 216, 255, 0.10);
  border-color: rgba(79, 216, 255, 0.22);
}

/* ── Mia slot ── */
.mobile-bottomnav-item--mia {
  flex: 1 1 0;
  height: 54px;
  padding: 0;
  gap: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  overflow: visible;
  position: relative;
  z-index: 3;
}

.mobile-bottomnav-item--mia:hover,
.mobile-bottomnav-item--mia.active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ── Mia circular avatar ── */
/* Outer glow ring — sits 28px above the nav baseline */
.mobile-bottomnav-item--mia::before {
  content: "";
  position: absolute;
  left: calc(50% + 4px);
  top: calc(50% - 6px);
  transform: translate(-50%, -50%);
  bottom: auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  /* Dark fill centre + conic gradient ring only at the outer edge */
  background:
    radial-gradient(circle, rgba(9, 22, 42, 1) 55%, transparent 55%),
    conic-gradient(
      rgba(79, 216, 255, 0.70) 0deg,
      rgba(94, 224, 160, 0.55) 90deg,
      rgba(79, 216, 255, 0.70) 200deg,
      rgba(79, 216, 255, 0.30) 280deg,
      rgba(79, 216, 255, 0.70) 360deg
    );
  box-shadow:
    0 0 18px rgba(79, 216, 255, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.60);
  z-index: 0;
  pointer-events: none;
  transition: box-shadow .22s ease;
}

.mobile-bottomnav-item--mia:hover::before,
.mobile-bottomnav-item--mia:active::before {
  box-shadow:
    0 0 28px rgba(79, 216, 255, 0.48),
    0 10px 28px rgba(0, 0, 0, 0.65);
}

/* Active-state pulse when Mia has a message */
.mobile-bottomnav-item--mia[data-mia-state="active"]::before {
  animation: miaRingPulse 2.6s ease-in-out infinite;
}

@keyframes miaRingPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(79,216,255,0.28), 0 8px 24px rgba(0,0,0,0.60); }
  50%       { box-shadow: 0 0 32px rgba(79,216,255,0.55), 0 8px 24px rgba(0,0,0,0.60); }
}

/* Mia photo — circular, face-cropped, sits on top of ring */
.mobile-bottomnav-mia-img {
  position: absolute;
  left: calc(50% + 4px);
  top: calc(50% - 6px);
  transform: translate(-50%, -50%);
  bottom: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 12%;  /* show face, include hair bun */
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  z-index: 1;
  background: rgba(9, 22, 42, 1);
}

.mobile-bottomnav-item--mia[data-mia-state="idle"]    .mobile-bottomnav-mia-img--idle   { opacity: 1; }
.mobile-bottomnav-item--mia[data-mia-state="idle"]    .mobile-bottomnav-mia-img--active { opacity: 0; }
.mobile-bottomnav-item--mia[data-mia-state="active"]  .mobile-bottomnav-mia-img--idle   { opacity: 0; }
.mobile-bottomnav-item--mia[data-mia-state="active"]  .mobile-bottomnav-mia-img--active { opacity: 1; }
.mobile-bottomnav-item--mia:not([data-mia-state])     .mobile-bottomnav-mia-img--idle   { opacity: 1; }
.mobile-bottomnav-item--mia:not([data-mia-state])     .mobile-bottomnav-mia-img--active { opacity: 0; }

/* No text label */
.mobile-bottomnav-item--mia .mobile-bottomnav-label {
  display: none;
}

/* Unread indicator — small glowing dot on top-right edge of Mia circle */
.mobile-bottomnav-mia-badge {
  position: absolute;
  left: calc(50% + 4px + 19px);
  top: calc(50% - 6px - 19px);
  transform: translate(-50%, -50%);
  z-index: 4;
}

.mobile-bottomnav-item--disabled {
  opacity: 0.32;
  pointer-events: none;
}

@media (max-width: 900px) {
  .mobile-bottomnav { display: flex; }
  .mia-float-btn { display: none !important; }

  /* Shift Mia float button up so it doesn't overlap the bottom sheet handle */
  .mia-float-panel { bottom: calc(var(--mobile-bottomnav-h) + var(--mobile-safe-bottom) + 4px); right: 14px; left: auto; }
  .mia-float-panel::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: -10px;
    width: 16px;
    height: 16px;
    border-right: 1px solid rgba(79, 216, 255, 0.26);
    border-bottom: 1px solid rgba(79, 216, 255, 0.26);
    background: rgba(7, 18, 33, 0.96);
    transform: rotate(45deg);
    pointer-events: none;
  }
  body.sheet-open .mia-float-panel { bottom: calc(var(--detail-sheet-offset, 0px) + var(--mobile-bottomnav-h) + var(--mobile-safe-bottom) + 84px); }
  .mia-float-panel--home { width: 228px; padding: 12px 12px 13px; }
}

/* ============================================================
   DESKTOP FLOATING MISSION WINDOW
   ============================================================ */

.mission-window {
  position: fixed;
  top: calc(var(--topbar-h) + 16px);
  right: 20px;
  z-index: 300;
  width: 300px;
  background: rgba(8, 20, 40, 0.98);
  border: 1px solid var(--border-mid);
  border-radius: 0;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.70), 0 2px 8px rgba(0, 0, 0, 0.40);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topbar-h) - 36px);
  overflow: hidden;
  animation: missionWindowIn 180ms ease-out;
}

.mission-window[hidden] { display: none !important; }

@keyframes missionWindowIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.mission-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.20);
}

.mission-window-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: var(--font-display);
}

.mission-window-close {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
  padding: 0;
}
.mission-window-close:hover { background: rgba(255,255,255,0.10); color: var(--text-main); }
.mission-window-close svg { width: 10px; height: 10px; }

.mission-window-body {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
  display: flex;
  flex-direction: column;
}

/* On mobile the mission window is always hidden — bottom sheet handles detail */
@media (max-width: 900px) {
  .mission-window { display: none !important; }
}

/* ============================================================
   DESKTOP MIA DOCK
   ============================================================ */

.mia-dock {
  display: none; /* hidden on mobile; desktop-only */
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 20;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(6, 15, 28, 0.92);
  border: 1px solid var(--border-mid);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
  max-width: 280px;
  overflow: visible;
}

.mia-dock.is-open {
  border-color: rgba(79, 216, 255, 0.30);
}

@media (min-width: 901px) {
  .mia-dock { display: flex; }
}

.mia-dock-btn {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(107, 231, 255, 0.38);
  background: radial-gradient(circle at 30% 22%, #1b2a3f 0%, #081425 72%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.52), 0 0 10px rgba(79, 216, 255, 0.14);
  cursor: pointer;
  overflow: visible;
  padding: 0;
  transition: transform .16s, border-color .16s;
}

.mia-dock-btn:hover {
  transform: scale(1.06);
  border-color: rgba(107, 231, 255, 0.54);
}

/* Portrait PNG assets inside dock button */
.mia-dock-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  object-position: center center;
  transition: opacity .22s ease;
  pointer-events: none;
}

.mia-dock-btn[data-mia-state="idle"]   .mia-dock-img--idle   { opacity: 1; }
.mia-dock-btn[data-mia-state="idle"]   .mia-dock-img--active { opacity: 0; }
.mia-dock-btn[data-mia-state="active"] .mia-dock-img--idle   { opacity: 0; }
.mia-dock-btn[data-mia-state="active"] .mia-dock-img--active { opacity: 1; }
.mia-dock-btn:not([data-mia-state])    .mia-dock-img--idle   { opacity: 1; }
.mia-dock-btn:not([data-mia-state])    .mia-dock-img--active { opacity: 0; }

/* Unread badge on dock button */
.mia-dock-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff8f9d 0%, #ff4b64 42%, #ea2948 100%);
  border: none;
  box-shadow: 0 0 12px rgba(255, 72, 101, 0.74);
  animation: badgePulse 2.4s ease-in-out infinite;
  z-index: 5;
}
.mia-dock-badge[hidden] { display: none !important; }

@media (max-width: 900px) {
  .detail-sheet-close {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

.mia-dock-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mia-dock-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.mia-dock-message {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mia-dock-meta {
  display: none; /* meta hidden in compact dock */
}

/* Dock guidance panel — slides up above dock */
.mia-dock-panel {
  position: absolute;
  bottom: calc(100% - 1px);
  left: -1px;
  right: -1px;
  z-index: 1;
  width: auto;
  background: rgba(8, 20, 40, 0.98);
  border: 1px solid var(--border-mid);
  border-bottom: 0;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.65);
  padding: 12px 14px 14px;
  animation: miaFloatIn 200ms ease-out;
}

.mia-dock-panel[hidden] { display: none !important; }

@media (max-width: 900px) {
  .mia-dock-panel { display: none !important; }
}

.mia-dock-panel-close {
  float: right;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s;
  padding: 0;
  margin: -2px -2px 6px 8px;
}
.mia-dock-panel-close:hover { background: rgba(255, 255, 255, 0.10); color: var(--text-main); }
.mia-dock-panel-close svg { width: 10px; height: 10px; }

.mia-dock-panel-msg {
  margin: 0 0 8px;
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--text-muted);
  line-height: 1.50;
}

.mia-dock-panel-tips {
  margin: 0;
  padding: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mia-dock-panel-tips li {
  font-size: 11px;
  font-family: var(--font-body);
  color: var(--text-dim);
  line-height: 1.45;
}

.sidebar-tooltip,
.topbar-map-meta,
.cluster-focus-ctx,
.legend-label,
.family-selector-letter,
.family-active-banner,
.node-status-badge,
.node-level-badge,
.mission-window-label,
.sheet-status-badge,
.sheet-level-badge,
.map-ctrl-btn,
.topbar-icon-btn,
.mia-float-name,
.mia-float-role,
.mobile-bottomnav-item {
  font-family: var(--font-display);
}

.mia-float-message,
.mia-float-tips li,
.node-locked-reason,
.node-locked-how,
.node-detail-dl dd,
.sheet-mia-note,
.sheet-detail-meta-value {
  font-family: var(--font-body);
}

/* ============================================================
   Mission View (Phase 4.6)
   ============================================================ */

.learner-mission-page {
  background: radial-gradient(1200px 700px at 10% -10%, rgba(38, 119, 185, 0.24), rgba(8, 20, 40, 0.92));
  color: var(--text-main);
}

body.learner-theme.learner-mission-page {
  min-height: 100vh;
  overflow: hidden;
}

.journey-account-corner {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 8px;
}

.learner-mission-page .app-content {
  overflow-y: auto;
  overflow-x: hidden;
}

.mission-page {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 18px 40px;
}

.mission-back-link {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
}

.mission-header,
.mission-intro-video,
.mission-intro-fallback,
.mission-activities {
  background: rgba(7, 19, 36, 0.88);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  padding: 18px;
}

.mission-header {
  margin-bottom: 14px;
}

.mission-intro-video {
  margin-bottom: 14px;
}

.mission-intro-fallback {
  margin-bottom: 14px;
}

.mission-intro-video-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: rgba(4, 12, 24, 0.92);
  overflow: hidden;
}

.mission-intro-video-el {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

.mission-intro-video-mia-fallback {
  margin-top: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: rgba(4, 12, 24, 0.92);
  padding: 14px;
}

.mission-intro-video-mia-fallback img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--r-md) - 4px);
}

.mission-intro-video-mia-title {
  margin: 12px 0 6px;
  font-weight: 700;
}

.mission-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.mission-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

.mission-subtitle {
  margin: 6px 0 0;
  color: var(--text-muted);
}

.mission-status-row {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.mission-status-badge,
.mission-progress {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
}

.mission-refresh-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #ffd890;
}

.mission-refresh-indicator.is-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mission-refresh-indicator::before {
  content: none;
}

.mission-refresh-indicator.is-processing::before {
  content: '';
  width: 11px;
  height: 11px;
  border: 1.7px solid rgba(245, 185, 91, 0.24);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: learnerSpin 0.9s linear infinite;
}

.mission-status-badge[data-state="locked"] {
  border-color: rgba(210, 90, 80, 0.45);
  color: #ffb0a8;
}

.mission-status-badge[data-state="preview"] {
  border-color: rgba(255, 202, 79, 0.40);
  color: #ffe8a5;
}

.mission-lock-note,
.mission-lock-how,
.mission-error {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.mission-error {
  color: #ffb0a8;
}

.mission-error.mission-error--info {
  color: #9ce6ff;
}

.mission-section-title {
  margin: 0 0 12px;
  font-size: 18px;
}

.mission-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.mission-activity-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.mission-activity-title {
  margin: 0;
  font-size: 15px;
}

.mission-activity-meta {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 12px;
}

.mission-activity-link {
  border: 1px solid rgba(91, 210, 255, 0.55);
  color: var(--accent);
  text-decoration: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.mission-activity-unavailable,
.mission-empty {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
}

.mission-launch-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 28px));
  z-index: 70;
  background: linear-gradient(160deg, rgba(10, 27, 50, 0.98), rgba(6, 18, 36, 0.98));
  border: 1px solid rgba(79, 216, 255, 0.28);
  border-radius: 18px;
  box-shadow: 0 0 0 100vmax rgba(3, 10, 20, 0.66), var(--sh-float);
  backdrop-filter: blur(14px);
  padding: 18px 18px 16px;
}

.mission-launch-panel[hidden] { display: none !important; }

.mission-launch-panel-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-family: var(--font-display);
  color: var(--text-main);
  letter-spacing: 0.01em;
}

.mission-launch-panel-body {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.mission-launch-panel-status {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #9ce6ff;
}

.mission-launch-panel[data-loading="true"] .mission-launch-panel-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mission-launch-panel[data-loading="true"] .mission-launch-panel-status::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 1.7px solid rgba(79, 216, 255, 0.26);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: learnerSpin 0.9s linear infinite;
}

.mission-launch-panel-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mission-launch-panel-btn {
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 13px;
  cursor: pointer;
}

.mission-launch-panel-btn--primary {
  border-color: rgba(79, 216, 255, 0.55);
  color: var(--accent);
  background: rgba(79, 216, 255, 0.1);
}

.mission-launch-panel-btn--ghost {
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .mission-launch-panel {
    width: calc(100vw - 20px);
    padding: 14px 14px 13px;
  }

  .mission-launch-panel-title {
    font-size: 18px;
  }

  .mission-launch-panel-body,
  .mission-launch-panel-status {
    font-size: 13px;
  }
}

.refresh-debug-trigger:focus-visible {
  outline: 2px solid rgba(79,216,255,0.65);
  outline-offset: 2px;
}

.refresh-debug-trigger {
  cursor: text;
  text-decoration: none;
}

.refresh-debug-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(430px, calc(100vw - 20px));
  z-index: 60;
  background: rgba(8, 20, 40, 0.98);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-float);
  backdrop-filter: blur(12px);
}

.refresh-debug-panel.refresh-debug-panel--inline {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 10px);
  width: auto;
  z-index: 30;
}

.refresh-debug-panel[hidden] { display: none !important; }

.refresh-debug-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--border-soft);
}

.refresh-debug-title {
  margin: 0;
  font-size: 13px;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}

.refresh-debug-close,
.refresh-debug-copy {
  border: 1px solid var(--border-mid);
  background: rgba(255,255,255,0.03);
  color: var(--text-main);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
}

.refresh-debug-copy { margin-top: 8px; }

.refresh-debug-panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
}

.refresh-debug-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.refresh-debug-row--stack {
  align-items: stretch;
  flex-direction: column;
}

.refresh-debug-label {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
}

.refresh-debug-value {
  font-size: 12px;
  color: var(--text-main);
  text-align: right;
  word-break: break-word;
}

.refresh-debug-response {
  margin: 0;
  padding: 8px 9px;
  max-height: 160px;
  overflow: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: rgba(0, 0, 0, 0.26);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.refresh-debug-meta {
  margin: 0;
  color: var(--text-dim);
  font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .learner-inline-spinner,
  .btn-secondary.is-loading::before,
  .career-refresh-indicator::before,
  .mission-refresh-indicator::before,
  .career-node-refresh-ring,
  .mia-avatar-status.is-syncing::before,
  #career-map-svg .career-core-node--pulse,
  #career-map-svg .career-core-node-visual-shell,
  #career-map-svg .career-core-node-visual {
    animation: none !important;
  }
  #career-map-svg .career-core-node--pulse {
    opacity: 0.96;
    transform: none !important;
  }
  #career-map-svg .career-core-node-visual {
    filter: none !important;
  }
  #career-map-svg .career-core-node--backglow {
    opacity: 0.64 !important;
    filter: blur(14px) brightness(1.08) !important;
  }
  #career-map-svg .career-core-node-visual-shell {
    filter: drop-shadow(0 0 26px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.26))
      drop-shadow(0 0 54px rgba(var(--career-core-glow-rgb, 61, 184, 245), 0.14)) !important;
  }
}

/* ============================================================
   DASHBOARD-SPECIFIC MIA FLOAT
   ============================================================ */

.mia-float-btn--dashboard {
  display: flex;
  left: auto;
  right: 16px;
  bottom: 16px;
  width: 58px;
  height: 58px;
  z-index: 250;
}

.mia-float-panel--dashboard {
  display: block;
  left: auto;
  right: 16px;
  bottom: 84px;
  width: 242px;
}

.dashboard-mia-link-wrap {
  margin: 10px 0 0;
}

.dashboard-mia-link-wrap .btn-secondary {
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  .mia-float-btn--dashboard {
    right: 12px;
    left: auto;
    bottom: 18px;
  }
  .dashboard-page {
    padding-bottom: 126px;
  }
  .mia-float-panel--dashboard {
    right: 12px;
    left: auto;
    bottom: 92px;
    width: min(236px, calc(100vw - 24px));
  }
}

/* ============================================================
   FINAL LIGHT-MODE OVERRIDES (late cascade winners)
   ============================================================ */

:root[data-theme="light"] body.learner-theme #dashboard-progress.db-kpi-value.db-kpi-value--hero {
  color: #0e4d72 !important;
  -webkit-text-fill-color: #0e4d72 !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

:root[data-theme="light"] body.learner-theme .topbar-avatar[data-account-avatar="1"],
:root[data-theme="light"] body.learner-theme #topbar-avatar.topbar-avatar {
  background: linear-gradient(145deg, #edf6ff, #dfeefe) !important;
  border-color: rgba(25, 87, 135, 0.34) !important;
  color: #0f5f88 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 8px rgba(17, 51, 84, 0.12) !important;
}

:root[data-theme="light"] body.learner-theme .topbar-avatar[data-account-avatar="1"]:hover,
:root[data-theme="light"] body.learner-theme .topbar-avatar[data-account-avatar="1"]:focus-visible,
:root[data-theme="light"] body.learner-theme .topbar-avatar[data-account-avatar="1"].is-open {
  background: linear-gradient(145deg, #e6f2ff, #d6e9fb) !important;
  border-color: rgba(21, 120, 167, 0.48) !important;
  color: #0e4d72 !important;
}

/* Mia mobile: keep restored ring/avatar design; only lighten inner dark center. */
:root[data-theme="light"] body.learner-theme .mobile-bottomnav-item--mia::before {
  background:
    radial-gradient(circle, rgba(236, 246, 255, 0.98) 55%, transparent 55%),
    conic-gradient(
      rgba(79, 216, 255, 0.70) 0deg,
      rgba(94, 224, 160, 0.55) 90deg,
      rgba(79, 216, 255, 0.70) 200deg,
      rgba(79, 216, 255, 0.30) 280deg,
      rgba(79, 216, 255, 0.70) 360deg
    ) !important;
}

:root[data-theme="light"] body.learner-theme .mobile-bottomnav-mia-img {
  background: rgba(236, 246, 255, 0.98) !important;
}

:root[data-theme="light"] body.learner-theme .mia-feedback-panel textarea,
:root[data-theme="light"] body.learner-theme .mia-support-reply-box textarea {
  background: #ffffff !important;
  color: #163a58 !important;
  border-color: rgba(25, 87, 135, 0.30) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-ticket-box,
:root[data-theme="light"] body.learner-theme .mia-support-msg {
  background: rgba(244, 250, 255, 0.99) !important;
  border-color: rgba(25, 87, 135, 0.26) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-msg-head,
:root[data-theme="light"] body.learner-theme .mia-support-status {
  color: #496a87 !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-msg-body,
:root[data-theme="light"] body.learner-theme .mia-support-admin-reply {
  color: #163a58 !important;
}

:root[data-theme="light"] body.learner-theme .mission-intro-video,
:root[data-theme="light"] body.learner-theme .mission-intro-fallback {
  background: rgba(248, 252, 255, 0.98) !important;
  border-color: rgba(25, 87, 135, 0.24) !important;
}

:root[data-theme="light"] body.learner-theme .mission-intro-video-player,
:root[data-theme="light"] body.learner-theme .mission-intro-video-mia-fallback {
  background: rgba(237, 247, 255, 0.99) !important;
  border-color: rgba(25, 87, 135, 0.28) !important;
  box-shadow: 0 2px 12px rgba(14, 52, 82, 0.08) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archives-modal {
  background: rgba(11, 34, 56, 0.24) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archives-card {
  background: #ffffff !important;
  border-color: rgba(25, 87, 135, 0.28) !important;
  box-shadow: 0 8px 26px rgba(17, 52, 84, 0.14) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archives-title,
:root[data-theme="light"] body.learner-theme .mia-support-archives-empty {
  color: #1e4d70 !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archives-close {
  background: rgba(237, 247, 255, 0.96) !important;
  border-color: rgba(25, 87, 135, 0.28) !important;
  color: #1c4f73 !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archive-ticket {
  background: rgba(244, 250, 255, 0.99) !important;
  border-color: rgba(25, 87, 135, 0.24) !important;
}

:root[data-theme="light"] body.learner-theme .mia-support-archives-link {
  color: #0f6f9a !important;
}