/* =============================================================
 * MedexPrep Learner Dashboard v3 — Foundation
 * File: assets/learner-dashboard-v3.css
 * Step 1 of 10 — design tokens + tour restyle + Mochi styles + animations.
 *
 * Loads AFTER tw-dashboard.css so its overrides win source order.
 * Activated globally on learner pages — but only paints visible when:
 *   - The tour is running (existing tw-tour* DOM)
 *   - Mochi DOM is injected (step 6)
 *   - Future v3 components are rendered (steps 2–8)
 *
 * No PHP markup changes in this step. Existing dashboard look is unchanged.
 * ============================================================= */

/* ---------------------------------------------------------------
 * 1. Design tokens (--mlc3-*)
 * Scoped under .medexp-tw / .medexp-scope so they never leak.
 * --------------------------------------------------------------- */
.medexp-tw,
.medexp-scope {
  --mlc3-brand-teal:        #00a676;
  --mlc3-brand-teal-dark:   #007e5a;
  --mlc3-brand-teal-soft:   #e6f7f1;
  --mlc3-brand-blue:        #1a4f9c;
  --mlc3-brand-blue-dark:   #143d77;
  --mlc3-brand-blue-soft:   #e9eef9;

  --mlc3-bg:        #f3f6fb;
  --mlc3-surface:   #ffffff;
  --mlc3-surface-2: #f8fbfd;
  --mlc3-text:      #0b1324;
  --mlc3-text-soft: #1f2937;
  --mlc3-muted:     #5f6b7a;
  --mlc3-faint:     #94a3b8;
  --mlc3-border:    #e5e9f0;
  --mlc3-border-soft: #eef1f6;

  --mlc3-success:  #16a34a;
  --mlc3-warning:  #f59e0b;
  --mlc3-danger:   #dc2626;

  --mlc3-fs-2xs: 0.6875rem;
  --mlc3-fs-xs:  0.75rem;
  --mlc3-fs-sm:  0.875rem;
  --mlc3-fs-md:  1rem;
  --mlc3-fs-lg:  1.125rem;
  --mlc3-fs-xl:  1.3125rem;
  --mlc3-fs-2xl: 1.625rem;
  --mlc3-fs-3xl: 2.0625rem;
  --mlc3-fs-4xl: 2.625rem;

  --mlc3-fw-normal: 400;
  --mlc3-fw-medium: 500;
  --mlc3-fw-semi:   600;
  --mlc3-fw-bold:   700;
  --mlc3-fw-display: 800;

  --mlc3-r-sm:   10px;
  --mlc3-r-md:   14px;
  --mlc3-r-lg:   18px;
  --mlc3-r-xl:   22px;
  --mlc3-r-2xl:  28px;
  --mlc3-r-pill: 999px;

  --mlc3-shadow-1: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --mlc3-shadow-2: 0 4px 12px rgba(15,23,42,.07), 0 1px 4px rgba(15,23,42,.04);
  --mlc3-shadow-3: 0 10px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05);
  --mlc3-shadow-4: 0 22px 48px rgba(15,23,42,.14), 0 4px 12px rgba(15,23,42,.06);
  --mlc3-shadow-brand: 0 14px 32px -12px rgba(0,166,118,.45);

  --mlc3-ease-snap:   cubic-bezier(.2,.9,.3,1);
  --mlc3-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --mlc3-ease-smooth: cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------------
 * 2. Keyframes (used by all later steps)
 * --------------------------------------------------------------- */
@keyframes mlc3-fade-up   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mlc3-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes mlc3-pop-in    { from { opacity: 0; transform: scale(.92); } 60% { opacity: 1; transform: scale(1.04); } to { transform: scale(1); } }
@keyframes mlc3-pulse     { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes mlc3-mochi-bob { 0% { transform: translateY(0) rotate(-2deg); } 100% { transform: translateY(-6px) rotate(2deg); } }
@keyframes mlc3-mochi-blink { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } 96% { transform: scaleY(1); } }
@keyframes mlc3-shine     { from { background-position: -100% 0; } to { background-position: 200% 0; } }
@keyframes mlc3-bar-fill  { to { width: var(--mlc3-target, 50%); } }
@keyframes mlc3-hero-pan  { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes mlc3-spotlight-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(0,166,118,.6),  0 0 0 9px  rgba(0,166,118,.20), 0 0 0 9999px rgba(11,19,36,.55); }
  50%       { box-shadow: 0 0 0 4px rgba(0,166,118,.6),  0 0 0 14px rgba(0,166,118,.10), 0 0 0 9999px rgba(11,19,36,.55); }
}
@keyframes mlc3-tour-pop  { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .medexp-tw [class*="mlc3-"],
  .medexp-scope [class*="mlc3-"] {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------
 * 3. Tour restyle — overrides existing .tw-tour* rules from
 *    tw-dashboard.css. Same class names, new visual language.
 *    The dashboard.js tour code (lines 5577–7160) is untouched.
 * --------------------------------------------------------------- */

/* Backdrop: subtle blur instead of a flat scrim. */
.tw-tourOverlay {
  background: rgba(11, 19, 36, .55) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: mlc3-fade-in .25s ease both;
}

/* Spotlight: double teal ring with a slow pulse. */
.tw-tourSpotlight {
  border-radius: var(--mlc3-r-lg, 18px) !important;
  border: 0 !important;
  box-shadow:
    0 0 0 4px rgba(0,166,118,.6),
    0 0 0 9px  rgba(0,166,118,.20),
    0 0 0 9999px rgba(11,19,36,.55) !important;
  animation: mlc3-spotlight-pulse 2.4s ease infinite;
  transition: top .35s var(--mlc3-ease-smooth), left .35s var(--mlc3-ease-smooth),
              width .35s var(--mlc3-ease-smooth), height .35s var(--mlc3-ease-smooth);
}

/* Tooltip card. Brand gradient top stripe, refined typography. */
.tw-tourTip {
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  border-radius: 18px !important;
  box-shadow:
    0 24px 60px -16px rgba(15,23,42,.30),
    0 4px 16px -4px rgba(15,23,42,.08) !important;
  overflow: hidden;
  width: 320px !important;
  max-width: calc(100vw - 24px);
  padding: 0 !important;
  animation: mlc3-tour-pop .35s var(--mlc3-ease-spring) both;
  font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}
.tw-tourTip::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
  z-index: 1;
}
.tw-tourTip__head {
  padding: 16px 18px 8px !important;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  border-bottom: 0 !important;
}
.tw-tourTip__title {
  font: var(--mlc3-fw-display, 800) var(--mlc3-fs-md, 1rem) / 1.2 'Rethink Sans', sans-serif !important;
  letter-spacing: -.012em !important;
  color: var(--mlc3-text, #0b1324) !important;
  margin: 0 !important;
}
.tw-tourTip__close, button.tw-tourTip__close {
  width: 26px !important; height: 26px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  font-size: 18px !important; line-height: 1 !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease !important;
}
.tw-tourTip__close:hover, button.tw-tourTip__close:hover {
  background: var(--mlc3-surface-2, #f8fbfd) !important;
  color: var(--mlc3-text, #0b1324) !important;
}
.tw-tourTip__body {
  padding: 0 18px 14px !important;
  font: var(--mlc3-fw-normal, 400) var(--mlc3-fs-sm, .875rem) / 1.55 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
}
.tw-tourTip__body strong {
  color: var(--mlc3-text, #0b1324) !important;
  font-weight: var(--mlc3-fw-bold, 700) !important;
}
.tw-tourTip__foot {
  padding: 12px 18px !important;
  background: var(--mlc3-surface-2, #f8fbfd) !important;
  border-top: 1px solid var(--mlc3-border-soft, #eef1f6) !important;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* Progress: animated dots, current is a long pill. */
.tw-tourProgress {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  font-size: 0 !important; /* hide any "1/5" text fallback */
}
.tw-tourProgress > * {
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  background: rgba(15,23,42,.15) !important;
  transition: all .25s var(--mlc3-ease-snap) !important;
  font-size: 0 !important;
  display: inline-block !important;
}
.tw-tourProgress > .is-done,
.tw-tourProgress > [data-tour-progress-done] {
  background: var(--mlc3-brand-teal, #00a676) !important;
}
.tw-tourProgress > .is-current,
.tw-tourProgress > [data-tour-progress-current] {
  width: 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c)) !important;
}

/* Buttons. Primary uses brand gradient. */
.tw-tourBtns {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
.tw-tourBtn {
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font: var(--mlc3-fw-bold, 700) var(--mlc3-fs-xs, .75rem) / 1 'Rethink Sans', sans-serif !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  cursor: pointer;
  transition: transform .12s var(--mlc3-ease-snap), box-shadow .15s ease, background .15s ease !important;
}
.tw-btn-primary.tw-tourBtn,
.tw-tourBtn.tw-btn-primary {
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a)) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px -6px rgba(0,166,118,.55) !important;
}
.tw-btn-primary.tw-tourBtn:hover,
.tw-tourBtn.tw-btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px -6px rgba(0,166,118,.65) !important;
}
.tw-btn-secondary.tw-tourBtn,
.tw-tourBtn.tw-btn-secondary {
  background: var(--mlc3-surface, #fff) !important;
  color: var(--mlc3-text-soft, #1f2937) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
}
.tw-btn-secondary.tw-tourBtn:hover,
.tw-tourBtn.tw-btn-secondary:hover {
  background: var(--mlc3-surface-2, #f8fbfd) !important;
}
.tw-btn-ghost.tw-tourBtn,
.tw-tourBtn.tw-btn-ghost {
  background: transparent !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  padding: 8px 10px !important;
}
.tw-btn-ghost.tw-tourBtn:hover,
.tw-tourBtn.tw-btn-ghost:hover {
  color: var(--mlc3-text, #0b1324) !important;
}

/* Missing-target helper inside the tooltip. Keep readable but understated. */
.tw-tourMissing {
  padding: 0 18px 14px !important;
}
.tw-tourMissing__text {
  font-size: var(--mlc3-fs-xs, .75rem) !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  margin-bottom: 8px !important;
}

@media (max-width: 540px) {
  .tw-tourTip {
    width: calc(100vw - 1.25rem) !important;
  }
}

/* ---------------------------------------------------------------
 * 4. Mochi mascot styles (the SVG itself is injected by JS in step 6;
 *    these classes are inert until then).
 * --------------------------------------------------------------- */
.mlc3-mochi-floater {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 800;
  animation: mlc3-pop-in .55s .8s var(--mlc3-ease-spring) both;
  display: none; /* shown when JS injects content, controlled by step 6 */
}
.mlc3-mochi-floater.is-on { display: block; }

.mlc3-mochi {
  width: 72px; height: 72px;
  cursor: pointer;
  filter: drop-shadow(0 8px 18px rgba(0,166,118,.30));
  animation: mlc3-mochi-bob 3s ease infinite alternate;
  transition: transform .15s var(--mlc3-ease-snap);
}
.mlc3-mochi:hover { transform: scale(1.06) rotate(-2deg); }
.mlc3-mochi--lg { width: 140px; height: 140px; filter: drop-shadow(0 14px 30px rgba(0,166,118,.40)); }
.mlc3-mochi-eye-l, .mlc3-mochi-eye-r { transform-origin: center; animation: mlc3-mochi-blink 4.5s ease infinite; }
.mlc3-mochi-eye-r { animation-delay: .05s; }

.mlc3-mochi-bubble {
  position: absolute;
  bottom: calc(100% + 10px); right: 0;
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  border-radius: 18px 18px 4px 18px;
  padding: 12px 16px;
  box-shadow: var(--mlc3-shadow-3);
  font: 500 var(--mlc3-fs-sm, .875rem) / 1.45 'Rethink Sans', sans-serif;
  color: var(--mlc3-text, #0b1324);
  width: 240px;
  opacity: 0;
  transform: translateY(6px) scale(.95);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--mlc3-ease-spring);
}
.mlc3-mochi-bubble strong { color: var(--mlc3-brand-teal-dark, #007e5a); font-weight: var(--mlc3-fw-display, 800); }
.mlc3-mochi-bubble::after {
  content: ""; position: absolute;
  right: 18px; bottom: -7px;
  width: 14px; height: 14px;
  background: var(--mlc3-surface, #fff);
  border-right: 1px solid var(--mlc3-border, #e5e9f0);
  border-bottom: 1px solid var(--mlc3-border, #e5e9f0);
  transform: rotate(45deg);
}
.mlc3-mochi-floater.is-talking .mlc3-mochi-bubble,
.mlc3-mochi-floater:hover .mlc3-mochi-bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mlc3-mochi-bubble-close {
  position: absolute; top: 6px; right: 8px;
  width: 18px; height: 18px;
  background: transparent; border: 0;
  color: var(--mlc3-faint, #94a3b8);
  font-size: 14px; line-height: 1;
  cursor: pointer;
}
.mlc3-mochi-bubble-close:hover { color: var(--mlc3-text, #0b1324); }

/* ---------------------------------------------------------------
 * 5. Microanimation utilities (used by future steps)
 * --------------------------------------------------------------- */
.mlc3-anim-fade-up   { animation: mlc3-fade-up .55s var(--mlc3-ease-smooth) both; }
.mlc3-anim-fade-in   { animation: mlc3-fade-in .35s ease both; }
.mlc3-anim-pop-in    { animation: mlc3-pop-in .4s var(--mlc3-ease-spring) both; }
.mlc3-anim-stagger > * { animation: mlc3-fade-up .5s var(--mlc3-ease-smooth) both; }
.mlc3-anim-stagger > *:nth-child(1) { animation-delay: 40ms; }
.mlc3-anim-stagger > *:nth-child(2) { animation-delay: 90ms; }
.mlc3-anim-stagger > *:nth-child(3) { animation-delay: 140ms; }
.mlc3-anim-stagger > *:nth-child(4) { animation-delay: 190ms; }
.mlc3-anim-stagger > *:nth-child(5) { animation-delay: 240ms; }
.mlc3-anim-stagger > *:nth-child(6) { animation-delay: 290ms; }
.mlc3-anim-stagger > *:nth-child(7) { animation-delay: 340ms; }
.mlc3-anim-stagger > *:nth-child(8) { animation-delay: 390ms; }

/* ---------------------------------------------------------------
 * 6. Resume Hero (Step 2) — gradient card, animated, side stats.
 *    Renders inside the dashboard tab when learner has an active
 *    course and is not in the "all expired" state.
 * --------------------------------------------------------------- */
.medexp-tw .mlc3-resume,
.medexp-scope .mlc3-resume {
  position: relative;
  border-radius: var(--mlc3-r-2xl, 28px);
  background: linear-gradient(135deg, #00a676 0%, #1a4f9c 100%);
  background-size: 200% 200%;
  animation: mlc3-hero-pan 14s ease infinite alternate, mlc3-fade-up .55s var(--mlc3-ease-smooth) both;
  color: #fff;
  padding: clamp(20px, 2.4vw + 8px, 36px);
  margin: 0 0 22px;
  overflow: hidden;
  box-shadow:
    0 14px 38px -14px rgba(0,166,118,.50),
    0 28px 56px -28px rgba(26,79,156,.40);
  isolation: isolate;
}
.medexp-tw .mlc3-resume::before,
.medexp-scope .mlc3-resume::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 400px at 90% 10%, rgba(255,255,255,.16) 0%, transparent 60%),
    radial-gradient(500px 300px at 10% 100%, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}
.medexp-tw .mlc3-resume__inner,
.medexp-scope .mlc3-resume__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .medexp-tw .mlc3-resume__inner,
  .medexp-scope .mlc3-resume__inner {
    grid-template-columns: 1.7fr 1fr;
    align-items: center;
  }
}
.medexp-tw .mlc3-resume__main,
.medexp-scope .mlc3-resume__main { min-width: 0; }
.medexp-tw .mlc3-resume__kicker,
.medexp-scope .mlc3-resume__kicker {
  display: inline-flex !important;
  align-items: center; gap: 8px;
  padding: 5px 12px !important;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: var(--mlc3-r-pill, 999px) !important;
  font: var(--mlc3-fw-bold, 700) 11px/1 'Rethink Sans', sans-serif !important;
  letter-spacing: .08em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  margin-bottom: 14px !important;
  color: rgba(255,255,255,.96) !important;
  -webkit-text-fill-color: rgba(255,255,255,.96) !important;
}
.medexp-tw .mlc3-resume__dot,
.medexp-scope .mlc3-resume__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c6f6d5;
  box-shadow: 0 0 0 4px rgba(198,246,213,.25);
  animation: mlc3-pulse 2s ease infinite;
}
.medexp-tw .mlc3-resume__greet,
.medexp-scope .mlc3-resume__greet {
  font: var(--mlc3-fw-bold, 700) 14px/1.3 'Rethink Sans', sans-serif !important;
  color: rgba(255,255,255,.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,.88) !important;
  letter-spacing: .02em;
  margin-bottom: 4px;
}
.medexp-tw .mlc3-resume__title,
.medexp-scope .mlc3-resume__title {
  margin: 0 0 6px !important;
  font: var(--mlc3-fw-display, 800) clamp(1.5rem, 2vw + .4rem, 2.2rem) / 1.12 'Rethink Sans', sans-serif !important;
  letter-spacing: -.014em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* defeat any background-clip color */
  background: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.10);
}
.medexp-tw .mlc3-resume__path,
.medexp-scope .mlc3-resume__path {
  margin: 0 0 10px !important;
  font: var(--mlc3-fw-bold, 700) 14px/1.45 'Rethink Sans', sans-serif !important;
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  letter-spacing: -.005em;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.medexp-tw .mlc3-resume__path-sep,
.medexp-scope .mlc3-resume__path-sep {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
}
.medexp-tw .mlc3-resume__meta,
.medexp-scope .mlc3-resume__meta {
  color: rgba(255,255,255,.78) !important;
  -webkit-text-fill-color: rgba(255,255,255,.78) !important;
  font: var(--mlc3-fw-medium, 500) 14px/1.5 'Rethink Sans', sans-serif !important;
  margin: 0 0 18px !important;
}
.medexp-tw .mlc3-resume__progress,
.medexp-scope .mlc3-resume__progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
  max-width: 560px;
  margin: 0 0 22px;
  position: relative;
}
.medexp-tw .mlc3-resume__progress > span,
.medexp-scope .mlc3-resume__progress > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #fff 0%, #c6f6d5 100%);
  border-radius: 999px;
  animation: mlc3-bar-fill 1.4s var(--mlc3-ease-smooth) both;
}
.medexp-tw .mlc3-resume__progress::after,
.medexp-scope .mlc3-resume__progress::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: mlc3-shine 2.4s linear infinite;
  border-radius: inherit;
  pointer-events: none;
}
.medexp-tw .mlc3-resume__cta-row,
.medexp-scope .mlc3-resume__cta-row {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.medexp-tw .mlc3-resume__cta,
.medexp-scope .mlc3-resume__cta {
  display: inline-flex !important;
  align-items: center; gap: 10px;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  font: var(--mlc3-fw-display, 800) 16px/1 'Rethink Sans', sans-serif !important;
  border: 0 !important; cursor: pointer; text-decoration: none !important;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.4) !important;
  transition: transform .12s var(--mlc3-ease-snap), box-shadow .15s ease;
  white-space: nowrap;
}
.medexp-tw .mlc3-resume__cta:hover,
.medexp-scope .mlc3-resume__cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.5) !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  background: #fff !important;
}
.medexp-tw .mlc3-resume__arrow,
.medexp-scope .mlc3-resume__arrow {
  display: inline-block;
  transition: transform .15s var(--mlc3-ease-spring);
}
.medexp-tw .mlc3-resume__cta:hover .mlc3-resume__arrow,
.medexp-scope .mlc3-resume__cta:hover .mlc3-resume__arrow { transform: translateX(4px); }

.medexp-tw .mlc3-resume__cta-ghost,
.medexp-scope .mlc3-resume__cta-ghost {
  display: inline-flex !important;
  align-items: center; gap: 8px;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font: var(--mlc3-fw-bold, 700) 14px/1 'Rethink Sans', sans-serif !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  text-decoration: none !important; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.medexp-tw .mlc3-resume__cta-ghost:hover,
.medexp-scope .mlc3-resume__cta-ghost:hover {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Right-side glass stats card */
.medexp-tw .mlc3-resume__side,
.medexp-scope .mlc3-resume__side {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.medexp-tw .mlc3-resume__stat,
.medexp-scope .mlc3-resume__stat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.medexp-tw .mlc3-resume__stat-label,
.medexp-scope .mlc3-resume__stat-label {
  font: var(--mlc3-fw-bold, 700) 11px/1 'Rethink Sans', sans-serif !important;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.82) !important;
  -webkit-text-fill-color: rgba(255,255,255,.82) !important;
}
.medexp-tw .mlc3-resume__stat-value,
.medexp-scope .mlc3-resume__stat-value {
  font: var(--mlc3-fw-display, 800) 22px/1 'Rethink Sans', sans-serif !important;
  font-variant-numeric: tabular-nums;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

/* Mobile: pad + tighter stats */
@media (max-width: 540px) {
  .medexp-tw .mlc3-resume,
  .medexp-scope .mlc3-resume {
    border-radius: var(--mlc3-r-xl, 22px);
  }
  .medexp-tw .mlc3-resume__stat-value,
  .medexp-scope .mlc3-resume__stat-value { font-size: 18px; }
}

/* ---------------------------------------------------------------
 * 7. Today's Plan storyboard (Step 3) — 3 stages: Read · Practice · Review.
 *    Active stage driven by gam_state_inline.daily_mission.type.
 *    Sits below the resume hero. White panel with brand-gradient top edge.
 * --------------------------------------------------------------- */
.medexp-tw .mlc3-plan,
.medexp-scope .mlc3-plan {
  position: relative;
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  border-radius: var(--mlc3-r-2xl, 28px);
  padding: clamp(18px, 2vw + 8px, 26px);
  margin: 0 0 22px;
  box-shadow: var(--mlc3-shadow-1);
  overflow: hidden;
  animation: mlc3-fade-up .55s .15s var(--mlc3-ease-smooth) both;
}
.medexp-tw .mlc3-plan::before,
.medexp-scope .mlc3-plan::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
}

.medexp-tw .mlc3-plan__head,
.medexp-scope .mlc3-plan__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.medexp-tw .mlc3-plan__title,
.medexp-scope .mlc3-plan__title {
  margin: 0;
  display: flex; align-items: center; gap: 8px;
  font: var(--mlc3-fw-display, 800) 18px/1.2 'Rethink Sans', sans-serif;
  letter-spacing: -.014em;
  color: var(--mlc3-text, #0b1324);
}
.medexp-tw .mlc3-plan__title-ico,
.medexp-scope .mlc3-plan__title-ico {
  width: 18px; height: 18px;
  color: var(--mlc3-brand-teal-dark, #007e5a);
  flex: none;
}
.medexp-tw .mlc3-plan__meta,
.medexp-scope .mlc3-plan__meta {
  margin: 4px 0 0;
  font: var(--mlc3-fw-medium, 500) 14px/1.4 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
}
.medexp-tw .mlc3-plan__meta strong,
.medexp-scope .mlc3-plan__meta strong {
  color: var(--mlc3-text, #0b1324);
  font-weight: var(--mlc3-fw-bold, 700);
}
.medexp-tw .mlc3-plan__pill,
.medexp-scope .mlc3-plan__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0,166,118,.10);
  color: var(--mlc3-brand-teal-dark, #007e5a);
  font: var(--mlc3-fw-bold, 700) 12px/1 'Rethink Sans', sans-serif;
  white-space: nowrap;
}
.medexp-tw .mlc3-plan__pill-dot,
.medexp-scope .mlc3-plan__pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mlc3-brand-teal, #00a676);
  animation: mlc3-pulse 2s ease infinite;
}

.medexp-tw .mlc3-plan__row,
.medexp-scope .mlc3-plan__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px) {
  .medexp-tw .mlc3-plan__row,
  .medexp-scope .mlc3-plan__row {
    grid-template-columns: 1fr;
  }
}

/* Stage card — base (available state) */
.medexp-tw .mlc3-stage,
.medexp-scope .mlc3-stage {
  position: relative;
  background: var(--mlc3-surface-2, #f8fbfd);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  border-radius: var(--mlc3-r-xl, 22px);
  padding: 18px;
  overflow: hidden;
  transition:
    transform .15s var(--mlc3-ease-snap),
    box-shadow .15s ease,
    border-color .15s ease;
  display: flex; flex-direction: column;
}
.medexp-tw .mlc3-stage:hover,
.medexp-scope .mlc3-stage:hover {
  transform: translateY(-2px);
  box-shadow: var(--mlc3-shadow-2);
}
.medexp-tw .mlc3-stage__head,
.medexp-scope .mlc3-stage__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.medexp-tw .mlc3-stage__step,
.medexp-scope .mlc3-stage__step {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  font: var(--mlc3-fw-display, 800) 12px/1 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
  flex: none;
  transition: all .2s ease;
}
.medexp-tw .mlc3-stage__label,
.medexp-scope .mlc3-stage__label {
  font: var(--mlc3-fw-bold, 700) 11px/1 'Rethink Sans', sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--mlc3-muted, #5f6b7a);
}
.medexp-tw .mlc3-stage__title,
.medexp-scope .mlc3-stage__title {
  margin: 4px 0 6px;
  font: var(--mlc3-fw-display, 800) 16px/1.25 'Rethink Sans', sans-serif;
  letter-spacing: -.012em;
  color: var(--mlc3-text, #0b1324);
}
.medexp-tw .mlc3-stage__meta,
.medexp-scope .mlc3-stage__meta {
  font: var(--mlc3-fw-medium, 500) 13px/1.45 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
  margin: 0 0 14px;
  flex: 1 1 auto;
}
.medexp-tw .mlc3-stage__cta,
.medexp-scope .mlc3-stage__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--mlc3-surface, #fff);
  color: var(--mlc3-text-soft, #1f2937);
  font: var(--mlc3-fw-bold, 700) 13px/1 'Rethink Sans', sans-serif;
  border: 1px solid var(--mlc3-border, #e5e9f0);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .12s var(--mlc3-ease-snap), box-shadow .15s ease;
  align-self: flex-start;
}
.medexp-tw .mlc3-stage__cta:hover,
.medexp-scope .mlc3-stage__cta:hover {
  background: var(--mlc3-surface-2, #f8fbfd);
  color: var(--mlc3-text, #0b1324);
}
.medexp-tw .mlc3-stage__cta-arrow,
.medexp-scope .mlc3-stage__cta-arrow { transition: transform .15s var(--mlc3-ease-spring); }
.medexp-tw .mlc3-stage__cta:hover .mlc3-stage__cta-arrow,
.medexp-scope .mlc3-stage__cta:hover .mlc3-stage__cta-arrow { transform: translateX(3px); }

/* DONE state — soft green tint, check step */
.medexp-tw .mlc3-stage.is-done,
.medexp-scope .mlc3-stage.is-done {
  background: rgba(22,163,74,.06);
  border-color: rgba(22,163,74,.25);
}
.medexp-tw .mlc3-stage.is-done .mlc3-stage__step,
.medexp-scope .mlc3-stage.is-done .mlc3-stage__step {
  background: var(--mlc3-success, #16a34a);
  color: #fff;
  border-color: var(--mlc3-success, #16a34a);
}
.medexp-tw .mlc3-stage.is-done .mlc3-stage__cta,
.medexp-scope .mlc3-stage.is-done .mlc3-stage__cta {
  background: rgba(22,163,74,.12);
  color: #166534;
  border-color: rgba(22,163,74,.30);
  pointer-events: none;
}

/* ACTIVE state — brand-tinted bg, left edge gradient bar, prominent CTA */
.medexp-tw .mlc3-stage.is-active,
.medexp-scope .mlc3-stage.is-active {
  background: linear-gradient(135deg, rgba(0,166,118,.10) 0%, rgba(26,79,156,.06) 100%);
  border-color: rgba(0,166,118,.30);
  box-shadow: 0 6px 18px -10px rgba(0,166,118,.35);
}
.medexp-tw .mlc3-stage.is-active::before,
.medexp-scope .mlc3-stage.is-active::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
  border-radius: 4px 0 0 4px;
}
.medexp-tw .mlc3-stage.is-active .mlc3-stage__step,
.medexp-scope .mlc3-stage.is-active .mlc3-stage__step {
  background: var(--mlc3-brand-teal, #00a676);
  color: #fff;
  border-color: var(--mlc3-brand-teal, #00a676);
}
.medexp-tw .mlc3-stage.is-active .mlc3-stage__label,
.medexp-scope .mlc3-stage.is-active .mlc3-stage__label {
  color: var(--mlc3-brand-teal-dark, #007e5a);
}
.medexp-tw .mlc3-stage.is-active .mlc3-stage__cta,
.medexp-scope .mlc3-stage.is-active .mlc3-stage__cta {
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a));
  color: #fff;
  border-color: transparent;
  font-weight: var(--mlc3-fw-display, 800);
  box-shadow: 0 6px 16px -6px rgba(0,166,118,.55);
}
.medexp-tw .mlc3-stage.is-active .mlc3-stage__cta:hover,
.medexp-scope .mlc3-stage.is-active .mlc3-stage__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(0,166,118,.65);
  color: #fff;
}

/* Tiny progress bar inside the active stage (mission progress) */
.medexp-tw .mlc3-stage__bar,
.medexp-scope .mlc3-stage__bar {
  height: 6px; border-radius: 999px;
  background: rgba(15,23,42,.07);
  overflow: hidden;
  margin: -8px 0 14px;
}
.medexp-tw .mlc3-stage__bar > span,
.medexp-scope .mlc3-stage__bar > span {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
  animation: mlc3-bar-fill 1.2s var(--mlc3-ease-smooth) both;
}

/* ---------------------------------------------------------------
 * 8. Performance strip (Step 4) — 4 polished metric cards.
 *    Replaces the existing tw-metricStrip when v3 is active. Each card:
 *    label + color-coded icon pill (top-right), gradient big number,
 *    sub-text, hover lift + brand top stripe + corner radial glow.
 *    Wired to existing data: accuracy 7d, questions answered, streak,
 *    days-to-exam. Count-ups via [data-mlc3-countup].
 * --------------------------------------------------------------- */
.medexp-tw .mlc3-metric-strip,
.medexp-scope .mlc3-metric-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 0 22px !important;
  animation: mlc3-fade-up .55s .25s var(--mlc3-ease-smooth) both;
}
@media (max-width: 1100px) {
  .medexp-tw .mlc3-metric-strip,
  .medexp-scope .mlc3-metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 540px) {
  .medexp-tw .mlc3-metric-strip,
  .medexp-scope .mlc3-metric-strip {
    grid-template-columns: 1fr !important;
  }
}

.medexp-tw .mlc3-metric,
.medexp-scope .mlc3-metric {
  position: relative !important;
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  border-radius: var(--mlc3-r-lg, 18px) !important;
  padding: 14px 16px !important;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .15s var(--mlc3-ease-snap),
    box-shadow .15s ease,
    border-color .15s ease !important;
  box-shadow: var(--mlc3-shadow-1) !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  cursor: pointer;
  min-height: 0 !important;
  align-self: stretch;
}
.medexp-tw .mlc3-metric::before,
.medexp-scope .mlc3-metric::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
  opacity: 0;
  transform: scaleX(.2); transform-origin: left;
  transition: opacity .2s ease, transform .35s var(--mlc3-ease-snap);
}
.medexp-tw .mlc3-metric:hover,
.medexp-scope .mlc3-metric:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--mlc3-shadow-3) !important;
  border-color: rgba(0,166,118,.30) !important;
}
.medexp-tw .mlc3-metric:hover::before,
.medexp-scope .mlc3-metric:hover::before { opacity: 1; transform: scaleX(1); }
.medexp-tw .mlc3-metric::after,
.medexp-scope .mlc3-metric::after {
  content: ""; position: absolute; right: -25px; bottom: -25px; z-index: -1;
  width: 100px; height: 100px;
  background: radial-gradient(circle at center, rgba(0,166,118,.10) 0%, transparent 70%);
  pointer-events: none;
}
.medexp-tw .mlc3-metric--questions::after,
.medexp-scope .mlc3-metric--questions::after { background: radial-gradient(circle at center, rgba(26,79,156,.12) 0%, transparent 70%); }
.medexp-tw .mlc3-metric--streak::after,
.medexp-scope .mlc3-metric--streak::after { background: radial-gradient(circle at center, rgba(245,158,11,.14) 0%, transparent 70%); }
.medexp-tw .mlc3-metric--countdown::after,
.medexp-scope .mlc3-metric--countdown::after { background: radial-gradient(circle at center, rgba(139,92,246,.14) 0%, transparent 70%); }

.medexp-tw .mlc3-metric__head,
.medexp-scope .mlc3-metric__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
}
.medexp-tw .mlc3-metric__label,
.medexp-scope .mlc3-metric__label {
  font: var(--mlc3-fw-bold, 700) 11px/1 'Rethink Sans', sans-serif !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a) !important;
  background: none !important;
}
.medexp-tw .mlc3-metric__icon,
.medexp-scope .mlc3-metric__icon {
  width: 28px !important; height: 28px !important;
  border-radius: 8px !important;
  display: grid !important; place-items: center !important;
  background: linear-gradient(135deg, var(--mlc3-brand-teal-soft, #e6f7f1), rgba(0,166,118,.06)) !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  flex: none !important;
  position: static !important;  /* defeat legacy tw-metric__icon { position: absolute } */
  top: auto !important; right: auto !important;
}
.medexp-tw .mlc3-metric__icon svg,
.medexp-scope .mlc3-metric__icon svg { width: 14px !important; height: 14px !important; }
.medexp-tw .mlc3-metric--questions .mlc3-metric__icon,
.medexp-scope .mlc3-metric--questions .mlc3-metric__icon {
  background: linear-gradient(135deg, var(--mlc3-brand-blue-soft, #e9eef9), rgba(26,79,156,.06));
  color: var(--mlc3-brand-blue, #1a4f9c);
}
.medexp-tw .mlc3-metric--streak .mlc3-metric__icon,
.medexp-scope .mlc3-metric--streak .mlc3-metric__icon {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
}
.medexp-tw .mlc3-metric--countdown .mlc3-metric__icon,
.medexp-scope .mlc3-metric--countdown .mlc3-metric__icon {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #7c3aed;
}

.medexp-tw .mlc3-metric__value,
.medexp-scope .mlc3-metric__value {
  font: var(--mlc3-fw-display, 800) 32px/1.05 'Rethink Sans', sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.022em !important;
  background: linear-gradient(135deg, #0b1324, #1a4f9c) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin: 0 !important;
  display: block !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.medexp-tw .mlc3-metric--accuracy .mlc3-metric__value,
.medexp-scope .mlc3-metric--accuracy .mlc3-metric__value {
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.medexp-tw .mlc3-metric--streak .mlc3-metric__value,
.medexp-scope .mlc3-metric--streak .mlc3-metric__value {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.medexp-tw .mlc3-metric--countdown .mlc3-metric__value,
.medexp-scope .mlc3-metric--countdown .mlc3-metric__value {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.medexp-tw .mlc3-metric__value-empty,
.medexp-scope .mlc3-metric__value-empty {
  color: var(--mlc3-faint, #94a3b8) !important;
  -webkit-text-fill-color: var(--mlc3-faint, #94a3b8) !important;
  background: none !important;
}

.medexp-tw .mlc3-metric__sub,
.medexp-scope .mlc3-metric__sub {
  margin: 4px 0 0 !important;
  font: var(--mlc3-fw-medium, 500) 12px/1.35 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a) !important;
  background: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
}
.medexp-tw .mlc3-metric__trend,
.medexp-scope .mlc3-metric__trend {
  font: var(--mlc3-fw-bold, 700) 12px/1 'Rethink Sans', sans-serif !important;
}
.medexp-tw .mlc3-metric__trend.is-up,
.medexp-scope .mlc3-metric__trend.is-up   { color: var(--mlc3-success, #16a34a) !important; }
.medexp-tw .mlc3-metric__trend.is-down,
.medexp-scope .mlc3-metric__trend.is-down { color: var(--mlc3-danger, #dc2626) !important; }

/* ---- Card add-ons that the existing animation JS expects ----
   The v3 strip embeds the original .tw-spark sparkline (accuracy card),
   .tw-metric__dots row (streak card) and .tw-metric__unit span
   (streak card). Style them to fit the new card layout. */

/* Accuracy: sparkline at the bottom of the card — small, brand-tinted, hidden when no data */
.medexp-tw .mlc3-metric--accuracy .tw-spark,
.medexp-scope .mlc3-metric--accuracy .tw-spark {
  display: block !important;
  width: 100% !important;
  height: 22px !important;
  margin: 6px 0 -2px !important;
  overflow: visible !important;
}
.medexp-tw .mlc3-metric--accuracy .tw-spark polyline,
.medexp-scope .mlc3-metric--accuracy .tw-spark polyline {
  fill: none !important;
  stroke: var(--mlc3-brand-teal, #00a676) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 2px 4px rgba(0,166,118,.25));
}
/* Empty state — hide sparkline so the card doesn't show a flat zero line */
.medexp-tw .mlc3-metric--accuracy:has(.mlc3-metric__value-empty) .tw-spark,
.medexp-scope .mlc3-metric--accuracy:has(.mlc3-metric__value-empty) .tw-spark {
  display: none !important;
}

/* Streak: dot row (today + last 6 days) — compact, no day labels */
.medexp-tw .mlc3-metric--streak .tw-metric__dots,
.medexp-scope .mlc3-metric--streak .tw-metric__dots {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  margin-top: 6px !important;
  padding: 0 !important;
}
.medexp-tw .mlc3-metric--streak .tw-dot,
.medexp-scope .mlc3-metric--streak .tw-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(15,23,42,.10) !important;
  display: inline-block !important;
  position: relative;
  transition: transform .25s var(--mlc3-ease-spring);
}
/* Hide the day-of-week labels (legacy CSS uses ::before content: attr(data-label)) */
.medexp-tw .mlc3-metric--streak .tw-dot::before,
.medexp-scope .mlc3-metric--streak .tw-dot::before,
.medexp-tw .mlc3-metric--streak .tw-dot::after,
.medexp-scope .mlc3-metric--streak .tw-dot::after {
  content: none !important;
  display: none !important;
}
/* Hide dots row when no streak yet (empty state) */
.medexp-tw .mlc3-metric--streak:has(.mlc3-metric__value-empty) .tw-metric__dots,
.medexp-scope .mlc3-metric--streak:has(.mlc3-metric__value-empty) .tw-metric__dots {
  display: none !important;
}
.medexp-tw .mlc3-metric--streak .tw-dot.is-on,
.medexp-scope .mlc3-metric--streak .tw-dot.is-on {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 2px 4px -1px rgba(217,119,6,.55) !important;
}
.medexp-tw .mlc3-metric--streak .tw-dot.is-today,
.medexp-scope .mlc3-metric--streak .tw-dot.is-today {
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a)) !important;
  box-shadow: 0 0 0 3px rgba(0,166,118,.18), 0 2px 4px -1px rgba(0,166,118,.45) !important;
  transform: scale(1.1);
}
/* Stagger entrance — driven by .is-dots-entering class added by animateStreak */
.medexp-tw .mlc3-metric--streak.is-dots-entering .tw-dot,
.medexp-scope .mlc3-metric--streak.is-dots-entering .tw-dot {
  animation: mlc3-dot-pop .35s var(--mlc3-ease-spring) both;
}
@keyframes mlc3-dot-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.medexp-tw .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(1),
.medexp-scope .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(1) { animation-delay: 50ms;  }
.medexp-tw .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(2),
.medexp-scope .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(2) { animation-delay: 130ms; }
.medexp-tw .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(3),
.medexp-scope .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(3) { animation-delay: 210ms; }
.medexp-tw .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(4),
.medexp-scope .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(4) { animation-delay: 290ms; }
.medexp-tw .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(5),
.medexp-scope .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(5) { animation-delay: 370ms; }
.medexp-tw .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(6),
.medexp-scope .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(6) { animation-delay: 450ms; }
.medexp-tw .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(7),
.medexp-scope .mlc3-metric--streak.is-dots-entering .tw-dot:nth-child(7) { animation-delay: 530ms; }

/* Streak unit span ("days"/"day") inside the value — smaller, dimmer */
.medexp-tw .mlc3-metric--streak .tw-metric__unit,
.medexp-scope .mlc3-metric--streak .tw-metric__unit {
  font-size: 14px !important;
  font-weight: var(--mlc3-fw-bold, 700) !important;
  letter-spacing: 0;
  -webkit-text-fill-color: rgba(217,119,6,.70) !important;
  background: none !important;
  margin-left: 4px;
}

/* Milestone celebration badges injected by dashboard.js */
.medexp-tw .mlc3-metric .tw-metric__milestoneBadge,
.medexp-scope .mlc3-metric .tw-metric__milestoneBadge,
.medexp-tw .mlc3-metric .tw-metric__trendBadge,
.medexp-scope .mlc3-metric .tw-metric__trendBadge,
.medexp-tw .mlc3-metric .tw-metric__speedBadge,
.medexp-scope .mlc3-metric .tw-metric__speedBadge {
  position: absolute !important;
  top: 12px !important; right: 12px !important;
  font-size: 22px !important;
  z-index: 3;
  animation: mlc3-pop-in .55s var(--mlc3-ease-spring) both;
  filter: drop-shadow(0 6px 12px rgba(245,158,11,.35));
  pointer-events: none;
}
.medexp-tw .mlc3-metric.is-milestone,
.medexp-scope .mlc3-metric.is-milestone,
.medexp-tw .mlc3-metric.is-acc-good,
.medexp-scope .mlc3-metric.is-acc-good,
.medexp-tw .mlc3-metric.is-time-fast,
.medexp-scope .mlc3-metric.is-time-fast {
  box-shadow:
    0 0 0 3px rgba(245,158,11,.20),
    var(--mlc3-shadow-3) !important;
  border-color: rgba(245,158,11,.35) !important;
}

/* Hide the icon when a milestone badge is showing (avoid overlap) */
.medexp-tw .mlc3-metric.is-milestone .mlc3-metric__icon,
.medexp-scope .mlc3-metric.is-milestone .mlc3-metric__icon,
.medexp-tw .mlc3-metric.is-acc-good .mlc3-metric__icon,
.medexp-scope .mlc3-metric.is-acc-good .mlc3-metric__icon {
  opacity: 0;
  transition: opacity .2s ease;
}

/* When v3 strip is rendered, hide the legacy tw-metricStrip if both exist. */
.medexp-tw .mlc3-metric-strip + .tw-metricStrip,
.medexp-scope .mlc3-metric-strip + .tw-metricStrip,
.medexp-tw .tw-dashSubtabs > .tw-metricStrip:has(+ .mlc3-metric-strip),
.medexp-scope .tw-dashSubtabs > .tw-metricStrip:has(+ .mlc3-metric-strip) {
  display: none !important;
}

/* ---------------------------------------------------------------
 * 9. Step 5 — Focus areas + Recent activity 2-col split.
 *    Left card preserves the existing .tw-focusAreasCard markup so JS
 *    hydration via /analytics/performance still runs unchanged. We
 *    only re-skin the rows and add a bottom CTA. Right card is new.
 * --------------------------------------------------------------- */
.medexp-tw .mlc3-split-row,
.medexp-scope .mlc3-split-row {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  margin: 0 0 22px;
  animation: mlc3-fade-up .55s .35s var(--mlc3-ease-smooth) both;
}
@media (max-width: 980px) {
  .medexp-tw .mlc3-split-row,
  .medexp-scope .mlc3-split-row {
    grid-template-columns: 1fr;
  }
}

/* ───── Left: Focus Areas card ───── */
.medexp-tw .mlc3-focus-card,
.medexp-scope .mlc3-focus-card {
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  border-radius: var(--mlc3-r-xl, 22px) !important;
  padding: 18px 20px !important;
  box-shadow: var(--mlc3-shadow-1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  margin: 0 !important;
}
.medexp-tw .mlc3-focus-card__head,
.medexp-scope .mlc3-focus-card__head {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px;
}
.medexp-tw .mlc3-focus-card__title,
.medexp-scope .mlc3-focus-card__title {
  margin: 0 !important;
  font: var(--mlc3-fw-display, 800) 16px/1.2 'Rethink Sans', sans-serif !important;
  letter-spacing: -.012em !important;
  display: flex; align-items: center; gap: 8px;
  color: var(--mlc3-text, #0b1324) !important;
  -webkit-text-fill-color: var(--mlc3-text, #0b1324) !important;
  background: none !important;
}
.medexp-tw .mlc3-focus-card__title svg,
.medexp-scope .mlc3-focus-card__title svg {
  color: var(--mlc3-brand-teal-dark, #007e5a);
}
.medexp-tw .mlc3-focus-card__sub,
.medexp-scope .mlc3-focus-card__sub {
  margin: 0;
  font: var(--mlc3-fw-medium, 500) 12px/1.4 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
}

/* Skeleton while JS is fetching analytics */
.medexp-tw .mlc3-focus-skel,
.medexp-scope .mlc3-focus-skel {
  display: flex; flex-direction: column; gap: 10px;
}
.medexp-tw .mlc3-focus-skel__row,
.medexp-scope .mlc3-focus-skel__row {
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(15,23,42,.04), rgba(15,23,42,.08), rgba(15,23,42,.04));
  background-size: 200% 100%;
  animation: mlc3-skel-shimmer 1.4s linear infinite;
}
@keyframes mlc3-skel-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0;  }
}

/* Hydrated focus rows (rendered by medexpInitFocusAreas in dashboard.js) */
.medexp-tw .mlc3-focus-card .tw-focusAreasList,
.medexp-scope .mlc3-focus-card .tw-focusAreasList {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
/* v0.7.8.4: Align this older 4-column grid with the v0.7.7.5
   5-column markup (dot · name · bar · pct · arrow). The real arrow
   lives inside the row as a child span (.mlc3-focus-row__arrow), so
   the obsolete ::after pseudo-arrow has been removed. */
.medexp-tw .mlc3-focus-card .tw-focusRow,
.medexp-scope .mlc3-focus-card .tw-focusRow {
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1.4fr) 90px 44px 18px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
  transition: background .15s ease, transform .12s var(--mlc3-ease-snap) !important;
  position: relative;
}
.medexp-tw .mlc3-focus-card .tw-focusRow:hover,
.medexp-scope .mlc3-focus-card .tw-focusRow:hover {
  background: var(--mlc3-surface-2, #f8fbfd) !important;
}
.medexp-tw .mlc3-focus-card .tw-focusDot,
.medexp-scope .mlc3-focus-card .tw-focusDot {
  font-size: 14px !important;
  line-height: 1 !important;
}
.medexp-tw .mlc3-focus-card .tw-focusName,
.medexp-scope .mlc3-focus-card .tw-focusName {
  font: var(--mlc3-fw-bold, 700) 14px/1.3 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-text, #0b1324) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.medexp-tw .mlc3-focus-card .tw-focusPct,
.medexp-scope .mlc3-focus-card .tw-focusPct {
  font: var(--mlc3-fw-display, 800) 14px/1 'Rethink Sans', sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right;
  margin-left: 0 !important;
}

/* Bottom CTA — "Practice your weakest area" */
.medexp-tw .mlc3-focus-card__cta,
.medexp-scope .mlc3-focus-card__cta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(220,38,38,.06) 0%, rgba(245,158,11,.06) 100%) !important;
  border: 1px solid rgba(220,38,38,.18) !important;
  font: var(--mlc3-fw-bold, 700) 13px/1.3 'Rethink Sans', sans-serif !important;
  color: #991b1b !important;
  -webkit-text-fill-color: #991b1b !important;
  text-decoration: none !important;
  transition: transform .12s var(--mlc3-ease-snap), box-shadow .15s ease !important;
}
.medexp-tw .mlc3-focus-card__cta:hover,
.medexp-scope .mlc3-focus-card__cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--mlc3-shadow-2);
  color: #991b1b !important;
}
.medexp-tw .mlc3-focus-card__cta-arrow,
.medexp-scope .mlc3-focus-card__cta-arrow {
  margin-left: auto;
  transition: transform .15s var(--mlc3-ease-spring);
}
.medexp-tw .mlc3-focus-card__cta:hover .mlc3-focus-card__cta-arrow,
.medexp-scope .mlc3-focus-card__cta:hover .mlc3-focus-card__cta-arrow {
  transform: translateX(3px);
}

/* "tw-muted" empty state inside the focus list — restyle */
.medexp-tw .mlc3-focus-card .tw-focusAreasList .tw-muted,
.medexp-scope .mlc3-focus-card .tw-focusAreasList .tw-muted {
  font: var(--mlc3-fw-medium, 500) 13px/1.5 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  padding: 12px 0 !important;
}

/* ───── Right: Recent Activity card ───── */
.medexp-tw .mlc3-recent,
.medexp-scope .mlc3-recent {
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  border-radius: var(--mlc3-r-xl, 22px) !important;
  padding: 18px 20px !important;
  box-shadow: var(--mlc3-shadow-1) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}
.medexp-tw .mlc3-recent__head,
.medexp-scope .mlc3-recent__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.medexp-tw .mlc3-recent__title,
.medexp-scope .mlc3-recent__title {
  margin: 0 !important;
  font: var(--mlc3-fw-display, 800) 16px/1.2 'Rethink Sans', sans-serif !important;
  letter-spacing: -.012em !important;
  display: flex; align-items: center; gap: 8px;
  color: var(--mlc3-text, #0b1324) !important;
  -webkit-text-fill-color: var(--mlc3-text, #0b1324) !important;
  background: none !important;
}
.medexp-tw .mlc3-recent__title svg,
.medexp-scope .mlc3-recent__title svg {
  color: var(--mlc3-brand-blue, #1a4f9c);
}
.medexp-tw .mlc3-recent__more,
.medexp-scope .mlc3-recent__more {
  font: var(--mlc3-fw-bold, 700) 13px/1 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .15s ease;
}
.medexp-tw .mlc3-recent__more:hover,
.medexp-scope .mlc3-recent__more:hover {
  color: var(--mlc3-brand-teal, #00a676) !important;
}

.medexp-tw .mlc3-recent__list,
.medexp-scope .mlc3-recent__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.medexp-tw .mlc3-recent__item,
.medexp-scope .mlc3-recent__item {
  display: grid !important;
  grid-template-columns: 32px 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: background .15s ease, transform .1s var(--mlc3-ease-snap) !important;
}
.medexp-tw .mlc3-recent__item:hover,
.medexp-scope .mlc3-recent__item:hover {
  background: var(--mlc3-surface-2, #f8fbfd) !important;
}
.medexp-tw .mlc3-recent__icon,
.medexp-scope .mlc3-recent__icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--mlc3-brand-teal-soft, #e6f7f1);
  color: var(--mlc3-brand-teal-dark, #007e5a);
  display: grid; place-items: center;
  flex: none;
}
.medexp-tw .mlc3-recent__icon svg,
.medexp-scope .mlc3-recent__icon svg { width: 16px; height: 16px; }
.medexp-tw .mlc3-recent__icon--lesson,
.medexp-scope .mlc3-recent__icon--lesson {
  background: var(--mlc3-brand-blue-soft, #e9eef9);
  color: var(--mlc3-brand-blue, #1a4f9c);
}
.medexp-tw .mlc3-recent__icon--cards,
.medexp-scope .mlc3-recent__icon--cards {
  background: #ede9fe; color: #7c3aed;
}
.medexp-tw .mlc3-recent__body,
.medexp-scope .mlc3-recent__body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.medexp-tw .mlc3-recent__row-title,
.medexp-scope .mlc3-recent__row-title {
  font: var(--mlc3-fw-bold, 700) 14px/1.3 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-text, #0b1324) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.medexp-tw .mlc3-recent__row-sub,
.medexp-scope .mlc3-recent__row-sub {
  font: var(--mlc3-fw-medium, 500) 12px/1.4 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
}
.medexp-tw .mlc3-recent__score,
.medexp-scope .mlc3-recent__score {
  font: var(--mlc3-fw-display, 800) 13px/1 'Rethink Sans', sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--mlc3-surface-2, #f8fbfd);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  color: var(--mlc3-text-soft, #1f2937);
  white-space: nowrap;
  flex: none;
}
.medexp-tw .mlc3-recent__score.is-good,
.medexp-scope .mlc3-recent__score.is-good {
  color: var(--mlc3-success, #16a34a);
  border-color: rgba(22,163,74,.30);
  background: rgba(22,163,74,.08);
}
.medexp-tw .mlc3-recent__score.is-warn,
.medexp-scope .mlc3-recent__score.is-warn {
  color: var(--mlc3-warning, #f59e0b);
  border-color: rgba(245,158,11,.30);
  background: rgba(245,158,11,.10);
}

.medexp-tw .mlc3-recent__empty,
.medexp-scope .mlc3-recent__empty {
  text-align: center;
  padding: 24px 16px;
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.medexp-tw .mlc3-recent__empty-icon,
.medexp-scope .mlc3-recent__empty-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--mlc3-surface-2, #f8fbfd);
  color: var(--mlc3-faint, #94a3b8);
  display: grid; place-items: center;
  margin-bottom: 4px;
}
.medexp-tw .mlc3-recent__empty-icon svg,
.medexp-scope .mlc3-recent__empty-icon svg { width: 22px; height: 22px; }
.medexp-tw .mlc3-recent__empty-title,
.medexp-scope .mlc3-recent__empty-title {
  font: var(--mlc3-fw-bold, 700) 14px/1.3 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-text, #0b1324) !important;
  margin: 0 !important;
}
.medexp-tw .mlc3-recent__empty-sub,
.medexp-scope .mlc3-recent__empty-sub {
  font: var(--mlc3-fw-medium, 500) 12px/1.4 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  margin: 0 !important;
  max-width: 32ch;
}

/* ---------------------------------------------------------------
 * 10. Step 6 — Mochi character inside the briefing card avatar.
 *     The SVG sits as a sibling to the existing emoji span; the
 *     briefing JS keeps writing emoji into the span (we hide it),
 *     so typewriter/history/refresh/dismiss all keep working.
 *     Animations layered on the existing class hooks:
 *       • .is-mochi-waved on .tw-briefingCard → wave keyframe
 *       • .is-loading on .tw-briefingCard      → fast blink ("thinking")
 *       • Always-on idle bob + blink           → mlc3-mochi-bob / -blink
 * --------------------------------------------------------------- */
.medexp-tw .tw-briefingCard__avatar.mlc3-mochi-host,
.medexp-scope .tw-briefingCard__avatar.mlc3-mochi-host {
  position: relative !important;
  background: transparent !important;  /* let Mochi shine without the legacy ring */
  box-shadow: 0 4px 14px rgba(0, 166, 118, 0.22) !important;
  width: 52px !important;
  height: 52px !important;
  overflow: visible !important;
}
/* Hide the emoji span — JS keeps writing to it harmlessly */
.medexp-tw .tw-briefingCard__avatar.mlc3-mochi-host .tw-briefingCard__avatarEmoji,
.medexp-scope .tw-briefingCard__avatar.mlc3-mochi-host .tw-briefingCard__avatarEmoji {
  display: none !important;
  font-size: 0 !important;
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
/* Mochi SVG fills the avatar circle and bobs/blinks always */
.medexp-tw .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi--briefing,
.medexp-scope .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi--briefing {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  filter: drop-shadow(0 6px 14px rgba(0,166,118,.30));
  animation: mlc3-mochi-bob 3s ease infinite alternate;
  transform-origin: center 80%;
  cursor: pointer;
  transition: transform .15s var(--mlc3-ease-snap);
}
.medexp-tw .tw-briefingCard__avatar.mlc3-mochi-host:hover .mlc3-mochi--briefing,
.medexp-scope .tw-briefingCard__avatar.mlc3-mochi-host:hover .mlc3-mochi--briefing {
  transform: scale(1.08) rotate(-2deg);
}
.medexp-tw .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi-eye-l,
.medexp-scope .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi-eye-l,
.medexp-tw .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi-eye-r,
.medexp-scope .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi-eye-r {
  transform-origin: center;
  animation: mlc3-mochi-blink 4.5s ease infinite;
}
.medexp-tw .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi-eye-r,
.medexp-scope .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi-eye-r {
  animation-delay: .05s;
}

/* Wave on briefing load — re-uses the existing medexpMochiWave keyframe
   defined in tw-dashboard.css (line 4504). Override default wave-target
   so the SVG waves instead of the (hidden) emoji. */
.medexp-tw .tw-briefingCard.is-mochi-waved:not(.is-expanded) .mlc3-mochi--briefing,
.medexp-scope .tw-briefingCard.is-mochi-waved:not(.is-expanded) .mlc3-mochi--briefing {
  animation:
    medexpMochiWave .9s cubic-bezier(.34,1.56,.64,1) .05s 1,
    mlc3-mochi-bob 3s ease 1.05s infinite alternate;
}

/* "Thinking" — faster blinking + a soft glow while the briefing fetches.
   Triggers on .tw-briefingCard.is-loading (existing class hook). */
.medexp-tw .tw-briefingCard.is-loading .mlc3-mochi--briefing .mlc3-mochi-eye-l,
.medexp-scope .tw-briefingCard.is-loading .mlc3-mochi--briefing .mlc3-mochi-eye-l,
.medexp-tw .tw-briefingCard.is-loading .mlc3-mochi--briefing .mlc3-mochi-eye-r,
.medexp-scope .tw-briefingCard.is-loading .mlc3-mochi--briefing .mlc3-mochi-eye-r {
  animation: mlc3-mochi-blink 1.2s ease infinite !important;
}
.medexp-tw .tw-briefingCard.is-loading .mlc3-mochi-host,
.medexp-scope .tw-briefingCard.is-loading .mlc3-mochi-host {
  box-shadow: 0 0 0 3px rgba(0, 166, 118, .14), 0 6px 18px -2px rgba(0, 166, 118, .35) !important;
  transition: box-shadow .25s ease;
}

/* Initial appear — gentle spring-in on first paint (only the Mochi, not card) */
.medexp-tw .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi--briefing,
.medexp-scope .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi--briefing {
  animation:
    mlc3-mochi-spring-in .55s var(--mlc3-ease-spring) both,
    mlc3-mochi-bob 3s ease .55s infinite alternate;
}
@keyframes mlc3-mochi-spring-in {
  from { opacity: 0; transform: scale(.4) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(1.10) rotate(4deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Reduced motion — keep Mochi static */
@media (prefers-reduced-motion: reduce) {
  .medexp-tw .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi--briefing,
  .medexp-scope .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi--briefing,
  .medexp-tw .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi-eye-l,
  .medexp-scope .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi-eye-l,
  .medexp-tw .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi-eye-r,
  .medexp-scope .tw-briefingCard__avatar.mlc3-mochi-host .mlc3-mochi-eye-r {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------
 * 11. Step 7 — Today's Plan merge: stage mark-done toggles + sub-actions.
 *     The legacy duplicate widget is hidden; the storyboard becomes the
 *     single source of truth for daily checklist state.
 * --------------------------------------------------------------- */

/* Hide the legacy Today's Plan + Goals cards — storyboard absorbs them. */
.medexp-tw .tw-todayPlanCard,
.medexp-scope .tw-todayPlanCard,
.medexp-tw .tw-goalsCard,
.medexp-scope .tw-goalsCard {
  display: none !important;
}
/* Collapse the parent grid row if both cards are hidden, to avoid an empty
   grid row taking space. The legacy markup wraps both in a .tw-grid-12. */
.medexp-tw .tw-grid-12:has(> .tw-todayPlanCard:only-child),
.medexp-tw .tw-grid-12:has(> .tw-todayPlanCard + .tw-goalsCard:last-child),
.medexp-scope .tw-grid-12:has(> .tw-todayPlanCard:only-child),
.medexp-scope .tw-grid-12:has(> .tw-todayPlanCard + .tw-goalsCard:last-child) {
  display: none !important;
}

/* Stage head needs to flex items horizontally (was margin-only previously) */
.medexp-tw .mlc3-plan .mlc3-stage__head,
.medexp-scope .mlc3-plan .mlc3-stage__head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap;
}

/* Mark-done toggle — circular button on the right of the stage head */
.medexp-tw .mlc3-stage__mark,
.medexp-scope .mlc3-stage__mark {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px 4px 6px !important;
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  border-radius: 999px !important;
  cursor: pointer;
  font: var(--mlc3-fw-bold, 700) 11px/1 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s var(--mlc3-ease-snap) !important;
}
.medexp-tw .mlc3-stage__mark:hover,
.medexp-scope .mlc3-stage__mark:hover {
  background: var(--mlc3-surface-2, #f8fbfd) !important;
  border-color: var(--mlc3-brand-teal, #00a676) !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
}
.medexp-tw .mlc3-stage__mark:active,
.medexp-scope .mlc3-stage__mark:active {
  transform: scale(.94);
}
.medexp-tw .mlc3-stage__mark-circle,
.medexp-scope .mlc3-stage__mark-circle {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--mlc3-border, #e5e9f0);
  display: inline-grid; place-items: center;
  color: transparent;
  transition: all .2s var(--mlc3-ease-spring);
  flex: none;
}
.medexp-tw .mlc3-stage__mark-circle svg,
.medexp-scope .mlc3-stage__mark-circle svg {
  width: 10px; height: 10px;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .18s ease, transform .25s var(--mlc3-ease-spring);
}
.medexp-tw .mlc3-stage__mark[data-plan-done="1"] .mlc3-stage__mark-circle,
.medexp-scope .mlc3-stage__mark[data-plan-done="1"] .mlc3-stage__mark-circle {
  background: var(--mlc3-success, #16a34a);
  border-color: var(--mlc3-success, #16a34a);
  color: #fff;
}
.medexp-tw .mlc3-stage__mark[data-plan-done="1"] .mlc3-stage__mark-circle svg,
.medexp-scope .mlc3-stage__mark[data-plan-done="1"] .mlc3-stage__mark-circle svg {
  opacity: 1;
  transform: scale(1);
}
.medexp-tw .mlc3-stage__mark[data-plan-done="1"],
.medexp-scope .mlc3-stage__mark[data-plan-done="1"] {
  background: rgba(22,163,74,.08) !important;
  border-color: rgba(22,163,74,.30) !important;
  color: #166534 !important;
  -webkit-text-fill-color: #166534 !important;
}
.medexp-tw .mlc3-stage__mark[data-plan-busy="1"],
.medexp-scope .mlc3-stage__mark[data-plan-busy="1"] {
  opacity: .7;
  pointer-events: none;
}
/* Reposition CTA row at the bottom of the stage card */
.medexp-tw .mlc3-stage__cta-row,
.medexp-scope .mlc3-stage__cta-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sub-actions row inside Practice stage (review_incorrect + case_1) */
.medexp-tw .mlc3-stage__subs,
.medexp-scope .mlc3-stage__subs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}
.medexp-tw .mlc3-sub-action,
.medexp-scope .mlc3-sub-action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px 4px 5px !important;
  border-radius: 999px !important;
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  font: var(--mlc3-fw-semi, 600) 12px/1 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-text-soft, #1f2937) !important;
  -webkit-text-fill-color: var(--mlc3-text-soft, #1f2937) !important;
  text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease, transform .1s var(--mlc3-ease-snap) !important;
}
.medexp-tw .mlc3-sub-action:hover,
.medexp-scope .mlc3-sub-action:hover {
  background: var(--mlc3-surface-2, #f8fbfd) !important;
  border-color: var(--mlc3-brand-teal, #00a676) !important;
}
.medexp-tw .mlc3-sub-action.is-done,
.medexp-scope .mlc3-sub-action.is-done {
  background: rgba(22,163,74,.06) !important;
  border-color: rgba(22,163,74,.25) !important;
  color: #166534 !important;
  -webkit-text-fill-color: #166534 !important;
}
.medexp-tw .mlc3-sub-action__mark,
.medexp-scope .mlc3-sub-action__mark {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--mlc3-border, #e5e9f0);
  background: transparent;
  display: inline-grid; place-items: center;
  color: transparent;
  cursor: pointer;
  padding: 0;
  flex: none;
  transition: all .2s var(--mlc3-ease-spring);
}
.medexp-tw .mlc3-sub-action__mark svg,
.medexp-scope .mlc3-sub-action__mark svg {
  opacity: 0;
  transform: scale(.4);
  transition: opacity .18s ease, transform .2s var(--mlc3-ease-spring);
}
.medexp-tw .mlc3-sub-action__mark[data-plan-done="1"],
.medexp-scope .mlc3-sub-action__mark[data-plan-done="1"] {
  background: var(--mlc3-success, #16a34a);
  border-color: var(--mlc3-success, #16a34a);
  color: #fff;
}
.medexp-tw .mlc3-sub-action__mark[data-plan-done="1"] svg,
.medexp-scope .mlc3-sub-action__mark[data-plan-done="1"] svg {
  opacity: 1; transform: scale(1);
}
.medexp-tw .mlc3-sub-action__mark[data-plan-busy="1"],
.medexp-scope .mlc3-sub-action__mark[data-plan-busy="1"] {
  opacity: .7;
  pointer-events: none;
}

/* Stage-card now uses flex-column so the CTA row sticks to bottom */
.medexp-tw .mlc3-plan .mlc3-stage,
.medexp-scope .mlc3-plan .mlc3-stage {
  display: flex !important;
  flex-direction: column !important;
}

/* Plan progress pill — celebrate when complete */
.medexp-tw .mlc3-plan__pill[data-mlc3-complete="1"],
.medexp-scope .mlc3-plan__pill[data-mlc3-complete="1"] {
  background: linear-gradient(135deg, rgba(0,166,118,.18), rgba(22,163,74,.18)) !important;
  color: #064e3b !important;
}

/* ---------------------------------------------------------------
 * 12. Step 8 — State branches: welcome, no-enrollment hero,
 *     renewal banner skin, auth gate skin.
 * --------------------------------------------------------------- */

/* ───── Step 8a — Fresh-start welcome card (replaces resume hero) ───── */
.medexp-tw .mlc3-welcome,
.medexp-scope .mlc3-welcome {
  position: relative;
  border-radius: var(--mlc3-r-2xl, 28px);
  background: linear-gradient(135deg, #1a4f9c 0%, #0b1324 100%);
  background-size: 200% 200%;
  animation: mlc3-hero-pan 16s ease infinite alternate, mlc3-fade-up .55s var(--mlc3-ease-smooth) both;
  color: #fff;
  padding: clamp(20px, 2.4vw + 8px, 36px);
  margin: 0 0 22px;
  overflow: hidden;
  box-shadow:
    0 14px 38px -14px rgba(26,79,156,.50),
    0 28px 56px -28px rgba(11,19,36,.60);
  isolation: isolate;
}
.medexp-tw .mlc3-welcome::before,
.medexp-scope .mlc3-welcome::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 400px at 90% 10%, rgba(0,166,118,.22) 0%, transparent 60%),
    radial-gradient(500px 300px at 10% 100%, rgba(255,255,255,.06) 0%, transparent 60%);
  pointer-events: none;
}
.medexp-tw .mlc3-welcome__inner,
.medexp-scope .mlc3-welcome__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 800px) {
  .medexp-tw .mlc3-welcome__inner,
  .medexp-scope .mlc3-welcome__inner {
    grid-template-columns: 1.6fr auto;
  }
}
.medexp-tw .mlc3-welcome__main,
.medexp-scope .mlc3-welcome__main { min-width: 0; }
.medexp-tw .mlc3-welcome__kicker,
.medexp-scope .mlc3-welcome__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  font: var(--mlc3-fw-bold, 700) 11px/1 'Rethink Sans', sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 14px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.medexp-tw .mlc3-welcome__dot,
.medexp-scope .mlc3-welcome__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c6f6d5;
  box-shadow: 0 0 0 4px rgba(198,246,213,.25);
  animation: mlc3-pulse 2s ease infinite;
}
.medexp-tw .mlc3-welcome__title,
.medexp-scope .mlc3-welcome__title {
  margin: 0 0 8px !important;
  font: var(--mlc3-fw-display, 800) clamp(1.5rem, 2.2vw + .4rem, 2.2rem)/1.15 'Rethink Sans', sans-serif !important;
  letter-spacing: -.014em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.10);
}
.medexp-tw .mlc3-welcome__sub,
.medexp-scope .mlc3-welcome__sub {
  margin: 0 0 22px !important;
  font: var(--mlc3-fw-medium, 500) 16px/1.5 'Rethink Sans', sans-serif !important;
  color: rgba(255,255,255,.86) !important;
  -webkit-text-fill-color: rgba(255,255,255,.86) !important;
  max-width: 56ch;
}
.medexp-tw .mlc3-welcome__steps,
.medexp-scope .mlc3-welcome__steps {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  .medexp-tw .mlc3-welcome__steps,
  .medexp-scope .mlc3-welcome__steps { grid-template-columns: 1fr; }
}
.medexp-tw .mlc3-welcome__step,
.medexp-scope .mlc3-welcome__step {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  font: var(--mlc3-fw-medium, 500) 13px/1.3 'Rethink Sans', sans-serif !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.medexp-tw .mlc3-welcome__step.is-active,
.medexp-scope .mlc3-welcome__step.is-active {
  background: rgba(0,166,118,.30) !important;
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 8px 22px -10px rgba(0,166,118,.50);
}
.medexp-tw .mlc3-welcome__step-num,
.medexp-scope .mlc3-welcome__step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: grid; place-items: center;
  font: var(--mlc3-fw-display, 800) 13px/1 'Rethink Sans', sans-serif;
  color: #fff;
  flex: none;
}
.medexp-tw .mlc3-welcome__step.is-active .mlc3-welcome__step-num,
.medexp-scope .mlc3-welcome__step.is-active .mlc3-welcome__step-num {
  background: #fff !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
}
.medexp-tw .mlc3-welcome__step strong,
.medexp-scope .mlc3-welcome__step strong {
  display: block;
  font-weight: var(--mlc3-fw-display, 800) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.medexp-tw .mlc3-welcome__step-sub,
.medexp-scope .mlc3-welcome__step-sub {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.70) !important;
  -webkit-text-fill-color: rgba(255,255,255,.70) !important;
  margin-top: 2px;
}
.medexp-tw .mlc3-welcome__cta-row,
.medexp-scope .mlc3-welcome__cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.medexp-tw .mlc3-welcome__cta,
.medexp-scope .mlc3-welcome__cta {
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  font: var(--mlc3-fw-display, 800) 16px/1 'Rethink Sans', sans-serif !important;
  border: 0 !important; cursor: pointer; text-decoration: none !important;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.4) !important;
  transition: transform .12s var(--mlc3-ease-snap), box-shadow .15s ease !important;
}
.medexp-tw .mlc3-welcome__cta:hover,
.medexp-scope .mlc3-welcome__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.5) !important;
}
.medexp-tw .mlc3-welcome__cta-arrow,
.medexp-scope .mlc3-welcome__cta-arrow { transition: transform .15s var(--mlc3-ease-spring); }
.medexp-tw .mlc3-welcome__cta:hover .mlc3-welcome__cta-arrow,
.medexp-scope .mlc3-welcome__cta:hover .mlc3-welcome__cta-arrow { transform: translateX(4px); }
.medexp-tw .mlc3-welcome__cta-ghost,
.medexp-scope .mlc3-welcome__cta-ghost {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font: var(--mlc3-fw-bold, 700) 14px/1 'Rethink Sans', sans-serif !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s ease !important;
}
.medexp-tw .mlc3-welcome__cta-ghost:hover,
.medexp-scope .mlc3-welcome__cta-ghost:hover {
  background: rgba(255,255,255,.22) !important;
}
/* Mochi (large) on welcome card */
.medexp-tw .mlc3-welcome__mochi-wrap,
.medexp-scope .mlc3-welcome__mochi-wrap {
  display: grid; place-items: center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.medexp-tw .mlc3-mochi--welcome,
.medexp-scope .mlc3-mochi--welcome {
  width: 140px; height: 140px;
  filter: drop-shadow(0 14px 30px rgba(0,166,118,.40));
  animation: mlc3-mochi-bob 3s ease infinite alternate;
}

/* ───── Step 8c — No-enrollment conversion hero ───── */
.medexp-tw .mlc3-noenroll,
.medexp-scope .mlc3-noenroll {
  position: relative;
  border-radius: var(--mlc3-r-2xl, 28px);
  background: linear-gradient(135deg, #00a676 0%, #1a4f9c 100%);
  background-size: 200% 200%;
  animation: mlc3-hero-pan 14s ease infinite alternate, mlc3-fade-up .55s var(--mlc3-ease-smooth) both;
  color: #fff;
  padding: clamp(20px, 2.4vw + 8px, 36px);
  margin: 0 0 22px;
  overflow: hidden;
  box-shadow:
    0 14px 38px -14px rgba(0,166,118,.50),
    0 28px 56px -28px rgba(26,79,156,.40);
  isolation: isolate;
}
.medexp-tw .mlc3-noenroll::before,
.medexp-scope .mlc3-noenroll::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px 400px at 90% 10%, rgba(255,255,255,.18) 0%, transparent 60%);
  pointer-events: none;
}
.medexp-tw .mlc3-noenroll__inner,
.medexp-scope .mlc3-noenroll__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 900px) {
  .medexp-tw .mlc3-noenroll__inner,
  .medexp-scope .mlc3-noenroll__inner {
    grid-template-columns: 1.4fr 1fr;
  }
}
.medexp-tw .mlc3-noenroll__kicker,
.medexp-scope .mlc3-noenroll__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  font: var(--mlc3-fw-bold, 700) 11px/1 'Rethink Sans', sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 14px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.medexp-tw .mlc3-noenroll__dot,
.medexp-scope .mlc3-noenroll__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #c6f6d5;
  box-shadow: 0 0 0 4px rgba(198,246,213,.25);
  animation: mlc3-pulse 2s ease infinite;
}
.medexp-tw .mlc3-noenroll__title,
.medexp-scope .mlc3-noenroll__title {
  margin: 0 0 8px !important;
  font: var(--mlc3-fw-display, 800) clamp(1.6rem, 2.6vw + .5rem, 2.4rem)/1.15 'Rethink Sans', sans-serif !important;
  letter-spacing: -.014em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}
.medexp-tw .mlc3-noenroll__sub,
.medexp-scope .mlc3-noenroll__sub {
  margin: 0 0 22px !important;
  font: var(--mlc3-fw-medium, 500) 16px/1.5 'Rethink Sans', sans-serif !important;
  color: rgba(255,255,255,.86) !important;
  -webkit-text-fill-color: rgba(255,255,255,.86) !important;
  max-width: 56ch;
}
.medexp-tw .mlc3-noenroll__cta-row,
.medexp-scope .mlc3-noenroll__cta-row {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
}
.medexp-tw .mlc3-noenroll__cta,
.medexp-scope .mlc3-noenroll__cta {
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  font: var(--mlc3-fw-display, 800) 16px/1 'Rethink Sans', sans-serif !important;
  border: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.4) !important;
  transition: transform .12s var(--mlc3-ease-snap), box-shadow .15s ease !important;
}
.medexp-tw .mlc3-noenroll__cta:hover,
.medexp-scope .mlc3-noenroll__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.5) !important;
}
.medexp-tw .mlc3-noenroll__cta-arrow,
.medexp-scope .mlc3-noenroll__cta-arrow { transition: transform .15s var(--mlc3-ease-spring); }
.medexp-tw .mlc3-noenroll__cta:hover .mlc3-noenroll__cta-arrow,
.medexp-scope .mlc3-noenroll__cta:hover .mlc3-noenroll__cta-arrow { transform: translateX(4px); }
.medexp-tw .mlc3-noenroll__cta-ghost,
.medexp-scope .mlc3-noenroll__cta-ghost {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font: var(--mlc3-fw-bold, 700) 14px/1 'Rethink Sans', sans-serif !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  text-decoration: none !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s ease !important;
}
.medexp-tw .mlc3-noenroll__cta-ghost:hover,
.medexp-scope .mlc3-noenroll__cta-ghost:hover {
  background: rgba(255,255,255,.22) !important;
}

/* Trust ribbon — 3 stat blocks */
.medexp-tw .mlc3-trust-ribbon,
.medexp-scope .mlc3-trust-ribbon {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 8px;
}
.medexp-tw .mlc3-trust-stat,
.medexp-scope .mlc3-trust-stat {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.86);
}
.medexp-tw .mlc3-trust-stat__num,
.medexp-scope .mlc3-trust-stat__num {
  font: var(--mlc3-fw-display, 800) 22px/1 'Rethink Sans', sans-serif !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.014em;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}
.medexp-tw .mlc3-trust-stat__lbl,
.medexp-scope .mlc3-trust-stat__lbl {
  color: rgba(255,255,255,.86);
  line-height: 1.2;
  max-width: 12ch;
}

/* Right-side testimonial */
.medexp-tw .mlc3-noenroll__side,
.medexp-scope .mlc3-noenroll__side {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  padding: 22px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.medexp-tw .mlc3-noenroll__side-stars,
.medexp-scope .mlc3-noenroll__side-stars {
  color: #fbbf24;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.medexp-tw .mlc3-noenroll__quote,
.medexp-scope .mlc3-noenroll__quote {
  margin: 0 0 14px !important;
  font: var(--mlc3-fw-semi, 600) 15px/1.55 'Rethink Sans', sans-serif !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.medexp-tw .mlc3-noenroll__author,
.medexp-scope .mlc3-noenroll__author {
  display: flex; align-items: center; gap: 10px;
}
.medexp-tw .mlc3-noenroll__avatar,
.medexp-scope .mlc3-noenroll__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  display: grid; place-items: center;
  font: var(--mlc3-fw-display, 800) 13px/1 'Rethink Sans', sans-serif;
  flex: none;
}
.medexp-tw .mlc3-noenroll__author-name,
.medexp-scope .mlc3-noenroll__author-name {
  font: var(--mlc3-fw-bold, 700) 14px/1.2 'Rethink Sans', sans-serif !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.medexp-tw .mlc3-noenroll__author-context,
.medexp-scope .mlc3-noenroll__author-context {
  font-size: 12px;
  color: rgba(255,255,255,.78);
  margin-top: 2px;
}

/* ───── Step 8b — Skin existing renewal banner ───── */
.medexp-tw .tw-renewalBanner,
.medexp-scope .tw-renewalBanner {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border: 1px solid #f59e0b !important;
  border-radius: var(--mlc3-r-lg, 18px) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 22px !important;
  box-shadow: var(--mlc3-shadow-1) !important;
  animation: mlc3-fade-up .4s var(--mlc3-ease-smooth) both;
}
.medexp-tw .tw-renewalBanner__icon,
.medexp-scope .tw-renewalBanner__icon {
  width: 40px !important; height: 40px !important;
  border-radius: 12px !important;
  background: rgba(245,158,11,.20) !important;
  color: #92400e !important;
  display: grid !important; place-items: center !important;
  font-size: 20px !important;
  flex: none !important;
}
.medexp-tw .tw-renewalBanner__text,
.medexp-scope .tw-renewalBanner__text {
  flex: 1 !important;
  color: #92400e !important;
  font: var(--mlc3-fw-medium, 500) 14px/1.5 'Rethink Sans', sans-serif !important;
}
.medexp-tw .tw-renewalBanner__text strong,
.medexp-scope .tw-renewalBanner__text strong {
  font-weight: var(--mlc3-fw-display, 800) !important;
}
.medexp-tw .tw-renewalBanner__link,
.medexp-scope .tw-renewalBanner__link {
  color: #92400e !important;
  font-weight: var(--mlc3-fw-display, 800) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}
.medexp-tw .tw-renewalBanner__dismiss,
.medexp-scope .tw-renewalBanner__dismiss {
  margin-left: auto !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 1.4rem !important;
  color: #92400e !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 6px !important;
  border-radius: var(--mlc3-r-xs, 8px) !important;
  transition: background .15s ease !important;
}
.medexp-tw .tw-renewalBanner__dismiss:hover,
.medexp-scope .tw-renewalBanner__dismiss:hover {
  background: rgba(146, 64, 14, .10) !important;
}

/* ───── Step 8d — Skin existing auth gate ───── */
.medexp-tw .tw-authGate,
.medexp-scope .tw-authGate {
  background: transparent !important;
  padding: 40px 20px !important;
}
.medexp-tw .tw-authGate .tw-authBrandLogo,
.medexp-scope .tw-authGate .tw-authBrandLogo {
  filter: drop-shadow(0 6px 16px rgba(0,166,118,.20));
}
.medexp-tw .tw-authGate .tw-kicker,
.medexp-scope .tw-authGate .tw-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px !important;
  background: var(--mlc3-brand-teal-soft, #e6f7f1) !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  border-radius: 999px !important;
  font: var(--mlc3-fw-bold, 700) 11px/1 'Rethink Sans', sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
.medexp-tw .tw-authGate .tw-authTitle,
.medexp-scope .tw-authGate .tw-authTitle {
  margin: 0 0 8px !important;
  font: var(--mlc3-fw-display, 800) clamp(1.7rem, 3vw + .5rem, 2.6rem)/1.1 'Rethink Sans', sans-serif !important;
  letter-spacing: -.018em !important;
}
.medexp-tw .tw-authGate .tw-authSubtitle,
.medexp-scope .tw-authGate .tw-authSubtitle {
  font-size: 16px !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  max-width: 60ch;
  line-height: 1.5;
}
.medexp-tw .tw-authGate .tw-authCard,
.medexp-scope .tw-authGate .tw-authCard {
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  border-radius: var(--mlc3-r-xl, 22px) !important;
  padding: 24px !important;
  box-shadow: var(--mlc3-shadow-1) !important;
  transition: transform .15s var(--mlc3-ease-snap), box-shadow .15s ease, border-color .15s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
.medexp-tw .tw-authGate .tw-authCard:hover,
.medexp-scope .tw-authGate .tw-authCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--mlc3-shadow-3) !important;
  border-color: rgba(0,166,118,.30) !important;
}
.medexp-tw .tw-authGate .tw-authCard__icon,
.medexp-scope .tw-authGate .tw-authCard__icon {
  width: 48px !important; height: 48px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--mlc3-brand-teal-soft, #e6f7f1), rgba(0,166,118,.06)) !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  display: grid !important; place-items: center !important;
  margin-bottom: 14px !important;
}
.medexp-tw .tw-authGate .tw-authCard__title,
.medexp-scope .tw-authGate .tw-authCard__title {
  font: var(--mlc3-fw-display, 800) 18px/1.2 'Rethink Sans', sans-serif !important;
  letter-spacing: -.012em !important;
  margin-bottom: 6px !important;
  color: var(--mlc3-text, #0b1324) !important;
}
.medexp-tw .tw-authGate .tw-authCard__body,
.medexp-scope .tw-authGate .tw-authCard__body {
  font-size: 14px !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  line-height: 1.5 !important;
  flex: 1;
  margin-bottom: 18px !important;
}
.medexp-tw .tw-authGate .tw-authCard .tw-btn-primary,
.medexp-scope .tw-authGate .tw-authCard .tw-btn-primary {
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0 !important;
  font-weight: var(--mlc3-fw-display, 800) !important;
  box-shadow: 0 8px 20px -8px rgba(0,166,118,.55) !important;
  border-radius: 12px !important;
  padding: 11px 18px !important;
}
.medexp-tw .tw-authGate .tw-authCard .tw-btn-secondary,
.medexp-scope .tw-authGate .tw-authCard .tw-btn-secondary {
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  color: var(--mlc3-text, #0b1324) !important;
  -webkit-text-fill-color: var(--mlc3-text, #0b1324) !important;
  border-radius: 12px !important;
  padding: 11px 18px !important;
}
.medexp-tw .tw-authGate .tw-authFinePrint,
.medexp-scope .tw-authGate .tw-authFinePrint {
  margin-top: 22px !important;
  font-size: 14px !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  text-align: center !important;
}
.medexp-tw .tw-authGate .tw-authLink,
.medexp-scope .tw-authGate .tw-authLink {
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  font-weight: var(--mlc3-fw-bold, 700) !important;
  text-decoration: none !important;
}
.medexp-tw .tw-authGate .tw-authLink:hover,
.medexp-scope .tw-authGate .tw-authLink:hover {
  text-decoration: underline !important;
}

/* ---------------------------------------------------------------
 * 13. Step 10 — Mobile bottom-tab nav (floating, ≤768px only).
 *     Sourced from existing .tw-sidebar nav links by JS.
 * --------------------------------------------------------------- */
body .mlc3-bottom-nav {
  position: fixed !important;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 850;
  display: none;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  border-radius: 22px;
  padding: 6px;
  padding-bottom: max(env(safe-area-inset-bottom, 0), 6px);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .06),
    0 18px 40px -12px rgba(15, 23, 42, .20);
  animation: mlc3-bottomnav-in .35s var(--mlc3-ease-spring) both;
}
@keyframes mlc3-bottomnav-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (max-width: 768px) {
  body .mlc3-bottom-nav { display: flex; }
  body.mlc3-has-bottom-nav .medexp-dashboardPage { padding-bottom: 84px; }
  body.mlc3-has-bottom-nav .medexp-dashboardPage .tw-shell { min-height: 100vh; }
}
.mlc3-bottom-nav__btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 8px 4px;
  border-radius: 16px;
  background: transparent;
  border: 0;
  color: var(--mlc3-muted, #5f6b7a);
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a);
  font: var(--mlc3-fw-bold, 700) 10px/1 'Rethink Sans', sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background .15s ease,
    color .15s ease,
    transform .08s var(--mlc3-ease-snap);
}
.mlc3-bottom-nav__btn:active { transform: scale(.96); }
.mlc3-bottom-nav__btn[aria-current="page"],
.mlc3-bottom-nav__btn.is-active {
  background: linear-gradient(135deg, rgba(0, 166, 118, .14) 0%, rgba(26, 79, 156, .06) 100%);
  color: var(--mlc3-brand-teal-dark, #007e5a);
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a);
}
.mlc3-bottom-nav__icon {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
}
.mlc3-bottom-nav__icon svg {
  width: 100%; height: 100%;
}
.mlc3-bottom-nav__label {
  white-space: nowrap;
  font-weight: var(--mlc3-fw-bold, 700);
  letter-spacing: 0;
}

/* ---------------------------------------------------------------
 * 14. Step 10 — Sidebar bottom-sheet on ≤768px.
 *     Existing .tw-sidebar already toggles open via .is-nav-open
 *     class on .tw-shell (handled by dashboard.js). We just restyle.
 * --------------------------------------------------------------- */
@media (max-width: 768px) {
  .medexp-tw .tw-sidebar,
  .medexp-scope .tw-sidebar {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 86vh !important;
    overflow-y: auto !important;
    border-radius: var(--mlc3-r-2xl, 28px) var(--mlc3-r-2xl, 28px) 0 0 !important;
    border-right: 0 !important;
    border-top: 1px solid var(--mlc3-border, #e5e9f0) !important;
    transform: translateY(100%) !important;
    transition: transform .28s var(--mlc3-ease-snap) !important;
    z-index: 900 !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0), 1rem) !important;
    box-shadow: 0 -20px 50px rgba(8, 14, 30, .20) !important;
    background: var(--mlc3-surface, #fff) !important;
  }
  .medexp-tw .tw-shell.is-nav-open .tw-sidebar,
  .medexp-scope .tw-shell.is-nav-open .tw-sidebar,
  .medexp-tw .tw-sidebar.is-open,
  .medexp-scope .tw-sidebar.is-open {
    transform: translateY(0) !important;
  }
  /* Drag handle */
  .medexp-tw .tw-sidebar::before,
  .medexp-scope .tw-sidebar::before {
    content: "";
    display: block;
    width: 44px; height: 5px;
    background: rgba(15, 23, 42, .18);
    border-radius: 3px;
    margin: 6px auto 12px;
  }
  /* Existing overlay */
  .medexp-tw .tw-overlay,
  .medexp-scope .tw-overlay {
    background: rgba(8, 14, 30, .55) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* ---------------------------------------------------------------
 * 15. Step 10 — Tap-target enforcement (44×44px minimum on mobile).
 * --------------------------------------------------------------- */
@media (max-width: 768px) {
  .medexp-tw .mlc3-resume__cta,
  .medexp-scope .mlc3-resume__cta,
  .medexp-tw .mlc3-resume__cta-ghost,
  .medexp-scope .mlc3-resume__cta-ghost,
  .medexp-tw .mlc3-welcome__cta,
  .medexp-scope .mlc3-welcome__cta,
  .medexp-tw .mlc3-noenroll__cta,
  .medexp-scope .mlc3-noenroll__cta,
  .medexp-tw .mlc3-stage__cta,
  .medexp-scope .mlc3-stage__cta {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .medexp-tw .mlc3-stage__mark,
  .medexp-scope .mlc3-stage__mark {
    min-height: 36px !important;
  }
  .medexp-tw .mlc3-recent__item,
  .medexp-scope .mlc3-recent__item,
  .medexp-tw .mlc3-focus-card .tw-focusRow,
  .medexp-scope .mlc3-focus-card .tw-focusRow {
    min-height: 48px !important;
  }
  .mlc3-bottom-nav__btn { min-height: 56px !important; min-width: 44px !important; }
}

/* ---------------------------------------------------------------
 * 16. Step 10 — Visible focus rings (keyboard nav).
 *     :focus-visible ensures rings only show for keyboard users,
 *     not on mouse clicks. Brand-teal ring at 3px offset.
 * --------------------------------------------------------------- */
.medexp-tw .mlc3-resume__cta:focus-visible,
.medexp-scope .mlc3-resume__cta:focus-visible,
.medexp-tw .mlc3-resume__cta-ghost:focus-visible,
.medexp-scope .mlc3-resume__cta-ghost:focus-visible,
.medexp-tw .mlc3-welcome__cta:focus-visible,
.medexp-scope .mlc3-welcome__cta:focus-visible,
.medexp-tw .mlc3-welcome__cta-ghost:focus-visible,
.medexp-scope .mlc3-welcome__cta-ghost:focus-visible,
.medexp-tw .mlc3-noenroll__cta:focus-visible,
.medexp-scope .mlc3-noenroll__cta:focus-visible,
.medexp-tw .mlc3-noenroll__cta-ghost:focus-visible,
.medexp-scope .mlc3-noenroll__cta-ghost:focus-visible,
.medexp-tw .mlc3-stage__cta:focus-visible,
.medexp-scope .mlc3-stage__cta:focus-visible,
.medexp-tw .mlc3-stage__mark:focus-visible,
.medexp-scope .mlc3-stage__mark:focus-visible,
.medexp-tw .mlc3-sub-action__mark:focus-visible,
.medexp-scope .mlc3-sub-action__mark:focus-visible,
.medexp-tw .mlc3-recent__item:focus-visible,
.medexp-scope .mlc3-recent__item:focus-visible,
.medexp-tw .mlc3-recent__more:focus-visible,
.medexp-scope .mlc3-recent__more:focus-visible,
.medexp-tw .mlc3-focus-card__cta:focus-visible,
.medexp-scope .mlc3-focus-card__cta:focus-visible,
.medexp-tw .mlc3-metric:focus-visible,
.medexp-scope .mlc3-metric:focus-visible,
.medexp-tw .mlc3-mochi:focus-visible,
.medexp-scope .mlc3-mochi:focus-visible,
.mlc3-bottom-nav__btn:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px var(--mlc3-surface, #fff),
    0 0 0 5px var(--mlc3-brand-teal, #00a676) !important;
}
/* On dark backgrounds (gradient heroes), use a white halo + teal ring. */
.medexp-tw .mlc3-resume .mlc3-resume__cta:focus-visible,
.medexp-scope .mlc3-resume .mlc3-resume__cta:focus-visible,
.medexp-tw .mlc3-welcome .mlc3-welcome__cta:focus-visible,
.medexp-scope .mlc3-welcome .mlc3-welcome__cta:focus-visible,
.medexp-tw .mlc3-noenroll .mlc3-noenroll__cta:focus-visible,
.medexp-scope .mlc3-noenroll .mlc3-noenroll__cta:focus-visible,
.medexp-tw .mlc3-resume .mlc3-resume__cta-ghost:focus-visible,
.medexp-scope .mlc3-resume .mlc3-resume__cta-ghost:focus-visible,
.medexp-tw .mlc3-welcome .mlc3-welcome__cta-ghost:focus-visible,
.medexp-scope .mlc3-welcome .mlc3-welcome__cta-ghost:focus-visible,
.medexp-tw .mlc3-noenroll .mlc3-noenroll__cta-ghost:focus-visible,
.medexp-scope .mlc3-noenroll .mlc3-noenroll__cta-ghost:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .9),
    0 0 0 6px rgba(0, 166, 118, .8) !important;
}

/* ---------------------------------------------------------------
 * 17. Step 10 — prefers-reduced-motion: kill every v3 animation.
 *     Comprehensive disable so motion-sensitive learners get a calm
 *     dashboard with no decorative motion.
 * --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Hero gradient pan (resume, welcome, noenroll) */
  .medexp-tw .mlc3-resume,
  .medexp-scope .mlc3-resume,
  .medexp-tw .mlc3-welcome,
  .medexp-scope .mlc3-welcome,
  .medexp-tw .mlc3-noenroll,
  .medexp-scope .mlc3-noenroll {
    animation: none !important;
    background-size: 100% 100% !important;
  }
  /* Progress bar shimmer */
  .medexp-tw .mlc3-resume__progress::after,
  .medexp-scope .mlc3-resume__progress::after { animation: none !important; }
  /* Progress bar fill (skip the slow grow, render at target instantly) */
  .medexp-tw .mlc3-resume__progress > span,
  .medexp-scope .mlc3-resume__progress > span,
  .medexp-tw .mastery-bar > span,
  .medexp-scope .mastery-bar > span,
  .medexp-tw .mlc3-stage__bar > span,
  .medexp-scope .mlc3-stage__bar > span {
    animation: none !important;
    width: var(--mlc3-target, 50%) !important;
  }
  /* Mochi character */
  .medexp-tw .mlc3-mochi,
  .medexp-scope .mlc3-mochi,
  .medexp-tw .mlc3-mochi--briefing,
  .medexp-scope .mlc3-mochi--briefing,
  .medexp-tw .mlc3-mochi-eye-l,
  .medexp-scope .mlc3-mochi-eye-l,
  .medexp-tw .mlc3-mochi-eye-r,
  .medexp-scope .mlc3-mochi-eye-r,
  .medexp-tw .tw-briefingCard.is-mochi-waved .mlc3-mochi--briefing,
  .medexp-scope .tw-briefingCard.is-mochi-waved .mlc3-mochi--briefing,
  .medexp-tw .tw-briefingCard.is-loading .mlc3-mochi--briefing .mlc3-mochi-eye-l,
  .medexp-scope .tw-briefingCard.is-loading .mlc3-mochi--briefing .mlc3-mochi-eye-l,
  .medexp-tw .tw-briefingCard.is-loading .mlc3-mochi--briefing .mlc3-mochi-eye-r,
  .medexp-scope .tw-briefingCard.is-loading .mlc3-mochi--briefing .mlc3-mochi-eye-r {
    animation: none !important;
    transform: none !important;
  }
  /* Metric milestone badges + spotlight pulse + dot stagger */
  .medexp-tw .mlc3-metric .tw-metric__milestoneBadge,
  .medexp-scope .mlc3-metric .tw-metric__milestoneBadge,
  .medexp-tw .mlc3-metric .tw-metric__trendBadge,
  .medexp-scope .mlc3-metric .tw-metric__trendBadge,
  .medexp-tw .mlc3-metric .tw-metric__speedBadge,
  .medexp-scope .mlc3-metric .tw-metric__speedBadge,
  .medexp-tw .mlc3-metric--streak.is-dots-entering .tw-dot,
  .medexp-scope .mlc3-metric--streak.is-dots-entering .tw-dot,
  .tw-tourSpotlight {
    animation: none !important;
  }
  /* Stage active pan + dot pulse + plan pill pulse */
  .medexp-tw .mlc3-plan__pill-dot,
  .medexp-scope .mlc3-plan__pill-dot,
  .medexp-tw .mlc3-resume__dot,
  .medexp-scope .mlc3-resume__dot,
  .medexp-tw .mlc3-welcome__dot,
  .medexp-scope .mlc3-welcome__dot,
  .medexp-tw .mlc3-noenroll__dot,
  .medexp-scope .mlc3-noenroll__dot {
    animation: none !important;
  }
  /* Section fade-up entrances */
  .medexp-tw .mlc3-resume,
  .medexp-scope .mlc3-resume,
  .medexp-tw .mlc3-plan,
  .medexp-scope .mlc3-plan,
  .medexp-tw .mlc3-metric-strip,
  .medexp-scope .mlc3-metric-strip,
  .medexp-tw .mlc3-split-row,
  .medexp-scope .mlc3-split-row,
  .medexp-tw .mlc3-welcome,
  .medexp-scope .mlc3-welcome,
  .medexp-tw .mlc3-noenroll,
  .medexp-scope .mlc3-noenroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Hover transforms */
  .medexp-tw .mlc3-metric:hover,
  .medexp-scope .mlc3-metric:hover,
  .medexp-tw .mlc3-recent__item:hover,
  .medexp-scope .mlc3-recent__item:hover,
  .medexp-tw .mlc3-stage:hover,
  .medexp-scope .mlc3-stage:hover,
  .medexp-tw .mlc3-resume__cta:hover,
  .medexp-scope .mlc3-resume__cta:hover,
  .medexp-tw .mlc3-welcome__cta:hover,
  .medexp-scope .mlc3-welcome__cta:hover,
  .medexp-tw .mlc3-noenroll__cta:hover,
  .medexp-scope .mlc3-noenroll__cta:hover,
  .medexp-tw .tw-authGate .tw-authCard:hover,
  .medexp-scope .tw-authGate .tw-authCard:hover {
    transform: none !important;
  }
  /* Bottom nav animation */
  body .mlc3-bottom-nav { animation: none !important; }
  .mlc3-bottom-nav__btn:active { transform: none !important; }
}

/* ---------------------------------------------------------------
 * 18. Step 10 — High-contrast media query (Windows High Contrast Mode).
 * --------------------------------------------------------------- */
@media (forced-colors: active) {
  .medexp-tw .mlc3-resume,
  .medexp-scope .mlc3-resume,
  .medexp-tw .mlc3-welcome,
  .medexp-scope .mlc3-welcome,
  .medexp-tw .mlc3-noenroll,
  .medexp-scope .mlc3-noenroll {
    background: Canvas !important;
    color: CanvasText !important;
    border: 2px solid CanvasText;
  }
  .medexp-tw .mlc3-resume__cta,
  .medexp-scope .mlc3-resume__cta,
  .medexp-tw .mlc3-stage__cta,
  .medexp-scope .mlc3-stage__cta {
    background: Canvas !important;
    color: CanvasText !important;
    border: 2px solid CanvasText !important;
    forced-color-adjust: none;
  }
  .mlc3-bottom-nav__btn[aria-current="page"] {
    background: Highlight !important;
    color: HighlightText !important;
  }
}

/* ---------------------------------------------------------------
 * 19. Step 10 — Mobile-first content adjustments for v3 components.
 * --------------------------------------------------------------- */
@media (max-width: 540px) {
  .medexp-tw .mlc3-resume,
  .medexp-scope .mlc3-resume,
  .medexp-tw .mlc3-welcome,
  .medexp-scope .mlc3-welcome,
  .medexp-tw .mlc3-noenroll,
  .medexp-scope .mlc3-noenroll {
    border-radius: var(--mlc3-r-xl, 22px) !important;
    padding: 18px !important;
  }
  .medexp-tw .mlc3-resume__title,
  .medexp-scope .mlc3-resume__title,
  .medexp-tw .mlc3-welcome__title,
  .medexp-scope .mlc3-welcome__title,
  .medexp-tw .mlc3-noenroll__title,
  .medexp-scope .mlc3-noenroll__title {
    font-size: clamp(1.4rem, 2vw + .4rem, 1.8rem) !important;
  }
  .medexp-tw .mlc3-resume__side,
  .medexp-scope .mlc3-resume__side {
    padding: 14px !important;
  }
  .medexp-tw .mlc3-stage,
  .medexp-scope .mlc3-stage {
    padding: 16px !important;
  }
  .medexp-tw .mlc3-trust-ribbon,
  .medexp-scope .mlc3-trust-ribbon {
    gap: 10px !important;
  }
  .medexp-tw .mlc3-trust-stat__num,
  .medexp-scope .mlc3-trust-stat__num {
    font-size: 18px !important;
  }
  /* Welcome 3-step stepper goes 1-col on small mobile */
  .medexp-tw .mlc3-welcome__steps,
  .medexp-scope .mlc3-welcome__steps {
    grid-template-columns: 1fr !important;
  }
  /* Mochi smaller on mobile welcome */
  .medexp-tw .mlc3-mochi--welcome,
  .medexp-scope .mlc3-mochi--welcome {
    width: 100px !important; height: 100px !important;
  }
}

/* ---------------------------------------------------------------
 * 20. v0.5.73.2 — Goals editing modal (opens from storyboard header).
 * --------------------------------------------------------------- */
.medexp-tw .mlc3-plan__head-right,
.medexp-scope .mlc3-plan__head-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.medexp-tw .mlc3-plan__edit-goals,
.medexp-scope .mlc3-plan__edit-goals {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 11px !important;
  background: var(--mlc3-surface-2, #f8fbfd) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  border-radius: 999px !important;
  font: var(--mlc3-fw-bold, 700) 12px/1 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-text-soft, #1f2937) !important;
  -webkit-text-fill-color: var(--mlc3-text-soft, #1f2937) !important;
  cursor: pointer !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s var(--mlc3-ease-snap) !important;
  letter-spacing: .02em !important;
}
.medexp-tw .mlc3-plan__edit-goals:hover,
.medexp-scope .mlc3-plan__edit-goals:hover {
  background: var(--mlc3-brand-teal-soft, #e6f7f1) !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  border-color: rgba(0,166,118,.30) !important;
}
.medexp-tw .mlc3-plan__edit-goals:active,
.medexp-scope .mlc3-plan__edit-goals:active {
  transform: scale(.96) !important;
}

/* Modal — full overlay */
body .mlc3-goals-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 950 !important;
  display: none !important;
}
body .mlc3-goals-modal[data-mlc3-open="1"] {
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  animation: mlc3-fade-in .25s ease both;
}
.mlc3-goals-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(11,19,36,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
}
.mlc3-goals-modal__panel {
  position: relative;
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  border-radius: 22px;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow:
    0 24px 60px -16px rgba(15,23,42,.30),
    0 4px 16px -4px rgba(15,23,42,.08);
  animation: mlc3-tour-pop .35s var(--mlc3-ease-spring) both;
  display: flex;
  flex-direction: column;
  font-family: 'Rethink Sans', sans-serif;
}
.mlc3-goals-modal__panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
  border-radius: 22px 22px 0 0;
}
.mlc3-goals-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 18px 20px 6px;
}
.mlc3-goals-modal__title {
  margin: 0 !important;
  font: var(--mlc3-fw-display, 800) 18px/1.2 'Rethink Sans', sans-serif !important;
  letter-spacing: -.012em !important;
  color: var(--mlc3-text, #0b1324) !important;
  -webkit-text-fill-color: var(--mlc3-text, #0b1324) !important;
  background: none !important;
}
.mlc3-goals-modal__close {
  width: 30px; height: 30px;
  background: transparent; border: 0;
  border-radius: 8px;
  color: var(--mlc3-muted, #5f6b7a);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mlc3-goals-modal__close:hover {
  background: var(--mlc3-surface-2, #f8fbfd);
  color: var(--mlc3-text, #0b1324);
}
.mlc3-goals-modal__body {
  padding: 0 20px 14px;
  display: flex; flex-direction: column; gap: 16px;
}
.mlc3-goals-modal__sub {
  margin: 0 0 4px !important;
  font: var(--mlc3-fw-medium, 500) 13px/1.5 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
}
.mlc3-goals-modal__field {
  display: flex; flex-direction: column; gap: 4px;
}
.mlc3-goals-modal__field-label {
  font: var(--mlc3-fw-bold, 700) 13px/1 'Rethink Sans', sans-serif;
  color: var(--mlc3-text, #0b1324);
  margin-bottom: 2px;
}
.mlc3-goals-modal__input {
  width: 100%;
  padding: 10px 14px !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  border-radius: 12px !important;
  background: var(--mlc3-surface, #fff) !important;
  font: var(--mlc3-fw-bold, 700) 16px/1 'Rethink Sans', sans-serif !important;
  font-variant-numeric: tabular-nums;
  color: var(--mlc3-text, #0b1324) !important;
  outline: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mlc3-goals-modal__input:focus,
.mlc3-goals-modal__input:focus-visible {
  border-color: var(--mlc3-brand-teal, #00a676) !important;
  box-shadow: 0 0 0 3px rgba(0,166,118,.18) !important;
}
.mlc3-goals-modal__field-hint {
  font: var(--mlc3-fw-medium, 500) 11px/1.4 'Rethink Sans', sans-serif;
  color: var(--mlc3-faint, #94a3b8);
}
.mlc3-goals-modal__foot {
  padding: 12px 20px 18px;
  display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--mlc3-border-soft, #eef1f6);
  margin-top: 4px;
}
.mlc3-goals-modal__btn-ghost {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--mlc3-border, #e5e9f0);
  border-radius: 12px;
  font: var(--mlc3-fw-bold, 700) 14px/1 'Rethink Sans', sans-serif;
  color: var(--mlc3-text-soft, #1f2937);
  cursor: pointer;
  transition: background .15s ease;
}
.mlc3-goals-modal__btn-ghost:hover {
  background: var(--mlc3-surface-2, #f8fbfd);
}
.mlc3-goals-modal__btn-primary {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a));
  color: #fff;
  border: 0;
  border-radius: 12px;
  font: var(--mlc3-fw-display, 800) 14px/1 'Rethink Sans', sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(0,166,118,.55);
  transition: transform .12s var(--mlc3-ease-snap), box-shadow .15s ease;
}
.mlc3-goals-modal__btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(0,166,118,.65);
}
.mlc3-goals-modal__btn-primary[data-mlc3-busy="1"] {
  opacity: .8;
  pointer-events: none;
}

@media (max-width: 540px) {
  .mlc3-goals-modal__panel {
    max-height: 90vh;
    border-radius: 18px;
  }
  body .mlc3-goals-modal[data-mlc3-open="1"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .mlc3-goals-modal__panel {
    max-width: none;
    width: 100%;
    border-radius: 24px 24px 0 0;
  }
}

/* ---------------------------------------------------------------
 * 21. v0.5.73.3 polish — hide redundant legacy cards.
 *     Their data is already presented by v3 components:
 *       • Daily mission     → storyboard stage 1 + plan progress pill
 *       • Streak & Level    → metric strip (streak card + Mochi level)
 *       • Course snapshot   → resume hero (course title, progress %, CTAs)
 *       • Continue last session inner row → resume hero
 * --------------------------------------------------------------- */
.medexp-dashboardPage .medexp-missionCard,
.medexp-dashboardPage .medexp-missionCard + .tw-card,
.medexp-dashboardPage .tw-courseSnapshotCard,
.medexp-dashboardPage .tw-grid-12.tw-grid-stretch:has(> .medexp-missionCard),
.medexp-dashboardPage .tw-continueHero,
.medexp-dashboardPage .tw-continueHero + .tw-divider {
  display: none !important;
}
/* The "Tip: keep your streak alive…" line lives right after the strip;
   collapse it to keep vertical rhythm tight when the strip is hidden. */
.medexp-dashboardPage .tw-grid-12.tw-grid-stretch:has(> .medexp-missionCard) + .tw-muted[data-fresh-details] {
  display: none !important;
}

/* ---------------------------------------------------------------
 * 22. v0.7.1.0 — Mockup-match overhaul (Mochi floater + 4 stat cards).
 *
 *     a) Mochi floats fixed bottom-right with a chat bubble. The mascot
 *        is removed from the briefing-card avatar and hoisted into a
 *        global `.mlc3-mochi-floater` so it follows the learner across
 *        the dashboard's vertical scroll.
 *
 *     b) The 4 metric cards are restyled to match DASHBOARD-MOCKUP-FINAL:
 *        a hairline top hover bar, a radial color glow at the bottom-right
 *        per card hue, and a big gradient-text value. The original
 *        modal-launching `.tw-metric--X` classes and the JS-driven
 *        sparkline / day-grid markup are preserved untouched — we only
 *        layer visual polish on top.
 * --------------------------------------------------------------- */

/* ───── 22a. v0.7.6.9: Hide the briefing card entirely — Mochi
   floater now shows the same greeting + advice. Keeping the card
   produced a duplicate "Good morning, Ju!" message. */
.medexp-dashboardPage .tw-briefingCard {
  display: none !important;
}

/* ───── 22b. Mochi floater (fixed bottom-right).
   v0.7.5.1: Force display:block to defeat the v0.5.69.0 Section 4 rule
   that hid the floater pending an `.is-on` toggle. The new floater
   doesn't gate visibility on a class anymore. */
.medexp-dashboardPage .mlc3-mochi-floater,
body .mlc3-mochi-floater {
  position: fixed !important;
  bottom: 22px !important;
  right: 22px !important;
  z-index: 800 !important;
  width: 76px !important;
  height: 76px !important;
  display: block !important;
  pointer-events: none; /* children re-enable */
  animation: mlc3-mochi-enter .55s .35s var(--mlc3-ease-spring, cubic-bezier(.34,1.56,.64,1)) both;
}
.mlc3-mochi-floater__btn {
  pointer-events: auto;
  position: relative;
  width: 76px;
  height: 76px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 10px 22px rgba(0, 166, 118, .35));
  transition: transform .15s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1));
}
.mlc3-mochi-floater__btn:hover { transform: scale(1.06) rotate(-2deg); }
.mlc3-mochi-floater__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--mlc3-surface, #fff), 0 0 0 5px var(--mlc3-brand-teal, #00a676);
  border-radius: 50%;
}
.mlc3-mochi-floater__svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: mlc3-mochi-bob 3.2s ease-in-out infinite alternate;
}
@keyframes mlc3-mochi-enter {
  from { opacity: 0; transform: translateY(40px) scale(.6); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mlc3-mochi-bob {
  0%   { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-6px) rotate(2deg); }
}
.mlc3-mochi-floater__eye-l,
.mlc3-mochi-floater__eye-r {
  transform-origin: center;
  animation: mlc3-mochi-blink 4.5s ease infinite;
}
.mlc3-mochi-floater__eye-r { animation-delay: .05s; }
@keyframes mlc3-mochi-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(.1); }
  96%           { transform: scaleY(1); }
}

/* ───── 22c. Mochi bubble (above the mascot). */
.mlc3-mochi-floater__bubble {
  pointer-events: auto;
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 256px;
  max-width: calc(100vw - 44px);
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  border-radius: 18px 18px 4px 18px;
  padding: 12px 32px 12px 16px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .06),
    0 22px 44px -22px rgba(15, 23, 42, .26);
  font-family: 'Rethink Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--mlc3-text, #0b1324);
  opacity: 0;
  transform: translateY(6px) scale(.95);
  transform-origin: bottom right;
  transition:
    opacity .22s ease,
    transform .26s var(--mlc3-ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.mlc3-mochi-floater__bubble strong {
  color: var(--mlc3-brand-teal-dark, #007e5a);
  font-weight: 800;
}

/* v0.7.7.7: bubble has TWO sizes — small preview (default) and expanded
   panel (when .is-expanded on the floater). Click mascot to toggle. */
.mlc3-mochi-floater__lead {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.45;
}
.mlc3-mochi-floater__msg {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mlc3-text, #0b1324);
  /* In default (preview) mode, clamp message to 2 lines. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mlc3-mochi-floater__actions {
  display: none; /* hidden in preview mode */
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mlc3-border-soft, #eef1f6);
  flex-wrap: wrap;
  gap: 8px;
}

/* Expanded mode — wider bubble, full message, action buttons visible. */
.mlc3-mochi-floater.is-expanded .mlc3-mochi-floater__bubble {
  width: 360px !important;
  max-width: calc(100vw - 44px);
  padding: 16px 36px 16px 18px;
  border-radius: 22px 22px 4px 22px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .08),
    0 28px 56px -16px rgba(15, 23, 42, .35);
}
.mlc3-mochi-floater.is-expanded .mlc3-mochi-floater__lead {
  font-size: 14px;
  margin-bottom: 8px;
}
.mlc3-mochi-floater.is-expanded .mlc3-mochi-floater__msg {
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
  text-overflow: clip;
  margin-bottom: 0;
}
.mlc3-mochi-floater.is-expanded .mlc3-mochi-floater__actions {
  display: flex;
}

/* Click-affordance hint on the small bubble */
.mlc3-mochi-floater:not(.is-expanded) .mlc3-mochi-floater__bubble::after {
  /* keep existing tail arrow — defined in earlier rule */
}
.mlc3-mochi-floater:not(.is-expanded) .mlc3-mochi-floater__bubble {
  cursor: default;
}
/* v0.7.8.1: Switch the small bubble to a CSS grid so the "TAP ME →"
   hint sits inline on the right of the message row instead of wrapping
   underneath. Two columns: message (1fr) + arrow chip (auto). The lead
   spans both columns at the top. */
.mlc3-mochi-floater:not(.is-expanded) .mlc3-mochi-floater__bubble {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "lead lead"
    "msg  hint";
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  padding-right: 16px; /* the X button is absolute, so no extra right pad needed */
}
.mlc3-mochi-floater:not(.is-expanded) .mlc3-mochi-floater__lead {
  grid-area: lead;
  margin-bottom: 0;
  padding-right: 32px; /* leave room for the absolute close button */
}
.mlc3-mochi-floater:not(.is-expanded) .mlc3-mochi-floater__msg {
  grid-area: msg;
  min-width: 0; /* enables the flex/grid child to shrink + allow ellipsis */
}
.mlc3-mochi-floater:not(.is-expanded) .mlc3-mochi-floater__bubble::before {
  content: "Tap me \2192";
  grid-area: hint;
  align-self: center;
  justify-self: end;
  font: 700 10px/1 'Rethink Sans', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mlc3-brand-teal-dark, #007e5a);
  background: rgba(0, 166, 118, .10);
  padding: 6px 9px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  flex-shrink: 0;
}

/* Action buttons inside the expanded panel */
.mlc3-mochi-floater__btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a));
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font: 700 12px/1 'Rethink Sans', sans-serif;
  text-decoration: none !important;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(0, 166, 118, .55);
  transition:
    transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)),
    box-shadow .15s ease;
}
.mlc3-mochi-floater__btn-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(0, 166, 118, .65);
}
.mlc3-mochi-floater__btn-action--ghost {
  background: var(--mlc3-surface-2, #f8fbfd) !important;
  color: var(--mlc3-text-soft, #1f2937) !important;
  -webkit-text-fill-color: var(--mlc3-text-soft, #1f2937) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0);
  box-shadow: none;
}
.mlc3-mochi-floater__btn-action--ghost:hover {
  background: var(--mlc3-surface, #fff) !important;
  border-color: rgba(0, 166, 118, .30);
  box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .12);
}
.mlc3-mochi-floater__wave {
  display: inline-block;
  vertical-align: -2px;
  margin: 0 1px;
  color: #f59e0b;
  animation: mlc3-wave 2.4s ease infinite;
  transform-origin: 70% 70%;
}
@keyframes mlc3-wave {
  0%, 60%, 100% { transform: rotate(0); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mlc3-mochi-floater__wave { animation: none !important; }
}
.mlc3-mochi-floater__bubble::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: var(--mlc3-surface, #fff);
  border-right: 1px solid var(--mlc3-border, #e5e9f0);
  border-bottom: 1px solid var(--mlc3-border, #e5e9f0);
  transform: rotate(45deg);
}
.mlc3-mochi-floater.is-talking .mlc3-mochi-floater__bubble,
.mlc3-mochi-floater__btn:hover ~ .mlc3-mochi-floater__bubble,
.mlc3-mochi-floater__btn:focus-visible ~ .mlc3-mochi-floater__bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mlc3-mochi-floater__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--mlc3-faint, #94a3b8);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s ease, color .12s ease;
}
.mlc3-mochi-floater__close:hover {
  background: var(--mlc3-surface-2, #f8fbfd);
  color: var(--mlc3-text, #0b1324);
}

/* Mobile sizing — slightly smaller, hugging the corner. */
@media (max-width: 640px) {
  .mlc3-mochi-floater {
    bottom: 78px; /* leave room for bottom-tab nav */
    right: 14px;
    width: 64px;
    height: 64px;
  }
  .mlc3-mochi-floater__btn {
    width: 64px;
    height: 64px;
  }
  .mlc3-mochi-floater__bubble {
    width: 220px;
    font-size: 12.5px;
  }
}

/* ───── 22d. 4 stat cards — mockup-match polish layer.
   Activated only when a `.mlc3-metric` card has the dashboard scope so
   guest catalog pages can't accidentally pick this up. */
.medexp-dashboardPage .mlc3-metric {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px !important;
  padding: 18px 20px !important;
  transition:
    transform .15s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)),
    border-color .15s ease,
    box-shadow .15s ease !important;
}

/* Top hover bar — gradient teal→blue, scaled in on hover. */
.medexp-dashboardPage .mlc3-metric::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
  opacity: 0;
  transform: scaleX(.2);
  transform-origin: left;
  transition: opacity .2s ease, transform .35s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1));
  z-index: 2;
}
.medexp-dashboardPage .mlc3-metric:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 166, 118, .30) !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .06),
    0 18px 38px -18px rgba(15, 23, 42, .22) !important;
}
.medexp-dashboardPage .mlc3-metric:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* Radial glow at bottom-right — different hue per card. */
.medexp-dashboardPage .mlc3-metric::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 110px;
  height: 110px;
  z-index: -1;
  background: radial-gradient(circle at center, rgba(0, 166, 118, .10) 0%, transparent 70%);
  pointer-events: none;
}
.medexp-dashboardPage .mlc3-metric.mlc3-metric--questions::after,
.medexp-dashboardPage .mlc3-metric.tw-metric--q7::after,
.medexp-dashboardPage .mlc3-metric.tw-metric--quesions::after {
  background: radial-gradient(circle at center, rgba(26, 79, 156, .12) 0%, transparent 70%);
}
.medexp-dashboardPage .mlc3-metric.mlc3-metric--streak::after,
.medexp-dashboardPage .mlc3-metric.tw-metric--streak::after {
  background: radial-gradient(circle at center, rgba(245, 158, 11, .14) 0%, transparent 70%);
}
.medexp-dashboardPage .mlc3-metric.mlc3-metric--countdown::after,
.medexp-dashboardPage .mlc3-metric.tw-metric--countdown::after,
.medexp-dashboardPage .mlc3-metric.tw-metric--days::after {
  background: radial-gradient(circle at center, rgba(139, 92, 246, .14) 0%, transparent 70%);
}

/* Label row — uppercase muted, with the icon promoted to the right. */
.medexp-dashboardPage .mlc3-metric .tw-metric__label {
  font: 700 11px/1 'Rethink Sans', sans-serif !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px !important;
}

/* The big value — gradient text per card hue. */
.medexp-dashboardPage .mlc3-metric .tw-metric__value {
  font-family: 'Rethink Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 2vw + 14px, 32px) !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
  background: linear-gradient(135deg, #0b1324, #1a4f9c) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
  margin: 0 !important;
}
.medexp-dashboardPage .mlc3-metric.mlc3-metric--accuracy .tw-metric__value,
.medexp-dashboardPage .mlc3-metric.tw-metric--acc .tw-metric__value {
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a)) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.medexp-dashboardPage .mlc3-metric.mlc3-metric--streak .tw-metric__value,
.medexp-dashboardPage .mlc3-metric.tw-metric--streak .tw-metric__value {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.medexp-dashboardPage .mlc3-metric.mlc3-metric--countdown .tw-metric__value,
.medexp-dashboardPage .mlc3-metric.tw-metric--countdown .tw-metric__value,
.medexp-dashboardPage .mlc3-metric.tw-metric--days .tw-metric__value {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Sub-text below — small muted with optional trend chip. */
.medexp-dashboardPage .mlc3-metric .tw-metric__sub {
  font: 600 12px/1.4 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a) !important;
  margin-top: 6px !important;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Indicator (icon top-right) — promote to a colored gradient pill. */
.medexp-dashboardPage .mlc3-metric .tw-metric__indicator,
.medexp-dashboardPage .mlc3-metric .tw-metric__icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, var(--mlc3-brand-teal-soft, #e6f7f1), rgba(0, 166, 118, .06)) !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  display: grid !important;
  place-items: center !important;
  flex: none !important;
}
.medexp-dashboardPage .mlc3-metric.mlc3-metric--questions .tw-metric__indicator,
.medexp-dashboardPage .mlc3-metric.tw-metric--q7 .tw-metric__indicator {
  background: linear-gradient(135deg, var(--mlc3-brand-blue-soft, #e9eef9), rgba(26, 79, 156, .06)) !important;
  color: var(--mlc3-brand-blue, #1a4f9c) !important;
  -webkit-text-fill-color: var(--mlc3-brand-blue, #1a4f9c) !important;
}
.medexp-dashboardPage .mlc3-metric.mlc3-metric--streak .tw-metric__indicator,
.medexp-dashboardPage .mlc3-metric.tw-metric--streak .tw-metric__indicator {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  color: #d97706 !important;
  -webkit-text-fill-color: #d97706 !important;
}
.medexp-dashboardPage .mlc3-metric.mlc3-metric--countdown .tw-metric__indicator,
.medexp-dashboardPage .mlc3-metric.tw-metric--countdown .tw-metric__indicator {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe) !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
}

/* Reduced motion respects the floater + hover scale-back. */
@media (prefers-reduced-motion: reduce) {
  .mlc3-mochi-floater,
  .mlc3-mochi-floater__svg,
  .mlc3-mochi-floater__eye-l,
  .mlc3-mochi-floater__eye-r,
  .medexp-dashboardPage .mlc3-metric::before,
  .medexp-dashboardPage .mlc3-metric:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
 * 23. v0.7.2.0 — Greeting strip + days-to-exam countdown card.
 *     Sits above the resume hero. Big bold time-of-day salutation
 *     and minutes-remaining subtitle on the left; a calendar
 *     countdown pill on the right.
 * --------------------------------------------------------------- */
.medexp-dashboardPage .mlc3-greet {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0 22px;
  animation: mlc3-fade-up .5s var(--mlc3-ease-smooth, cubic-bezier(.4,0,.2,1)) both;
}
.medexp-dashboardPage .mlc3-greet__main { min-width: 0; flex: 1 1 280px; }
.medexp-dashboardPage .mlc3-greet__title {
  margin: 0 !important;
  font-family: 'Rethink Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.5rem, 2vw + .5rem, 2.1rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -.018em !important;
  color: var(--mlc3-text, #0b1324) !important;
  -webkit-text-fill-color: var(--mlc3-text, #0b1324) !important;
}
.medexp-dashboardPage .mlc3-greet__sub {
  margin: 4px 0 0 !important;
  font-family: 'Rethink Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a) !important;
}
.medexp-dashboardPage .mlc3-greet__sub strong {
  color: var(--mlc3-text, #0b1324);
  -webkit-text-fill-color: var(--mlc3-text, #0b1324);
  font-weight: 700;
}

/* Countdown card — supports both <a> and <button> markup */
.medexp-dashboardPage a.mlc3-countdown,
.medexp-dashboardPage button.mlc3-countdown {
  /* Reset native <button> chrome so the rule looks identical for both tags */
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  margin: 0;

  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .05),
    0 1px 3px rgba(15, 23, 42, .04);
  text-decoration: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  transition:
    transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)),
    box-shadow .15s ease,
    border-color .15s ease;
  flex: none;
  white-space: nowrap;
}
.medexp-dashboardPage a.mlc3-countdown:hover,
.medexp-dashboardPage button.mlc3-countdown:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .06),
    0 18px 38px -22px rgba(15, 23, 42, .22);
  border-color: rgba(26, 79, 156, .30);
}
.medexp-dashboardPage a.mlc3-countdown:focus-visible,
.medexp-dashboardPage button.mlc3-countdown:focus-visible {
  outline: 2px solid rgba(26, 79, 156, .55);
  outline-offset: 3px;
}
.medexp-dashboardPage a.mlc3-countdown:focus:not(:focus-visible),
.medexp-dashboardPage button.mlc3-countdown:focus:not(:focus-visible) {
  outline: none;
}
.medexp-dashboardPage .mlc3-countdown__icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--mlc3-brand-blue-soft, #e9eef9), rgba(26, 79, 156, .05));
  color: var(--mlc3-brand-blue-dark, #0e3672);
  display: grid;
  place-items: center;
  flex: none;
}
.medexp-dashboardPage .mlc3-countdown__icon svg {
  width: 18px;
  height: 18px;
}
.medexp-dashboardPage .mlc3-countdown__body { display: flex; flex-direction: column; gap: 2px; }
.medexp-dashboardPage .mlc3-countdown__num {
  font-family: 'Rethink Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.02em !important;
  color: var(--mlc3-brand-blue-dark, #0e3672) !important;
  -webkit-text-fill-color: var(--mlc3-brand-blue-dark, #0e3672) !important;
}
.medexp-dashboardPage .mlc3-countdown__num.is-urgent {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}
.medexp-dashboardPage .mlc3-countdown__lbl {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mlc3-muted, #5f6b7a);
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a);
  margin-top: 2px;
}
.medexp-dashboardPage a.mlc3-countdown.is-empty .mlc3-countdown__num,
.medexp-dashboardPage button.mlc3-countdown.is-empty .mlc3-countdown__num {
  color: var(--mlc3-faint, #94a3b8) !important;
  -webkit-text-fill-color: var(--mlc3-faint, #94a3b8) !important;
}

/* When the greeting strip is present, hide the duplicate greeting line
   inside the resume hero so we don't read "Good evening, James" twice. */
.medexp-dashboardPage .mlc3-greet ~ .mlc3-resume .mlc3-resume__greet {
  display: none !important;
}
.medexp-dashboardPage .mlc3-greet ~ .mlc3-resume {
  margin-top: 0;
}

@media (max-width: 720px) {
  .medexp-dashboardPage .mlc3-greet { gap: 10px; margin: 14px 0 16px; }
  .medexp-dashboardPage a.mlc3-countdown,
  .medexp-dashboardPage button.mlc3-countdown {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .medexp-dashboardPage .mlc3-greet,
  .medexp-dashboardPage a.mlc3-countdown:hover,
  .medexp-dashboardPage button.mlc3-countdown:hover {
    animation: none !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
 * 24. v0.7.2.0 — Course switcher (mockup-exact, DB-driven).
 *     Restyles the existing .tw-courseDropdown popup so each
 *     option renders monogram + title + "X% · Y/Z lessons" + a
 *     right-side percentage. Expired entitlements show "Expired N
 *     days ago" in red and a red "!" pip on the right.
 * --------------------------------------------------------------- */

/* Trigger button — wider with a soft border. */
.medexp-tw .tw-courseDropdown .tw-courseDropdown__btn,
.medexp-tw .tw-courseTopSwitch .tw-courseDropdown__btn {
  font-family: 'Rethink Sans', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--mlc3-border, #e5e9f0) !important;
  background: var(--mlc3-surface, #fff) !important;
  padding: 10px 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.medexp-tw .tw-courseDropdown .tw-courseDropdown__btn:hover {
  border-color: rgba(0, 166, 118, .35) !important;
  background: var(--mlc3-surface-2, #f8fbfd) !important;
}
.medexp-tw .tw-courseDropdown .tw-courseDropdown__btn:focus-visible {
  outline: none !important;
  border-color: var(--mlc3-brand-blue, #1a4f9c) !important;
  box-shadow: 0 0 0 3px rgba(26, 79, 156, .18) !important;
}

/* Popup panel */
.medexp-tw .tw-courseDropdown .tw-courseDropdown__menu {
  border-radius: 18px !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  background: var(--mlc3-surface, #fff) !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .06),
    0 24px 48px -16px rgba(15, 23, 42, .20) !important;
  padding: 12px !important;
  max-height: 460px !important;
  overflow-y: auto !important;
}

/* Search input inside popup — v0.7.6.0: more breathing room */
.medexp-tw .tw-courseDropdown .tw-courseDropdown__searchWrap {
  background: var(--mlc3-surface-2, #f8fbfd) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  margin: 0 0 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.medexp-tw .tw-courseDropdown .tw-courseDropdown__searchWrap:focus-within {
  background: var(--mlc3-surface, #fff) !important;
  border-color: rgba(0, 166, 118, .40) !important;
  box-shadow: 0 0 0 4px rgba(0, 166, 118, .08) !important;
}
.medexp-tw .tw-courseDropdown .tw-courseDropdown__searchWrap::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
}
.medexp-tw .tw-courseDropdown .tw-courseDropdown__search {
  flex: 1 !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  font: 500 14px/1.2 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-text, #0b1324) !important;
  -webkit-text-fill-color: var(--mlc3-text, #0b1324) !important;
  padding: 0 !important;
  height: auto !important;
}
.medexp-tw .tw-courseDropdown .tw-courseDropdown__search::placeholder {
  color: var(--mlc3-faint, #94a3b8);
  font-weight: 500;
}

/* Option rows — rich layout with monogram + body + pct */
.medexp-tw .tw-courseDropdown .tw-courseDropdown__opt {
  display: grid !important;
  grid-template-columns: 36px 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background .12s ease !important;
  font-family: 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-text, #0b1324) !important;
  -webkit-text-fill-color: var(--mlc3-text, #0b1324) !important;
  text-decoration: none !important;
}
/* v0.7.6.0: honor the `hidden` attribute set by the search filter —
   without this, our `display: grid !important` was winning over the
   browser default `[hidden] { display: none }` rule. */
.medexp-tw .tw-courseDropdown .tw-courseDropdown__opt[hidden] {
  display: none !important;
}
.medexp-tw .tw-courseDropdown .tw-courseDropdown__opt:hover,
.medexp-tw .tw-courseDropdown .tw-courseDropdown__opt:focus-visible {
  background: var(--mlc3-surface-2, #f8fbfd) !important;
  outline: none !important;
}
.medexp-tw .tw-courseDropdown .tw-courseDropdown__opt[aria-selected="true"] {
  background: var(--mlc3-brand-teal-soft, #e6f7f1) !important;
}
.medexp-tw .tw-courseDropdown .tw-courseDropdown__opt[aria-selected="true"] .mlc3-cswitch__title,
.medexp-tw .tw-courseDropdown .tw-courseDropdown__opt[aria-selected="true"] .mlc3-cswitch__pct {
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  font-weight: 800 !important;
}
.medexp-tw .tw-courseDropdown .tw-courseDropdown__opt[aria-selected="true"] .mlc3-cswitch__thumb {
  background: rgba(0, 166, 118, .14) !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
}

/* Monogram thumb */
.medexp-tw .mlc3-cswitch__thumb {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--mlc3-brand-teal-soft, #e6f7f1), var(--mlc3-brand-blue-soft, #e9eef9));
  color: var(--mlc3-brand-teal-dark, #007e5a);
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a);
  font: 800 12px/1 'Rethink Sans', sans-serif;
  letter-spacing: .02em;
  display: grid;
  place-items: center;
  flex: none;
}

/* Body — title + meta */
.medexp-tw .mlc3-cswitch__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.medexp-tw .mlc3-cswitch__title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--mlc3-text, #0b1324);
  -webkit-text-fill-color: var(--mlc3-text, #0b1324);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.medexp-tw .mlc3-cswitch__meta {
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--mlc3-muted, #5f6b7a);
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a);
}
.medexp-tw .mlc3-cswitch__meta.is-expired {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  font-weight: 700 !important;
}

/* Right-side percentage / expired pip */
.medexp-tw .mlc3-cswitch__pct {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 800;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--mlc3-muted, #5f6b7a);
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a);
  text-align: right;
  min-width: 36px;
  white-space: nowrap;
}
.medexp-tw .mlc3-cswitch__pct.is-expired {
  color: #dc2626;
  -webkit-text-fill-color: #dc2626;
  font-size: 18px;
  font-weight: 900;
}

/* v0.7.5.4: No-results hint when search filters out every option. */
.medexp-tw .mlc3-cswitch__noresults {
  padding: 12px;
  font: 500 13px/1.4 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
  text-align: center;
}

/* ---------------------------------------------------------------
 * 25. v0.7.3.0 — Merged Performance snapshot panel.
 *     The 4-card metric strip is hoisted into .mlc3-focus-card by
 *     the JS init. When present with `.is-mlc3-nested`, we shrink
 *     each card and lay them out as a tight 4-col mini grid above
 *     the mastery list. The standalone strip outside the focus
 *     card is hidden so it doesn't render twice.
 * --------------------------------------------------------------- */

/* Hide the standalone metric strip — its cards now live inside the
   focus card. We only hide AFTER the JS has hoisted (data attribute),
   to avoid a brief flash of "no cards anywhere" before init. */
.medexp-dashboardPage .mlc3-metric-strip[data-mlc3-hoisted="1"]:not(.is-mlc3-nested),
.medexp-dashboardPage .tw-metricStrip[data-mlc3-hoisted="1"]:not(.is-mlc3-nested) {
  display: none !important;
}
/* Also: any `.tw-metricStrip` direct child of the dashboard content
   that hasn't been hoisted (the original placement) should hide once
   we've moved the canonical one. We use a sibling selector. */
.medexp-dashboardPage .mlc3-focus-card .mlc3-metric-strip.is-mlc3-nested ~ * .mlc3-metric-strip:not(.is-mlc3-nested),
.medexp-dashboardPage:has(.mlc3-focus-card .is-mlc3-nested) > .mlc3-metric-strip:not(.is-mlc3-nested),
.medexp-dashboardPage:has(.mlc3-focus-card .is-mlc3-nested) > * > .mlc3-metric-strip:not(.is-mlc3-nested) {
  display: none !important;
}

/* Nested strip layout — compact 4-col grid that ALWAYS fits in one row
   on desktop (panel ~700px ÷ 4 ≈ 165px per card). Mobile collapses to
   2-col at ≤640px (iPhone), 1-col at ≤380px (tiny phones). */
.medexp-dashboardPage .mlc3-focus-card .mlc3-metric-strip.is-mlc3-nested {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 4px 0 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 640px) {
  .medexp-dashboardPage .mlc3-focus-card .mlc3-metric-strip.is-mlc3-nested {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 380px) {
  .medexp-dashboardPage .mlc3-focus-card .mlc3-metric-strip.is-mlc3-nested {
    grid-template-columns: 1fr !important;
  }
}

/* v0.7.5.2/3: defeat Section 8 rules — `min-width: 220px` was forcing
   wider cards, AND certain modifier classes (`.tw-metric--countdown`,
   `.tw-metric--longer`) used `grid-column: span 2` which forced cards
   to occupy 2 columns each, breaking the 4-col layout into 2x2.
   Force `grid-column: span 1` so each card occupies exactly 1 column. */
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric {
  min-width: 0 !important;
  max-width: 100% !important;
  grid-column: auto !important;
  grid-column-start: auto !important;
  grid-column-end: auto !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border-soft, #eef1f6) !important;
  box-shadow: none !important;
  overflow: hidden;
}
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric:hover {
  transform: translateY(-2px);
  border-color: var(--mlc3-border, #e5e9f0) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 10px 24px -14px rgba(15, 23, 42, .15) !important;
}
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric::before {
  height: 2px !important;
}
/* Smaller, single-line uppercase label — truncate if too narrow. */
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .tw-metric__label,
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .mlc3-metric__label {
  font-size: 9.5px !important;
  margin-bottom: 4px !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .tw-metric__value,
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .mlc3-metric__value {
  font-size: 20px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .tw-metric__sub,
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .mlc3-metric__sub {
  font-size: 10px !important;
  margin-top: 3px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Tighter inline icon — smaller pill, no shadow */
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .tw-metric__indicator,
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .tw-metric__icon,
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .mlc3-metric__icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
}
/* Hide the streak shield-dot grid + day labels inside the nested cards
   (they're decorative and don't fit in 165px). */
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .tw-metric--streak [class*="shield"],
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .tw-metric--streak .tw-metric__dotgrid,
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .tw-metric__sparkline,
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .tw-metric__daygrid,
.medexp-dashboardPage .mlc3-focus-card .is-mlc3-nested .mlc3-metric .tw-metric__daylabels {
  display: none !important;
}

/* Panel head — title + subtitle stacked LEFT, "Full report →" on the right.
   v0.7.7.5: was using justify-content: space-between which made the subtitle
   visually float to the center. Use grid to lock the layout: title on top
   left, subtitle below it (left), report link spans both rows on the right. */
.medexp-dashboardPage .mlc3-focus-card__head {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 4px 16px !important;
  margin-bottom: 14px !important;
}
.medexp-dashboardPage .mlc3-focus-card__head .mlc3-focus-card__title {
  grid-column: 1;
  grid-row: 1;
  text-align: left;
}
.medexp-dashboardPage .mlc3-focus-card__head .mlc3-focus-card__sub {
  grid-column: 1;
  grid-row: 2;
  text-align: left;
  flex-basis: auto !important;
  margin: 0 !important;
}
.medexp-dashboardPage .mlc3-focus-card__head .mlc3-focus-card__report {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
}
.medexp-dashboardPage .mlc3-focus-card__title {
  font-family: 'Rethink Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -.014em !important;
  margin: 0 !important;
  color: var(--mlc3-text, #0b1324) !important;
  -webkit-text-fill-color: var(--mlc3-text, #0b1324) !important;
}
.medexp-dashboardPage .mlc3-focus-card__sub {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a) !important;
  margin: 4px 0 0 !important;
  flex-basis: 100% !important;
}
.medexp-dashboardPage .mlc3-focus-card__report {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  transition: color .15s ease, transform .15s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1));
}
.medexp-dashboardPage .mlc3-focus-card__report:hover {
  color: var(--mlc3-brand-teal, #00a676) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal, #00a676) !important;
}
.medexp-dashboardPage .mlc3-focus-card__report:hover span {
  transform: translateX(2px);
}
.medexp-dashboardPage .mlc3-focus-card__report span {
  display: inline-block;
  transition: transform .15s var(--mlc3-ease-spring, cubic-bezier(.34,1.56,.64,1));
}

/* Mastery subhead — bridges between the mini cards and the weakest list */
.medexp-dashboardPage .mlc3-focus-card__subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px 12px;
  margin-top: 4px;
  border-top: 1px solid var(--mlc3-border-soft, #eef1f6);
}
.medexp-dashboardPage .mlc3-focus-card__subhead-label {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.008em;
  color: var(--mlc3-text, #0b1324);
  -webkit-text-fill-color: var(--mlc3-text, #0b1324);
  margin-top: 6px;
}
.medexp-dashboardPage .mlc3-focus-card__subhead-meta {
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mlc3-muted, #5f6b7a);
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a);
}

/* v0.7.7.5: Clickable mastery rows — each row deep-links to its
   topic's practice. Layout: dot · name · bar · pct · arrow.
   Left-aligned, hover lifts background, color-coded by score tier. */
.medexp-dashboardPage a.mlc3-focus-row {
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1.4fr) 90px 44px 18px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  cursor: pointer !important;
  transition:
    background .14s ease,
    border-color .14s ease,
    transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)) !important;
  position: relative;
}
.medexp-dashboardPage a.mlc3-focus-row + a.mlc3-focus-row {
  margin-top: 2px;
}
.medexp-dashboardPage a.mlc3-focus-row:hover,
.medexp-dashboardPage a.mlc3-focus-row:focus-visible {
  background: var(--mlc3-surface-2, #f8fbfd) !important;
  border-color: var(--mlc3-border-soft, #eef1f6) !important;
  transform: translateX(2px);
  outline: none !important;
}
.medexp-dashboardPage a.mlc3-focus-row:hover .mlc3-focus-row__arrow,
.medexp-dashboardPage a.mlc3-focus-row:focus-visible .mlc3-focus-row__arrow {
  transform: translateX(3px);
  opacity: 1 !important;
  color: var(--mlc3-brand-teal, #00a676);
}
.medexp-dashboardPage .mlc3-focus-row__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mlc3-faint, #94a3b8);
  display: block;
}
.medexp-dashboardPage .mlc3-focus-row--low .mlc3-focus-row__dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .12); }
.medexp-dashboardPage .mlc3-focus-row--mid .mlc3-focus-row__dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .12); }
.medexp-dashboardPage .mlc3-focus-row--good .mlc3-focus-row__dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .12); }

.medexp-dashboardPage .mlc3-focus-row__name {
  font: 700 14px/1.3 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-text, #0b1324) !important;
  -webkit-text-fill-color: var(--mlc3-text, #0b1324) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.medexp-dashboardPage .mlc3-focus-row__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .07);
  overflow: hidden;
}
.medexp-dashboardPage .mlc3-focus-row__bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #94a3b8, #cbd5e1);
  animation: mlc3-fade-in .35s ease;
}
.medexp-dashboardPage .mlc3-focus-row--low .mlc3-focus-row__bar > span {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}
.medexp-dashboardPage .mlc3-focus-row--mid .mlc3-focus-row__bar > span {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.medexp-dashboardPage .mlc3-focus-row--good .mlc3-focus-row__bar > span {
  background: linear-gradient(90deg, #10b981, #16a34a);
}
.medexp-dashboardPage .mlc3-focus-row__pct {
  font: 800 13px/1 'Rethink Sans', sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--mlc3-text-soft, #1f2937);
}
.medexp-dashboardPage .mlc3-focus-row--low .mlc3-focus-row__pct { color: #dc2626; }
.medexp-dashboardPage .mlc3-focus-row--mid .mlc3-focus-row__pct { color: #d97706; }
.medexp-dashboardPage .mlc3-focus-row--good .mlc3-focus-row__pct { color: var(--mlc3-brand-teal-dark, #007e5a); }
.medexp-dashboardPage .mlc3-focus-row__arrow {
  font: 700 14px/1 'Rethink Sans', sans-serif;
  color: var(--mlc3-faint, #94a3b8);
  opacity: .55;
  transition: transform .14s var(--mlc3-ease-spring, cubic-bezier(.34,1.56,.64,1)), opacity .14s ease, color .14s ease;
}
@media (max-width: 600px) {
  .medexp-dashboardPage a.mlc3-focus-row {
    grid-template-columns: 10px minmax(0, 1fr) 60px 38px !important;
    gap: 10px !important;
  }
  .medexp-dashboardPage .mlc3-focus-row__arrow { display: none; }
}

/* Mastery row bars — red/orange/green by score (matches Mockup A). */
.medexp-dashboardPage .mlc3-focus-card .mlc3-focus-card__bar > span,
.medexp-dashboardPage .mlc3-focus-card .tw-focusBar > span,
.medexp-dashboardPage .mlc3-focus-card [data-focus-bar] > span {
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}
.medexp-dashboardPage .mlc3-focus-card [data-focus-row][data-pct]:where([data-pct^="0"], [data-pct^="1"], [data-pct^="2"], [data-pct^="3"], [data-pct^="4"], [data-pct="50"]) .mlc3-focus-card__bar > span,
.medexp-dashboardPage .mlc3-focus-card [data-focus-row][data-pct]:where([data-pct^="0"], [data-pct^="1"], [data-pct^="2"], [data-pct^="3"], [data-pct^="4"], [data-pct="50"]) [data-focus-bar] > span {
  background: linear-gradient(90deg, #dc2626, #ef4444) !important;
}
.medexp-dashboardPage .mlc3-focus-card [data-focus-row][data-pct]:where([data-pct^="7"], [data-pct^="8"], [data-pct^="9"], [data-pct="100"]) .mlc3-focus-card__bar > span,
.medexp-dashboardPage .mlc3-focus-card [data-focus-row][data-pct]:where([data-pct^="7"], [data-pct^="8"], [data-pct^="9"], [data-pct="100"]) [data-focus-bar] > span {
  background: linear-gradient(90deg, var(--mlc3-brand-teal, #00a676), #16a34a) !important;
}

/* ---------------------------------------------------------------
 * 26. v0.7.4.0 — Sidebar + Topbar shell mockup-match.
 *     Restyles .tw-sidebar (.tw-navlink active = gradient teal pill,
 *     ACCOUNT divider before Account/Billing/Support/Sign out) and
 *     .tw-topbar (status chips, bell, user pill polish, optional
 *     search input). Course switcher gets a softer card surface.
 * --------------------------------------------------------------- */

/* ───── 26a. Sidebar — items + active pill ─────
   v0.7.6.3: Force sidebar visible with maximum specificity. The theme
   uses a `is-nav-open` toggle pattern that defaults to `width: 0`. We
   override every theme rule with html-body-rooted selectors to win the
   cascade no matter what state class the theme sets. */
@media (min-width: 901px) {
  html body .medexp-dashboardPage aside.tw-sidebar,
  html body.medexp-dashboard aside.tw-sidebar,
  html body .tw-shell aside.tw-sidebar,
  html body .medexp-dashboardPage .tw-shell aside.tw-sidebar {
    padding: 18px 14px !important;
    background: var(--mlc3-surface, #fff) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: 30 !important;
    border-right: 1px solid var(--mlc3-border, #e5e9f0) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Push the main content right by sidebar width so layout doesn't break */
  html body .medexp-dashboardPage main.tw-main,
  html body .medexp-dashboardPage .tw-shell > main.tw-main,
  html body .medexp-dashboardPage .tw-shell > .flex > main {
    margin-left: 240px !important;
  }
  /* Account for WordPress admin bar (32px) */
  body.admin-bar .medexp-dashboardPage aside.tw-sidebar {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
    max-height: calc(100vh - 32px) !important;
  }
}
/* v0.7.7.6: On iPhone-class viewports (≤900px), the sidebar is a
   slide-in drawer hidden by default. Burger opens it, X (top-right
   of the drawer) or backdrop click closes it. The bottom-tab nav
   handles primary navigation so the drawer is for secondary access. */
@media (max-width: 900px) {
  /* Hidden default position — translated off the left edge */
  html body .medexp-dashboardPage aside.tw-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 320px) !important;
    max-width: min(86vw, 320px) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    transform: translateX(-100%) !important;
    transition: transform .26s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)) !important;
    z-index: 1100 !important;
    background: var(--mlc3-surface, #fff) !important;
    padding: 22px 18px !important;
    box-shadow: 0 22px 48px -12px rgba(15,23,42,.30) !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  /* Open state — body class toggles drawer in */
  html body.mlc3-mobile-nav-open .medexp-dashboardPage aside.tw-sidebar {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Backdrop overlay (rendered as a body::before pseudo when nav is open) */
  body.mlc3-mobile-nav-open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(11, 19, 36, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1090;
    animation: mlc3-fade-in .2s ease both;
  }
  /* Lock body scroll while drawer is open */
  body.mlc3-mobile-nav-open { overflow: hidden !important; }

  /* Move the X button to the TOP-RIGHT of the drawer */
  html body .medexp-dashboardPage aside.tw-sidebar .tw-navClose,
  html body .medexp-dashboardPage aside.tw-sidebar [data-action="nav-close"],
  html body .medexp-dashboardPage aside.tw-sidebar button.tw-btn-ghost.tw-navClose {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 6px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    background: var(--mlc3-surface-2, #f8fbfd) !important;
    border: 1px solid var(--mlc3-border, #e5e9f0) !important;
    color: var(--mlc3-text-soft, #1f2937) !important;
    z-index: 5 !important;
    display: grid !important;
    place-items: center !important;
  }
  html body .medexp-dashboardPage aside.tw-sidebar .tw-navClose:hover,
  html body .medexp-dashboardPage aside.tw-sidebar [data-action="nav-close"]:hover {
    background: var(--mlc3-surface, #fff) !important;
    border-color: rgba(0, 166, 118, .30) !important;
  }
  /* Brand block has space for the X */
  html body .medexp-dashboardPage aside.tw-sidebar .tw-brandLink,
  html body .medexp-dashboardPage aside.tw-sidebar > a:first-child {
    margin-right: 48px !important;
  }
  /* Roomier nav items so they don't look squeezed */
  html body .medexp-dashboardPage aside.tw-sidebar .tw-navlink {
    padding: 13px 14px !important;
    font-size: 15px !important;
    margin-bottom: 2px !important;
  }
  html body .medexp-dashboardPage aside.tw-sidebar .tw-navlink .tw-navlink__ico,
  html body .medexp-dashboardPage aside.tw-sidebar .tw-navlink svg {
    width: 22px !important;
    height: 22px !important;
  }
  /* Main content does NOT shift on mobile */
  html body .medexp-dashboardPage main.tw-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Hide topbar offset/sidebar-offset rules — topbar fills full width */
  html body .medexp-dashboardPage .tw-topbar {
    left: 0 !important;
  }

  /* v0.7.8.1: Account for the WordPress admin bar (46px on mobile/≤782px,
     32px on tablet 783–900px). Without this offset the drawer sits BEHIND
     the admin bar, which hides the X close button at top:12px. */
  html body.admin-bar .medexp-dashboardPage aside.tw-sidebar {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
    max-height: calc(100vh - 46px) !important;
    padding-top: 28px !important;
  }
  /* The admin bar is 32px from 601px–782px (tablet portrait+). */
  @media (min-width: 601px) and (max-width: 900px) {
    html body.admin-bar .medexp-dashboardPage aside.tw-sidebar {
      top: 32px !important;
      height: calc(100vh - 32px) !important;
      max-height: calc(100vh - 32px) !important;
    }
  }
  /* Make the X close button bigger + obvious so the user can never miss
     it. v0.7.8.1: bump size, stronger contrast, sit clearly above brand. */
  html body .medexp-dashboardPage aside.tw-sidebar .tw-navClose,
  html body .medexp-dashboardPage aside.tw-sidebar [data-action="nav-close"],
  html body .medexp-dashboardPage aside.tw-sidebar button.tw-btn-ghost.tw-navClose {
    top: 14px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
    background: var(--mlc3-surface, #fff) !important;
    border: 1px solid var(--mlc3-border, #e5e9f0) !important;
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .14) !important;
  }
  html body .medexp-dashboardPage aside.tw-sidebar .tw-navClose svg,
  html body .medexp-dashboardPage aside.tw-sidebar [data-action="nav-close"] svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--mlc3-text, #0b1324) !important;
  }
  /* Brand wordmark gets MORE breathing room from the X */
  html body .medexp-dashboardPage aside.tw-sidebar .tw-brandLink,
  html body .medexp-dashboardPage aside.tw-sidebar > a:first-child {
    margin-right: 56px !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
  }
}

/* ───── 26a-thin. v0.7.6.1: Thin topbar offset right of fixed sidebar.
   The topbar is a sibling of the main content (not inside it), so the
   margin-left:240px on .tw-main doesn't shift the topbar. We make the
   topbar position:fixed starting at left:240px (sidebar width), so it
   sits next to the sidebar instead of covering it. Force single-row
   layout and slim height. */
@media (min-width: 901px) {
  .medexp-dashboardPage .tw-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 240px !important;
    right: 0 !important;
    z-index: 40 !important;
    padding: 6px 16px !important;
    min-height: 56px !important;
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
  }
  /* WordPress admin bar 32px offset */
  body.admin-bar .medexp-dashboardPage .tw-topbar {
    top: 32px !important;
  }
  /* Push main content down so it doesn't slide under the fixed topbar */
  .medexp-dashboardPage .tw-main {
    padding-top: 64px !important;
  }
  body.admin-bar .medexp-dashboardPage .tw-main {
    padding-top: 64px !important; /* topbar is just below admin bar, so 64 still works */
  }
}
.medexp-dashboardPage .tw-topbar__inner {
  padding: 0 !important;
  min-height: 48px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
}
.medexp-dashboardPage .tw-topbarHead {
  display: none !important;
}
/* Hide the "Course" label preceding the course switcher in topbar — it
   bloats horizontal space and the dropdown trigger is self-explanatory. */
.medexp-dashboardPage .tw-topbar .tw-courseTopSwitch__label {
  display: none !important;
}
/* Make the course switcher in topbar more compact */
.medexp-dashboardPage .tw-topbar .tw-courseTopSwitch {
  flex: 0 1 auto !important;
}
.medexp-dashboardPage .tw-topbar .tw-courseDropdown__btn {
  padding: 7px 12px !important;
  max-width: 240px !important;
  font-size: 13px !important;
}
.medexp-dashboardPage .tw-topbar .tw-courseDropdown__text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Compact bell + actions */
.medexp-dashboardPage .tw-topbar .tw-topbarActions {
  flex: 0 0 auto !important;
  gap: 6px !important;
}
.medexp-dashboardPage .tw-topbar .tw-userMenu__name {
  max-width: 8rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Hide Logo + brand link in topbarLeft (it's already in sidebar) */
.medexp-dashboardPage .tw-topbar .tw-topbarLeft .tw-topbarLogo,
.medexp-dashboardPage .tw-topbar .tw-topbarLeft .tw-brandLink {
  display: none !important;
}
/* Topbar left becomes very compact — just the burger menu */
.medexp-dashboardPage .tw-topbar .tw-topbarLeft {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  width: auto !important;
  max-width: 60px !important;
  gap: 8px !important;
}

/* v0.7.6.3: KEEP the burger visible (user couldn't toggle sidebar
   without it). On desktop the burger may not actually need to do
   anything since sidebar is permanently visible — but keep it as a
   visual affordance. */

/* v0.7.6.2: Force margin-left on main with maximum specificity, since
   the previous selectors weren't winning. Cover all known main element
   selectors. */
@media (min-width: 901px) {
  .medexp-dashboardPage main.tw-main,
  .medexp-dashboardPage > .tw-shell > main.tw-main,
  body .medexp-dashboardPage main.tw-main {
    margin-left: 240px !important;
  }
}

/* v0.7.6.2: Make the topbar course switcher dropdown menu wider so the
   course titles aren't truncated to "BCMTMS P..." etc. */
.medexp-dashboardPage .tw-topbar .tw-courseDropdown__menu,
.medexp-dashboardPage .tw-topbar .tw-courseDropdown[data-course-dropdown] .tw-courseDropdown__menu {
  min-width: 360px !important;
  max-width: 440px !important;
  width: 380px !important;
  right: 0 !important;
  left: auto !important;
}
.medexp-dashboardPage .tw-sidebar .tw-navlink {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  font-family: 'Rethink Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  color: var(--mlc3-text-soft, #1f2937) !important;
  -webkit-text-fill-color: var(--mlc3-text-soft, #1f2937) !important;
  text-decoration: none !important;
  transition:
    background .15s ease,
    color .15s ease,
    transform .08s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)) !important;
}
.medexp-dashboardPage .tw-sidebar .tw-navlink:hover {
  background: rgba(0, 166, 118, .06) !important;
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  transform: translateX(2px);
}
/* v0.7.5.1: ultra-specific selector — beats theme's body.medexp-dashboard
   .tw-sidebar .tw-navlink.is-active rule that was setting navy via
   background-color + a separate background-image overlay. Explicitly
   sets background-color, background-image, AND box-shadow with !important. */
html body.medexp-dashboard .medexp-dashboardPage .tw-sidebar a.tw-navlink.is-active,
html body .medexp-dashboardPage .tw-sidebar a.tw-navlink.is-active,
.medexp-dashboardPage .tw-sidebar a.tw-navlink.is-active {
  background-color: var(--mlc3-brand-teal, #00a676) !important;
  background-image: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676) 0%, var(--mlc3-brand-teal-dark, #007e5a) 100%) !important;
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676) 0%, var(--mlc3-brand-teal-dark, #007e5a) 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 8px 18px -8px rgba(0, 166, 118, .55) !important;
  transform: none !important;
  border-color: transparent !important;
}
.medexp-dashboardPage .tw-sidebar .tw-navlink .tw-navlink__ico,
.medexp-dashboardPage .tw-sidebar .tw-navlink svg {
  width: 20px !important;
  height: 20px !important;
  color: currentColor !important;
  flex: none;
}

/* v0.7.5.3: ACCOUNT divider — injected by JS as a dedicated
   `.mlc3-sidebar-section` element placed before the Account/Billing/
   Support/Sign-out group. Cleaner than the previous ::before pseudo
   element which was overlapping the navlink. */
.medexp-dashboardPage .tw-sidebar .mlc3-sidebar-section {
  margin: 18px 14px 6px;
  padding-top: 14px;
  border-top: 1px solid var(--mlc3-border-soft, #eef1f6);
  font-family: 'Rethink Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mlc3-faint, #94a3b8);
  pointer-events: none;
  user-select: none;
}
.medexp-dashboardPage .tw-sidebar .mlc3-sidebar-section:first-child {
  border-top: 0;
  margin-top: 6px;
  padding-top: 0;
}

/* ───── 26b. Topbar — refined surface + status chips ───── */
.medexp-dashboardPage .tw-topbar {
  background: rgba(255, 255, 255, .85) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(229, 233, 240, .8) !important;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* User-menu pill polish */
.medexp-dashboardPage .tw-userMenu__btn {
  border-radius: 999px !important;
  padding: 4px 12px 4px 4px !important;
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  font: 700 13px/1 'Rethink Sans', sans-serif !important;
  transition: transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)), box-shadow .12s ease !important;
}
.medexp-dashboardPage .tw-userMenu__btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .06),
    0 8px 22px -10px rgba(15, 23, 42, .18) !important;
}
.medexp-dashboardPage .tw-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c)) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}

/* Notification bell */
.medexp-dashboardPage .tw-notifyBell,
.medexp-dashboardPage button[aria-label="Notifications"],
.medexp-dashboardPage .tw-notifications__bell {
  position: relative;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)), box-shadow .12s ease;
}
.medexp-dashboardPage .tw-notifyBell:hover,
.medexp-dashboardPage button[aria-label="Notifications"]:hover,
.medexp-dashboardPage .tw-notifications__bell:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .06),
    0 8px 22px -10px rgba(15, 23, 42, .18);
}

/* v0.7.7.1: Style the existing .tw-expPill (rendered server-side) to look
   like the mockup's warn/danger chips. Inherits the existing tooltip +
   click-to-renew behavior so we don't duplicate the chip in JS. */
.medexp-dashboardPage .tw-expPillWrap .tw-expPill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  font: 700 12px/1 'Rethink Sans', sans-serif !important;
  letter-spacing: .02em !important;
  color: var(--mlc3-text-soft, #1f2937) !important;
  -webkit-text-fill-color: var(--mlc3-text-soft, #1f2937) !important;
  cursor: pointer;
  transition:
    transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)),
    box-shadow .15s ease,
    background .15s ease,
    border-color .15s ease !important;
  white-space: nowrap;
}
.medexp-dashboardPage .tw-expPillWrap .tw-expPill:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .05),
    0 6px 16px -10px rgba(15, 23, 42, .20);
}
/* Warn (≤30 days remaining): yellow/amber */
.medexp-dashboardPage .tw-expPillWrap .tw-expPill.is-warn,
.medexp-dashboardPage .tw-expPillWrap .tw-expPill.is-warn:hover {
  background: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #92400e !important;
  -webkit-text-fill-color: #92400e !important;
}
.medexp-dashboardPage .tw-expPillWrap .tw-expPill.is-warn::before {
  content: "\23F3"; /* hourglass */
  font-size: 13px;
  line-height: 1;
}
/* Danger (already expired): red with shake */
.medexp-dashboardPage .tw-expPillWrap .tw-expPill.is-expired,
.medexp-dashboardPage .tw-expPillWrap .tw-expPill.is-danger {
  background: #fee2e2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
  -webkit-text-fill-color: #991b1b !important;
}
.medexp-dashboardPage .tw-expPillWrap .tw-expPill.is-expired::before,
.medexp-dashboardPage .tw-expPillWrap .tw-expPill.is-danger::before {
  content: "\26A0"; /* warning */
  font-size: 13px;
  line-height: 1;
  animation: mlc3-shake 1.5s ease infinite;
}
.medexp-dashboardPage .tw-expPillWrap[style*="display:none"] {
  display: none !important;
}

/* v0.7.7.1: Mochi floater button — guarantee transparent in all states.
   Theme button styles were applying a blue background. */
.mlc3-mochi-floater__btn,
.mlc3-mochi-floater__btn:hover,
.mlc3-mochi-floater__btn:focus,
.mlc3-mochi-floater__btn:active,
.mlc3-mochi-floater__btn:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 18px rgba(0, 166, 118, .30)) !important;
}
.mlc3-mochi-floater__btn:focus-visible {
  filter:
    drop-shadow(0 0 0 3px rgba(255,255,255,1))
    drop-shadow(0 0 0 5px rgba(0, 166, 118, .9))
    drop-shadow(0 8px 18px rgba(0, 166, 118, .30)) !important;
}

/* v0.7.7.1: Wider course switcher trigger — match the dropdown width
   so titles don't truncate to "BCMTMS P..." prematurely. */
.medexp-dashboardPage .tw-topbar .tw-courseDropdown__btn {
  max-width: 360px !important;
  min-width: 240px !important;
}

/* Status chip primitive (used by streak / Lv / EXP / expired) */
.medexp-dashboardPage .mlc3-topchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  font: 700 12px/1 'Rethink Sans', sans-serif;
  color: var(--mlc3-text-soft, #1f2937);
  -webkit-text-fill-color: var(--mlc3-text-soft, #1f2937);
  text-decoration: none;
  transition:
    transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)),
    box-shadow .12s ease;
  white-space: nowrap;
}
.medexp-dashboardPage .mlc3-topchip:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .05),
    0 6px 16px -10px rgba(15, 23, 42, .20);
}
.medexp-dashboardPage .mlc3-topchip__emoji { font-size: 14px; line-height: 1; }
.medexp-dashboardPage .mlc3-topchip.is-warn {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
  -webkit-text-fill-color: #92400e;
}
.medexp-dashboardPage .mlc3-topchip.is-danger {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
  -webkit-text-fill-color: #991b1b;
}
.medexp-dashboardPage .mlc3-topchip.is-danger .mlc3-topchip__emoji {
  animation: mlc3-shake 1.5s ease infinite;
}
@keyframes mlc3-shake {
  0%, 92%, 100% { transform: rotate(0); }
  94%           { transform: rotate(-8deg); }
  96%           { transform: rotate(8deg); }
  98%           { transform: rotate(-4deg); }
}

/* Topbar search input (rendered by topbar JS) */
.medexp-dashboardPage .mlc3-topsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  max-width: 420px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--mlc3-surface-2, #f8fbfd);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
  margin-left: 12px;
}
.medexp-dashboardPage .mlc3-topsearch:focus-within {
  background: var(--mlc3-surface, #fff);
  border-color: rgba(0, 166, 118, .40);
  box-shadow: 0 0 0 4px rgba(0, 166, 118, .08);
}
.medexp-dashboardPage .mlc3-topsearch input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font: 500 14px/1.4 'Rethink Sans', sans-serif;
  color: var(--mlc3-text, #0b1324);
}
.medexp-dashboardPage .mlc3-topsearch input::placeholder {
  color: var(--mlc3-faint, #94a3b8);
}

@media (max-width: 720px) {
  .medexp-dashboardPage .mlc3-topsearch { display: none; }
  .medexp-dashboardPage .mlc3-topchip:not(.is-danger) { display: none; }
}

/* v0.7.6.0 — Unified search results dropdown attached to the topbar input. */
.medexp-dashboardPage .mlc3-topsearch__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .06),
    0 24px 48px -16px rgba(15, 23, 42, .26);
  padding: 8px;
  max-height: 480px;
  overflow-y: auto;
  z-index: 60;
  font-family: 'Rethink Sans', sans-serif;
}
.medexp-dashboardPage .mlc3-topsearch__group + .mlc3-topsearch__group {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--mlc3-border-soft, #eef1f6);
}
.medexp-dashboardPage .mlc3-topsearch__group-label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mlc3-faint, #94a3b8);
  padding: 6px 12px 4px;
}
.medexp-dashboardPage a.mlc3-topsearch__result {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  transition: background .12s ease;
}
.medexp-dashboardPage a.mlc3-topsearch__result:hover,
.medexp-dashboardPage a.mlc3-topsearch__result:focus-visible {
  background: var(--mlc3-surface-2, #f8fbfd);
  outline: none;
}
.medexp-dashboardPage .mlc3-topsearch__monogram {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--mlc3-brand-teal-soft, #e6f7f1), var(--mlc3-brand-blue-soft, #e9eef9));
  color: var(--mlc3-brand-teal-dark, #007e5a);
  font: 800 12px/1 'Rethink Sans', sans-serif;
  display: grid;
  place-items: center;
  flex: none;
}
.medexp-dashboardPage .mlc3-topsearch__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--mlc3-surface-2, #f8fbfd);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  font-size: 16px;
  display: grid;
  place-items: center;
  flex: none;
}
.medexp-dashboardPage .mlc3-topsearch__icon--lesson {
  background: var(--mlc3-brand-blue-soft, #e9eef9);
  border-color: rgba(26, 79, 156, .20);
}
.medexp-dashboardPage .mlc3-topsearch__icon--qbank {
  background: #fef3c7;
  border-color: #fde68a;
}
.medexp-dashboardPage .mlc3-topsearch__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.medexp-dashboardPage .mlc3-topsearch__title {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--mlc3-text, #0b1324);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.medexp-dashboardPage .mlc3-topsearch__sub {
  font-weight: 500;
  font-size: 11.5px;
  color: var(--mlc3-muted, #5f6b7a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.medexp-dashboardPage .mlc3-topsearch__arrow {
  font-weight: 700;
  font-size: 14px;
  color: var(--mlc3-faint, #94a3b8);
}
.medexp-dashboardPage .mlc3-topsearch__empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--mlc3-muted, #5f6b7a);
  text-align: center;
}
.medexp-dashboardPage .mlc3-topsearch__viewall {
  margin-top: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--mlc3-border-soft, #eef1f6);
  text-align: center;
}
.medexp-dashboardPage .mlc3-topsearch__viewall a {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--mlc3-brand-teal-dark, #007e5a);
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a);
  text-decoration: none;
}

/* ---------------------------------------------------------------
 * 27. v0.7.5.0 — Auth gate skin + Expired-state paused hero.
 *
 *     a) Skin .tw-authGate / .tw-authCard with the mockup's
 *        cleaner 3-card auth-gate (kicker pill, big title, lift
 *        cards on hover, gradient brand logo).
 *
 *     b) .mlc3-resume.mlc3-resume--paused — red→amber gradient
 *        variant for $is_all_expired === true. Inserts above the
 *        regular resume hero (which doesn't render when expired).
 * --------------------------------------------------------------- */

/* ───── 27a. Auth gate (logged-out) ───── */
.medexp-dashboardPage .tw-authGate {
  max-width: 1080px;
  margin: 24px auto;
  padding: 28px clamp(16px, 3vw, 36px);
}
.medexp-dashboardPage .tw-authHero {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.medexp-dashboardPage .tw-authBrand {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(0, 166, 118, .50);
  flex: none;
}
.medexp-dashboardPage .tw-authBrandLogo {
  max-width: 36px;
  max-height: 36px;
  filter: brightness(0) invert(1);
}
.medexp-dashboardPage .tw-authHeroText { min-width: 0; flex: 1 1 280px; }
.medexp-dashboardPage .tw-authHeroText .tw-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--mlc3-brand-teal-soft, #e6f7f1);
  color: var(--mlc3-brand-teal-dark, #007e5a);
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a);
  font: 700 11px/1 'Rethink Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.medexp-dashboardPage .tw-authTitle {
  margin: 0 !important;
  font: 800 clamp(1.7rem, 3vw + .5rem, 2.6rem) / 1.1 'Rethink Sans', sans-serif !important;
  letter-spacing: -.018em !important;
  color: var(--mlc3-text, #0b1324) !important;
  -webkit-text-fill-color: var(--mlc3-text, #0b1324) !important;
}
.medexp-dashboardPage .tw-authSubtitle {
  font: 500 16px/1.5 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a) !important;
  margin: 8px 0 0 !important;
  max-width: 60ch;
}
.medexp-dashboardPage .tw-authCards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 20px !important;
}
@media (max-width: 880px) {
  .medexp-dashboardPage .tw-authCards { grid-template-columns: 1fr !important; }
}
.medexp-dashboardPage .tw-authCard {
  background: var(--mlc3-surface, #fff) !important;
  border: 1px solid var(--mlc3-border, #e5e9f0) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .05),
    0 1px 3px rgba(15, 23, 42, .04) !important;
  transition:
    transform .15s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)),
    box-shadow .15s ease,
    border-color .15s ease !important;
}
.medexp-dashboardPage .tw-authCard:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .06),
    0 22px 44px -22px rgba(15, 23, 42, .26) !important;
  border-color: rgba(0, 166, 118, .30) !important;
}
.medexp-dashboardPage .tw-authCard__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--mlc3-brand-teal-soft, #e6f7f1), rgba(0, 166, 118, .06));
  color: var(--mlc3-brand-teal-dark, #007e5a);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.medexp-dashboardPage .tw-authCard:nth-child(2) .tw-authCard__icon {
  background: linear-gradient(135deg, var(--mlc3-brand-blue-soft, #e9eef9), rgba(26, 79, 156, .06));
  color: var(--mlc3-brand-blue, #1a4f9c);
}
.medexp-dashboardPage .tw-authCard:nth-child(3) .tw-authCard__icon {
  background: linear-gradient(135deg, #fef3c7, rgba(245, 158, 11, .06));
  color: #d97706;
}
.medexp-dashboardPage .tw-authCard__icon svg {
  width: 22px;
  height: 22px;
}
.medexp-dashboardPage .tw-authCard__title {
  font: 800 18px/1.2 'Rethink Sans', sans-serif !important;
  letter-spacing: -.012em !important;
  color: var(--mlc3-text, #0b1324) !important;
  -webkit-text-fill-color: var(--mlc3-text, #0b1324) !important;
  margin: 0 0 6px !important;
}
.medexp-dashboardPage .tw-authCard__body {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--mlc3-muted, #5f6b7a) !important;
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a) !important;
  margin: 0 0 18px !important;
  flex: 1;
}
.medexp-dashboardPage .tw-authCard__actions .tw-btn-primary {
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 11px 16px !important;
  font: 700 14px/1 'Rethink Sans', sans-serif !important;
  box-shadow: 0 8px 20px -8px rgba(0, 166, 118, .55) !important;
  transition:
    transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)),
    box-shadow .15s ease !important;
}
.medexp-dashboardPage .tw-authCard__actions .tw-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(0, 166, 118, .65) !important;
}
.medexp-dashboardPage .tw-authCard__actions .tw-btn-secondary,
.medexp-dashboardPage .tw-authCard__foot .tw-authLink {
  border-radius: 12px !important;
}
.medexp-dashboardPage .tw-authFinePrint {
  margin-top: 22px;
  font-size: 14px;
  color: var(--mlc3-muted, #5f6b7a);
  text-align: center;
}
.medexp-dashboardPage .tw-authFinePrint a,
.medexp-dashboardPage .tw-authLink {
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.medexp-dashboardPage .tw-authFinePrint a:hover,
.medexp-dashboardPage .tw-authLink:hover {
  text-decoration: underline !important;
}

/* ───── 27b. Paused hero (expired-state) variant ───── */
.medexp-dashboardPage .mlc3-resume.mlc3-resume--paused {
  background:
    linear-gradient(135deg, #dc2626 0%, #f59e0b 100%) !important;
  background-size: 200% 200% !important;
  box-shadow:
    0 14px 38px -14px rgba(220, 38, 38, .45),
    0 28px 56px -28px rgba(245, 158, 11, .35) !important;
}
.medexp-dashboardPage .mlc3-resume.mlc3-resume--paused .mlc3-resume__dot.is-warn {
  background: #fef3c7 !important;
  box-shadow: 0 0 0 4px rgba(254, 243, 199, .25);
}
.medexp-dashboardPage .mlc3-resume.mlc3-resume--paused .mlc3-resume__cta {
  background: #fff !important;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
}
.medexp-dashboardPage .mlc3-resume.mlc3-resume--paused .mlc3-resume__cta:hover {
  color: #991b1b !important;
  -webkit-text-fill-color: #991b1b !important;
}
.medexp-dashboardPage .mlc3-resume.mlc3-resume--paused .mlc3-resume__cta-secondary {
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
}
.medexp-dashboardPage .mlc3-resume.mlc3-resume--paused .mlc3-resume__cta-secondary:hover {
  background: rgba(255, 255, 255, .22) !important;
}

/* ---------------------------------------------------------------
 * 28-modal. v0.7.7.2 — Study plan setup modal.
 *     Opens from the countdown card / SET EXAM DATE button. Mochi
 *     avatar + 3 fields (date, days/week, minutes/session) + a
 *     prominent gradient submit. Reloads on success.
 * --------------------------------------------------------------- */
.mlc3-spm {
  position: fixed; inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.mlc3-spm.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mlc3-spm__backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 19, 36, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.mlc3-spm__dialog {
  position: relative;
  width: min(440px, 96vw);
  background: var(--mlc3-surface, #fff);
  border-radius: 24px;
  padding: 32px clamp(20px, 3vw + 12px, 36px) 24px;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .12),
    0 32px 64px -16px rgba(15, 23, 42, .35);
  text-align: center;
  font-family: 'Rethink Sans', sans-serif;
  transform: translateY(12px) scale(.96);
  opacity: 0;
  transition:
    transform .35s var(--mlc3-ease-spring, cubic-bezier(.34,1.56,.64,1)),
    opacity .25s ease;
}
.mlc3-spm.is-open .mlc3-spm__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.mlc3-spm__x {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--mlc3-faint, #94a3b8);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.mlc3-spm__x:hover {
  background: var(--mlc3-surface-2, #f8fbfd);
  color: var(--mlc3-text, #0b1324);
}
.mlc3-spm__avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 8px 18px rgba(0, 166, 118, .28));
  animation: mlc3-mochi-bob 3.2s ease-in-out infinite alternate;
}
.mlc3-spm__avatar svg { width: 100%; height: 100%; display: block; }
.mlc3-spm__title {
  margin: 0 !important;
  font: 800 1.4rem/1.2 'Rethink Sans', sans-serif !important;
  letter-spacing: -.014em;
  color: var(--mlc3-text, #0b1324);
}
.mlc3-spm__sub {
  margin: 8px 0 22px !important;
  font: 500 14px/1.5 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-muted, #5f6b7a);
}

.mlc3-spm__form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mlc3-spm__field { display: block; }
.mlc3-spm__label {
  display: block;
  font: 700 13px/1.3 'Rethink Sans', sans-serif;
  color: var(--mlc3-text, #0b1324);
  margin-bottom: 8px;
}
.mlc3-spm__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--mlc3-border, #e5e9f0);
  background: var(--mlc3-surface-2, #f8fbfd);
  font: 600 15px/1.2 'Rethink Sans', sans-serif;
  color: var(--mlc3-text, #0b1324);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-sizing: border-box;
}
.mlc3-spm__input:focus {
  outline: none;
  border-color: var(--mlc3-brand-teal, #00a676);
  background: var(--mlc3-surface, #fff);
  box-shadow: 0 0 0 4px rgba(0, 166, 118, .12);
}

.mlc3-spm__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.mlc3-spm__chip {
  min-width: 44px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--mlc3-border, #e5e9f0);
  background: var(--mlc3-surface, #fff);
  font: 700 13px/1 'Rethink Sans', sans-serif;
  color: var(--mlc3-text-soft, #1f2937);
  cursor: pointer;
  transition:
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1));
}
.mlc3-spm__chip:hover {
  border-color: rgba(0, 166, 118, .35);
  transform: translateY(-1px);
}
.mlc3-spm__chip.is-on {
  background: var(--mlc3-brand-teal-soft, #e6f7f1);
  border-color: var(--mlc3-brand-teal, #00a676);
  color: var(--mlc3-brand-teal-dark, #007e5a);
  box-shadow: 0 0 0 3px rgba(0, 166, 118, .12);
}

.mlc3-spm__submit {
  margin-top: 10px;
  padding: 14px 20px;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a));
  color: #fff;
  font: 800 15px/1 'Rethink Sans', sans-serif;
  letter-spacing: -.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 12px 24px -10px rgba(0, 166, 118, .55);
  transition:
    transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)),
    box-shadow .15s ease,
    opacity .15s ease;
}
.mlc3-spm__submit:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(0, 166, 118, .65); }
.mlc3-spm__submit:disabled,
.mlc3-spm__submit.is-busy { opacity: .7; cursor: progress; transform: none; }
.mlc3-spm__submit-icon { font-size: 16px; }
.mlc3-spm__arrow { transition: transform .15s var(--mlc3-ease-spring, cubic-bezier(.34,1.56,.64,1)); }
.mlc3-spm__submit:hover .mlc3-spm__arrow { transform: translateX(3px); }
.mlc3-spm__later {
  margin-top: 4px;
  background: transparent;
  border: 0;
  color: var(--mlc3-muted, #5f6b7a);
  font: 600 13px/1.3 'Rethink Sans', sans-serif;
  cursor: pointer;
  padding: 8px;
}
.mlc3-spm__later:hover { color: var(--mlc3-text, #0b1324); text-decoration: underline; }
.mlc3-spm__error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 10px;
  padding: 10px 12px;
  font: 600 13px/1.3 'Rethink Sans', sans-serif;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .mlc3-spm,
  .mlc3-spm__dialog,
  .mlc3-spm__avatar,
  .mlc3-spm__chip,
  .mlc3-spm__submit { animation: none !important; transition: none !important; transform: none !important; }
}

/* ---------------------------------------------------------------
 * 28-pre. v0.7.7.0 — Email reminders settings card.
 *     Lives in the Account tab. Frequency picker + per-type toggles
 *     + auto-save with 250 ms debounce, plus a success banner if
 *     arriving via the email unsubscribe link.
 * --------------------------------------------------------------- */
.medexp-dashboardPage .mlc3-email-prefs {
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  border-radius: 22px;
  padding: 24px clamp(18px, 2vw + 12px, 32px);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, .05),
    0 1px 2px rgba(15, 23, 42, .04);
  scroll-margin-top: 80px;
}
.medexp-dashboardPage .mlc3-email-prefs__banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 18px;
  font: 500 13.5px/1.45 'Rethink Sans', sans-serif;
  border: 1px solid;
  animation: mlc3-fade-up .35s var(--mlc3-ease-smooth, cubic-bezier(.4,0,.2,1)) both;
}
.medexp-dashboardPage .mlc3-email-prefs__banner.is-success {
  background: rgba(0, 166, 118, .07);
  border-color: rgba(0, 166, 118, .25);
  color: var(--mlc3-brand-teal-dark, #007e5a);
}
.medexp-dashboardPage .mlc3-email-prefs__banner svg { flex: none; margin-top: 2px; color: var(--mlc3-brand-teal, #00a676); }
.medexp-dashboardPage .mlc3-email-prefs__banner strong { font-weight: 800; }

.medexp-dashboardPage .mlc3-email-prefs__head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mlc3-border-soft, #eef1f6);
}
.medexp-dashboardPage .mlc3-email-prefs__icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--mlc3-brand-teal-soft, #e6f7f1), rgba(0, 166, 118, .08));
  color: var(--mlc3-brand-teal-dark, #007e5a);
  display: grid; place-items: center;
}
.medexp-dashboardPage .mlc3-email-prefs__title {
  margin: 0 !important;
  font: 800 18px/1.2 'Rethink Sans', sans-serif !important;
  letter-spacing: -.012em;
  color: var(--mlc3-text, #0b1324);
}
.medexp-dashboardPage .mlc3-email-prefs__sub {
  margin: 4px 0 0 !important;
  font: 500 13.5px/1.5 'Rethink Sans', sans-serif !important;
  color: var(--mlc3-muted, #5f6b7a);
  max-width: 60ch;
}

.medexp-dashboardPage .mlc3-email-prefs__section { margin-bottom: 22px; }
.medexp-dashboardPage .mlc3-email-prefs__section:last-of-type { margin-bottom: 0; }
.medexp-dashboardPage .mlc3-email-prefs__section-label {
  font: 700 11px/1 'Rethink Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mlc3-faint, #94a3b8);
  margin-bottom: 12px;
}

/* Frequency picker — radio cards */
.medexp-dashboardPage .mlc3-email-prefs__freq {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .medexp-dashboardPage .mlc3-email-prefs__freq { grid-template-columns: 1fr; }
}
.medexp-dashboardPage .mlc3-email-prefs__freq-opt {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--mlc3-border, #e5e9f0);
  background: var(--mlc3-surface-2, #f8fbfd);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)), box-shadow .15s ease;
}
.medexp-dashboardPage .mlc3-email-prefs__freq-opt:hover {
  border-color: rgba(0, 166, 118, .35);
  background: var(--mlc3-surface, #fff);
  transform: translateY(-1px);
}
.medexp-dashboardPage .mlc3-email-prefs__freq-opt.is-on {
  border-color: var(--mlc3-brand-teal, #00a676);
  background: rgba(0, 166, 118, .06);
  box-shadow: 0 0 0 3px rgba(0, 166, 118, .12);
}
.medexp-dashboardPage .mlc3-email-prefs__freq-opt input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.medexp-dashboardPage .mlc3-email-prefs__freq-radio {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--mlc3-border, #e5e9f0);
  background: var(--mlc3-surface, #fff);
  display: grid; place-items: center;
  margin-top: 1px;
  transition: border-color .15s ease, background .15s ease;
}
.medexp-dashboardPage .mlc3-email-prefs__freq-opt.is-on .mlc3-email-prefs__freq-radio {
  border-color: var(--mlc3-brand-teal, #00a676);
  background: var(--mlc3-brand-teal, #00a676);
}
.medexp-dashboardPage .mlc3-email-prefs__freq-opt.is-on .mlc3-email-prefs__freq-radio::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
}
.medexp-dashboardPage .mlc3-email-prefs__freq-title {
  display: block;
  font: 800 14px/1.2 'Rethink Sans', sans-serif;
  letter-spacing: -.008em;
  color: var(--mlc3-text, #0b1324);
}
.medexp-dashboardPage .mlc3-email-prefs__freq-sub {
  display: block;
  font: 500 12.5px/1.4 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
  margin-top: 2px;
}

/* Per-type toggle list */
.medexp-dashboardPage .mlc3-email-prefs__types {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--mlc3-border-soft, #eef1f6);
  border-radius: 14px;
  padding: 4px;
  background: var(--mlc3-surface, #fff);
}
.medexp-dashboardPage .mlc3-email-prefs__type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s ease;
}
.medexp-dashboardPage .mlc3-email-prefs__type:hover {
  background: var(--mlc3-surface-2, #f8fbfd);
}
.medexp-dashboardPage .mlc3-email-prefs__type-body { min-width: 0; }
.medexp-dashboardPage .mlc3-email-prefs__type-title {
  display: block;
  font: 700 14px/1.2 'Rethink Sans', sans-serif;
  color: var(--mlc3-text, #0b1324);
}
.medexp-dashboardPage .mlc3-email-prefs__type-sub {
  display: block;
  font: 500 12.5px/1.4 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
  margin-top: 2px;
}

/* Toggle switch */
.medexp-dashboardPage .mlc3-email-prefs__switch {
  position: relative;
  width: 42px; height: 24px;
  flex: none;
  cursor: pointer;
  outline: none;
}
.medexp-dashboardPage .mlc3-email-prefs__switch:focus-visible {
  box-shadow: 0 0 0 3px var(--mlc3-surface, #fff), 0 0 0 5px var(--mlc3-brand-teal, #00a676);
  border-radius: 999px;
}
.medexp-dashboardPage .mlc3-email-prefs__switch-track {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: var(--mlc3-border, #e5e9f0);
  transition: background .2s ease;
}
.medexp-dashboardPage .mlc3-email-prefs__switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
  transition: transform .22s var(--mlc3-ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.medexp-dashboardPage .mlc3-email-prefs__switch.is-on .mlc3-email-prefs__switch-track {
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a));
}
.medexp-dashboardPage .mlc3-email-prefs__switch.is-on .mlc3-email-prefs__switch-thumb {
  transform: translateX(18px);
}

/* Footer with save status */
.medexp-dashboardPage .mlc3-email-prefs__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--mlc3-border-soft, #eef1f6);
  flex-wrap: wrap;
}
.medexp-dashboardPage .mlc3-email-prefs__hint {
  font: 500 12.5px/1.4 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
}
.medexp-dashboardPage button.mlc3-email-prefs__save {
  display: none; /* auto-save by default — button shown only if needed */
}
.medexp-dashboardPage .mlc3-email-prefs__saved {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 166, 118, .12);
  color: var(--mlc3-brand-teal-dark, #007e5a);
  font: 700 12px/1 'Rethink Sans', sans-serif;
  animation: mlc3-fade-up .25s ease;
}
.medexp-dashboardPage .mlc3-email-prefs__saved[hidden] { display: none !important; }

/* When frequency=off, dim per-type toggles to indicate they're inactive */
.medexp-dashboardPage .mlc3-email-prefs[data-freq="off"] .mlc3-email-prefs__types,
.medexp-dashboardPage .mlc3-email-prefs[data-freq="off"] .mlc3-email-prefs__section:nth-of-type(2) {
  opacity: .5;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .medexp-dashboardPage .mlc3-email-prefs__freq-opt:hover,
  .medexp-dashboardPage .mlc3-email-prefs__switch-thumb,
  .medexp-dashboardPage .mlc3-email-prefs__banner,
  .medexp-dashboardPage .mlc3-email-prefs__saved {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
 * 28. v0.7.5.1 — Rich empty states for Recent activity and the
 *     Performance snapshot ("Mastery by topic" list).
 * --------------------------------------------------------------- */

/* Recent activity empty state — v0.7.8.2 redesign:
   - compact horizontal header (no big centered icon)
   - bigger, richer action cards (44px icons + Recommended tag)
   - 7-day streak preview at the bottom so the panel fills the column
     height instead of leaving a large white gap. */
.medexp-dashboardPage .mlc3-recent__empty--rich {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 14px 18px 18px;
  gap: 14px;
}
/* Compact header row: icon + title + sub stacked, all left-aligned */
.medexp-dashboardPage .mlc3-recent__empty-header {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top left, rgba(0, 166, 118, .07), transparent 60%),
    linear-gradient(135deg, rgba(0, 166, 118, .04), rgba(26, 79, 156, .04));
  border: 1px solid var(--mlc3-border-soft, #eef1f6);
}
.medexp-dashboardPage .mlc3-recent__empty--rich .mlc3-recent__empty-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px -6px rgba(0, 166, 118, .55);
}
.medexp-dashboardPage .mlc3-recent__empty--rich .mlc3-recent__empty-icon svg {
  width: 20px;
  height: 20px;
}
.medexp-dashboardPage .mlc3-recent__empty-headerText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.medexp-dashboardPage .mlc3-recent__empty--rich .mlc3-recent__empty-title {
  text-align: left;
  font: 800 15px/1.2 'Rethink Sans', sans-serif;
  letter-spacing: -.012em;
  margin: 0 !important;
  color: var(--mlc3-text, #0b1324);
}
.medexp-dashboardPage .mlc3-recent__empty--rich .mlc3-recent__empty-sub {
  text-align: left;
  font: 500 12px/1.4 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
  margin: 0 !important;
}
/* Action card stack */
.medexp-dashboardPage .mlc3-recent__empty-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.medexp-dashboardPage a.mlc3-recent__empty-action {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 14px;
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  text-decoration: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  position: relative;
  transition:
    transform .14s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)),
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}
.medexp-dashboardPage a.mlc3-recent__empty-action:hover {
  transform: translateY(-2px);
  background: var(--mlc3-surface, #fff);
  border-color: rgba(0, 166, 118, .35);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 14px 28px -14px rgba(0, 166, 118, .35);
}
/* Subtle accent bar on the recommended action */
.medexp-dashboardPage a.mlc3-recent__empty-action[data-empty-recommended="1"] {
  border-color: rgba(0, 166, 118, .30);
  background: linear-gradient(135deg, #fff, #f3fbf7);
}
.medexp-dashboardPage a.mlc3-recent__empty-action[data-empty-recommended="1"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
}
.medexp-dashboardPage .mlc3-recent__empty-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--mlc3-text-soft, #1f2937);
}
/* Hue per starter action so the icons feel intentional */
.medexp-dashboardPage .mlc3-recent__empty-action-icon--lesson {
  background: var(--mlc3-brand-blue-soft, #e9eef9);
  border-color: rgba(26, 79, 156, .18);
  color: var(--mlc3-brand-blue, #1a4f9c);
}
.medexp-dashboardPage .mlc3-recent__empty-action-icon--practice {
  background: var(--mlc3-brand-teal-soft, #e6f7f1);
  border-color: rgba(0, 166, 118, .20);
  color: var(--mlc3-brand-teal-dark, #007e5a);
}
.medexp-dashboardPage .mlc3-recent__empty-action-icon--flash {
  background: #ede9fe;
  border-color: #ddd6fe;
  color: #7c3aed;
}
.medexp-dashboardPage .mlc3-recent__empty-svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2 !important;
}
.medexp-dashboardPage .mlc3-recent__empty-action-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.medexp-dashboardPage .mlc3-recent__empty-action-titleRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.medexp-dashboardPage .mlc3-recent__empty-action-title {
  font: 700 14.5px/1.25 'Rethink Sans', sans-serif;
  letter-spacing: -.005em;
  color: var(--mlc3-text, #0b1324);
}
.medexp-dashboardPage .mlc3-recent__empty-action-tag {
  font: 700 9.5px/1 'Rethink Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mlc3-brand-teal-dark, #007e5a);
  background: rgba(0, 166, 118, .12);
  padding: 4px 7px;
  border-radius: 999px;
}
.medexp-dashboardPage .mlc3-recent__empty-action-sub {
  font: 500 12px/1.35 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
}
.medexp-dashboardPage .mlc3-recent__empty-action-arrow {
  font: 700 18px/1 'Rethink Sans', sans-serif;
  color: var(--mlc3-faint, #94a3b8);
  transition: transform .15s var(--mlc3-ease-spring, cubic-bezier(.34,1.56,.64,1)), color .15s ease;
}
.medexp-dashboardPage a.mlc3-recent__empty-action:hover .mlc3-recent__empty-action-arrow {
  transform: translateX(3px);
  color: var(--mlc3-brand-teal, #00a676);
}

/* 7-day streak preview — pinned to the bottom of the panel so the
   empty state fills the full column height instead of leaving a gap. */
.medexp-dashboardPage .mlc3-recent__streakPreview {
  margin-top: auto;
  padding: 12px 14px 10px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top right, rgba(255, 159, 28, .08), transparent 65%),
    linear-gradient(135deg, #fff8ed, #fff);
  border: 1px dashed rgba(255, 159, 28, .35);
}
.medexp-dashboardPage .mlc3-recent__streakPreview-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 12px/1.3 'Rethink Sans', sans-serif;
  color: var(--mlc3-text, #0b1324);
  margin-bottom: 8px;
}
.medexp-dashboardPage .mlc3-recent__streakPreview-head svg {
  color: #ff9f1c;
  flex-shrink: 0;
}
.medexp-dashboardPage .mlc3-recent__streakPreview-head strong {
  font-weight: 800;
  color: var(--mlc3-text, #0b1324);
}
.medexp-dashboardPage .mlc3-recent__streakPreview-hint {
  margin-left: auto;
  font: 500 11px/1 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
}
.medexp-dashboardPage .mlc3-recent__streakPreview-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.medexp-dashboardPage .mlc3-recent__streakDay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 0 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--mlc3-border-soft, #eef1f6);
}
.medexp-dashboardPage .mlc3-recent__streakDay.is-today {
  background: linear-gradient(180deg, #ff9f1c, #ff7a00);
  border-color: transparent;
  box-shadow: 0 6px 14px -8px rgba(255, 122, 0, .55);
}
.medexp-dashboardPage .mlc3-recent__streakDay-label {
  font: 700 10px/1 'Rethink Sans', sans-serif;
  letter-spacing: .04em;
  color: var(--mlc3-muted, #5f6b7a);
  text-transform: uppercase;
}
.medexp-dashboardPage .mlc3-recent__streakDay.is-today .mlc3-recent__streakDay-label {
  color: #fff;
}
.medexp-dashboardPage .mlc3-recent__streakDay-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--mlc3-border, #e5e9f0);
}
.medexp-dashboardPage .mlc3-recent__streakDay.is-today .mlc3-recent__streakDay-dot {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}
/* Make the empty container itself a flex column so the streak preview's
   margin-top:auto pushes it down to fill the panel's full height. */
.medexp-dashboardPage .mlc3-recent__empty--rich {
  min-height: 100%;
}
.medexp-dashboardPage .mlc3-recent:has(.mlc3-recent__empty--rich) {
  display: flex;
  flex-direction: column;
}

/* ===================================================================
 * v0.7.8.3 — Today's Plan rich card details
 *   (eyebrow, chips, progress bar, context line, secondary CTA)
 * Applies to all three stage cards (READ / PRACTICE / REVIEW).
 * =================================================================== */

/* Eyebrow — small grey topic / rationale label above the title */
.medexp-dashboardPage .mlc3-stage__eyebrow {
  margin: 8px 0 0 !important;
  font: 700 10.5px/1.2 'Rethink Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mlc3-muted, #5f6b7a);
}
.medexp-dashboardPage .mlc3-stage.is-active .mlc3-stage__eyebrow {
  color: var(--mlc3-brand-teal-dark, #007e5a);
}

/* Tighten the title margin when it sits under an eyebrow */
.medexp-dashboardPage .mlc3-stage__eyebrow + .mlc3-stage__title {
  margin-top: 4px !important;
}

/* Composition chips (PRACTICE topic mix · REVIEW SRS state) */
.medexp-dashboardPage .mlc3-stage__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.medexp-dashboardPage .mlc3-stage__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 7px;
  border-radius: 999px;
  background: var(--mlc3-surface, #fff);
  border: 1px solid var(--mlc3-border, #e5e9f0);
  font: 600 11.5px/1 'Rethink Sans', sans-serif;
  color: var(--mlc3-text-soft, #1f2937);
  white-space: nowrap;
  max-width: 100%;
}
.medexp-dashboardPage .mlc3-stage__chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mlc3-brand-teal-soft, #e6f7f1);
  color: var(--mlc3-brand-teal-dark, #007e5a);
  font: 800 11px/1 'Rethink Sans', sans-serif;
}
.medexp-dashboardPage .mlc3-stage__chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16ch;
}

/* SRS state chips — hue per state for instant scan-ability */
.medexp-dashboardPage .mlc3-stage__chip--new .mlc3-stage__chip-count {
  background: var(--mlc3-brand-blue-soft, #e9eef9);
  color: var(--mlc3-brand-blue, #1a4f9c);
}
.medexp-dashboardPage .mlc3-stage__chip--new {
  border-color: rgba(26, 79, 156, .25);
}
.medexp-dashboardPage .mlc3-stage__chip--review .mlc3-stage__chip-count {
  background: var(--mlc3-brand-teal-soft, #e6f7f1);
  color: var(--mlc3-brand-teal-dark, #007e5a);
}
.medexp-dashboardPage .mlc3-stage__chip--review {
  border-color: rgba(0, 166, 118, .25);
}
.medexp-dashboardPage .mlc3-stage__chip--learning .mlc3-stage__chip-count {
  background: rgba(255, 159, 28, .18);
  color: #b45309;
}
.medexp-dashboardPage .mlc3-stage__chip--learning {
  border-color: rgba(255, 159, 28, .35);
}

/* Progress bar (READ — per-course completion %) */
.medexp-dashboardPage .mlc3-stage__progress {
  margin: 0 0 12px;
}
.medexp-dashboardPage .mlc3-stage__progress-bar {
  position: relative;
  height: 6px;
  background: var(--mlc3-border-soft, #eef1f6);
  border-radius: 999px;
  overflow: hidden;
}
.medexp-dashboardPage .mlc3-stage__progress-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
  transition: width .4s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1));
}
.medexp-dashboardPage .mlc3-stage__progress-caption {
  margin-top: 4px;
  font: 600 11px/1.3 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
}

/* Context line (PRACTICE last-week stats · REVIEW overdue warning) */
.medexp-dashboardPage .mlc3-stage__context {
  margin: 0 0 12px !important;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--mlc3-surface-2, #f8fbfd);
  border: 1px solid var(--mlc3-border-soft, #eef1f6);
  font: 500 11.5px/1.4 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
}
.medexp-dashboardPage .mlc3-stage.is-active .mlc3-stage__context {
  background: rgba(255, 255, 255, .55);
  border-color: rgba(0, 166, 118, .18);
}

/* Secondary CTA (READ "Browse all lessons" · etc.) */
.medexp-dashboardPage .mlc3-stage__cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.medexp-dashboardPage .mlc3-stage__cta-secondary {
  font: 600 12px/1 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
  text-decoration: none;
  padding: 8px 6px;
  border-radius: 8px;
  transition: color .12s ease, background .12s ease;
}
.medexp-dashboardPage .mlc3-stage__cta-secondary:hover {
  color: var(--mlc3-brand-teal-dark, #007e5a);
  background: var(--mlc3-surface-2, #f8fbfd);
}

/* Slightly tighter meta line so the new chips/progress have room */
.medexp-dashboardPage .mlc3-stage__meta {
  margin-bottom: 10px !important;
  flex: 0 1 auto !important;
}

/* Performance snapshot empty state — fired when no mastery rows are
   rendered. Uses the existing :has() to detect an empty list. */
.medexp-dashboardPage .mlc3-focus-card .tw-focusAreasList:empty {
  display: none;
}
.medexp-dashboardPage .mlc3-focus-card:has(.tw-focusAreasList:empty)::after,
.medexp-dashboardPage .mlc3-focus-card:has(.mlc3-focus-card__list:empty)::after {
  content: "Answer a few practice questions and your weakest topics will appear here. The list updates as you progress.";
  display: block;
  padding: 14px 16px;
  margin: 4px 0 8px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 166, 118, .04) 0%, rgba(26, 79, 156, .03) 100%);
  border: 1px dashed var(--mlc3-border, #e5e9f0);
  font: 500 13px/1.5 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
  text-align: center;
}

/* ===================================================================
 * v0.7.9.5 — Performance snapshot empty state
 *   Substantive empty state for the Focus areas list when the learner
 *   has no qbank data yet. Replaces the one-line "Answer more questions"
 *   message so the panel fills the column height and gives the learner
 *   a clear next action.
 * =================================================================== */
.medexp-dashboardPage .mlc3-focus-empty {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 4px 8px;
}
.medexp-dashboardPage .mlc3-focus-empty__head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top left, rgba(0, 166, 118, .08), transparent 60%),
    linear-gradient(135deg, rgba(0, 166, 118, .04), rgba(26, 79, 156, .04));
  border: 1px solid var(--mlc3-border-soft, #eef1f6);
}
.medexp-dashboardPage .mlc3-focus-empty__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-blue, #1a4f9c));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px -6px rgba(0, 166, 118, .55);
}
.medexp-dashboardPage .mlc3-focus-empty__title {
  margin: 0 !important;
  font: 800 15px/1.25 'Rethink Sans', sans-serif;
  letter-spacing: -.012em;
  color: var(--mlc3-text, #0b1324);
}
.medexp-dashboardPage .mlc3-focus-empty__sub {
  margin: 4px 0 0 !important;
  font: 500 12.5px/1.45 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a);
}
/* Ghost placeholder rows — show the SHAPE of what's coming. */
.medexp-dashboardPage .mlc3-focus-empty__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.medexp-dashboardPage .mlc3-focus-empty__row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1.4fr) 90px 44px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--mlc3-surface-2, #f8fbfd);
  border: 1px dashed var(--mlc3-border-soft, #eef1f6);
  opacity: .55;
}
.medexp-dashboardPage .mlc3-focus-empty__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--mlc3-border, #e5e9f0);
}
.medexp-dashboardPage .mlc3-focus-empty__name {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mlc3-border, #e5e9f0), var(--mlc3-border-soft, #eef1f6));
  width: 60%;
}
.medexp-dashboardPage .mlc3-focus-empty__row:nth-child(2) .mlc3-focus-empty__name { width: 75%; }
.medexp-dashboardPage .mlc3-focus-empty__row:nth-child(3) .mlc3-focus-empty__name { width: 50%; }
.medexp-dashboardPage .mlc3-focus-empty__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--mlc3-border-soft, #eef1f6);
}
.medexp-dashboardPage .mlc3-focus-empty__pct {
  height: 10px; width: 28px;
  border-radius: 999px;
  background: var(--mlc3-border, #e5e9f0);
  justify-self: end;
}

/* CTA row — primary + ghost. */
.medexp-dashboardPage .mlc3-focus-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.medexp-dashboardPage .mlc3-focus-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--mlc3-brand-teal, #00a676), var(--mlc3-brand-teal-dark, #007e5a));
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font: 800 13px/1 'Rethink Sans', sans-serif;
  text-decoration: none !important;
  box-shadow: 0 8px 18px -10px rgba(0, 166, 118, .55);
  transition: transform .12s var(--mlc3-ease-snap, cubic-bezier(.2,.9,.3,1)), box-shadow .15s ease;
}
.medexp-dashboardPage .mlc3-focus-empty__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(0, 166, 118, .60);
}
.medexp-dashboardPage .mlc3-focus-empty__cta-ghost {
  font: 600 12.5px/1 'Rethink Sans', sans-serif;
  color: var(--mlc3-muted, #5f6b7a) !important;
  -webkit-text-fill-color: var(--mlc3-muted, #5f6b7a) !important;
  text-decoration: none !important;
  padding: 8px 6px;
  border-radius: 8px;
}
.medexp-dashboardPage .mlc3-focus-empty__cta-ghost:hover {
  color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  -webkit-text-fill-color: var(--mlc3-brand-teal-dark, #007e5a) !important;
  background: var(--mlc3-surface-2, #f8fbfd);
}

/* ---------------------------------------------------------------
 * 29. Print sanity (final)
 * --------------------------------------------------------------- */
@media print {
  .mlc3-mochi-floater,
  .tw-tourOverlay,
  .tw-tourSpotlight,
  .tw-tourTip { display: none !important; }
  .mlc3-resume {
    background: #fff !important; color: #0b1324 !important;
    box-shadow: none !important; animation: none !important;
  }
}